@things-factory/figure-ui 10.1.37 → 10.1.38

package/client/graphql/v3-store.ts

@@ -13,8 +13,14 @@ export const v3ProductStore: V3ProductStore = {
   async save(request) {
     const response = await client.mutate({
       mutation: gql`
-        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String) {
-          saveFigureV3(source: $source, id: $id, expectedSource: $expectedSource, creationId: $creationId) {
+        mutation SaveFigureV3($source: String!, $id: String, $expectedSource: String, $creationId: String, $thumbnail: String) {
+          saveFigureV3(
+            source: $source
+            id: $id
+            expectedSource: $expectedSource
+            creationId: $creationId
+            thumbnail: $thumbnail
+          ) {
             id
             source
           }

package/client/modeller/figure-history-panel.ts

@@ -326,6 +326,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   @property({ type: Number }) figureVersion = 0
   /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
   @property({ type: Boolean }) dirty = false
+  /**
+   * 열린 도형의 형식. 발행 · 판본 · 복원은 figure id 로만 서버를 묻고 서버의 한 문이 두 형식을 다 읽으므로 두 화면이
+   * 이 패널을 함께 쓴다. 갈리는 것은 조치 단추 하나다 — 부품을 옮기는 두 조치는 형식마다 다른 편집이라, 받는
+   * 화면이 없는 단추를 그리면 눌러도 아무 일이 없다.
+   */
+  @property({ type: String }) format: 'v2' | 'v3' = 'v2'
   /** 직전 발행판의 기준 상자. 외형 변화 안내에서 X·Z 복원 선택지에만 쓴다. */
   @property({ attribute: false }) releasedBase?: { x: number; y: number; z: number }
 
@@ -479,12 +485,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
         ` : nothing}
         ${finding.why ? html`<span why-line>${finding.why}</span>` : nothing}
         ${finding.how ? html`<span how-line><md-icon>build</md-icon>${finding.how}</span>` : nothing}
-        ${finding.code === 'part-outside-base'
+        ${this.offersFit(finding.code)
           ? html`<button fit-base @click=${() => this.fitBase()}>
               ${i18next.t('figure.button.fit-base-to-parts')}
             </button>`
           : nothing}
-        ${finding.code === 'parts-off-placement-face'
+        ${finding.code === 'parts-off-placement-face' && this.format === 'v2'
           ? html`<button fit-base @click=${() => this.settleOnFloor()}>
               ${i18next.t('figure.button.settle-on-floor')}
             </button>`
@@ -548,6 +554,20 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
    * 그래서 화면이 자기 자리에서 같은 동작을 낸다. 누르면 상자만 커지고 부품은 제자리이며, 저장은
    * 여전히 저작자가 따로 한다.
    */
+  /**
+   * 「부품에 맞추기」를 내미는 판정. V2 는 기준 상자를 부품에 맞추고, V3 는 공간을 부품에서 다시 선언한다
+   * (`declare-occupancy`) — 둘 다 부품은 그대로 두고 선언만 바꾼다. V3 에서 공간을 아직 선언하지 않은 도형도
+   * 같은 단추로 선언한다: 새로 만든 V3 도형은 전부 그 판정으로 막히고, 화면에 다른 길이 없다.
+   *
+   * V3 의 장착면이 떠 있는 것은 여기 없다. 부품 하나를 평면에 붙이면 그 부품에 붙지 않은 것은 따라오지 않아
+   * V2 의 「바닥에 앉히기」와 뜻이 다르다. 판정의 「어떻게」가 할 일을 말한다.
+   */
+  private offersFit(code: string): boolean {
+    return this.format === 'v3'
+      ? code === 'part-outside-occupancy' || code === 'occupancy-undeclared'
+      : code === 'part-outside-base'
+  }
+
   private fitBase() {
     this.dispatchEvent(new CustomEvent('fit-base-to-parts', { bubbles: true, composed: true }))
   }

package/client/modeller/figure-v3-parts.ts

@@ -0,0 +1,365 @@
+import '@material/web/icon/icon.js'
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import type { V3PrimitiveCreation } from '@hatiolab/figure-model'
+
+/**
+ * 도형 팔레트와 부품 목록 — V3 자산의 것.
+ *
+ * `figure-parts`(V2) 와 **같은 자리, 같은 조작, 같은 낱말**이다. 저작자가 V2 에서 익힌 손이 그대로
+ * 가야 한다: 팔레트는 목록 위에, 눈 단추는 늘 자리를 차지하고, 조작은 고른 줄에서만 보인다.
+ *
+ * 다른 것은 읽는 대상뿐이다. V2 는 부품의 `primitive` 를 읽었고 여기서는 V3 평가가 준 `provider` 를
+ * 읽는다. 「숨김」은 여기서도 **작업대의 것**이다 — 저장되지 않고, 자산의 `visibility`(상태에 따라
+ * 보이고 안 보이는 것)와는 다른 것이다. 그것은 속성 패널의 몫이다.
+ *
+ * 이 컴포넌트는 정본을 만지지 않는다. 무엇을 하겠다는 것만 알린다 — V2 와 같은 규칙, 같은 사건 이름.
+ */
+
+/** 한 줄 — V3 평가에서 이 패널이 읽는 것만. */
+export interface V3PartRow {
+  id: string
+  provider: string
+  /** 작업대에서 잠깐 가린 것. 저장되지 않는다. */
+  hidden?: boolean
+  /** 자산이 지금 상태에서 보이지 않는다고 한 것. 저장되는 것이고, 여기서는 표시만 한다. */
+  invisible?: boolean
+}
+
+/** 제공자마다의 아이콘. Material Symbols 이름이다. */
+const PROVIDER_ICON: Record<string, string> = {
+  box: 'deployed_code',
+  cylinder: 'database',
+  ellipticCylinder: 'database',
+  frustum: 'change_history',
+  sphere: 'circle',
+  roundedBox: 'crop_square',
+  roundedBoxXZ: 'crop_square',
+  hollowBox: 'check_box_outline_blank',
+  hollowBoxXZ: 'check_box_outline_blank',
+  polygon: 'pentagon',
+  portal: 'door_front'
+}
+
+/** 팔레트 — 저작 API 가 만들 수 있는 것만 보인다. */
+const RECIPES: Array<{ kind: V3PrimitiveCreation['kind']; icon: string; label: string }> = [
+  { kind: 'box', icon: 'deployed_code', label: 'figure.label.primitive-cube' },
+  { kind: 'cylinder', icon: 'database', label: 'figure.label.primitive-cylinder' },
+  { kind: 'rounded-box', icon: 'crop_square', label: 'figure.label.primitive-rect' },
+  { kind: 'portal', icon: 'door_front', label: 'figure.label.primitive-portal' }
+]
+
+@customElement('figure-v3-parts')
+export class FigureV3Parts extends localize(i18next)(LitElement) {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow: hidden;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        border-right: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font, inherit);
+        font-size: 0.76rem;
+      }
+      section {
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      section[list] {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+      h3 {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 6px;
+        margin: 0 0 6px 0;
+        font-size: var(--ui-t-micro, 11px);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      span[room] {
+        font-size: 0.7rem;
+        font-weight: 400;
+        letter-spacing: 0;
+        text-transform: none;
+      }
+      div[palette] {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+      }
+      button[shape] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2px;
+        padding: 7px 2px 5px 2px;
+        font: var(--label-font, inherit);
+        font-size: 0.66rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      button[shape]:hover:not([disabled]) {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+        border-color: transparent;
+      }
+      button[shape][disabled] {
+        opacity: 0.35;
+        cursor: default;
+      }
+      button[shape] md-icon {
+        --md-icon-size: 20px;
+      }
+      ol {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      li {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 6px;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      li:hover {
+        background-color: var(--md-sys-color-surface-container);
+      }
+      li[selected] {
+        color: var(--md-sys-color-on-primary-container);
+        background-color: var(--md-sys-color-primary-container);
+      }
+      li md-icon {
+        --md-icon-size: 16px;
+        flex: none;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      button[eye][all] {
+        margin-left: auto;
+        opacity: 0.75;
+      }
+      button[eye][all]:hover {
+        opacity: 1;
+      }
+      button[eye] {
+        display: flex;
+        flex: none;
+        padding: 1px;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0;
+      }
+      li:hover button[eye],
+      li[selected] button[eye],
+      button[eye][off] {
+        opacity: 1;
+      }
+      button[eye][off] {
+        color: var(--md-sys-color-tertiary);
+      }
+      button[eye] md-icon {
+        --md-icon-size: 15px;
+        color: inherit;
+      }
+      li[off] span[label],
+      li[off] > md-icon,
+      li[invisible] span[label],
+      li[invisible] > md-icon {
+        opacity: 0.45;
+      }
+      li[selected] md-icon {
+        color: inherit;
+      }
+      span[label] {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.78rem;
+      }
+      span[label] small {
+        margin-left: 4px;
+        font-size: 0.66rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[ops] {
+        display: none;
+        gap: 1px;
+      }
+      li[selected] div[ops] {
+        display: flex;
+      }
+      div[ops] button {
+        display: flex;
+        padding: 2px;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      div[ops] button:hover:not([disabled]) {
+        background-color: var(--md-sys-color-surface-container-lowest);
+      }
+      div[ops] button[disabled] {
+        opacity: 0.3;
+        cursor: default;
+      }
+      div[ops] md-icon {
+        --md-icon-size: 15px;
+        color: inherit;
+      }
+      p[quiet] {
+        margin: 0;
+        font-size: 0.76rem;
+        line-height: 1.6;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+    `
+  ]
+
+  @property({ type: Array }) parts: V3PartRow[] = []
+  /** 고른 부품의 id. 자리(index)가 아니다 — V3 부품은 id 로 안정하게 가리킨다. */
+  @property({ type: String }) selected = ''
+  /** 편집할 수 없을 때(불러오는 중 · 저장 중) 팔레트와 조작을 잠근다. */
+  @property({ type: Boolean }) locked = false
+
+  render() {
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.shapes')}</h3>
+        <div palette>
+          ${RECIPES.map(
+            recipe => html`
+              <button
+                shape
+                ?disabled=${this.locked}
+                title=${i18next.t(recipe.label)}
+                @click=${() => this.ask('add-part', { kind: recipe.kind })}
+              >
+                <md-icon>${recipe.icon}</md-icon>
+                <span>${i18next.t(recipe.label)}</span>
+              </button>
+            `
+          )}
+        </div>
+      </section>
+
+      <section list>
+        <h3>
+          <span>${i18next.t('figure.label.parts')}</span>
+          <span room>${this.parts.length}</span>
+          ${this.renderShowAll()}
+        </h3>
+        ${this.parts.length === 0
+          ? html`<p quiet>${i18next.t('figure.text.no-parts-yet')}</p>`
+          : html`<ol>
+              ${this.parts.map((part, index) => this.renderRow(part, index))}
+            </ol>`}
+      </section>
+    `
+  }
+
+  /** 한꺼번에 감추고 한꺼번에 되돌린다 — 하나라도 감춰져 있으면 다 되돌리고, 다 보이면 다 감춘다. */
+  private renderShowAll() {
+    if (this.parts.length === 0) return nothing
+    const anyHidden = this.parts.some(part => part.hidden)
+    return html`
+      <button
+        eye
+        all
+        ?off=${!anyHidden}
+        title=${i18next.t(anyHidden ? 'figure.text.show-all-parts' : 'figure.text.hide-all-parts')}
+        @click=${(e: Event) => {
+          e.stopPropagation()
+          this.ask('set-all-parts-hidden', { hidden: !anyHidden })
+        }}
+      >
+        <md-icon>${anyHidden ? 'visibility' : 'visibility_off'}</md-icon>
+      </button>
+    `
+  }
+
+  private renderRow(part: V3PartRow, index: number) {
+    const selected = part.id === this.selected
+    const off = !!part.hidden
+    return html`
+      <li
+        ?selected=${selected}
+        ?off=${off}
+        ?invisible=${!!part.invisible}
+        @click=${() => this.ask('select-part', { id: part.id })}
+      >
+        <button
+          eye
+          ?off=${off}
+          title=${i18next.t(off ? 'figure.text.show-this-part' : 'figure.text.hide-this-part')}
+          @click=${(e: Event) => {
+            e.stopPropagation()
+            this.ask('toggle-part-hidden', { id: part.id })
+          }}
+        >
+          <md-icon>${off ? 'visibility_off' : 'visibility'}</md-icon>
+        </button>
+        <md-icon>${PROVIDER_ICON[part.provider] ?? 'deployed_code'}</md-icon>
+        <span label title=${part.id}
+          >${part.id}${part.invisible ? html`<small>${i18next.t('figure.label.state-hidden')}</small>` : nothing}</span
+        >
+        ${selected ? this.renderOps(part.id, index) : nothing}
+      </li>
+    `
+  }
+
+  /** 고른 줄의 조작. 못 하는 것은 빼지 않고 흐리게 둔다 — 자리가 밀리면 연달아 지우다 엉뚱한 것을 누른다. */
+  private renderOps(id: string, index: number) {
+    const count = this.parts.length
+    const op = (name: string, icon: string, detail: object, enabled = true) => html`
+      <button
+        op=${name}
+        ?disabled=${!enabled || this.locked}
+        title=${i18next.t('figure.button.' + name)}
+        @click=${(e: Event) => {
+          e.stopPropagation()
+          if (enabled && !this.locked) this.ask(name, detail)
+        }}
+      >
+        <md-icon>${icon}</md-icon>
+      </button>
+    `
+    return html`
+      <div ops>
+        ${op('move-part-up', 'arrow_upward', { id, to: index - 1 }, index > 0)}
+        ${op('move-part-down', 'arrow_downward', { id, to: index + 1 }, index < count - 1)}
+        ${op('duplicate-part', 'content_copy', { id })} ${op('remove-part', 'delete', { id })}
+      </div>
+    `
+  }
+
+  /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
+  private ask(what: string, detail: object) {
+    this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))
+  }
+}

package/client/modeller/v3-editor.ts

@@ -2,6 +2,8 @@ import { LitElement, html, css, type PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import type { V3InputChange, V3PrimitiveCreation } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
+import { captureV3Thumbnail } from './v3-thumbnail.js'
+import { drawableV3Parts } from './v3-renderer.js'
 import './v3-canvas.js'
 import type { FigureV3Canvas } from './v3-canvas.js'
 
@@ -172,7 +174,14 @@ export class FigureV3Editor extends LitElement {
   private async save() {
     if (!this.session) return
     try {
-      const promise = this.session.save()
+      /*
+        The card's picture is taken before the save starts, from a canvas of its own at the card's size —
+        not from the one on screen, which stands wherever the author left it turned. A picture that cannot
+        be taken is not an error: the save goes on without it (see `v3-thumbnail.ts`).
+      */
+      const view = this.session.read()
+      const thumbnail = await captureV3Thumbnail(drawableV3Parts(view.geometry ?? []), view.palette ?? {})
+      const promise = this.session.save({ thumbnail })
       this.changed()
       await promise
       this.error = ''
@@ -274,7 +283,7 @@ export class FigureV3Editor extends LitElement {
           </div>
         </aside>
         <figure-v3-canvas
-          .parts=${view.geometry}
+          .parts=${drawableV3Parts(view.geometry ?? [])}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           @part-selected=${(e: CustomEvent<string>) => {

package/client/modeller/v3-occupancy.ts

@@ -0,0 +1,22 @@
+import { parseV3Asset, proposeV3Occupancy, type V3AuthoringAction } from '@hatiolab/figure-model'
+
+/**
+ * 「부품에 맞추기」의 V3 짝 — 공간을 지금 부품에서 다시 선언하는 한 걸음.
+ *
+ * figure-model 은 이것을 둘로 나눠 두었다: 제안(`proposeV3Occupancy`)은 무엇이 선언될지를 보여 주고, 확인
+ * (`declare-occupancy`)은 그 제안이 읽은 모양 그대로일 때만 받는다. 저작자가 누른 단추가 그 확인이다. 제안과 확인
+ * 사이에 모델이 바뀌면 figure-model 이 `OCCUPANCY_STALE` 로 거절하므로, 여기서는 누른 순간의 원본으로 둘을 한
+ * 번에 만든다.
+ *
+ * 범위는 움직임 전체다(`over: 'range'`). 쉬는 자세만 담으면 움직이는 부품이 선언한 공간을 넘어 발행 판정이 다시
+ * 막는다. 배치 기준은 이미 선언된 것을 지키고, 처음 선언하는 도형은 바닥에 선다고 둔다 — 새로 만든 도형의
+ * 모델러 기본이 바닥이다.
+ */
+export function occupancyFromParts(source: string): V3AuthoringAction {
+  const asset = parseV3Asset(source)
+  return {
+    kind: 'declare-occupancy',
+    proposal: proposeV3Occupancy(asset, { over: 'range' }),
+    placement: asset.occupancy?.placement ?? 'floor'
+  }
+}

package/client/modeller/v3-product-session.ts

@@ -5,7 +5,8 @@ import {
   parseV3Asset,
   type V3InputChange,
   type V3PrimitiveCreation,
-  type V3PartEdit
+  type V3PartEdit,
+  type V3AuthoringAction
 } from '@hatiolab/figure-model'
 
 export interface V3ProductRecord {
@@ -16,7 +17,14 @@ export interface V3ProductRecord {
 /** Persistence is injected; neither the model engine nor the renderer owns the product ID. */
 export interface V3ProductStore {
   load(id: string): Promise<V3ProductRecord>
-  save(request: { id?: string; source: string; expectedSource?: string; creationId?: string }): Promise<V3ProductRecord>
+  save(request: {
+    id?: string
+    source: string
+    expectedSource?: string
+    creationId?: string
+    /** The card's picture. Absent when the browser could not draw one; the source is saved either way. */
+    thumbnail?: string
+  }): Promise<V3ProductRecord>
 }
 
 /** Product lifecycle boundary. A late response can never change another editor's asset or ID. */
@@ -107,6 +115,10 @@ export function createV3ProductSession(store: V3ProductStore) {
     edit(edit: V3PartEdit) {
       return workspace.editPart({ ...writable(), edit })
     },
+    /** One authoring command — what a person means, not a graph edit — as one step of the same history. */
+    command(action: V3AuthoringAction) {
+      return workspace.command({ ...writable(), action })
+    },
     undo() {
       return workspace.undo(writable())
     },
@@ -117,13 +129,20 @@ export function createV3ProductSession(store: V3ProductStore) {
       const { context } = writable()
       return workspace.export({ context }).text
     },
-    async save() {
+    /**
+     * Saves the model, and the card's picture when the caller managed to take one.
+     *
+     * The picture is the caller's because taking it needs a canvas, and this session is the place that knows
+     * nothing about drawing. A save with no picture is a save: a tab in the background cannot draw, and the
+     * source matters more than the card (see `v3-thumbnail.ts`).
+     */
+    async save({ thumbnail }: { thumbnail?: string } = {}) {
       const control = writable(),
         requestEpoch = epoch
       const exported = workspace.export(control)
       saving = true
       try {
-        const record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId })
+        const record = await store.save({ id, source: exported.text, expectedSource: baseline, creationId, thumbnail })
         if (requestEpoch !== epoch) return read()
         if (!record.id || (id !== undefined && record.id !== id)) throw Error('저장 응답의 Figure 대상이 다릅니다.')
         if (serializeV3Asset(parseV3Asset(record.source)) !== exported.text)

package/client/modeller/v3-renderer.ts

@@ -1,4 +1,5 @@
 import * as THREE from 'three'
+import { buildV3Geometry } from '@hatiolab/things-scene'
 
 /** Evaluated V3 boundary: graph values are resolved before reaching the renderer. */
 export interface V3RenderPart {
@@ -9,24 +10,32 @@ export interface V3RenderPart {
   segments?:number
 }
 
-function geometry(part:V3RenderPart):THREE.BufferGeometry {
- const d=part.shape.dimensions
- let g:THREE.BufferGeometry
- if(part.shape.provider==='box')g=new THREE.BoxGeometry(d.width,d.height,d.depth)
- else if(part.shape.provider==='cylinder')g=new THREE.CylinderGeometry(d.radius,d.radius,d.length,part.segments??12)
- else if(part.shape.provider==='roundedBox'){
-  const w=d.width/2,z=d.depth/2,r=d.round,s=new THREE.Shape()
-  s.moveTo(-w+r,-z);s.lineTo(w-r,-z);s.quadraticCurveTo(w,-z,w,-z+r)
-  s.lineTo(w,z-r);s.quadraticCurveTo(w,z,w-r,z);s.lineTo(-w+r,z)
-  s.quadraticCurveTo(-w,z,-w,z-r);s.lineTo(-w,-z+r);s.quadraticCurveTo(-w,-z,-w+r,-z)
-  g=new THREE.ExtrudeGeometry(s,{depth:d.height,bevelEnabled:false,steps:1,curveSegments:6})
-  g.rotateX(Math.PI/2);g.translate(0,d.height/2,0)
- }else if(part.shape.provider==='portal'){
-  if(!part.shape.profile?.length)throw Error('Portal profile is missing')
-  const s=new THREE.Shape(part.shape.profile.map(p=>new THREE.Vector2(p.x,p.y)))
-  g=new THREE.ExtrudeGeometry(s,{depth:d.depth,bevelEnabled:false,steps:1});g.translate(0,0,-d.depth/2)
- }else throw Error('Unsupported V3 provider: '+part.shape.provider)
- return g
+/**
+ * The bodies a canvas draws, out of everything the asset evaluated.
+ *
+ * Two are left out. A scalar body carries no shape or pose — it is a number the graph produced, not something
+ * on screen. A body the asset hides is evaluated, placed and gated exactly as a shown one, and excluded from
+ * rendering, from shadows and from pointer picking (V3 designer's ruling 2026-09-22); drawing it would make
+ * "hidden" mean nothing in the modeller while it means something on a board.
+ */
+export function drawableV3Parts(geometry: readonly unknown[]): V3RenderPart[] {
+  return geometry.filter(
+    (body): body is V3RenderPart =>
+      !!body && typeof body === 'object' && 'shape' in body && 'pose' in body && (body as { visible?: boolean }).visible !== false
+  )
+}
+
+/**
+ * The mesh for one body — things-scene's builder, not a copy of it.
+ *
+ * The modeller kept its own provider switch and it knew four providers; the converter writes eleven. A body the
+ * board drew was refused here with "Unsupported V3 provider: roundedBoxXZ" (2026-09-24, the first canvas check of
+ * ADR-0087 step 4). One builder, and the canvas an author looks at shows what a board will show.
+ */
+function geometry(part: V3RenderPart): THREE.BufferGeometry {
+  const built = buildV3Geometry(part.shape as never, part.segments ?? 12) as THREE.BufferGeometry | undefined
+  if (!built) throw Error('Unsupported V3 provider: ' + part.shape.provider)
+  return built
 }
 
 export function disposeV3Meshes(group:THREE.Group):void {