@things-factory/figure-ui 10.1.168 → 10.1.170

package/client/figure-assistant.ts

@@ -12,10 +12,19 @@ import { registerProposalHandler } from '@things-factory/ai-assistant/dist-clien
 
 import { fetchProposalOutcome } from './graphql/index.js'
 import { modellerPathOf } from './modeller/modeller-route.js'
-import { pendNewFigure, runFigureProposal, type FigureApplyDetail } from './modeller/ai-proposal.js'
+import { pendNewFigure, proposalOutcomeFrom, runFigureProposal, type FigureApplyDetail } from './modeller/ai-proposal.js'
 
 export const FIGURE_CANDIDATE_TOOL = 'proposeFigureCandidate'
 
+/**
+ * The dock's "check the result" of a figure proposal, on every screen that offers its card: what the server recorded of
+ * its save (ADR-0097 §5.6 item 5). The modeller asks it, and so does an app's home where a new figure's card is made --
+ * there it was missing, and a card cut off by a reload stayed "no answer" for good (figure audit 2026-10-16 N8).
+ */
+export async function figureProposalOutcome(proposalKey: string) {
+  return proposalOutcomeFrom(await fetchProposalOutcome(proposalKey), (key, params) => i18next.t(key, params))
+}
+
 registerProposalHandler(FIGURE_CANDIDATE_TOOL, async (proposal, context) => {
   const outcome = await runFigureProposal(
     proposal,

package/client/modeller/affected-parts.ts

@@ -0,0 +1,11 @@
+/**
+ * The parts a release finding points at, by the author's names. The server's `at` lists the first word of each path it
+ * could not prove -- a part's name, or a section of the format such as 「occupancy」 -- and the screen showed it as it came
+ * (「occupancy · roller-row-1-roller」, user 2026-10-16). Only the figure's own part names are kept.
+ */
+export function affectedPartsOf(at: string, parts: readonly string[]): string[] {
+  return at
+    .split('·')
+    .map(word => word.trim())
+    .filter(word => parts.includes(word))
+}

package/client/modeller/ai-proposal.ts

@@ -7,7 +7,7 @@
  */
 import type { FigureProposalStep } from '@hatiolab/figure-model'
 import type { FigureProductSession } from './product-session.js'
-import { clipLossOf, refusalRecordOf, type FigureRefusalRecord } from './refusals.js'
+import { clipLossOf, editRefusalOf, refusalRecordOf, type FigureRefusalRecord } from './refusals.js'
 
 /** What the card carries, as `proposeFigureCandidate` returned it. */
 export interface FigureProposalCard {
@@ -28,6 +28,8 @@ export interface FigureApplyDetail extends FigureRefusalRecord {
   key?: string
   steps: FigureProposalStep[]
   create: boolean
+  /** The figure a revision was made for: the one the model read. */
+  figureId?: string
   context?: string
   revision?: number
   applied?: boolean
@@ -82,7 +84,8 @@ function refused(refusal: FigureRefusalRecord & { error?: string }, say: Say): F
         ? (error ?? '')
         : clips
           ? say('figure.text.proposal-would-drop-clips', { clips: clips.map(c => c.clip).join(', ') })
-          : say('figure.text.proposal-refused', { reason: error ?? '' })
+          : /* A refusal with a code is said from it, as the modeller says an edit it refuses; never its message (audit N6). */
+            say('figure.text.proposal-refused', { reason: code ? editRefusalOf(refusal, (key, params) => say(key, params)) : (error ?? '') })
   return { verdict: 'refused', errorCode: code ?? 'refused', note }
 }
 
@@ -99,6 +102,12 @@ export function takeFigureOffer(
 ): boolean {
   const view = session.read()
   if (detail.create && onSavedFigure) return false
+  /*
+    A revision is for the figure the model read; with another open it is left untaken, and the handler says it needs that
+    figure open. The version is no proof of the figure: two figures opened in two page loads stood at the same one
+    (figure audit 2026-10-16 N3).
+  */
+  if (!detail.create && typeof detail.figureId === 'string' && detail.figureId !== (view.id ?? view.creationId)) return false
   if (detail.create && view.dirty) {
     /* A new figure already being made is the person's; a proposal does not go on top of it or replace it. */
     detail.applied = false
@@ -128,7 +137,7 @@ export function takeFigureOffer(
 
 export async function runFigureProposal(card: FigureProposalCard, target: FigureProposalTarget, say: Say): Promise<FigureProposalOutcome> {
   const steps = card?.steps
-  if (!Array.isArray(steps) || !steps.length) return { verdict: 'unavailable', errorCode: 'no-steps' }
+  if (!Array.isArray(steps) || !steps.length) return { verdict: 'unavailable', errorCode: 'no-steps', note: say('figure.text.proposal-empty') }
   const create = card.create === true
   /*
     A new figure's proposal already saved into a figure is not made again: that figure is opened (ADR-0061 decision 3,
@@ -147,7 +156,7 @@ export async function runFigureProposal(card: FigureProposalCard, target: Figure
     note: say('figure.text.proposal-applied', { n: String(steps.length) })
   })
 
-  const detail = target.offer({ key: card.key, steps, create, context: card.context, revision: card.revision })
+  const detail = target.offer({ key: card.key, steps, create, figureId: create ? undefined : card.figureId, context: card.context, revision: card.revision })
   if (detail.applied) return accepted()
   if (detail.applied === false) return refused(detail, say)
 
@@ -166,11 +175,14 @@ export async function runFigureProposal(card: FigureProposalCard, target: Figure
   modeller on a new figure; the page takes it once it has started that figure. Left untaken, it lapses -- a later new
   figure must not receive steps nobody is waiting for.
 */
-let pending: { steps: FigureProposalStep[]; key?: string; settle: (result: { applied: boolean; error?: string; code?: string }) => void } | undefined
+type Settle = (result: { applied: boolean; error?: string; code?: string }) => void
+let pending: { steps: FigureProposalStep[]; key?: string; settle: Settle; hold(): void; resume(): void } | undefined
 
 export function pendNewFigure(steps: FigureProposalStep[], key?: string, ms = 10_000): Promise<{ applied: boolean; error?: string; code?: string }> {
   pending?.settle({ applied: false, code: 'not-opened' })
   return new Promise(resolve => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const lapse = () => mine.settle({ applied: false, code: 'not-opened' })
     const mine = {
       steps,
       key,
@@ -178,17 +190,36 @@ export function pendNewFigure(steps: FigureProposalStep[], key?: string, ms = 10
         clearTimeout(timer)
         if (pending === mine) pending = undefined
         resolve(result)
+      },
+      hold: () => clearTimeout(timer),
+      resume: () => {
+        clearTimeout(timer)
+        timer = setTimeout(lapse, ms)
       }
     }
-    const timer = setTimeout(() => mine.settle({ applied: false, code: 'not-opened' }), ms)
+    mine.resume()
     pending = mine
   })
 }
 
+/**
+ * For a page about to ask the person whether to leave unsaved edits: the new figure waiting to open stops its clock
+ * while they answer -- an answer is no absent page (figure audit 2026-10-16 N4). Give it the answer: leaving runs the
+ * clock again for the page that opens; staying says now that it was not opened. Nothing waiting: undefined.
+ */
+export function askingToLeave(): ((leaving: boolean) => void) | undefined {
+  const waiting = pending
+  if (!waiting) return undefined
+  waiting.hold()
+  return leaving => {
+    if (pending !== waiting) return
+    if (leaving) waiting.resume()
+    else waiting.settle({ applied: false, code: 'not-opened' })
+  }
+}
+
 /** For the page, on a new figure it has just started: the steps waiting for it, and where to say how it went. */
-export function takePendingNewFigure():
-  | { steps: FigureProposalStep[]; key?: string; settle: (result: { applied: boolean; error?: string; code?: string }) => void }
-  | undefined {
+export function takePendingNewFigure(): { steps: FigureProposalStep[]; key?: string; settle: Settle } | undefined {
   const taken = pending
   pending = undefined
   return taken

package/client/modeller/canvas.ts

@@ -5,7 +5,7 @@ import { create, Model, niceGridStep } from '@hatiolab/things-scene'
 import type { GizmoReach } from './gizmo.js'
 import type { FigureRenderPart } from './renderer.js'
 import { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from '@things-factory/figure-viewer/dist-client/figure-view.js'
-import { boardFor, changedKeys, componentOf, gizmoResultOf, type Board, type ScaleAnchor } from './stage-model.js'
+import { boardFor, changedKeys, componentOf, gizmoResultOf, needsRefit, type Board, type ScaleAnchor } from './stage-model.js'
 import { JOINT_FAN } from './joint-fan.js'
 import { SLOT_MARK } from './slot-layout-host.js'
 import { PREVIEW, TARGET_FACE } from './command-preview.js'
@@ -48,6 +48,9 @@ interface SceneHandle {
   root?: SceneLayer
 }
 
+/* How long the figure stands still before the camera judges whether to follow it. */
+const REFIT_SETTLE_MS = 400
+
 /* The fan's colour when the figure's palette names no accent. */
 const FAN_COLOUR = '#ff8a00'
 
@@ -103,6 +106,9 @@ export class FigureCanvas extends LitElement {
 
   private scene?: SceneHandle
   private board?: Board & { depth: number }
+  /** The figure's reach when the view was last fitted to it. */
+  private fittedFor?: Board & { depth: number }
+  private refitTimer?: ReturnType<typeof setTimeout>
   private standingFor?: string
   private watcher?: ResizeObserver
   /** Set while this canvas writes to components, so the scene's echo of it is not taken for a drag. */
@@ -134,6 +140,7 @@ export class FigureCanvas extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback()
+    clearTimeout(this.refitTimer)
     this.watcher?.disconnect()
     this.watcher = undefined
     this.teardown()
@@ -162,6 +169,7 @@ export class FigureCanvas extends LitElement {
 
   /** The whole figure in view: the board's fit, then the 3D camera's own. */
   fit() {
+    this.fittedFor = boardFor(this.parts)
     this.scene?.fit?.('ratio')
     this.scene?.root?.fitCameraToModel?.()
   }
@@ -186,6 +194,12 @@ export class FigureCanvas extends LitElement {
       */
       if (outgrown) this.grow(needed)
       this.sync()
+      /*
+        Grown or shrunk far past the view (a size typed in): the camera follows, once the figure has settled. A value is
+        drawn as it is typed -- 「3」, 「30」, 「300」 on the way to 3000 -- so the reach is judged after the last change.
+      */
+      clearTimeout(this.refitTimer)
+      if (this.parts.length) this.refitTimer = setTimeout(() => needsRefit(this.fittedFor, boardFor(this.parts)) && this.fit(), REFIT_SETTLE_MS)
       return
     }
     this.teardown()

package/client/modeller/editor-styles.ts

@@ -3,6 +3,7 @@ import { css } from 'lit'
 /** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */
 export const EditorStyles = css`
   :host {
+    position: relative;
     display: flex;
     flex-direction: column;
     min-height: 0;
@@ -16,6 +17,7 @@ export const EditorStyles = css`
      fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */
   ox-canvas-bar button[mode] {
     height: 28px;
+    border: 1px solid transparent;
     padding: 0 10px;
     border-radius: 999em;
     border-color: transparent;
@@ -250,6 +252,63 @@ export const EditorStyles = css`
   [off] {
     display: none !important;
   }
+  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */
+  div[group-fields] {
+    display: grid;
+    gap: 8px;
+  }
+  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */
+  section[more] > details > summary,
+  section[capability] > details > summary {
+    padding: 0;
+  }
+  section[more] > details > summary > h3,
+  section[capability] > details > summary > h3 {
+    margin: 0;
+  }
+  div[more-body] {
+    display: grid;
+    gap: 16px;
+    margin-top: 12px;
+  }
+  /*
+    The view settings and the release history, opened from the bar over the right of the work: neither is about the
+    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).
+  */
+  :host {
+    position: relative;
+  }
+  div[bar-overlay-panel] {
+    position: absolute;
+    top: var(--figure-bar-height, 44px);
+    right: 8px;
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    width: min(360px, calc(100% - 16px));
+    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);
+    background: var(--md-sys-color-surface-container-lowest);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 8px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
+  }
+  div[overlay-head] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 8px 8px 12px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  }
+  div[overlay-head] h3 {
+    margin: 0;
+  }
+  div[overlay-head] button[quiet] {
+    margin-left: 0;
+  }
+  div[overlay-body] {
+    min-height: 0;
+    overflow: auto;
+  }
   /* Which part the panel speaks of. */
   div[subject] {
     position: sticky;
@@ -277,19 +336,52 @@ export const EditorStyles = css`
   div[subject-summary] small {
     color: var(--md-sys-color-on-surface-variant);
   }
+  /*
+    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one
+    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도
+    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).
+  */
   button {
     font: inherit;
     box-sizing: border-box;
+    color: inherit;
+    min-width: 0;
+    cursor: pointer;
+  }
+  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */
+  ox-canvas-bar button[release-blocked] {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
     height: 32px;
-    border: 1px solid var(--md-sys-color-outline-variant);
+    padding: 0 10px;
+    border: none;
     border-radius: 6px;
+    color: var(--md-sys-color-on-error-container);
+    background: var(--md-sys-color-error-container);
+  }
+  ox-canvas-bar button[release-blocked] md-icon {
+    --md-icon-size: 18px;
+  }
+  div[release-blockers] {
+    position: absolute;
+    top: 46px;
+    right: 8px;
+    z-index: 6;
+    width: min(340px, calc(100% - 16px));
+    padding: 8px 10px 10px;
+    box-sizing: border-box;
     background: var(--md-sys-color-surface);
-    color: inherit;
-    padding: 0 8px;
-    min-width: 0;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 8px;
+    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);
   }
-  button {
-    cursor: pointer;
+  ox-canvas-bar button[publish] {
+    height: 32px;
+    padding: 0 8px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: 6px;
+    background: var(--md-sys-color-surface);
   }
   button:disabled {
     opacity: 0.45;