@things-factory/figure-ui 10.1.225 → 10.1.227

package/dist-client/types.d.ts

@@ -44,9 +44,9 @@ export interface Figure {
     } | null;
 }
 /**
- * 발행된 판 하나.
+ * 발행된 버전 하나.
  *
- * 저작 중 저장은 여기 오지 않는다 — 판본은 발행에서만 생긴다.
+ * 저작 중 저장은 여기 오지 않는다 — 버전은 발행에서만 생긴다.
  */
 export interface FigureVersion {
     version: number;

package/dist-client/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../client/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\n * 화면이 다루는 모양. 피규어 자산의 타입은 `@hatiolab/figure-model` 이 정한다 — 여기서 다시 적지 않는다.\n */\n\n/** 서버가 돌려주는 Figure 한 벌. `source` 는 상세 또는 저작면을 열 때만 받는다. */\nexport interface Figure {\n  id: string\n  /** 컴포넌트 타입 이름. **만든 뒤에 고칠 수 없다.** */\n  type: string\n  /** Namespace of the full name {namespace}/{type} (ADR-0114). */\n  namespace?: string | null\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  /** 피규어 자산 JSON 문자열. 목록 질의에는 실려 오지 않는다. */\n  source?: string\n  properties?: string\n  version?: number\n  /** Retired: still released and served, no longer offered for new use. */\n  deprecated?: boolean\n  /** The type to use instead of a retired figure, in the same domain. */\n  supersededBy?: string | null\n  /** Public: other domains read its releases and draw it by full name (LV figure-server design G2). */\n  public?: boolean\n  /** The domain it belongs to; carried by another domain's public figure, so a screen says whose it is. */\n  domain?: { id: string; name?: string; subdomain?: string } | null\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  /** 발행 전 초안에서만 받는다 — 발행된 뒤에는 문이 거절한다(ADR-0063 결정 4). */\n  type?: string\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 * `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":"AAAA;;GAEG","sourcesContent":["/**\n * 화면이 다루는 모양. 피규어 자산의 타입은 `@hatiolab/figure-model` 이 정한다 — 여기서 다시 적지 않는다.\n */\n\n/** 서버가 돌려주는 Figure 한 벌. `source` 는 상세 또는 저작면을 열 때만 받는다. */\nexport interface Figure {\n  id: string\n  /** 컴포넌트 타입 이름. **만든 뒤에 고칠 수 없다.** */\n  type: string\n  /** Namespace of the full name {namespace}/{type} (ADR-0114). */\n  namespace?: string | null\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  /** 피규어 자산 JSON 문자열. 목록 질의에는 실려 오지 않는다. */\n  source?: string\n  properties?: string\n  version?: number\n  /** Retired: still released and served, no longer offered for new use. */\n  deprecated?: boolean\n  /** The type to use instead of a retired figure, in the same domain. */\n  supersededBy?: string | null\n  /** Public: other domains read its releases and draw it by full name (LV figure-server design G2). */\n  public?: boolean\n  /** The domain it belongs to; carried by another domain's public figure, so a screen says whose it is. */\n  domain?: { id: string; name?: string; subdomain?: string } | null\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  /** 발행 전 초안에서만 받는다 — 발행된 뒤에는 문이 거절한다(ADR-0063 결정 4). */\n  type?: string\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 * `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

@@ -11,7 +11,7 @@ import { hasBeenReleased } from '../figure-released.js';
  * 그림을 부르는 주소.
  *
  * **base64 를 목록 응답에 실어 오지 않는다.** data URL 은 브라우저가 캐시할 수 없어, 카탈로그를
- * 열 때마다 그림 전부가 다시 온다([확인함] 표본 14개 227KB). 주소로 부르면 캐시가 되고, 판을
+ * 열 때마다 그림 전부가 다시 온다([확인함] 표본 14개 227KB). 주소로 부르면 캐시가 되고, 버전을
  * 가리는 `v` 가 바뀐 것만 다시 받는다. 내주는 자리는 `figure-thumbnail-router` 다.
  *
  * 도메인 조각(`/domain/{subdomain}`)은 셸이 쓰는 것과 같은 함수로 읽는다 — 화면이 주소를

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":"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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 '@operato/data-grist/ox-card-thumb.js'\nimport '@things-factory/figure-viewer/dist-client/figure-thumb-mark.js'\nimport { getPathInfo } from '@operato/utils'\n\nimport type { Figure } from '../types.js'\nimport { hasBeenReleased } from '../figure-released.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 * 카드의 그림 칸. 그림 · 그림 없음 · 초안 표시는 모든 카드 카탈로그의 `ox-card-thumb`(@operato/data-grist)가\n * 그리고, 여기서는 그 위에 이 카탈로그의 것(태그 · 삭제)만 얹는다(ADR-0117 개정 2026-10-13).\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      display: block;\n      width: 100%;\n      height: 100%;\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  /** Another domain's public figure (G2): its card says whose it is and offers no delete. */\n  @property({ type: Boolean }) readonly = false\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      <ox-card-thumb\n        src=${src || ''}\n        alt=${figure.name || ''}\n        badge=${this.readonly ? figure.domain?.name ?? '' : figure.deprecated ? i18next.t('figure.label.retired') : figure.state === 'released' ? '' : i18next.t('figure.label.draft')}\n      >\n        <figure-thumb-mark slot=\"empty\" .label=${i18next.t('figure.text.thumbnail-not-made-yet')}></figure-thumb-mark>\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      ${this.readonly || hasBeenReleased(figure) ? '' : html`<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      </ox-card-thumb>\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 '@operato/data-grist/ox-card-thumb.js'\nimport '@things-factory/figure-viewer/dist-client/figure-thumb-mark.js'\nimport { getPathInfo } from '@operato/utils'\n\nimport type { Figure } from '../types.js'\nimport { hasBeenReleased } from '../figure-released.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 * 카드의 그림 칸. 그림 · 그림 없음 · 초안 표시는 모든 카드 카탈로그의 `ox-card-thumb`(@operato/data-grist)가\n * 그리고, 여기서는 그 위에 이 카탈로그의 것(태그 · 삭제)만 얹는다(ADR-0117 개정 2026-10-13).\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      display: block;\n      width: 100%;\n      height: 100%;\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  /** Another domain's public figure (G2): its card says whose it is and offers no delete. */\n  @property({ type: Boolean }) readonly = false\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      <ox-card-thumb\n        src=${src || ''}\n        alt=${figure.name || ''}\n        badge=${this.readonly ? figure.domain?.name ?? '' : figure.deprecated ? i18next.t('figure.label.retired') : figure.state === 'released' ? '' : i18next.t('figure.label.draft')}\n      >\n        <figure-thumb-mark slot=\"empty\" .label=${i18next.t('figure.text.thumbnail-not-made-yet')}></figure-thumb-mark>\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      ${this.readonly || hasBeenReleased(figure) ? '' : html`<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      </ox-card-thumb>\n    `\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.225",
+  "version": "10.1.227",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -27,8 +27,8 @@
     "clean": "npm run clean:server && npm run clean:client"
   },
   "dependencies": {
-    "@hatiolab/figure-model": "^0.12.0",
-    "@hatiolab/things-scene": "^10.1.102",
+    "@hatiolab/figure-model": "^0.12.1",
+    "@hatiolab/things-scene": "^10.1.104",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.29.43",
     "@operato/graphql": "^10.29.43",
@@ -39,14 +39,14 @@
     "@operato/p13n": "^10.29.43",
     "@operato/popup": "^10.29.43",
     "@operato/shell": "^10.29.43",
-    "@operato/slot-layout-editor": "^10.29.57",
+    "@operato/slot-layout-editor": "^10.29.58",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.29.43",
-    "@things-factory/ai-assistant": "^10.1.223",
-    "@things-factory/figure-service": "^10.1.224",
-    "@things-factory/figure-viewer": "^10.1.224",
-    "@things-factory/setting-base": "^10.1.223",
+    "@things-factory/ai-assistant": "^10.1.227",
+    "@things-factory/figure-service": "^10.1.227",
+    "@things-factory/figure-viewer": "^10.1.227",
+    "@things-factory/setting-base": "^10.1.227",
     "three": "^0.185.1"
   },
-  "gitHead": "9929ca76f614ff84bea1f61dabe0e1b7f00cd18a"
+  "gitHead": "f66591e3864aab08a6fb93fb1fcf1c9de6b546ac"
 }

package/test/browser/detail-page.js

@@ -26,7 +26,7 @@ async function start() {
   const kept = document.createElement('output'); kept.setAttribute('aria-label','썸네일')
   dock.keepThumbnail = async (id, url) => { kept.textContent = `${id} ${url.slice(0, 15)} ${url.length}` }
   const controls = document.createElement('nav')
-  for (const [label, id] of [['클립 모델 열기','motion'],['연결 오류 시험','retry'],['깨진 발행판 시험','invalid'],['느린 모델 열기','slow']]) {
+  for (const [label, id] of [['클립 모델 열기','motion'],['연결 오류 시험','retry'],['깨진 발행 버전 시험','invalid'],['느린 모델 열기','slow']]) {
     const button = document.createElement('button'); button.textContent = label
     button.onclick = () => void dock.show(id); controls.append(button)
   }

package/test/browser/editing-page.js

@@ -96,7 +96,7 @@ window.editing = {
   propertyInputs() {
     /* The panel shown: the properties, or the 「반응형」 tab a check pressed. */
     const panel = editor().renderRoot.querySelector('div[panel]:not([off])')
-    return [...panel.querySelectorAll('input')].map(i => i.getAttribute('aria-label'))
+    return [...panel.querySelectorAll('input')].map(i => (i.dataset?.field ?? i.getAttribute('aria-label')))
   },
   /** The page point of the first element a selector finds -- anywhere on the page, or inside the `host` elements -- and what it says. */
   at(selector, host) {
@@ -126,13 +126,13 @@ window.editing = {
   },
   /** The page point of a field's label: the axis letter of a row's cell, or a single field's name. */
   fieldLabel(id) {
-    const input = deep('input').find(i => i.getAttribute('aria-label') === id)
+    const input = deep('input').find(i => (i.dataset?.field ?? i.getAttribute('aria-label')) === id)
     const label = input?.closest('div[cell]')?.querySelector('span[axis]') ?? input?.previousElementSibling
     return label ? centreOf(label) : null
   },
   /** What a field shows now. */
   fieldValue(id) {
-    return deep('input').find(i => i.getAttribute('aria-label') === id)?.value ?? null
+    return deep('input').find(i => (i.dataset?.field ?? i.getAttribute('aria-label')) === id)?.value ?? null
   },
   /** How a clip track's head is laid out: its name, the repeat choice and the remove button, as boxes on the page. */
   trackHead() {

package/test/browser/editing.check.mjs

@@ -314,11 +314,11 @@ describe('the material: colours by purpose, one step each, a glow drawn while dr
   })
 
   /*
-    A round body's measures are the 「배치」 tab's size editor (2026-10-24): its across said as a diameter, written as the
+    A round body's measures are the 「크기」 tab's size editor (2026-10-24): its across said as a diameter, written as the
     radius it halves to. The editor writes on change; it draws nothing while a number is typed.
   */
   test('a diameter typed on the arrangement tab is written once when it is left, as the radius it halves to', async () => {
-    await click(await read(() => probe.tab('figure.label.tab-arrangement')))
+    await click(await read(() => probe.tab('figure.label.tab-short-response')))
     const start = await revision()
     await type('drum X · figure.label.size-diameter figure.label.size-measure', '600')
     assert.equal(await revision(), start, 'nothing written yet')
@@ -332,7 +332,7 @@ describe('the material: colours by purpose, one step each, a glow drawn while dr
 })
 
 /*
-  A box's size is the 「배치」 tab's size editor now (2026-10-24); the numbers in hand on the properties tab are its place,
+  A box's size is the 「크기」 tab's size editor now (2026-10-24); the numbers in hand on the properties tab are its place,
   in the position row.
 */
 describe('values in hand on the properties tab: drawn at once, written on change (user 2026-09-24)', () => {
@@ -374,7 +374,7 @@ describe('values in hand on the properties tab: drawn at once, written on change
   })
 })
 
-/* A size of the part's own on the 「배치」 tab's size editor is a value in hand as any field is (user 2026-09-24). */
+/* A size of the part's own on the 「크기」 tab's size editor is a value in hand as any field is (user 2026-09-24). */
 describe('a size in hand on the arrangement tab: drawn while typed or dragged, written once', () => {
   const WIDTH = 'box X figure.label.size-measure'
   const wide = async () => Math.round((await look('box')).size[0])
@@ -382,7 +382,7 @@ describe('a size in hand on the arrangement tab: drawn while typed or dragged, w
   before(async () => {
     await mount('box')
     await pick('box')
-    await click(await read(() => probe.tab('figure.label.tab-arrangement')))
+    await click(await read(() => probe.tab('figure.label.tab-short-response')))
   })
 
   test('a width typed is drawn while it is typed, and written once on Enter', async () => {

package/test/browser/links-page.js

@@ -39,7 +39,7 @@ window.look = {
   all(selector, text) {
     return deep(selector)
       .filter(saying(text))
-      .map(e => ({ text: words(e), disabled: !!e.disabled, open: !!e.open, value: e.value ?? null, label: e.getAttribute('aria-label'), readOnly: !!e.readOnly, spotlit: e.hasAttribute('spotlit') }))
+      .map(e => ({ text: words(e), disabled: !!e.disabled, open: !!e.open, value: e.value ?? null, label: e.dataset?.field ?? e.getAttribute('aria-label'), readOnly: !!e.readOnly, spotlit: e.hasAttribute('spotlit') }))
   },
   /** A face of the target box in the fastening drawing: whether it can be pressed now, and whether it is the one chosen. */
   face(f) {

package/test/browser/links.check.mjs

@@ -88,9 +88,8 @@ async function pick(part) {
   await click(await read(id => probe.row(id), part), `the row of ${part}`)
   await until(id => probe.state().selected === id, [part], `${part} selected`)
 }
-/* A side tab by its short name; with a part chosen, 「반응형」 is named 「배치」 (figure.label.tab-arrangement). */
-const tab = name =>
-  read(n => probe.tab(`figure.label.tab-short-${n}`) ?? (n === 'response' ? probe.tab('figure.label.tab-arrangement') : null), name).then(point => click(point, `the ${name} tab`))
+/* A side tab by its short name: one name whatever is picked (「크기」, sweep 2026-10-27 J2). */
+const tab = name => read(n => probe.tab(`figure.label.tab-short-${n}`), name).then(point => click(point, `the ${name} tab`))
 /** A fastening the part has is said in one line; 「바꾸기」 opens the fastening window on it. */
 async function changeFastening() {
   await until(() => look.all('button[change-fastening]').length === 1, [], 'the fastening said in one line')

package/test/browser/modeller-page.js

@@ -203,9 +203,9 @@ window.probe = {
     const l = Math.hypot(b.x - a.x, b.y - a.y) || 1
     return { x: (b.x - a.x) / l, y: (b.y - a.y) / l }
   },
-  /** The page point of an input or checkbox by its aria-label. */
+  /** The page point of an input or checkbox by its field id (data-field) or its aria-label. */
   labelled(label) {
-    const input = deep('input').find(i => i.getAttribute('aria-label') === label)
+    const input = deep('input').find(i => (i.dataset?.field ?? i.getAttribute('aria-label')) === label)
     return input ? centreOf(input) : null
   },
   /** The page point of a button by an attribute it carries. */
@@ -262,7 +262,7 @@ window.probe = {
   focused() {
     let at = document.activeElement
     while (at?.shadowRoot?.activeElement) at = at.shadowRoot.activeElement
-    return at ? { tag: at.localName, label: at.getAttribute('aria-label') } : null
+    return at ? { tag: at.localName, label: at.dataset?.field ?? at.getAttribute('aria-label') } : null
   },
   /** The page point of an input by its aria-label, or of the part name field. */
   nameField() {
@@ -276,7 +276,7 @@ window.probe = {
   },
   /** Whether an input with this label is on the page. */
   hasInput(label) {
-    return deep('input').some(i => i.getAttribute('aria-label') === label)
+    return deep('input').some(i => (i.dataset?.field ?? i.getAttribute('aria-label')) === label)
   },
   /** The page point of a part's row in the parts list. */
   row(id) {

package/test/browser/modeller-revision.check.mjs

@@ -74,7 +74,7 @@ describe('work counted on the robot arm', () => {
 
   /*
     The tabs are drawn out of sight with the rest: the selected part's motion is evaluated at its two ends, and the size
-    editor on 「배치」 asks once which of the parent's axes each of the part's own lies along, the figure at rest
+    editor on 「크기」 asks once which of the parent's axes each of the part's own lies along, the figure at rest
     (figureAxisPairsOf, ADR-0159 3) -- one evaluation for all three rows.
   */
   test('picking a part on the canvas compiles nothing; it evaluates the two ends of the part\'s motion and its axes at rest', async () => {
@@ -98,8 +98,8 @@ describe('work counted on the robot arm', () => {
     ends, and its axes paired at rest for the size editor once more on the new version.
   */
   test('a value typed into its field: the edit and its read, and nothing else while it is drawn', async () => {
-    /* The part's measures are the 「배치」 tab's size editor (2026-10-24). */
-    await click(await read(() => probe.tab('figure.label.tab-arrangement')))
+    /* The part's measures are the 「크기」 tab's size editor (2026-10-24). */
+    await click(await read(() => probe.tab('figure.label.tab-short-response')))
     await settled()
     const field = await read(() => {
       const deep = (root = document) => [...root.querySelectorAll('input[type=number]')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
@@ -189,8 +189,8 @@ describe('the edit canvas and the preview stay standing', () => {
   test('a value changed beside the preview is drawn inside the scene that stands', async () => {
     await click(await read(() => probe.row('box')))
     await sleep(300)
-    /* The box's size is the 「배치」 tab's (2026-10-24). */
-    await click(await read(() => probe.tab('figure.label.tab-arrangement')))
+    /* The box's size is the 「크기」 tab's (2026-10-24). */
+    await click(await read(() => probe.tab('figure.label.tab-short-response')))
     await sleep(300)
     const field = await read(() => probe.labelled('box Y figure.label.size-measure'))
     assert.ok(field, 'the height field')

package/test/browser/modeller.check.mjs

@@ -54,10 +54,10 @@ async function click(point) {
   await sleep(400)
 }
 /*
-  A side tab pressed, by its short name; how a part answers a size is the 「반응형」 tab's (user 2026-10-17), named
-  「배치」 (figure.label.tab-arrangement) while a part is chosen.
+  A side tab pressed, by its short name; how a part answers a size is the 「크기」 tab's (user 2026-10-17, one name
+  whatever is picked since the sweep of 2026-10-27, J2).
 */
-const tab = async name => click(await read(n => probe.tab(`figure.label.tab-short-${n}`) ?? (n === 'response' ? probe.tab('figure.label.tab-arrangement') : null), name))
+const tab = async name => click(await read(n => probe.tab(`figure.label.tab-short-${n}`), name))
 
 const KEYS = { translate: 'KeyW', rotate: 'KeyE', scale: 'KeyR' }
 
@@ -430,7 +430,7 @@ describe('a figure made in the modeller is given its size from its parts (user 2
     const field = id =>
       page().evaluateHandle(id => {
         const deep = (root = document) => [...root.querySelectorAll('input')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-        return deep().find(i => i.getAttribute('aria-label') === id) ?? null
+        return deep().find(i => (i.dataset?.field ?? i.getAttribute('aria-label')) === id) ?? null
       }, id)
     const declared = () =>
       page().evaluate(() => {
@@ -474,7 +474,7 @@ describe('a figure made in the modeller is given its size from its parts (user 2
     const field = () =>
       page().evaluateHandle(() => {
         const deep = (root = document) => [...root.querySelectorAll('input')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
-        return deep().find(i => i.getAttribute('aria-label') === 'size.x.max') ?? null
+        return deep().find(i => (i.dataset?.field ?? i.getAttribute('aria-label')) === 'size.x.max') ?? null
       })
     /* Selected where it is drawn, as a person does, then typed over. */
     const typeOver = async keys => {

package/test/browser/parts.check.mjs

@@ -76,9 +76,9 @@ async function press(...keys) {
   for (const key of keys.slice(0, -1).reverse()) await page().keyboard.up(key)
   await sleep(400)
 }
-/* A side tab by its short name; with a part chosen, 「반응형」 is named 「배치」 (figure.label.tab-arrangement). */
+/* A side tab by its short name: one name whatever is picked (「크기」, sweep 2026-10-27 J2). */
 async function tab(name) {
-  await click(await read(n => probe.tab(`figure.label.tab-short-${n}`) ?? (n === 'response' ? probe.tab('figure.label.tab-arrangement') : null), name), `the ${name} tab`)
+  await click(await read(n => probe.tab(`figure.label.tab-short-${n}`), name), `the ${name} tab`)
 }
 
 describe('the parts list: each button does what it says, one step of the session each', () => {

package/test/browser/product-page.check.mjs

@@ -189,6 +189,9 @@ describe('the first save of a new figure', () => {
   })
 
   test('the question asks the name first, focused, with the type written before', async () => {
+    /* A new figure saves once it has a part (sweep 2026-10-27 U24): the start's box. */
+    assert.equal(await read(() => product.deep('figure-editor >>> button[save]')[0].disabled), true, 'nothing to save before a part')
+    await press('figure-editor >>> button[start-shape="box"]', 'a box from the start')
     await press('button[save]', 'save')
     await until(() => product.deep('figure-first-save')[0]?.shadowRoot.querySelector('#type'), 'the first save asked')
     await until(() => { let a = document.activeElement; while (a?.shadowRoot?.activeElement) a = a.shadowRoot.activeElement; return a?.id === 'name' }, 'the name focused')
@@ -283,6 +286,8 @@ describe('opening another figure', () => {
     await read(() => product.deep('figure-editor')[0].updateComplete)
     assert.equal(await read(() => product.deep('figure-editor >>> section[empty-figure]').length), 0)
     assert.equal(await read(() => product.page().context.title), 'figure.label.figure')
+    /* Named by the address before it is read: the rail marks the catalogue, not "new figure" (sweep 2026-10-27 U30). */
+    assert.equal(await read(() => product.page().context.menu), 'figure-list')
     await read(() => window.letB())
     await until(() => product.page().shadowRoot.querySelector('label[type-field] input')?.value === 'type-b', 'b\'s type')
   })
@@ -603,6 +608,7 @@ describe('the page around the figure: the shell, the dock, the properties', () =
     assert.deepEqual(await read(() => assistant.surface.anchor()), { anchorType: 'figure', anchorId: creationId })
     assert.deepEqual(await read(() => { const { figureId, editorMode } = assistant.surface.hostContext(); return { figureId, editorMode } }), { figureId: creationId, editorMode: 'new' })
     assert.equal((await read(() => product.context())).menu, undefined)
+    await press('figure-editor >>> button[start-shape="box"]', 'a box from the start')
     await rename('Gate')
     await read(() => { assistant.forget(); product.forget() })
     await press('button[save]', 'save')

package/test/browser/props.check.mjs

@@ -94,10 +94,9 @@ const groupsInOrder = () =>
       .map(([name]) => name)
   })
 
-/* A side tab pressed, by its name; with a part chosen, 「반응형」 is named 「배치」 (figure.label.tab-arrangement). */
+/* A side tab pressed, by its name: one name whatever is picked (「크기」, sweep 2026-10-27 J2). */
 async function tab(name) {
-  const named = `aside button[tab][aria-label="figure.label.tab-short-${name}"]`
-  await press(name === 'response' ? `${named}, aside button[tab][aria-label="figure.label.tab-arrangement"]` : named, `the ${name} tab`)
+  await press(`aside button[tab][aria-label="figure.label.tab-short-${name}"]`, `the ${name} tab`)
   await read(() => document.querySelector('figure-editor').updateComplete)
 }
 
@@ -152,7 +151,7 @@ describe('the side: six tabs, the view and the releases from the bar', () => {
 describe('a part\'s groups in one order, whatever its state', () => {
   before(() => mount('rollers'))
 
-  /* A box's size is the 「배치」 tab's (2026-10-24): it has no measures of its own shape left on the properties. */
+  /* A box's size is the 「크기」 tab's (2026-10-24): it has no measures of its own shape left on the properties. */
   test('a part fastened in a row: name, place, look, more; on 「반응형」 its size and its row', async () => {
     await pick('roller')
     await tab('properties')

package/test/browser/row-preview.check.mjs

@@ -60,10 +60,10 @@ describe('a row\'s preview follows its basis', () => {
     const at = await read(() => probe.row('bin'))
     await page().mouse.click(at.x, at.y)
     await until(() => probe.state().selected === 'bin', [], 'bin selected')
-    /* The row is the 「반응형」 tab's (user 2026-10-17), named 「배치」 while a part is chosen (figure.label.tab-arrangement). */
-    const tab = await read(() => probe.tab('figure.label.tab-arrangement'))
+    /* The row is the 「반응형」 tab's (user 2026-10-17), named 「크기」 (sweep 2026-10-27 J2). */
+    const tab = await read(() => probe.tab('figure.label.tab-short-response'))
     await page().mouse.click(tab.x, tab.y)
-    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === 'figure.label.tab-arrangement', [], 'the 배치 tab on')
+    await until(() => document.querySelector('figure-editor').shadowRoot.querySelector('button[tab][on]')?.getAttribute('aria-label') === 'figure.label.tab-short-response', [], 'the 크기 tab on')
     await click('details[row-fold] > summary', {}, 'the row\'s fold')
   })
 

package/test/browser/screen.check.mjs

@@ -82,8 +82,8 @@ const tabOn = () => read(() => screenCheck.editor().shadowRoot.querySelector('bu
 const pressBar = action => press(action, a => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').shadowRoot.querySelector(`button[data-action=${a}]`), action)
 const pressTab = name => press(name, name => screenCheck.editor().shadowRoot.querySelector(`button[tab][aria-label="${name}"]`), name)
 const TAB = name => `figure.label.tab-short-${name}`
-/* 「반응형」 while a part is chosen: named by what it holds for the part, its size and arrangement (2026-10-24). */
-const ARRANGEMENT = 'figure.label.tab-arrangement'
+/* The size tab, one name whatever is picked (「크기」, sweep 2026-10-27 J2; it was 「배치」 while a part was chosen). */
+const ARRANGEMENT = 'figure.label.tab-short-response'
 /*
   The view settings or the releases, opened from the bar over the work (they were tabs once); left open if open. The
   releases open from 「발행」, the bar's one way to them (user 2026-10-18).
@@ -220,7 +220,9 @@ describe('the frame: parts · canvas · one side of seven tabs, and the bar over
   test('the bar: undo and redo with their keys, the status, save, and the left pane folded to give the canvas its width', async () => {
     assert.equal(await read(() => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').pane === screenCheck.editor().shadowRoot.querySelector('ox-three-pane')), true, 'the bar folds the editor\'s own frame')
     const titles = await read(() => ['undo', 'redo'].map(a => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar').shadowRoot.querySelector(`button[data-action=${a}]`).title))
-    assert.ok(titles[0].endsWith('(Ctrl+Z)') && titles[1].endsWith('(Ctrl+Y)'), `the keys in the titles: ${titles}`)
+    /* The keys as this platform writes them (sweep 2026-10-27 U26): ⌘Z · ⇧⌘Z on a Mac, Ctrl+Z · Ctrl+Y elsewhere. */
+    const mac = await read(() => navigator.userAgent.includes('Mac'))
+    assert.ok(titles[0].endsWith(mac ? '(⌘Z)' : '(Ctrl+Z)') && titles[1].endsWith(mac ? '(⇧⌘Z)' : '(Ctrl+Y)'), `the keys in the titles: ${titles}`)
     /* Saved or not is the save button's: pressable with something to save, dimmed without -- no words beside it. */
     const status = () => read(() => screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar [role=status]')?.textContent.trim() ?? null)
     const saveOn = () => read(() => !screenCheck.editor().shadowRoot.querySelector('ox-canvas-bar button[save]').disabled)
@@ -228,7 +230,7 @@ describe('the frame: parts · canvas · one side of seven tabs, and the bar over
     assert.equal(await saveOn(), false, 'saved: the save button is dimmed')
 
     await pressRow('box')
-    /* A part's size is the 「배치」 tab's (2026-10-24). */
+    /* A part's size is the 「크기」 tab's (2026-10-24). */
     await pressTab(ARRANGEMENT)
     const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'box Y figure.label.size-measure'))
     await height.click({ clickCount: 3 })
@@ -339,10 +341,10 @@ describe('a part chosen: each tab in its place, the figure-wide tabs give way, t
     await pressTab(TAB('properties'))
     let now = await holds()
     assert.ok(now.subject, 'the part\'s head')
-    /* A box's size is the 「배치」 tab's, in its size editor (2026-10-24): the properties keep its place. */
+    /* A box's size is the 「크기」 tab's, in its size editor (2026-10-24): the properties keep its place. */
     assert.ok(now.links.includes('figure.label.group-place') && !now.links.includes('figure.label.group-size'), `the shape's links: ${now.links}`)
     assert.ok(now.material, 'its material')
-    /* How it answers a size has a tab of its own (user 2026-10-17, 「반응형」), named 「배치」 while a part is chosen. */
+    /* How it answers a size has a tab of its own (user 2026-10-17, 「반응형」), named 「크기」. */
     await pressTab(ARRANGEMENT)
     now = await holds()
     assert.ok(now.subject, 'the part\'s head')
@@ -732,7 +734,7 @@ describe('the camera follows a size typed far from the view (first 15 minutes, 2
   test('a width typed ten times larger fits the view again; a little wider leaves the camera where it is', async () => {
     await mount('box')
     await pressRow('box')
-    /* A part's size is the 「배치」 tab's (2026-10-24). */
+    /* A part's size is the 「크기」 tab's (2026-10-24). */
     await pressTab(ARRANGEMENT)
     await read(() => {
       const canvas = screenCheck.deep('figure-canvas')[0]
@@ -806,7 +808,7 @@ describe('a part\'s size row: a rule\'s numbers only where a rule sets every sid
   })
 
   /*
-    A box's size is the 「배치」 tab's size editor (2026-10-24), one row a side: made to follow on every side, each row
+    A box's size is the 「크기」 tab's size editor (2026-10-24), one row a side: made to follow on every side, each row
     shows the size the rule gives it, and the properties draw no size row.
   */
   test('a box made to follow the figure\'s size on every side shows the size the rule gives it', async () => {
@@ -848,7 +850,7 @@ describe('the side panel is found as it was left, per part', () => {
   before(() => mount('arm'))
 
   /*
-    The part's properties fit a tall window since its size moved to 「배치」 (2026-10-24): a shorter one gives the panel
+    The part's properties fit a tall window since its size moved to 「크기」 (2026-10-24): a shorter one gives the panel
     something to scroll.
   */
   test('scrolled and a fold opened on one part; another part opens at its top; back, the first is as it was left', async () => {
@@ -1106,7 +1108,7 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
 
   test('an edit is judged as it stands on screen: the source the server is sent is the one edited', async () => {
     await pressRow('left')
-    /* A part's size is the 「배치」 tab's (2026-10-24). */
+    /* A part's size is the 「크기」 tab's (2026-10-24). */
     await pressTab(ARRANGEMENT)
     const height = await element('the height field', () => screenCheck.deep('input').find(i => i.getAttribute('aria-label') === 'left Y figure.label.size-measure'))
     await height.click({ clickCount: 3 })
@@ -1148,7 +1150,7 @@ describe('the modeller page: the editor with the page\'s figure panel, verdict a
     }
   })
 
-  /* The part's properties fit a tall window since its size moved to 「배치」 (2026-10-24): a shorter one scrolls. */
+  /* The part's properties fit a tall window since its size moved to 「크기」 (2026-10-24): a shorter one scrolls. */
   test('another figure opened starts its panels clean: a part of the same name opens at its top', async () => {
     const viewport = page().viewport()
     await page().setViewport({ ...viewport, height: 600 })

package/test/consumer-capabilities.test.ts

@@ -14,6 +14,7 @@ import {
   inputTableAt,
   namesWith,
   needsMissing,
+  needsOffered,
   partsAt,
   settingsIssues,
   settingsOf,
@@ -58,6 +59,12 @@ test('what a capability still needs: the item mark, a name; put on and off keeps
   assert.deepEqual(needsMissing(CARRIER, asset), ['item'])
   assert.deepEqual(needsMissing(CARRIER, { ...asset, item: true }), [])
   assert.deepEqual(needsMissing({ ...(CARRIER as object), needs: ['Holdable', ['Capacity', 'FlowNode']] } as never, asset), ['Holdable', 'Capacity | FlowNode'])
+  /* Offered as the tab offers it (sweep 2026-10-27 U19): the item tag, and the rungs that give what is needed -- never its names. */
+  assert.deepEqual(needsOffered(CARRIER, asset), { item: true, rungs: [], names: [] })
+  const holder = { ...(CARRIER as object), needs: [['Holdable', 'FlowNode'], ['Capacity', 'FlowNode']] } as never
+  assert.deepEqual(needsOffered(holder, asset), { item: false, rungs: ['hold', 'flow'], names: [] })
+  assert.deepEqual(needsOffered({ ...(CARRIER as object), needs: ['FlowNode'] } as never, asset), { item: false, rungs: ['flow'], names: [] })
+  assert.deepEqual(needsOffered({ ...(CARRIER as object), needs: ['Nowhere'] } as never, asset), { item: false, rungs: [], names: ['Nowhere'] })
   const held = editFigurePart(asset, { kind: 'set-capabilities', names: ['Capacity', 'Holdable'] })
   assert.deepEqual(namesWith(held, 'acme.Carrier', true), ['Capacity', 'Holdable', 'acme.Carrier'])
   assert.deepEqual(namesWith(editFigurePart(held, { kind: 'set-capabilities', names: namesWith(held, 'acme.Carrier', true) }), 'acme.Carrier', false), ['Capacity', 'Holdable'])

package/test/links.test.ts

@@ -630,7 +630,7 @@ test('팔레트의 통은 통의 크기로 서고, 세 축 모두 크기를 따
   assert.deepEqual(followableAxes(asset, 'tote'), ['x', 'y', 'z'])
   assert.deepEqual(gizmoReachOf(asset as never, 'tote').sizes, ['tote.dimension.width', 'tote.dimension.height', 'tote.dimension.depth'])
   const ko = wordsOf('ko')
-  assert.equal(ko['figure.label.face-inside-bottom'], '안쪽 바닥')
+  assert.equal(ko['figure.label.face-inside-bottom'], '안쪽 바닥면')
 })
 
 /*

package/test/refusals.test.ts

@@ -205,7 +205,7 @@ test('일상에서 코드로만 보이던 거절 넷 — 줄이 안 들어감 ·
     layout: { tiers: [{ tierNo: 1, anchorId: 'bin', mount: 'ON', position: { x: 0, y: 0, z: 0 }, rotation: 0, layout: { pattern: 'SINGLE', slot: { allowed: { width: 100, depth: 100, height: 100 }, accepts: ['TOTE'] } } }] }
   })
   const held = editRefusalOf(refusalOf(() => act(slotted, { kind: 'make-repeat', part: 'bin', axis: 'x', pitch: 150 })), say)
-  assert.ok(held.includes('bin') && held.includes('적재 위치 배치') && !held.includes('SURFACE_PROVENANCE'), held)
+  assert.ok(held.includes('bin') && held.includes('자리 배치') && !held.includes('SURFACE_PROVENANCE'), held)
   /* A new part named as the row's part is (its copies drawn under ids of their own): the same words as a rename. */
   assert.match(editRefusalOf(refusalOf(() => fm.addFigureBox(conveyor(), { id: 'roller', size: { x: 1, y: 1, z: 1 }, position: { x: 0, y: 0, z: 0 } })), keyed), /part-name-taken .*"name":"roller"/)
 })

package/test/resolve-ts-siblings.mjs

@@ -49,10 +49,10 @@ function tsSibling(specifier, parentURL, stripExtension) {
 
 /*
  * ── 패키지 이름 하나만 예외다: `@hatiolab/things-scene` (2026-09-24) ─────────────────────────
- * 이 패키지의 client 는 브라우저 코드이고, things-scene 은 판이 둘이다 — 브라우저용 `things-scene.mjs` 와
- * 서버 전송용 `things-scene-transfer.mjs`. Node 는 `exports` 의 `node` 조건으로 전송 판을 고르는데, 그 판에는
+ * 이 패키지의 client 는 브라우저 코드이고, things-scene 은 버전이 둘이다 — 브라우저용 `things-scene.mjs` 와
+ * 서버 전송용 `things-scene-transfer.mjs`. Node 는 `exports` 의 `node` 조건으로 전송 버전을 고르는데, 그 버전에는
  * figure 가 없다(`buildFigureGeometry` · `registerFigure` …). 모델러 소스를 Node 에서 시험하면 **브라우저가
- * 받을 판**을 봐야 맞다. 그래서 이 이름만 브라우저 판으로 되짚는다. 다른 패키지 이름은 그대로 둔다.
+ * 받을 버전**을 봐야 맞다. 그래서 이 이름만 브라우저 버전으로 되짚는다. 다른 패키지 이름은 그대로 둔다.
  */
 const SCENE_BROWSER_BUNDLE = (() => {
   try {