@things-factory/figure-ui 10.1.38 → 10.1.39

package/client/graphql/index.ts

@@ -335,6 +335,59 @@ export async function inspectFigure(id: string): Promise<FigureInspection> {
   return unwrap<FigureInspection>(response, 'inspectFigure')
 }
 
+/**
+ * 편집 중인 원본의 발행 판정 — 저장하지 않은 것을 잰다.
+ *
+ * 발행 패널의 `inspectFigure` 는 저장된 원본을 재므로 고친 결과를 저장한 뒤에야 보여 준다. 편집하면서 막히는
+ * 것을 보려면 편집 중인 원본을 보내야 한다. 판정은 서버의 같은 문(`inspectAnySource`)이 하고 문장도 같다 —
+ * 화면이 제 판정을 따로 가지면 두 자리가 다른 말을 한다. `id` 가 있으면 서버가 그 행의 타입과 직전 발행판을 읽는다.
+ */
+export async function inspectFigureDraft(source: string, id?: string): Promise<FigureInspection> {
+  const response = await client.query({
+    query: gql`
+      query InspectFigureDraft($source: String!, $id: String) {
+        inspectFigureDraft(source: $source, id: $id) {
+          blocked
+          findings {
+            code
+            message
+            why
+            how
+            at
+            fixes {
+              findingWay
+              part
+              axis
+              from
+              to
+              resolved
+              safe
+            }
+            fixPlan {
+              resolved
+              safe
+              fixes {
+                findingWay
+                part
+                axis
+                from
+                to
+                resolved
+                safe
+              }
+            }
+            blocking
+          }
+        }
+      }
+    `,
+    variables: { source, id },
+    fetchPolicy: 'network-only'
+  })
+
+  return unwrap<FigureInspection>(response, 'inspectFigureDraft')
+}
+
 /** 발행된 판들 — 최근 것부터 열 개. */
 /**
  * 직전 발행판의 정본. 한 번도 발행 안 했으면 `undefined`.

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

@@ -1,5 +1,6 @@
 import '@material/web/icon/icon.js'
 
+import { gateFindingStyles, renderGateFinding } from './gate-findings.js'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
@@ -31,6 +32,7 @@ import type { FigureGateFinding, FigureGateFix, FigureGateFixPlan, FigureInspect
 @customElement('figure-history-panel')
 export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   static styles = [
+    gateFindingStyles,
     ScrollbarStyles,
     css`
     :host {
@@ -191,77 +193,6 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       게이트 사유. 막는 것은 색으로도 말하고, 알리는 것은 조용히 둔다 — 둘을 같은 톤으로 두면
       「이 중 어느 것이 발행을 막았나」를 사람이 다시 세어야 한다.
     */
-    ul[gate] {
-      margin: var(--spacing-small, 6px) 0 0;
-      padding: 0;
-      list-style: none;
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-    }
-
-    li[head] {
-      font: var(--label-font, inherit);
-      font-size: 0.72rem;
-      color: var(--md-sys-color-error);
-    }
-
-    li[head][quiet] {
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-    }
-
-    li[finding] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 3px;
-      padding: 3px 6px;
-      font-size: 0.72rem;
-      line-height: 1.5;
-      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-surface-container);
-      border-radius: 4px;
-    }
-
-    li[finding][blocking] {
-      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
-      background-color: var(--md-sys-color-error-container);
-    }
-
-    li[finding] code[where] {
-      font-family: var(--mono-font, monospace);
-      font-size: 0.68rem;
-      opacity: 0.85;
-    }
-
-    li[finding] details[affected] {
-      width: 100%;
-      color: inherit;
-    }
-
-    li[finding] details[affected] summary {
-      cursor: pointer;
-      font-weight: 600;
-    }
-
-    /* 왜 나쁜지는 곁글로 — 읽어야 하지만 잰 것보다 먼저 눈에 들 필요는 없다 */
-    li[finding] span[why-line] {
-      opacity: 0.8;
-    }
-
-    /* 무엇을 바꾸면 되나 — 이 줄이 실제로 사람이 할 일이다. 연장 표를 달아 눈에 걸리게 한다 */
-    li[finding] span[how-line] {
-      display: flex;
-      align-items: flex-start;
-      gap: 4px;
-      padding-top: 2px;
-      font-weight: 600;
-    }
-    li[finding] span[how-line] md-icon {
-      --md-icon-size: 13px;
-      flex: none;
-      margin-top: 1px;
-    }
 
     /* 설명으로 끝내지 않는다. 이 단추는 원본을 바꾸지 않고 모델러에 후보만 연다. */
     li[finding] button[preview-fix] {
@@ -332,6 +263,12 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
    * 화면이 없는 단추를 그리면 눌러도 아무 일이 없다.
    */
   @property({ type: String }) format: 'v2' | 'v3' = 'v2'
+  /**
+   * 행의 타입. 판정 하나(`type-is-placeholder`)가 이것을 본다 — V3 자산은 타입을 원본에 적지 않아서, 타입을 바꾸면
+   * 원본도 dirty 도 그대로다. 그래서 이 값이 바뀌면 판정을 다시 묻는다. 안 그러면 타입을 정한 뒤에도 「임시 타입」
+   * 판정이 남아 발행 단추가 잠긴 채다.
+   */
+  @property({ type: String }) figureType?: string
   /** 직전 발행판의 기준 상자. 외형 변화 안내에서 X·Z 복원 선택지에만 쓴다. */
   @property({ attribute: false }) releasedBase?: { x: number; y: number; z: number }
 
@@ -354,7 +291,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       저장이 끝난 순간(dirty 가 풀림) 정본이 바뀌었으니 판정을 다시 묻는다. 저작 중(dirty)에는
       묻지 않는다 — 서버에 있는 것은 저장 전 정본이라, 그 답은 화면에 있는 것과 다른 것을 말한다.
     */
-    if (changes.has('figureId') || changes.has('dirty')) {
+    if (changes.has('figureId') || changes.has('dirty') || changes.has('figureType')) {
       void this.inspect()
     }
   }
@@ -474,17 +411,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
    * 준다 — 화면이 문장을 지으면 서버가 거절할 때와 다른 말을 하게 된다.
    */
   private renderFinding(finding: FigureGateFinding, blocking: boolean) {
-    return html`
-      <li finding ?blocking=${blocking}>
-        <span msg>${finding.message}</span>
-        ${finding.at ? html`
-          <details affected>
-            <summary>${i18next.t('figure.text.show-affected-parts')}</summary>
-            <code where>${finding.at}</code>
-          </details>
-        ` : 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}
+    return renderGateFinding(finding, blocking, html`
         ${this.offersFit(finding.code)
           ? html`<button fit-base @click=${() => this.fitBase()}>
               ${i18next.t('figure.button.fit-base-to-parts')}
@@ -522,8 +449,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
             ${i18next.t('figure.button.apply-recommended-fix')}
           </button>
         ` : nothing}
-      </li>
-    `
+    `)
   }
 
   /**

package/client/modeller/figure-v3-verdict.ts

@@ -0,0 +1,247 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { parseV3Asset, v3CostOf } from '@hatiolab/figure-model'
+
+import { inspectFigureDraft } from '../graphql/index.js'
+import type { FigureInspection } from '../types.js'
+import { gateFindingStyles, renderGateFinding } from './gate-findings.js'
+import { capacityFrom, MEASURED } from './scene-budget.js'
+import type { FigureCapacity } from './scene-budget.js'
+
+/** How long an edit settles before the server is asked again. One question per pause, not one per keystroke. */
+export const VERDICT_SETTLE_MS = 400
+
+/**
+ * 판정 — the V3 modeller's verdict while editing (parity row ①).
+ *
+ * The V2 modeller shows, as the author edits, how many of the figure fit on one screen and what would stop it
+ * being published. The V3 page showed neither: the author learned what blocked a release only after saving, in the
+ * release panel. This tab answers both from the source being edited.
+ *
+ * The count is computed here, from `v3CostOf` and the same `capacityFrom` the catalogue cards use, so the tab and
+ * the card cannot disagree. The findings are not: they come from the server's release door (`inspectFigureDraft`),
+ * the same door and the same sentences as the release panel. A second judgement on the screen would say something
+ * different the first time either changed.
+ *
+ * No grade. V2's grade measures V2 reuse; nothing measures it for V3, so the tab shows no letter rather than one
+ * nothing computed.
+ */
+@customElement('figure-v3-verdict')
+export class FigureV3Verdict extends localize(i18next)(LitElement) {
+  static styles = [
+    gateFindingStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        padding: 12px;
+        overflow: auto;
+        font-size: 0.76rem;
+        color: var(--md-sys-color-on-surface);
+      }
+      section > h3 {
+        margin: 0 0 6px 0;
+        font-size: var(--ui-t-micro, 11px);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      p {
+        margin: 4px 0 0;
+      }
+      p[lead],
+      p[basis],
+      p[quiet] {
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      }
+      div[count] {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+      }
+      span[capacity] {
+        font-size: 2.1rem;
+        font-weight: 800;
+        line-height: 1;
+        letter-spacing: -0.01em;
+        color: var(--md-sys-color-primary);
+      }
+      span[unit] {
+        font-size: 0.9rem;
+        font-weight: 600;
+        color: var(--md-sys-color-primary);
+      }
+      p[clear] {
+        color: var(--md-sys-color-primary);
+        font-weight: 600;
+      }
+      p[failed] {
+        color: var(--md-sys-color-error);
+      }
+      button[fit] {
+        align-self: flex-start;
+        margin-top: 4px;
+        padding: 4px 10px;
+        font: inherit;
+        color: var(--md-sys-color-on-secondary-container);
+        background: var(--md-sys-color-secondary-container);
+        border: none;
+        border-radius: 999em;
+        cursor: pointer;
+      }
+    `
+  ]
+
+  /** The source being edited, serialised. Every change of it is a new question. */
+  @property({ type: String }) source?: string
+  /** The saved row, if any — the server reads its type and last release from it. */
+  @property({ type: String }) figureId?: string
+  /** Changing the type changes the verdict (a temporary type is refused), so it is a reason to ask again. */
+  @property({ type: String }) figureType?: string
+
+  @state() private capacity?: FigureCapacity
+  /** Bodies in the asset, drawn or hidden. With none there is nothing to fit the space to, so the button is not offered. */
+  @state() private bodies = 0
+  @state() private inspection?: FigureInspection
+  @state() private failure = ''
+  @state() private asking = false
+
+  private timer?: ReturnType<typeof setTimeout>
+  /** Answers can come back out of order; only the newest question's answer is shown. */
+  private asked = 0
+
+  disconnectedCallback() {
+    clearTimeout(this.timer)
+    super.disconnectedCallback()
+  }
+
+  updated(changes: Map<string, unknown>) {
+    if (changes.has('source')) this.measure()
+    if (changes.has('source') || changes.has('figureId') || changes.has('figureType')) this.schedule()
+  }
+
+  private measure() {
+    let capacity: FigureCapacity | undefined
+    let bodies = 0
+    try {
+      const cost = this.source ? v3CostOf(parseV3Asset(this.source)) : undefined
+      capacity = cost ? capacityFrom(cost.groups, cost.triangles) : undefined
+      bodies = cost ? cost.groups + cost.hidden : 0
+    } catch {
+      /* A source the format refuses has no count; the server's finding below says why. */
+      capacity = undefined
+    }
+    this.capacity = capacity
+    this.bodies = bodies
+    this.dispatchEvent(new CustomEvent('capacity-changed', { detail: { instances: capacity?.instances } }))
+  }
+
+  private schedule() {
+    clearTimeout(this.timer)
+    if (!this.source) {
+      this.inspection = undefined
+      return
+    }
+    this.timer = setTimeout(() => this.ask(), VERDICT_SETTLE_MS)
+  }
+
+  private async ask() {
+    const question = ++this.asked
+    const source = this.source!
+    this.asking = true
+    try {
+      const inspection = await inspectFigureDraft(source, this.figureId)
+      if (question !== this.asked) return
+      this.inspection = inspection
+      this.failure = ''
+    } catch (error) {
+      if (question !== this.asked) return
+      /* The server's reason as it gave it — the screen does not make one up. The last answer is dropped with it. */
+      this.inspection = undefined
+      this.failure = error instanceof Error ? error.message : String(error)
+    } finally {
+      if (question === this.asked) this.asking = false
+    }
+  }
+
+  render() {
+    return html`${this.renderCount()} ${this.renderGate()}`
+  }
+
+  private renderCount() {
+    const capacity = this.capacity
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.maturity')}</h3>
+        <p lead>${i18next.t('figure.text.how-many-fit')}</p>
+        ${capacity
+          ? html`
+              <div count>
+                <span capacity>${capacity.instances.toLocaleString()}</span>
+                <span unit>${i18next.t('figure.text.instances-unit')}</span>
+              </div>
+              <p basis>
+                ${i18next.t('figure.text.bound-by-' + capacity.bound, {
+                  per: capacity.per.toLocaleString(),
+                  budget: capacity.budget.toLocaleString()
+                })}
+                <em>
+                  ${capacity.bound === 'groups'
+                    ? i18next.t('figure.text.budget-measured-on', { gpu: MEASURED.gpu, on: MEASURED.on })
+                    : i18next.t('figure.text.budget-not-measured-yet')}
+                </em>
+              </p>
+            `
+          : html`<p quiet>${i18next.t('figure.text.maturity-blocked-no-parts')}</p>`}
+      </section>
+    `
+  }
+
+  private renderGate() {
+    const findings = this.inspection?.findings ?? []
+    const blocking = findings.filter(finding => finding.blocking)
+    const advisory = findings.filter(finding => !finding.blocking)
+    return html`
+      <section>
+        <h3>${i18next.t('figure.label.release-verdict')}</h3>
+        ${this.failure
+          ? html`<p failed role="alert">${i18next.t('figure.text.verdict-not-received', { reason: this.failure })}</p>`
+          : !this.inspection
+            ? html`<p quiet>${i18next.t(this.asking ? 'figure.text.verdict-asking' : 'figure.text.verdict-waiting')}</p>`
+            : blocking.length
+              ? html`<p>${i18next.t('figure.text.cannot-release-now')}</p>`
+              : html`<p clear>${i18next.t('figure.text.nothing-blocks-release')}</p>`}
+        ${blocking.length
+          ? html`<ul gate>
+              <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
+              ${blocking.map(finding => renderGateFinding(finding, true, this.actionsFor(finding.code)))}
+            </ul>`
+          : nothing}
+        ${advisory.length
+          ? html`<ul gate>
+              <li head quiet>${i18next.t('figure.text.does-not-block')}</li>
+              ${advisory.map(finding => renderGateFinding(finding, false))}
+            </ul>`
+          : nothing}
+      </section>
+    `
+  }
+
+  /** The same way out the release panel offers for the same two findings — declare the space from the parts. */
+  private actionsFor(code: string) {
+    if (code !== 'part-outside-occupancy' && code !== 'occupancy-undeclared') return nothing
+    /* A new figure with no parts is refused as undeclared too, but fitting needs parts to measure (seen 2026-09-24). */
+    if (!this.bodies) return nothing
+    return html`<button fit @click=${this.fit}>${i18next.t('figure.button.fit-base-to-parts')}</button>`
+  }
+
+  private fit = () => {
+    this.dispatchEvent(new CustomEvent('fit-base-to-parts', { bubbles: true, composed: true }))
+  }
+}

package/client/modeller/gate-findings.ts

@@ -0,0 +1,105 @@
+import { css, html, nothing, type TemplateResult } from 'lit'
+import { i18next } from '@operato/i18n'
+
+import type { FigureGateFinding } from '../types.js'
+
+/**
+ * One release-gate finding as a line on screen — the measured fact, where, why it matters, and what to change.
+ *
+ * Two places draw these: the release panel (`figure-history-panel`) and the V3 modeller's verdict while editing
+ * (`figure-v3-verdict`). They show the same findings from the same server door, so they draw them one way; a copy
+ * in each would drift the first time one of them is touched. The caller passes its own action buttons, because
+ * what can be done about a finding depends on the screen it is shown on.
+ */
+export function renderGateFinding(finding: FigureGateFinding, blocking: boolean, actions: unknown = nothing): TemplateResult {
+  return html`
+    <li finding ?blocking=${blocking}>
+      <span msg>${finding.message}</span>
+      ${finding.at
+        ? html`
+            <details affected>
+              <summary>${i18next.t('figure.text.show-affected-parts')}</summary>
+              <code where>${finding.at}</code>
+            </details>
+          `
+        : 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}
+      ${actions}
+    </li>
+  `
+}
+
+export const gateFindingStyles = css`
+    ul[gate] {
+      margin: var(--spacing-small, 6px) 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+
+    li[head] {
+      font: var(--label-font, inherit);
+      font-size: 0.72rem;
+      color: var(--md-sys-color-error);
+    }
+
+    li[head][quiet] {
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+    }
+
+    li[finding] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 3px;
+      padding: 3px 6px;
+      font-size: 0.72rem;
+      line-height: 1.5;
+      color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-surface-container);
+      border-radius: 4px;
+    }
+
+    li[finding][blocking] {
+      color: var(--md-sys-color-on-error-container, var(--md-sys-color-on-surface));
+      background-color: var(--md-sys-color-error-container);
+    }
+
+    li[finding] code[where] {
+      font-family: var(--mono-font, monospace);
+      font-size: 0.68rem;
+      opacity: 0.85;
+    }
+
+    li[finding] details[affected] {
+      width: 100%;
+      color: inherit;
+    }
+
+    li[finding] details[affected] summary {
+      cursor: pointer;
+      font-weight: 600;
+    }
+
+    /* 왜 나쁜지는 곁글로 — 읽어야 하지만 잰 것보다 먼저 눈에 들 필요는 없다 */
+    li[finding] span[why-line] {
+      opacity: 0.8;
+    }
+
+    /* 무엇을 바꾸면 되나 — 이 줄이 실제로 사람이 할 일이다. 연장 표를 달아 눈에 걸리게 한다 */
+    li[finding] span[how-line] {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      padding-top: 2px;
+      font-weight: 600;
+    }
+    li[finding] span[how-line] md-icon {
+      --md-icon-size: 13px;
+      flex: none;
+      margin-top: 1px;
+    }
+`