@things-factory/figure-ui 10.1.3 → 10.1.4

package/client/modeller/figure-ask.ts

@@ -31,10 +31,19 @@ import type { FigureProposal } from '../types.js'
 @customElement('figure-ask')
 export class FigureAsk extends localize(i18next)(LitElement) {
   static styles = css`
+    /*
+      이 부품은 **자기 줄을 갖지 않는다.**
+
+      전에는 테두리와 여백으로 스스로 한 줄이 되었다. 저작면의 머리줄 바로 아래에 놓이니
+      화면 위쪽이 두 줄이 되었고, 위 줄은 이름을 페이지 제목과 겹쳐 적고 있었다. 캔버스가
+      주인공인 화면에서 그 두 줄은 비싸다.
+
+      이제 머리줄 안에 들어가 그 줄의 남는 폭을 쓴다. 테두리·여백은 담는 줄이 갖는다.
+    */
     :host {
-      display: block;
-      background-color: var(--md-sys-color-surface-container-lowest);
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      display: flex;
+      flex: 1;
+      min-width: 0;
       font: var(--label-font, inherit);
       /*
         이 줄의 글자 크기를 여기서 정한다.
@@ -49,9 +58,10 @@ export class FigureAsk extends localize(i18next)(LitElement) {
 
     form {
       display: flex;
+      flex: 1;
+      min-width: 0;
       align-items: center;
       gap: var(--spacing-medium, 8px);
-      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
     }
 
     md-icon[lead] {

package/client/modeller/figure-canvas.ts

@@ -204,6 +204,59 @@ export class FigureCanvas extends localize(i18next)(LitElement) {
   @state() private cannot = ''
 
   private scene?: SceneHandle
+
+  /**
+   * 지금 세워진 것을 그림으로 낸다 — 카드에 쓸 썸네일.
+   *
+   * 부르는 쪽은 이 부품을 **숨은 자리에 480×360 으로 하나 더 세워** 부른다
+   * (`figure-thumbnail.ts`). 보이는 저작면을 찍지 않는 이유는, 저작자가 돌려 둔 각도와 확대,
+   * 그리고 창 크기에 따라 달라지는 칸 비율이 그대로 카드에 박히기 때문이다 — 나사를 확대해 보던
+   * 중에 저장하면 그 자산의 얼굴이 나사가 된다. 목록은 견주는 자리라 프레임이 일정해야 한다.
+   *
+   * 못 찍으면 `undefined` 다. 빈 그림을 만들어 「그림이 있다」고 말하지 않는다.
+   */
+  async snapshot(width = 480, height = 360): Promise<string | undefined> {
+    /*
+      **3D 를 낼 수 있을 때만 찍는다.**
+
+      씬의 `toDataURL` 은 **2D 씬을 렌더한다.** 그것으로 찍어 보니 흰 종이 한 장이 나왔다
+      (480×291 · 834바이트 · 순백 — 2D 판의 면인 `fillStyle: PAPER` 이 화면 전체였다). 3D 픽셀은
+      `model-layer.renderer3d`(THREE.WebGLRenderer) 쪽에 있고, 그 렌더러는
+      `preserveDrawingBuffer: false` 라 **그린 직후 같은 task 에서** 읽어야 한다. 그 절차를 아는
+      것은 씬이므로, things-scene 이 그 일을 공개 API 로 내주면 여기서 부른다.
+
+      아직 없으면 `undefined` 다. 흰 종이를 썸네일이라고 저장하면 카드가 「그림이 있다」고 말하면서
+      아무것도 보여 주지 않고, 저장할 때마다 판 번호만 올라간다 — 없는 것보다 나쁘다.
+    */
+    const layer = this.scene?.root as
+      | (SceneBoard & {
+          snapshot3d?: (
+            width?: number,
+            height?: number,
+            type?: string,
+            quality?: number
+          ) => Promise<string | undefined>
+        })
+      | undefined
+
+    if (!layer?.snapshot3d) {
+      return undefined
+    }
+
+    try {
+      /*
+        알파가 필요 없고 카드에 들어갈 그림이라 webp 로 찍는다. png 는 같은 그림이 서너 배 무겁고,
+        그 무게가 도형마다 DB 와 목록 응답에 실린다. webp 를 못 만드는 브라우저는 캔버스가 알아서
+        png 를 돌려준다 — 우리가 판정하지 않는다.
+      */
+      const url = await layer.snapshot3d(width, height, 'image/webp', 0.85)
+      return typeof url === 'string' && url.startsWith('data:') ? url : undefined
+    } catch (e) {
+      /* 원인을 지어내지 않는다. 못 찍은 것이 저장을 막지는 않는다. */
+      console.warn(`[thumbnail] 찍지 못했습니다 — ${(e as Error).message}`)
+      return undefined
+    }
+  }
   /** 지금 씬이 서 있는 판. 이것이 달라지면 다시 세운다. */
   private standing?: string
   /** 칸 크기를 따라가게 지켜본다. 안 지켜보면 0x0 으로 고정된다. */

package/client/modeller/figure-inspector.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -452,10 +454,36 @@ export class FigureInspector extends localize(i18next)(LitElement) {
         line-height: 1.6;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
+
+      /*
+        고칠 수 없는 값 — 입력칸처럼 보이지 않게 한다.
+
+        전에는 그냥 글자였고, 옆의 이름 칸과 나란히 있으니 눌러도 되는 것처럼 보였다. 자물쇠와
+        칸 없는 바탕이 「읽는 값」이라고 먼저 말한다.
+      */
+      code[fixed] {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        border-radius: 6px;
+        background-color: var(--md-sys-color-surface-container-high, rgba(0, 0, 0, 0.05));
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        font-family: var(--mono-font, monospace);
+        font-size: 0.76rem;
+      }
+
+      code[fixed] md-icon {
+        --md-icon-size: 13px;
+        opacity: 0.7;
+      }
   `
   ]
 
   /** 보드. 위치를 보드 중심 기준으로 바꾸려면 이것이 있어야 한다. */
+  /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`figure-rename` 으로 알린다). */
+  @property({ type: String }) figureName = ''
+
   @property({ type: Object }) board?: BoardModel
   /** 보드 위의 부품들. 씬 모델 그대로다. */
   @property({ type: Array }) parts: PartModel[] = []
@@ -470,6 +498,7 @@ export class FigureInspector extends localize(i18next)(LitElement) {
     const part = this.chosen
     if (!part || !this.board) {
       return html`
+        ${this.renderFigure()}
         <section>
           <h3>${i18next.t('label.properties')}</h3>
           <p quiet>${i18next.t('text.select-a-part-to-edit')}</p>
@@ -481,8 +510,55 @@ export class FigureInspector extends localize(i18next)(LitElement) {
     const shown = partToFigure(part, this.board)
 
     return html`
-      ${this.renderIdentity(shown)} ${this.renderPlacement(shown)} ${this.renderShape(shown)}
-      ${this.renderMaterial(shown)} ${this.renderBehaviour(shown)}
+      ${this.renderFigure()} ${this.renderIdentity(shown)} ${this.renderPlacement(shown)}
+      ${this.renderShape(shown)} ${this.renderMaterial(shown)} ${this.renderBehaviour(shown)}
+    `
+  }
+
+  /**
+   * 도형 자체 — 이름과 타입.
+   *
+   * ## 왜 머리줄이 아니라 여기인가
+   *
+   * 저작면 위에 줄을 하나 더 두고 이름 칸을 놓았었다. 앱에서는 셸이 페이지 제목으로 그 이름을
+   * 이미 그리므로 같은 글자가 두 번 나오고, 캔버스가 주인공인 화면에서 그 줄만큼 높이를 잃었다.
+   * 속성 패널은 「이 도형이 무엇인가」를 다루는 자리이므로 이름도 여기 산다.
+   *
+   * ## 타입은 읽기만 한다
+   *
+   * 저장되는 식별자다. 배치된 보드가 이 이름으로 타입을 찾으므로 만든 뒤에는 못 바꾼다.
+   */
+  private renderFigure() {
+    return html`
+      <section>
+        <h3>${i18next.t('label.figure')}</h3>
+        <div field>
+          <label>${i18next.t('label.name')}</label>
+          <input
+            .value=${this.figureName}
+            placeholder=${i18next.t('text.figure-display-name')}
+            @change=${(e: Event) =>
+              this.dispatchEvent(
+                new CustomEvent('figure-rename', {
+                  detail: { name: (e.target as HTMLInputElement).value },
+                  bubbles: true,
+                  composed: true
+                })
+              )}
+          />
+        </div>
+        <div field>
+          <label>${i18next.t('label.type')}</label>
+          <code fixed title=${i18next.t('text.type-name-cannot-change')}>
+            <md-icon>lock</md-icon>${this.board?.figureType ?? ''}
+          </code>
+        </div>
+        <!--
+          왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
+          알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
+        -->
+        <p quiet>${i18next.t('text.type-name-cannot-change')}</p>
+      </section>
     `
   }
 

package/client/modeller/figure-side.ts

@@ -116,6 +116,8 @@ export class FigureSide extends localize(i18next)(LitElement) {
     속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**
     곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
   */
+  @property({ type: String }) figureName = ''
+
   @property({ type: Object }) board?: BoardModel
   @property({ type: Array }) parts: PartModel[] = []
   @property({ type: Object }) source?: FigureSource
@@ -137,6 +139,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
 
       <figure-inspector
         ?off=${this.tab !== 'properties'}
+        .figureName=${this.figureName}
         .board=${this.board}
         .parts=${this.parts}
         .selected=${this.selected}

package/client/modeller/figure-thumbnail.ts

@@ -0,0 +1,78 @@
+import './figure-canvas.js'
+
+import type { BoardModel, PartModel } from './figure-source.js'
+
+/**
+ * 카드에 쓸 그림을 찍는다 — **숨은 자리에 저작 캔버스를 하나 더 세워서.**
+ *
+ * ## 왜 보이는 캔버스를 찍지 않나
+ *
+ * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있고, 칸의 비율도 창 크기와 접힌 패널에 따라
+ * 다르다. 그것을 찍으면 카드마다 프레임이 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이
+ * 된다. 목록은 견주는 자리이므로 그림은 **정해진 크기와 정해진 카메라**로 찍는다.
+ *
+ * ## 왜 씬을 여기서 세우지 않고 부품을 세우나
+ *
+ * 씬 값(환경 · 하늘 · 조명 · 픽셀 비율 · 좌표 바탕)은 `figure-canvas` 가 든다. 여기서 다시 적으면
+ * 두 벌이 되고, 그러면 **카드에 보이는 그림과 저작면에서 보던 것이 아무 오류 없이 갈린다.** 그래서
+ * 같은 부품을 `viewOnly` 로 하나 더 세워 그 부품이 자기 씬을 세우게 하고, 찍은 뒤 버린다.
+ *
+ * ## 왜 서버가 아니라 브라우저인가
+ *
+ * 보드는 저장할 때 서버가 찍는데, 백엔드에 GPU 가 없는 배포가 많아 헤드리스로 3D 를 찍는 것이 자주
+ * 실패한다. 도형을 그릴 GPU 는 이미 보는 사람 손에 있다.
+ */
+
+/** 카드는 4:3 이다. */
+const WIDTH = 480
+const HEIGHT = 360
+
+interface Shooter extends HTMLElement {
+  board?: BoardModel
+  parts?: PartModel[]
+  viewOnly?: boolean
+  snapshot?: (width?: number, height?: number) => Promise<string | undefined>
+}
+
+/** 프레임 두 장 뒤에 한 번 더 쉰다 — 씬이 서고 카메라가 자리를 잡을 틈. 씬에 그 신호가 없다. */
+function settle(): Promise<void> {
+  return new Promise(resolve =>
+    requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 150)))
+  )
+}
+
+export async function captureThumbnail(
+  board: BoardModel | undefined,
+  parts: PartModel[]
+): Promise<string | undefined> {
+  if (!board || !parts.length) {
+    return undefined
+  }
+
+  /*
+    화면 밖에 둔다. `display: none` 이면 캔버스가 크기를 못 얻어 아무것도 그리지 못한다.
+    WebGL context 는 브라우저가 8~16개에서 끊으므로 찍은 뒤 반드시 버린다(아래 finally).
+  */
+  const host = document.createElement('div')
+  host.setAttribute('figure-thumbnail-stage', '')
+  host.style.cssText = `position: fixed; left: -10000px; top: 0; width: ${WIDTH}px; height: ${HEIGHT}px; pointer-events: none;`
+  document.body.appendChild(host)
+
+  const shooter = document.createElement('figure-canvas') as Shooter
+  shooter.viewOnly = true
+  shooter.board = board
+  shooter.parts = parts
+  shooter.style.cssText = 'display: block; width: 100%; height: 100%;'
+
+  try {
+    host.appendChild(shooter)
+    await settle()
+
+    return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined
+  } catch (e) {
+    console.warn(`[thumbnail] 세우지 못했습니다 — ${(e as Error).message}`)
+    return undefined
+  } finally {
+    host.remove()
+  }
+}

package/client/pages/figure-list-page.ts

@@ -5,6 +5,7 @@ import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
+import { auth } from '@things-factory/auth-base/dist-client'
 import { navigate, PageView } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
@@ -134,6 +135,10 @@ export class FigureListPage extends FigureListPageBase {
   @state() private search = ''
   @state() private stateFilter = ''
   @state() private loaded = false
+  /** 못 불러온 사유. 빈 목록과 구분해서 보여 준다. */
+  @state() private failure = ''
+
+  private listen?: () => void
 
   get context() {
     return {
@@ -183,7 +188,16 @@ export class FigureListPage extends FigureListPageBase {
 
       ${!this.loaded
         ? html``
-        : this.figures.length === 0
+        : this.failure
+          ? html`
+              <div empty>
+                <md-icon>error</md-icon>
+                <p>${i18next.t('text.could-not-load-figures')}</p>
+                <p quiet>${this.failure}</p>
+                <button @click=${() => this.reload()}>${i18next.t('button.try-again')}</button>
+              </div>
+            `
+          : this.figures.length === 0
           ? this.renderEmpty()
           : html`
               <div cards>
@@ -239,6 +253,38 @@ export class FigureListPage extends FigureListPageBase {
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    /*
+      **로그인 정보가 도착하면 다시 불러온다.**
+
+      화면이 서는 것과 프로필이 오는 것은 순서가 정해져 있지 않고, 목록 질의는 로그인된 사람으로
+      나간다. 첫 질의가 프로필보다 앞서면 그 한 번이 실패하고, 그 뒤로 다시 묻는 사람이 없으면
+      화면은 비어 있는 채로 남는다. lite-menu 도 같은 신호로 같은 순서 문제를 푼다
+      (`auth.on('profile')` — 그쪽 주석에 그 사연이 적혀 있다).
+
+      **이 화면에서 그 실패를 실제로 본 적은 없다.** 빈 화면을 봤던 것은 숨은 탭에서 조사할 때였고,
+      그때는 셸이 첫 `pageUpdated` 를 requestAnimationFrame 안에서 부르는데 숨은 탭은 rAF 를 돌리지
+      않아 질의가 아예 나가지 않았다 — 원인이 달랐다. 그래도 이 구독은 남긴다: 값이 싸고, 못 불러온
+      경우를 화면이 말하게 한 아래 처리와 짝이다.
+    */
+    this.listen = () => {
+      if (this.active) {
+        void this.reload()
+      }
+    }
+    auth.on('profile', this.listen)
+  }
+
+  disconnectedCallback() {
+    if (this.listen) {
+      auth.off?.('profile', this.listen)
+      this.listen = undefined
+    }
+    super.disconnectedCallback()
+  }
+
   async pageUpdated(changes: Record<string, unknown>, lifecycle: Record<string, unknown>) {
     if (this.active) {
       await this.reload()
@@ -246,14 +292,27 @@ export class FigureListPage extends FigureListPageBase {
   }
 
   private async reload() {
-    const { items, total } = await fetchFigureList({
-      search: this.search || undefined,
-      state: this.stateFilter || undefined
-    })
+    /*
+      **못 불러왔으면 그렇게 말한다.**
+
+      전에는 여기서 던진 오류가 아무도 받지 않아 `loaded` 가 거짓으로 남고, 화면은 아무것도 없이
+      비어 있었다. 목록이 비어 있는 것과 못 불러온 것은 다른 사실이고, 사용자가 할 일도 다르다 —
+      하나는 만들면 되고, 하나는 다시 시도하거나 사람을 불러야 한다.
+    */
+    try {
+      const { items, total } = await fetchFigureList({
+        search: this.search || undefined,
+        state: this.stateFilter || undefined
+      })
 
-    this.figures = items
-    this.total = total
-    this.loaded = true
+      this.figures = items
+      this.total = total
+      this.failure = ''
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.loaded = true
+    }
   }
 
   private openModeller(id?: string) {

package/client/pages/figure-modeller-page.ts

@@ -2,6 +2,7 @@ import '@material/web/icon/icon.js'
 import '../modeller/figure-side.js'
 import '../modeller/figure-ask.js'
 import '../modeller/figure-canvas.js'
+import { captureThumbnail } from '../modeller/figure-thumbnail.js'
 import '../modeller/figure-preview.js'
 import '../modeller/figure-parts.js'
 import '../modeller/figure-inspector.js'
@@ -188,7 +189,13 @@ export class FigureModellerPage extends FigureModellerPageBase {
       display: none;
     }
 
-    /* 머리줄 — 무엇을 고치는 중인지 늘 보인다 */
+    /*
+      머리줄 — 이름 · 타입 · 미저장 표시 · 말로 시키는 줄 · 저장을 **한 줄에** 담는다.
+
+      이름은 페이지 제목에도 나온다(셸이 context.title 로 그린다). 그래도 여기 입력칸을 두는
+      이유는 **고치는 자리**가 필요해서다 — 제목은 읽는 것이고 이 칸은 바꾸는 것이다. 두 줄로
+      벌리는 대신 한 줄에 모아 캔버스에 높이를 넘긴다.
+    */
     div[header] {
       display: flex;
       align-items: center;
@@ -196,9 +203,13 @@ export class FigureModellerPage extends FigureModellerPageBase {
       padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
+    div[header] figure-ask {
+      flex: 1;
+      min-width: 0;
+    }
     input[name] {
       flex: none;
-      width: 220px;
+      width: 180px;
       padding: 5px 9px;
       font: var(--input-field-font, inherit);
       font-size: 0.82rem;
@@ -522,7 +533,18 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
   get context() {
     return {
-      title: this.figure?.name ?? i18next.t('title.new-figure')
+      title: this.figure?.name ?? i18next.t('title.new-figure'),
+      /*
+        **제목 줄은 끈다.** 이름은 그대로 둔다.
+
+        이 화면의 주인공은 캔버스다. 이름은 속성 패널에서 보고 고치고, 브라우저 탭에도
+        「operato figure · 작업자」로 나온다. 그 위에 제목 줄을 한 겹 더 얹으면 같은 말이 세 번이고,
+        그만큼 캔버스가 낮아진다.
+
+        `title` 을 비우는 것으로 끄지 않는 이유는 그 값을 MDI 탭도 읽기 때문이다 — 비우면 탭 이름이
+        함께 사라진다. 이름은 하나이고 그리는 자리마다 켜고 끈다(`ox-page-title-bar`).
+      */
+      heading: false
     }
   }
 
@@ -531,30 +553,31 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     return html`
       <div header>
-        <input
-          name
-          .value=${this.figure?.name ?? ''}
-          placeholder=${i18next.t('text.figure-display-name')}
-          @change=${(e: Event) => this.rename((e.target as HTMLInputElement).value)}
-        />
-        <code type title=${i18next.t('text.type-name-cannot-change')}>${this.board?.figureType ?? ''}</code>
+        <!--
+          이름과 타입은 **속성 패널**에 있다(figure-inspector 의 도형 절). 여기 있던 이름 칸은
+          하네스 시절의 자리였다 — 앱에서는 셸이 페이지 제목으로 같은 이름을 그리므로 글자가 두 번
+          나오고, 캔버스가 주인공인 화면에서 그만큼 높이를 잃었다.
+        -->
         ${this.dirty ? html`<span dirty>${i18next.t('text.unsaved-changes')}</span>` : ''}
-        <div spacer></div>
+        <!--
+          말로 시키는 줄이 머리줄의 남는 폭을 쓴다. 따로 두면 화면 위가 두 줄이 되고, 그 위 줄은
+          이름을 페이지 제목과 겹쳐 적는다.
+        -->
+        <figure-ask
+          .source=${source}
+          .type=${source?.type ?? ''}
+          @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
+        ></figure-ask>
         <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
           ${this.saving ? i18next.t('text.saving') : i18next.t('button.save')}
         </button>
       </div>
 
-      <figure-ask
-        .source=${source}
-        .type=${source?.type ?? ''}
-        @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
-      ></figure-ask>
-
       <div
         edits
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
+        @figure-rename=${(e: CustomEvent) => this.rename(e.detail.name)}
         @add-part=${(e: CustomEvent) => this.addPart(e.detail.primitive)}
         @select-part=${(e: CustomEvent) => (this.selected = e.detail.index)}
         @remove-part=${(e: CustomEvent) => this.removePart(e.detail.index)}
@@ -614,6 +637,7 @@ export class FigureModellerPage extends FigureModellerPageBase {
         </div>
 
         <figure-side
+          .figureName=${this.figure?.name ?? ''}
           .board=${this.board}
           .parts=${this.parts}
           .source=${source}
@@ -862,6 +886,11 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
     this.figure = figure
 
+    /* 그림이 없으면 이 자리에서 채운다(아래 `fillThumbnail`). 기다리지 않는다 — 화면이 먼저다. */
+    if (!figure.thumbnail && figure.id) {
+      void this.fillThumbnail(figure.id)
+    }
+
     // 서버가 준 것을 그대로 쓴다. 읽지 못하면 오류보고없이 빈 상태로 바꾸지 않는다.
     // 그러면 사용자가 저장을 선택해 원본을 덮어쓴다.
     const model = figure.source ? fromFigureSource(JSON.parse(figure.source) as FigureSource) : undefined
@@ -1025,6 +1054,39 @@ export class FigureModellerPage extends FigureModellerPageBase {
     if (at >= 0) this.selected = at
   }
 
+  /**
+   * 그림이 없는 도형을 **열었을 때 한 번** 찍어 채운다.
+   *
+   * ## 왜 여기인가
+   *
+   * 보드는 저장할 때 서버가 찍는다. 그런데 백엔드에 GPU 가 없는 배포가 많아 헤드리스로 3D 를 찍는
+   * 것이 자주 실패한다. 도형을 그리는 GPU 는 이미 보는 사람 손에 있고, 씬은 지금 여기 서 있다.
+   *
+   * 저작면을 거치지 않고 생긴 것들이 그림이 없다 — 씨앗으로 넣은 표본, AI 가 낸 후보, 반입한 자산.
+   * 그것들을 한 번 열어 보면 그때 채워진다.
+   *
+   * ## 저장이 아니다
+   *
+   * 그림만 보낸다. 정본을 건드리지 않으므로 미저장 표시도 켜지 않는다 — 열어 봤다는 것이 고쳤다는
+   * 뜻이 되면 저작자가 저장할지 말지를 매번 고민한다.
+   */
+  private async fillThumbnail(id: string): Promise<void> {
+    await this.updateComplete
+
+    const thumbnail = await captureThumbnail(this.board, this.parts)
+    if (!thumbnail || this.figure?.id !== id) {
+      return
+    }
+
+    try {
+      await updateFigure(id, { thumbnail })
+      this.figure = { ...this.figure, thumbnail }
+    } catch (e) {
+      /* 볼 권한만 있는 사람일 수 있다. 화면은 그대로 두고 조용히 넘어간다. */
+      console.warn(`[thumbnail] ${id} 를 채우지 못했습니다 — ${(e as Error).message}`)
+    }
+  }
+
   private async save() {
     if (!this.canSave || !this.folded || !this.figure) {
       return
@@ -1033,11 +1095,21 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.saving = true
     try {
       const sourceJson = JSON.stringify(this.folded)
+      /*
+        보이는 것을 그대로 찍어 함께 보낸다.
+
+        카드가 그림 없이 서 있으면 카탈로그에서 무엇인지 못 고른다. 찍는 자리를 저장에 두는 이유는
+        **그 순간이 정본이 바뀌는 순간**이라서다 — 따로 찍는 절차를 두면 그림과 정본이 갈린다.
+
+        못 찍으면 보내지 않는다(`undefined`). 빈 그림을 넣어 「그림이 있다」고 말하지 않는다.
+      */
+      const thumbnail = await captureThumbnail(this.board, this.parts)
 
       if (this.figure.id) {
         const result = await updateFigure(this.figure.id, {
           name: this.figure.name,
-          source: sourceJson
+          source: sourceJson,
+          thumbnail
         })
         this.figure = result.figure
         this.violations = result.violations
@@ -1052,7 +1124,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
         const result = await createFigure({
           type: this.folded.type,
           name: this.figure.name,
-          source: sourceJson
+          source: sourceJson,
+          thumbnail
         })
         this.figure = result.figure
         this.violations = result.violations

package/dist-client/modeller/figure-ask.js

@@ -32,10 +32,19 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
         this.failure = '';
     }
     static { this.styles = css `
+    /*
+      이 부품은 **자기 줄을 갖지 않는다.**
+
+      전에는 테두리와 여백으로 스스로 한 줄이 되었다. 저작면의 머리줄 바로 아래에 놓이니
+      화면 위쪽이 두 줄이 되었고, 위 줄은 이름을 페이지 제목과 겹쳐 적고 있었다. 캔버스가
+      주인공인 화면에서 그 두 줄은 비싸다.
+
+      이제 머리줄 안에 들어가 그 줄의 남는 폭을 쓴다. 테두리·여백은 담는 줄이 갖는다.
+    */
     :host {
-      display: block;
-      background-color: var(--md-sys-color-surface-container-lowest);
-      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      display: flex;
+      flex: 1;
+      min-width: 0;
       font: var(--label-font, inherit);
       /*
         이 줄의 글자 크기를 여기서 정한다.
@@ -50,9 +59,10 @@ let FigureAsk = class FigureAsk extends localize(i18next)(LitElement) {
 
     form {
       display: flex;
+      flex: 1;
+      min-width: 0;
       align-items: center;
       gap: var(--spacing-medium, 8px);
-      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
     }
 
     md-icon[lead] {