@things-factory/figure-ui 10.1.72 → 10.1.74

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/v3-editor.ts

@@ -7,7 +7,7 @@ import { live } from 'lit/directives/live.js'
 import { PART_LIMIT, parseV3Recipe, resolveV3Recipe, v3PartCountOf, v3RecipeIdFor } from '@hatiolab/figure-model'
 import type { RecipeTemplate } from './v3-recipes.js'
 import './figure-v3-recipe-catalog.js'
-import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation, V3Recipe, V3RecipeValue } from '@hatiolab/figure-model'
+import type { V3Asset, V3AuthoringAction, V3InputChange, V3PartEdit, V3PrimitiveCreation, V3ProposalStep, 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'
@@ -269,6 +269,8 @@ export class FigureV3Editor extends LitElement {
   /** Reads a template's guide; given by the page. */
   @property({ attribute: false }) guideOf?: (name: string) => Promise<string>
   @property({ attribute: false }) thumbnailOf?: (name: string) => string
+  /** The 「보드에서 바꿀 수 있음」 form being filled for a row, before it is published (ADR-0096). */
+  @state() private publishing?: { part: string; label: string; min: number; max: number }
   @state() private catalogOpen = false
   /** Why the last recipe was refused, in the kernel's words. */
   @state() private recipeError = ''
@@ -1040,6 +1042,7 @@ export class FigureV3Editor extends LitElement {
             })
           : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
       </p>
+      ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
       ${asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
         ? html`<button act ?disabled=${unavailable} @click=${() => this.run(() => this.session!.command({ kind: 'remove-repeat', part: this.selected }))}>
             <md-icon>close</md-icon>${i18next.t('figure.button.remove-repeat')}
@@ -1047,6 +1050,80 @@ export class FigureV3Editor extends LitElement {
         : nothing}
     </section>`
   }
+  /** The design input a row's pitch is read from, when it is read from one (ADR-0096). */
+  private pitchInputOf(asset: V3Asset, part: string): string | undefined {
+    const pitch = asset.joints?.find(j => j.body1.part === part && j.repeat)?.repeat?.pitch as { from?: { of?: string; input?: string } } | number | undefined
+    return typeof pitch === 'object' && pitch?.from?.of === 'input' ? pitch.from.input : undefined
+  }
+  /**
+   * 「보드에서 바꿀 수 있음」 (ADR-0096): the row's pitch made a design input the figure publishes -- a name on the board and
+   * a range the board's value is held to -- in one step; changed or withdrawn the same way. Only a row with a record.
+   */
+  private renderPublicPitch(asset: V3Asset, pitch: number, unavailable: boolean) {
+    const part = this.selected
+    if (!asset.joints?.some(j => j.body1.part === part && j.repeat)) return nothing
+    const from = this.pitchInputOf(asset, part)
+    const listed = from ? asset.publicInputs?.find(p => p.input === from) : undefined
+    const input = from ? asset.document.model.inputs.find(i => i.id === from) : undefined
+    const form =
+      this.publishing?.part === part
+        ? this.publishing
+        : listed && input
+          ? { part, label: listed.label, min: input.min, max: input.max }
+          : undefined
+    const open = !!form
+    const edit = (key: 'label' | 'min' | 'max') => (e: Event) => {
+      const target = e.target as HTMLInputElement
+      const base = form ?? { part, label: '', min: 0, max: 0 }
+      this.publishing = { ...base, [key]: key === 'label' ? target.value : target.valueAsNumber }
+    }
+    const steps = (): V3ProposalStep[] => {
+      const f = form!
+      const id = from ?? `${part}.pitch`
+      if (listed) return [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }, { kind: 'publish-input', input: id, label: f.label }] as V3ProposalStep[]
+      const exists = asset.document.model.inputs.some(i => i.id === id)
+      return [
+        ...(exists ? [{ kind: 'set-input-range', input: id, min: f.min, max: f.max }] : [{ kind: 'add-design-input', id, unit: 'mm', min: f.min, max: f.max, value: pitch }]),
+        ...(from ? [] : [{ kind: 'set-repeat', part, pitch: { from: { of: 'input', input: id } } }]),
+        { kind: 'publish-input', input: id, label: f.label }
+      ] as V3ProposalStep[]
+    }
+    const run = (list: V3ProposalStep[]) => {
+      try {
+        this.session!.applyRecipe(list)
+        this.publishing = undefined
+        this.error = ''
+        this.changed()
+      } catch (error) {
+        this.error = error instanceof Error ? error.message : String(error)
+      }
+    }
+    return html`<div public-pitch>
+      <label toggle>
+        <input
+          type="checkbox"
+          aria-label="figure.label.board-sets"
+          .checked=${open}
+          ?disabled=${unavailable}
+          @change=${(e: Event) =>
+            (e.target as HTMLInputElement).checked
+              ? (this.publishing = { part, label: i18next.t('figure.label.repeat-gap'), min: Math.max(1, Math.round(pitch / 2)), max: Math.round(pitch * 2) })
+              : listed
+                ? run([{ kind: 'unpublish-input', input: from }, { kind: 'set-repeat', part, pitch }] as V3ProposalStep[])
+                : (this.publishing = undefined)}
+        />
+        ${i18next.t('figure.label.board-sets')}
+      </label>
+      ${open
+        ? html`<div inline-field><label>${i18next.t('figure.label.board-name')}</label><input aria-label="figure.label.board-name" .value=${form!.label} @change=${edit('label')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.least')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.least" .value=${String(form!.min)} @change=${edit('min')} /></div>
+            <div inline-field><label>${i18next.t('figure.label.most')} <span unit>mm</span></label><input type="number" step="any" aria-label="figure.label.most" .value=${String(form!.max)} @change=${edit('max')} /></div>
+            <button act publish-pitch ?disabled=${unavailable || !form!.label.trim()} @click=${() => run(steps())}>
+              <md-icon>${listed ? 'check' : 'ios_share'}</md-icon>${i18next.t(listed ? 'figure.button.apply' : 'figure.button.publish-input')}
+            </button>`
+        : nothing}
+    </div>`
+  }
   /**
    * A pitch always goes through `set-repeat`: the command moves the longest length with it (at most `limit` copies),
    * which a plain input edit would not. Refused only when the authored length would already hold more copies than
@@ -1056,6 +1133,13 @@ export class FigureV3Editor extends LitElement {
     const input = event.target as HTMLInputElement
     const pitch = input.valueAsNumber
     if (!Number.isFinite(pitch) || pitch === field.value) return
+    /* Read from a design input the board may set: the input's value changes, the row keeps reading it (ADR-0096). */
+    const from = this.pitchInputOf(JSON.parse(this.session!.source()) as V3Asset, this.selected)
+    if (from) {
+      this.run(() => this.session!.apply([{ kind: 'set-design', input: from, unit: 'mm', value: pitch }]))
+      input.value = String(this.session!.read().fields.find(i => i.id === from)?.value ?? field.value)
+      return
+    }
     try {
       this.session!.command({ kind: 'set-repeat', part: this.selected, pitch })
       this.error = ''
@@ -1228,7 +1312,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];