@things-factory/figure-ui 10.1.153 → 10.1.155

package/client/modeller/preview-model.ts

@@ -1,89 +0,0 @@
-import { compileFigureAsset, figureOccupiedBoxesOf, figureWritersOf, FIGURE_INSTANCE_SIZE_INPUTS } from '@hatiolab/figure-model'
-import type { FigureAsset } from '@hatiolab/figure-model'
-
-/* The preview's arithmetic, apart from the element so it is tested without a browser (see figure-preview.ts). */
-
-export const PREVIEW_FACTOR = 2
-
-/** The type the preview registers the figure under: this figure's own, never a real type a board uses. */
-export function previewTypeOf(context: string): string {
-  return `figure-preview-${context || 'new'}`
-}
-
-export const PREVIEW_WAYS: readonly { name: string; axes: readonly ('x' | 'y' | 'z')[] }[] = [
-  { name: 'base', axes: [] },
-  { name: 'x', axes: ['x'] },
-  { name: 'y', axes: ['y'] },
-  { name: 'z', axes: ['z'] },
-  { name: 'x·y', axes: ['x', 'y'] },
-  { name: 'x·z', axes: ['x', 'z'] },
-  { name: 'y·z', axes: ['y', 'z'] },
-  { name: 'x·y·z', axes: ['x', 'y', 'z'] }
-]
-
-/** The size the figure was made at: its instance size when it declares one, else the room its bodies take. */
-export function authoredSizeOf(asset: FigureAsset): { x: number; y: number; z: number } {
-  const d = asset.designInputs
-  const declared = (['x', 'y', 'z'] as const).map(axis => d[FIGURE_INSTANCE_SIZE_INPUTS[axis]])
-  if (declared.every(v => typeof v === 'number' && v > 0)) return { x: declared[0]!, y: declared[1]!, z: declared[2]! }
-  /* No declared size: the room its bodies take up, so the instance is placed at the size it draws. */
-  const boxes = figureOccupiedBoxesOf(compileFigureAsset(asset).evaluate().geometry, figureWritersOf(asset))
-  const span = (axis: 'x' | 'y' | 'z') =>
-    boxes.length ? Math.max(...boxes.map(b => b.centre[axis] + b.extent[axis] / 2)) - Math.min(...boxes.map(b => b.centre[axis] - b.extent[axis] / 2)) : 0
-  return { x: Math.max(1, Math.round(span('x'))), y: Math.max(1, Math.round(span('y'))), z: Math.max(1, Math.round(span('z'))) }
-}
-
-/** The eight instances: where each stands on the board and how large, in the scene's words. */
-export function previewInstances(type: string, size: { x: number; y: number; z: number }) {
-  const COLUMNS = 4
-  const cell = { x: size.x * PREVIEW_FACTOR * 1.25, z: size.z * PREVIEW_FACTOR * 1.25 }
-  const components = PREVIEW_WAYS.map((way, at) => {
-    const grow = (axis: 'x' | 'y' | 'z') => (way.axes.includes(axis) ? PREVIEW_FACTOR : 1)
-    const width = Math.round(size.x * grow('x'))
-    const height = Math.round(size.z * grow('z'))
-    const column = at % COLUMNS
-    const row = Math.floor(at / COLUMNS)
-    return {
-      type,
-      id: `at-${way.name}`,
-      left: Math.round(column * cell.x + (cell.x - width) / 2),
-      top: Math.round(row * cell.z + (cell.z - height) / 2),
-      width,
-      height,
-      /* Always written: without it the height is taken as the plan's mean and "grow y only" would not grow it. */
-      depth: Math.round(size.y * grow('y'))
-    }
-  })
-  return { components, board: { width: Math.round(cell.x * COLUMNS), height: Math.round(cell.z * Math.ceil(PREVIEW_WAYS.length / COLUMNS)) } }
-}
-
-
-/**
- * Where a variant asks a size the figure does not declare, the size it is drawn at instead -- as the board draws it
- * (things-scene clamps each axis to the declared range; chief architect's ruling 2026-09-25). Per variant, empty when
- * it is drawn as asked. A figure that follows its height only is drawn at its one width in the wider variants, and
- * the preview says so rather than drawing them as though they grew.
- */
-export function previewClampsOf(asset: FigureAsset, size: { x: number; y: number; z: number }): Record<string, Array<{ axis: 'x' | 'y' | 'z'; asked: number; used: number }>> {
-  const inputs = asset.document.model.inputs
-  return Object.fromEntries(
-    PREVIEW_WAYS.map(way => [
-      way.name,
-      (['x', 'y', 'z'] as const).flatMap(axis => {
-        const input = inputs.find(i => i.id === FIGURE_INSTANCE_SIZE_INPUTS[axis])
-        if (!input) return []
-        const asked = Math.round(size[axis] * (way.axes.includes(axis) ? PREVIEW_FACTOR : 1))
-        const used = Math.round(Math.min(Math.max(asked, input.min ?? -Infinity), input.max ?? Infinity))
-        return used === asked ? [] : [{ axis, asked, used }]
-      })
-    ])
-  )
-}
-
-/**
- * The part the preview's size help speaks of: the one picked in the help, else the one chosen in the editor, else the
- * first that has a size rule. A choice that is not among the parts (removed, or a part with no rule) is passed over.
- */
-export function setupPartOf(picked: string, chosen: string, targets: string[]): string {
-  return [picked, chosen].find(id => !!id && targets.includes(id)) ?? targets[0] ?? ''
-}

package/client/modeller/side-panel-styles.ts

@@ -1,374 +0,0 @@
-import { css } from 'lit'
-
-/**
- * The side panel's one look, for every element that draws in the modeller's side.
- *
- * The side is drawn by several elements (the type field, the figure's properties, a part's values, fastening, places,
- * motion, material, controls, clips, the environment) and each had styled its own fields: three label styles and
- * three field heights in one column (user, 2026-09-24: "why are the styles and layout all different?"). They share
- * this sheet now and keep only what is theirs.
- *
- * The vocabulary:
- *   section              one titled group; the side is a stack of them
- *   h3                   a group's title
- *
- * Three sizes and two weights (user 2026-10-01, the panel checked for balance: eight sizes, and titles smaller than
- * what they titled): a title at the body token and semibold, everything else at the small token, and a hint at the
- * micro one. Sections are 16 px above their title and 12 px below their last line.
- *   div[inline-field]    a short label and its one field on one line
- *   div[field]           a label above a full-width field
- *   div[form]            short labels beside their fields, the fields starting on one line
- *   div[vector-row]      a title, then X · Y · Z in one row of cells with the axis inside (`div[triple]` of
- *                        `div[cell]`) -- three values read together, as vector tools lay them out
- *   div[pair]            two controls side by side
- *   label[toggle]        a checkbox and its words
- *   p[hint] · small      the quiet line under a field
- *   button[act]          an action under the fields it acts on
- *   [scrub]              a label dragged sideways to scrub its field
- */
-export const SidePanelStyles = css`
-  :host {
-    --figure-control-height: 30px;
-    font-size: var(--ui-t-small, 11.5px);
-    color: var(--md-sys-color-on-surface);
-  }
-  /* The side is a stack of sections, each a titled group. */
-  section {
-    display: grid;
-    gap: 8px;
-    padding: 16px 12px 12px;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
-  }
-  section > h3 {
-    margin: 0;
-  }
-  section div[field] + div[field],
-  section div[inline-field] + div[inline-field],
-  section div[vector-row] + div[vector-row] {
-    margin-top: 0;
-  }
-  h3 {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin: 14px 0 6px;
-    font-size: var(--ui-t-body, 13px);
-    font-weight: 600;
-    color: var(--md-sys-color-on-surface);
-  }
-  h3:first-child {
-    margin-top: 0;
-  }
-  /* Two weights only: a bold word in a line is the title's weight, not the browser's heavier one. */
-  b,
-  strong {
-    font-weight: 600;
-  }
-  label,
-  div[form] > span {
-    font-size: inherit;
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  div[field] {
-    display: grid;
-    gap: 2px;
-  }
-  div[field] + div[field],
-  div[field] + div[form],
-  div[form] + div[field],
-  div[vector-row] + div[vector-row],
-  div[vector-row] + div[field],
-  div[field] + div[vector-row] {
-    margin-top: 5px;
-  }
-  div[form],
-  div[inline-field],
-  div[vector-row] {
-    display: grid;
-    grid-template-columns: 64px minmax(0, 1fr);
-    align-items: center;
-    gap: 5px 7px;
-  }
-  div[form] > span,
-  div[inline-field] > label,
-  div[vector-row] > label {
-    overflow-wrap: anywhere;
-    white-space: normal;
-  }
-  /* A value read, not edited, beside its label: the field's size and colour, not the page's. */
-  div[inline-field] > span[value] {
-    font-size: inherit;
-    color: var(--md-sys-color-on-surface);
-  }
-  label span[unit] {
-    color: var(--md-sys-color-outline);
-  }
-  div[inline-field] + div[inline-field],
-  div[inline-field] + div[vector-row],
-  div[vector-row] + div[inline-field] {
-    margin-top: 5px;
-  }
-  /* A row of worded tools (align, snap; mirror copies). */
-  div[tools] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-  div[tools] button {
-    height: var(--figure-control-height);
-    padding: 0 10px;
-    font: inherit;
-    color: var(--md-sys-color-on-surface);
-    background: var(--md-sys-color-surface-container-lowest);
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
-    cursor: pointer;
-  }
-  div[tools] button:hover:not(:disabled) {
-    background: var(--md-sys-color-surface-container);
-  }
-  div[tools] button:disabled {
-    opacity: 0.45;
-    cursor: default;
-  }
-  div[pair] {
-    display: flex;
-    gap: 4px;
-  }
-  div[pair] > * {
-    flex: 1;
-    min-width: 0;
-  }
-  div[triple] {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 4px;
-  }
-  input,
-  select {
-    width: 100%;
-    min-width: 0;
-    min-height: var(--figure-control-height);
-    box-sizing: border-box;
-    padding: 4px 7px;
-    font: inherit;
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface-container-lowest);
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
-  }
-  /* The browser's own box and dot, in the panel's colour. */
-  input[type='checkbox'],
-  input[type='radio'] {
-    width: auto;
-    min-height: 0;
-    margin: 0;
-    accent-color: var(--md-sys-color-primary);
-  }
-  /* A fold: the panel's chevron, not the browser's triangle. */
-  summary {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 0;
-    list-style: none;
-    cursor: pointer;
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  summary::-webkit-details-marker {
-    display: none;
-  }
-  summary::before {
-    content: '';
-    flex: none;
-    width: 6px;
-    height: 6px;
-    margin: 0 2px;
-    border-right: 1.5px solid currentColor;
-    border-bottom: 1.5px solid currentColor;
-    transform: rotate(-45deg);
-    transition: transform 0.15s;
-  }
-  details[open] > summary::before {
-    transform: rotate(45deg);
-  }
-  /* A thin track and a small thumb: a slider is a line to drag along, not a block (user, 2026-09-24). */
-  input[type='range'] {
-    -webkit-appearance: none;
-    appearance: none;
-    min-height: 16px;
-    height: 16px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-  }
-  input[type='range']::-webkit-slider-runnable-track {
-    height: 3px;
-    border-radius: 2px;
-    background: var(--md-sys-color-outline-variant);
-  }
-  input[type='range']::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 12px;
-    height: 12px;
-    margin-top: -4.5px;
-    border: none;
-    border-radius: 50%;
-    background: var(--md-sys-color-primary);
-  }
-  input[type='range']::-moz-range-track {
-    height: 3px;
-    border-radius: 2px;
-    background: var(--md-sys-color-outline-variant);
-  }
-  input[type='range']::-moz-range-thumb {
-    width: 12px;
-    height: 12px;
-    border: none;
-    border-radius: 50%;
-    background: var(--md-sys-color-primary);
-  }
-  input[type='range']:focus {
-    outline: none;
-  }
-  input[type='range']:focus-visible::-webkit-slider-thumb {
-    outline: 2px solid var(--md-sys-color-primary);
-    outline-offset: 2px;
-  }
-  input[type='color'] {
-    padding: 2px;
-    width: 40px;
-  }
-  input:focus,
-  select:focus {
-    outline: 2px solid var(--md-sys-color-primary);
-    outline-offset: -1px;
-  }
-  input:disabled,
-  select:disabled {
-    opacity: 0.6;
-  }
-  /* A number with its axis inside the cell, on the left. */
-  div[cell] {
-    display: flex;
-    box-sizing: border-box;
-    height: var(--figure-control-height);
-    align-items: center;
-    gap: 2px;
-    padding-left: 6px;
-    background-color: var(--md-sys-color-surface-container-lowest);
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
-  }
-  div[cell]:focus-within {
-    outline: 2px solid var(--md-sys-color-primary);
-    outline-offset: -1px;
-    border-color: transparent;
-  }
-  /* A label that scrubs its field when dragged sideways (vector tools' way). */
-  [scrub] {
-    cursor: ew-resize;
-    user-select: none;
-    touch-action: none;
-  }
-  div[cell] span[axis] {
-    flex: none;
-    font-size: var(--ui-t-micro, 11px);
-    letter-spacing: 0.02em;
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  div[cell] input {
-    min-height: 0;
-    height: calc(var(--figure-control-height) - 2px);
-    padding: 4px 6px 4px 2px;
-    font-family: var(--mono-font, monospace);
-    text-align: right;
-    background: none;
-    border: none;
-    border-radius: 0;
-  }
-  div[cell] input:focus {
-    outline: none;
-  }
-  /* An axis a rule sets: its number, read-only, on a quieter ground (ADR-0097). */
-  div[cell][held] {
-    background-color: var(--md-sys-color-surface-container);
-    border-style: dashed;
-  }
-  div[cell][held] input {
-    color: var(--md-sys-color-on-surface-variant);
-    font-style: italic;
-  }
-  p[held-axes] {
-    margin: 2px 0 6px;
-  }
-  label[toggle] {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    color: var(--md-sys-color-on-surface);
-  }
-  /* The 「?」 beside a title: no border, it says there is more rather than asking to be pressed. */
-  button[help] {
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    color: var(--md-sys-color-outline);
-    background: none;
-    border: none;
-    cursor: pointer;
-  }
-  button[help] md-icon {
-    font-size: 13px;
-    width: 13px;
-    height: 13px;
-  }
-  button[help]:hover,
-  button[help][aria-expanded='true'] {
-    color: var(--md-sys-color-primary);
-  }
-  p[hint],
-  small {
-    display: block;
-    margin: 2px 0 4px;
-    font-size: var(--ui-t-micro, 11px);
-    line-height: 1.5;
-    color: var(--md-sys-color-on-surface-variant);
-  }
-  /*
-   * An action under its fields: as wide as its words, not a band across the panel -- four full-width grey bars read as
-   * four walls and none of them as the one to press (user 2026-10-01). Every one carries its icon.
-   */
-  button[act] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    justify-self: start;
-    gap: 6px;
-    width: auto;
-    max-width: 100%;
-    margin-top: 4px;
-    padding: 0 12px;
-    min-height: var(--figure-control-height);
-    font: inherit;
-    color: var(--md-sys-color-primary);
-    background-color: var(--md-sys-color-surface-container-lowest);
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
-    cursor: pointer;
-  }
-  button[act]:hover:not(:disabled) {
-    background-color: var(--md-sys-color-primary-container);
-  }
-  button[act]:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-  button[act] md-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-  }
-`

package/client/viewparts/detail-motion.ts

@@ -1,11 +0,0 @@
-import type { FigureAsset } from '@hatiolab/figure-model'
-
-/** External values win over drivers; release only the controls owned by the chosen clip. */
-export function parametersForClip(asset: FigureAsset, values: Record<string, number>, clip: string) {
-  const driven = new Set((asset.drivers ?? []).filter(d => d.clip === clip).map(d => d.state))
-  return Object.fromEntries(Object.entries(values).filter(([id]) => !driven.has(id)))
-}
-
-export function clipForControl(asset: FigureAsset, id: string) {
-  return asset.drivers?.find(d => d.state === id)?.clip
-}

package/client/viewparts/figure-asset-viewer.ts

@@ -1,177 +0,0 @@
-import { css, html, LitElement, nothing, type PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { i18next, localize } from '@operato/i18n'
-import { compileFigureAsset, FIGURE_INSTANCE_SIZE_INPUTS, type FigureAsset } from '@hatiolab/figure-model'
-import { create, registerFigure, unregisterFigure } from '@hatiolab/things-scene'
-import { authoredSizeOf } from '../modeller/preview-model.js'
-import { controlsOf } from '../modeller/controls.js'
-import { DEFAULT_VIEW, previewBoardDepth, sceneLook } from '../modeller/figure-view.js'
-import { clipForControl, parametersForClip } from './detail-motion.js'
-
-type Axis = 'x' | 'y' | 'z'
-interface Scene {
-  dispose?(): void
-  resize?(): void
-  fit?(type?: string): void
-  root?: {
-    fitCameraToModel?(): void
-    components?: Array<{ set(key: string, value: unknown): void }>
-  }
-}
-
-/** A single board instance. Sizes and poses are transient, and never change the asset or call a mutation. */
-@customElement('figure-asset-viewer')
-export class FigureAssetViewer extends localize(i18next)(LitElement) {
-  static styles = css`
-    :host { display: block; min-width: 0; }
-    [viewport] { height: 300px; position: relative; background: #858585; }
-    [stage] { position: absolute; inset: 0; width: 100%; height: 100%; }
-    section { padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
-    h3 { margin: 0 0 10px; font-size: var(--ui-t-body, 13px); }
-    label { display: grid; grid-template-columns: 72px minmax(0, 1fr) 90px; align-items: center; gap: 8px; margin: 8px 0; }
-    input { min-width: 0; width: 100%; box-sizing: border-box; }
-    input[type=number] { padding: 6px; }
-    input, button { font: inherit; color: inherit; }
-    button { padding: 8px 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 8px; background: var(--md-sys-color-surface); cursor: pointer; }
-    [clips] { display: flex; flex-wrap: wrap; gap: 8px; }
-    p { font-size: 12px; line-height: 1.5; }
-    [error] { color: var(--md-sys-color-error); }
-  `
-  @property({ attribute: false }) asset?: FigureAsset
-  @query('[stage]') private stage!: HTMLElement
-  @state() private sizes: Record<Axis, number> = { x: 1, y: 1, z: 1 }
-  @state() private values: Record<string, number> = {}
-  @state() private playing = ''
-  @state() private error = ''
-  private scene?: Scene
-  private registered?: string
-  private observer?: ResizeObserver
-  private needsScene = false
-  private played = new Set<string>()
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.needsScene = true
-    if (this.hasUpdated) this.observer?.observe(this.stage)
-    this.requestUpdate()
-  }
-
-  protected updated(changed: PropertyValues) {
-    // Reconnection and a new asset can arrive in the same update. Build exactly once.
-    if (changed.has('asset') || this.needsScene) {
-      this.needsScene = false
-      this.standUp()
-    }
-  }
-  firstUpdated() {
-    this.observer = new ResizeObserver(() => this.scene?.resize?.())
-    this.observer.observe(this.stage)
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.observer?.disconnect()
-    this.teardown()
-  }
-
-  render() {
-    const asset = this.asset
-    return html`<div viewport><div stage></div></div>
-      ${this.error ? html`<p error role="alert">${this.error}</p>` : nothing}
-      ${asset ? html`<section>
-        <h3>${i18next.t('figure.label.detail-size')}</h3>
-        ${(['x', 'y', 'z'] as const).map(axis => {
-          const input = asset.document.model.inputs.find(input => input.id === FIGURE_INSTANCE_SIZE_INPUTS[axis])
-          return html`<label><span>${axis.toUpperCase()} · mm</span>
-            <input type="range" aria-label=${`${axis.toUpperCase()} mm`} min=${input?.min ?? this.sizes[axis]} max=${input?.max ?? this.sizes[axis]} step="any"
-              .value=${String(this.sizes[axis])} ?disabled=${!input || input.min === input.max}
-              @input=${(e: Event) => this.resize(axis, (e.target as HTMLInputElement).valueAsNumber)}>
-            <input type="number" aria-label=${`${axis.toUpperCase()} mm value`} min=${input?.min ?? this.sizes[axis]} max=${input?.max ?? this.sizes[axis]} step="any"
-              .value=${String(this.sizes[axis])} ?disabled=${!input || input.min === input.max}
-              @change=${(e: Event) => this.resize(axis, (e.target as HTMLInputElement).valueAsNumber)}>
-          </label>`
-        })}
-        <button @click=${() => this.reset()}>${i18next.t('figure.button.detail-reset')}</button>
-        <p>${i18next.t('figure.text.detail-transient')}</p>
-      </section>
-      <section><h3>${i18next.t('figure.label.motion')}</h3>
-        ${controlsOf(asset, this.values).map(c => html`<label><span>${c.label} · ${c.unit}</span>
-          <input type="range" aria-label=${c.label} min=${c.min} max=${c.max} step=${c.step || 'any'} .value=${String(c.value)}
-            ?disabled=${!!this.playing && clipForControl(asset, c.id) === this.playing}
-            @input=${(e: Event) => this.pose(c.id, (e.target as HTMLInputElement).valueAsNumber)}>
-          <output>${this.playing && clipForControl(asset, c.id) === this.playing ? i18next.t('figure.text.detail-playing')
-            : this.played.has(clipForControl(asset, c.id) ?? '') && !(c.id in this.values) ? i18next.t('figure.text.detail-paused') : Math.round(c.value * 100) / 100}</output></label>`)}
-        <div clips>${[...new Set((asset.drivers ?? []).map(d => d.clip))].map(name => html`<button aria-pressed=${String(this.playing === name)}
-          @click=${() => this.play(name)}>${this.playing === name ? '⏸' : '▶'} ${name}</button>`)}</div>
-        ${!controlsOf(asset).length && ![...new Set((asset.drivers ?? []).map(d => d.clip))].length ? html`<p>${i18next.t('figure.text.detail-no-motion')}</p>` : nothing}
-      </section>` : nothing}`
-  }
-
-  private tell(key: string, value: unknown) {
-    this.scene?.root?.components?.[0]?.set(key, value)
-  }
-  private resize(axis: Axis, value: number) {
-    const input = this.asset?.document.model.inputs.find(input => input.id === FIGURE_INSTANCE_SIZE_INPUTS[axis])
-    if (!input || !Number.isFinite(value)) { this.requestUpdate(); return }
-    const used = Math.min(input.max, Math.max(input.min, value))
-    this.sizes = { ...this.sizes, [axis]: used }
-    this.tell(axis === 'x' ? 'width' : axis === 'y' ? 'depth' : 'height', used)
-    this.scene?.root?.fitCameraToModel?.()
-  }
-  private pose(id: string, value: number) {
-    if (!Number.isFinite(value)) return
-    this.values = { ...this.values, [id]: value }
-    this.tell('parameters', this.values)
-  }
-  private play(name: string) {
-    this.playing = this.playing === name ? '' : name
-    if (this.playing && this.asset) {
-      this.played.add(name)
-      this.values = parametersForClip(this.asset, this.values, name)
-      this.tell('parameters', this.values)
-    }
-    this.tell('clips', Object.fromEntries([...new Set((this.asset?.drivers ?? []).map(d => d.clip))].map(key => [key, key === this.playing ? 1 : 0])))
-  }
-  private reset() {
-    if (!this.asset) return
-    // A new instance also resets driver clocks. Clearing speeds alone freezes the last pose.
-    this.standUp()
-  }
-  private standUp() {
-    this.teardown()
-    this.error = ''
-    const asset = this.asset
-    if (!asset) return
-    this.values = {}
-    this.playing = ''
-    this.played.clear()
-    try {
-      compileFigureAsset(asset)
-      if (!asset.appearance.length) throw Error(i18next.t('figure.text.preview-needs-a-part'))
-      this.sizes = authoredSizeOf(asset)
-      const type = `figure-detail-${crypto.randomUUID()}`
-      registerFigure(type, asset)
-      this.registered = type
-      const size = this.sizes
-      this.scene = create({ target: this.stage, mode: 0, model: {
-        type: 'model-layer', width: size.x * 2, height: size.z * 2,
-        depth: previewBoardDepth({ placement: asset.placement, base: { y: size.y } }, DEFAULT_VIEW.ceilingHeight, 1),
-        threed: true, sky: 'color', ...sceneLook(DEFAULT_VIEW),
-        placement: DEFAULT_VIEW.placement, heights: { floor: 0, ceiling: DEFAULT_VIEW.ceilingHeight },
-        pixelRatio: Math.min(3, (window.devicePixelRatio || 1) * 2),
-        components: [{ type, id: 'detail-instance', left: size.x / 2, top: size.z / 2, width: size.x, height: size.z, depth: size.y }]
-      } }) as Scene
-      this.scene.resize?.()
-      this.scene.fit?.('ratio')
-      this.scene.root?.fitCameraToModel?.()
-    } catch (error) {
-      this.error = (error as Error).message
-      this.teardown()
-    }
-  }
-  private teardown() {
-    this.scene?.dispose?.()
-    this.scene = undefined
-    if (this.registered) unregisterFigure(this.registered)
-    this.registered = undefined
-  }
-}

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

@@ -1,28 +0,0 @@
-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;
-    };
-};