@things-factory/figure-ui 10.1.71 → 10.1.73

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

@@ -27,6 +27,7 @@ import {
   shownWhenOf,
   visibilityControlsOf,
   placeKeptOf,
+  fasteningOf,
   hasInstanceSize,
   holdsThings,
   leadersFor,
@@ -49,7 +50,7 @@ import { HelpToggles } from './v3-help.js'
 const FACES = Object.keys(V3_FACES) as V3Face[]
 
 const freshFasten = () => ({
-  face: 'bottom' as V3Face,
+  face: 'bottom' as V3Face | 'centre',
   toPlane: false,
   target: '',
   targetFace: 'top' as V3Face,
@@ -131,7 +132,9 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   */
   willUpdate(changed: Map<string, unknown>) {
     if (changed.has('partId') && changed.get('partId') !== undefined) {
-      this.fasten = freshFasten()
+      /* A part's own fastening is not another part's choices: the form opens on it (walk 1, 2026-09-26). */
+      const own = this.asset && this.partId ? fasteningOf(this.asset, this.partId) : null
+      this.fasten = own ? ({ ...freshFasten(), ...own } as ReturnType<typeof freshFasten>) : freshFasten()
       this.motion = freshMotion()
       this.place = freshPlace()
       this.row = freshRow()
@@ -355,8 +358,12 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     /* 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)
-    const mineFaces = facesOf(asset, this.partId).filter(face => FACES.includes(face as V3Face) && (!f.toPlane || plane.faces.includes(face as V3Face)))
-    const myFace = mineFaces.includes(f.face) ? f.face : (mineFaces[0] as V3Face)
+    /* Its outer faces, and its centre -- a roller spins about its middle (ADR-0093); the mounting plane takes a face. */
+    const mineFaces: Array<V3Face | 'centre'> = [
+      ...(facesOf(asset, this.partId).filter(face => FACES.includes(face as V3Face) && (!f.toPlane || plane.faces.includes(face as V3Face))) as V3Face[]),
+      ...(f.toPlane ? [] : (['centre'] as const))
+    ]
+    const myFace = mineFaces.includes(f.face) ? f.face : mineFaces[0]!
     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) : { part: f.target, face: targetFace }
@@ -372,7 +379,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
         : nothing}
       <div form>
         <span>${i18next.t('figure.label.my-face')}</span>
-        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as V3Face })}>
+        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as V3Face | 'centre' })}>
           ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
         </select>
       </div>

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

@@ -463,6 +463,7 @@ export class FigureV3Parts extends localize(i18next)(LitElement) {
     >
       <b>${b.grade}</b>
       <span>
+        <strong performance-cost>${i18next.t('figure.label.performance-cost')}</strong>
         ${i18next.t('figure.text.parts-budget', {
           triangles: b.triangles.toLocaleString(),
           groups: b.groups.toLocaleString(),

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

@@ -161,8 +161,9 @@ export class FigureV3Properties extends localize(i18next)(LitElement) {
 
   private renderMounting(facts: V3FigureFacts) {
     const mounting = facts.mounting
-    const part = [this.pickedPart, mounting?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))
-    const face: V3Face = this.pickedFace ?? mounting?.face ?? 'bottom'
+    /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */
+    const part = [this.pickedPart, mounting?.part, facts.suggested?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))
+    const face: V3Face = this.pickedFace ?? mounting?.face ?? facts.suggested?.face ?? 'bottom'
     return html`
       <div field>
         <label>${i18next.t('figure.label.mounting-face')}</label>

package/client/modeller/figure-v3-recipe-catalog.ts

@@ -239,8 +239,23 @@ export class FigureV3RecipeCatalog extends localize(i18next)(LitElement) {
   @state() private query = ''
   @state() private chosen = ''
   @state() private values: Record<string, V3RecipeValue> = {}
+  /*
+    The guide as a page \`ox-markdown\` can read: it renders what its src points to, not text, and given the text it
+    fetched it as a path and drew the app's own page in its place (seen on :3300, 2026-09-26). A blob of type
+    text/markdown is read as markdown.
+  */
   @state() private guide = ''
 
+  private set guideText(text: string) {
+    if (this.guide) URL.revokeObjectURL(this.guide)
+    this.guide = text ? URL.createObjectURL(new Blob([text], { type: 'text/markdown' })) : ''
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.guideText = ''
+  }
+
   render() {
     const language = i18next.language || 'en'
     const categories = [...new Set(this.templates.map(t => t.category))].sort()
@@ -283,16 +298,19 @@ export class FigureV3RecipeCatalog extends localize(i18next)(LitElement) {
     if (this.chosen === t.name) return
     this.chosen = t.name
     this.values = Object.fromEntries(t.recipe.params.map(p => [p.name, p.default]))
-    this.guide = ''
+    this.guideText = ''
     this.guideOf?.(t.name)
-      .then(text => this.chosen === t.name && (this.guide = text))
+      .then(text => this.chosen === t.name && (this.guideText = text))
       .catch(() => {})
   }
 
   protected willUpdate() {
-    /* The first card is chosen while nothing is, so the detail is never empty. */
+    /*
+      The first card shown is chosen while none of those shown is, so the detail is never empty and never of a card the
+      search or the category has taken away (the air cylinder stayed told under a search for rollers, :3300, 2026-09-26).
+    */
     const shown = recipesMatching(this.templates, this.category, this.query)
-    if (!this.templates.some(t => t.name === this.chosen) && shown[0]) this.choose(shown[0])
+    if (!shown.some(t => t.name === this.chosen) && shown[0]) this.choose(shown[0])
   }
 
   private renderDetail(t: RecipeTemplate, language: string) {

package/client/modeller/v3-editor.ts

@@ -1228,7 +1228,7 @@ export class FigureV3Editor extends LitElement {
                         name-field
                         aria-label=${i18next.t('figure.label.name')}
                         .value=${partLabelOf(this.selected)}
-                        ?disabled=${unavailable || !!repeatOf(this.selected, view.geometry)}
+                        ?disabled=${unavailable || !!repeatOf(this.selected, view.geometry)?.index}
                         @change=${(e: Event) => this.renamePart(e.target as HTMLInputElement)}
                       />
                     </div>

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

@@ -1,4 +1,4 @@
-import { parseV3Asset } from '@hatiolab/figure-model'
+import { compileV3Asset, parseV3Asset, v3OccupiedBoxesOf, v3WritersOf } from '@hatiolab/figure-model'
 import type { V3Asset, V3Face } from '@hatiolab/figure-model'
 
 /*
@@ -14,6 +14,12 @@ export interface V3FigureFacts {
   declared: boolean
   placement?: Placement
   mounting?: { part: string; face: V3Face }
+  /**
+   * Where the figure meets its plane, as its parts stand: the part whose bottom is lowest for a floor, whose top is
+   * highest for a ceiling, whose back is furthest back for a wall. What the mounting face is offered as before one is
+   * chosen -- the first part in the list offered a conveyor's bed, 700 mm up on its legs (walk 1, 2026-09-26).
+   */
+  suggested?: { part: string; face: V3Face }
 }
 
 /**
@@ -33,10 +39,28 @@ export function v3FigureFacts(source: string): V3FigureFacts {
     parts,
     declared: !!asset.occupancy,
     placement: asset.occupancy?.placement as Placement | undefined,
-    mounting: found ? { part: found[1], face: found[2] as V3Face } : undefined
+    mounting: found ? { part: found[1], face: found[2] as V3Face } : undefined,
+    suggested: suggestedMountOf(asset, parts)
   }
 }
 
+function suggestedMountOf(asset: V3Asset, parts: string[]): { part: string; face: V3Face } | undefined {
+  const placement = (asset.occupancy?.placement ?? 'floor') as Placement
+  if (placement === 'center' || !parts.length) return undefined
+  let boxes
+  try {
+    boxes = v3OccupiedBoxesOf(compileV3Asset(asset).evaluate().geometry, v3WritersOf(asset)).filter(b => parts.includes(b.part))
+  } catch {
+    return undefined
+  }
+  const [axis, face, sign] = placement === 'wall' ? (['z', 'back', -1] as const) : placement === 'ceiling' ? (['y', 'top', 1] as const) : (['y', 'bottom', -1] as const)
+  /* The side of each box that faces the plane; the one furthest toward it, the first in the list among equals. */
+  const reach = (b: (typeof boxes)[number]) => sign * (b.centre[axis] + (sign * b.extent[axis]) / 2)
+  let best: (typeof boxes)[number] | undefined
+  for (const b of boxes) if (!best || reach(b) > reach(best) + 1e-6) best = b
+  return best ? { part: best.part, face } : undefined
+}
+
 /**
  * A tag line as a list: split on commas, drop a leading `#`, keep each once. An empty
  * line is an empty list, so an author can clear every tag.

package/client/modeller/v3-links.ts

@@ -182,6 +182,56 @@ export function hangsFrom(asset: V3Asset, part: string, from: string): boolean {
   return false
 }
 
+/**
+ * The fastening a part has, as the fastening form holds it -- so the form opens on what is there (the face, including
+ * \`centre\`, the target and its face, the gap, the twist and where across the face) and a change is a change to that.
+ * Opening it on the defaults showed a roller fastened by its centre as fastened by its bottom, and fastening again
+ * from there broke its turning in place (walk 1, 2026-09-26). Null for a part fastened to nothing.
+ */
+export function fasteningOf(
+  asset: V3Asset,
+  part: string
+): {
+  face: string
+  toPlane: boolean
+  target: string
+  targetFace: string
+  facing: 'meet' | 'flush'
+  gap: number
+  twist: number
+  align: Partial<Record<Axis, Alignment>>
+  alignMm: Partial<Record<Axis, number>>
+} | null {
+  const record = asset.joints?.find(j => j.body1.part === part)
+  if (!record) return null
+  const toPlane = 'plane' in record.body0
+  const target = 'part' in record.body0 ? record.body0.part : ''
+  const targetFace = 'part' in record.body0 ? record.body0.face : 'top'
+  const twist = record.origin?.twist ?? 0
+  /* Where across the face: as the record says it, and where it says nothing, where the part stands now. */
+  const kept = placeKeptOf(asset, part, toPlane ? 'plane' : { part: target, face: targetFace }, !!twist)
+  for (const [axis, how] of Object.entries(record.origin?.align ?? {}) as Array<[Axis, unknown]>) {
+    if (how === 'min' || how === 'max' || how === 'centre') {
+      kept.align[axis] = how
+      delete kept.alignMm[axis]
+    } else if (how && typeof how === 'object' && typeof (how as { mm?: unknown }).mm === 'number') {
+      kept.align[axis] = 'mm'
+      kept.alignMm[axis] = (how as { mm: number }).mm
+    }
+  }
+  const gap = record.origin?.gap
+  return {
+    face: record.body1.face,
+    toPlane,
+    target,
+    targetFace,
+    facing: record.origin?.facing ?? 'meet',
+    gap: typeof gap === 'number' ? gap : 0,
+    twist,
+    ...kept
+  }
+}
+
 /**
  * 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

package/client/modeller/v3-recipes.ts

@@ -84,9 +84,24 @@ export function recipeFieldOf(param: V3RecipeParam, value: V3RecipeValue): strin
 /** The templates a category and words find: a word matches the title, the description, the name or a tag. */
 export function recipesMatching<T extends { category: string; title: string; description: string; name: string; tags: string[] }>(templates: readonly T[], category: string, query: string): T[] {
   const words = query.trim().toLowerCase().split(/\s+/).filter(Boolean)
-  return templates.filter(t => {
+  const found = templates.filter(t => {
     if (category && t.category !== category) return false
     const text = [t.title, t.description, t.name, ...t.tags].join(' ').toLowerCase()
     return words.every(w => text.includes(w))
   })
+  if (!words.length) return found
+  /*
+    What the search names comes first: a title that is the words, then one that starts with them, then a title word that
+    does, then the rest in their order. 「다리」 listed 사다리 before 다리 넷 (walk 1, 2026-09-26).
+  */
+  const rank = (t: T) => {
+    const title = t.title.toLowerCase()
+    const query = words.join(' ')
+    if (title === query) return 0
+    if (title.startsWith(query)) return 1
+    if (words.every(w => title.split(/\s+/).some(part => part.startsWith(w)))) return 2
+    if (words.every(w => title.includes(w))) return 3
+    return 4
+  }
+  return found.map((t, i) => ({ t, i, r: rank(t) })).sort((a, b) => a.r - b.r || a.i - b.i).map(x => x.t)
 }

package/dist-client/modeller/figure-v3-links.js

@@ -4,7 +4,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { V3_FACES } from '@hatiolab/figure-model';
-import { acceptsOf, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, positionsWorkedOut } from './v3-links.js';
+import { acceptsOf, alignAxesOf, mountingPlaneOf, alignOf, AXES, canFasten, facesOf, canFollow, dimensionNow, followableAxes, positionIsShare, choiceOf, heldBy, followOf, hangsFrom, shownWhenOf, visibilityControlsOf, placeKeptOf, fasteningOf, hasInstanceSize, holdsThings, leadersFor, motionOf, motionFormOf, motionJoint, placeFacesOf, placeIdFor, placesOn, rowAxesOf, positionsWorkedOut } from './v3-links.js';
 import { SidePanelStyles } from './side-panel-styles.js';
 import { HelpToggles } from './v3-help.js';
 const FACES = Object.keys(V3_FACES);
@@ -85,7 +85,9 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
     */
     willUpdate(changed) {
         if (changed.has('partId') && changed.get('partId') !== undefined) {
-            this.fasten = freshFasten();
+            /* A part's own fastening is not another part's choices: the form opens on it (walk 1, 2026-09-26). */
+            const own = this.asset && this.partId ? fasteningOf(this.asset, this.partId) : null;
+            this.fasten = own ? { ...freshFasten(), ...own } : freshFasten();
             this.motion = freshMotion();
             this.place = freshPlace();
             this.row = freshRow();
@@ -294,7 +296,11 @@ let FigureV3Links = class FigureV3Links extends localize(i18next)(LitElement) {
         /* 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);
-        const mineFaces = facesOf(asset, this.partId).filter(face => FACES.includes(face) && (!f.toPlane || plane.faces.includes(face)));
+        /* Its outer faces, and its centre -- a roller spins about its middle (ADR-0093); the mounting plane takes a face. */
+        const mineFaces = [
+            ...facesOf(asset, this.partId).filter(face => FACES.includes(face) && (!f.toPlane || plane.faces.includes(face))),
+            ...(f.toPlane ? [] : ['centre'])
+        ];
         const myFace = mineFaces.includes(f.face) ? f.face : mineFaces[0];
         const theirFaces = f.target ? facesOf(asset, f.target) : FACES;
         const targetFace = theirFaces.includes(f.targetFace) ? f.targetFace : theirFaces[0];