@things-factory/figure-ui 10.1.74 → 10.1.76

package/client/modeller/{figure-v3-capability.ts → figure-capability-panel.ts}

@@ -3,8 +3,8 @@ import { customElement, property } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { v3BindingsOf } from '@hatiolab/figure-model'
-import type { FigureCapability, V3Asset } from '@hatiolab/figure-model'
+import { figureBindingsOf } from '@hatiolab/figure-model'
+import type { FigureCapability, FigureAsset } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 
 /*
@@ -32,8 +32,8 @@ export function rungOf(names: readonly string[] | undefined): Rung | null {
  * holding things, to passing them on, and every place things are held, whatever part it is on. A place is not drawn,
  * so the list is the only way to find one; choosing a row selects its part, where the place is edited.
  */
-@customElement('figure-v3-capability')
-export class FigureV3Capability extends localize(i18next)(LitElement) {
+@customElement('figure-capability-panel')
+export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
   static styles = [SidePanelStyles, css`
     :host {
       display: block;
@@ -84,7 +84,7 @@ export class FigureV3Capability extends localize(i18next)(LitElement) {
     }
   `]
 
-  @property({ attribute: false }) asset?: V3Asset
+  @property({ attribute: false }) asset?: FigureAsset
   /** The selected part, whose places are marked. */
   @property() selected = ''
   @property({ type: Boolean }) locked = false
@@ -94,7 +94,7 @@ export class FigureV3Capability extends localize(i18next)(LitElement) {
     if (!asset) return nothing
     const names = asset.document.capabilities.names ?? []
     const rung = rungOf(names)
-    const places = v3BindingsOf(asset)
+    const places = figureBindingsOf(asset)
     return html`<section>
       <h3>${i18next.t('figure.label.what-this-does')}</h3>
       ${(['none', 'hold', 'flow'] as const).map(
@@ -128,7 +128,7 @@ export class FigureV3Capability extends localize(i18next)(LitElement) {
   }
 
   private setRung(which: Rung) {
-    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which]] } }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names: [...RUNGS[which]] } }, bubbles: true, composed: true }))
   }
 
   private pick(part: string) {

package/client/modeller/{figure-v3-clips.ts → figure-clips.ts}

@@ -4,11 +4,11 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import type { V3Asset } from '@hatiolab/figure-model'
+import type { FigureAsset } from '@hatiolab/figure-model'
 
-import { clipsOf, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipTrack } from './v3-clips.js'
+import { clipsOf, poseAt, trackEdit, undrivenOf, withKey, withoutKey, type Clip, type ClipTrack } from './clips.js'
 import { SidePanelStyles } from './side-panel-styles.js'
-import { HelpToggles } from './v3-help.js'
+import { HelpToggles } from './help.js'
 
 /**
  * 클립 — controls played by keys over time. A clip is one clock; each track plays one
@@ -16,8 +16,8 @@ import { HelpToggles } from './v3-help.js'
  * is added at the scrubbed moment with the control's value there, so a pose is made with the controls' sliders and
  * then kept as a key. Every change is one part edit.
  */
-@customElement('figure-v3-clips')
-export class FigureV3Clips extends localize(i18next)(LitElement) {
+@customElement('figure-clips')
+export class FigureClips extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
   static styles = [SidePanelStyles, css`
     :host {
@@ -91,7 +91,7 @@ export class FigureV3Clips extends localize(i18next)(LitElement) {
     }
   `]
 
-  @property({ attribute: false }) asset?: V3Asset
+  @property({ attribute: false }) asset?: FigureAsset
   /** The values the editor holds now, by input id -- what a new key takes. */
   @property({ attribute: false }) values: Record<string, number> = {}
   @property({ type: Boolean }) locked = false
@@ -184,7 +184,7 @@ export class FigureV3Clips extends localize(i18next)(LitElement) {
     </div>`
   }
 
-  private renderAdd(asset: V3Asset, clips: Clip[]) {
+  private renderAdd(asset: FigureAsset, clips: Clip[]) {
     const free = undrivenOf(asset)
     if (!free.length) return clips.length ? nothing : html`<p hint>${i18next.t('figure.text.no-controls')}</p>`
     const a = this.adding
@@ -241,13 +241,13 @@ export class FigureV3Clips extends localize(i18next)(LitElement) {
     if (!changes.length) return
     if (live) {
       const values = Object.fromEntries(changes.map(c => [c.input, c.value]))
-      this.dispatchEvent(new CustomEvent('v3-states-live', { detail: { values }, bubbles: true, composed: true }))
+      this.dispatchEvent(new CustomEvent('states-live', { detail: { values }, bubbles: true, composed: true }))
       return
     }
-    this.dispatchEvent(new CustomEvent('v3-states', { detail: { changes }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('states', { detail: { changes }, bubbles: true, composed: true }))
   }
 
   private edit(edit: unknown) {
-    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
 }

package/client/modeller/{figure-v3-controls.ts → figure-controls.ts}

@@ -4,9 +4,9 @@ import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import type { V3Asset } from '@hatiolab/figure-model'
+import type { FigureAsset } from '@hatiolab/figure-model'
 
-import { controlsOf, poseAsDefault, poseDiffers, type Control } from './v3-controls.js'
+import { controlsOf, poseAsDefault, poseDiffers, type Control } from './controls.js'
 import { dialShape } from './angle-dial.js'
 import { SidePanelStyles } from './side-panel-styles.js'
 
@@ -15,12 +15,12 @@ import { SidePanelStyles } from './side-panel-styles.js'
  * with a slider to try it, its name, range and travel time, and a button that keeps the pose being looked at as the
  * pose it stands in when placed.
  *
- * Trying a value is an input change (`v3-state`, not saved as the default); naming, the range and the travel time are
+ * Trying a value is an input change (`state`, not saved as the default); naming, the range and the travel time are
  * one `set-state-input` part edit each; keeping the pose is one `set-state-defaults` edit. A control is made with
  * a motion on a part (「움직임」), which is where it gets its meaning.
  */
-@customElement('figure-v3-controls')
-export class FigureV3Controls extends localize(i18next)(LitElement) {
+@customElement('figure-controls')
+export class FigureControls extends localize(i18next)(LitElement) {
   static styles = [SidePanelStyles, css`
     :host {
       display: block;
@@ -96,7 +96,7 @@ export class FigureV3Controls extends localize(i18next)(LitElement) {
   `]
 
   /** The asset being edited. */
-  @property({ attribute: false }) asset?: V3Asset
+  @property({ attribute: false }) asset?: FigureAsset
   /** The values the editor holds now, by input id. */
   @property({ attribute: false }) values: Record<string, number> = {}
   @property({ type: Boolean }) locked = false
@@ -193,7 +193,7 @@ export class FigureV3Controls extends localize(i18next)(LitElement) {
   private drag(c: Control, value: number) {
     if (!Number.isFinite(value)) return
     this.live = { ...this.live, [c.id]: value }
-    this.dispatchEvent(new CustomEvent('v3-state-live', { detail: { input: c.id, value }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('state-live', { detail: { input: c.id, value }, bubbles: true, composed: true }))
   }
 
   /** Try a value: the pose being looked at, clamped to the range. Not saved as the default. The slider sends it on
@@ -203,10 +203,10 @@ export class FigureV3Controls extends localize(i18next)(LitElement) {
     const clamped = Math.min(Math.max(value, c.min), c.max)
     const { [c.id]: _released, ...rest } = this.live
     this.live = rest
-    this.dispatchEvent(new CustomEvent('v3-state', { detail: { input: c.id, unit: c.unit, value: clamped }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('state', { detail: { input: c.id, unit: c.unit, value: clamped }, bubbles: true, composed: true }))
   }
 
   private edit(edit: unknown) {
-    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
 }

package/client/modeller/{v3-figure-facts.ts → figure-facts.ts}

@@ -1,25 +1,25 @@
-import { compileV3Asset, parseV3Asset, v3OccupiedBoxesOf, v3WritersOf } from '@hatiolab/figure-model'
-import type { V3Asset, V3Face } from '@hatiolab/figure-model'
+import { compileFigureAsset, parseFigureAsset, figureOccupiedBoxesOf, figureWritersOf } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureFace } from '@hatiolab/figure-model'
 
 /*
- * What the V3 properties tab reads, kept apart from the element so it can be tested without a browser.
+ * What the properties tab reads, kept apart from the element so it can be tested without a browser.
  */
 
 export type Placement = 'floor' | 'ceiling' | 'center' | 'wall'
 
 /** What the properties tab reads off the asset. Absent parts of the asset read as absent, never as a default. */
-export interface V3FigureFacts {
+export interface FigureFigureFacts {
   name: string
   parts: string[]
   declared: boolean
   placement?: Placement
-  mounting?: { part: string; face: V3Face }
+  mounting?: { part: string; face: FigureFace }
   /**
    * 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 }
+  suggested?: { part: string; face: FigureFace }
 }
 
 /**
@@ -29,8 +29,8 @@ export interface V3FigureFacts {
  * records the face only as that node, so this is where the screen learns which one is chosen. Parts are the placed
  * bodies (`place@1`), in the order the model lists them.
  */
-export function v3FigureFacts(source: string): V3FigureFacts {
-  const asset = parseV3Asset(source) as V3Asset & { document: { model: { nodes: Array<{ id: string; op: string }> } } }
+export function figureFigureFacts(source: string): FigureFigureFacts {
+  const asset = parseFigureAsset(source) as FigureAsset & { document: { model: { nodes: Array<{ id: string; op: string }> } } }
   const parts = asset.document.model.nodes.filter(node => node.op === 'place@1').map(node => node.id)
   const feature = (asset.occupancy?.contact as { surface?: { feature?: string } } | undefined)?.surface?.feature
   const found = feature?.match(/^(.+)\.mount\.(left|right|bottom|top|back|front)\.value$/)
@@ -39,17 +39,17 @@ 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 FigureFace } : undefined,
     suggested: suggestedMountOf(asset, parts)
   }
 }
 
-function suggestedMountOf(asset: V3Asset, parts: string[]): { part: string; face: V3Face } | undefined {
+function suggestedMountOf(asset: FigureAsset, parts: string[]): { part: string; face: FigureFace } | 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))
+    boxes = figureOccupiedBoxesOf(compileFigureAsset(asset).evaluate().geometry, figureWritersOf(asset)).filter(b => parts.includes(b.part))
   } catch {
     return undefined
   }

package/client/modeller/{figure-v3-first-save.ts → figure-first-save.ts}

@@ -7,14 +7,14 @@ import { CommonPopupStyles, FormFieldStyles } from '@operato/styles'
 import '@material/web/button/filled-button.js'
 import '@material/web/button/text-button.js'
 
-import { firstSaveRefusalOf, releasableType, typeOf, type FirstSave } from './v3-first-save.js'
+import { firstSaveRefusalOf, releasableType, typeOf, type FirstSave } from './first-save.js'
 
 /**
  * The first save of a new figure: its type and its name, asked once, in the suite's popup look.
  * Closes with the answer, or with nothing when cancelled -- then nothing is saved.
  */
-@customElement('figure-v3-first-save')
-export class FigureV3FirstSave extends LitElement {
+@customElement('figure-first-save')
+export class FigureFirstSave extends LitElement {
   static styles = [
     FormFieldStyles,
     CommonPopupStyles,

package/client/modeller/figure-history-panel.ts

@@ -210,7 +210,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
   /** 저장하지 않은 것이 있나 — 있으면 발행을 막는다. */
   @property({ type: Boolean }) dirty = false
   /**
-   * 행의 타입. 판정 하나(`type-is-placeholder`)가 이것을 본다 — V3 자산은 타입을 원본에 적지 않아서, 타입을 바꾸면
+   * 행의 타입. 판정 하나(`type-is-placeholder`)가 이것을 본다 — 자산은 타입을 원본에 적지 않아서, 타입을 바꾸면
    * 원본도 dirty 도 그대로다. 그래서 이 값이 바뀌면 판정을 다시 묻는다. 안 그러면 타입을 정한 뒤에도 「임시 타입」
    * 판정이 남아 발행 단추가 잠긴 채다.
    */

package/client/modeller/{figure-v3-links.ts → figure-links.ts}

@@ -4,8 +4,8 @@ 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 type { V3Asset, V3AuthoringAction, V3DimensionSource, V3Face } from '@hatiolab/figure-model'
+import { FIGURE_FACES } from '@hatiolab/figure-model'
+import type { FigureAsset, FigureAuthoringAction, FigureDimensionSource, FigureFace } from '@hatiolab/figure-model'
 
 import {
   acceptsOf,
@@ -43,17 +43,17 @@ import {
   type Axis,
   type Follow,
   type MotionForm
-} from './v3-links.js'
+} from './links.js'
 import { SidePanelStyles } from './side-panel-styles.js'
-import { HelpToggles } from './v3-help.js'
+import { HelpToggles } from './help.js'
 
-const FACES = Object.keys(V3_FACES) as V3Face[]
+const FACES = Object.keys(FIGURE_FACES) as FigureFace[]
 
 const freshFasten = () => ({
-  face: 'bottom' as V3Face | 'centre',
+  face: 'bottom' as FigureFace | 'centre',
   toPlane: false,
   target: '',
-  targetFace: 'top' as V3Face,
+  targetFace: 'top' as FigureFace,
   facing: 'meet' as 'meet' | 'flush',
   gap: 0,
   twist: 0,
@@ -62,7 +62,7 @@ const freshFasten = () => ({
 })
 const freshMotion = (): MotionForm => ({ kind: 'slide', axis: 'x', id: '', min: 0, max: 500, follow: '', multiplier: 1, offset: 0, travel: '', travelPlus: 0 })
 const freshRow = () => ({ axis: '' as Axis | '', pitch: 200, fills: true, count: 5 })
-const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as V3Face, label: '', accepts: '', capacity: 1 })
+const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as FigureFace, label: '', accepts: '', capacity: 1 })
 
 /**
  * What a part is tied to — its size response, what it is fastened to, how it moves.
@@ -73,12 +73,12 @@ const freshPlace = () => ({ role: 'grip' as 'seat' | 'grip', face: 'top' as V3Fa
  * parts that come away — this is where they do it. Motion is a joint: a slide or a turn driven by a control.
  *
  * The sections are dimensions, placement and joint, in that order. Every
- * change is one figure-model authoring command, sent as `v3-command` and run by the editor through the session — one
+ * change is one figure-model authoring command, sent as `command` and run by the editor through the session — one
  * step of the undo history. Choices the command would refuse (a round body fastened, a size following an instance
  * size the figure does not declare) are not offered, so the author is not sent into a refusal.
  */
-@customElement('figure-v3-links')
-export class FigureV3Links extends localize(i18next)(LitElement) {
+@customElement('figure-links')
+export class FigureLinks extends localize(i18next)(LitElement) {
   private readonly help = new HelpToggles(this)
   static styles = [SidePanelStyles, css`
     :host {
@@ -110,7 +110,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   `]
 
   /** The asset being edited. */
-  @property({ attribute: false }) asset?: V3Asset
+  @property({ attribute: false }) asset?: FigureAsset
   /** The selected part. */
   @property() partId = ''
   /** The part's own extent along its axes now, in mm — what a dimension is fixed at when it stops following. */
@@ -166,7 +166,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   }
 
   /** Where things are held on this part: a seat things rest on, or a grip things are held in. */
-  private renderPlaces(asset: V3Asset) {
+  private renderPlaces(asset: FigureAsset) {
     const faces = placeFacesOf(asset, this.partId)
     const p = this.place
     const face = faces.includes(p.face) ? p.face : faces[0]!
@@ -196,7 +196,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
           <option value="grip" ?selected=${p.role === 'grip'}>${roleName('grip')}</option>
           <option value="seat" ?selected=${p.role === 'seat'}>${roleName('seat')}</option>
         </select>
-        <select @change=${(e: Event) => (this.place = { ...p, face: (e.target as HTMLSelectElement).value as V3Face })}>
+        <select @change=${(e: Event) => (this.place = { ...p, face: (e.target as HTMLSelectElement).value as FigureFace })}>
           ${faces.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
         </select>
       </div>
@@ -230,12 +230,12 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   }
 
   /** The figure holds things: `Capacity` and `Holdable`, the ladder's middle rung. One part edit, one undo step. */
-  private declareHolding(asset: V3Asset) {
+  private declareHolding(asset: FigureAsset) {
     const names = [...new Set([...(asset.document.capabilities.names ?? []), 'Capacity', 'Holdable'])]
-    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit: { kind: 'set-capabilities', names } }, bubbles: true, composed: true }))
   }
 
-  private renderDimensions(asset: V3Asset) {
+  private renderDimensions(asset: FigureAsset) {
     const others = asset.appearance.map(look => look.target).filter(one => one !== this.partId && canFollow(asset, one))
     const round = followableAxes(asset, this.partId).length === 2
     /* One step for the whole part (figure-model follow-size): the size is declared from the parts if there is none. */
@@ -292,12 +292,12 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
   private followPlus(axis: Axis, now: Follow, plus: number) {
     if (now.of !== 'instance' && now.of !== 'part') return
     if ((now.plus ?? 0) === plus) return
-    const source: V3DimensionSource = now.of === 'instance' ? { of: 'instance', axis: now.axis } : { of: 'part', part: now.part, axis: now.axis }
+    const source: FigureDimensionSource = now.of === 'instance' ? { of: 'instance', axis: now.axis } : { of: 'part', part: now.part, axis: now.axis }
     const times = now.of === 'instance' ? now.times : (now.times ?? 1)
     this.command({ kind: 'link-dimension', part: this.partId, axis, source, ...(times !== 1 ? { times } : {}), ...(plus ? { plus } : {}), replace: true })
   }
 
-  private follow(asset: V3Asset, axis: Axis, choice: string, now: Follow) {
+  private follow(asset: FigureAsset, axis: Axis, choice: string, now: Follow) {
     const following = now.of !== 'own'
     /* The measure as it stands: a dimension stops following at it, and a share is taken of it. */
     const current = dimensionNow(asset, this.partId, axis) ?? this.dims?.[AXES.indexOf(axis)] ?? 100
@@ -315,7 +315,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
       this.command({ kind: 'link-dimension', part: this.partId, axis, source: { of: 'instance', axis: a as Axis }, times, replace: following })
       return
     }
-    const source: V3DimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
+    const source: FigureDimensionSource = of === 'instance' ? { of: 'instance', axis: a as Axis } : { of: 'part', part: a!, axis: b as Axis }
     this.command({ kind: 'link-dimension', part: this.partId, axis, source, replace: following })
   }
 
@@ -323,7 +323,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
    * Positions worked out from other values, each with the way to
    * keep it where it is. This is the way out the release gate names when a resize leaves a part in the air.
    */
-  private renderPositions(asset: V3Asset) {
+  private renderPositions(asset: FigureAsset) {
     return positionsWorkedOut(asset, this.partId).map(
       axis => html`<div pair>
         <span>${axis.toUpperCase()} · ${i18next.t(positionIsShare(asset, this.partId, axis) ? 'figure.label.position-in-proportion' : 'figure.label.position-worked-out')}</span>
@@ -343,14 +343,14 @@ 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>) {
+  private aimAt(asset: FigureAsset, 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) {
+  private renderFastening(asset: FigureAsset) {
     const held = heldBy(asset, this.partId)
     const f = this.fasten
     /* Not a part that hangs from this one: fastening a frame to its own roller would close a loop. */
@@ -359,8 +359,8 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     /* 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)
     /* 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[]),
+    const mineFaces: Array<FigureFace | 'centre'> = [
+      ...(facesOf(asset, this.partId).filter(face => FACES.includes(face as FigureFace) && (!f.toPlane || plane.faces.includes(face as FigureFace))) as FigureFace[]),
       ...(f.toPlane ? [] : (['centre'] as const))
     ]
     const myFace = mineFaces.includes(f.face) ? f.face : mineFaces[0]!
@@ -379,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 | 'centre' })}>
+        <select @change=${(e: Event) => (this.fasten = { ...f, face: (e.target as HTMLSelectElement).value as FigureFace | 'centre' })}>
           ${mineFaces.map(face => html`<option value=${face} ?selected=${face === myFace}>${i18next.t('figure.label.face-' + face)}</option>`)}
         </select>
       </div>
@@ -396,7 +396,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
               ${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.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as V3Face })}>
+            <select @change=${(e: Event) => this.aimAt(asset, { ...f, targetFace: (e.target as HTMLSelectElement).value as FigureFace })}>
               ${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>
@@ -426,7 +426,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
             twist: f.twist,
             ...(align ? { align } : {}),
             replace: !!held
-          } as V3AuthoringAction)}
+          } as FigureAuthoringAction)}
       >
         <md-icon>link</md-icon>${i18next.t('figure.button.fasten')}
       </button>
@@ -468,7 +468,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
    * face, copies a pitch apart filling the parent's length, or a count spread over it. Once made, the row's own section
    * (the editor's) shows it and takes it away.
    */
-  private renderRow(asset: V3Asset) {
+  private renderRow(asset: FigureAsset) {
     const axes = rowAxesOf(asset, this.partId)
     if (!axes.length) return nothing
     const r = this.row
@@ -497,7 +497,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
       <button
         act
         ?disabled=${this.locked || !ok}
-        @click=${() => this.command({ kind: 'make-repeat', part: this.partId, axis, pitch: r.pitch, ...(r.fills ? {} : { count: r.count }) } as V3AuthoringAction)}
+        @click=${() => this.command({ kind: 'make-repeat', part: this.partId, axis, pitch: r.pitch, ...(r.fills ? {} : { count: r.count }) } as FigureAuthoringAction)}
       >
         <md-icon>view_week</md-icon>${i18next.t('figure.button.make-repeat')}
       </button>
@@ -508,12 +508,12 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
    * 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) {
+  private renderShown(asset: FigureAsset) {
     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 }))
+      this.dispatchEvent(new CustomEvent('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
@@ -547,7 +547,7 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
       </div>`
   }
 
-  private renderMotion(asset: V3Asset) {
+  private renderMotion(asset: FigureAsset) {
     const now = motionOf(asset, this.partId)
     const joint = asset.joints?.find(j => j.body1.part === this.partId)
     if (now && !(this.editingMotion && joint)) {
@@ -663,8 +663,8 @@ export class FigureV3Links extends localize(i18next)(LitElement) {
     this.motion = kind === 'slide' ? { ...this.motion, kind, min: 0, max: 500 } : { ...this.motion, kind, min: -90, max: 90 }
   }
 
-  private command(action: V3AuthoringAction) {
-    this.dispatchEvent(new CustomEvent('v3-command', { detail: { action }, bubbles: true, composed: true }))
+  private command(action: FigureAuthoringAction) {
+    this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))
   }
 }
 

package/client/modeller/{figure-v3-material.ts → figure-material-panel.ts}

@@ -2,9 +2,9 @@ import { css, html, LitElement, nothing, svg } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
-import { MATERIAL_PRESETS, SEGMENT_PRESETS, v3TrianglesOf } from '@hatiolab/figure-model'
+import { MATERIAL_PRESETS, SEGMENT_PRESETS, figureTrianglesOf } from '@hatiolab/figure-model'
 import { activePalette } from '@hatiolab/things-scene'
-import type { V3AssetGeometry, V3Material, V3PartEdit } from '@hatiolab/figure-model'
+import type { FigureAssetGeometry, FigureMaterial, FigurePartEdit } from '@hatiolab/figure-model'
 import { SidePanelStyles } from './side-panel-styles.js'
 
 /** The purpose each palette role is for, by its token. */
@@ -27,20 +27,20 @@ const ROUND = new Set(['cylinder', 'ellipticCylinder', 'sphere', 'frustum'])
 const DEFAULT_SEGMENTS = 12
 
 /**
- * 재질 — a V3 part's material.
+ * 재질 — a part's material.
  *
- * An earlier editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The V3 material
+ * An earlier editor showed the colour role as a raw token (`palette.dark`) in a select and nothing else. The material
  * holds the colour role, a preset, transparency and a glow; a round body also has how finely its rim is drawn. This
  * shows those: painted colours and lit colours as two groups of swatches, each named for what it
  * is for.
  *
- * Not here, because a V3 material has no place for them: flat shading and casting
+ * Not here, because a material has no place for them: flat shading and casting
  * shadows. The glow's colour comes from the lit colours.
  *
- * Every change leaves as one `v3-part-edit`; the editor runs it through the session, one step of the undo history.
+ * Every change leaves as one `part-edit`; the editor runs it through the session, one step of the undo history.
  */
-@customElement('figure-v3-material')
-export class FigureV3Material extends localize(i18next)(LitElement) {
+@customElement('figure-material-panel')
+export class FigureMaterialPanel extends localize(i18next)(LitElement) {
   static styles = [SidePanelStyles, css`
     :host {
       display: block;
@@ -154,7 +154,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
   `]
 
   /** The selected body as evaluated — its material, its segments and its shape. */
-  @property({ attribute: false }) body?: V3AssetGeometry & { id: string }
+  @property({ attribute: false }) body?: FigureAssetGeometry & { id: string }
   /** The asset's palette, token → colour. */
   @property({ attribute: false }) palette: Record<string, string> = {}
   @property({ type: Boolean }) locked = false
@@ -188,7 +188,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
         <label>${i18next.t('figure.label.preset')}</label>
         <select
           ?disabled=${this.locked}
-          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as V3Material['preset'] })}
+          @change=${(e: Event) => this.put({ preset: ((e.target as HTMLSelectElement).value || undefined) as FigureMaterial['preset'] })}
         >
           <option value="" ?selected=${!material.preset}>${i18next.t('figure.label.none')}</option>
           ${MATERIAL_PRESETS.map(
@@ -229,7 +229,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
     </section>`
   }
 
-  private renderSegments(part: V3AssetGeometry & { id: string }) {
+  private renderSegments(part: FigureAssetGeometry & { id: string }) {
     const provider = (part as { shape?: { provider?: string } }).shape?.provider ?? ''
     if (!ROUND.has(provider)) return nothing
     const current = part.segments ?? DEFAULT_SEGMENTS
@@ -246,7 +246,7 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
             >
               ${silhouette(preset)}
               <b>${preset}</b>
-              <small>${i18next.t('figure.text.n-triangles', { count: v3TrianglesOf({ ...part, segments: preset }) })}</small>
+              <small>${i18next.t('figure.text.n-triangles', { count: figureTrianglesOf({ ...part, segments: preset }) })}</small>
             </button>`
           )}
         </div>
@@ -289,10 +289,10 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
     this.put({ emissive: intensity > 0 ? { token: material.emissive?.token ?? material.token, intensity, on: true } : undefined }, live)
   }
 
-  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`v3-part-live`). */
-  private put(patch: Partial<V3Material>, live = false) {
-    const material: V3Material = { ...this.body!.material, ...patch }
-    for (const key of Object.keys(material) as (keyof V3Material)[]) if (material[key] === undefined) delete material[key]
+  /** A material change: recorded, or -- while a slider is dragged -- only drawn (`part-live`). */
+  private put(patch: Partial<FigureMaterial>, live = false) {
+    const material: FigureMaterial = { ...this.body!.material, ...patch }
+    for (const key of Object.keys(material) as (keyof FigureMaterial)[]) if (material[key] === undefined) delete material[key]
     /* The colours this material names that the asset does not carry yet. */
     const offered = this.offered()
     const palette = Object.fromEntries(
@@ -300,13 +300,13 @@ export class FigureV3Material extends localize(i18next)(LitElement) {
         .filter((token): token is string => !!token && this.palette[token] === undefined && offered[token] !== undefined)
         .map(token => [token, offered[token]!])
     )
-    const edit: V3PartEdit = { kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) }
-    if (live) this.dispatchEvent(new CustomEvent('v3-part-live', { detail: { edit }, bubbles: true, composed: true }))
+    const edit: FigurePartEdit = { kind: 'set-material', target: this.body!.id, material, ...(Object.keys(palette).length ? { palette } : {}) }
+    if (live) this.dispatchEvent(new CustomEvent('part-live', { detail: { edit }, bubbles: true, composed: true }))
     else this.edit(edit)
   }
 
-  private edit(edit: V3PartEdit) {
-    this.dispatchEvent(new CustomEvent('v3-part-edit', { detail: { edit }, bubbles: true, composed: true }))
+  private edit(edit: FigurePartEdit) {
+    this.dispatchEvent(new CustomEvent('part-edit', { detail: { edit }, bubbles: true, composed: true }))
   }
 }