@things-factory/figure-ui 10.1.74 → 10.1.76

package/dist-client/modeller/canvas.js

@@ -0,0 +1,379 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css, nothing, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { i18next } from '@operato/i18n';
+import { create, Model, niceGridStep } from '@hatiolab/things-scene';
+import { DEFAULT_VIEW, sceneLook, WORKBENCH } from './figure-view.js';
+import { boardFor, changedKeys, componentOf, gizmoResultOf } from './stage-model.js';
+import { JOINT_FAN } from './joint-fan.js';
+import { ownerOf } from './fields.js';
+/* The fan's colour when the figure's palette names no accent. */
+const FAN_COLOUR = '#ff8a00';
+/* The 2D side of the board, which the author never sees on this page but the scene paints. */
+const PAPER = '#ffffff';
+let FigureCanvas = class FigureCanvas extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.parts = [];
+        this.palette = {};
+        /** Which figure is open. Another one stands the board up again. */
+        this.context = '';
+        this.selected = '';
+        /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */
+        this.reach = { translate: false, rotate: false, scale: false };
+        this.view = DEFAULT_VIEW;
+        /**
+         * View only: nothing that happens on the board is told out. The card's picture is taken from a second canvas stood up
+         * off screen (`thumbnail.ts`); the scene settles its components as it builds them, and a change told from there
+         * would reach the editor as an edit.
+         */
+        this.viewOnly = false;
+        /** Where the selected part turns and how far (`joint-fan`): shown, never picked, never saved. */
+        this.fan = null;
+        /** Set while this canvas writes to components, so the scene's echo of it is not taken for a drag. */
+        this.writing = false;
+        /** Components the gizmo changed since the last commit, by part name. */
+        this.pending = new Map();
+        this.pointerDown = false;
+        this.onPointerDown = () => {
+            this.pointerDown = true;
+        };
+        this.onPointerUp = () => {
+            if (!this.pointerDown)
+                return;
+            this.pointerDown = false;
+            /* After the scene's own drag end (it settles the depth and rebuilds the geometry on release). */
+            this.commitSoon(0);
+        };
+    }
+    static { this.styles = css `
+    :host {
+      position: relative;
+      display: flex;
+      min-height: 0;
+      overflow: hidden;
+      background-color: ${unsafeCSS(WORKBENCH)};
+    }
+    /* The scene sets position: relative inline on its target; the size is given so it still fills the host. */
+    div[stage] {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+    p {
+      position: absolute;
+      inset: 45% 1rem auto;
+      margin: 0;
+      text-align: center;
+      pointer-events: none;
+      color: #f4f4f4;
+    }
+  `; }
+    render() {
+        return html `<div stage></div>${this.parts.length ? nothing : html `<p>${i18next.t('figure.text.add-a-shape-to-start')}</p>`}`;
+    }
+    firstUpdated() {
+        this.standUp();
+        this.watcher = new ResizeObserver(() => this.scene?.resize?.());
+        this.watcher.observe(this);
+    }
+    updated(changed) {
+        if (!this.hasUpdated)
+            return;
+        if (changed.has('parts') || changed.has('palette') || changed.has('context') || changed.has('fan'))
+            this.standUp();
+        if (changed.has('view'))
+            this.applyView();
+        if (changed.has('selected'))
+            this.showSelected();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+        this.watcher = undefined;
+        this.teardown();
+    }
+    /**
+     * The board as a picture, for the card: the 3D view at this size, or nothing when it cannot be taken. The scene's
+     * `toDataURL` renders the 2D board (a white sheet), and the 3D renderer keeps no drawing buffer, so the
+     * scene's own `snapshot3d` draws and reads in one task. A picture that cannot be taken is not an error and is not
+     * faked (user, 2026-09-24: no card had a picture after this canvas moved onto the scene).
+     */
+    async snapshot(width = 480, height = 360) {
+        const layer = this.scene?.root;
+        if (!layer?.snapshot3d)
+            return undefined;
+        try {
+            /* webp: a card needs no alpha, and png is three or four times heavier in every list response. */
+            const url = await layer.snapshot3d(width, height, 'image/webp', 0.85);
+            return typeof url === 'string' && url.startsWith('data:') ? url : undefined;
+        }
+        catch (e) {
+            console.warn(`[thumbnail] could not take the picture -- ${e.message}`);
+            return undefined;
+        }
+    }
+    /** The whole figure in view: the board's fit, then the 3D camera's own. */
+    fit() {
+        this.scene?.fit?.('ratio');
+        this.scene?.root?.fitCameraToModel?.();
+    }
+    /** The gizmo in a mode on the selected part, as W, E and R do with the canvas focused -- the scene's toggle. */
+    gizmo(mode) {
+        this.scene?.root?.setGizmoMode?.(mode);
+    }
+    /**
+     * Stand the board up for this figure, or bring the one standing up to date. A new board only for another figure or
+     * one that has outgrown it -- standing up again loses the selection and the camera.
+     */
+    standUp() {
+        if (!this.stage)
+            return;
+        const needed = boardFor(this.parts, this.board);
+        const outgrown = !this.board || needed.width > this.board.width || needed.height > this.board.height || needed.depth > this.board.depth;
+        if (this.scene && this.standingFor === this.context) {
+            /*
+              A part dragged past the board's edge grows the board where it stands. Standing it up again lost the selection,
+              the gizmo and the camera after every such drag -- the gizmo seemed not to work at all (user, 2026-09-24).
+            */
+            if (outgrown)
+                this.grow(needed);
+            this.sync();
+            return;
+        }
+        this.teardown();
+        if (!this.parts.length)
+            return;
+        this.board = needed;
+        try {
+            this.scene = create({
+                target: this.stage,
+                model: {
+                    type: 'model-layer',
+                    width: needed.width,
+                    height: needed.height,
+                    depth: needed.depth,
+                    threed: true,
+                    /* Two samples a pixel: MSAA alone leaves steps on the silhouettes of one asset shown large. */
+                    pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
+                    ...sceneLook(this.view ?? DEFAULT_VIEW),
+                    gridStep: niceGridStep(Math.max(needed.width, needed.height)),
+                    sky: 'color',
+                    fillStyle: PAPER,
+                    components: this.components()
+                },
+                /* Editing mode: the camera view buttons, gizmo modes, help and keys. */
+                mode: 1
+            });
+            this.standingFor = this.context;
+            this.watchScene();
+            this.scene.resize?.();
+            this.fit();
+            this.showSelected();
+        }
+        catch (error) {
+            this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }));
+        }
+    }
+    components() {
+        const parts = this.parts.map(part => componentOf(part, this.palette, this.board)).filter((c) => !!c);
+        /* The fan in the accent colour, translucent; `capturable: false` keeps clicks, the marquee and the gizmo off it. */
+        const fan = this.fan ? componentOf(this.fan, { ...this.palette, [JOINT_FAN]: this.palette['palette.accent'] ?? FAN_COLOUR }, this.board) : null;
+        return fan ? [...parts, { ...fan, capturable: false, locked: true }] : parts;
+    }
+    /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */
+    standing() {
+        const found = new Map();
+        for (const component of this.scene?.root?.components ?? []) {
+            const name = component.state?.name;
+            if (typeof name === 'string')
+                found.set(name, component);
+        }
+        return found;
+    }
+    /** A larger board under the same scene: its size, and the grid that suits it. Components are re-placed by `sync`. */
+    grow(needed) {
+        const layer = this.scene?.root;
+        this.board = needed;
+        if (!layer)
+            return;
+        this.writing = true;
+        try {
+            layer.set({ width: needed.width, height: needed.height, depth: needed.depth, gridStep: niceGridStep(Math.max(needed.width, needed.height)) });
+        }
+        finally {
+            this.writing = false;
+        }
+    }
+    /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */
+    sync() {
+        const layer = this.scene?.root;
+        if (!layer || !this.board)
+            return;
+        const wanted = new Map(this.components().map(c => [c.name, c]));
+        const standing = this.standing();
+        this.writing = true;
+        try {
+            for (const [name, component] of standing) {
+                if (wanted.has(name))
+                    continue;
+                layer.removeComponent?.(component);
+                component.dispose?.();
+            }
+            for (const [name, state] of wanted) {
+                const found = standing.get(name);
+                if (found) {
+                    const diff = changedKeys(found.state, state);
+                    if (diff)
+                        found.set(diff);
+                    continue;
+                }
+                const made = Model.compile({ ...state }, layer.app);
+                if (made)
+                    layer.addComponent?.(made);
+            }
+        }
+        finally {
+            this.writing = false;
+        }
+        layer.invalidate?.();
+    }
+    /** Selection and drags, told out by the part's name -- never by its place in the list, which may change meanwhile. */
+    watchScene() {
+        const layer = this.scene?.root;
+        const root = layer?.root;
+        if (!layer || !root?.on || this.viewOnly)
+            return;
+        root.on('selected', (after) => {
+            const name = after?.[0]?.state?.name;
+            const id = typeof name === 'string' ? name : '';
+            if (ownerOf(id) !== this.selected)
+                this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }));
+        });
+        /*
+          A change comes up to the board with the component in the last argument's `origin` (the scene appends
+          { origin, name, deliverer } as it bubbles). Reading the first argument as the component does nothing.
+        */
+        /*
+          A drag is written once, when it ends. The scene's gizmo writes the component on every move -- a size anchored on
+          the opposite face, from the scale it captured when the drag began -- and writing each move back through the
+          editor (and the evaluation back onto the component) fought it: the scale gizmo did not work (user, 2026-09-24).
+          While a pointer is down the changes are only kept; on release the last one is told, and the board is brought to
+          the evaluation. A change with no pointer down (the arrow keys) is told after a short pause.
+        */
+        layer.on?.('change', (...args) => {
+            if (this.writing)
+                return;
+            const origin = args[args.length - 1]?.origin;
+            const name = origin?.state?.name;
+            if (typeof name !== 'string' || !this.parts.some(p => p.id === name))
+                return;
+            this.pending.set(name, origin);
+            if (!this.pointerDown)
+                this.commitSoon(80);
+        });
+        this.stage.addEventListener('pointerdown', this.onPointerDown, true);
+        window.addEventListener('pointerup', this.onPointerUp, true);
+        window.addEventListener('pointercancel', this.onPointerUp, true);
+    }
+    commitSoon(delay) {
+        clearTimeout(this.commitTimer);
+        this.commitTimer = setTimeout(() => this.commit(), delay);
+    }
+    /** Tell each changed part once, in the inputs' terms; then put the board where the inputs say (a refusal springs back). */
+    commit() {
+        /*
+          Not while a pointer is down: a pause set by a change just before the press (the arrow keys, the scene settling
+          the pick) fired in the middle of the drag and wrote where the part was then -- a drag on a part placed by a rule
+          became two steps, the first one a few millimetres in (browser check, 2026-09-25). What is pending waits for the release.
+        */
+        if (this.pointerDown || !this.board || !this.pending.size)
+            return;
+        const changed = [...this.pending];
+        this.pending.clear();
+        for (const [name, component] of changed) {
+            const part = this.parts.find(p => p.id === name);
+            if (!part)
+                continue;
+            const result = gizmoResultOf(part, component.state, this.board);
+            if (!result.position && !result.rotation && !result.scale)
+                continue;
+            this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }));
+        }
+        setTimeout(() => this.sync());
+    }
+    showSelected() {
+        const layer = this.scene?.root;
+        const root = layer?.root;
+        if (!layer || !root)
+            return;
+        /* A repeat is selected whole: every copy of it (the editor selects the part the author made). */
+        const wanted = this.selected ? [...this.standing()].filter(([name]) => ownerOf(name) === this.selected).map(([, component]) => component) : [];
+        const now = root.selected ?? [];
+        if (now.length === wanted.length && wanted.every((one, i) => now[i] === one))
+            return;
+        root.selected = wanted;
+        layer.invalidate?.();
+    }
+    /** View settings go into the scene as they are: they are the board's own state names. Nothing is stood up again. */
+    applyView() {
+        const layer = this.scene?.root;
+        if (!layer)
+            return;
+        layer.set(sceneLook(this.view ?? DEFAULT_VIEW));
+        layer.invalidate?.();
+    }
+    teardown() {
+        clearTimeout(this.commitTimer);
+        this.pending.clear();
+        this.stage?.removeEventListener('pointerdown', this.onPointerDown, true);
+        window.removeEventListener('pointerup', this.onPointerUp, true);
+        window.removeEventListener('pointercancel', this.onPointerUp, true);
+        this.scene?.dispose?.();
+        this.scene = undefined;
+        this.standingFor = undefined;
+        this.board = undefined;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureCanvas.prototype, "parts", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "palette", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "context", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "selected", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "reach", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "view", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "viewOnly", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], FigureCanvas.prototype, "fan", void 0);
+__decorate([
+    query('div[stage]'),
+    __metadata("design:type", HTMLDivElement)
+], FigureCanvas.prototype, "stage", void 0);
+FigureCanvas = __decorate([
+    customElement('figure-canvas')
+], FigureCanvas);
+export { FigureCanvas };
+//# sourceMappingURL=canvas.js.map

package/dist-client/modeller/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../client/modeller/canvas.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { i18next } from '@operato/i18n'\nimport { create, Model, niceGridStep } from '@hatiolab/things-scene'\n\nimport type { GizmoReach } from './gizmo.js'\nimport type { FigureRenderPart } from './renderer.js'\nimport { DEFAULT_VIEW, sceneLook, WORKBENCH, type ViewSettings } from './figure-view.js'\nimport { boardFor, changedKeys, componentOf, gizmoResultOf, type Board } from './stage-model.js'\nimport { JOINT_FAN } from './joint-fan.js'\nimport { ownerOf } from './fields.js'\n\n/*\n * The modeller's canvas -- a things-scene board in editing mode.\n *\n * Each body figure-model evaluates stands on the board as a `figure-part` component, so everything the canvas\n * has comes from the scene, not from code of our own: picking and the orange outline, the gizmo with its snapping and\n * live readout, box and shift selection, the camera (damping, zoom toward the cursor, double-click to fit, the six\n * view presets and their keys), the studio environment, the coordinate ground, lights and shadows, supersampling.\n * An earlier canvas drew the bodies with three.js directly and lost all of that (user, 2026-09-24: \"why nerf it?\").\n *\n * What the gizmo writes back to a component comes out as `part-transformed` in the inputs' terms (`stage-model`),\n * and the editor turns it into one step of the history; the next evaluation puts the component where the inputs say,\n * so a change a part cannot take (a fastened part moved) springs back.\n */\n\ninterface SceneComponent {\n  state: Record<string, unknown>\n  set: (props: Record<string, unknown>) => void\n  dispose?: () => void\n}\ninterface SceneLayer extends SceneComponent {\n  components?: SceneComponent[]\n  root?: { on?: (event: string, handler: (...args: unknown[]) => void) => void; selected?: SceneComponent[] }\n  on?: (event: string, handler: (...args: unknown[]) => void) => void\n  addComponent?: (component: SceneComponent) => void\n  removeComponent?: (component: SceneComponent) => void\n  invalidate?: () => void\n  fitCameraToModel?: () => void\n  setGizmoMode?: (mode: 'translate' | 'rotate' | 'scale') => void\n  app?: unknown\n}\ninterface SceneHandle {\n  dispose?: () => void\n  resize?: () => void\n  fit?: (type?: string) => void\n  root?: SceneLayer\n}\n\n/* The fan's colour when the figure's palette names no accent. */\nconst FAN_COLOUR = '#ff8a00'\n\n/* The 2D side of the board, which the author never sees on this page but the scene paints. */\nconst PAPER = '#ffffff'\n\n@customElement('figure-canvas')\nexport class FigureCanvas extends LitElement {\n  static styles = css`\n    :host {\n      position: relative;\n      display: flex;\n      min-height: 0;\n      overflow: hidden;\n      background-color: ${unsafeCSS(WORKBENCH)};\n    }\n    /* The scene sets position: relative inline on its target; the size is given so it still fills the host. */\n    div[stage] {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    }\n    p {\n      position: absolute;\n      inset: 45% 1rem auto;\n      margin: 0;\n      text-align: center;\n      pointer-events: none;\n      color: #f4f4f4;\n    }\n  `\n  @property({ attribute: false }) parts: FigureRenderPart[] = []\n  @property({ attribute: false }) palette: Record<string, string> = {}\n  /** Which figure is open. Another one stands the board up again. */\n  @property() context = ''\n  @property() selected = ''\n  /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */\n  @property({ attribute: false }) reach: GizmoReach = { translate: false, rotate: false, scale: false }\n  @property({ attribute: false }) view: ViewSettings = DEFAULT_VIEW\n  /**\n   * View only: nothing that happens on the board is told out. The card's picture is taken from a second canvas stood up\n   * off screen (`thumbnail.ts`); the scene settles its components as it builds them, and a change told from there\n   * would reach the editor as an edit.\n   */\n  @property({ type: Boolean }) viewOnly = false\n  /** Where the selected part turns and how far (`joint-fan`): shown, never picked, never saved. */\n  @property({ attribute: false }) fan: FigureRenderPart | null = null\n\n  @query('div[stage]') private stage!: HTMLDivElement\n\n  private scene?: SceneHandle\n  private board?: Board & { depth: number }\n  private standingFor?: string\n  private watcher?: ResizeObserver\n  /** Set while this canvas writes to components, so the scene's echo of it is not taken for a drag. */\n  private writing = false\n\n  render() {\n    return html`<div stage></div>${this.parts.length ? nothing : html`<p>${i18next.t('figure.text.add-a-shape-to-start')}</p>`}`\n  }\n\n  firstUpdated() {\n    this.standUp()\n    this.watcher = new ResizeObserver(() => this.scene?.resize?.())\n    this.watcher.observe(this)\n  }\n\n  protected updated(changed: PropertyValues) {\n    if (!this.hasUpdated) return\n    if (changed.has('parts') || changed.has('palette') || changed.has('context') || changed.has('fan')) this.standUp()\n    if (changed.has('view')) this.applyView()\n    if (changed.has('selected')) this.showSelected()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.watcher?.disconnect()\n    this.watcher = undefined\n    this.teardown()\n  }\n\n  /**\n   * The board as a picture, for the card: the 3D view at this size, or nothing when it cannot be taken. The scene's\n   * `toDataURL` renders the 2D board (a white sheet), and the 3D renderer keeps no drawing buffer, so the\n   * scene's own `snapshot3d` draws and reads in one task. A picture that cannot be taken is not an error and is not\n   * faked (user, 2026-09-24: no card had a picture after this canvas moved onto the scene).\n   */\n  async snapshot(width = 480, height = 360): Promise<string | undefined> {\n    const layer = this.scene?.root as (SceneLayer & { snapshot3d?: (w?: number, h?: number, type?: string, quality?: number) => Promise<string | undefined> }) | undefined\n    if (!layer?.snapshot3d) return undefined\n    try {\n      /* webp: a card needs no alpha, and png is three or four times heavier in every list response. */\n      const url = await layer.snapshot3d(width, height, 'image/webp', 0.85)\n      return typeof url === 'string' && url.startsWith('data:') ? url : undefined\n    } catch (e) {\n      console.warn(`[thumbnail] could not take the picture -- ${(e as Error).message}`)\n      return undefined\n    }\n  }\n\n  /** The whole figure in view: the board's fit, then the 3D camera's own. */\n  fit() {\n    this.scene?.fit?.('ratio')\n    this.scene?.root?.fitCameraToModel?.()\n  }\n\n  /** The gizmo in a mode on the selected part, as W, E and R do with the canvas focused -- the scene's toggle. */\n  gizmo(mode: 'translate' | 'rotate' | 'scale') {\n    this.scene?.root?.setGizmoMode?.(mode)\n  }\n\n  /**\n   * Stand the board up for this figure, or bring the one standing up to date. A new board only for another figure or\n   * one that has outgrown it -- standing up again loses the selection and the camera.\n   */\n  private standUp() {\n    if (!this.stage) return\n    const needed = boardFor(this.parts, this.board)\n    const outgrown = !this.board || needed.width > this.board.width || needed.height > this.board.height || needed.depth > this.board.depth\n    if (this.scene && this.standingFor === this.context) {\n      /*\n        A part dragged past the board's edge grows the board where it stands. Standing it up again lost the selection,\n        the gizmo and the camera after every such drag -- the gizmo seemed not to work at all (user, 2026-09-24).\n      */\n      if (outgrown) this.grow(needed)\n      this.sync()\n      return\n    }\n    this.teardown()\n    if (!this.parts.length) return\n    this.board = needed\n    try {\n      this.scene = create({\n        target: this.stage,\n        model: {\n          type: 'model-layer',\n          width: needed.width,\n          height: needed.height,\n          depth: needed.depth,\n          threed: true,\n          /* Two samples a pixel: MSAA alone leaves steps on the silhouettes of one asset shown large. */\n          pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),\n          ...sceneLook(this.view ?? DEFAULT_VIEW),\n          gridStep: niceGridStep(Math.max(needed.width, needed.height)),\n          sky: 'color',\n          fillStyle: PAPER,\n          components: this.components()\n        },\n        /* Editing mode: the camera view buttons, gizmo modes, help and keys. */\n        mode: 1\n      }) as SceneHandle\n      this.standingFor = this.context\n      this.watchScene()\n      this.scene.resize?.()\n      this.fit()\n      this.showSelected()\n    } catch (error) {\n      this.dispatchEvent(new CustomEvent('render-error', { detail: error, bubbles: true, composed: true }))\n    }\n  }\n\n  private components(): Record<string, unknown>[] {\n    const parts = this.parts.map(part => componentOf(part, this.palette, this.board!)).filter((c): c is Record<string, unknown> => !!c)\n    /* The fan in the accent colour, translucent; `capturable: false` keeps clicks, the marquee and the gizmo off it. */\n    const fan = this.fan ? componentOf(this.fan, { ...this.palette, [JOINT_FAN]: this.palette['palette.accent'] ?? FAN_COLOUR }, this.board!) : null\n    return fan ? [...parts, { ...fan, capturable: false, locked: true }] : parts\n  }\n\n  /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */\n  private standing(): Map<string, SceneComponent> {\n    const found = new Map<string, SceneComponent>()\n    for (const component of this.scene?.root?.components ?? []) {\n      const name = component.state?.name\n      if (typeof name === 'string') found.set(name, component)\n    }\n    return found\n  }\n\n  /** A larger board under the same scene: its size, and the grid that suits it. Components are re-placed by `sync`. */\n  private grow(needed: Board & { depth: number }) {\n    const layer = this.scene?.root\n    this.board = needed\n    if (!layer) return\n    this.writing = true\n    try {\n      layer.set({ width: needed.width, height: needed.height, depth: needed.depth, gridStep: niceGridStep(Math.max(needed.width, needed.height)) })\n    } finally {\n      this.writing = false\n    }\n  }\n\n  /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */\n  private sync() {\n    const layer = this.scene?.root\n    if (!layer || !this.board) return\n    const wanted = new Map(this.components().map(c => [c.name as string, c]))\n    const standing = this.standing()\n    this.writing = true\n    try {\n      for (const [name, component] of standing) {\n        if (wanted.has(name)) continue\n        layer.removeComponent?.(component)\n        component.dispose?.()\n      }\n      for (const [name, state] of wanted) {\n        const found = standing.get(name)\n        if (found) {\n          const diff = changedKeys(found.state, state)\n          if (diff) found.set(diff)\n          continue\n        }\n        const made = Model.compile({ ...state }, layer.app as never) as SceneComponent | null\n        if (made) layer.addComponent?.(made)\n      }\n    } finally {\n      this.writing = false\n    }\n    layer.invalidate?.()\n  }\n\n  /** Selection and drags, told out by the part's name -- never by its place in the list, which may change meanwhile. */\n  private watchScene() {\n    const layer = this.scene?.root\n    const root = layer?.root\n    if (!layer || !root?.on || this.viewOnly) return\n    root.on('selected', (after: unknown) => {\n      const name = (after as SceneComponent[] | undefined)?.[0]?.state?.name\n      const id = typeof name === 'string' ? name : ''\n      if (ownerOf(id) !== this.selected) this.dispatchEvent(new CustomEvent('part-selected', { detail: id, bubbles: true, composed: true }))\n    })\n    /*\n      A change comes up to the board with the component in the last argument's `origin` (the scene appends\n      { origin, name, deliverer } as it bubbles). Reading the first argument as the component does nothing.\n    */\n    /*\n      A drag is written once, when it ends. The scene's gizmo writes the component on every move -- a size anchored on\n      the opposite face, from the scale it captured when the drag began -- and writing each move back through the\n      editor (and the evaluation back onto the component) fought it: the scale gizmo did not work (user, 2026-09-24).\n      While a pointer is down the changes are only kept; on release the last one is told, and the board is brought to\n      the evaluation. A change with no pointer down (the arrow keys) is told after a short pause.\n    */\n    layer.on?.('change', (...args: unknown[]) => {\n      if (this.writing) return\n      const origin = (args[args.length - 1] as { origin?: SceneComponent } | undefined)?.origin\n      const name = origin?.state?.name\n      if (typeof name !== 'string' || !this.parts.some(p => p.id === name)) return\n      this.pending.set(name, origin!)\n      if (!this.pointerDown) this.commitSoon(80)\n    })\n    this.stage.addEventListener('pointerdown', this.onPointerDown, true)\n    window.addEventListener('pointerup', this.onPointerUp, true)\n    window.addEventListener('pointercancel', this.onPointerUp, true)\n  }\n\n  /** Components the gizmo changed since the last commit, by part name. */\n  private pending = new Map<string, SceneComponent>()\n  private pointerDown = false\n  private commitTimer?: ReturnType<typeof setTimeout>\n  private onPointerDown = () => {\n    this.pointerDown = true\n  }\n  private onPointerUp = () => {\n    if (!this.pointerDown) return\n    this.pointerDown = false\n    /* After the scene's own drag end (it settles the depth and rebuilds the geometry on release). */\n    this.commitSoon(0)\n  }\n  private commitSoon(delay: number) {\n    clearTimeout(this.commitTimer)\n    this.commitTimer = setTimeout(() => this.commit(), delay)\n  }\n  /** Tell each changed part once, in the inputs' terms; then put the board where the inputs say (a refusal springs back). */\n  private commit() {\n    /*\n      Not while a pointer is down: a pause set by a change just before the press (the arrow keys, the scene settling\n      the pick) fired in the middle of the drag and wrote where the part was then -- a drag on a part placed by a rule\n      became two steps, the first one a few millimetres in (browser check, 2026-09-25). What is pending waits for the release.\n    */\n    if (this.pointerDown || !this.board || !this.pending.size) return\n    const changed = [...this.pending]\n    this.pending.clear()\n    for (const [name, component] of changed) {\n      const part = this.parts.find(p => p.id === name)\n      if (!part) continue\n      const result = gizmoResultOf(part, component.state, this.board)\n      if (!result.position && !result.rotation && !result.scale) continue\n      this.dispatchEvent(new CustomEvent('part-transformed', { detail: { id: part.id, result }, bubbles: true, composed: true }))\n    }\n    setTimeout(() => this.sync())\n  }\n\n  private showSelected() {\n    const layer = this.scene?.root\n    const root = layer?.root\n    if (!layer || !root) return\n    /* A repeat is selected whole: every copy of it (the editor selects the part the author made). */\n    const wanted = this.selected ? [...this.standing()].filter(([name]) => ownerOf(name) === this.selected).map(([, component]) => component) : []\n    const now = root.selected ?? []\n    if (now.length === wanted.length && wanted.every((one, i) => now[i] === one)) return\n    root.selected = wanted\n    layer.invalidate?.()\n  }\n\n  /** View settings go into the scene as they are: they are the board's own state names. Nothing is stood up again. */\n  private applyView() {\n    const layer = this.scene?.root\n    if (!layer) return\n    layer.set(sceneLook(this.view ?? DEFAULT_VIEW))\n    layer.invalidate?.()\n  }\n\n  private teardown() {\n    clearTimeout(this.commitTimer)\n    this.pending.clear()\n    this.stage?.removeEventListener('pointerdown', this.onPointerDown, true)\n    window.removeEventListener('pointerup', this.onPointerUp, true)\n    window.removeEventListener('pointercancel', this.onPointerUp, true)\n    this.scene?.dispose?.()\n    this.scene = undefined\n    this.standingFor = undefined\n    this.board = undefined\n  }\n}\n"]}

package/dist-client/modeller/clips.d.ts

@@ -0,0 +1,39 @@
+import type { FigureAsset, FigureInputChange } from '@hatiolab/figure-model';
+export interface ClipKey {
+    seconds: number;
+    value: number;
+}
+export interface ClipTrack {
+    state: string;
+    label: string;
+    unit: string;
+    min: number;
+    max: number;
+    keys: ClipKey[];
+    interpolation: 'linear' | 'step';
+    loop: 'wrap' | 'hold';
+    accumulates: boolean;
+}
+export interface Clip {
+    name: string;
+    duration: number;
+    tracks: ClipTrack[];
+}
+export declare function clipsOf(asset: FigureAsset): Clip[];
+/** The controls no clip plays yet -- the ones a new track can take. One driver per control. */
+export declare function undrivenOf(asset: FigureAsset): string[];
+/** The pose a clip gives at a moment, as one batch of state changes -- one step of the history. */
+export declare function poseAt(asset: FigureAsset, clip: string, seconds: number): FigureInputChange[];
+/** A key added at a moment, replacing one already there; the keys stay in time order. */
+export declare function withKey(keys: readonly ClipKey[], key: ClipKey): ClipKey[];
+/** A track's keys without one; a track keeps at least its two ends, as the format asks. */
+export declare function withoutKey(keys: readonly ClipKey[], index: number): ClipKey[] | null;
+/** The edit that writes a track back. */
+export declare const trackEdit: (clip: Clip, track: ClipTrack, patch?: Partial<Pick<ClipTrack, "keys" | "loop" | "interpolation">>) => {
+    kind: "set-driver";
+    state: string;
+    clip: string;
+    keys: ClipKey[];
+    loop: "wrap" | "hold";
+    interpolation: "linear" | "step";
+};

package/dist-client/modeller/clips.js

@@ -0,0 +1,58 @@
+import { driverValue } from '@hatiolab/figure-model';
+const round = (n) => Math.round(n * 1000) / 1000;
+export function clipsOf(asset) {
+    const inputs = new Map(asset.document.model.inputs.map(i => [i.id, i]));
+    const clips = new Map();
+    for (const d of asset.drivers ?? []) {
+        const input = inputs.get(d.state);
+        const clip = clips.get(d.clip) ?? { name: d.clip, duration: d.time.duration, tracks: [] };
+        clip.tracks.push({
+            state: d.state,
+            label: asset.stateInputs?.[d.state]?.label ?? d.state,
+            unit: input?.unit ?? '',
+            min: input?.min ?? 0,
+            max: input?.max ?? 0,
+            keys: d.keys.map(k => ({ seconds: round(k.at * d.time.duration), value: k.value })),
+            interpolation: d.interpolation,
+            loop: d.loop,
+            accumulates: d.accumulates
+        });
+        clips.set(d.clip, clip);
+    }
+    return [...clips.values()];
+}
+/** The controls no clip plays yet -- the ones a new track can take. One driver per control. */
+export function undrivenOf(asset) {
+    const driven = new Set((asset.drivers ?? []).map(d => d.state));
+    return asset.document.model.inputs.filter(i => i.role === 'state' && !driven.has(i.id)).map(i => i.id);
+}
+/** The pose a clip gives at a moment, as one batch of state changes -- one step of the history. */
+export function poseAt(asset, clip, seconds) {
+    const units = new Map(asset.document.model.inputs.map(i => [i.id, i.unit]));
+    return (asset.drivers ?? [])
+        .filter((d) => d.clip === clip)
+        .map(d => {
+        const unit = units.get(d.state);
+        return { kind: 'set-state', input: d.state, unit, value: driverValue(d, seconds, unit === 'deg' || unit === 'rad' ? unit : 'other') };
+    });
+}
+/** A key added at a moment, replacing one already there; the keys stay in time order. */
+export function withKey(keys, key) {
+    return [...keys.filter(k => k.seconds !== key.seconds), key].sort((a, b) => a.seconds - b.seconds);
+}
+/** A track's keys without one; a track keeps at least its two ends, as the format asks. */
+export function withoutKey(keys, index) {
+    if (keys.length <= 2 || index === 0)
+        return null;
+    return keys.filter((_, i) => i !== index);
+}
+/** The edit that writes a track back. */
+export const trackEdit = (clip, track, patch = {}) => ({
+    kind: 'set-driver',
+    state: track.state,
+    clip: clip.name,
+    keys: patch.keys ?? track.keys,
+    loop: patch.loop ?? track.loop,
+    interpolation: patch.interpolation ?? track.interpolation
+});
+//# sourceMappingURL=clips.js.map

package/dist-client/modeller/clips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clips.js","sourceRoot":"","sources":["../../client/modeller/clips.ts"],"names":[],"mappings":"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","sourcesContent":["import { driverValue } from '@hatiolab/figure-model'\nimport type { FigureAsset, FigureDriver, FigureInputChange } from '@hatiolab/figure-model'\n\n/*\n * The figure's clips: controls played by keys over time, grouped into clips that each run on one\n * clock. Kept apart from the element so the reading is tested without a browser.\n */\nexport interface ClipKey {\n  seconds: number\n  value: number\n}\nexport interface ClipTrack {\n  state: string\n  label: string\n  unit: string\n  min: number\n  max: number\n  keys: ClipKey[]\n  interpolation: 'linear' | 'step'\n  loop: 'wrap' | 'hold'\n  accumulates: boolean\n}\nexport interface Clip {\n  name: string\n  duration: number\n  tracks: ClipTrack[]\n}\n\nconst round = (n: number) => Math.round(n * 1000) / 1000\n\nexport function clipsOf(asset: FigureAsset): Clip[] {\n  const inputs = new Map(asset.document.model.inputs.map(i => [i.id, i]))\n  const clips = new Map<string, Clip>()\n  for (const d of asset.drivers ?? []) {\n    const input = inputs.get(d.state)\n    const clip = clips.get(d.clip) ?? { name: d.clip, duration: d.time.duration, tracks: [] }\n    clip.tracks.push({\n      state: d.state,\n      label: asset.stateInputs?.[d.state]?.label ?? d.state,\n      unit: input?.unit ?? '',\n      min: input?.min ?? 0,\n      max: input?.max ?? 0,\n      keys: d.keys.map(k => ({ seconds: round(k.at * d.time.duration), value: k.value })),\n      interpolation: d.interpolation,\n      loop: d.loop,\n      accumulates: d.accumulates\n    })\n    clips.set(d.clip, clip)\n  }\n  return [...clips.values()]\n}\n\n/** The controls no clip plays yet -- the ones a new track can take. One driver per control. */\nexport function undrivenOf(asset: FigureAsset): string[] {\n  const driven = new Set((asset.drivers ?? []).map(d => d.state))\n  return asset.document.model.inputs.filter(i => i.role === 'state' && !driven.has(i.id)).map(i => i.id)\n}\n\n/** The pose a clip gives at a moment, as one batch of state changes -- one step of the history. */\nexport function poseAt(asset: FigureAsset, clip: string, seconds: number): FigureInputChange[] {\n  const units = new Map(asset.document.model.inputs.map(i => [i.id, i.unit]))\n  return (asset.drivers ?? [])\n    .filter((d: FigureDriver) => d.clip === clip)\n    .map(d => {\n      const unit = units.get(d.state)!\n      return { kind: 'set-state' as const, input: d.state, unit, value: driverValue(d, seconds, unit === 'deg' || unit === 'rad' ? unit : 'other') }\n    })\n}\n\n/** A key added at a moment, replacing one already there; the keys stay in time order. */\nexport function withKey(keys: readonly ClipKey[], key: ClipKey): ClipKey[] {\n  return [...keys.filter(k => k.seconds !== key.seconds), key].sort((a, b) => a.seconds - b.seconds)\n}\n\n/** A track's keys without one; a track keeps at least its two ends, as the format asks. */\nexport function withoutKey(keys: readonly ClipKey[], index: number): ClipKey[] | null {\n  if (keys.length <= 2 || index === 0) return null\n  return keys.filter((_, i) => i !== index)\n}\n\n/** The edit that writes a track back. */\nexport const trackEdit = (clip: Clip, track: ClipTrack, patch: Partial<Pick<ClipTrack, 'keys' | 'loop' | 'interpolation'>> = {}) => ({\n  kind: 'set-driver' as const,\n  state: track.state,\n  clip: clip.name,\n  keys: patch.keys ?? track.keys,\n  loop: patch.loop ?? track.loop,\n  interpolation: patch.interpolation ?? track.interpolation\n})\n"]}

package/dist-client/modeller/controls.d.ts

@@ -0,0 +1,28 @@
+import type { FigureAsset } from '@hatiolab/figure-model';
+export interface Control {
+    id: string;
+    /** The name a person reads, or the id when none is given. */
+    label: string;
+    named: boolean;
+    unit: string;
+    min: number;
+    max: number;
+    /** Where it stands in the editor now -- the pose being looked at, not yet the default. */
+    value: number;
+    /** Where it starts when the figure is placed: the default pose. */
+    start: number;
+    /** Seconds to travel the whole range, 0 when it moves at once. */
+    sweep: number;
+    /** A slider step: one degree for an angle, else a hundredth of the range. */
+    step: number;
+}
+export declare function controlsOf(asset: FigureAsset, values?: Record<string, number>): Control[];
+/** Whether the pose being looked at differs from the default pose -- only then is there a pose to keep. */
+export declare const poseDiffers: (controls: readonly Control[]) => boolean;
+/** The current pose as the defaults: one `set-state-defaults` edit. */
+export declare const poseAsDefault: (controls: readonly Control[]) => {
+    kind: "set-state-defaults";
+    values: {
+        [k: string]: number;
+    };
+};

package/dist-client/modeller/controls.js

@@ -0,0 +1,28 @@
+export function controlsOf(asset, values = {}) {
+    return asset.document.model.inputs
+        .filter(input => input.role === 'state')
+        .map(input => {
+        const policy = asset.stateInputs?.[input.id];
+        const start = asset.stateDefaults[input.id] ?? input.min;
+        return {
+            id: input.id,
+            label: policy?.label ?? input.id,
+            named: !!policy?.label,
+            unit: input.unit,
+            min: input.min,
+            max: input.max,
+            value: values[input.id] ?? start,
+            start,
+            sweep: policy?.sweep ?? 0,
+            step: input.unit === 'deg' ? 1 : (input.max - input.min) / 100
+        };
+    });
+}
+/** Whether the pose being looked at differs from the default pose -- only then is there a pose to keep. */
+export const poseDiffers = (controls) => controls.some(c => c.value !== c.start);
+/** The current pose as the defaults: one `set-state-defaults` edit. */
+export const poseAsDefault = (controls) => ({
+    kind: 'set-state-defaults',
+    values: Object.fromEntries(controls.map(c => [c.id, c.value]))
+});
+//# sourceMappingURL=controls.js.map

package/dist-client/modeller/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../client/modeller/controls.ts"],"names":[],"mappings":"AAyBA,MAAM,UAAU,UAAU,CAAC,KAAkB,EAAE,SAAiC,EAAE;IAChF,OAAO,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM;SAC/B,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC;SACvC,GAAG,CAAC,KAAK,CAAC,EAAE;QACX,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK,CAAC,GAAG,CAAA;QACxD,OAAO;YACL,EAAE,EAAE,KAAK,CAAC,EAAE;YACZ,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,KAAK,CAAC,EAAE;YAChC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,KAAK;YACtB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,GAAG,EAAE,KAAK,CAAC,GAAG;YACd,GAAG,EAAE,KAAK,CAAC,GAAG;YACd,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,KAAK;YAChC,KAAK;YACL,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;YACzB,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG;SAC/D,CAAA;IACH,CAAC,CAAC,CAAA;AACN,CAAC;AAED,2GAA2G;AAC3G,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAA4B,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,CAAA;AAEpG,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAA4B,EAAE,EAAE,CAAC,CAAC;IAC9D,IAAI,EAAE,oBAA6B;IACnC,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;CAC/D,CAAC,CAAA","sourcesContent":["import type { FigureAsset } from '@hatiolab/figure-model'\n\n/*\n * The figure's controls -- its state inputs: the values a board or a connector sets to pose\n * the figure (a lift height, a joint angle, a gripper opening). Kept apart from the element so the reading is tested\n * without a browser.\n */\nexport interface Control {\n  id: string\n  /** The name a person reads, or the id when none is given. */\n  label: string\n  named: boolean\n  unit: string\n  min: number\n  max: number\n  /** Where it stands in the editor now -- the pose being looked at, not yet the default. */\n  value: number\n  /** Where it starts when the figure is placed: the default pose. */\n  start: number\n  /** Seconds to travel the whole range, 0 when it moves at once. */\n  sweep: number\n  /** A slider step: one degree for an angle, else a hundredth of the range. */\n  step: number\n}\n\nexport function controlsOf(asset: FigureAsset, values: Record<string, number> = {}): Control[] {\n  return asset.document.model.inputs\n    .filter(input => input.role === 'state')\n    .map(input => {\n      const policy = asset.stateInputs?.[input.id]\n      const start = asset.stateDefaults[input.id] ?? input.min\n      return {\n        id: input.id,\n        label: policy?.label ?? input.id,\n        named: !!policy?.label,\n        unit: input.unit,\n        min: input.min,\n        max: input.max,\n        value: values[input.id] ?? start,\n        start,\n        sweep: policy?.sweep ?? 0,\n        step: input.unit === 'deg' ? 1 : (input.max - input.min) / 100\n      }\n    })\n}\n\n/** Whether the pose being looked at differs from the default pose -- only then is there a pose to keep. */\nexport const poseDiffers = (controls: readonly Control[]) => controls.some(c => c.value !== c.start)\n\n/** The current pose as the defaults: one `set-state-defaults` edit. */\nexport const poseAsDefault = (controls: readonly Control[]) => ({\n  kind: 'set-state-defaults' as const,\n  values: Object.fromEntries(controls.map(c => [c.id, c.value]))\n})\n"]}