@things-factory/figure-ui 10.1.6 → 10.1.8

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/modeller/proposal-session.ts

@@ -0,0 +1,92 @@
+import type { FigureSource } from '@hatiolab/figure-model'
+
+import type { FigureGateFix, FigureProposal, ProposalFeedback } from '../types.js'
+import { diffProposal } from './proposal.js'
+
+/**
+ * 한 번의 AI 후보 검토에만 존재하는 상태다.
+ *
+ * 후보는 정본이 아니다. 후보 원본·선택·메모·측정값을 한 값으로 묶어 두면 화면이
+ * 수락/거절 중 일부만 이전 후보에서 남기는 일이 없다.
+ */
+export interface ProposalSession {
+  source: FigureSource
+  title: string
+  picked: Set<string>
+  note: string
+  metrics?: Pick<FigureProposal, 'grade' | 'triangles' | 'groups' | 'attempts' | 'quality'>
+}
+
+function selectedKeys(current: FigureSource | undefined, source: FigureSource): Set<string> {
+  return new Set(diffProposal(current, source).map(change => change.key))
+}
+
+/** 서버 후보를 검토 세션으로 연다. 저장 형식이 아니면 화면에 후보를 열지 않는다. */
+export function openAiProposal(current: FigureSource | undefined, proposal: FigureProposal): ProposalSession {
+  const source = JSON.parse(proposal.source) as FigureSource
+  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: FigureSource, fix: FigureGateFix): ProposalSession | undefined {
+  if (!current.parts.some(part => part.name === fix.part)) return undefined
+
+  const source: FigureSource = {
+    ...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: ProposalSession, key: string): ProposalSession {
+  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: FigureSource | undefined,
+  session: ProposalSession,
+  outcome: ProposalFeedback['outcome']
+): ProposalFeedback | undefined {
+  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)
+    }
+  }
+}

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',