@things-factory/figure-ui 10.1.153 → 10.1.155

package/dist-client/modeller/side-panel-styles.js

@@ -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;
-  }
-`;
-//# sourceMappingURL=side-panel-styles.js.map

package/dist-client/modeller/side-panel-styles.js.map

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

package/dist-client/viewparts/detail-motion.d.ts

@@ -1,6 +0,0 @@
-import type { FigureAsset } from '@hatiolab/figure-model';
-/** External values win over drivers; release only the controls owned by the chosen clip. */
-export declare function parametersForClip(asset: FigureAsset, values: Record<string, number>, clip: string): {
-    [k: string]: number;
-};
-export declare function clipForControl(asset: FigureAsset, id: string): string | undefined;

package/dist-client/viewparts/detail-motion.js

@@ -1,9 +0,0 @@
-/** External values win over drivers; release only the controls owned by the chosen clip. */
-export function parametersForClip(asset, values, clip) {
-    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, id) {
-    return asset.drivers?.find(d => d.state === id)?.clip;
-}
-//# sourceMappingURL=detail-motion.js.map

package/dist-client/viewparts/detail-motion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-motion.js","sourceRoot":"","sources":["../../client/viewparts/detail-motion.ts"],"names":[],"mappings":"AAEA,4FAA4F;AAC5F,MAAM,UAAU,iBAAiB,CAAC,KAAkB,EAAE,MAA8B,EAAE,IAAY;IAChG,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAA;IAC5F,OAAO,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AACrF,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAkB,EAAE,EAAU;IAC3D,OAAO,KAAK,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,EAAE,IAAI,CAAA;AACvD,CAAC","sourcesContent":["import type { FigureAsset } from '@hatiolab/figure-model'\n\n/** External values win over drivers; release only the controls owned by the chosen clip. */\nexport function parametersForClip(asset: FigureAsset, values: Record<string, number>, clip: string) {\n  const driven = new Set((asset.drivers ?? []).filter(d => d.clip === clip).map(d => d.state))\n  return Object.fromEntries(Object.entries(values).filter(([id]) => !driven.has(id)))\n}\n\nexport function clipForControl(asset: FigureAsset, id: string) {\n  return asset.drivers?.find(d => d.state === id)?.clip\n}\n"]}

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

@@ -1,31 +0,0 @@
-import { LitElement, type PropertyValues } from 'lit';
-import { type FigureAsset } from '@hatiolab/figure-model';
-declare const FigureAssetViewer_base: (new (...args: any[]) => LitElement) & typeof LitElement;
-/** A single board instance. Sizes and poses are transient, and never change the asset or call a mutation. */
-export declare class FigureAssetViewer extends FigureAssetViewer_base {
-    static styles: import("lit").CSSResult;
-    asset?: FigureAsset;
-    private stage;
-    private sizes;
-    private values;
-    private playing;
-    private error;
-    private scene?;
-    private registered?;
-    private observer?;
-    private needsScene;
-    private played;
-    connectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    firstUpdated(): void;
-    disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private tell;
-    private resize;
-    private pose;
-    private play;
-    private reset;
-    private standUp;
-    private teardown;
-}
-export {};

package/dist-client/viewparts/figure-asset-viewer.js

@@ -1,198 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { i18next, localize } from '@operato/i18n';
-import { compileFigureAsset, FIGURE_INSTANCE_SIZE_INPUTS } 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';
-/** A single board instance. Sizes and poses are transient, and never change the asset or call a mutation. */
-let FigureAssetViewer = class FigureAssetViewer extends localize(i18next)(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.sizes = { x: 1, y: 1, z: 1 };
-        this.values = {};
-        this.playing = '';
-        this.error = '';
-        this.needsScene = false;
-        this.played = new Set();
-    }
-    static { this.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); }
-  `; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.needsScene = true;
-        if (this.hasUpdated)
-            this.observer?.observe(this.stage);
-        this.requestUpdate();
-    }
-    updated(changed) {
-        // 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'].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) => this.resize(axis, e.target.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) => this.resize(axis, e.target.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) => this.pose(c.id, e.target.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}`;
-    }
-    tell(key, value) {
-        this.scene?.root?.components?.[0]?.set(key, value);
-    }
-    resize(axis, value) {
-        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?.();
-    }
-    pose(id, value) {
-        if (!Number.isFinite(value))
-            return;
-        this.values = { ...this.values, [id]: value };
-        this.tell('parameters', this.values);
-    }
-    play(name) {
-        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])));
-    }
-    reset() {
-        if (!this.asset)
-            return;
-        // A new instance also resets driver clocks. Clearing speeds alone freezes the last pose.
-        this.standUp();
-    }
-    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 }]
-                } });
-            this.scene.resize?.();
-            this.scene.fit?.('ratio');
-            this.scene.root?.fitCameraToModel?.();
-        }
-        catch (error) {
-            this.error = error.message;
-            this.teardown();
-        }
-    }
-    teardown() {
-        this.scene?.dispose?.();
-        this.scene = undefined;
-        if (this.registered)
-            unregisterFigure(this.registered);
-        this.registered = undefined;
-    }
-};
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Object)
-], FigureAssetViewer.prototype, "asset", void 0);
-__decorate([
-    query('[stage]'),
-    __metadata("design:type", HTMLElement)
-], FigureAssetViewer.prototype, "stage", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureAssetViewer.prototype, "sizes", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureAssetViewer.prototype, "values", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureAssetViewer.prototype, "playing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], FigureAssetViewer.prototype, "error", void 0);
-FigureAssetViewer = __decorate([
-    customElement('figure-asset-viewer')
-], FigureAssetViewer);
-export { FigureAssetViewer };
-//# sourceMappingURL=figure-asset-viewer.js.map