@things-factory/figure-ui 10.1.6 → 10.1.8

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

@@ -1,6 +1,8 @@
 import { __decorate, __metadata } from "tslib";
+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';
@@ -75,21 +77,21 @@ let FigureSide = 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;
@@ -112,6 +114,11 @@ let FigureSide = class FigureSide extends localize(i18next)(LitElement) {
       자리를 먹지 않게 오른쪽 위에 겹쳐 둔다 — 탭 이름을 밀지 않으므로 이름이 접히지 않는다.
       숫자가 커져도(1,200 같은 것) 이름 위로 넘칠 뿐 줄을 바꾸지 않는다.
     */
+    button[tab] md-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
     span[badge] {
       position: absolute;
       /* 이름 위에 겹치되 위로 붙지 않게 — 탭 가운데 글자와 눈높이를 조금 맞춘다 */
@@ -128,6 +135,7 @@ let FigureSide = class FigureSide extends localize(i18next)(LitElement) {
     }
 
     figure-inspector,
+    figure-animations,
     figure-report,
     figure-settings {
       flex: 1;
@@ -139,19 +147,33 @@ let FigureSide = class FigureSide extends localize(i18next)(LitElement) {
       display: none;
     }
   `; }
+    /**
+     * 이 도형이 든 clip 수. 탭 아이콘에 붙는다.
+     *
+     * 아이콘만으로는 「여기에 무언가 있다」를 알 수 없다. 대부분의 도형은 움직이지 않으므로
+     * 이 탭은 늘 비어 있을 것이고, 그러면 움직이는 도형을 열었을 때 그 사실이 눈에 걸려야 한다.
+     * 0 이면 아무것도 안 붙인다 — 「0」을 붙이면 없는 것이 있는 것처럼 자리를 차지한다.
+     */
+    get clipCount() {
+        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}
@@ -163,6 +185,12 @@ let FigureSide = 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}
@@ -183,10 +211,26 @@ let FigureSide = class FigureSide extends localize(i18next)(LitElement) {
       ></figure-history-panel>
     `;
     }
-    renderTab(tab, label, badge) {
+    /**
+     * 탭 하나 — **아이콘이 이름을 대신한다.**
+     *
+     * 탭이 다섯이 되면서 이름이 좁은 칸을 나눠 쓰다 접혔다. 앞으로 더 늘어날 자리이므로 이름을
+     * 줄여 짜 넣는 대신 아이콘으로 바꾼다.
+     *
+     * **이름을 버리지는 않는다.** 아이콘만으로는 무엇인지 모르는 사람이 있고, 특히 「능력」처럼
+     * 이 도구에만 있는 개념이 그렇다. 그래서 이름은 `title` 로 남아 마우스를 올리면 나오고,
+     * `aria-label` 로 읽는 기계에도 그대로 간다.
+     */
+    renderTab(tab, icon, label, badge) {
         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>
     `;
     }
@@ -195,6 +239,14 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], FigureSide.prototype, "figureName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureSide.prototype, "figureCategory", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureSide.prototype, "figureTags", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/modeller/figure-side.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-side.js","sourceRoot":"","sources":["../../client/modeller/figure-side.ts"],"names":[],"mappings":"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","sourcesContent":["import './figure-inspector.js'\nimport './figure-capabilities.js'\nimport './figure-report.js'\nimport './figure-settings.js'\nimport './figure-history-panel.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureSource } from '@hatiolab/figure-model'\n\nimport type { BoardModel, PartModel } from './figure-source.js'\nimport { DEFAULT_VIEW } from './figure-view.js'\nimport type { ViewSettings } from './figure-view.js'\n\ntype Tab = 'properties' | 'capability' | 'verdict' | 'view' | 'history'\n\n/**\n * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.\n *\n * ## 왜 위아래로 나누지 않나\n *\n * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못\n * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.\n *\n * ## 그래도 개수는 늘 보인다\n *\n * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이\n * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그\n * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는\n * 것이 보인다.\n *\n * 판정은 화면에서 감춰도 **DOM 에는 남는다.** 떼었다 붙이면 다시 세느라 값이 잠깐\n * 비고, 펼쳐 둔 추이 그림 같은 상태도 날아간다.\n */\n@customElement('figure-side')\nexport class FigureSide extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-left: 1px solid var(--md-sys-color-outline-variant);\n      color: var(--md-sys-color-on-surface);\n      font: var(--label-font, inherit);\n      /*\n        이 패널의 본문 크기를 여기서 한 번 정한다.\n\n        전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를\n        물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.\n        이 파일에서만 두 번 났다.\n\n        form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n        그것 말고는 여기 값을 따른다.\n      */\n      font-size: 0.76rem;\n    }\n\n    div[tabs] {\n      display: flex;\n      flex: none;\n      border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    }\n    button[tab] {\n      flex: 1;\n      /*\n        **탭 이름은 한 줄이다.** 배지를 이름 옆에 나란히 두었더니 넷이 좁은 칸을 나눠 쓰면서\n        이름이 접혀 「성숙 / 도」가 되었다. 이름이 접히면 그 줄이 두 줄이 되고 네 탭의 높이가\n        서로 달라진다.\n\n        그래서 배지는 자리를 차지하지 않고 **이름 위에 겹친다**(아래 span[badge]). 개수는\n        곁들이는 것이고 이름이 먼저다.\n      */\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      white-space: nowrap;\n      padding: 8px 6px;\n      font: var(--label-font, inherit);\n      font-size: 0.76rem;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      background: none;\n      border: none;\n      /* 고른 탭을 밑줄로 말한다 — 칸을 색으로 채우면 아래 내용과 경계가 흐려진다 */\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n    }\n    button[tab]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[tab][on] {\n      font-weight: 700;\n      color: var(--md-sys-color-primary);\n      border-bottom-color: var(--md-sys-color-primary);\n    }\n\n    /*\n      판정을 덮어 두어도 개수는 여기 남는다.\n\n      자리를 먹지 않게 오른쪽 위에 겹쳐 둔다 — 탭 이름을 밀지 않으므로 이름이 접히지 않는다.\n      숫자가 커져도(1,200 같은 것) 이름 위로 넘칠 뿐 줄을 바꾸지 않는다.\n    */\n    span[badge] {\n      position: absolute;\n      /* 이름 위에 겹치되 위로 붙지 않게 — 탭 가운데 글자와 눈높이를 조금 맞춘다 */\n      top: 5px;\n      right: 2px;\n      padding: 0 5px;\n      font-size: 0.62rem;\n      font-weight: 700;\n      line-height: 1.5;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-radius: 999em;\n      pointer-events: none;\n    }\n\n    figure-inspector,\n    figure-report,\n    figure-settings {\n      flex: 1;\n      min-height: 0;\n      border-left: none;\n    }\n    /* 감추되 떼지는 않는다 */\n    [off] {\n      display: none;\n    }\n  `\n\n  /*\n    두 형태가 이 패널에서 갈린다.\n\n    속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**\n    곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.\n  */\n  @property({ type: String }) figureName = ''\n  /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */\n  @property({ type: String }) figureId?: string\n  @property({ type: String }) figureState?: 'draft' | 'released'\n  @property({ type: Number }) figureVersion = 0\n  @property({ type: Boolean }) dirty = false\n\n  @property({ type: Object }) board?: BoardModel\n  @property({ type: Array }) parts: PartModel[] = []\n  @property({ type: Object }) source?: FigureSource\n  @property({ type: Number }) selected = -1\n  /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */\n  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW\n\n  @state() private tab: Tab = 'properties'\n  /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */\n  @state() private instances?: number\n\n  render() {\n    return html`\n      <div tabs>\n        ${this.renderTab('properties', i18next.t('figure.label.properties'))}\n        ${this.renderTab('capability', i18next.t('figure.label.tab-capability'))}\n        ${this.renderTab('verdict', i18next.t('figure.label.maturity'), this.instances)}\n        ${this.renderTab('view', i18next.t('figure.label.tab-environment'))}\n        ${this.renderTab('history', i18next.t('figure.label.history'))}\n      </div>\n\n      <figure-inspector\n        ?off=${this.tab !== 'properties'}\n        .figureName=${this.figureName}\n        .board=${this.board}\n        .parts=${this.parts}\n        .selected=${this.selected}\n      ></figure-inspector>\n\n      <figure-capabilities\n        ?off=${this.tab !== 'capability'}\n        .board=${this.board}\n        .parts=${this.parts}\n      ></figure-capabilities>\n\n      <figure-report\n        ?off=${this.tab !== 'verdict'}\n        .source=${this.source}\n        @verdict-changed=${(e: CustomEvent) => (this.instances = e.detail.instances)}\n      ></figure-report>\n\n      <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>\n\n      <!--\n        이력은 감춰도 DOM 에 남긴다 — 다른 탭들과 같은 규칙이다. 떼었다 붙이면 판본을 다시 부른다.\n      -->\n      <figure-history-panel\n        ?off=${this.tab !== 'history'}\n        .figureId=${this.figureId}\n        .figureState=${this.figureState}\n        .figureVersion=${this.figureVersion}\n        .dirty=${this.dirty}\n      ></figure-history-panel>\n    `\n  }\n\n  private renderTab(tab: Tab, label: string, badge?: number) {\n    return html`\n      <button tab ?on=${this.tab === tab} @click=${() => (this.tab = tab)}>\n        ${label}${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}\n      </button>\n    `\n  }\n}\n"]}
+{"version":3,"file":"figure-side.js","sourceRoot":"","sources":["../../client/modeller/figure-side.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './figure-inspector.js'\nimport './figure-capabilities.js'\nimport './figure-animations.js'\nimport './figure-report.js'\nimport './figure-settings.js'\nimport './figure-history-panel.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport type { FigureSource } from '@hatiolab/figure-model'\n\nimport type { BoardModel, PartModel } from './figure-source.js'\nimport { DEFAULT_VIEW } from './figure-view.js'\nimport type { ViewSettings } from './figure-view.js'\n\ntype Tab = 'properties' | 'capability' | 'animation' | 'verdict' | 'view' | 'history'\n\n/**\n * 저작면 오른쪽 칸 — 속성과 판정을 탭으로 겹쳐 둔다.\n *\n * ## 왜 위아래로 나누지 않나\n *\n * 둘 다 세로로 긴 화면이다. 위아래로 나누면 양쪽 다 잘려서, 속성은 재질까지 못\n * 내려가고 판정은 무게까지 못 내려간다. 탭으로 겹치면 각자 칸 전체를 쓴다.\n *\n * ## 그래도 개수는 늘 보인다\n *\n * 성숙도의 축 하나 —「몇 개까지 편한가」— 는 부품을 고칠 때마다 움직이고, 그것이\n * 보여야 저작자가 고칠 수 있다. 탭 뒤로 숨으면 저장하고 나서야 알게 된다. 그래서 그\n * 숫자만 **탭 이름표에 남긴다** — 성숙도를 덮어 두고 속성을 만져도 따라 움직이는\n * 것이 보인다.\n *\n * 판정은 화면에서 감춰도 **DOM 에는 남는다.** 떼었다 붙이면 다시 세느라 값이 잠깐\n * 비고, 펼쳐 둔 추이 그림 같은 상태도 날아간다.\n */\n@customElement('figure-side')\nexport class FigureSide extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n      overflow: hidden;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-left: 1px solid var(--md-sys-color-outline-variant);\n      color: var(--md-sys-color-on-surface);\n      font: var(--label-font, inherit);\n      /*\n        이 패널의 본문 크기를 여기서 한 번 정한다.\n\n        전에는 규칙마다 따로 적었다. 그러면 빠뜨린 규칙이 본문 기본 크기(1rem)를\n        물려받아 그 줄만 제목처럼 커진다. 오류가 아니라서 화면을 띄워 봐야 안다.\n        이 파일에서만 두 번 났다.\n\n        form 요소(input · select · button)는 글꼴을 물려받지 않으므로 각자 적어야 한다.\n        그것 말고는 여기 값을 따른다.\n      */\n      font-size: 0.76rem;\n    }\n\n    div[tabs] {\n      display: flex;\n      flex: none;\n      border-bottom: 1px solid var(--md-sys-color-outline-variant);\n    }\n    button[tab] {\n      flex: 1;\n      /*\n        **아이콘 하나가 한 칸을 쓴다.**\n\n        전에는 이름을 적었는데, 넷이 좁은 칸을 나눠 쓰면서 접혀 「성숙 / 도」가 되었다. 접히면\n        그 탭만 두 줄이 되어 높이가 서로 달라진다. 다섯이 되면서 더는 줄여 짜 넣을 수 없어\n        아이콘으로 바꿨고, 이름은 title 과 aria-label 로 남는다.\n\n        배지는 여전히 자리를 차지하지 않고 **아이콘 위에 겹친다**(아래 span[badge]). 개수는\n        곁들이는 것이다.\n      */\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      white-space: nowrap;\n      padding: 7px 6px;\n      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n      background: none;\n      border: none;\n      /* 고른 탭을 밑줄로 말한다 — 칸을 색으로 채우면 아래 내용과 경계가 흐려진다 */\n      border-bottom: 2px solid transparent;\n      cursor: pointer;\n    }\n    button[tab]:hover:not([on]) {\n      background-color: var(--md-sys-color-surface-container);\n    }\n    button[tab][on] {\n      font-weight: 700;\n      color: var(--md-sys-color-primary);\n      border-bottom-color: var(--md-sys-color-primary);\n    }\n\n    /*\n      판정을 덮어 두어도 개수는 여기 남는다.\n\n      자리를 먹지 않게 오른쪽 위에 겹쳐 둔다 — 탭 이름을 밀지 않으므로 이름이 접히지 않는다.\n      숫자가 커져도(1,200 같은 것) 이름 위로 넘칠 뿐 줄을 바꾸지 않는다.\n    */\n    button[tab] md-icon {\n      font-size: 20px;\n      width: 20px;\n      height: 20px;\n    }\n    span[badge] {\n      position: absolute;\n      /* 이름 위에 겹치되 위로 붙지 않게 — 탭 가운데 글자와 눈높이를 조금 맞춘다 */\n      top: 5px;\n      right: 2px;\n      padding: 0 5px;\n      font-size: 0.62rem;\n      font-weight: 700;\n      line-height: 1.5;\n      color: var(--md-sys-color-on-primary-container);\n      background-color: var(--md-sys-color-primary-container);\n      border-radius: 999em;\n      pointer-events: none;\n    }\n\n    figure-inspector,\n    figure-animations,\n    figure-report,\n    figure-settings {\n      flex: 1;\n      min-height: 0;\n      border-left: none;\n    }\n    /* 감추되 떼지는 않는다 */\n    [off] {\n      display: none;\n    }\n  `\n\n  /*\n    두 형태가 이 패널에서 갈린다.\n\n    속성은 **수정하는** 곳이라 편집 중인 씬 모델을 받는다. 판정은 **저장될 것을 측정하는**\n    곳이라 변환된 FigureSource 를 받는다. 변환은 모델러 페이지가 한 번만 해서 내려보낸다.\n  */\n  @property({ type: String }) figureName = ''\n  /** 카탈로그 분류·태그. 속성 탭이 보여 주고 바꾼다. */\n  @property({ type: String }) figureCategory?: string\n  @property({ type: Array }) figureTags?: string[]\n  /** 이력 탭이 발행하고 되돌리는 데 필요한 것들. 정본은 저작면이 든다. */\n  @property({ type: String }) figureId?: string\n  @property({ type: String }) figureState?: 'draft' | 'released'\n  @property({ type: Number }) figureVersion = 0\n  @property({ type: Boolean }) dirty = false\n\n  @property({ type: Object }) board?: BoardModel\n  @property({ type: Array }) parts: PartModel[] = []\n  @property({ type: Object }) source?: FigureSource\n  @property({ type: Number }) selected = -1\n  /** 저작 화면의 보기 설정. 자산이 아니라 작업대다 — 저장되지 않는다. */\n  @property({ type: Object }) view: ViewSettings = DEFAULT_VIEW\n\n  @state() private tab: Tab = 'properties'\n  /** 판정이 알려 준 개수. 탭 이름표에 붙는다. */\n  @state() private instances?: number\n\n  /**\n   * 이 도형이 든 clip 수. 탭 아이콘에 붙는다.\n   *\n   * 아이콘만으로는 「여기에 무언가 있다」를 알 수 없다. 대부분의 도형은 움직이지 않으므로\n   * 이 탭은 늘 비어 있을 것이고, 그러면 움직이는 도형을 열었을 때 그 사실이 눈에 걸려야 한다.\n   * 0 이면 아무것도 안 붙인다 — 「0」을 붙이면 없는 것이 있는 것처럼 자리를 차지한다.\n   */\n  private get clipCount(): number | undefined {\n    const n = this.board?.animations?.length ?? 0\n    return n === 0 ? undefined : n\n  }\n\n  render() {\n    return html`\n      <div tabs>\n        ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}\n        ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}\n        ${this.renderTab('animation', 'animation', i18next.t('figure.label.animation'), this.clipCount)}\n        ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}\n        ${this.renderTab('view', 'wb_sunny', i18next.t('figure.label.tab-environment'))}\n        ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}\n      </div>\n\n      <figure-inspector\n        ?off=${this.tab !== 'properties'}\n        .figureName=${this.figureName}\n        .figureCategory=${this.figureCategory}\n        .figureTags=${this.figureTags}\n        .board=${this.board}\n        .parts=${this.parts}\n        .selected=${this.selected}\n      ></figure-inspector>\n\n      <figure-capabilities\n        ?off=${this.tab !== 'capability'}\n        .board=${this.board}\n        .parts=${this.parts}\n      ></figure-capabilities>\n\n      <figure-animations\n        ?off=${this.tab !== 'animation'}\n        .board=${this.board}\n        .parts=${this.parts}\n      ></figure-animations>\n\n      <figure-report\n        ?off=${this.tab !== 'verdict'}\n        .source=${this.source}\n        @verdict-changed=${(e: CustomEvent) => (this.instances = e.detail.instances)}\n      ></figure-report>\n\n      <figure-settings ?off=${this.tab !== 'view'} .view=${this.view}></figure-settings>\n\n      <!--\n        이력은 감춰도 DOM 에 남긴다 — 다른 탭들과 같은 규칙이다. 떼었다 붙이면 판본을 다시 부른다.\n      -->\n      <figure-history-panel\n        ?off=${this.tab !== 'history'}\n        .figureId=${this.figureId}\n        .figureState=${this.figureState}\n        .figureVersion=${this.figureVersion}\n        .dirty=${this.dirty}\n      ></figure-history-panel>\n    `\n  }\n\n  /**\n   * 탭 하나 — **아이콘이 이름을 대신한다.**\n   *\n   * 탭이 다섯이 되면서 이름이 좁은 칸을 나눠 쓰다 접혔다. 앞으로 더 늘어날 자리이므로 이름을\n   * 줄여 짜 넣는 대신 아이콘으로 바꾼다.\n   *\n   * **이름을 버리지는 않는다.** 아이콘만으로는 무엇인지 모르는 사람이 있고, 특히 「능력」처럼\n   * 이 도구에만 있는 개념이 그렇다. 그래서 이름은 `title` 로 남아 마우스를 올리면 나오고,\n   * `aria-label` 로 읽는 기계에도 그대로 간다.\n   */\n  private renderTab(tab: Tab, icon: string, label: string, badge?: number) {\n    return html`\n      <button\n        tab\n        ?on=${this.tab === tab}\n        title=${label}\n        aria-label=${label}\n        @click=${() => (this.tab = tab)}\n      >\n        <md-icon>${icon}</md-icon>${badge == null ? '' : html`<span badge>${badge.toLocaleString()}</span>`}\n      </button>\n    `\n  }\n}\n"]}

package/dist-client/modeller/proposal-session.d.ts

@@ -0,0 +1,23 @@
+import type { FigureSource } from '@hatiolab/figure-model';
+import type { FigureGateFix, FigureProposal, ProposalFeedback } from '../types.js';
+/**
+ * 한 번의 AI 후보 검토에만 존재하는 상태다.
+ *
+ * 후보는 정본이 아니다. 후보 원본·선택·메모·측정값을 한 값으로 묶어 두면 화면이
+ * 수락/거절 중 일부만 이전 후보에서 남기는 일이 없다.
+ */
+export interface ProposalSession {
+    source: FigureSource;
+    title: string;
+    picked: Set<string>;
+    note: string;
+    metrics?: Pick<FigureProposal, 'grade' | 'triangles' | 'groups' | 'attempts' | 'quality'>;
+}
+/** 서버 후보를 검토 세션으로 연다. 저장 형식이 아니면 화면에 후보를 열지 않는다. */
+export declare function openAiProposal(current: FigureSource | undefined, proposal: FigureProposal): ProposalSession;
+/** 발행 게이트가 측정한 한-앵커 수정도 같은 후보 세션으로 연다. */
+export declare function openSizingFix(current: FigureSource, fix: FigureGateFix): ProposalSession | undefined;
+/** 후보 검토 중 사람의 선택을 뒤집는다. 기존 Set을 바꾸지 않아 Lit 상태 경계도 보존한다. */
+export declare function toggleProposalChange(session: ProposalSession, key: string): ProposalSession;
+/** 사람의 결정을, 다음 AI 요청에만 쓰는 제한된 피드백으로 만든다. */
+export declare function feedbackFromSession(current: FigureSource | undefined, session: ProposalSession, outcome: ProposalFeedback['outcome']): ProposalFeedback | undefined;

package/dist-client/modeller/proposal-session.js

@@ -0,0 +1,65 @@
+import { diffProposal } from './proposal.js';
+function selectedKeys(current, source) {
+    return new Set(diffProposal(current, source).map(change => change.key));
+}
+/** 서버 후보를 검토 세션으로 연다. 저장 형식이 아니면 화면에 후보를 열지 않는다. */
+export function openAiProposal(current, proposal) {
+    const source = JSON.parse(proposal.source);
+    if (!source || !Array.isArray(source.parts)) {
+        throw new Error('AI 후보의 Figure 형식이 올바르지 않습니다.');
+    }
+    return {
+        source,
+        title: '',
+        picked: selectedKeys(current, source),
+        note: '',
+        metrics: {
+            grade: proposal.grade,
+            triangles: proposal.triangles,
+            groups: proposal.groups,
+            attempts: proposal.attempts,
+            quality: proposal.quality
+        }
+    };
+}
+/** 발행 게이트가 측정한 한-앵커 수정도 같은 후보 세션으로 연다. */
+export function openSizingFix(current, fix) {
+    if (!current.parts.some(part => part.name === fix.part))
+        return undefined;
+    const source = {
+        ...current,
+        parts: current.parts.map(part => part.name === fix.part ? { ...part, anchor: { ...(part.anchor ?? {}), [fix.axis]: fix.to } } : part)
+    };
+    return {
+        source,
+        title: `발행 검사 수정안 · ${fix.part}.anchor.${fix.axis}: ${fix.from ?? 'auto'} → ${fix.to}`,
+        picked: selectedKeys(current, source),
+        note: ''
+    };
+}
+/** 후보 검토 중 사람의 선택을 뒤집는다. 기존 Set을 바꾸지 않아 Lit 상태 경계도 보존한다. */
+export function toggleProposalChange(session, key) {
+    const picked = new Set(session.picked);
+    if (picked.has(key))
+        picked.delete(key);
+    else
+        picked.add(key);
+    return { ...session, picked };
+}
+/** 사람의 결정을, 다음 AI 요청에만 쓰는 제한된 피드백으로 만든다. */
+export function feedbackFromSession(current, session, outcome) {
+    if (!session.metrics)
+        return undefined;
+    return {
+        outcome,
+        selectedChanges: outcome === 'accepted' ? session.picked.size : 0,
+        totalChanges: diffProposal(current, session.source).length,
+        note: session.note.trim().slice(0, 500) || undefined,
+        grade: session.metrics.grade,
+        quality: {
+            status: session.metrics.quality.status,
+            findingCodes: session.metrics.quality.findings.map(finding => finding.code)
+        }
+    };
+}
+//# sourceMappingURL=proposal-session.js.map

package/dist-client/modeller/proposal-session.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"proposal-session.js","sourceRoot":"","sources":["../../client/modeller/proposal-session.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FigureSource } from '@hatiolab/figure-model'\n\nimport type { FigureGateFix, FigureProposal, ProposalFeedback } from '../types.js'\nimport { diffProposal } from './proposal.js'\n\n/**\n * 한 번의 AI 후보 검토에만 존재하는 상태다.\n *\n * 후보는 정본이 아니다. 후보 원본·선택·메모·측정값을 한 값으로 묶어 두면 화면이\n * 수락/거절 중 일부만 이전 후보에서 남기는 일이 없다.\n */\nexport interface ProposalSession {\n  source: FigureSource\n  title: string\n  picked: Set<string>\n  note: string\n  metrics?: Pick<FigureProposal, 'grade' | 'triangles' | 'groups' | 'attempts' | 'quality'>\n}\n\nfunction selectedKeys(current: FigureSource | undefined, source: FigureSource): Set<string> {\n  return new Set(diffProposal(current, source).map(change => change.key))\n}\n\n/** 서버 후보를 검토 세션으로 연다. 저장 형식이 아니면 화면에 후보를 열지 않는다. */\nexport function openAiProposal(current: FigureSource | undefined, proposal: FigureProposal): ProposalSession {\n  const source = JSON.parse(proposal.source) as FigureSource\n  if (!source || !Array.isArray(source.parts)) {\n    throw new Error('AI 후보의 Figure 형식이 올바르지 않습니다.')\n  }\n\n  return {\n    source,\n    title: '',\n    picked: selectedKeys(current, source),\n    note: '',\n    metrics: {\n      grade: proposal.grade,\n      triangles: proposal.triangles,\n      groups: proposal.groups,\n      attempts: proposal.attempts,\n      quality: proposal.quality\n    }\n  }\n}\n\n/** 발행 게이트가 측정한 한-앵커 수정도 같은 후보 세션으로 연다. */\nexport function openSizingFix(current: FigureSource, fix: FigureGateFix): ProposalSession | undefined {\n  if (!current.parts.some(part => part.name === fix.part)) return undefined\n\n  const source: FigureSource = {\n    ...current,\n    parts: current.parts.map(part =>\n      part.name === fix.part ? { ...part, anchor: { ...(part.anchor ?? {}), [fix.axis]: fix.to } } : part\n    )\n  }\n\n  return {\n    source,\n    title: `발행 검사 수정안 · ${fix.part}.anchor.${fix.axis}: ${fix.from ?? 'auto'} → ${fix.to}`,\n    picked: selectedKeys(current, source),\n    note: ''\n  }\n}\n\n/** 후보 검토 중 사람의 선택을 뒤집는다. 기존 Set을 바꾸지 않아 Lit 상태 경계도 보존한다. */\nexport function toggleProposalChange(session: ProposalSession, key: string): ProposalSession {\n  const picked = new Set(session.picked)\n  if (picked.has(key)) picked.delete(key)\n  else picked.add(key)\n  return { ...session, picked }\n}\n\n/** 사람의 결정을, 다음 AI 요청에만 쓰는 제한된 피드백으로 만든다. */\nexport function feedbackFromSession(\n  current: FigureSource | undefined,\n  session: ProposalSession,\n  outcome: ProposalFeedback['outcome']\n): ProposalFeedback | undefined {\n  if (!session.metrics) return undefined\n\n  return {\n    outcome,\n    selectedChanges: outcome === 'accepted' ? session.picked.size : 0,\n    totalChanges: diffProposal(current, session.source).length,\n    note: session.note.trim().slice(0, 500) || undefined,\n    grade: session.metrics.grade,\n    quality: {\n      status: session.metrics.quality.status,\n      findingCodes: session.metrics.quality.findings.map(finding => finding.code)\n    }\n  }\n}\n"]}

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

@@ -44,6 +44,16 @@ export declare class FigureListPage extends FigureListPageBase {
         };
     };
     render(): import("lit-html").TemplateResult<1>;
+    /**
+     * 카드의 태그 알약을 눌렀다 — **그 태그로 목록을 거른다.**
+     *
+     * 검색창에 그 말을 채워 넣는다. 격자에 조건만 걸고 창을 비워 두면 저작자는 **왜 목록이
+     * 줄었는지 모른 채** 보게 되고, 되돌리려면 무엇을 지워야 하는지도 알 수 없다.
+     *
+     * 서버가 `tags` 뿐 아니라 이름·타입·설명·분류를 함께 훑으므로, 그 말이 다른 칸에 든 도형도
+     * 같이 온다. 태그만 정확히 거르는 것이 아니라 **찾기**다.
+     */
+    private findByTag;
     pageInitialized(): Promise<void>;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist-client/pages/figure-list-page.js

@@ -30,9 +30,20 @@ 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;';
-const LOW_DOT = 'width: 5px; height: 5px; border-radius: 50%; background-color: var(--md-sys-color-error); flex: none;';
+/**
+ * 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다.
+ *
+ * **`inline-flex` 를 쓰지 않는다.** 썼더니 점이 뜨는 카드에서만 이 값이 옆의 두 값과 밑줄이
+ * 어긋났다 — inline-flex 상자의 밑줄은 **첫 항목**에서 오는데, 첫 항목이 글자 없는 점이라
+ * 밑줄이 없어 브라우저가 상자 아래를 밑줄로 삼는다. 점이 없는 카드(50 이상)는 멀쩡했으므로
+ * 한 줄에 세 값이 나란히 설 때만 눈에 띄었다.
+ *
+ * 그냥 인라인으로 두면 이 상자의 밑줄이 곧 숫자의 밑줄이라 옆의 둘과 맞는다. 점은 제 몫으로
+ * 글자 가운데에 맞춘다.
+ */
+const SCORE = 'font-variant-numeric: tabular-nums;';
+const LOW_DOT = '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 이 얹어 주는
  * `getPagePreferenceProvider` 가 타입에서 사라져 개인 설정을 붙일 수 없다.
@@ -162,7 +173,7 @@ let FigureListPage = 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: () => {
@@ -182,6 +193,7 @@ let FigureListPage = class FigureListPage extends FigureListPageBase {
         return html `
       <ox-grist
         mode="CARD"
+        @search-tag=${(e) => this.findByTag(e.detail.tag)}
         .config=${this.gristConfig}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')}
@@ -200,6 +212,20 @@ let FigureListPage = class FigureListPage extends FigureListPageBase {
       </button>
     `;
     }
+    /**
+     * 카드의 태그 알약을 눌렀다 — **그 태그로 목록을 거른다.**
+     *
+     * 검색창에 그 말을 채워 넣는다. 격자에 조건만 걸고 창을 비워 두면 저작자는 **왜 목록이
+     * 줄었는지 모른 채** 보게 되고, 되돌리려면 무엇을 지워야 하는지도 알 수 없다.
+     *
+     * 서버가 `tags` 뿐 아니라 이름·타입·설명·분류를 함께 훑으므로, 그 말이 다른 칸에 든 도형도
+     * 같이 온다. 태그만 정확히 거르는 것이 아니라 **찾기**다.
+     */
+    findByTag(tag) {
+        this.grist.searchText = tag;
+        /* 창의 값은 `context` 에서 나온다 — 다시 알려야 헤더가 새 값을 그린다. */
+        this.updateContext();
+    }
     async pageInitialized() {
         this.gristConfig = {
             /*
@@ -278,6 +304,31 @@ let FigureListPage = 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) => (value || []).join(' · ')
+                    },
+                    filter: 'search',
+                    sortable: false,
+                    width: 180
+                },
                 {
                     type: 'string',
                     name: 'state',

package/dist-client/pages/figure-list-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"figure-list-page.js","sourceRoot":"","sources":["../../client/pages/figure-list-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@material/web/icon/icon.js'\nimport '../viewparts/figure-thumb.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { i18next, localize } from '@operato/i18n'\nimport { p13n } from '@operato/p13n'\nimport { auth } from '@things-factory/auth-base/dist-client'\nimport { navigate, PageView } from '@operato/shell'\nimport { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { capacityFrom } from '../modeller/scene-budget.js'\nimport { deleteFigure, fetchFigureList } from '../graphql/index.js'\nimport type { Figure } from '../types.js'\n\n/**\n * 이 값 아래면 점수를 색으로 눈에 띄게 한다.\n *\n * **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은 그것을\n * 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.\n */\nconst ATTENTION_BELOW = 50\n\n/*\n * ── renderer 가 그리는 것은 이 파일의 CSS 가 닿지 않는다 ──────────────────────\n *\n * 컬럼 renderer 의 결과는 `ox-card-field` 의 shadow root 안에 그려진다. 이 페이지의 `static\n * styles` 는 그 경계를 넘지 못하므로 `code[figure-type]` 같은 선택자는 **아무 일도 하지 않는다.**\n * 넘어가는 것은 custom property 뿐이라, 색과 글꼴은 여기서 인라인으로 준다 — 값 자체는 테마\n * 토큰을 가리키므로 밝음·어둠은 따라온다. data-grist 의 image renderer 도 같은 방식이다.\n */\nconst CAPACITY = 'font-weight: 700; color: var(--md-sys-color-primary);'\nconst UNMEASURED = 'font-style: italic; color: var(--md-sys-color-outline);'\nconst RELEASED = 'font-weight: 700; color: var(--md-sys-color-primary);'\nconst DRAFT = 'color: var(--md-sys-color-tertiary);'\n/** 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다. */\nconst SCORE = 'display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums;'\nconst LOW_DOT =\n  'width: 5px; height: 5px; border-radius: 50%; background-color: var(--md-sys-color-error); flex: none;'\n\n/*\n * `as typeof PageView` 로 조이지 않는다 — 그렇게 하면 p13n 이 얹어 주는\n * `getPagePreferenceProvider` 가 타입에서 사라져 개인 설정을 붙일 수 없다.\n */\nconst FigureListPageBase = p13n(localize(i18next)(PageView))\n\n/**\n * Figure 카탈로그.\n *\n * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다. 카드에는\n * **고를 때 쓰는 것만** 싣는다 — 그림과 이름, 그리고 아직 초안이라는 것. 배치 한도·성숙도·삼각형\n * 수는 고른 뒤에 따지는 값이라 표 모드의 칸으로 남기고 저작면에서 본다.\n *\n * ## 왜 손으로 만든 카드가 아니라 격자인가\n *\n * 전에는 카드 격자와 걸러 보기 줄과 빈 화면을 이 파일이 직접 그렸다(200줄). 그 자리에서 빠져\n * 있던 것들은 하나같이 `ox-grist` 가 이미 가진 것이다 — 쪽 나누기, 정렬, 컬럼 걸러 보기,\n * 개인 설정(모드·정렬·쪽 크기를 사람마다 기억한다), 표 모드로 바꿔 보기, 내보내기.\n * 손으로 만든 카드는 그 중 아무것도 없었고, 목록이 늘어나면 전부 한 번에 그렸다.\n *\n * 카드에 실을 것은 `list` 가 정하고, 무엇을 어떻게 그릴지는 컬럼의 renderer 가 정한다. 같은\n * 설정이 표 모드에서도 그대로 쓰이므로 **두 모드가 다른 말을 하지 않는다.**\n */\n@customElement('figure-list-page')\nexport class FigureListPage extends FigureListPageBase {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        /* 떠 있는 단추의 기준 상자 */\n        position: relative;\n      }\n\n      /*\n        ── 만들기 단추 ────────────────────────────────────────────────────────\n        이 화면의 주된 동작 하나. 목록 위에 떠 있고 자리를 먹지 않는다.\n\n        글자를 함께 둔다(extended FAB). 아이콘만 두면 처음 온 사람은 + 표가 무엇을 만드는지\n        모른다 — 이 화면에서 만들 수 있는 것이 무엇인지가 그 글자다.\n      */\n      button[fab] {\n        position: absolute;\n        right: var(--spacing-large, 12px);\n        bottom: var(--spacing-large, 12px);\n        z-index: 10;\n\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 10px 18px 10px 14px;\n        font: var(--label-font, inherit);\n        font-size: 0.82rem;\n        font-weight: 600;\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border: none;\n        /* 떠 있는 것의 모서리는 알약이다 — 담는 면(6px)을 따르지 않는다 */\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n        cursor: pointer;\n      }\n      button[fab]:hover {\n        color: var(--md-sys-color-on-primary, #fff);\n        background-color: var(--md-sys-color-primary);\n      }\n      button[fab] md-icon {\n        --md-icon-size: 20px;\n      }\n\n      /* 격자가 바깥에 요구하는 것은 확정된 높이 하나뿐이다 — 스크롤은 격자가 안에서 한다 */\n      ox-grist {\n        flex: 1;\n        min-height: 0;\n      }\n\n      /*\n        ── 그림이 주인공인 카탈로그 ────────────────────────────────────────\n        카드 기본값은 글이 많은 목록(직원·결재함)에 맞춰져 있다. 여기서는 사람이 먼저 보는 것이\n        형상 그림이므로, 그림 칸을 비율로 잡아 카드 폭이 달라져도 그림이 나란히 읽히게 한다.\n\n        그림은 카드 끝까지 닿는다 — 위쪽 모서리만 카드와 같은 6px 로 깎아 한 장처럼 보이게 하고,\n        그림 안에 얹히는 초안 표시·삭제는 figure-thumb 이 그린다.\n      */\n      ox-grist {\n        --data-card-min-width: 240px;\n        --data-card-record-card-border-radius: 6px;\n        --data-card-record-card-padding: 0;\n        --data-card-thumbnail-height: auto;\n        --data-card-thumbnail-aspect: 4 / 3;\n        --data-card-thumbnail-padding: 0;\n        --data-card-thumbnail-radius: 6px 6px 0 0;\n        --data-card-thumbnail-background: var(--md-sys-color-surface-container);\n\n        /*\n          카드 기본 글꼴은 굵다(제목 bold 1.1em). 글이 정보를 나르는 목록에서는 맞지만, 여기서\n          정보를 나르는 것은 그림이다. 굵은 제목이 카드마다 서면 그림보다 글이 먼저 읽힌다 —\n          이름은 알아볼 정도로만, 타입은 곁글로 둔다.\n        */\n        --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');\n        --data-card-item-name-color: var(--md-sys-color-on-surface);\n        --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n        --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n\n        /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */\n        --data-card-detail-direction: row;\n\n        /*\n          맨 위로 가는 화살표를 만들기 단추 **위로** 올린다. 둘 다 오른쪽 아래에 떠 있으므로\n          그냥 두면 겹친다 — 단추(36px + 아래 여백 12px) 위에 12px 을 띄운 자리다.\n        */\n        --data-card-fab-position-vertical: 64px;\n        --data-list-fab-position-vertical: 64px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n\n  @query('ox-grist') private grist!: DataGrist\n\n  private listen?: () => void\n\n  get context() {\n    return {\n      title: i18next.t('figure.title.figures'),\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || '',\n        placeholder: i18next.t('figure.text.search-figure-by-name-or-type')\n      },\n      filter: {\n        handler: () => {\n          this.grist.toggleHeadroom()\n        }\n      }\n      /*\n        **만들기는 `actions` 가 아니라 FAB 이다.**\n\n        `context.actions` 로 두면 페이지 바닥 줄에 글자 단추로 서는데, 그 줄은 「지금 화면에 대해\n        할 일」을 늘어놓는 자리다. 만들기는 이 화면의 유일한 주된 동작이므로 줄에 섞이지 않고\n        떠 있어야 한다. 카드를 가리지 않는 오른쪽 아래, 손이 가는 자리다(아래 render 의 [fab]).\n      */\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        mode=\"CARD\"\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"filters\">\n            <ox-filters-form autofocus without-search></ox-filters-form>\n          </div>\n        </div>\n\n        <ox-grist-personalizer slot=\"setting\"></ox-grist-personalizer>\n      </ox-grist>\n\n      <button fab title=${i18next.t('figure.button.new-figure')} @click=${() => this.openModeller()}>\n        <md-icon>add</md-icon>${i18next.t('figure.button.new-figure')}\n      </button>\n    `\n  }\n\n  async pageInitialized() {\n    this.gristConfig = {\n      /*\n        **쪽 나누기는 선택이 아니다.** 격자에 가상 스크롤이 없어 받은 것을 전부 DOM 에 그린다.\n        카드 모드는 끝까지 내려가면 다음 쪽을 이어 붙이므로, 한 쪽이 작아도 목록은 계속 읽힌다.\n      */\n      pagination: { pages: [24, 48, 96] },\n\n      /*\n        아직 아무것도 없을 때 하는 말. **이 자리가 이 화면에서 가장 중요하다** — 처음 온 사람은\n        여기서 이 도구가 무엇을 만드는 것인지 알게 된다. 조건이 걸려 비었을 때는 격자가 스스로\n        다른 말을 한다(「찾는 것이 없다」). 그 둘을 섞지 않는 것이 격자 쪽에 이미 들어 있다.\n      */\n      emptyNote: {\n        icon: 'deployed_code',\n        title: i18next.t('figure.text.no-figure-yet'),\n        description: i18next.t('figure.text.what-a-figure-is')\n      },\n\n      list: {\n        /* 그림 칸은 그 컬럼의 renderer 가 그린다 — 그림 없을 때의 안내까지 `figure-thumb` 안이다 */\n        thumbnail: 'thumbnail',\n        fields: ['name', 'type'],\n        /*\n          ── 무게를 모른 채 고르게 두지 않는다 ────────────────────────────────\n          이름과 그림만 실으면 저작자는 **이 형상이 무거운지 모른 채** 고른다. 그것을 저작면에\n          들어가서야 아는 것은 늦다. 그래서 격자로 옮기기 전 손 카드가 실었던 셋을 그대로 싣는다 —\n          몇 개까지 놓을 수 있나(배치 한도) · 성숙도 · 삼각형 수.\n\n          한 줄에 뉜다(`--data-card-detail-direction: row`). 이름표는 달지 않는다 — 값 자체가\n          「625개까지」·「삼각형 440개」로 읽히고, 성숙도만 숫자 하나여서 손이 갔을 때 이름이 뜬다.\n\n          상태는 이 줄에 없다. 그림 위 초안 표시가 그 일을 한다(`figure-thumb`) — 발행된 것에는\n          아무 말도 하지 않으므로 빈 칸이 생기지 않는다.\n        */\n        details: ['capacity', 'score', 'triangles']\n      },\n\n      columns: [\n        { type: 'gutter', gutterName: 'sequence', fixed: true },\n        {\n          /*\n            표 모드에서만 쓰는 삭제 칸. 카드에서는 `figure-thumb` 이 그림 위에 그리므로\n            `forList: false` 로 내린다 — 카드 아래 단추 줄은 감춰도 자리가 남는다.\n          */\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          title: i18next.t('figure.button.delete-figure'),\n          danger: true,\n          forList: false,\n          width: 40,\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: Figure) => this.removeFigure(record)\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('figure.label.name'),\n          record: { editable: false },\n          filter: 'search',\n          sortable: true,\n          width: 200\n        },\n        {\n          /*\n            타입 이름은 **저장되는 식별자**다. 표시 이름과 다르게 보이게 두어야 보드가 무엇으로\n            이 형상을 찾는지 헷갈리지 않는다.\n          */\n          type: 'string',\n          name: 'type',\n          header: i18next.t('figure.label.figure-type'),\n          record: {\n            editable: false,\n            renderer: (value: string) => html`<code>${value}</code>`\n          },\n          filter: 'search',\n          sortable: true,\n          width: 160\n        },\n        {\n          type: 'string',\n          name: 'state',\n          header: i18next.t('figure.label.state'),\n          record: {\n            editable: false,\n            /*\n              **발행된 것에는 아무 말도 하지 않는다.** 카탈로그에 있는 것은 대개 발행된 것이라,\n              카드마다 「발행됨」이 붙으면 그 말이 아무것도 가르지 않고 자리만 먹는다. 판 번호도\n              고를 때 쓰는 값이 아니다 — 이력 탭에 있다.\n\n              표 모드에서는 칸에 값이 있어야 하므로 그때는 발행됨도 적는다(`wide` 가 아니라 label\n              이 붙는 자리인지로 가른다 — 카드는 label 을 달지 않았다).\n            */\n            renderer: (value: string, _column: any, record: Figure, _rowIndex: number, field: Element) => {\n              if (value !== 'released') {\n                return html`<span style=${DRAFT}>${i18next.t('figure.label.draft')}</span>`\n              }\n\n              /* 표에서는 칸이 비면 안 된다. 카드에서만 입을 다문다 — 그리는 자리가 알려 준다. */\n              return field?.tagName === 'OX-CARD-FIELD'\n                ? ''\n                : html`<span style=${RELEASED}\n                    >${i18next.t('figure.label.figure-released')}\n                    ${record.version ? i18next.t('figure.text.version-number', { version: record.version }) : ''}</span\n                  >`\n            }\n          },\n          /*\n            전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다.\n\n            이름표는 비워 둔다. 단추에 「초안」·「발행됨」이라고 적혀 있으니 그 앞의 「상태」는\n            같은 말을 한 번 더 하는 것이고, 걸러 보기 줄에서 자리만 먹는다.\n          */\n          filter: {\n            type: 'select-buttons',\n            operator: 'in',\n            label: '',\n            options: [\n              { display: i18next.t('figure.label.draft'), value: 'draft' },\n              { display: i18next.t('figure.label.figure-released'), value: 'released' }\n            ]\n          },\n          width: 120\n        },\n        {\n          /*\n            **몇 개까지 놓을 수 있나.** 카드에는 싣지 않고 표 모드의 칸으로 둔다 — 고른 뒤에\n            따지는 값이다. 서버에 없는 값이라 `groups` 와 `triangles` 에서 계산하는데, 저작면\n            머리와 **같은 함수**를 쓴다. 두 화면이 같은 형상을 다른 잣대로 말하면 무엇을 고칠지\n            모른다.\n          */\n          type: 'string',\n          name: 'capacity',\n          header: i18next.t('figure.label.placement-limit'),\n          sortable: false,\n          record: {\n            editable: false,\n            renderer: (_value: unknown, _column: any, record: Figure) => {\n              const capacity = capacityFrom(record.groups ?? 0, record.triangles ?? 0)\n\n              return capacity\n                ? html`<span style=${CAPACITY} title=${i18next.t('figure.text.reuse-score-explained')}>\n                    ${i18next.t('figure.text.fits-n-instances', { n: capacity.instances.toLocaleString() })}\n                  </span>`\n                : html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`\n            }\n          },\n          width: 120\n        },\n        {\n          type: 'float',\n          name: 'score',\n          header: i18next.t('figure.label.maturity'),\n          record: {\n            editable: false,\n            /*\n              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 손이 갔을 때 뜨는\n              말이 알려 준다.\n\n              색칠한 배지로 두지 않는다. 지금 카탈로그의 열넷 중 열셋이 0 점이라(선언된 묶음 한도\n              3 을 넘긴다) 붉은 덩어리가 카드마다 서면 목록이 시끄럽고, 그러면서 아무것도 가르지\n              못한다. 숫자는 조용히 적고 낮은 것에만 **점 하나**를 붙인다.\n\n              아직 재지 않은 것을 0 으로 보여 주지 않는다 — 0 은 「가볍다」는 뜻이 되어 버린다.\n              등급 문자(A~D)도 여기서 만들지 않는다: 경계는 `figure-model` 의 `scoreOf` 가 정하고,\n              화면이 그것을 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.\n            */\n            renderer: (value: number | null) =>\n              value == null\n                ? html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`\n                : html`<span style=${SCORE} title=${i18next.t('figure.label.maturity')}>\n                    ${value < ATTENTION_BELOW ? html`<i style=${LOW_DOT}></i>` : ''}${Math.round(value)}\n                  </span>`\n          },\n          sortable: true,\n          width: 90\n        },\n        {\n          type: 'integer',\n          name: 'triangles',\n          header: i18next.t('figure.label.triangles'),\n          record: {\n            editable: false,\n            /*\n              카드에서는 이름표 없이 서므로 숫자만 두면 옆의 성숙도와 구별되지 않는다. 무엇의\n              수인지 값이 스스로 말하게 한다 — 표 모드에서는 머리글이 그 일을 하므로 겹치지만,\n              그 겹침이 카드에서 뜻을 잃는 것보다 낫다.\n            */\n            renderer: (value: number | null) =>\n              value == null ? '' : i18next.t('figure.text.triangle-count', { count: value })\n          },\n          sortable: true,\n          width: 110\n        },\n        {\n          type: 'integer',\n          name: 'groups',\n          header: i18next.t('figure.label.budget-groups'),\n          record: { editable: false },\n          hidden: true,\n          width: 0\n        },\n        {\n          /*\n            **카드의 그림 칸 전체를 이 renderer 가 그린다.**\n\n            기본 image renderer 는 그림만 그리고, 그 위에 얹혀야 하는 것(초안 표시·삭제)은 카드\n            아래 gutter 줄로 밀린다. 격자로 옮기기 전 손 카드가 그것을 그림 위에 두었고 그 편이\n            맞다 — 그래서 그림 칸을 `figure-thumb` 에게 넘긴다. hover 가 필요해 컴포넌트여야\n            하는 사연은 그 파일에 적혀 있다.\n\n            `renderEmpty` — 그림이 아직 없는 것도 자리를 지킨다. 그 카드에도 초안 표시와 삭제가\n            있어야 하고, 「그림 없음」이라고 말하는 것도 `figure-thumb` 이 한다.\n          */\n          type: 'image',\n          name: 'thumbnail',\n          header: i18next.t('field.thumbnail'),\n          record: {\n            editable: false,\n            align: 'center',\n            wide: true,\n            renderEmpty: true,\n            renderer: (_value: unknown, _column: any, record: Figure) => html`\n              <figure-thumb .figure=${record} @remove=${() => this.removeFigure(record)}></figure-thumb>\n            `\n          },\n          hidden: true,\n          width: 160\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated_at'),\n          label: true,\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          /*\n            `resource-object` 를 쓰지 않는다 — 그 renderer 는 다른 패키지(resource-ui)가 등록하고,\n            등록되지 않은 앱에서는 조용히 글자 renderer 로 떨어져 `[object Object]` 가 된다.\n            이름 하나 꺼내는 일에 그 위험을 질 이유가 없다.\n          */\n          type: 'string',\n          name: 'updater',\n          header: i18next.t('field.updater'),\n          record: {\n            editable: false,\n            renderer: (value: { name?: string } | null) => value?.name || ''\n          },\n          hidden: true,\n          width: 120\n        }\n      ],\n\n      rows: {\n        selectable: false,\n        appendable: false,\n        handlers: {\n          click: (_columns: any, _data: any, _column: any, record: Figure) => {\n            if (record?.id) {\n              this.openModeller(record.id)\n            }\n          }\n        }\n      },\n\n      sorters: [{ name: 'updatedAt', desc: true }]\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /*\n      **로그인 정보가 도착하면 다시 불러온다.**\n\n      화면이 서는 것과 프로필이 오는 것은 순서가 정해져 있지 않고, 목록 질의는 로그인된 사람으로\n      나간다. 첫 질의가 프로필보다 앞서면 그 한 번이 실패하고, 그 뒤로 다시 묻는 사람이 없으면\n      화면은 비어 있는 채로 남는다. lite-menu 도 같은 신호로 같은 순서 문제를 푼다\n      (`auth.on('profile')` — 그쪽 주석에 그 사연이 적혀 있다).\n    */\n    this.listen = () => {\n      if (this.active) {\n        this.grist?.fetch()\n      }\n    }\n    auth.on('profile', this.listen)\n  }\n\n  disconnectedCallback() {\n    if (this.listen) {\n      auth.off?.('profile', this.listen)\n      this.listen = undefined\n    }\n    super.disconnectedCallback()\n  }\n\n  async pageUpdated() {\n    if (this.active) {\n      this.grist.fetch()\n    }\n  }\n\n  /**\n   * 걸러 보기·정렬·쪽을 **격자가 만든 그대로** 서버에 넘긴다.\n   *\n   * 여기서 이름을 바꿔 담으면 격자가 아는 조건과 서버에 가는 조건이 어긋난다. 실패는 격자가\n   * 받아 화면에 낸다 — 목록이 비어 있는 것과 못 불러온 것은 다른 사실이다.\n   */\n  async fetchHandler({ page = 1, limit = 24, sortings = [], filters = [] }: FetchOption) {\n    const { items, total } = await fetchFigureList({ page, limit, filters, sortings })\n\n    return { total: total || 0, records: items || [] }\n  }\n\n  private openModeller(id?: string) {\n    navigate(id ? `figure-modeller/${id}` : 'figure-modeller')\n  }\n\n  /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */\n  private async removeFigure(figure: Figure) {\n    // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다\n    const message = i18next.t('figure.text.delete-figure-confirm', { name: figure.name })\n    if (!confirm(message)) {\n      return\n    }\n\n    await deleteFigure(figure.id)\n    this.grist.fetch()\n  }\n}\n"]}
+{"version":3,"file":"figure-list-page.js","sourceRoot":"","sources":["../../client/pages/figure-list-page.ts"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AACnC,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,uCAAuC,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAGnE;;;;;GAKG;AACH,MAAM,eAAe,GAAG,EAAE,CAAA;AAE1B;;;;;;;GAOG;AACH,MAAM,QAAQ,GAAG,uDAAuD,CAAA;AACxE,MAAM,UAAU,GAAG,yDAAyD,CAAA;AAC5E,MAAM,QAAQ,GAAG,uDAAuD,CAAA;AACxE,MAAM,KAAK,GAAG,sCAAsC,CAAA;AACpD;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAG,qCAAqC,CAAA;AACnD,MAAM,OAAO,GACX,6FAA6F;IAC7F,kEAAkE,CAAA;AAEpE;;;GAGG;AACH,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAA;AAE5D;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,kBAAkB;aAC7C,WAAM,GAAG;QACd,eAAe;QACf,iBAAiB;QACjB,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;KACF,AAjGY,CAiGZ;IAQD,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC;YACxC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,MAAc,EAAE,EAAE;oBAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;gBAChC,CAAC;gBACD,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,IAAI,EAAE;gBACnC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;aACpD;YACD,MAAM,EAAE;gBACN,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAA;gBAC7B,CAAC;aACF;YACD;;;;;;cAME;SACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;kBACpD,IAAI,CAAC,WAAW;wBACV,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;kCAClB,IAAI,CAAC,yBAAyB,CAAC,UAAU,CAAE;;;;;;;;;;;0BAWnD,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;gCACnE,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;;KAEhE,CAAA;IACH,CAAC;IAED;;;;;;;;OAQG;IACK,SAAS,CAAC,GAAW;QAC3B,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAA;QAC3B,mDAAmD;QACnD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,IAAI,CAAC,WAAW,GAAG;YACjB;;;cAGE;YACF,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;YAEnC;;;;cAIE;YACF,SAAS,EAAE;gBACT,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;gBAC7C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;aACvD;YAED,IAAI,EAAE;gBACJ,mEAAmE;gBACnE,SAAS,EAAE,WAAW;gBACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;gBACxB;;;;;;;;;;;kBAWE;gBACF,OAAO,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,WAAW,CAAC;aAC5C;YAED,OAAO,EAAE;gBACP,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,EAAE;gBACvD;oBACE;;;sBAGE;oBACF,IAAI,EAAE,QAAQ;oBACd,UAAU,EAAE,QAAQ;oBACpB,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC;oBAC/C,MAAM,EAAE,IAAI;oBACZ,OAAO,EAAE,KAAK;oBACd,KAAK,EAAE,EAAE;oBACT,QAAQ,EAAE;wBACR,KAAK,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,OAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;qBAC9F;iBACF;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE;;;sBAGE;oBACF,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC;oBAC7C,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAA,SAAS,KAAK,SAAS;qBACzD;oBACD,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE;;;;;;;;;;;;sBAYE;oBACF,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,QAAQ,EAAE,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;qBAChE;oBACD,MAAM,EAAE,QAAQ;oBAChB,QAAQ,EAAE,KAAK;oBACf,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;oBACvC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf;;;;;;;0BAOE;wBACF,QAAQ,EAAE,CAAC,KAAa,EAAE,OAAY,EAAE,MAAc,EAAE,SAAiB,EAAE,KAAc,EAAE,EAAE;4BAC3F,IAAI,KAAK,KAAK,UAAU,EAAE,CAAC;gCACzB,OAAO,IAAI,CAAA,eAAe,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,SAAS,CAAA;4BAC7E,CAAC;4BAED,oDAAoD;4BACpD,OAAO,KAAK,EAAE,OAAO,KAAK,eAAe;gCACvC,CAAC,CAAC,EAAE;gCACJ,CAAC,CAAC,IAAI,CAAA,eAAe,QAAQ;uBACtB,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;sBAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,4BAA4B,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;oBAC5F,CAAA;wBACR,CAAC;qBACF;oBACD;;;;;sBAKE;oBACF,MAAM,EAAE;wBACN,IAAI,EAAE,gBAAgB;wBACtB,QAAQ,EAAE,IAAI;wBACd,KAAK,EAAE,EAAE;wBACT,OAAO,EAAE;4BACP,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE;4BAC5D,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE;yBAC1E;qBACF;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE;;;;;sBAKE;oBACF,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,UAAU;oBAChB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC;oBACjD,QAAQ,EAAE,KAAK;oBACf,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,QAAQ,EAAE,CAAC,MAAe,EAAE,OAAY,EAAE,MAAc,EAAE,EAAE;4BAC1D,MAAM,QAAQ,GAAG,YAAY,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,EAAE,MAAM,CAAC,SAAS,IAAI,CAAC,CAAC,CAAA;4BAExE,OAAO,QAAQ;gCACb,CAAC,CAAC,IAAI,CAAA,eAAe,QAAQ,UAAU,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC;sBAC/E,OAAO,CAAC,CAAC,CAAC,8BAA8B,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,CAAC;0BACjF;gCACV,CAAC,CAAC,IAAI,CAAA,eAAe,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS,CAAA;wBACzF,CAAC;qBACF;oBACD,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,OAAO;oBACb,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;oBAC1C,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf;;;;;;;;;;;0BAWE;wBACF,QAAQ,EAAE,CAAC,KAAoB,EAAE,EAAE,CACjC,KAAK,IAAI,IAAI;4BACX,CAAC,CAAC,IAAI,CAAA,eAAe,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,SAAS;4BACrF,CAAC,CAAC,IAAI,CAAA,eAAe,KAAK,UAAU,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC;sBAChE,KAAK,GAAG,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;0BAC7E;qBACf;oBACD,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,EAAE;iBACV;gBACD;oBACE,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;oBAC3C,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf;;;;0BAIE;wBACF,QAAQ,EAAE,CAAC,KAAoB,EAAE,EAAE,CACjC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,4BAA4B,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;qBACjF;oBACD,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,SAAS;oBACf,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,CAAC;oBAC/C,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,CAAC;iBACT;gBACD;oBACE;;;;;;;;;;sBAUE;oBACF,IAAI,EAAE,OAAO;oBACb,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC;oBACpC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,KAAK,EAAE,QAAQ;wBACf,IAAI,EAAE,IAAI;wBACV,WAAW,EAAE,IAAI;wBACjB,QAAQ,EAAE,CAAC,MAAe,EAAE,OAAY,EAAE,MAAc,EAAE,EAAE,CAAC,IAAI,CAAA;sCACvC,MAAM,YAAY,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;aAC1E;qBACF;oBACD,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;oBACrC,KAAK,EAAE,IAAI;oBACX,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;oBAC3B,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE;;;;sBAIE;oBACF,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,SAAS;oBACf,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;oBAClC,MAAM,EAAE;wBACN,QAAQ,EAAE,KAAK;wBACf,QAAQ,EAAE,CAAC,KAA+B,EAAE,EAAE,CAAC,KAAK,EAAE,IAAI,IAAI,EAAE;qBACjE;oBACD,MAAM,EAAE,IAAI;oBACZ,KAAK,EAAE,GAAG;iBACX;aACF;YAED,IAAI,EAAE;gBACJ,UAAU,EAAE,KAAK;gBACjB,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE;oBACR,KAAK,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,OAAY,EAAE,MAAc,EAAE,EAAE;wBACjE,IAAI,MAAM,EAAE,EAAE,EAAE,CAAC;4BACf,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;wBAC9B,CAAC;oBACH,CAAC;iBACF;aACF;YAED,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;SAC7C,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB;;;;;;;UAOE;QACF,IAAI,CAAC,MAAM,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAA;YACrB,CAAC;QACH,CAAC,CAAA;QACD,IAAI,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IACjC,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;YAClC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QACzB,CAAC;QACD,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,KAAK,CAAC,WAAW;QACf,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,YAAY,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAe;QACnF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,MAAM,eAAe,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAA;QAElF,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,IAAI,EAAE,EAAE,CAAA;IACpD,CAAC;IAEO,YAAY,CAAC,EAAW;QAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAA;IAC5D,CAAC;IAED,sDAAsD;IAC9C,KAAK,CAAC,YAAY,CAAC,MAAc;QACvC,qCAAqC;QACrC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,mCAAmC,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;QACrF,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YACtB,OAAM;QACR,CAAC;QAED,MAAM,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC7B,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;IACpB,CAAC;;AA5a2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDAAiB;AAEjB;IAA1B,KAAK,CAAC,UAAU,CAAC;;6CAA0B;AAtGjC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAihB1B","sourcesContent":["import '@operato/data-grist'\nimport '@material/web/icon/icon.js'\nimport '../viewparts/figure-thumb.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport type { DataGrist, FetchOption } from '@operato/data-grist'\nimport { i18next, localize } from '@operato/i18n'\nimport { p13n } from '@operato/p13n'\nimport { auth } from '@things-factory/auth-base/dist-client'\nimport { navigate, PageView } from '@operato/shell'\nimport { CommonGristStyles, CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\nimport { capacityFrom } from '../modeller/scene-budget.js'\nimport { deleteFigure, fetchFigureList } from '../graphql/index.js'\nimport type { Figure } from '../types.js'\n\n/**\n * 이 값 아래면 점수를 색으로 눈에 띄게 한다.\n *\n * **등급 경계가 아니다.** 등급(A~D)은 `figure-model` 의 `scoreOf` 가 정하고 화면은 그것을\n * 베끼지 않는다. 이것은 「눈에 걸리게 할 선」이고, 화면의 판단이다.\n */\nconst ATTENTION_BELOW = 50\n\n/*\n * ── renderer 가 그리는 것은 이 파일의 CSS 가 닿지 않는다 ──────────────────────\n *\n * 컬럼 renderer 의 결과는 `ox-card-field` 의 shadow root 안에 그려진다. 이 페이지의 `static\n * styles` 는 그 경계를 넘지 못하므로 `code[figure-type]` 같은 선택자는 **아무 일도 하지 않는다.**\n * 넘어가는 것은 custom property 뿐이라, 색과 글꼴은 여기서 인라인으로 준다 — 값 자체는 테마\n * 토큰을 가리키므로 밝음·어둠은 따라온다. data-grist 의 image renderer 도 같은 방식이다.\n */\nconst CAPACITY = 'font-weight: 700; color: var(--md-sys-color-primary);'\nconst UNMEASURED = 'font-style: italic; color: var(--md-sys-color-outline);'\nconst RELEASED = 'font-weight: 700; color: var(--md-sys-color-primary);'\nconst DRAFT = 'color: var(--md-sys-color-tertiary);'\n/**\n * 조용히 적는 숫자. 낮은 것만 점으로 눈에 걸리게 한다.\n *\n * **`inline-flex` 를 쓰지 않는다.** 썼더니 점이 뜨는 카드에서만 이 값이 옆의 두 값과 밑줄이\n * 어긋났다 — inline-flex 상자의 밑줄은 **첫 항목**에서 오는데, 첫 항목이 글자 없는 점이라\n * 밑줄이 없어 브라우저가 상자 아래를 밑줄로 삼는다. 점이 없는 카드(50 이상)는 멀쩡했으므로\n * 한 줄에 세 값이 나란히 설 때만 눈에 띄었다.\n *\n * 그냥 인라인으로 두면 이 상자의 밑줄이 곧 숫자의 밑줄이라 옆의 둘과 맞는다. 점은 제 몫으로\n * 글자 가운데에 맞춘다.\n */\nconst SCORE = 'font-variant-numeric: tabular-nums;'\nconst LOW_DOT =\n  'display: inline-block; width: 5px; height: 5px; margin-right: 4px; vertical-align: middle; ' +\n  'border-radius: 50%; background-color: var(--md-sys-color-error);'\n\n/*\n * `as typeof PageView` 로 조이지 않는다 — 그렇게 하면 p13n 이 얹어 주는\n * `getPagePreferenceProvider` 가 타입에서 사라져 개인 설정을 붙일 수 없다.\n */\nconst FigureListPageBase = p13n(localize(i18next)(PageView))\n\n/**\n * Figure 카탈로그.\n *\n * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다. 카드에는\n * **고를 때 쓰는 것만** 싣는다 — 그림과 이름, 그리고 아직 초안이라는 것. 배치 한도·성숙도·삼각형\n * 수는 고른 뒤에 따지는 값이라 표 모드의 칸으로 남기고 저작면에서 본다.\n *\n * ## 왜 손으로 만든 카드가 아니라 격자인가\n *\n * 전에는 카드 격자와 걸러 보기 줄과 빈 화면을 이 파일이 직접 그렸다(200줄). 그 자리에서 빠져\n * 있던 것들은 하나같이 `ox-grist` 가 이미 가진 것이다 — 쪽 나누기, 정렬, 컬럼 걸러 보기,\n * 개인 설정(모드·정렬·쪽 크기를 사람마다 기억한다), 표 모드로 바꿔 보기, 내보내기.\n * 손으로 만든 카드는 그 중 아무것도 없었고, 목록이 늘어나면 전부 한 번에 그렸다.\n *\n * 카드에 실을 것은 `list` 가 정하고, 무엇을 어떻게 그릴지는 컬럼의 renderer 가 정한다. 같은\n * 설정이 표 모드에서도 그대로 쓰이므로 **두 모드가 다른 말을 하지 않는다.**\n */\n@customElement('figure-list-page')\nexport class FigureListPage extends FigureListPageBase {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    CommonHeaderStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        background-color: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n        /* 떠 있는 단추의 기준 상자 */\n        position: relative;\n      }\n\n      /*\n        ── 만들기 단추 ────────────────────────────────────────────────────────\n        이 화면의 주된 동작 하나. 목록 위에 떠 있고 자리를 먹지 않는다.\n\n        글자를 함께 둔다(extended FAB). 아이콘만 두면 처음 온 사람은 + 표가 무엇을 만드는지\n        모른다 — 이 화면에서 만들 수 있는 것이 무엇인지가 그 글자다.\n      */\n      button[fab] {\n        position: absolute;\n        right: var(--spacing-large, 12px);\n        bottom: var(--spacing-large, 12px);\n        z-index: 10;\n\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        padding: 10px 18px 10px 14px;\n        font: var(--label-font, inherit);\n        font-size: 0.82rem;\n        font-weight: 600;\n        color: var(--md-sys-color-on-primary-container);\n        background-color: var(--md-sys-color-primary-container);\n        border: none;\n        /* 떠 있는 것의 모서리는 알약이다 — 담는 면(6px)을 따르지 않는다 */\n        border-radius: var(--md-sys-shape-corner-full, 999px);\n        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);\n        cursor: pointer;\n      }\n      button[fab]:hover {\n        color: var(--md-sys-color-on-primary, #fff);\n        background-color: var(--md-sys-color-primary);\n      }\n      button[fab] md-icon {\n        --md-icon-size: 20px;\n      }\n\n      /* 격자가 바깥에 요구하는 것은 확정된 높이 하나뿐이다 — 스크롤은 격자가 안에서 한다 */\n      ox-grist {\n        flex: 1;\n        min-height: 0;\n      }\n\n      /*\n        ── 그림이 주인공인 카탈로그 ────────────────────────────────────────\n        카드 기본값은 글이 많은 목록(직원·결재함)에 맞춰져 있다. 여기서는 사람이 먼저 보는 것이\n        형상 그림이므로, 그림 칸을 비율로 잡아 카드 폭이 달라져도 그림이 나란히 읽히게 한다.\n\n        그림은 카드 끝까지 닿는다 — 위쪽 모서리만 카드와 같은 6px 로 깎아 한 장처럼 보이게 하고,\n        그림 안에 얹히는 초안 표시·삭제는 figure-thumb 이 그린다.\n      */\n      ox-grist {\n        --data-card-min-width: 240px;\n        --data-card-record-card-border-radius: 6px;\n        --data-card-record-card-padding: 0;\n        --data-card-thumbnail-height: auto;\n        --data-card-thumbnail-aspect: 4 / 3;\n        --data-card-thumbnail-padding: 0;\n        --data-card-thumbnail-radius: 6px 6px 0 0;\n        --data-card-thumbnail-background: var(--md-sys-color-surface-container);\n\n        /*\n          카드 기본 글꼴은 굵다(제목 bold 1.1em). 글이 정보를 나르는 목록에서는 맞지만, 여기서\n          정보를 나르는 것은 그림이다. 굵은 제목이 카드마다 서면 그림보다 글이 먼저 읽힌다 —\n          이름은 알아볼 정도로만, 타입은 곁글로 둔다.\n        */\n        --data-card-item-name-font: 500 0.9rem/1.35 var(--theme-font, 'Roboto');\n        --data-card-item-name-color: var(--md-sys-color-on-surface);\n        --data-card-item-disc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n        --data-card-item-disc-color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));\n        --data-card-item-etc-font: normal 0.72rem/1.2 var(--theme-font, 'Roboto');\n\n        /* 상태와 성숙도는 짧은 표식이다 — 두 줄로 세우지 않고 한 줄에 뉜다 */\n        --data-card-detail-direction: row;\n\n        /*\n          맨 위로 가는 화살표를 만들기 단추 **위로** 올린다. 둘 다 오른쪽 아래에 떠 있으므로\n          그냥 두면 겹친다 — 단추(36px + 아래 여백 12px) 위에 12px 을 띄운 자리다.\n        */\n        --data-card-fab-position-vertical: 64px;\n        --data-list-fab-position-vertical: 64px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n\n  @query('ox-grist') private grist!: DataGrist\n\n  private listen?: () => void\n\n  get context() {\n    return {\n      title: i18next.t('figure.title.figures'),\n      search: {\n        handler: (search: string) => {\n          this.grist.searchText = search\n        },\n        value: this.grist?.searchText || '',\n        placeholder: i18next.t('figure.text.search-figure')\n      },\n      filter: {\n        handler: () => {\n          this.grist.toggleHeadroom()\n        }\n      }\n      /*\n        **만들기는 `actions` 가 아니라 FAB 이다.**\n\n        `context.actions` 로 두면 페이지 바닥 줄에 글자 단추로 서는데, 그 줄은 「지금 화면에 대해\n        할 일」을 늘어놓는 자리다. 만들기는 이 화면의 유일한 주된 동작이므로 줄에 섞이지 않고\n        떠 있어야 한다. 카드를 가리지 않는 오른쪽 아래, 손이 가는 자리다(아래 render 의 [fab]).\n      */\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist\n        mode=\"CARD\"\n        @search-tag=${(e: CustomEvent) => this.findByTag(e.detail.tag)}\n        .config=${this.gristConfig}\n        .fetchHandler=${this.fetchHandler.bind(this)}\n        .personalConfigProvider=${this.getPagePreferenceProvider('ox-grist')!}\n      >\n        <div slot=\"headroom\" class=\"header\">\n          <div class=\"filters\">\n            <ox-filters-form autofocus without-search></ox-filters-form>\n          </div>\n        </div>\n\n        <ox-grist-personalizer slot=\"setting\"></ox-grist-personalizer>\n      </ox-grist>\n\n      <button fab title=${i18next.t('figure.button.new-figure')} @click=${() => this.openModeller()}>\n        <md-icon>add</md-icon>${i18next.t('figure.button.new-figure')}\n      </button>\n    `\n  }\n\n  /**\n   * 카드의 태그 알약을 눌렀다 — **그 태그로 목록을 거른다.**\n   *\n   * 검색창에 그 말을 채워 넣는다. 격자에 조건만 걸고 창을 비워 두면 저작자는 **왜 목록이\n   * 줄었는지 모른 채** 보게 되고, 되돌리려면 무엇을 지워야 하는지도 알 수 없다.\n   *\n   * 서버가 `tags` 뿐 아니라 이름·타입·설명·분류를 함께 훑으므로, 그 말이 다른 칸에 든 도형도\n   * 같이 온다. 태그만 정확히 거르는 것이 아니라 **찾기**다.\n   */\n  private findByTag(tag: string) {\n    this.grist.searchText = tag\n    /* 창의 값은 `context` 에서 나온다 — 다시 알려야 헤더가 새 값을 그린다. */\n    this.updateContext()\n  }\n\n  async pageInitialized() {\n    this.gristConfig = {\n      /*\n        **쪽 나누기는 선택이 아니다.** 격자에 가상 스크롤이 없어 받은 것을 전부 DOM 에 그린다.\n        카드 모드는 끝까지 내려가면 다음 쪽을 이어 붙이므로, 한 쪽이 작아도 목록은 계속 읽힌다.\n      */\n      pagination: { pages: [24, 48, 96] },\n\n      /*\n        아직 아무것도 없을 때 하는 말. **이 자리가 이 화면에서 가장 중요하다** — 처음 온 사람은\n        여기서 이 도구가 무엇을 만드는 것인지 알게 된다. 조건이 걸려 비었을 때는 격자가 스스로\n        다른 말을 한다(「찾는 것이 없다」). 그 둘을 섞지 않는 것이 격자 쪽에 이미 들어 있다.\n      */\n      emptyNote: {\n        icon: 'deployed_code',\n        title: i18next.t('figure.text.no-figure-yet'),\n        description: i18next.t('figure.text.what-a-figure-is')\n      },\n\n      list: {\n        /* 그림 칸은 그 컬럼의 renderer 가 그린다 — 그림 없을 때의 안내까지 `figure-thumb` 안이다 */\n        thumbnail: 'thumbnail',\n        fields: ['name', 'type'],\n        /*\n          ── 무게를 모른 채 고르게 두지 않는다 ────────────────────────────────\n          이름과 그림만 실으면 저작자는 **이 형상이 무거운지 모른 채** 고른다. 그것을 저작면에\n          들어가서야 아는 것은 늦다. 그래서 격자로 옮기기 전 손 카드가 실었던 셋을 그대로 싣는다 —\n          몇 개까지 놓을 수 있나(배치 한도) · 성숙도 · 삼각형 수.\n\n          한 줄에 뉜다(`--data-card-detail-direction: row`). 이름표는 달지 않는다 — 값 자체가\n          「625개까지」·「삼각형 440개」로 읽히고, 성숙도만 숫자 하나여서 손이 갔을 때 이름이 뜬다.\n\n          상태는 이 줄에 없다. 그림 위 초안 표시가 그 일을 한다(`figure-thumb`) — 발행된 것에는\n          아무 말도 하지 않으므로 빈 칸이 생기지 않는다.\n        */\n        details: ['capacity', 'score', 'triangles']\n      },\n\n      columns: [\n        { type: 'gutter', gutterName: 'sequence', fixed: true },\n        {\n          /*\n            표 모드에서만 쓰는 삭제 칸. 카드에서는 `figure-thumb` 이 그림 위에 그리므로\n            `forList: false` 로 내린다 — 카드 아래 단추 줄은 감춰도 자리가 남는다.\n          */\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'delete',\n          title: i18next.t('figure.button.delete-figure'),\n          danger: true,\n          forList: false,\n          width: 40,\n          handlers: {\n            click: (_columns: any, _data: any, _column: any, record: Figure) => this.removeFigure(record)\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: i18next.t('figure.label.name'),\n          record: { editable: false },\n          filter: 'search',\n          sortable: true,\n          width: 200\n        },\n        {\n          /*\n            타입 이름은 **저장되는 식별자**다. 표시 이름과 다르게 보이게 두어야 보드가 무엇으로\n            이 형상을 찾는지 헷갈리지 않는다.\n          */\n          type: 'string',\n          name: 'type',\n          header: i18next.t('figure.label.figure-type'),\n          record: {\n            editable: false,\n            renderer: (value: string) => html`<code>${value}</code>`\n          },\n          filter: 'search',\n          sortable: true,\n          width: 160\n        },\n        {\n          /*\n            태그 — **카드에서 곁줄로 보이고 검색에 걸린다.**\n\n            서버가 이미 `type`·`name`·`description`·`category`·`tags` 를 함께 훑는다. 그런데\n            화면에는 태그가 어디에도 안 보여서, 저작자가 적은 태그가 **자기 눈에 돌아오지 않았다** —\n            적어 둔 것이 쓰이는지 알 수 없으면 아무도 적지 않는다.\n\n            정렬은 걸지 않는다. 배열이라 무엇을 기준으로 줄을 세우는지 답할 수 없다.\n\n            **카드에서는 이 컬럼이 그리지 않는다.** 본문에 한 줄로 두었더니 태그가 있는 카드만\n            높아져 격자가 어긋났다 — 개수가 도형마다 다르므로 본문에 두는 한 남는 문제다.\n            카드에서는 `figure-thumb` 이 그림 위에 얹는다. 여기 남은 것은 표 모드의 칸이다.\n          */\n          type: 'string',\n          name: 'tags',\n          header: i18next.t('figure.label.tags'),\n          record: {\n            editable: false,\n            renderer: (value: string[] | null) => (value || []).join(' · ')\n          },\n          filter: 'search',\n          sortable: false,\n          width: 180\n        },\n        {\n          type: 'string',\n          name: 'state',\n          header: i18next.t('figure.label.state'),\n          record: {\n            editable: false,\n            /*\n              **발행된 것에는 아무 말도 하지 않는다.** 카탈로그에 있는 것은 대개 발행된 것이라,\n              카드마다 「발행됨」이 붙으면 그 말이 아무것도 가르지 않고 자리만 먹는다. 판 번호도\n              고를 때 쓰는 값이 아니다 — 이력 탭에 있다.\n\n              표 모드에서는 칸에 값이 있어야 하므로 그때는 발행됨도 적는다(`wide` 가 아니라 label\n              이 붙는 자리인지로 가른다 — 카드는 label 을 달지 않았다).\n            */\n            renderer: (value: string, _column: any, record: Figure, _rowIndex: number, field: Element) => {\n              if (value !== 'released') {\n                return html`<span style=${DRAFT}>${i18next.t('figure.label.draft')}</span>`\n              }\n\n              /* 표에서는 칸이 비면 안 된다. 카드에서만 입을 다문다 — 그리는 자리가 알려 준다. */\n              return field?.tagName === 'OX-CARD-FIELD'\n                ? ''\n                : html`<span style=${RELEASED}\n                    >${i18next.t('figure.label.figure-released')}\n                    ${record.version ? i18next.t('figure.text.version-number', { version: record.version }) : ''}</span\n                  >`\n            }\n          },\n          /*\n            전체·초안·발행됨을 단추로 고른다 — 값이 둘뿐인 조건을 펼침 목록에 넣지 않는다.\n\n            이름표는 비워 둔다. 단추에 「초안」·「발행됨」이라고 적혀 있으니 그 앞의 「상태」는\n            같은 말을 한 번 더 하는 것이고, 걸러 보기 줄에서 자리만 먹는다.\n          */\n          filter: {\n            type: 'select-buttons',\n            operator: 'in',\n            label: '',\n            options: [\n              { display: i18next.t('figure.label.draft'), value: 'draft' },\n              { display: i18next.t('figure.label.figure-released'), value: 'released' }\n            ]\n          },\n          width: 120\n        },\n        {\n          /*\n            **몇 개까지 놓을 수 있나.** 카드에는 싣지 않고 표 모드의 칸으로 둔다 — 고른 뒤에\n            따지는 값이다. 서버에 없는 값이라 `groups` 와 `triangles` 에서 계산하는데, 저작면\n            머리와 **같은 함수**를 쓴다. 두 화면이 같은 형상을 다른 잣대로 말하면 무엇을 고칠지\n            모른다.\n          */\n          type: 'string',\n          name: 'capacity',\n          header: i18next.t('figure.label.placement-limit'),\n          sortable: false,\n          record: {\n            editable: false,\n            renderer: (_value: unknown, _column: any, record: Figure) => {\n              const capacity = capacityFrom(record.groups ?? 0, record.triangles ?? 0)\n\n              return capacity\n                ? html`<span style=${CAPACITY} title=${i18next.t('figure.text.reuse-score-explained')}>\n                    ${i18next.t('figure.text.fits-n-instances', { n: capacity.instances.toLocaleString() })}\n                  </span>`\n                : html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`\n            }\n          },\n          width: 120\n        },\n        {\n          type: 'float',\n          name: 'score',\n          header: i18next.t('figure.label.maturity'),\n          record: {\n            editable: false,\n            /*\n              카드에 남긴 하나뿐인 숫자. **이름표를 달지 않으므로** 무엇인지는 손이 갔을 때 뜨는\n              말이 알려 준다.\n\n              색칠한 배지로 두지 않는다. 지금 카탈로그의 열넷 중 열셋이 0 점이라(선언된 묶음 한도\n              3 을 넘긴다) 붉은 덩어리가 카드마다 서면 목록이 시끄럽고, 그러면서 아무것도 가르지\n              못한다. 숫자는 조용히 적고 낮은 것에만 **점 하나**를 붙인다.\n\n              아직 재지 않은 것을 0 으로 보여 주지 않는다 — 0 은 「가볍다」는 뜻이 되어 버린다.\n              등급 문자(A~D)도 여기서 만들지 않는다: 경계는 `figure-model` 의 `scoreOf` 가 정하고,\n              화면이 그것을 베끼면 두 벌이 되어 목록과 저작면이 다른 등급을 말한다.\n            */\n            renderer: (value: number | null) =>\n              value == null\n                ? html`<span style=${UNMEASURED}>${i18next.t('figure.text.not-measured-yet')}</span>`\n                : html`<span style=${SCORE} title=${i18next.t('figure.label.maturity')}>\n                    ${value < ATTENTION_BELOW ? html`<i style=${LOW_DOT}></i>` : ''}${Math.round(value)}\n                  </span>`\n          },\n          sortable: true,\n          width: 90\n        },\n        {\n          type: 'integer',\n          name: 'triangles',\n          header: i18next.t('figure.label.triangles'),\n          record: {\n            editable: false,\n            /*\n              카드에서는 이름표 없이 서므로 숫자만 두면 옆의 성숙도와 구별되지 않는다. 무엇의\n              수인지 값이 스스로 말하게 한다 — 표 모드에서는 머리글이 그 일을 하므로 겹치지만,\n              그 겹침이 카드에서 뜻을 잃는 것보다 낫다.\n            */\n            renderer: (value: number | null) =>\n              value == null ? '' : i18next.t('figure.text.triangle-count', { count: value })\n          },\n          sortable: true,\n          width: 110\n        },\n        {\n          type: 'integer',\n          name: 'groups',\n          header: i18next.t('figure.label.budget-groups'),\n          record: { editable: false },\n          hidden: true,\n          width: 0\n        },\n        {\n          /*\n            **카드의 그림 칸 전체를 이 renderer 가 그린다.**\n\n            기본 image renderer 는 그림만 그리고, 그 위에 얹혀야 하는 것(초안 표시·삭제)은 카드\n            아래 gutter 줄로 밀린다. 격자로 옮기기 전 손 카드가 그것을 그림 위에 두었고 그 편이\n            맞다 — 그래서 그림 칸을 `figure-thumb` 에게 넘긴다. hover 가 필요해 컴포넌트여야\n            하는 사연은 그 파일에 적혀 있다.\n\n            `renderEmpty` — 그림이 아직 없는 것도 자리를 지킨다. 그 카드에도 초안 표시와 삭제가\n            있어야 하고, 「그림 없음」이라고 말하는 것도 `figure-thumb` 이 한다.\n          */\n          type: 'image',\n          name: 'thumbnail',\n          header: i18next.t('field.thumbnail'),\n          record: {\n            editable: false,\n            align: 'center',\n            wide: true,\n            renderEmpty: true,\n            renderer: (_value: unknown, _column: any, record: Figure) => html`\n              <figure-thumb .figure=${record} @remove=${() => this.removeFigure(record)}></figure-thumb>\n            `\n          },\n          hidden: true,\n          width: 160\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: i18next.t('field.updated_at'),\n          label: true,\n          record: { editable: false },\n          sortable: true,\n          width: 180\n        },\n        {\n          /*\n            `resource-object` 를 쓰지 않는다 — 그 renderer 는 다른 패키지(resource-ui)가 등록하고,\n            등록되지 않은 앱에서는 조용히 글자 renderer 로 떨어져 `[object Object]` 가 된다.\n            이름 하나 꺼내는 일에 그 위험을 질 이유가 없다.\n          */\n          type: 'string',\n          name: 'updater',\n          header: i18next.t('field.updater'),\n          record: {\n            editable: false,\n            renderer: (value: { name?: string } | null) => value?.name || ''\n          },\n          hidden: true,\n          width: 120\n        }\n      ],\n\n      rows: {\n        selectable: false,\n        appendable: false,\n        handlers: {\n          click: (_columns: any, _data: any, _column: any, record: Figure) => {\n            if (record?.id) {\n              this.openModeller(record.id)\n            }\n          }\n        }\n      },\n\n      sorters: [{ name: 'updatedAt', desc: true }]\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /*\n      **로그인 정보가 도착하면 다시 불러온다.**\n\n      화면이 서는 것과 프로필이 오는 것은 순서가 정해져 있지 않고, 목록 질의는 로그인된 사람으로\n      나간다. 첫 질의가 프로필보다 앞서면 그 한 번이 실패하고, 그 뒤로 다시 묻는 사람이 없으면\n      화면은 비어 있는 채로 남는다. lite-menu 도 같은 신호로 같은 순서 문제를 푼다\n      (`auth.on('profile')` — 그쪽 주석에 그 사연이 적혀 있다).\n    */\n    this.listen = () => {\n      if (this.active) {\n        this.grist?.fetch()\n      }\n    }\n    auth.on('profile', this.listen)\n  }\n\n  disconnectedCallback() {\n    if (this.listen) {\n      auth.off?.('profile', this.listen)\n      this.listen = undefined\n    }\n    super.disconnectedCallback()\n  }\n\n  async pageUpdated() {\n    if (this.active) {\n      this.grist.fetch()\n    }\n  }\n\n  /**\n   * 걸러 보기·정렬·쪽을 **격자가 만든 그대로** 서버에 넘긴다.\n   *\n   * 여기서 이름을 바꿔 담으면 격자가 아는 조건과 서버에 가는 조건이 어긋난다. 실패는 격자가\n   * 받아 화면에 낸다 — 목록이 비어 있는 것과 못 불러온 것은 다른 사실이다.\n   */\n  async fetchHandler({ page = 1, limit = 24, sortings = [], filters = [] }: FetchOption) {\n    const { items, total } = await fetchFigureList({ page, limit, filters, sortings })\n\n    return { total: total || 0, records: items || [] }\n  }\n\n  private openModeller(id?: string) {\n    navigate(id ? `figure-modeller/${id}` : 'figure-modeller')\n  }\n\n  /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */\n  private async removeFigure(figure: Figure) {\n    // 되돌릴 수 없는 조작이므로 무엇이 사라지는지 이름으로 확인한다\n    const message = i18next.t('figure.text.delete-figure-confirm', { name: figure.name })\n    if (!confirm(message)) {\n      return\n    }\n\n    await deleteFigure(figure.id)\n    this.grist.fetch()\n  }\n}\n"]}