@things-factory/figure-ui 10.1.7 → 10.1.8

package/client/graphql/index.ts

@@ -8,6 +8,7 @@ import type {
   FigureListResult,
   FigurePatch,
   FigureProposal,
+  ProposalFeedback,
   FigureVersion,
   NewFigure
 } from '../types.js'
@@ -196,6 +197,8 @@ export async function proposeFigure(request: {
   base?: string
   type?: string
   palette: string[]
+  refine?: boolean
+  feedback?: ProposalFeedback[]
   image?: File
 }): Promise<FigureProposal> {
   const response = await client.mutate({
@@ -207,6 +210,18 @@ export async function proposeFigure(request: {
           grade
           triangles
           groups
+          quality {
+            status
+            summary
+            findings {
+              dimension
+              code
+              message
+            }
+            visualRegions
+            visualCoverage
+            visualReadability
+          }
           attempts
           violations {
             code
@@ -280,6 +295,15 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
             why
             how
             at
+            fixes {
+              findingWay
+              part
+              axis
+              from
+              to
+              resolved
+              safe
+            }
             blocking
           }
         }

package/client/modeller/figure-animations.ts

@@ -39,6 +39,23 @@ type Clip = NonNullable<BoardModel['animations']>[number]
 type Channel = Clip['channels'][number]
 type Keyframe = Channel['keys'][number]
 
+/** A first-success motion: intent first, raw clip/channel editing second. */
+interface MotionRecipe {
+  id: 'conveyor' | 'gate' | 'pusher' | 'lift'
+  name: string
+  drive: Clip['drive']
+  path: ChannelPath
+  end: Vec3
+  pivot?: Vec3
+}
+
+const MOTION_RECIPES: readonly MotionRecipe[] = [
+  { id: 'conveyor', name: 'conveyor-running', drive: 'loop', path: 'rotation', end: { x: 360, y: 0, z: 0 } },
+  { id: 'gate', name: 'gate-open', drive: 'hold', path: 'rotation', end: { x: 0, y: 90, z: 0 }, pivot: { x: 0, y: 0, z: 0 } },
+  { id: 'pusher', name: 'pusher-position', drive: 'hold', path: 'translation', end: { x: 100, y: 0, z: 0 } },
+  { id: 'lift', name: 'lift-height', drive: 'hold', path: 'translation', end: { x: 0, y: 100, z: 0 } }
+]
+
 /** 새 clip 의 키 둘. **하나로 만들지 않는다** — 키 하나는 움직임이 아니라 자세다. */
 const NEW_KEYS: Keyframe[] = [
   { at: 0, value: { x: 0, y: 0, z: 0 } },
@@ -63,6 +80,12 @@ function freeName(taken: readonly Clip[]): string {
   }
 }
 
+function freeRecipeName(taken: readonly Clip[], base: string): string {
+  const used = new Set(taken.map(clip => clip.name))
+  if (!used.has(base)) return base
+  for (let n = 2; ; n++) if (!used.has(`${base}-${n}`)) return `${base}-${n}`
+}
+
 @customElement('figure-animations')
 export class FigureAnimations extends localize(i18next)(LitElement) {
   static styles = [
@@ -104,6 +127,11 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-on-surface-variant);
       }
 
+      div[recipes] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+      button[recipe] { min-height: 54px; align-items: flex-start; flex-direction: column; text-align: left; }
+      button[recipe] strong { font-size: 0.74rem; }
+      button[recipe] span { color: var(--md-sys-color-on-surface-variant); font-size: 0.68rem; line-height: 1.35; }
+
       /* ── clip ─────────────────────────────────────────────────────── */
 
       div[clip] {
@@ -263,6 +291,7 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
 
   /** 펼쳐 둔 clip. 이름이 아니라 자리로 잡는다 — 이름은 편집 중에 바뀐다. */
   @state() private open = 0
+  @state() private recipeTarget = ''
 
   private get clips(): Clip[] {
     return this.board?.animations ?? []
@@ -294,7 +323,8 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
         <p quiet>${i18next.t('figure.text.animation-is-driven-by-a-fact')}</p>
       </section>
 
-      ${this.clips.length === 0 ? this.renderEmpty() : this.renderClips()}
+      ${this.renderRecipes()}
+      ${this.clips.length === 0 ? nothing : this.renderClips()}
 
       <section>
         <button @click=${() => this.addClip()} ?disabled=${this.partNames.length === 0}>
@@ -315,11 +345,24 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
    * 「clip 을 추가하세요」라고만 쓰면 처음 여는 사람은 clip 이 무엇인지 모른 채 단추를 누른다.
    * 그래서 무엇을 만들 수 있는지 예를 들고, 그것이 어떻게 움직이는지(사실이 들어온다)를 적는다.
    */
-  private renderEmpty(): TemplateResult {
+  private renderRecipes(): TemplateResult {
     return html`
       <section>
-        <p quiet>${i18next.t('figure.text.animation-empty-what-it-is')}</p>
-        <p quiet>${i18next.t('figure.text.animation-empty-examples')}</p>
+        <h3>${i18next.t('figure.label.motion-intent')}</h3>
+        <p quiet>${i18next.t('figure.text.motion-intent-help')}</p>
+        ${this.partNames.length
+          ? html`<select .value=${this.recipeTarget} @change=${(e: Event) => (this.recipeTarget = (e.target as HTMLSelectElement).value)}>
+              ${this.partNames.map(name => html`<option value=${name}>${name}</option>`)}
+            </select>
+            <div recipes>
+              ${MOTION_RECIPES.map(recipe => html`
+                <button recipe @click=${() => this.addRecipe(recipe)}>
+                  <strong>${i18next.t('figure.label.recipe-' + recipe.id)}</strong>
+                  <span>${i18next.t('figure.text.recipe-' + recipe.id)}</span>
+                </button>
+              `)}
+            </div>`
+          : html`<p quiet>${i18next.t('figure.text.animation-needs-a-named-part')}</p>`}
       </section>
     `
   }
@@ -622,6 +665,20 @@ export class FigureAnimations extends localize(i18next)(LitElement) {
     this.tell([...this.clips, clip])
   }
 
+  /** Recipe creates a valid, editable two-pose clip; it never saves or publishes the Figure. */
+  private addRecipe(recipe: MotionRecipe): void {
+    const target = this.recipeTarget || this.partNames[0]
+    if (!target) return
+    const channel: Channel = {
+      target,
+      path: recipe.path,
+      keys: [{ at: 0, value: startValue(recipe.path) }, { at: 1, value: { ...recipe.end } }]
+    }
+    if (recipe.pivot) channel.pivot = { ...recipe.pivot }
+    this.open = this.clips.length
+    this.tell([...this.clips, { name: freeRecipeName(this.clips, recipe.name), drive: recipe.drive, channels: [channel] }])
+  }
+
   private renameClip(at: number, name: string): void {
     this.patchClip(at, { name: name.trim() })
   }

package/client/modeller/figure-ask.ts

@@ -8,7 +8,7 @@ import type { FigureSource } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
 
 import { proposeFigure } from '../graphql/index.js'
-import type { FigureProposal } from '../types.js'
+import type { FigureProposal, ProposalFeedback } from '../types.js'
 
 /**
  * 말로 시키는 줄.
@@ -175,6 +175,8 @@ export class FigureAsk extends localize(i18next)(LitElement) {
   @property({ type: Object }) source?: FigureSource
   /** 새로 만들 때 쓸 타입 이름. */
   @property({ type: String }) type = ''
+  /** 이 모델러 세션에서 사람이 명시적으로 남긴 이전 후보 반응. */
+  @property({ type: Array }) feedback: ProposalFeedback[] = []
 
   @state() private asking = false
   @state() private failure = ''
@@ -239,6 +241,9 @@ export class FigureAsk extends localize(i18next)(LitElement) {
         type: this.source ? undefined : this.type,
         // 그리는 쪽이 풀 수 있는 토큰만 보낸다. 서버는 이 목록 밖의 색을 거절한다.
         palette: Object.keys(activePalette() as Record<string, string>),
+        // 구조적으로는 맞지만 품질 근거가 남으면 한 번 더 개선 후보를 시킨다.
+        refine: true,
+        feedback: this.feedback,
         image: this.picture
       })
 

package/client/modeller/figure-history-panel.ts

@@ -7,7 +7,7 @@ import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { fetchFigureVersions, inspectFigure, releaseFigure, revertFigureVersion } from '../graphql/index.js'
-import type { FigureGateFinding, FigureInspection, FigureVersion } from '../types.js'
+import type { FigureGateFinding, FigureGateFix, FigureInspection, FigureVersion } from '../types.js'
 
 /**
  * 이력 — **발행하는 자리이자, 발행된 판들을 보는 자리.**
@@ -253,6 +253,33 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       margin-top: 1px;
     }
 
+    /* 설명으로 끝내지 않는다. 이 단추는 원본을 바꾸지 않고 모델러에 후보만 연다. */
+    li[finding] button[preview-fix] {
+      margin-top: 3px;
+      padding: 4px 7px;
+      font-weight: 700;
+      color: var(--md-sys-color-on-primary-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-primary-container, transparent);
+      border: 0;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    li[finding] button[preview-fix]:hover {
+      filter: brightness(1.08);
+    }
+
+    li[finding] button[apply-fix] {
+      margin-top: 3px;
+      padding: 4px 7px;
+      font-weight: 700;
+      color: var(--ui-on-accent, #fff);
+      background-color: var(--md-sys-color-primary);
+      border: 0;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
     p[quiet] {
       margin: 0;
       line-height: 1.6;
@@ -408,10 +435,34 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
         ${finding.at ? html`<code where>${finding.at}</code>` : nothing}
         ${finding.why ? html`<span why-line>${finding.why}</span>` : nothing}
         ${finding.how ? html`<span how-line><md-icon>build</md-icon>${finding.how}</span>` : nothing}
+        ${(finding.fixes ?? []).map(fix => html`
+          ${fix.safe ? html`
+            <button apply-fix @click=${() => this.applyFix(fix)}>
+              안전하게 수정 적용 · ${fix.part}.anchor.${fix.axis}: ${fix.from ?? 'auto'} → ${fix.to}
+            </button>
+          ` : nothing}
+          <button preview-fix @click=${() => this.previewFix(fix)}>
+            수정안 미리보기 · ${fix.part}.anchor.${fix.axis}: ${fix.from ?? 'auto'} → ${fix.to}
+          </button>
+        `)}
       </li>
     `
   }
 
+  /**
+   * 게이트는 수정을 저장하지 않는다. 부모 모델러가 현재 정본과 이 한 수정안을 나란히 렌더하고,
+   * 저작자가 '변경 받기'를 눌렀을 때에만 자기 작업 사본에 적용한다.
+   */
+  private previewFix(fix: FigureGateFix) {
+    this.dispatchEvent(new CustomEvent('preview-sizing-fix', { detail: fix, bubbles: true, composed: true }))
+  }
+
+  /** 서버가 전수 재검사해 모든 차단 split이 사라진 후보만 작업 사본에 원클릭 적용한다. 저장은 하지 않는다. */
+  private applyFix(fix: FigureGateFix) {
+    if (!fix.safe) return
+    this.dispatchEvent(new CustomEvent('apply-sizing-fix', { detail: fix, bubbles: true, composed: true }))
+  }
+
   private renderVersion(version: FigureVersion) {
     return html`
       <li>