@things-factory/figure-ui 10.1.68 → 10.1.70

package/client/modeller/v3-gizmo.ts

@@ -29,8 +29,8 @@ export interface GizmoReach {
   round?: { across: string[]; along: string[] }
 }
 
-/** Shapes whose first three arguments are the extent along X, Y and Z. */
-const BOXES = new Set(['box-shape@1', 'rounded-box@1'])
+/** Shapes whose first three arguments are the extent along X, Y and Z: a door frame's too (its width, height, depth). */
+const BOXES = new Set(['box-shape@1', 'rounded-box@1', 'portal-profile@2'])
 
 interface Node {
   id: string
@@ -138,3 +138,19 @@ export function gizmoChanges(part: string, reach: GizmoReach, result: GizmoResul
   }
   return changes
 }
+
+/**
+ * A height typed into its field keeps the part's bottom where it is, as the scale gizmo does (it anchors the opposite
+ * face): the part's own Y position moves by half the change. A post typed 2200 tall sank 933 mm under the floor
+ * (2026-09-26). Only for a part placed by its own numbers and standing unturned; otherwise its height is not up and down.
+ */
+export function keepBottomChanges(part: string, reach: GizmoReach, input: string, value: number, values: Record<string, number>): V3InputChange[] {
+  if (!reach.translate) return []
+  const height = reach.sizes?.[1] ?? reach.ownSizes?.[1] ?? reach.round?.along[0]
+  if (!height || height !== input) return []
+  if (AXES.some(axis => (values[`${part}.rotation.${axis}`] ?? 0) % 360 !== 0)) return []
+  const before = values[input],
+    y = values[`${part}.position.y`]
+  if (before === undefined || y === undefined || !Number.isFinite(value)) return []
+  return [{ kind: 'set-design', input: `${part}.position.y`, unit: 'mm', value: Math.round((y + (value - before) / 2) * 10) / 10 } as V3InputChange]
+}

package/client/modeller/v3-links.ts

@@ -1,4 +1,4 @@
-import { V3_FACES, v3ShapeFaces, v3PartsExtentOf, compileV3Graph, proposeV3Proportion, defaultInstanceSizeRange, foldInstanceSizeRange, v3AttachmentsOf, v3BindingsOf, v3InstanceSizeLimitsOf } from '@hatiolab/figure-model'
+import { V3_FACES, v3ShapeFaces, v3PartsExtentOf, compileV3Asset, compileV3Graph, proposeV3Proportion, defaultInstanceSizeRange, foldInstanceSizeRange, v3AttachmentsOf, v3BindingsOf, v3InstanceSizeLimitsOf } from '@hatiolab/figure-model'
 import type { V3SizeRange } from '@hatiolab/figure-model'
 import type { V3Asset, V3BindingPlace, V3Face, V3Joint } from '@hatiolab/figure-model'
 
@@ -122,7 +122,8 @@ export function canFollow(asset: V3Asset, part: string): boolean {
 export function followableAxes(asset: V3Asset, part: string): Axis[] {
   const shape = modelOf(asset).nodes.find(n => n.id === `${part}.shape`)
   if (!shape) return []
-  if (shape.op === 'box-shape@1' || shape.op === 'rounded-box@1') return [...AXES]
+  /* A door frame's first three measures are its width, height and depth, as a box's (figure-model portal-profile@2). */
+  if (shape.op === 'box-shape@1' || shape.op === 'rounded-box@1' || shape.op === 'portal-profile@2') return [...AXES]
   if (shape.op === 'cylinder-shape@1') return ['x', 'y']
   return []
 }
@@ -210,6 +211,74 @@ export function alignAxesOf(asset: V3Asset, part: string, target: { part: string
   return AXES.filter(axis => axis !== along).map(axis => ({ axis, edges: !twisted && OUTER[axis].every(f => theirs.has(f) && mine.has(f)) }))
 }
 
+/** The controls a part's showing can follow: the figure's state inputs, with their range and label. */
+export function visibilityControlsOf(asset: V3Asset): Array<{ id: string; unit: string; min: number; max: number; label: string }> {
+  const labels = (asset as unknown as { stateInputs?: Record<string, { label?: string }> }).stateInputs ?? {}
+  return modelOf(asset)
+    .inputs.filter(input => input.role === 'state')
+    .map(input => ({ id: input.id, unit: input.unit ?? '', min: input.min ?? 0, max: input.max ?? 1, label: labels[input.id]?.label || input.id }))
+}
+
+/** When the part is drawn (figure-model `set-visibility`): always (null), or while a control is at least a value. */
+export function shownWhenOf(asset: V3Asset, part: string): { input: string; atLeast: number } | null {
+  const look = asset.appearance.find(one => one.target === part) as { visibility?: string } | undefined
+  if (!look?.visibility) return null
+  const m = modelOf(asset)
+  const node = m.nodes.find(n => n.op === 'at-least@1' && Object.values(n.outputs).includes(look.visibility!))
+  const at = node && m.constants.find(c => c.id === node.args[1])
+  return node && at ? { input: node.args[0]!, atLeast: at.value } : null
+}
+
+/** Whether `part` hangs from `from`, through any number of fastenings. */
+export function hangsFrom(asset: V3Asset, part: string, from: string): boolean {
+  const seen = new Set<string>()
+  for (let at: string | undefined = part; at && !seen.has(at); ) {
+    seen.add(at)
+    const j = ((asset.joints ?? []) as V3Joint[]).find(o => o.body1.part === at)
+    at = j && 'part' in j.body0 ? (j.body0 as { part: string }).part : undefined
+    if (at === from) return true
+  }
+  return false
+}
+
+/**
+ * The alignment that keeps the part where it stands when it is fastened: on each axis across the face, its distance
+ * from the target's centre (the plane's is the origin). Fastening used to centre it -- a door set 100 mm in front of
+ * its frame slid into it (2026-09-26). Left centred where it already is, and where the target stands turned.
+ */
+export function placeKeptOf(
+  asset: V3Asset,
+  part: string,
+  target: { part: string; face: string } | 'plane',
+  twisted = false
+): { align: Partial<Record<Axis, Alignment>>; alignMm: Partial<Record<Axis, number>> } {
+  const kept = { align: {} as Partial<Record<Axis, Alignment>>, alignMm: {} as Partial<Record<Axis, number>> }
+  let geometry
+  try {
+    geometry = compileV3Asset(asset).evaluate().geometry as unknown as Array<{ id: string; pose?: { r: number[][]; t: number[] } }>
+  } catch {
+    return kept
+  }
+  const poseOf = (id: string) => geometry.find(g => g.id === id)?.pose
+  const mine = poseOf(part)
+  if (!mine) return kept
+  let centre = [0, 0, 0]
+  if (target !== 'plane') {
+    const theirs = poseOf(target.part)
+    const upright = theirs?.r.every((row, i) => row.every((v, j) => Math.abs(v - (i === j ? 1 : 0)) < 1e-9))
+    if (!theirs || !upright) return kept
+    centre = theirs.t
+  }
+  for (const { axis } of alignAxesOf(asset, part, target, twisted)) {
+    const k = AXES.indexOf(axis)
+    const off = Math.round((mine.t[k]! - centre[k]!) * 10) / 10
+    if (Math.abs(off) < 0.5) continue
+    kept.align[axis] = 'mm'
+    kept.alignMm[axis] = off
+  }
+  return kept
+}
+
 /** The `align` of an attach command from the form's choices: only the axes across that face, and centred ones left out. */
 export function alignOf(
   asset: V3Asset,

package/client/modeller/v3-palette.ts

@@ -39,7 +39,8 @@ export function paletteRecipe(kind: V3PaletteKind, id: string): V3PrimitiveCreat
         id,
         position: { x: 0, y: 0, z: 0 },
         kind: 'portal',
-        dimensions: { left: -100, right: 100, bottom: 0, top: 200, openingLeft: -70, openingRight: 70, openingTop: 170, depth: 30 }
+        /* A door frame at a door's size, as a wall is a wall's: its width, height, depth and the jambs' and head's thickness. */
+        dimensions: { width: 1000, height: 2200, depth: 150, jamb: 100, head: 100 }
       }
   }
 }

package/client/modeller/v3-product-session.ts

@@ -120,6 +120,14 @@ export function createV3ProductSession(store: V3ProductStore) {
       writable()
       return workspace.applyProposal({ origin: 'ai', context, expectedRevision, steps })
     },
+    /**
+     * A recipe put in by the person (ADR-0095): its resolved commands, as one step of the history, on the version open
+     * now. The same path as a proposal; the person is its origin.
+     */
+    applyRecipe(steps: readonly V3ProposalStep[]) {
+      const at = writable()
+      return workspace.applyProposal({ origin: 'ui', context: at.context, expectedRevision: at.expectedRevision, steps })
+    },
     add(part: V3PrimitiveCreation) {
       return workspace.addPrimitive({ ...writable(), part })
     },

package/client/modeller/v3-recipes.ts

@@ -0,0 +1,69 @@
+import type { V3Recipe, V3RecipeParam, V3RecipeValue } from '@hatiolab/figure-model'
+
+/*
+ * The recipe section's rules (ADR-0095), kept apart from the element so they can be tested without a browser.
+ */
+
+/** A recipe's words in the language on screen: that language, else English, else the first it has. */
+export function recipeWord(words: Record<string, string> | undefined, language: string): string {
+  if (!words) return ''
+  return words[language] ?? words[language.split('-')[0]!] ?? words.en ?? Object.values(words)[0] ?? ''
+}
+
+/** The recipes as the server gave them, parsed; a row that is not a recipe is left out rather than breaking the list. */
+export function recipesOf(rows: ReadonlyArray<{ source: string }>): V3Recipe[] {
+  const out: V3Recipe[] = []
+  for (const row of rows) {
+    try {
+      const recipe = JSON.parse(row.source)
+      if (recipe && typeof recipe.name === 'string' && Array.isArray(recipe.steps)) out.push(recipe)
+    } catch {
+      /* not a recipe */
+    }
+  }
+  return out
+}
+
+/** Whether a recipe can be put in now: one for a part needs a part chosen. */
+export function recipeReady(recipe: Pick<V3Recipe, 'target'>, selected: string): boolean {
+  return recipe.target === 'figure' || !!selected
+}
+
+/**
+ * A field's value as the recipe takes it. A ratio is shown and typed as a percentage (35 for 0.35), since that is how a
+ * person says a share; the rest are taken as they are. A number field left empty or not a number keeps the default.
+ */
+export function recipeValueOf(param: V3RecipeParam, typed: string | boolean): V3RecipeValue {
+  if (param.kind === 'flag') return typed === true || typed === 'true'
+  if (param.kind === 'ratio' || param.kind === 'mm') {
+    const n = typeof typed === 'string' && typed.trim() !== '' ? Number(typed) : NaN
+    if (!Number.isFinite(n)) return param.default
+    return param.kind === 'ratio' ? Math.round(n * 1e4) / 1e6 : n
+  }
+  const option = (param.options ?? []).find(o => String(o) === String(typed))
+  return option ?? param.default
+}
+
+/** What a field shows for a value: a ratio as a percentage. */
+export function recipeFieldOf(param: V3RecipeParam, value: V3RecipeValue): string {
+  if (param.kind === 'ratio' && typeof value === 'number') return String(Math.round(value * 1e6) / 1e4)
+  return String(value)
+}
+
+/** The domain on screen, from the address (`/domain/<subdomain>/…`); '' when the address names none. */
+export function subdomainOf(pathname: string): string {
+  return /^\/domain\/([^/]+)/.exec(pathname)?.[1] ?? ''
+}
+
+/** Whose a recipe row is: this domain's own (it may change it) or a parent's (copied in to be changed). */
+export function recipeIsOwn(row: { domain?: { subdomain?: string } }, subdomain: string): boolean {
+  return !!subdomain && row.domain?.subdomain === subdomain
+}
+
+/** What a parameter takes, in a few words: a range, a percentage range, or its options. */
+export function paramRangeOf(param: V3RecipeParam): string {
+  if (param.kind === 'ratio') return `${recipeFieldOf(param, param.min ?? 0)} – ${recipeFieldOf(param, param.max ?? 1)} %`
+  if (param.kind === 'mm') return `${param.min ?? ''} – ${param.max ?? ''} mm`
+  if (param.kind === 'flag') return ''
+  return (param.options ?? []).join(' / ')
+}

package/client/pages/figure-recipe-page.ts

@@ -0,0 +1,338 @@
+import '@material/web/icon/icon.js'
+import '../modeller/figure-v3-preview.js'
+
+import { css, html, nothing } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { PageView } from '@operato/shell'
+import { OxPrompt } from '@operato/popup'
+import { ScrollbarStyles, WorkSurfacePageStyles } from '@operato/styles'
+import { applyV3Recipe, parseV3Recipe, v3RecipeTestRoom } from '@hatiolab/figure-model'
+import type { V3Asset, V3Recipe } from '@hatiolab/figure-model'
+
+import { deleteFigureRecipe, fetchFigureRecipeRows, saveFigureRecipe, setFigureRecipeState, type FigureRecipeRow } from '../graphql/index.js'
+import { paramRangeOf, recipeFieldOf, recipeIsOwn, recipesOf, recipeWord, subdomainOf } from '../modeller/v3-recipes.js'
+
+/**
+ * The recipes (ADR-0095): what each one puts in, shown put into a room at several sizes, and whose it is.
+ *
+ * A recipe of this domain's own can be released, taken back to draft, changed or deleted. A parent's -- the ones the
+ * system domain ships -- is copied in under its name to be changed, and the copy stands in for it. Figures a recipe was
+ * put into keep their parts whatever happens here.
+ */
+@customElement('figure-recipe-page')
+export class FigureRecipePage extends localize(i18next)(PageView) {
+  static styles = [
+    WorkSurfacePageStyles,
+    ScrollbarStyles,
+    css`
+      :host {
+        display: grid;
+        grid-template-columns: minmax(220px, 280px) 1fr;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        font-size: 0.85rem;
+      }
+      @container (max-width: 640px) {
+        :host {
+          grid-template-columns: 1fr;
+        }
+      }
+      nav {
+        overflow: auto;
+        border-right: 1px solid var(--md-sys-color-outline-variant);
+        padding: 8px;
+      }
+      nav p[intro] {
+        margin: 4px 4px 10px;
+        color: var(--md-sys-color-on-surface-variant);
+        line-height: 1.5;
+      }
+      button[row] {
+        display: grid;
+        gap: 2px;
+        width: 100%;
+        padding: 8px 10px;
+        text-align: left;
+        font: inherit;
+        color: inherit;
+        background: none;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+      button[row][on] {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      button[row] small {
+        display: flex;
+        gap: 6px;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      span[chip] {
+        padding: 0 6px;
+        border-radius: 999em;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        font-size: 0.7rem;
+      }
+      span[chip][draft] {
+        color: var(--md-sys-color-tertiary);
+        border-color: var(--md-sys-color-tertiary);
+      }
+      main {
+        overflow: auto;
+        padding: 12px 16px;
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      main h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 16px);
+      }
+      main p {
+        margin: 0;
+        line-height: 1.5;
+      }
+      p[muted] {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        max-width: 720px;
+      }
+      th,
+      td {
+        text-align: left;
+        padding: 4px 8px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      figure-v3-preview {
+        height: 420px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      div[actions] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      div[actions] button {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 6px 12px;
+        font: inherit;
+        color: var(--md-sys-color-on-surface);
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999em;
+        cursor: pointer;
+      }
+      div[actions] button[primary] {
+        color: var(--md-sys-color-on-primary);
+        background: var(--md-sys-color-primary);
+        border-color: transparent;
+      }
+      div[actions] button[danger] {
+        color: var(--md-sys-color-error);
+        border-color: var(--md-sys-color-error);
+      }
+      p[role='alert'] {
+        padding: 8px;
+        white-space: pre-wrap;
+        color: var(--md-sys-color-on-error-container);
+        background: var(--md-sys-color-error-container);
+        border-radius: 8px;
+      }
+      textarea {
+        width: 100%;
+        min-height: 320px;
+        font: 0.78rem/1.4 monospace;
+        box-sizing: border-box;
+      }
+    `
+  ]
+
+  @state() private rows: FigureRecipeRow[] = []
+  @state() private chosen = ''
+  @state() private error = ''
+  @state() private editing = false
+  @state() private text = ''
+
+  get context() {
+    return { title: i18next.t('figure.title.recipes') }
+  }
+
+  async pageUpdated(_changes: Record<string, unknown>, _lifecycle: unknown, before: { active?: boolean }) {
+    if (this.active && !before?.active) await this.read()
+  }
+
+  private async read() {
+    try {
+      this.rows = await fetchFigureRecipeRows()
+      if (!this.rows.some(r => r.name === this.chosen)) this.chosen = this.rows[0]?.name ?? ''
+      this.error = ''
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error)
+    }
+  }
+
+  private get subdomain() {
+    return subdomainOf(location.pathname)
+  }
+
+  render() {
+    const language = i18next.language || 'en'
+    const recipes = recipesOf(this.rows)
+    const row = this.rows.find(r => r.name === this.chosen)
+    const recipe = recipes.find(r => r.name === this.chosen)
+    return html`
+      <nav>
+        <p intro>${i18next.t('figure.text.recipes-intro')}</p>
+        ${this.rows.map(one => {
+          const r = recipes.find(x => x.name === one.name)
+          return html`<button row ?on=${one.name === this.chosen} @click=${() => this.choose(one.name)}>
+            <span>${r ? recipeWord(r.title, language) : one.name}</span>
+            <small>
+              <span>${one.name}</span>
+              ${one.state === 'draft' ? html`<span chip draft>${i18next.t('figure.label.recipe-draft')}</span>` : nothing}
+              ${recipeIsOwn(one, this.subdomain) ? nothing : html`<span chip>${i18next.t('figure.label.recipe-inherited')}</span>`}
+            </small>
+          </button>`
+        })}
+      </nav>
+      <main>
+        ${this.error ? html`<p role="alert">${this.error}</p>` : nothing}
+        ${row && recipe ? this.renderRecipe(row, recipe, language) : html`<p muted>${i18next.t('figure.text.recipes-empty')}</p>`}
+      </main>
+    `
+  }
+
+  private renderRecipe(row: FigureRecipeRow, recipe: V3Recipe, language: string) {
+    const own = recipeIsOwn(row, this.subdomain)
+    return html`
+      <h2>${recipeWord(recipe.title, language)}</h2>
+      <p>${recipeWord(recipe.description, language)}</p>
+      <p muted>
+        ${i18next.t(recipe.target === 'part' ? 'figure.text.recipe-target-part' : 'figure.text.recipe-target-figure')} ·
+        ${i18next.t(own ? 'figure.text.recipe-own' : 'figure.text.recipe-inherited', { domain: row.domain?.subdomain ?? '' })}
+      </p>
+      <table>
+        <thead>
+          <tr>
+            <th>${i18next.t('figure.label.recipe-param')}</th>
+            <th>${i18next.t('figure.label.recipe-default')}</th>
+            <th>${i18next.t('figure.label.recipe-range')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${recipe.params.map(
+            p => html`<tr>
+              <td>${recipeWord(p.label, language) || p.name}</td>
+              <td>${p.kind === 'flag' ? i18next.t(p.default ? 'figure.label.yes' : 'figure.label.no') : recipeFieldOf(p, p.default)}${p.kind === 'ratio' ? ' %' : ''}</td>
+              <td>${paramRangeOf(p)}</td>
+            </tr>`
+          )}
+        </tbody>
+      </table>
+      ${this.renderPreview(recipe)}
+      <div actions>
+        ${own
+          ? html`${row.state === 'draft'
+                ? html`<button primary @click=${() => this.setState(row.name, 'released')}>${i18next.t('figure.button.recipe-release')}</button>`
+                : html`<button @click=${() => this.setState(row.name, 'draft')}>${i18next.t('figure.button.recipe-to-draft')}</button>`}
+              <button danger @click=${() => this.deleteRecipe(row.name)}><md-icon>delete</md-icon>${i18next.t('figure.button.recipe-delete')}</button>`
+          : html`<button primary @click=${() => this.copyIn(row)}>${i18next.t('figure.button.recipe-copy-in')}</button>`}
+        <button @click=${() => this.edit(row)}><md-icon>data_object</md-icon>${i18next.t('figure.button.recipe-edit-source')}</button>
+      </div>
+      ${this.editing
+        ? html`<p muted>${i18next.t('figure.text.recipe-edit-source')}</p>
+            <textarea .value=${this.text} @input=${(e: Event) => (this.text = (e.target as HTMLTextAreaElement).value)}></textarea>
+            <div actions>
+              <button primary @click=${() => this.saveText(own ? row.state : 'draft')}>${i18next.t('figure.button.save')}</button>
+              <button @click=${() => (this.editing = false)}>${i18next.t('figure.button.close')}</button>
+            </div>`
+        : nothing}
+    `
+  }
+
+  /** The recipe put into the room it is checked in, with its defaults: what it makes, at several sizes. */
+  private renderPreview(recipe: V3Recipe) {
+    let asset: V3Asset
+    try {
+      const room = v3RecipeTestRoom()
+      asset = applyV3Recipe(room.asset, parseV3Recipe(recipe), recipe.target === 'part' ? { target: room.target } : {}).asset
+    } catch (error) {
+      return html`<p role="alert">${error instanceof Error ? error.message : String(error)}</p>`
+    }
+    return html`<p muted>${i18next.t('figure.text.recipe-preview')}</p>
+      <figure-v3-preview .asset=${asset} .context=${`recipe:${recipe.name}`}></figure-v3-preview>`
+  }
+
+  private choose(name: string) {
+    this.chosen = name
+    this.editing = false
+    this.error = ''
+  }
+
+  private edit(row: FigureRecipeRow) {
+    this.editing = !this.editing
+    try {
+      this.text = JSON.stringify(JSON.parse(row.source), null, 2)
+    } catch {
+      this.text = row.source
+    }
+  }
+
+  private async run(action: () => Promise<unknown>) {
+    try {
+      await action()
+      this.error = ''
+      await this.read()
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error)
+    }
+  }
+
+  private setState(name: string, state: 'draft' | 'released') {
+    return this.run(() => setFigureRecipeState(name, state))
+  }
+
+  /* The app's own prompt, as every operato screen asks -- not the browser's confirm box (user, 2026-09-24). */
+  private async deleteRecipe(name: string) {
+    const sure = await OxPrompt.open({
+      type: 'warning',
+      title: i18next.t('figure.button.recipe-delete'),
+      text: i18next.t('figure.text.recipe-delete-confirm', { name }),
+      confirmButton: { text: i18next.t('figure.button.recipe-delete') },
+      cancelButton: { text: i18next.t('figure.button.close') }
+    })
+    if (sure) await this.run(() => deleteFigureRecipe(name))
+  }
+
+  /** A parent's recipe copied into this domain as a draft, to be changed here. */
+  private copyIn(row: FigureRecipeRow) {
+    return this.run(() => saveFigureRecipe(row.source, 'draft'))
+  }
+
+  /** The source as typed: checked by the server in the test room; a new name is a new recipe. */
+  private async saveText(state: 'draft' | 'released') {
+    let name = ''
+    try {
+      name = JSON.parse(this.text).name ?? ''
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error)
+      return
+    }
+    await this.run(async () => {
+      await saveFigureRecipe(this.text, state)
+      this.chosen = name
+      this.editing = false
+    })
+  }
+}

package/client/pages/figure-v3-modeller-page.ts

@@ -5,7 +5,9 @@ import { modellerPathOf } from '../modeller/modeller-route.js'
 import { createV3ProductSession } from '../modeller/v3-product-session.js'
 import { v3ProductStore } from '../graphql/v3-store.js'
 import { i18next } from '@operato/i18n'
-import { fetchFigure, fetchFigureTypeNames, updateFigure } from '../graphql/index.js'
+import { fetchFigure, fetchFigureRecipes, fetchFigureTypeNames, updateFigure } from '../graphql/index.js'
+import { recipesOf } from '../modeller/v3-recipes.js'
+import type { V3Recipe } from '@hatiolab/figure-model'
 import { occupancyFromParts } from '../modeller/v3-occupancy.js'
 import type { V3AuthoringAction } from '@hatiolab/figure-model'
 import '../modeller/v3-editor.js'
@@ -93,6 +95,9 @@ export class FigureV3ModellerPage extends PageView {
   private routeId: string | undefined
   private discardApproved = false
   @state() private revision = 0
+  /** The recipes this domain sees (ADR-0095), read once when the page is first shown. */
+  @state() private recipes: V3Recipe[] = []
+  private recipesRead = false
   @state() private error = ''
   /**
    * 발행 패널이 읽는 행의 사실 — 상태와 발행 판 번호. 원본은 세션이 들고, 이 둘은 행에 있다.
@@ -328,13 +333,24 @@ export class FigureV3ModellerPage extends PageView {
       detail.error = error instanceof Error ? error.message : String(error)
     }
   }
+  /*
+    Reloading or closing the tab is not a move the shell asks `canDeactivate` about: a new figure not yet saved was lost
+    without a word (2026-09-26). The browser's own question is the only one it allows there.
+  */
+  private holdUnsaved = (event: BeforeUnloadEvent) => {
+    if (!this.active || !this.session.read().dirty) return
+    event.preventDefault()
+    event.returnValue = ''
+  }
   connectedCallback() {
     super.connectedCallback()
     window.addEventListener('figure-v3-apply', this.applyAI)
+    window.addEventListener('beforeunload', this.holdUnsaved)
   }
   disconnectedCallback() {
     this.withdrawAssistant()
     window.removeEventListener('figure-v3-apply', this.applyAI)
+    window.removeEventListener('beforeunload', this.holdUnsaved)
     super.disconnectedCallback()
   }
   async canDeactivate() {
@@ -360,6 +376,13 @@ export class FigureV3ModellerPage extends PageView {
       this.withdrawAssistant()
       return
     }
+    if (!this.recipesRead) {
+      this.recipesRead = true
+      /* A recipe list that cannot be read leaves the section out; the modeller works without it. */
+      fetchFigureRecipes()
+        .then(rows => (this.recipes = recipesOf(rows)))
+        .catch(() => (this.recipesRead = false))
+    }
     const id = lifecycle?.resourceId
     if (this.session.read().context && id === this.routeId && !changes.active) return
     try {
@@ -424,7 +447,7 @@ export class FigureV3ModellerPage extends PageView {
   render() {
     if (this.error) return html`<p role="alert" class="error">${this.error}</p>`
     const view = this.session.read()
-    return html`<figure-v3-editor .session=${this.session} .firstSave=${this.askFirstSave} .revision=${this.revision} .instances=${this.instances} .budget=${this.budget} @v3-changed=${this.changed}>
+    return html`<figure-v3-editor .session=${this.session} .recipes=${this.recipes} .firstSave=${this.askFirstSave} .revision=${this.revision} .instances=${this.instances} .budget=${this.budget} @v3-changed=${this.changed}>
       ${this.commandError ? html`<p slot="notice" fit-error role="alert">${this.commandError}</p>` : ''}
       <figure-v3-properties
         slot="figure"

package/client/route.ts

@@ -4,6 +4,10 @@ export default function route(page: string) {
       import('./pages/figure-list-page')
       return page
 
+    case 'figure-recipes':
+      import('./pages/figure-recipe-page')
+      return page
+
     /*
       One modeller since ADR-0087 step 5. `figure-v3-modeller` is kept as an alias for links made before the switch.
     */

package/dist-client/graphql/index.d.ts

@@ -65,3 +65,24 @@ export declare function inspectFigureDraft(source: string, id?: string): Promise
  */
 export declare function fetchReleasedSource(id: string): Promise<string | undefined>;
 export declare function fetchFigureVersions(id: string): Promise<FigureVersion[]>;
+/** The recipes this domain sees (ADR-0095): released ones, its own and its parent's. Each is a figure-model V3Recipe. */
+export declare function fetchFigureRecipes(): Promise<Array<{
+    name: string;
+    source: string;
+}>>;
+/** A recipe row as the management screen reads it: whose it is and whether it is released. */
+export interface FigureRecipeRow {
+    name: string;
+    source: string;
+    state: 'draft' | 'released';
+    updatedAt?: string;
+    domain?: {
+        id: string;
+        subdomain?: string;
+    };
+}
+/** Every recipe this domain sees, drafts too (ADR-0095). */
+export declare function fetchFigureRecipeRows(): Promise<FigureRecipeRow[]>;
+export declare function saveFigureRecipe(source: string, state: 'draft' | 'released'): Promise<FigureRecipeRow>;
+export declare function setFigureRecipeState(name: string, state: 'draft' | 'released'): Promise<void>;
+export declare function deleteFigureRecipe(name: string): Promise<void>;