@things-factory/figure-ui 10.1.177 → 10.1.179

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,sCAAsC,CAAA;AAC7C,OAAO,gEAAgE,CAAA;AACvE,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;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aACrD,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FlB,AA9FY,CA8FZ;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;;cAED,GAAG,IAAI,EAAE;cACT,MAAM,CAAC,IAAI,IAAI,EAAE;gBACf,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;;iDAEjC,OAAO,CAAC,CAAC,CAAC,oCAAoC,CAAC;QACxF,MAAM,CAAC,IAAI,EAAE,MAAM;YACnB,CAAC,CAAC,IAAI,CAAA;cACA,MAAM,CAAC,IAAI,CAAC,GAAG,CACf,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;;0BAEC,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;2BACxC,CAAC,CAAQ,EAAE,EAAE;gBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAClF,CAAA;YACH,CAAC;;oBAEC,GAAG;;eAER,CACF;iBACI;YACT,CAAC,CAAC,EAAE;;;;gBAII,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;;;;;KAKJ,CAAA;IACH,CAAC;;AAlD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAAgB;AAjGhC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoJvB","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'\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\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=${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      <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.177",
+  "version": "10.1.179",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -18,7 +18,7 @@
   "scripts": {
     "build": "npm run build:server && npm run build:client",
     "test": "FIGURE_FREEZE_COMPILED=1 node --import ./test/resolve-ts-siblings.mjs --test test/*.test.ts",
-    "test:browser": "node --test test/browser/build.check.mjs test/browser/modeller.check.mjs test/browser/modeller-revision.check.mjs test/browser/editing.check.mjs test/browser/links.check.mjs test/browser/section.check.mjs test/browser/screen.check.mjs test/browser/product-page.check.mjs test/browser/parts.check.mjs test/browser/places-mesh.check.mjs test/browser/part-ids.check.mjs test/browser/fix-alignment.check.mjs test/browser/mesh-select.check.mjs test/browser/row-preview.check.mjs test/browser/detail-tabs.check.mjs test/browser/props.check.mjs",
+    "test:browser": "node --test test/browser/build.check.mjs test/browser/modeller.check.mjs test/browser/modeller-revision.check.mjs test/browser/editing.check.mjs test/browser/links.check.mjs test/browser/section.check.mjs test/browser/screen.check.mjs test/browser/product-page.check.mjs test/browser/parts.check.mjs test/browser/places-mesh.check.mjs test/browser/part-ids.check.mjs test/browser/fix-alignment.check.mjs test/browser/mesh-select.check.mjs test/browser/row-preview.check.mjs test/browser/detail-tabs.check.mjs test/browser/props.check.mjs test/browser/retire.check.mjs test/browser/namespace.check.mjs test/browser/public.check.mjs test/browser/category.check.mjs test/browser/property-section.check.mjs",
     "copy:files": "copyfiles -e \"./client/**/*.{ts,js,json}\" -u 1 \"./client/**/*\" dist-client",
     "build:client": "npm run copy:files && npx tsc --p ./client/tsconfig.json",
     "build:server": "npx tsc --p ./server/tsconfig.json",
@@ -31,8 +31,9 @@
     "@hatiolab/things-scene": "^10.1.91",
     "@material/web": "^2.0.0",
     "@operato/data-grist": "^10.0.0",
-    "@operato/graphql": "^10.0.0",
+    "@operato/graphql": "^10.29.36",
     "@operato/i18n": "^10.0.0",
+    "@operato/input": "^10.29.37",
     "@operato/layout": "^10.28.0",
     "@operato/markdown": "^10.23.0",
     "@operato/p13n": "^10.0.0",
@@ -41,11 +42,11 @@
     "@operato/slot-layout-editor": "^10.29.25",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/ai-assistant": "^10.1.177",
-    "@things-factory/figure-service": "^10.1.177",
+    "@things-factory/ai-assistant": "^10.1.179",
+    "@things-factory/figure-service": "^10.1.179",
     "@things-factory/figure-viewer": "^10.1.176",
-    "@things-factory/setting-base": "^10.1.176",
+    "@things-factory/setting-base": "^10.1.179",
     "three": "^0.185.1"
   },
-  "gitHead": "91da09c945ec5e77ab960074db8f53b9ea8ac534"
+  "gitHead": "4c8263b08e06b2b15f11dc0575c61a280a0d9e27"
 }

package/test/browser/category-page.js

@@ -0,0 +1,28 @@
+/*
+ * The modeller's properties panel with a server that allows a category vocabulary, or none (LV figure-server design
+ * G5). The figure is in memory; what the panel asks to change is kept, not saved.
+ */
+import 'figure-ui-client/modeller/figure-properties.js'
+import { createFigureProductSession } from 'figure-ui-client/modeller/product-session.js'
+import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+const source = serializeFigureAsset(addFigureBox(createFigureAsset('Mixer'), { id: 'body', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } }))
+const session = createFigureProductSession({ load: async id => ({ id, source }), save: async request => ({ id: 'f1', source: request.source }) })
+const asked = []
+
+const panel = document.createElement('figure-properties')
+panel.addEventListener('catalog', e => asked.push(e.detail))
+document.body.append(panel)
+
+window.harness = {
+  panel,
+  asked,
+  async show({ categories, category }) {
+    await session.open('f1')
+    panel.revision = session.revisionNow()
+    panel.figureId = 'f1'
+    panel.figureCategories = categories
+    panel.figureCategory = category
+    await panel.updateComplete
+  }
+}

package/test/browser/category.check.mjs

@@ -0,0 +1,54 @@
+/*
+ * The category in the modeller's properties panel (LV figure-server design G5): free text when the server has no
+ * vocabulary; with one, chosen from it, and fixed once the figure has one.
+ *
+ * Run:  node --test test/browser/category.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('category-page.js'), { width: 1200, height: 900 })
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const field = () =>
+  page().evaluate(() => {
+    const root = document.querySelector('figure-properties').shadowRoot
+    const select = root.querySelector('select[category]')
+    /* The page has no translations: the label reads its key. */
+    const label = [...root.querySelectorAll('div[field] label')].find(l => l.textContent.trim() === 'figure.label.category')
+    return select
+      ? { kind: 'select', disabled: select.disabled, value: select.value, options: [...select.options].map(o => o.value) }
+      : { kind: 'input', value: label?.nextElementSibling?.value ?? null }
+  })
+
+describe('the category field', () => {
+  test('free text without a vocabulary', async () => {
+    await page().evaluate(() => harness.show({ categories: null, category: 'conveyors' }))
+    assert.deepEqual(await field(), { kind: 'input', value: 'conveyors' })
+  })
+
+  test('with a vocabulary and none set: chosen from it, and the choice is asked for', async () => {
+    await page().evaluate(() => harness.show({ categories: ['EQUIPMENT', 'CARRIER'], category: undefined }))
+    assert.deepEqual(await field(), { kind: 'select', disabled: false, value: '', options: ['', 'EQUIPMENT', 'CARRIER'] })
+    await page().evaluate(() => {
+      const select = document.querySelector('figure-properties').shadowRoot.querySelector('select[category]')
+      select.value = 'CARRIER'
+      select.dispatchEvent(new Event('change'))
+    })
+    assert.deepEqual(await page().evaluate(() => harness.asked.at(-1)), { category: 'CARRIER' })
+  })
+
+  test('with a vocabulary and one set: shown, and not changed here', async () => {
+    await page().evaluate(() => harness.show({ categories: ['EQUIPMENT', 'CARRIER'], category: 'EQUIPMENT' }))
+    assert.deepEqual(await field(), { kind: 'select', disabled: true, value: 'EQUIPMENT', options: ['EQUIPMENT', 'CARRIER'] })
+  })
+})

package/test/browser/mesh-select.check.mjs

@@ -79,7 +79,7 @@ describe('a GLB imported on the modeller page: the part made is the one selected
     const file = join(mkdtempSync(join(tmpdir(), 'figure-glb-')), 'crane.glb')
     writeFileSync(file, Buffer.from('glTF'))
     const start = await editor()
-    const [chooser] = await Promise.all([page().waitForFileChooser({ timeout: 4000 }), clickAt('figure-parts >>> button[shape][title="figure.text.import-mesh-hint"]', 'the import button')])
+    const [chooser] = await Promise.all([page().waitForFileChooser({ timeout: 4000 }), clickAt('figure-parts >>> ox-input-file[mesh-file] >>> button', 'the import button')])
     await chooser.accept([file])
     await until(() => !!product.deep('figure-mesh-choice')[0], 'the question')
     await clickAt('figure-mesh-choice >>> li button', 'the whole file')

package/test/browser/namespace-page.js

@@ -0,0 +1,75 @@
+/*
+ * The namespace card of the settings and the first save's question, with the server's calls as stand-ins kept in
+ * memory (LV figure-server design G1). Nothing is saved.
+ */
+import 'figure-ui-client/setting-let/figure-namespace-setting-let.js'
+import 'figure-ui-client/modeller/figure-first-save.js'
+import { html, render } from 'lit'
+import { openPopup } from '@operato/layout'
+import { setOpenPopupImplementation } from '@operato/popup'
+import '@operato/popup/ox-floating-overlay.js'
+
+/* Popups, drawn as the layout draws them (as product-page.js does): an overlay in the body, the result given when it leaves. */
+let popups = 0
+setOpenPopupImplementation((template, options = {}) => {
+  const name = `$popup-${popups++}`
+  const fragment = document.createDocumentFragment()
+  render(html`<ox-floating-overlay id=${name} name=${name} .backdrop=${!!options.backdrop} .title=${options.title || ''} .size=${options.size || 'small'} .historical=${false}>${template}</ox-floating-overlay>`, fragment)
+  document.body.appendChild(fragment)
+  const handle = {
+    name,
+    close: () => {
+      const popup = document.getElementById(name)
+      if (!popup) return false
+      popup.close()
+      return true
+    },
+    closed: false
+  }
+  document.addEventListener('overlay-closed', function listener(e) {
+    if (e.detail !== name) return
+    document.removeEventListener('overlay-closed', listener)
+    handle.closed = true
+    handle.onclosed && handle.onclosed()
+  })
+  return handle
+})
+
+let rows = [
+  { id: '1', name: 'acme.example', state: 'active', isDefault: true },
+  { id: '2', name: 'acme-two.example', state: 'active', isDefault: false },
+  { id: '3', name: 'acme-old.example', state: 'suspended', isDefault: false }
+]
+const calls = []
+let refuse = ''
+const answer = name => rows.find(row => row.name === name)
+
+const card = document.createElement('figure-namespace-setting-let')
+/* The server answers the default first. */
+card.list = async () => [...rows].sort((a, b) => Number(b.isDefault) - Number(a.isDefault)).map(row => ({ ...row }))
+card.add = async name => {
+  calls.push(['add', name])
+  if (refuse) throw new Error(refuse)
+  rows = [...rows, { id: String(rows.length + 1), name, state: 'active', isDefault: false }]
+  return answer(name)
+}
+card.makeDefault = async name => {
+  calls.push(['default', name])
+  rows = rows.map(row => ({ ...row, isDefault: row.name === name }))
+  return answer(name)
+}
+card.setState = async (name, state) => {
+  calls.push(['state', name, state])
+  rows = rows.map(row => (row.name === name ? { ...row, state } : row))
+  return answer(name)
+}
+document.body.append(card)
+
+window.harness = {
+  card,
+  calls,
+  refuseWith: message => (refuse = message),
+  /** Opens the first save's question over these namespaces; resolves with what it closed with. */
+  ask: namespaces =>
+    openPopup(html`<figure-first-save .type=${'mixer'} .name=${'Mixer'} .taken=${[]} .namespaces=${namespaces}></figure-first-save>`, { backdrop: true, size: 'small', title: 'save' }).result
+}

package/test/browser/namespace.check.mjs

@@ -0,0 +1,104 @@
+/*
+ * The namespaces a domain owns (LV figure-server design G1): the settings card lists them, the default first, and adds
+ * one, makes one the default, suspends and uses one again; the server's refusal is said on the field. The first save
+ * asks the namespace only when there are several, the default chosen until another is.
+ *
+ * Run:  node --test test/browser/namespace.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('namespace-page.js'), { width: 1200, height: 900 })
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const inCard = (fn, ...args) =>
+  page().evaluate((source, a) => (0, eval)(`(${source})`)(document.querySelector('figure-namespace-setting-let').shadowRoot, ...a), String(fn), args)
+async function until(fn, what, ms = 15000) {
+  const deadline = Date.now() + ms
+  for (;;) {
+    if (await page().evaluate(`(${fn})()`).catch(() => false)) return
+    if (Date.now() > deadline) assert.fail(`waited for ${what}`)
+    await sleep(50)
+  }
+}
+const rows = () =>
+  inCard(root =>
+    [...root.querySelectorAll('li')].map(li => [
+      li.querySelector('code').textContent,
+      li.querySelectorAll('[mark]').length,
+      [...li.querySelectorAll('md-text-button')].length
+    ])
+  )
+const pressInRow = (name, index) =>
+  inCard(
+    (root, n, i) => [...root.querySelectorAll('li')].find(li => li.querySelector('code').textContent === n).querySelectorAll('md-text-button')[i].click(),
+    name,
+    index
+  )
+
+describe('the namespace card', () => {
+  test('lists them, the default first: the default has no actions, an active one two, a suspended one one', async () => {
+    await until(() => document.querySelector('figure-namespace-setting-let').shadowRoot.querySelectorAll('li').length === 3, 'three namespaces')
+    assert.deepEqual(await rows(), [
+      ['acme.example', 1, 0],
+      ['acme-two.example', 0, 2],
+      ['acme-old.example', 1, 1]
+    ])
+  })
+
+  test('makes one the default, suspends and uses one again, each one call and the list read again', async () => {
+    await pressInRow('acme-two.example', 0)
+    await until(() => document.querySelector('figure-namespace-setting-let').shadowRoot.querySelector('li code').textContent === 'acme-two.example', 'the new default first')
+    await pressInRow('acme-old.example', 0)
+    await until(async () => (await harness.card.list()).find(r => r.name === 'acme-old.example').state === 'active', 'used again')
+    assert.deepEqual(await page().evaluate(() => harness.calls), [['default', 'acme-two.example'], ['state', 'acme-old.example', 'active']])
+  })
+
+  test('adds one typed in; a refusal is said on the field and what was typed is kept', async () => {
+    await page().evaluate(() => harness.refuseWith('the figure namespace taken.example is already taken on this server.'))
+    await inCard(root => root.querySelector('md-filled-text-field').focus())
+    await page().keyboard.type('taken.example')
+    await page().keyboard.press('Enter')
+    await until(() => !!document.querySelector('figure-namespace-setting-let').shadowRoot.querySelector('md-filled-text-field').error, 'the refusal')
+    assert.match(await inCard(root => root.querySelector('md-filled-text-field').errorText), /already taken/)
+    assert.equal(await inCard(root => root.querySelector('md-filled-text-field').value), 'taken.example')
+    await page().evaluate(() => harness.refuseWith(''))
+    await inCard(root => [...root.querySelectorAll('[add] md-text-button')][0].click())
+    await until(() => [...document.querySelector('figure-namespace-setting-let').shadowRoot.querySelectorAll('li code')].some(c => c.textContent === 'taken.example'), 'added')
+    assert.equal(await inCard(root => root.querySelector('md-filled-text-field').value), '')
+  })
+})
+
+describe('the first save asks the namespace only when there are several', () => {
+  test('one namespace: no choice, and none is sent', async () => {
+    const result = page().evaluate(() => harness.ask([{ name: 'acme.example', isDefault: true }]).then(r => JSON.stringify(r)))
+    await until(() => (function find(root) { for (const e of root.querySelectorAll('*')) { if (e.localName === 'figure-first-save') return !!e.shadowRoot?.querySelector('#name'); if (e.shadowRoot && find(e.shadowRoot)) return true } return false })(document), 'the question')
+    const hasSelect = await page().evaluate(() => (function find(root) { for (const e of root.querySelectorAll('*')) { if (e.localName === 'figure-first-save') return !!e.shadowRoot.querySelector('select'); if (e.shadowRoot) { const f = find(e.shadowRoot); if (f !== undefined) return f } } })(document))
+    assert.equal(hasSelect, false)
+    await page().evaluate(() => (function find(root) { for (const e of root.querySelectorAll('*')) { if (e.localName === 'figure-first-save') return e.shadowRoot.querySelector('md-filled-button[slot=confirm]').click(); if (e.shadowRoot) find(e.shadowRoot) } })(document))
+    assert.deepEqual(JSON.parse(await result), { type: 'mixer', name: 'Mixer' })
+  })
+
+  test('several: the default is chosen, another can be, and the one chosen is sent', async () => {
+    const result = page().evaluate(() =>
+      harness.ask([{ name: 'acme.example', isDefault: true }, { name: 'acme-two.example', isDefault: false }]).then(r => JSON.stringify(r))
+    )
+    const select = `(function find(root) { for (const e of root.querySelectorAll('*')) { if (e.localName === 'figure-first-save') return e.shadowRoot.querySelector('select'); if (e.shadowRoot) { const f = find(e.shadowRoot); if (f) return f } } })(document)`
+    await until(`() => !!${select}`, 'the namespace asked')
+    assert.equal(await page().evaluate(`${select}.value`), 'acme.example')
+    await page().evaluate(`(() => { const s = ${select}; s.value = 'acme-two.example'; s.dispatchEvent(new Event('change')) })()`)
+    await page().evaluate(() => (function find(root) { for (const e of root.querySelectorAll('*')) { if (e.localName === 'figure-first-save') return e.shadowRoot.querySelector('md-filled-button[slot=confirm]').click(); if (e.shadowRoot) find(e.shadowRoot) } })(document))
+    assert.deepEqual(JSON.parse(await result), { type: 'mixer', name: 'Mixer', namespace: 'acme-two.example' })
+  })
+})

package/test/browser/parts-page.js

@@ -93,9 +93,15 @@ window.parts = {
     const b = panel().shadowRoot.querySelector(`li[selected] button[op="${name}"]`)
     return b ? { ...centreOf(b), disabled: b.disabled } : null
   },
-  /** The palette's shape buttons: what each says (keys: no translations are loaded) and whether it can be pressed. */
+  /**
+   * The palette: its shape buttons, then the file picker for a GLB -- what each says (keys: no translations are loaded)
+   * and whether it can be pressed.
+   */
   palette() {
-    return [...panel().shadowRoot.querySelectorAll('div[palette] button[shape]')].map(b => ({ label: b.querySelector('span').textContent.trim(), disabled: b.disabled, ...centreOf(b) }))
+    const shapes = [...panel().shadowRoot.querySelectorAll('div[palette] button[shape]')].map(b => ({ label: b.querySelector('span').textContent.trim(), disabled: b.disabled, ...centreOf(b) }))
+    const picker = panel().shadowRoot.querySelector('div[palette] ox-input-file[mesh-file]')
+    const button = picker?.shadowRoot.querySelector('button')
+    return button ? [...shapes, { label: button.textContent.trim(), disabled: picker.disabled && button.disabled, ...centreOf(button) }] : shapes
   },
   /** The detail level choice in the list's head. */
   levelChoice() {

package/test/browser/places-mesh.check.mjs

@@ -122,7 +122,7 @@ describe('a GLB made into a mesh part', () => {
 
   /** The palette's import button, the file chooser it opens, the file chosen. */
   async function importFile() {
-    const [chooser] = await Promise.all([page().waitForFileChooser({ timeout: 4000 }), click('button[shape]', { has: 'figure.button.import-mesh' }, 'the import button')])
+    const [chooser] = await Promise.all([page().waitForFileChooser({ timeout: 4000 }), click('button', { within: 'ox-input-file[mesh-file]', has: 'figure.button.import-mesh' }, 'the import button')])
     await chooser.accept([file])
     await settled()
   }
@@ -133,7 +133,7 @@ describe('a GLB made into a mesh part', () => {
   })
 
   test('the file chooser takes GLB files', async () => {
-    const input = await handle('input[mesh-file]', {}, 'the palette\'s file input')
+    const input = await handle('input[type="file"]', { within: 'ox-input-file[mesh-file]' }, 'the palette\'s file picker')
     assert.equal(await input.evaluate(i => i.accept), '.glb,model/gltf-binary')
   })
 
@@ -188,6 +188,34 @@ describe('a GLB made into a mesh part', () => {
     assert.equal((await state()).revision, start.revision)
   })
 
+  /* A drop passes no native filter: the one picker (ox-input-file) takes the GLB and refuses the rest before it goes up. */
+  const drop = name =>
+    read(n => {
+      const shapes = findDeep('section[shapes]', { within: 'figure-parts' })
+      const transfer = new DataTransfer()
+      transfer.items.add(new File(['glTF'], n))
+      shapes.dispatchEvent(new DragEvent('drop', { dataTransfer: transfer, bubbles: true, cancelable: true }))
+    }, name)
+
+  test('a GLB dropped on the shapes: uploaded and added as one step, as one picked is', async () => {
+    await read(a => meshServer.answer({ upload: a }), one)
+    const start = await state()
+    const sent = (await read(() => meshServer.uploads())).length
+    await drop('dropped.glb')
+    await until(() => probe.ids().includes('dropped'), [], 'the part made of the dropped file')
+    assert.equal((await read(() => meshServer.uploads())).length, sent + 1)
+    assert.equal((await state()).revision, start.revision + 1, 'one step')
+  })
+
+  test('a file of another kind dropped: refused where it was dropped, nothing sent, nothing added', async () => {
+    const start = await state()
+    const sent = (await read(() => meshServer.uploads())).length
+    await drop('notes.txt')
+    await until(() => !!findDeep('div.refusal', { within: 'ox-input-file[mesh-file]', has: 'notes.txt' }), [], 'the refusal by the picker')
+    assert.equal((await read(() => meshServer.uploads())).length, sent, 'nothing sent')
+    assert.equal((await state()).revision, start.revision)
+  })
+
   test('the app fetches a mesh file from its own server, under the domain it is on', async () => {
     assert.equal(await read(() => meshUrlAt('/domain/acme/figure-modeller/f1')), `/domain/acme/figure-mesh/${HASH}`)
     assert.equal(await read(() => meshUrlAt('/figure-modeller/f1')), `/figure-mesh/${HASH}`)

package/test/browser/property-section-page.js

@@ -0,0 +1,45 @@
+/*
+ * The modeller's properties panel with sections an app added (LV figure-server design G11): one for CARRIER figures
+ * that writes an extension by the modeller's command, and one that fails. The figure is in memory; commands are kept.
+ */
+import 'figure-ui-client/modeller/figure-properties.js'
+import { html } from 'lit'
+import { createFigureProductSession } from 'figure-ui-client/modeller/product-session.js'
+import { registerFigurePropertySection } from 'figure-ui-client/modeller/property-sections.js'
+import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+const source = serializeFigureAsset(addFigureBox(createFigureAsset('Roll'), { id: 'body', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } }))
+const session = createFigureProductSession({ load: async id => ({ id, source }), save: async request => ({ id: 'f1', source: request.source }) })
+const commands = []
+let failing
+
+registerFigurePropertySection({
+  id: 'carrier',
+  title: () => 'Carrier',
+  when: ({ figure }) => figure.category === 'CARRIER',
+  render: ({ asset, command }) => html`<button declare @click=${() =>
+    command({ kind: 'set-extension', key: 'fmsim/carrier', value: { type: 'ROLL', dimensions: { width: 600, length: 600, height: 800 } } })}>
+    ${asset.extensions?.['fmsim/carrier'] ? 'declared' : 'declare'}</button>`
+})
+
+const panel = document.createElement('figure-properties')
+panel.addEventListener('command', e => commands.push(e.detail.action))
+document.body.append(panel)
+
+window.harness = {
+  panel,
+  commands,
+  async show(category) {
+    await session.open('f1')
+    panel.revision = session.revisionNow()
+    panel.figureId = 'f1'
+    panel.figureCategory = category
+    await panel.updateComplete
+  },
+  failOn() {
+    failing = registerFigurePropertySection({ id: 'broken', title: () => 'Broken', when: () => true, render: () => { throw new Error('no table') } })
+  },
+  failOff() {
+    failing?.()
+  }
+}

package/test/browser/property-section.check.mjs

@@ -0,0 +1,48 @@
+/*
+ * Sections an app adds to the modeller's properties panel (LV figure-server design G11): drawn after the panel's own
+ * for the figures they are for, changing the figure only by the modeller's commands; a section that fails says so in
+ * its place and the rest of the panel stands.
+ *
+ * Run:  node --test test/browser/property-section.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('property-section-page.js'), { width: 1200, height: 900 })
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const sections = () =>
+  page().evaluate(() => [...document.querySelector('figure-properties').shadowRoot.querySelectorAll('section')].map(s => s.dataset.section ?? 'own'))
+
+describe('sections an app adds', () => {
+  test('only for the figures they are for, after the panel\'s own', async () => {
+    await page().evaluate(() => harness.show('EQUIPMENT'))
+    assert.deepEqual(await sections(), ['own', 'own', 'own'])
+    await page().evaluate(() => harness.show('CARRIER'))
+    assert.deepEqual(await sections(), ['own', 'own', 'own', 'carrier'])
+  })
+
+  test('a section changes the figure by the modeller\'s command', async () => {
+    await page().evaluate(() => document.querySelector('figure-properties').shadowRoot.querySelector('section[data-section="carrier"] button[declare]').click())
+    assert.deepEqual(await page().evaluate(() => harness.commands), [
+      { kind: 'set-extension', key: 'fmsim/carrier', value: { type: 'ROLL', dimensions: { width: 600, length: 600, height: 800 } } }
+    ])
+  })
+
+  test('a section that fails says so in its place; the others stand', async () => {
+    await page().evaluate(() => harness.failOn())
+    await page().evaluate(() => harness.show('CARRIER'))
+    assert.deepEqual(await sections(), ['own', 'own', 'own', 'carrier', 'broken'])
+    assert.match(await page().evaluate(() => document.querySelector('figure-properties').shadowRoot.querySelector('section[data-section="broken"] [role="alert"]').textContent), /figure\.text\.property-section-failed|no table/)
+    await page().evaluate(() => harness.failOff())
+  })
+})

package/test/browser/props.check.mjs

@@ -253,8 +253,17 @@ describe('the parts panel stands at the side\'s heights (2026-10-16)', () => {
     const heights = await read(() => {
       const parts = document.querySelector('figure-editor').shadowRoot.querySelector('figure-parts').shadowRoot
       const h = e => Math.round(e.getBoundingClientRect().height)
-      const tiles = [...parts.querySelectorAll('div[palette] button[shape]:not([import])')].map(h)
-      return { level: h(parts.querySelector('div[level] select')), tiles: [...new Set(tiles)], count: tiles.length, import: h(parts.querySelector('button[shape][import]')) }
+      const tiles = [...parts.querySelectorAll('div[palette] button[shape]')].map(h)
+      const importer = parts.querySelector('ox-input-file[mesh-file]').shadowRoot.querySelector('button')
+      const words = e => { const c = getComputedStyle(e); return { size: c.fontSize, weight: c.fontWeight, color: c.color } }
+      return {
+        level: h(parts.querySelector('div[level] select')),
+        tiles: [...new Set(tiles)],
+        count: tiles.length,
+        import: h(importer),
+        importWords: words(importer),
+        tileWords: words(parts.querySelector('div[palette] button[shape]'))
+      }
     })
     const side = await read(() => Math.round(document.querySelector('figure-editor').shadowRoot.querySelector('input[name-field]')?.getBoundingClientRect().height ?? 0))
     assert.ok(side > 0, 'a side field to measure against')
@@ -262,6 +271,8 @@ describe('the parts panel stands at the side\'s heights (2026-10-16)', () => {
     assert.ok(heights.count >= 9, `the starting shapes: ${heights.count}`)
     assert.equal(heights.tiles.length, 1, `one tile height: ${heights.tiles}`)
     assert.equal(heights.import, side, 'the file import on one line, its own row, at the fields\' height')
+    /* The picker's own button is 13/600 near-black: louder than the shapes' heading until it wears the tiles' words. */
+    assert.deepEqual(heights.importWords, heights.tileWords, 'the file import speaks as the tiles do')
   })
 
   /* A static guard sees the sizes written down; an icon with none stands at md-icon's own 24 (the recipe catalog's did). */

package/test/browser/public-page.js

@@ -0,0 +1,39 @@
+/*
+ * The catalogue's detail dock with the domain's own released figure, which can be made public and private, and another
+ * domain's public figure, shown by its release alone (LV figure-server design G2). The server's calls are stand-ins.
+ */
+import 'figure-ui-client/viewparts/figure-detail-dock.js'
+import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+const source = serializeFigureAsset(addFigureBox(createFigureAsset('Mixer'), { id: 'body', size: { x: 100, y: 100, z: 100 }, position: { x: 0, y: 50, z: 0 } }))
+const figures = {
+  shipped: { id: 'shipped', name: 'Mixer', type: 'mixer', namespace: 'acme.example', state: 'released', version: 1, public: false, source },
+  draft: { id: 'draft', name: 'Sketch', type: 'sketch', namespace: 'acme.example', state: 'draft', version: 0, public: false, source }
+}
+const theirs = { id: 'theirs', name: 'Their crane', type: 'crane', namespace: 'other.example', state: 'released', version: 3, public: true, domain: { id: 'd2', name: 'Other works' } }
+const calls = []
+const changed = []
+let refuse = ''
+
+const dock = document.createElement('figure-detail-dock')
+dock.load = async id => ({ saved: { ...figures[id] }, released: figures[id].version ? { version: figures[id].version, source } : undefined })
+dock.loadPublic = async row => ({ saved: { ...row }, released: { version: row.version, source }, foreign: true })
+dock.keepThumbnail = async () => {}
+dock.publish = async (id, isPublic) => {
+  calls.push({ id, public: isPublic })
+  if (refuse) throw new Error(refuse)
+  figures[id] = { ...figures[id], public: isPublic }
+  const { source: _s, ...row } = figures[id]
+  return row
+}
+window.addEventListener('figure-public-changed', e => changed.push(e.detail.id))
+document.body.append(dock)
+
+window.harness = {
+  dock,
+  show: id => dock.show(id),
+  showTheirs: () => dock.show(theirs.id, theirs),
+  calls,
+  changed,
+  refuseWith: message => (refuse = message)
+}