@things-factory/figure-ui 10.1.6 → 10.1.7

package/client/modeller/figure-inspector.ts

@@ -530,6 +530,10 @@ export class FigureInspector extends localize(i18next)(LitElement) {
   /** 보드. 위치를 보드 중심 기준으로 바꾸려면 이것이 있어야 한다. */
   /** 도형의 표시 이름. 정본은 저작면이 들고, 여기서는 보여 주고 바꾼다(`figure-rename` 으로 알린다). */
   @property({ type: String }) figureName = ''
+  /** 분류 하나 — 팔레트에서 묶는 기준. */
+  @property({ type: String }) figureCategory?: string
+  /** 태그 여럿 — 분류로는 못 하는 찾기. */
+  @property({ type: Array }) figureTags?: string[]
 
   /** 펴 둔 도움말. 부품을 바꿔도 유지된다 — 매번 다시 펴게 하지 않는다. */
   @state() private opened = new Set<string>()
@@ -720,10 +724,53 @@ export class FigureInspector extends localize(i18next)(LitElement) {
           왜 못 고치는지 **적어 둔다.** 전에는 tooltip 에만 있었고, 그러면 눌러 보고 안 되는 것을
           알게 된다 — 화면이 안 되는 이유를 말하지 않으면 사용자가 자기 실수라고 생각한다.
         -->
+
+        <div field>
+          <label>${i18next.t('figure.label.category')}${this.help('figure.text.category-explained')}</label>
+          <input
+            .value=${this.figureCategory ?? ''}
+            placeholder=${i18next.t('figure.text.category-placeholder')}
+            @change=${(e: Event) => this.tellCatalog({ category: (e.target as HTMLInputElement).value.trim() || undefined })}
+          />
+        </div>
+
+        <div field>
+          <label>${i18next.t('figure.label.tags')}${this.help('figure.text.tags-explained')}</label>
+          <input
+            .value=${(this.figureTags ?? []).join(', ')}
+            placeholder=${i18next.t('figure.text.tags-placeholder')}
+            @change=${(e: Event) => this.tellTags((e.target as HTMLInputElement).value)}
+          />
+        </div>
       </section>
     `
   }
 
+  /**
+   * 태그 줄을 목록으로.
+   *
+   * 쉼표로 가르고 `#` 은 떼어 낸다 — 사람은 `#반출` 이라고 적고, 저장되는 것은 `반출` 이다.
+   * 겹친 것은 한 번만 남긴다. 빈 줄은 **빈 배열**이지 `undefined` 가 아니다 — 전부 지우려는
+   * 저작자가 지울 방법을 잃지 않게.
+   */
+  private tellTags(raw: string) {
+    const tags = [
+      ...new Set(
+        raw
+          .split(',')
+          .map(one => one.trim().replace(/^#+/, '').trim())
+          .filter(one => one.length > 0)
+      )
+    ]
+
+    this.tellCatalog({ tags })
+  }
+
+  /** 카탈로그 값이 바뀌었다고 알린다. 정본은 저작면이 든다 — 여기서는 알리기만 한다. */
+  private tellCatalog(patch: { category?: string; tags?: string[] }) {
+    this.dispatchEvent(new CustomEvent('figure-catalog', { detail: patch, bubbles: true, composed: true }))
+  }
+
   private renderIdentity(part: FigurePart) {
     return html`
       <section>

package/client/modeller/figure-side.ts

@@ -1,5 +1,7 @@
+import '@material/web/icon/icon.js'
 import './figure-inspector.js'
 import './figure-capabilities.js'
+import './figure-animations.js'
 import './figure-report.js'
 import './figure-settings.js'
 import './figure-history-panel.js'
@@ -14,7 +16,7 @@ import type { BoardModel, PartModel } from './figure-source.js'
 import { DEFAULT_VIEW } from './figure-view.js'
 import type { ViewSettings } from './figure-view.js'
 
-type Tab = 'properties' | 'capability' | 'verdict' | 'view' | 'history'
+type Tab = 'properties' | 'capability' | 'animation' | 'verdict' | 'view' | 'history'
 
 /**
  * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.
@@ -67,21 +69,21 @@ export class FigureSide extends localize(i18next)(LitElement) {
     button[tab] {
       flex: 1;
       /*
-        **탭 이름은 한 줄이다.** 배지를 이름 옆에 나란히 두었더니 넷이 좁은 칸을 나눠 쓰면서
-        이름이 접혀 「성숙 / 도」가 되었다. 이름이 접히면 그 줄이 두 줄이 되고 네 탭의 높이가
-        서로 달라진다.
+        **아이콘 하나가 한 칸을 쓴다.**
 
-        그래서 배지는 자리를 차지하지 않고 **이름 위에 겹친다**(아래 span[badge]). 개수는
-        곁들이는 것이고 이름이 먼저다.
+        전에는 이름을 적었는데, 넷이 좁은 칸을 나눠 쓰면서 접혀 「성숙 / 도」가 되었다. 접히면
+        그 탭만 두 줄이 되어 높이가 서로 달라진다. 다섯이 되면서 더는 줄여 짜 넣을 수 없어
+        아이콘으로 바꿨고, 이름은 title 과 aria-label 로 남는다.
+
+        배지는 여전히 자리를 차지하지 않고 **아이콘 위에 겹친다**(아래 span[badge]). 개수는
+        곁들이는 것이다.
       */
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       white-space: nowrap;
-      padding: 8px 6px;
-      font: var(--label-font, inherit);
-      font-size: 0.76rem;
+      padding: 7px 6px;
       color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       background: none;
       border: none;
@@ -104,6 +106,11 @@ export class FigureSide extends localize(i18next)(LitElement) {
       자리를 먹지 않게 오른쪽 위에 겹쳐 둔다 — 탭 이름을 밀지 않으므로 이름이 접히지 않는다.
       숫자가 커져도(1,200 같은 것) 이름 위로 넘칠 뿐 줄을 바꾸지 않는다.
     */
+    button[tab] md-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
     span[badge] {
       position: absolute;
       /* 이름 위에 겹치되 위로 붙지 않게 — 탭 가운데 글자와 눈높이를 조금 맞춘다 */
@@ -120,6 +127,7 @@ export class FigureSide extends localize(i18next)(LitElement) {
     }
 
     figure-inspector,
+    figure-animations,
     figure-report,
     figure-settings {
       flex: 1;
@@ -139,6 +147,9 @@ export class FigureSide extends localize(i18next)(LitElement) {
     곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.
   */
   @property({ type: String }) figureName = ''
+  /** 카탈로그 분류·태그. 속성 탭이 보여 주고 바꾼다. */
+  @property({ type: String }) figureCategory?: string
+  @property({ type: Array }) figureTags?: string[]
   /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */
   @property({ type: String }) figureId?: string
   @property({ type: String }) figureState?: 'draft' | 'released'
@@ -156,19 +167,34 @@ export class FigureSide extends localize(i18next)(LitElement) {
   /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */
   @state() private instances?: number
 
+  /**
+   * 이 도형이 든 clip 수. 탭 아이콘에 붙는다.
+   *
+   * 아이콘만으로는 「여기에 무언가 있다」를 알 수 없다. 대부분의 도형은 움직이지 않으므로
+   * 이 탭은 늘 비어 있을 것이고, 그러면 움직이는 도형을 열었을 때 그 사실이 눈에 걸려야 한다.
+   * 0 이면 아무것도 안 붙인다 — 「0」을 붙이면 없는 것이 있는 것처럼 자리를 차지한다.
+   */
+  private get clipCount(): number | undefined {
+    const n = this.board?.animations?.length ?? 0
+    return n === 0 ? undefined : n
+  }
+
   render() {
     return html`
       <div tabs>
-        ${this.renderTab('properties', i18next.t('figure.label.properties'))}
-        ${this.renderTab('capability', i18next.t('figure.label.tab-capability'))}
-        ${this.renderTab('verdict', i18next.t('figure.label.maturity'), this.instances)}
-        ${this.renderTab('view', i18next.t('figure.label.tab-environment'))}
-        ${this.renderTab('history', i18next.t('figure.label.history'))}
+        ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
+        ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
+        ${this.renderTab('animation', 'animation', i18next.t('figure.label.animation'), this.clipCount)}
+        ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
+        ${this.renderTab('view', 'wb_sunny', i18next.t('figure.label.tab-environment'))}
+        ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
       </div>
 
       <figure-inspector
         ?off=${this.tab !== 'properties'}
         .figureName=${this.figureName}
+        .figureCategory=${this.figureCategory}
+        .figureTags=${this.figureTags}
         .board=${this.board}
         .parts=${this.parts}
         .selected=${this.selected}
@@ -180,6 +206,12 @@ export class FigureSide extends localize(i18next)(LitElement) {
         .parts=${this.parts}
       ></figure-capabilities>
 
+      <figure-animations
+        ?off=${this.tab !== 'animation'}
+        .board=${this.board}
+        .parts=${this.parts}
+      ></figure-animations>
+
       <figure-report
         ?off=${this.tab !== 'verdict'}
         .source=${this.source}
@@ -201,10 +233,26 @@ export class FigureSide extends localize(i18next)(LitElement) {
     `
   }
 
-  private renderTab(tab: Tab, label: string, badge?: number) {
+  /**
+   * 탭 하나 — **아이콘이 이름을 대신한다.**
+   *
+   * 탭이 다섯이 되면서 이름이 좁은 칸을 나눠 쓰다 접혔다. 앞으로 더 늘어날 자리이므로 이름을
+   * 줄여 짜 넣는 대신 아이콘으로 바꾼다.
+   *
+   * **이름을 버리지는 않는다.** 아이콘만으로는 무엇인지 모르는 사람이 있고, 특히 「능력」처럼
+   * 이 도구에만 있는 개념이 그렇다. 그래서 이름은 `title` 로 남아 마우스를 올리면 나오고,
+   * `aria-label` 로 읽는 기계에도 그대로 간다.
+   */
+  private renderTab(tab: Tab, icon: string, label: string, badge?: number) {
     return html`
-      <button tab ?on=${this.tab === tab} @click=${() => (this.tab = tab)}>
-        ${label}${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
+      <button
+        tab
+        ?on=${this.tab === tab}
+        title=${label}
+        aria-label=${label}
+        @click=${() => (this.tab = tab)}
+      >
+        <md-icon>${icon}</md-icon>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}
       </button>
     `
   }

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

@@ -36,10 +36,21 @@ const CAPACITY = 'font-weight: 700; color: var(--md-sys-color-primary);'
 const UNMEASURED = 'font-style: italic; color: var(--md-sys-color-outline);'
 const RELEASED = 'font-weight: 700; color: var(--md-sys-color-primary);'
 const DRAFT = 'color: var(--md-sys-color-tertiary);'
-/** 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다. */
-const SCORE = 'display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums;'
+/**
+ * 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다.
+ *
+ * **`inline-flex` 를 쓰지 않는다.** 썼더니 점이 뜨는 카드에서만 이 값이 옆의 두 값과 밑줄이
+ * 어긋났다 — inline-flex 상자의 밑줄은 **첫 항목**에서 오는데, 첫 항목이 글자 없는 점이라
+ * 밑줄이 없어 브라우저가 상자 아래를 밑줄로 삼는다. 점이 없는 카드(50 이상)는 멀쩡했으므로
+ * 한 줄에 세 값이 나란히 설 때만 눈에 띄었다.
+ *
+ * 그냥 인라인으로 두면 이 상자의 밑줄이 곧 숫자의 밑줄이라 옆의 둘과 맞는다. 점은 제 몫으로
+ * 글자 가운데에 맞춘다.
+ */
+const SCORE = 'font-variant-numeric: tabular-nums;'
 const LOW_DOT =
-  'width: 5px; height: 5px; border-radius: 50%; background-color: var(--md-sys-color-error); flex: none;'
+  'display: inline-block; width: 5px; height: 5px; margin-right: 4px; vertical-align: middle; ' +
+  'border-radius: 50%; background-color: var(--md-sys-color-error);'
 
 /*
  * `as typeof PageView` 로 조이지 않는다 — 그렇게 하면 p13n 이 얹어 주는
@@ -179,7 +190,7 @@ export class FigureListPage extends FigureListPageBase {
           this.grist.searchText = search
         },
         value: this.grist?.searchText || '',
-        placeholder: i18next.t('figure.text.search-figure-by-name-or-type')
+        placeholder: i18next.t('figure.text.search-figure')
       },
       filter: {
         handler: () => {
@@ -200,6 +211,7 @@ export class FigureListPage extends FigureListPageBase {
     return html`
       <ox-grist
         mode="CARD"
+        @search-tag=${(e: CustomEvent) => this.findByTag(e.detail.tag)}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}
@@ -219,6 +231,21 @@ export class FigureListPage extends FigureListPageBase {
     `
   }
 
+  /**
+   * 카드의 태그 알약을 눌렀다 — **그 태그로 목록을 거른다.**
+   *
+   * 검색창에 그 말을 채워 넣는다. 격자에 조건만 걸고 창을 비워 두면 저작자는 **왜 목록이
+   * 줄었는지 모른 채** 보게 되고, 되돌리려면 무엇을 지워야 하는지도 알 수 없다.
+   *
+   * 서버가 `tags` 뿐 아니라 이름·타입·설명·분류를 함께 훑으므로, 그 말이 다른 칸에 든 도형도
+   * 같이 온다. 태그만 정확히 거르는 것이 아니라 **찾기**다.
+   */
+  private findByTag(tag: string) {
+    this.grist.searchText = tag
+    /* 창의 값은 `context` 에서 나온다 — 다시 알려야 헤더가 새 값을 그린다. */
+    this.updateContext()
+  }
+
   async pageInitialized() {
     this.gristConfig = {
       /*
@@ -300,6 +327,31 @@ export class FigureListPage extends FigureListPageBase {
           sortable: true,
           width: 160
         },
+        {
+          /*
+            태그 — **카드에서 곁줄로 보이고 검색에 걸린다.**
+
+            서버가 이미 `type`·`name`·`description`·`category`·`tags` 를 함께 훑는다. 그런데
+            화면에는 태그가 어디에도 안 보여서, 저작자가 적은 태그가 **자기 눈에 돌아오지 않았다** —
+            적어 둔 것이 쓰이는지 알 수 없으면 아무도 적지 않는다.
+
+            정렬은 걸지 않는다. 배열이라 무엇을 기준으로 줄을 세우는지 답할 수 없다.
+
+            **카드에서는 이 컬럼이 그리지 않는다.** 본문에 한 줄로 두었더니 태그가 있는 카드만
+            높아져 격자가 어긋났다 — 개수가 도형마다 다르므로 본문에 두는 한 남는 문제다.
+            카드에서는 `figure-thumb` 이 그림 위에 얹는다. 여기 남은 것은 표 모드의 칸이다.
+          */
+          type: 'string',
+          name: 'tags',
+          header: i18next.t('figure.label.tags'),
+          record: {
+            editable: false,
+            renderer: (value: string[] | null) => (value || []).join(' · ')
+          },
+          filter: 'search',
+          sortable: false,
+          width: 180
+        },
         {
           type: 'string',
           name: 'state',

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

@@ -1,18 +1,6 @@
 import '@material/web/icon/icon.js'
 import '../modeller/figure-side.js'
 import '../modeller/figure-ask.js'
-/*
-  대화 도크. **`/client` 서브패스로 적으면 안 된다.**
-
-  그 패키지에 `exports` 맵이 없어서 `/client` 는 소스 디렉터리로 떨어지고, webpack 이 `.ts` 를 직접
-  컴파일한다. 그 경로로 나온 데코레이터가 `Reflect.metadata` 를 가드 없이 불러 **브라우저에서만**
-  죽는다(빌드 로그는 오류 0건). board-ai 와 plant 가 차례로 밟았다.
-
-  그리고 더 센 이유가 있다 — `board-ui/dist-client` 의 모델러가 같은 엘리먼트를 **빌드된 경로로**
-  등록한다. 다른 경로로 적으면 webpack 이 두 모듈로 보고, 두 곳이 같은 커스텀 엘리먼트 이름을
-  등록해 나중에 뜨는 화면이 죽는다. 즉 「어느 경로가 되나」가 아니라 **「모두 같은 경로여야 한다」**다.
-*/
-import '@things-factory/ai-assistant/dist-client/index.js'
 import '../modeller/figure-canvas.js'
 import { captureThumbnail } from '../modeller/figure-thumbnail.js'
 import '../modeller/figure-preview.js'
@@ -25,7 +13,6 @@ import { customElement, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { navigate, PageView } from '@operato/shell'
 import { validate } from '@hatiolab/figure-model'
-import { activePalette } from '@hatiolab/things-scene'
 import type { DetailLevel, FigureSource, PrimitiveKind } from '@hatiolab/figure-model'
 
 import * as edits from '../modeller/part-edits.js'
@@ -147,50 +134,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
     div[edits] {
       flex: 1;
       display: grid;
-      grid-template-columns: 220px 1fr 320px 0;
+      grid-template-columns: 220px 1fr 320px;
       min-height: 0;
       overflow: hidden;
     }
-    /*
-      대화 도크는 **불렀을 때만 자리를 받는다.** 저작의 주인공은 캔버스이고, 대화는 필요할 때
-      여는 것이다. 늘 열어 두면 넷으로 나뉜 화면에서 캔버스가 가장 좁아진다.
-    */
-    div[edits][dock] {
-      grid-template-columns: 220px 1fr 320px 360px;
-    }
-    div[edits] > ox-board-ai-chat {
-      grid-column: 4;
-      min-width: 0;
-      border-left: 1px solid var(--md-sys-color-outline-variant);
-      background-color: var(--md-sys-color-surface-container-lowest);
-    }
-    div[edits]:not([dock]) > ox-board-ai-chat {
-      display: none;
-    }
-
-    /* 도크를 여는 손잡이. 머리줄의 저장 단추 옆에 둔다 */
-    button[dock] {
-      flex: none;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      padding: 5px 10px;
-      font: var(--label-font, inherit);
-      font-size: 0.78rem;
-      color: var(--md-sys-color-on-surface-variant);
-      background: none;
-      border: 1px solid var(--md-sys-color-outline-variant);
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    button[dock][on] {
-      color: var(--md-sys-color-primary);
-      border-color: var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-surface-container);
-    }
-    button[dock] md-icon {
-      font-size: 16px;
-    }
 
     /*
       **세 칸의 자리를 못 박는다.**
@@ -584,8 +531,6 @@ export class FigureModellerPage extends FigureModellerPageBase {
    * 미저장 표시(`dirty`)는 그대로 남으므로 데이터를 잃지는 않았다. 잃은 것은 **사유**다.
    */
   @state() private saveFailure = ''
-  /** 대화 도크가 열려 있나. 저작면의 보기 상태라 저장하지 않는다. */
-  @state() private dockOpen = false
   /** 저작 보조가 낸 후보. 받기 전에는 원본 데이터가 아니다. */
   @state() private proposal?: FigureSource
   /** 그 후보의 셈. 무엇을 받는 것인지 숫자로도 보여 준다. */
@@ -645,14 +590,6 @@ export class FigureModellerPage extends FigureModellerPageBase {
           @proposed=${(e: CustomEvent) => this.receive(e.detail.proposal)}
         ></figure-ask>
         ${this.saveFailure ? html`<span save-failed title=${this.saveFailure}>${this.saveFailure}</span>` : ''}
-        <button
-          dock
-          ?on=${this.dockOpen}
-          title=${i18next.t('figure.text.dock-explained')}
-          @click=${() => (this.dockOpen = !this.dockOpen)}
-        >
-          <md-icon>forum</md-icon>${i18next.t('figure.button.dock')}
-        </button>
         <button save ?disabled=${!this.canSave} @click=${() => this.save()}>
           ${this.saving ? i18next.t('figure.text.saving-figure') : i18next.t('figure.button.save')}
         </button>
@@ -662,8 +599,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
         edits
         ?collapse-left=${this.collapsed.left}
         ?collapse-right=${this.collapsed.right}
-        ?dock=${this.dockOpen}
         @figure-rename=${(e: CustomEvent) => this.rename(e.detail.name)}
+        @figure-catalog=${(e: CustomEvent) => this.catalog(e.detail)}
         @figure-released=${(e: CustomEvent) => this.released(e.detail.figure)}
         @figure-reverted=${() => this.figure?.id && this.load(this.figure.id)}
         @add-part=${(e: CustomEvent) => this.addPart(e.detail.primitive)}
@@ -727,6 +664,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
 
         <figure-side
           .figureName=${this.figure?.name ?? ''}
+          .figureCategory=${this.figure?.category}
+          .figureTags=${this.figure?.tags}
           .figureId=${this.figure?.id ?? ''}
           .figureState=${this.figure?.state}
           .figureVersion=${this.figure?.version ?? 0}
@@ -738,71 +677,10 @@ export class FigureModellerPage extends FigureModellerPageBase {
           .view=${this.view}
           @update-view=${(e: CustomEvent) => (this.view = e.detail.view)}
         ></figure-side>
-
-        <!-- 대화 도크. 무엇을 켜고 끄는지는 renderDock 위에 적어 두었다 -->
-        <ox-board-ai-chat
-          .boardTools=${false}
-          .toolCategories=${['figure-authoring']}
-          .hostContext=${this.hostContext}
-          .placeholder=${i18next.t('figure.text.dock-placeholder')}
-          @board-ai-proposal-execute=${(e: CustomEvent) => this.takeProposal(e.detail.proposal)}
-        ></ox-board-ai-chat>
       </div>
     `
   }
 
-  /*
-   * ── 대화 도크를 무엇으로 켜나 ───────────────────────────────────────────────
-   *
-   * board 의 컴포넌트를 그대로 쓰지만 **board 인 척하지 않는다.** `boardTools` 를 끄고 figure 의
-   * 도구 범주(`figure-authoring`)만 연다. 끄지 않으면 보드 편집 도구가 함께 들려, 모델이 이
-   * 화면에서 할 수 없는 일을 시도한다.
-   *
-   * board 모양의 인자(`currentBoard` · `knownTypes` · `componentSchemas` · `selectedRefids`)는
-   * 주지 않는다 — 전부 선택이고, 채우려면 없는 것을 지어내야 한다.
-   */
-
-  /**
-   * 어시스턴트가 「지금 무엇을 열고 있나」를 아는 길.
-   *
-   * 도구가 대상을 안 받았을 때 이 문맥에서 해소한다 — 사용자에게 식별자를 되묻지 않는다.
-   * 팔레트도 함께 보낸다: 모르면 모델이 색을 지어내고, 그 후보는 검증을 지나 **그리는 시점에**
-   * 죽는다.
-   */
-  private get hostContext() {
-    return {
-      surface: 'figure-modeller',
-      figureId: this.figure?.id || undefined,
-      figureType: this.board?.figureType,
-      figureName: this.figure?.name,
-      palette: Object.keys(activePalette() as Record<string, string>)
-    }
-  }
-
-  /**
-   * 도크의 후보를 받는다.
-   *
-   * **후보가 화면에 닿는 길은 하나뿐이다** — 말로 시키는 줄이든 도크든 `receive()` 로 모인다.
-   * 두 길을 두면 「지금 / 후보」 두 칸을 두 곳에서 그리게 되고, 어느 쪽이 이기는지 저작자가
-   * 매번 생각해야 한다.
-   */
-  private takeProposal(proposal: any) {
-    const source = proposal?.source
-    if (!source) {
-      // 카드는 왔는데 후보가 없다 — 조용히 넘기지 않는다. 저작자가 눌렀으니 답이 있어야 한다.
-      this.saveFailure = i18next.t('figure.text.proposal-had-no-source')
-      return
-    }
-
-    this.receive({
-      source: JSON.stringify(source),
-      grade: proposal.score?.grade ?? '',
-      triangles: proposal.cost?.triangles ?? 0,
-      groups: proposal.cost?.groups ?? 0,
-      attempts: proposal.attempts ?? 1
-    })
-  }
-
   /**
    * 가운데 칸 위의 띠 — 무엇을 보고 있나와, 양쪽 칸을 접는 손잡이.
    *
@@ -1135,6 +1013,19 @@ export class FigureModellerPage extends FigureModellerPageBase {
     this.dirty = true
   }
 
+  /**
+   * 분류와 태그를 고친다.
+   *
+   * 정본(`source`)이 아니라 **카탈로그의 값**이다 — 도형이 무엇으로 생겼는지가 아니라 어디에
+   * 걸리는지다. 그래서 점수도 발행도 흔들리지 않는다.
+   */
+  private catalog(patch: { category?: string; tags?: string[] }) {
+    if (!this.figure) return
+
+    this.figure = { ...this.figure, ...patch }
+    this.dirty = true
+  }
+
   /**
    * 부품 목록을 갈아 끼운다.
    *
@@ -1339,6 +1230,12 @@ export class FigureModellerPage extends FigureModellerPageBase {
       if (this.figure.id) {
         const result = await updateFigure(this.figure.id, {
           name: this.figure.name,
+          /*
+            카탈로그의 값도 함께 보낸다. 화면에서 고쳐 놓고 저장에 안 실으면 저장 뒤에 조용히
+            사라진다 — 저작자는 저장했다고 보고 다시 열면 없다.
+          */
+          category: this.figure.category,
+          tags: this.figure.tags,
           source: sourceJson,
           thumbnail
         })
@@ -1355,6 +1252,8 @@ export class FigureModellerPage extends FigureModellerPageBase {
         const result = await createFigure({
           type: this.folded.type,
           name: this.figure.name,
+          category: this.figure.category,
+          tags: this.figure.tags,
           source: sourceJson,
           thumbnail
         })

package/client/types.ts

@@ -14,7 +14,10 @@ export interface Figure {
   type: string
   name: string
   description?: string
+  /** 분류 하나 — 팔레트에서 묶어 보이는 기준. */
   category?: string
+  /** 태그 여럿 — 분류로는 못 하는 찾기. */
+  tags?: string[]
   state?: 'draft' | 'released'
   /** 재활용 점수 0~100. 서버가 정본에서 계산한다 — 화면이 보내는 값이 아니다. */
   score?: number
@@ -63,6 +66,7 @@ export interface NewFigure {
   name: string
   description?: string
   category?: string
+  tags?: string[]
   source: string
   properties?: string
   state?: 'draft' | 'released'
@@ -79,6 +83,8 @@ export interface FigurePatch {
   name?: string
   description?: string
   category?: string
+  /** 빈 배열은 「전부 지운다」, 안 주는 것은 「건드리지 않는다」. */
+  tags?: string[]
   source?: string
   properties?: string
   state?: 'draft' | 'released'

package/client/viewparts/figure-thumb.ts

@@ -105,6 +105,65 @@ export class FigureThumb extends localize(i18next)(LitElement) {
       border-radius: 4px;
     }
 
+    /*
+      태그 — **그림 위에 얹는다.**
+
+      카드 본문에 한 줄로 두었더니 태그가 있는 카드만 그만큼 높아져 격자가 들쭉날쭉해졌다.
+      태그는 도형마다 개수가 다르므로 본문에 두는 한 이 문제가 남는다. 그림 위는 이미 자리가
+      잡혀 있고(초안 표시·삭제), 얹어도 카드 높이가 변하지 않는다.
+
+      아래쪽에 둔다 — 위는 초안 표시와 삭제 단추가 쓴다.
+
+      **투명한 알약이다.** 면을 꽉 채우면 그림 위에 흰 띠가 생겨 형상을 가린다 — 카탈로그에서
+      먼저 보아야 하는 것은 형상이다. 그래서 바탕은 거의 비우고, 읽히는 것은 뒤를 흐리는 것과
+      실낱 테두리가 맡는다. 흐림이 안 되는 환경에서도 테두리가 남아 글자가 형상에 묻히지 않는다.
+    */
+    div[tags] {
+      position: absolute;
+      right: 6px;
+      bottom: 6px;
+      left: 6px;
+      display: flex;
+      flex-wrap: wrap-reverse;
+      justify-content: flex-end;
+      gap: 3px;
+      /* 태그가 많아도 그림을 덮지 않는다 — 넘치는 것은 위로 잘린다 */
+      max-height: 44px;
+      overflow: hidden;
+      /* 알약 사이의 빈 자리는 그림이 받는다 — 거기서 누르면 저작면이 열린다 */
+      pointer-events: none;
+    }
+    /*
+      **알약은 누를 수 있다.** 누르면 그 태그로 목록을 거른다.
+
+      태그를 눈에 보이게 한 다음의 물음은 「그래서 이걸로 뭘 하나」다. 같은 태그가 붙은 것을
+      보려고 태그를 눈으로 읽어 검색창에 옮겨 적게 두면, 보여 준 뜻이 절반만 산다.
+
+      카드 자체가 저작면을 여는 자리이므로 알약에서 그 클릭을 멈춘다 — 안 멈추면 태그를 누른
+      사람이 편집기로 끌려간다.
+    */
+    div[tags] button {
+      pointer-events: auto;
+      cursor: pointer;
+      padding: 0 7px;
+      font: var(--label-font, inherit);
+      font-size: 0.66rem;
+      line-height: 1.7;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 34%, transparent);
+      border: 1px solid color-mix(in srgb, var(--md-sys-color-outline, #888) 42%, transparent);
+      backdrop-filter: blur(4px);
+      border-radius: 999em;
+      white-space: nowrap;
+    }
+    div[tags] button:hover,
+    div[tags] button:focus-visible {
+      color: var(--md-sys-color-on-surface);
+      background-color: color-mix(in srgb, var(--md-sys-color-surface, #fff) 72%, transparent);
+      border-color: var(--md-sys-color-primary);
+      outline: none;
+    }
+
     button[remove] {
       position: absolute;
       top: 5px;
@@ -155,6 +214,25 @@ export class FigureThumb extends localize(i18next)(LitElement) {
             </div>
           `}
       ${figure.state === 'released' ? '' : html`<span draft>${i18next.t('figure.label.draft')}</span>`}
+      ${figure.tags?.length
+        ? html`<div tags>
+            ${figure.tags.map(
+              tag => html`
+                <button
+                  title=${i18next.t('figure.text.find-by-this-tag')}
+                  @click=${(e: Event) => {
+                    e.stopPropagation()
+                    this.dispatchEvent(
+                      new CustomEvent('search-tag', { detail: { tag }, bubbles: true, composed: true })
+                    )
+                  }}
+                >
+                  ${tag}
+                </button>
+              `
+            )}
+          </div>`
+        : ''}
 
       <button
         remove

package/dist-client/graphql/index.js

@@ -34,6 +34,7 @@ const FIGURE_LIST_FIELDS = `
   name
   description
   category
+  tags
   state
   version
   score