@things-factory/figure-ui 10.1.3 → 10.1.5

package/client/graphql/index.ts

@@ -1,7 +1,15 @@
 import gql from 'graphql-tag'
 import { client } from '@operato/graphql'
 
-import type { Figure, FigureFinding, FigureListResult, FigurePatch, FigureProposal, NewFigure } from '../types.js'
+import type {
+  Figure,
+  FigureFinding,
+  FigureListResult,
+  FigurePatch,
+  FigureProposal,
+  FigureVersion,
+  NewFigure
+} from '../types.js'
 
 /**
  * 응답에서 값을 꺼낸다. **서버가 말한 사유를 그대로 올린다.**
@@ -39,6 +47,7 @@ const FIGURE_LIST_FIELDS = `
   description
   category
   state
+  version
   score
   triangles
   groups
@@ -48,17 +57,19 @@ const FIGURE_LIST_FIELDS = `
   updater { id name }
 `
 
+/**
+ * 목록을 가져온다.
+ *
+ * 걸러 보기·정렬·쪽 나누기를 **그대로 넘긴다.** 화면이 `search`·`state` 같은 이름을 따로 만들어
+ * filter 로 옮기던 것을 그만두었다 — 그 이름들은 격자(ox-grist)가 이미 컬럼 설정에서 만들어 주고,
+ * 중간에 한 벌 더 두면 격자가 아는 조건과 서버에 가는 조건이 어긋난다.
+ */
 export async function fetchFigureList(params: {
   page?: number
   limit?: number
-  search?: string
-  category?: string
-  state?: string
+  filters?: unknown[]
+  sortings?: { name: string; desc?: boolean }[]
 }): Promise<FigureListResult> {
-  const filters: { name: string; operator: string; value: unknown }[] = []
-  if (params.category) filters.push({ name: 'category', operator: 'eq', value: params.category })
-  if (params.state) filters.push({ name: 'state', operator: 'eq', value: params.state })
-
   const response = await client.query({
     query: gql`
       query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
@@ -69,9 +80,9 @@ export async function fetchFigureList(params: {
       }
     `,
     variables: {
-      filters,
+      filters: params.filters ?? [],
       pagination: { page: params.page ?? 1, limit: params.limit ?? 30 },
-      sortings: [{ name: 'updatedAt', desc: true }]
+      sortings: params.sortings?.length ? params.sortings : [{ name: 'updatedAt', desc: true }]
     },
     fetchPolicy: 'network-only'
   })
@@ -88,7 +99,6 @@ export async function fetchFigure(id: string): Promise<Figure> {
           ${FIGURE_LIST_FIELDS}
           source
           properties
-          version
         }
       }
     `,
@@ -145,7 +155,7 @@ export async function updateFigure(id: string, patch: FigurePatch): Promise<Save
     mutation: gql`
       mutation ($id: String!, $patch: FigurePatch!) {
         updateFigure(id: $id, patch: $patch) {
-          figure { ${FIGURE_LIST_FIELDS} source version }
+          figure { ${FIGURE_LIST_FIELDS} source }
           violations { code message at }
         }
       }
@@ -207,3 +217,68 @@ export async function proposeFigure(request: {
 
   return unwrap<FigureProposal>(response, 'proposeFigure')
 }
+
+/**
+ * 발행한다 — 판 번호가 오르고, 그 순간이 판본으로 남는다.
+ *
+ * 이미 발행된 것을 다시 발행하면 서버가 거절한다. 고쳐서 다시 내려면 저장이 먼저이고, 저장은
+ * 발행을 푼다(초안으로 돌아온다).
+ */
+export async function releaseFigure(id: string, comment?: string): Promise<Figure> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ReleaseFigure($id: String!, $comment: String) {
+        releaseFigure(id: $id, comment: $comment) {
+          id
+          version
+          state
+          updatedAt
+        }
+      }
+    `,
+    variables: { id, comment }
+  })
+
+  return unwrap<Figure>(response, 'releaseFigure')
+}
+
+/** 옛 판을 초안으로 되살린다. 정본·속성·그림이 돌아오고 이름·설명은 그대로다. */
+export async function revertFigureVersion(id: string, version: number): Promise<SaveResult> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation RevertFigureVersion($id: String!, $version: Float!) {
+        revertFigureVersion(id: $id, version: $version) {
+          figure { ${FIGURE_LIST_FIELDS} source }
+          violations { code message at }
+        }
+      }
+    `,
+    variables: { id, version }
+  })
+
+  return unwrap<SaveResult>(response, 'revertFigureVersion')
+}
+
+/** 발행된 판들 — 최근 것부터 열 개. */
+export async function fetchFigureVersions(id: string): Promise<FigureVersion[]> {
+  const response = await client.query({
+    query: gql`
+      query FigureVersions($id: String!) {
+        figureVersions(id: $id) {
+          version
+          comment
+          state
+          updatedAt
+          updater { id name }
+          score
+          triangles
+          groups
+        }
+      }
+    `,
+    variables: { id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureVersion[]>(response, 'figureVersions') ?? []
+}

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-history-panel.ts

@@ -0,0 +1,324 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+import { fetchFigureVersions, releaseFigure, revertFigureVersion } from '../graphql/index.js'
+import type { FigureVersion } from '../types.js'
+
+/**
+ * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
+ *
+ * ## 왜 저장 옆이 아니라 여기인가
+ *
+ * 저장은 하루에 수십 번이고 발행은 드물다. 두 단추를 나란히 두면 저장하려다 발행을 누른다.
+ * 그리고 발행은 **소비처에게 하는 약속**이라, 무엇을 약속하는지(지금 몇 판인가 · 저장 안 한 것이
+ * 있나 · 지난 판이 무엇이었나)를 함께 보여 주는 자리에 있어야 한다.
+ *
+ * ## 저장하지 않은 것이 있으면 발행하지 않는다
+ *
+ * 발행은 **저장된 것**을 내보낸다. 화면에 고친 것이 남아 있는 채로 발행하면, 저작자가 보고 있는
+ * 것과 약속한 것이 다르다. 그래서 막고, 왜 막혔는지 적는다.
+ *
+ * ## 되돌리기는 초안으로 돌아온다
+ *
+ * 옛 판의 정본·속성·그림이 돌아오고 이름·설명은 그대로다. 되살렸다고 그 판이 다시 발행되지는
+ * 않는다 — 다시 내보내려면 발행을 한 번 더 하고, 그때 번호는 이미 쓴 다음 번호를 받는다.
+ */
+@customElement('figure-history-panel')
+export class FigureHistoryPanel extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: auto;
+      background-color: var(--md-sys-color-surface-container-lowest);
+      color: var(--md-sys-color-on-surface);
+      font: var(--label-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    :host([off]) {
+      display: none;
+    }
+
+    section {
+      padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    h3 {
+      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));
+    }
+
+    /* 지금 무엇인가 — 발행을 누르기 전에 읽는 한 줄 */
+    div[now] {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+
+    span[state] {
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 0.7rem;
+      font-weight: 700;
+      color: var(--md-sys-color-on-secondary-container);
+      background-color: var(--md-sys-color-secondary-container);
+    }
+
+    span[state][released] {
+      color: var(--md-sys-color-on-primary);
+      background-color: var(--md-sys-color-primary);
+    }
+
+    span[ver] {
+      font-family: var(--mono-font, monospace);
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    input,
+    button {
+      font: var(--input-field-font, inherit);
+      font-size: 0.76rem;
+    }
+
+    input[note] {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 5px 8px;
+      color: var(--md-sys-color-on-surface);
+      background-color: var(--md-sys-color-surface-container-lowest);
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+    }
+
+    button[release] {
+      width: 100%;
+      margin-top: 6px;
+      padding: 6px 0;
+      font-weight: 700;
+      color: var(--ui-on-accent, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: 0;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    button[release][disabled] {
+      opacity: 0.45;
+      cursor: default;
+    }
+
+    /* 왜 못 누르는지 — 눌러 보고 알게 하지 않는다 */
+    p[why] {
+      margin: 6px 0 0 0;
+      font-size: 0.7rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    p[failed] {
+      margin: 6px 0 0 0;
+      font-size: 0.7rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-error);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 4px 8px;
+      align-items: baseline;
+      padding: 7px 0;
+      border-bottom: 1px dashed var(--md-sys-color-outline-variant);
+    }
+
+    li:last-child {
+      border-bottom: 0;
+    }
+
+    li span[no] {
+      font-family: var(--mono-font, monospace);
+      font-weight: 700;
+    }
+
+    li span[when] {
+      grid-column: 2 / 4;
+      font-size: 0.7rem;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    li span[comment] {
+      grid-column: 1 / 4;
+      line-height: 1.5;
+    }
+
+    li button[revert] {
+      padding: 2px 8px;
+      color: var(--md-sys-color-on-surface);
+      background: none;
+      border: 1px solid var(--md-sys-color-outline-variant);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    li button[revert]:hover {
+      color: var(--md-sys-color-on-primary-container);
+      background-color: var(--md-sys-color-primary-container);
+      border-color: transparent;
+    }
+
+    p[quiet] {
+      margin: 0;
+      line-height: 1.6;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+  `
+
+  /** 지금 열려 있는 도형. 없으면(새로 만드는 중) 발행할 것이 없다. */
+  @property({ type: String }) figureId?: string
+  @property({ type: String }) figureState?: 'draft' | 'released'
+  @property({ type: Number }) figureVersion = 0
+  /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
+  @property({ type: Boolean }) dirty = false
+
+  @state() private versions: FigureVersion[] = []
+  @state() private busy = false
+  @state() private failure = ''
+
+  updated(changes: Map<string, unknown>) {
+    if (changes.has('figureId') || changes.has('figureVersion')) {
+      void this.reload()
+    }
+  }
+
+  private async reload() {
+    if (!this.figureId) {
+      this.versions = []
+      return
+    }
+
+    try {
+      this.versions = await fetchFigureVersions(this.figureId)
+      this.failure = ''
+    } catch (e) {
+      this.failure = (e as Error).message
+    }
+  }
+
+  render() {
+    return html`
+      <section>
+        <h3>${i18next.t('label.release')}</h3>
+        ${this.figureId ? this.renderRelease() : html`<p quiet>${i18next.t('text.save-the-figure-before-releasing')}</p>`}
+      </section>
+
+      <section>
+        <h3>${i18next.t('label.released-versions')}</h3>
+        ${this.versions.length
+          ? html`<ul>
+              ${this.versions.map(version => this.renderVersion(version))}
+            </ul>`
+          : html`<p quiet>${i18next.t('text.nothing-released-yet')}</p>`}
+      </section>
+    `
+  }
+
+  private renderRelease() {
+    const released = this.figureState === 'released'
+    /* 막는 이유는 하나씩 말한다. 「발행할 수 없습니다」로 뭉치면 무엇을 하면 되는지 모른다. */
+    const why = this.dirty
+      ? i18next.t('text.release-needs-a-save-first')
+      : released
+        ? i18next.t('text.already-released-edit-to-release-again')
+        : ''
+
+    return html`
+      <div now>
+        <span state ?released=${released}>${i18next.t(released ? 'label.released' : 'label.draft')}</span>
+        <span ver>${i18next.t('text.version-number', { version: this.figureVersion ?? 0 })}</span>
+      </div>
+
+      <input note placeholder=${i18next.t('text.what-changed-in-this-release')} ?disabled=${!!why || this.busy} />
+
+      <button release ?disabled=${!!why || this.busy} @click=${() => this.release()}>
+        ${this.busy ? i18next.t('text.releasing') : i18next.t('button.release')}
+      </button>
+
+      ${why ? html`<p why>${why}</p>` : nothing}
+      ${this.failure ? html`<p failed>${this.failure}</p>` : nothing}
+    `
+  }
+
+  private renderVersion(version: FigureVersion) {
+    return html`
+      <li>
+        <span no>${i18next.t('text.version-number', { version: version.version })}</span>
+        <span when>
+          ${version.updatedAt ? new Date(version.updatedAt).toLocaleString() : ''}
+          ${version.updater?.name ? ` · ${version.updater.name}` : ''}
+        </span>
+        <button revert ?disabled=${this.busy} @click=${() => this.revert(version.version)}>
+          ${i18next.t('button.revert')}
+        </button>
+        ${version.comment ? html`<span comment>${version.comment}</span>` : nothing}
+      </li>
+    `
+  }
+
+  private async release() {
+    const input = this.renderRoot.querySelector('input[note]') as HTMLInputElement
+    const comment = input?.value?.trim()
+
+    this.busy = true
+    this.failure = ''
+
+    try {
+      const figure = await releaseFigure(this.figureId!, comment || undefined)
+      if (input) input.value = ''
+      /* 정본을 든 자리가 갱신한다 — 여기서 페이지 상태를 고쳐 쓰지 않는다. */
+      this.dispatchEvent(new CustomEvent('figure-released', { detail: { figure }, bubbles: true, composed: true }))
+      await this.reload()
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.busy = false
+    }
+  }
+
+  private async revert(version: number) {
+    /* 되돌아갈 수 없는 조작은 아니지만(판본은 남는다), 지금 화면의 것이 덮인다 — 이름으로 확인한다. */
+    if (!confirm(i18next.t('text.revert-to-version-confirm', { version }))) {
+      return
+    }
+
+    this.busy = true
+    this.failure = ''
+
+    try {
+      const result = await revertFigureVersion(this.figureId!, version)
+      this.dispatchEvent(new CustomEvent('figure-reverted', { detail: result, bubbles: true, composed: true }))
+      await this.reload()
+    } catch (e) {
+      this.failure = (e as Error).message
+    } finally {
+      this.busy = false
+    }
+  }
+}

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>
     `
   }