@things-factory/figure-ui 10.1.38 → 10.1.40

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;
+    }
+`

package/client/modeller/v3-canvas.ts

@@ -13,7 +13,12 @@ export class FigureV3Canvas extends LitElement {
       min-width: 0;
       min-height: 0;
       position: relative;
-      background: #eef2f4;
+      /*
+        The working board is one step above the surface in both themes (UX, 2026-09-24): surface-container is 238
+        in light and 31 in dark. The 3D background is read from this same value (paintBackground), so the
+        first paint and the scene agree and there is no flash between them.
+      */
+      background: var(--md-sys-color-surface-container);
     }
     canvas {
       display: block;
@@ -25,7 +30,7 @@ export class FigureV3Canvas extends LitElement {
       inset: 45% 1rem auto;
       text-align: center;
       pointer-events: none;
-      color: #526773;
+      color: var(--md-sys-color-on-surface-variant);
     }
   `
   @property({ attribute: false }) parts: V3RenderPart[] = []
@@ -37,6 +42,7 @@ export class FigureV3Canvas extends LitElement {
   private readonly camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000000)
   private controls?: OrbitControls
   private observer?: ResizeObserver
+  private themeObserver?: MutationObserver
   private initialized = false
   private contextAtRender = ''
   render() {
@@ -55,7 +61,16 @@ export class FigureV3Canvas extends LitElement {
     const canvas = this.renderRoot.querySelector('canvas')!
     this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true })
     this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
-    this.scene.background = new THREE.Color('#eef2f4')
+    this.paintBackground()
+    /*
+      The app switches theme by the body's class (light · dark). Reading the colour once at start left a light
+      board in the middle of a dark screen after every switch (seen 2026-09-24), so it is read again then.
+    */
+    this.themeObserver = new MutationObserver(() => {
+      this.paintBackground()
+      this.draw()
+    })
+    this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })
     this.scene.add(this.group, new THREE.HemisphereLight(0xffffff, 0x62717d, 2.5))
     const light = new THREE.DirectionalLight(0xffffff, 3)
     light.position.set(1, 2, 3)
@@ -113,6 +128,14 @@ export class FigureV3Canvas extends LitElement {
     this.controls?.update()
     this.draw()
   }
+  /**
+   * The scene's background, taken from the host's computed background — the token resolved and normalised to
+   * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.
+   */
+  private paintBackground() {
+    const colour = getComputedStyle(this).backgroundColor
+    if (colour && colour !== 'rgba(0, 0, 0, 0)' && colour !== 'transparent') this.scene.background = new THREE.Color(colour)
+  }
   private draw = () => {
     if (this.renderer) this.renderer.render(this.scene, this.camera)
   }
@@ -134,6 +157,7 @@ export class FigureV3Canvas extends LitElement {
   }
   disconnectedCallback() {
     this.observer?.disconnect()
+    this.themeObserver?.disconnect()
     this.controls?.dispose()
     disposeV3Meshes(this.group)
     this.renderer?.dispose()

package/client/modeller/v3-editor.ts

@@ -42,6 +42,12 @@ export class FigureV3Editor extends LitElement {
       flex-direction: column;
       min-height: 0;
       height: 100%;
+      /*
+        The editor folds by the width it is given, not the window's. The rail (208 open, 56 closed) and the page's
+        320 side take their share first, so a window rule was wrong whenever either was there: at 945 with the rail
+        open the editor had 417 and still drew its 660 of columns, over the side (UX ruling, 2026-09-24).
+      */
+      container-type: inline-size;
       font: 13px sans-serif;
       color: var(--md-sys-color-on-surface, #22343f);
     }
@@ -50,7 +56,7 @@ export class FigureV3Editor extends LitElement {
       align-items: center;
       gap: 8px;
       padding: 10px;
-      border-bottom: 1px solid #d4dde2;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant);
       flex-wrap: wrap;
     }
     main {
@@ -65,10 +71,10 @@ export class FigureV3Editor extends LitElement {
       background: var(--md-sys-color-surface, #fff);
     }
     aside:first-child {
-      border-right: 1px solid #d4dde2;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
     }
     aside:last-child {
-      border-left: 1px solid #d4dde2;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
     }
     h3 {
       font-size: var(--ui-t-body, 13px);
@@ -83,7 +89,7 @@ export class FigureV3Editor extends LitElement {
       font: inherit;
       box-sizing: border-box;
       height: 34px;
-      border: 1px solid #cbd5dc;
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: 6px;
       background: var(--md-sys-color-surface, #fff);
       color: inherit;
@@ -98,8 +104,9 @@ export class FigureV3Editor extends LitElement {
       cursor: default;
     }
     button[aria-pressed='true'] {
-      background: #d6edf0;
-      border-color: #337783;
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+      border-color: var(--md-sys-color-primary);
     }
     .parts {
       display: grid;
@@ -122,25 +129,46 @@ export class FigureV3Editor extends LitElement {
     }
     .error {
       padding: 10px;
-      background: #fff0eb;
-      color: #922716;
+      background: var(--md-sys-color-error-container);
+      color: var(--md-sys-color-on-error-container);
       white-space: pre-wrap;
     }
     .status {
       margin-left: auto;
     }
     .hint {
-      color: #637783;
+      color: var(--md-sys-color-on-surface-variant);
       line-height: 1.5;
     }
-    @media (max-width: 800px) {
+    /* 660 and over: parts | canvas | inputs. Below that the sum of the columns' least widths no longer fits. */
+    @container (max-width: 659px) {
       main {
         grid-template-columns: 140px minmax(160px, 1fr);
       }
       aside:last-child {
         grid-column: 1/-1;
         max-height: 260px;
-        border-top: 1px solid #d4dde2;
+        border-left: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+    }
+    /* Under 420: one column. The canvas first — seeing what is being made comes before the lists — and main scrolls. */
+    @container (max-width: 419px) {
+      main {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(240px, 45%);
+        grid-auto-rows: auto;
+        overflow-y: auto;
+      }
+      figure-v3-canvas {
+        order: -1;
+      }
+      aside:first-child {
+        border-right: none;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+      }
+      aside:last-child {
+        max-height: none;
       }
     }
   `

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

@@ -0,0 +1,53 @@
+import { parseV3Asset } from '@hatiolab/figure-model'
+import type { V3Asset, V3Face } from '@hatiolab/figure-model'
+
+/*
+ * What the V3 properties tab reads, kept apart from the element so it can be tested without a browser.
+ */
+
+export type Placement = 'floor' | 'ceiling' | 'center'
+
+/** What the properties tab reads off the asset. Absent parts of the asset read as absent, never as a default. */
+export interface V3FigureFacts {
+  name: string
+  parts: string[]
+  declared: boolean
+  placement?: Placement
+  mounting?: { part: string; face: V3Face }
+}
+
+/**
+ * The asset's own facts, as the properties tab shows them.
+ *
+ * The mounting face is read back from the feature `set-mounting-face` writes (`<part>.mount.<face>`): the asset
+ * records the face only as that node, so this is where the screen learns which one is chosen. Parts are the placed
+ * bodies (`place@1`), in the order the model lists them.
+ */
+export function v3FigureFacts(source: string): V3FigureFacts {
+  const asset = parseV3Asset(source) as V3Asset & { document: { model: { nodes: Array<{ id: string; op: string }> } } }
+  const parts = asset.document.model.nodes.filter(node => node.op === 'place@1').map(node => node.id)
+  const feature = (asset.occupancy?.contact as { surface?: { feature?: string } } | undefined)?.surface?.feature
+  const found = feature?.match(/^(.+)\.mount\.(left|right|bottom|top|back|front)\.value$/)
+  return {
+    name: asset.name,
+    parts,
+    declared: !!asset.occupancy,
+    placement: asset.occupancy?.placement as Placement | undefined,
+    mounting: found ? { part: found[1], face: found[2] as V3Face } : undefined
+  }
+}
+
+/**
+ * A tag line as a list — the V2 inspector's rule: split on commas, drop a leading `#`, keep each once. An empty
+ * line is an empty list, so an author can clear every tag.
+ */
+export function tagsOf(raw: string): string[] {
+  return [
+    ...new Set(
+      raw
+        .split(',')
+        .map(one => one.trim().replace(/^#+/, '').trim())
+        .filter(one => one.length > 0)
+    )
+  ]
+}

package/client/modeller/v3-occupancy.ts

@@ -12,11 +12,15 @@ import { parseV3Asset, proposeV3Occupancy, type V3AuthoringAction } from '@hatio
  * 막는다. 배치 기준은 이미 선언된 것을 지키고, 처음 선언하는 도형은 바닥에 선다고 둔다 — 새로 만든 도형의
  * 모델러 기본이 바닥이다.
  */
-export function occupancyFromParts(source: string): V3AuthoringAction {
+export function occupancyFromParts(
+  source: string,
+  /** A different face to place it by — the properties tab's choice. Absent keeps the declared one. */
+  placement?: 'floor' | 'ceiling' | 'center'
+): Extract<V3AuthoringAction, { kind: 'declare-occupancy' }> {
   const asset = parseV3Asset(source)
   return {
     kind: 'declare-occupancy',
     proposal: proposeV3Occupancy(asset, { over: 'range' }),
-    placement: asset.occupancy?.placement ?? 'floor'
+    placement: placement ?? asset.occupancy?.placement ?? 'floor'
   }
 }