@things-factory/figure-ui 10.1.68 → 10.1.70

package/client/graphql/index.ts

@@ -332,3 +332,92 @@ export async function fetchFigureVersions(id: string): Promise<FigureVersion[]>
 
   return unwrap<FigureVersion[]>(response, 'figureVersions') ?? []
 }
+
+/** The recipes this domain sees (ADR-0095): released ones, its own and its parent's. Each is a figure-model V3Recipe. */
+export async function fetchFigureRecipes(): Promise<Array<{ name: string; source: string }>> {
+  const response = await client.query({
+    query: gql`
+      query {
+        figureRecipes {
+          name
+          source
+        }
+      }
+    `,
+    fetchPolicy: 'network-only'
+  })
+  return unwrap<Array<{ name: string; source: string }> | null>(response, 'figureRecipes') ?? []
+}
+
+/** 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 async function fetchFigureRecipeRows(): Promise<FigureRecipeRow[]> {
+  const response = await client.query({
+    query: gql`
+      query {
+        figureRecipes(all: true) {
+          name
+          source
+          state
+          updatedAt
+          domain {
+            id
+            subdomain
+          }
+        }
+      }
+    `,
+    fetchPolicy: 'network-only'
+  })
+  return unwrap<FigureRecipeRow[] | null>(response, 'figureRecipes') ?? []
+}
+
+export async function saveFigureRecipe(source: string, state: 'draft' | 'released'): Promise<FigureRecipeRow> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($source: String!, $state: String) {
+        saveFigureRecipe(source: $source, state: $state) {
+          name
+          source
+          state
+        }
+      }
+    `,
+    variables: { source, state }
+  })
+  return unwrap<FigureRecipeRow>(response, 'saveFigureRecipe')
+}
+
+export async function setFigureRecipeState(name: string, state: 'draft' | 'released'): Promise<void> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($name: String!, $state: String!) {
+        setFigureRecipeState(name: $name, state: $state) {
+          name
+        }
+      }
+    `,
+    variables: { name, state }
+  })
+  unwrap(response, 'setFigureRecipeState')
+}
+
+export async function deleteFigureRecipe(name: string): Promise<void> {
+  const response = await client.mutate({
+    mutation: gql`
+      mutation ($name: String!) {
+        deleteFigureRecipe(name: $name)
+      }
+    `,
+    variables: { name }
+  })
+  unwrap(response, 'deleteFigureRecipe')
+}

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

@@ -23,6 +23,10 @@ import {
   fastenedTo,
   heldBy,
   followOf,
+  hangsFrom,
+  shownWhenOf,
+  visibilityControlsOf,
+  placeKeptOf,
   hasInstanceSize,
   holdsThings,
   leadersFor,
@@ -140,7 +144,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     if (!asset || !this.partId) return nothing
     if (this.section === 'motion')
       return html`<section><h3>${i18next.t('figure.label.motion')}${this.help.button('figure.text.motion-explained')}</h3>${this.help.hint('figure.text.motion-explained')}
-        ${this.renderMotion(asset)}</section>`
+        ${this.renderMotion(asset)}${this.renderShown(asset)}</section>`
     if (this.section === 'places')
       return html`<section><h3>${i18next.t('figure.label.places-on-part', { part: this.partId })}${this.help.button('figure.text.place-explained')}</h3>${this.help.hint('figure.text.place-explained')}
         ${placeFacesOf(asset, this.partId).length ? this.renderPlaces(asset) : html`<p hint>${i18next.t('figure.text.places-need-a-box')}</p>`}</section>`
@@ -231,7 +235,14 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   private renderDimensions(asset: V3Asset) {
     const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
     const round = followableAxes(asset, this.partId).length === 2
-    return followableAxes(asset, this.partId).map(axis => {
+    /* One step for the whole part (figure-model follow-size): the size is declared from the parts if there is none. */
+    const followsAll = followableAxes(asset, this.partId).every(axis => followOf(asset, this.partId, axis).of === 'instance')
+    const whole = followsAll
+      ? nothing
+      : html`<button act follow-size ?disabled=${this.locked} @click=${() => this.command({ kind: 'follow-size', part: this.partId })}>
+          <md-icon>open_in_full</md-icon>${i18next.t('figure.button.follow-size')}
+        </button>`
+    return html`${whole}${followableAxes(asset, this.partId).map(axis => {
       const now = followOf(asset, this.partId, axis)
       const value = choiceOf(now)
       /* A cylinder's two measures are its radius and its length; its X and Y name them. */
@@ -271,7 +282,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
               </label>`
           : nothing}
       </div>`
-    })
+    })}`
   }
 
   /** The same source, the same share, a new difference: a leaf the opening less its gaps (link-dimension's `plus`). */
@@ -325,10 +336,22 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     )
   }
 
+  /**
+   * A new aim for the fastening: where on the face is filled in as where the part stands now, so fastening it keeps it
+   * there (`placeKeptOf`). The author changes it from there.
+   */
+  private aimAt(asset: V3Asset, f: ReturnType<typeof freshFasten>) {
+    const theirFaces = f.target ? facesOf(asset, f.target) : FACES
+    const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0]!
+    const aim = f.toPlane ? ('plane' as const) : f.target ? { part: f.target, face: targetFace } : undefined
+    this.fasten = { ...f, ...(aim ? placeKeptOf(asset, this.partId, aim, !!f.twist) : { align: {}, alignMm: {} }) }
+  }
+
   private renderFastening(asset: V3Asset) {
     const held = heldBy(asset, this.partId)
     const f = this.fasten
-    const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one))
+    /* Not a part that hangs from this one: fastening a frame to its own roller would close a loop. */
+    const targets = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFasten(asset, one) && !hangsFrom(asset, one, this.partId))
     /* The faces are the ones each shape declares: a part is fastened by one of its outer faces, to any face of the target. */
     /* On the mounting plane only the faces it takes: a bottom or a top on the floor, a back on a wall. */
     const plane = mountingPlaneOf(asset)
@@ -354,19 +377,19 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
         </select>
       </div>
       <label toggle>
-        <input type="checkbox" .checked=${f.toPlane} @change=${(e: Event) => (this.fasten = { ...f, toPlane: (e.target as HTMLInputElement).checked })} />
+        <input type="checkbox" .checked=${f.toPlane} @change=${(e: Event) => this.aimAt(asset, { ...f, toPlane: (e.target as HTMLInputElement).checked })} />
         ${i18next.t('figure.label.stands-on-plane')}
       </label>
       ${f.toPlane
         ? nothing
         : html`<div form>
             <span>${i18next.t('figure.label.target-part')}</span>
-            <select @change=${(e: Event) => (this.fasten = { ...f, target: (e.target as HTMLSelectElement).value })}>
+            <select @change=${(e: Event) => this.aimAt(asset, { ...f, target: (e.target as HTMLSelectElement).value })}>
               <option value="" ?selected=${!f.target}>—</option>
               ${targets.map(one => html`<option value=${one} ?selected=${one === f.target}>${one}</option>`)}
             </select>
             <span>${i18next.t('figure.label.target-face')}</span>
-            <select @change=${(e: Event) => (this.fasten = { ...f, targetFace: (e.target as HTMLSelectElement).value as V3Face })}>
+            <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as V3Face })}>
               ${theirFaces.map(face => html`<option value=${face} ?selected=${face === targetFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
             </select>
             <span>${i18next.t('figure.label.facing-meet')}</span>
@@ -474,6 +497,49 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     </section>`
   }
 
+  /**
+   * When the part is drawn: always, or while a control is at least a value -- a lamp lit while the gate is open. One
+   * part edit (`set-visibility`), one step. Offered once the figure has a control; a motion is what makes one.
+   */
+  private renderShown(asset: V3Asset) {
+    const controls = visibilityControlsOf(asset)
+    if (!controls.length) return nothing
+    const now = shownWhenOf(asset, this.partId)
+    const send = (shownWhen: { input: string; atLeast: number } | null) =>
+      this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-visibility', target: this.partId, shownWhen } }, bubbles: true, composed: true }))
+    const first = (id: string) => {
+      const c = controls.find(one => one.id === id)!
+      return Math.round((c.min + (c.max - c.min) * 0.01) * 1000) / 1000
+    }
+    const unit = now ? controls.find(c => c.id === now.input)?.unit : ''
+    return html`<div form>
+        <span>${i18next.t('figure.label.shown-when')}</span>
+        <select
+          ?disabled=${this.locked}
+          @change=${(e: Event) => {
+            const id = (e.target as HTMLSelectElement).value
+            send(id ? { input: id, atLeast: now?.input === id ? now.atLeast : first(id) } : null)
+          }}
+        >
+          <option value="" ?selected=${!now}>${i18next.t('figure.label.shown-always')}</option>
+          ${controls.map(c => html`<option value=${c.id} ?selected=${now?.input === c.id}>${i18next.t('figure.label.shown-while', { control: c.label })}</option>`)}
+        </select>
+        ${now
+          ? html`<span>${i18next.t('figure.label.shown-at-least')}${unit ? ` (${unit})` : ''}</span>
+              <input
+                type="number"
+                step="any"
+                ?disabled=${this.locked}
+                .value=${String(now.atLeast)}
+                @change=${(e: Event) => {
+                  const v = (e.target as HTMLInputElement).valueAsNumber
+                  if (Number.isFinite(v)) send({ input: now.input, atLeast: v })
+                }}
+              />`
+          : nothing}
+      </div>`
+  }
+
   private renderMotion(asset: V3Asset) {
     const now = motionOf(asset, this.partId)
     const joint = asset.joints?.find(j => j.body1.part === this.partId)

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

@@ -1,10 +1,11 @@
 import '@material/web/icon/icon.js'
 import { css, html, LitElement, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import { PART_LIMIT } from '@hatiolab/figure-model'
-import type { V3PrimitiveCreation } from '@hatiolab/figure-model'
+import type { V3PrimitiveCreation, V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
+import { recipeFieldOf, recipeReady, recipeValueOf, recipeWord } from './v3-recipes.js'
 import type { V3BudgetLine } from './v3-maturity.js'
 import { partLabelOf } from './v3-fields.js'
 
@@ -208,6 +209,83 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         border-radius: 6px;
         cursor: pointer;
       }
+      div[recipe-list] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 3px;
+      }
+      button[recipe] {
+        padding: 4px 8px;
+        font: inherit;
+        font-size: 0.75rem;
+        color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
+        background: none;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999em;
+        cursor: pointer;
+      }
+      button[recipe][on] {
+        color: var(--md-sys-color-on-secondary-container);
+        background: var(--md-sys-color-secondary-container);
+        border-color: transparent;
+      }
+      button[recipe]:disabled {
+        opacity: 0.38;
+        cursor: default;
+      }
+      div[recipe-form] {
+        display: grid;
+        gap: 6px;
+        margin-top: 8px;
+        padding: 8px;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 8px;
+        font-size: 0.75rem;
+      }
+      /* The side pane is narrow (200 px, 160 under 860): the name above its field, not beside it. */
+      div[recipe-form] label[field] {
+        display: grid;
+        gap: 2px;
+      }
+      div[recipe-form] input[type='number'],
+      div[recipe-form] select {
+        min-width: 0;
+        font: inherit;
+      }
+      div[recipe-form] p[hint] {
+        margin: 0;
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      div[recipe-form] p[error] {
+        margin: 0;
+        padding: 6px;
+        white-space: pre-wrap;
+        color: var(--md-sys-color-on-error-container);
+        background: var(--md-sys-color-error-container);
+        border-radius: 6px;
+      }
+      div[recipe-actions] {
+        display: flex;
+        gap: 6px;
+      }
+      div[recipe-actions] button {
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 10px;
+        font: inherit;
+        border: 1px solid var(--md-sys-color-outline-variant);
+        border-radius: 999em;
+        background: none;
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+      }
+      div[recipe-actions] button[insert] {
+        border-color: transparent;
+        color: var(--md-sys-color-on-primary);
+        background: var(--md-sys-color-primary);
+      }
       button[shape]:hover:not([disabled]) {
         color: var(--md-sys-color-on-primary-container);
         background-color: var(--md-sys-color-primary-container);
@@ -364,6 +442,13 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
    * 잠긴다. 되풀이는 한 부품으로 센다. 등급을 안 정했으면 한도는 없다.
    */
   @property({ attribute: false }) partBudget?: { level: 'S' | 'M' | 'L' | null; used: number; limit: number | null }
+  /** The recipes this domain sees (ADR-0095). */
+  @property({ attribute: false }) recipes: V3Recipe[] = []
+  /** Why the last recipe put in was refused -- the kernel's sentence, as it is (ADR-0095 condition 3). */
+  @property({ type: String }) recipeError = ''
+  /** The recipe whose form is open, and the values in it. */
+  @state() private openRecipe = ''
+  @state() private recipeValues: Record<string, V3RecipeValue> = {}
 
   render() {
     const b = this.partBudget
@@ -388,6 +473,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
         </div>
         ${full ? html`<p full>${i18next.t('figure.text.part-limit-reached-short', { level: b!.level, limit: b!.limit })}</p>` : nothing}
       </section>
+      ${this.renderRecipes(full)}
 
       <section list>
         <h3>
@@ -539,6 +625,71 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
     `
   }
 
+  /**
+   * Recipes (ADR-0095): a door, a roller row -- parts made in one step, with a few numbers and choices. A recipe for a
+   * part needs one chosen; its form opens under it, and putting it in is one step of the history.
+   */
+  private renderRecipes(full: boolean) {
+    if (!this.recipes.length) return nothing
+    const language = i18next.language || 'en'
+    const open = this.recipes.find(r => r.name === this.openRecipe)
+    return html`<section recipes>
+      <h3>${i18next.t('figure.label.recipes')}</h3>
+      <div recipe-list>
+        ${this.recipes.map(recipe => {
+          const ready = recipeReady(recipe, this.selected)
+          return html`<button
+            recipe=${recipe.name}
+            ?on=${recipe.name === this.openRecipe}
+            ?disabled=${this.locked || full || !ready}
+            title=${ready ? recipeWord(recipe.description, language) : i18next.t('figure.text.recipe-needs-a-part')}
+            @click=${() => this.openFor(recipe)}
+          >
+            ${recipeWord(recipe.title, language)}
+          </button>`
+        })}
+      </div>
+      ${this.selected || !this.recipes.some(r => r.target === 'part') ? nothing : html`<p hint>${i18next.t('figure.text.recipe-needs-a-part')}</p>`}
+      ${open && recipeReady(open, this.selected) ? this.renderRecipeForm(open, language) : nothing}
+    </section>`
+  }
+
+  private openFor(recipe: V3Recipe) {
+    if (this.openRecipe === recipe.name) {
+      this.openRecipe = ''
+      return
+    }
+    this.openRecipe = recipe.name
+    this.recipeValues = Object.fromEntries(recipe.params.map(p => [p.name, p.default]))
+  }
+
+  private renderRecipeForm(recipe: V3Recipe, language: string) {
+    const set = (name: string, value: V3RecipeValue) => (this.recipeValues = { ...this.recipeValues, [name]: value })
+    return html`<div recipe-form>
+      ${recipe.target === 'part' ? html`<p hint>${i18next.t('figure.text.recipe-onto', { part: this.selected })}</p>` : nothing}
+      ${recipe.params.map(param => {
+        const label = recipeWord(param.label, language) || param.name
+        const value = this.recipeValues[param.name] ?? param.default
+        if (param.kind === 'flag')
+          return html`<label toggle><input type="checkbox" .checked=${value === true} @change=${(e: Event) => set(param.name, (e.target as HTMLInputElement).checked)} />${label}</label>`
+        if (param.kind === 'choice' || param.kind === 'face')
+          return html`<label field><span>${label}</span>
+            <select @change=${(e: Event) => set(param.name, recipeValueOf(param, (e.target as HTMLSelectElement).value))}>
+              ${(param.options ?? []).map(o => html`<option value=${String(o)} ?selected=${o === value}>${String(o)}</option>`)}
+            </select></label>`
+        return html`<label field><span>${label}${param.kind === 'ratio' ? ' (%)' : ''}</span>
+          <input type="number" step="any" param=${param.name} .value=${recipeFieldOf(param, value)} @change=${(e: Event) => set(param.name, recipeValueOf(param, (e.target as HTMLInputElement).value))} /></label>`
+      })}
+      ${this.recipeError ? html`<p role="alert" error>${this.recipeError}</p>` : nothing}
+      <div recipe-actions>
+        <button act insert ?disabled=${this.locked} @click=${() => this.ask('insert-recipe', { recipe, values: this.recipeValues })}>
+          <md-icon>add</md-icon>${i18next.t('figure.button.insert-recipe')}
+        </button>
+        <button act @click=${() => (this.openRecipe = '')}>${i18next.t('figure.button.close')}</button>
+      </div>
+    </div>`
+  }
+
   /** 정본을 고치지 않는다 — 무엇을 하겠다는 것만 알린다. */
   private ask(what: string, detail: object) {
     this.dispatchEvent(new CustomEvent(what, { detail, bubbles: true, composed: true }))

package/client/modeller/v3-editor.ts

@@ -4,8 +4,8 @@ import type { OxThreePane } from '@operato/layout'
 import '@operato/layout'
 import { customElement, property, state } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
-import { PART_LIMIT, v3PartCountOf } from '@hatiolab/figure-model'
-import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation } from '@hatiolab/figure-model'
+import { PART_LIMIT, parseV3Recipe, resolveV3Recipe, v3PartCountOf, v3RecipeIdFor } from '@hatiolab/figure-model'
+import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation, V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
 import type { V3ProductSession } from './v3-product-session.js'
 import { captureV3Thumbnail } from './v3-thumbnail.js'
 import { drawableV3Parts } from './v3-renderer.js'
@@ -19,7 +19,7 @@ import './figure-v3-preview.js'
 import './figure-settings.js'
 import { DEFAULT_VIEW, type ViewSettings } from './figure-view.js'
 import './figure-v3-capability.js'
-import { gizmoChanges, gizmoReachOf, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
+import { gizmoChanges, gizmoReachOf, keepBottomChanges, type GizmoReach, type GizmoResult } from './v3-gizmo.js'
 import { keyActionOf } from './v3-keys.js'
 import { groupFields, ownerOf, partLabelOf, repeatOf, type FieldLike, type FieldGroup } from './v3-fields.js'
 import { SidePanelStyles } from './side-panel-styles.js'
@@ -72,6 +72,37 @@ export class FigureV3Editor extends LitElement {
     ox-canvas-bar button[mode][aria-pressed='true'] {
       border-color: var(--md-sys-color-primary);
     }
+    /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */
+    ox-canvas-bar .gizmo-tools {
+      display: inline-flex;
+      gap: 2px;
+      padding-left: 4px;
+      border-left: 1px solid var(--md-sys-color-outline-variant);
+    }
+    ox-canvas-bar button[tool] {
+      display: inline-grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: none;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant);
+      cursor: pointer;
+    }
+    ox-canvas-bar button[tool]:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-high);
+      color: var(--md-sys-color-on-surface);
+    }
+    ox-canvas-bar button[tool][aria-pressed='true'] {
+      background: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-on-secondary-container);
+    }
+    ox-canvas-bar button[tool]:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
     figure-v3-preview {
       min-width: 0;
       min-height: 0;
@@ -220,12 +251,21 @@ export class FigureV3Editor extends LitElement {
       color: var(--md-sys-color-on-error-container);
       white-space: pre-wrap;
     }
+    .notice {
+      padding: 8px 10px;
+      background: var(--md-sys-color-surface-container);
+      color: var(--md-sys-color-on-surface);
+    }
     .hint {
       color: var(--md-sys-color-on-surface-variant);
       line-height: 1.5;
     }
   `]
   @property({ attribute: false }) session?: V3ProductSession
+  /** The recipes this domain sees (ADR-0095), given by the page. */
+  @property({ attribute: false }) recipes: V3Recipe[] = []
+  /** Why the last recipe was refused, in the kernel's words. */
+  @state() private recipeError = ''
   @property({ type: Number }) revision = 0
   /** The verdict's count, drawn on its tab so it stays in sight while another tab is open. */
   @property({ type: Number }) instances?: number
@@ -245,6 +285,10 @@ export class FigureV3Editor extends LitElement {
   @state() private panes?: OxThreePane
   /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes. */
   @state() private middle: 'edit' | 'preview' = 'edit'
+  /** The gizmo shown on the selected part, as the tools in the bar and W · E · R choose it; none once the part changes. */
+  @state() private gizmoMode?: 'translate' | 'rotate' | 'scale'
+  /** A line saying what a command did besides what was asked; gone at the next command. */
+  @state() private notice = ''
   /**
    * How the workbench shows the figure, in the board's own state names. The viewer's, kept in
    * their browser, never in the figure.
@@ -274,6 +318,33 @@ export class FigureV3Editor extends LitElement {
   /** A value in hand -- typed, held on a spinner, scrubbed, dragged -- drawn at once and recorded on release. */
   @state() private live: LiveValues = NOTHING_LIVE
   private lastContext: string | null = null
+  /**
+   * Move, turn and size on the canvas, in the bar's tools: the gizmo the W · E · R keys give, found without knowing the
+   * keys (2026-09-26 -- a person dragging the part turned the camera). Each is offered only where the part's own
+   * numbers can take it (`gizmoReachOf`).
+   */
+  private renderGizmoTools(editing: boolean) {
+    const reach = editing && this.selected ? this.reachOf(this.selected) : undefined
+    const tools = [
+      { mode: 'translate', icon: 'open_with', key: 'W', can: !!reach?.translate },
+      { mode: 'rotate', icon: '3d_rotation', key: 'E', can: !!reach?.rotate },
+      { mode: 'scale', icon: 'open_in_full', key: 'R', can: !!reach?.scale }
+    ] as const
+    return html`<span class="gizmo-tools" role="group" aria-label=${i18next.t('figure.label.gizmo-tools')}>
+      ${tools.map(
+        tool => html`<button
+          tool
+          aria-pressed=${String(this.gizmoMode === tool.mode)}
+          ?disabled=${!tool.can}
+          aria-label=${i18next.t('figure.button.gizmo-' + tool.mode)}
+          title=${`${i18next.t('figure.button.gizmo-' + tool.mode)} (${tool.key})${tool.can || !this.selected ? '' : ' · ' + i18next.t('figure.text.gizmo-not-own')}`}
+          @click=${() => this.useGizmo(tool.mode)}
+        >
+          <md-icon>${tool.icon}</md-icon>
+        </button>`
+      )}
+    </span>`
+  }
   /** The modeller's keys (`v3-keys.ts`): undo, redo, duplicate, remove, back to the whole figure, the gizmo's modes. */
   private onKey = (e: KeyboardEvent) => {
     const view = this.session?.read()
@@ -292,7 +363,7 @@ export class FigureV3Editor extends LitElement {
       part placed by a rule wrote the drag again (2026-09-25). Heard first (capture) and kept from the scene.
     */
     e.stopPropagation()
-    if (action === 'translate' || action === 'rotate' || action === 'scale') canvas?.gizmo(action)
+    if (action === 'translate' || action === 'rotate' || action === 'scale') canvas && this.useGizmo(action)
     else if (action === 'undo') view.canUndo && this.run(() => this.session!.undo())
     else if (action === 'redo') view.canRedo && this.run(() => this.session!.redo())
     else if (action === 'duplicate') this.duplicatePart(this.selected)
@@ -316,6 +387,12 @@ export class FigureV3Editor extends LitElement {
       this.hiddenParts = new Set()
     }
     if (view && !view.geometry.some(g => ownerOf(g.id) === this.selected)) this.selected = ''
+    if (_changed.has('selected')) this.gizmoMode = undefined
+  }
+  /** The scene toggles: the mode already shown takes the gizmo away. */
+  private useGizmo(mode: 'translate' | 'rotate' | 'scale') {
+    this.renderRoot.querySelector<FigureV3Canvas>('figure-v3-canvas')?.gizmo(mode)
+    this.gizmoMode = this.gizmoMode === mode ? undefined : mode
   }
   private run(action: () => unknown) {
     try {
@@ -440,6 +517,37 @@ export class FigureV3Editor extends LitElement {
     else next.add(id)
     this.hiddenParts = next
   }
+  /** Whether the figure declares its size (the three size inputs). */
+  private hasSize(): boolean {
+    const values = this.designValues()
+    return ['x', 'y', 'z'].every(axis => typeof values[`size.${axis}`] === 'number')
+  }
+  /**
+   * A recipe put in (ADR-0095): resolved on the figure as it stands -- its parts take the next free name, onto the part
+   * chosen -- and applied as one step. Refused, the kernel's sentence goes to the form as it is (condition 3).
+   */
+  private insertRecipe(recipe: V3Recipe, values: Record<string, V3RecipeValue>) {
+    try {
+      const asset = JSON.parse(this.session!.source()) as V3Asset
+      const checked = parseV3Recipe(recipe)
+      const id = v3RecipeIdFor(asset, checked)
+      const steps = resolveV3Recipe(checked, { id, ...(checked.target === 'part' ? { target: this.selected } : {}), values })
+      this.session!.applyRecipe(steps)
+      this.recipeError = ''
+      this.error = ''
+      this.changed()
+    } catch (error) {
+      this.recipeError = error instanceof Error ? error.message : String(error)
+    }
+  }
+  /** The design values of the asset being edited. */
+  private designValues(): Record<string, number> {
+    try {
+      return this.session ? (JSON.parse(this.session.source()).designInputs ?? {}) : {}
+    } catch {
+      return {}
+    }
+  }
   /** What the gizmo may write for the selected part — read off the asset being edited. */
   private reachOf(id: string): GizmoReach {
     const none = { translate: false, rotate: false, scale: false }
@@ -656,9 +764,20 @@ export class FigureV3Editor extends LitElement {
   /** One command, one step of the history. A refusal a person can meet here is said in their words. */
   private linkCommand(action: V3AuthoringAction) {
     this.retry = undefined
+    this.notice = ''
+    const hadSize = this.hasSize()
     try {
       this.session!.command(action)
       this.error = ''
+      /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
+      if (action.kind === 'follow-size' && !hadSize) {
+        const size = this.designValues()
+        this.notice = i18next.t('figure.text.size-declared-to-follow', {
+          x: Math.round(size['size.x'] ?? 0).toLocaleString(),
+          y: Math.round(size['size.y'] ?? 0).toLocaleString(),
+          z: Math.round(size['size.z'] ?? 0).toLocaleString()
+        })
+      }
       this.changed()
     } catch (error) {
       const code = (error as { code?: string })?.code
@@ -681,9 +800,13 @@ export class FigureV3Editor extends LitElement {
   private changeField(field: { id: string; unit: V3InputChange['unit']; role?: string }, event: Event) {
     const input = event.target as HTMLInputElement,
       value = input.valueAsNumber
+    /* A height typed in keeps the part's bottom where it is, as the scale gizmo does. */
+    const part = this.selected
+    const kept = field.role !== 'state' && part ? keepBottomChanges(part, this.reachOf(part), field.id, value, this.designValues()) : []
     this.run(() =>
       this.session!.apply([
-        { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value }
+        { kind: field.role === 'state' ? 'set-state' : 'set-design', input: field.id, unit: field.unit, value },
+        ...kept
       ])
     )
     // Rejected edits must also restore the displayed numeric value.
@@ -1002,6 +1125,7 @@ export class FigureV3Editor extends LitElement {
         @canvas-redo=${() => this.run(() => this.session!.redo())}
         @canvas-fit=${() => this.renderRoot.querySelector<FigureV3Canvas>('figure-v3-canvas')?.fit()}
       >
+        ${this.renderGizmoTools(!unavailable && this.middle === 'edit')}
         ${(['edit', 'preview'] as const).map(
           mode => html`<button slot="mode" mode aria-pressed=${String(this.middle === mode)} title=${i18next.t('figure.text.mode-' + mode + '-explained')} @click=${() => (this.middle = mode)}>
             ${i18next.t('figure.label.mode-' + mode)}
@@ -1018,6 +1142,7 @@ export class FigureV3Editor extends LitElement {
               : null}
           </div>`
         : null}
+      ${this.notice ? html`<div role="status" class="notice">${this.notice}</div>` : null}
       <ox-three-pane>
         <figure-v3-parts
           slot="start"
@@ -1029,6 +1154,9 @@ export class FigureV3Editor extends LitElement {
           .selected=${this.selected}
           ?locked=${unavailable}
           @add-part=${(e: CustomEvent) => this.add(e.detail.kind)}
+          .recipes=${this.recipes}
+          .recipeError=${this.recipeError}
+          @insert-recipe=${(e: CustomEvent) => this.insertRecipe(e.detail.recipe, e.detail.values)}
           @select-part=${(e: CustomEvent) => this.choose(e.detail.id)}
           @toggle-part-hidden=${(e: CustomEvent) => this.toggleHiddenPart(e.detail.id)}
           @set-all-parts-hidden=${(e: CustomEvent) =>