@things-factory/figure-ui 10.1.46 → 10.1.47

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

@@ -0,0 +1,326 @@
+import { css } from 'lit';
+/**
+ * The side panel's one look -- V2's inspector, for every element that draws in the V3 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, V2's:
+ *   section              one titled group; the side is a stack of them
+ *   h3                   a group's title -- small capitals
+ *   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: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+  }
+  /* The side is a stack of sections, each a titled group (V2's inspector). */
+  section {
+    display: grid;
+    gap: 6px;
+    padding: 8px 10px;
+    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-micro, 11px);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  h3:first-child {
+    margin-top: 0;
+  }
+  label,
+  div[form] > span {
+    font-size: 0.68rem;
+    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;
+  }
+  div[inline-field] + div[inline-field],
+  div[inline-field] + div[vector-row],
+  div[vector-row] + div[inline-field] {
+    margin-top: 5px;
+  }
+  /* A row of icon tools (align, mirror, snap), as V2's placement section had them. */
+  div[tools] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  div[tools] button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 28px;
+    padding: 0;
+    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[tools] md-icon {
+    font-size: 17px;
+    width: 17px;
+    height: 17px;
+  }
+  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;
+    font-size: 0.76rem;
+    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;
+  }
+  input[type='checkbox'],
+  input[type='radio'] {
+    width: auto;
+    min-height: 0;
+  }
+  /* 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: 0.64rem;
+    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;
+  }
+  label[toggle] {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.76rem;
+    color: var(--md-sys-color-on-surface);
+  }
+  /* The 「?」 beside a title: no border, it says there is more rather than asking to be pressed (V2). */
+  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: 0.68rem;
+    line-height: 1.5;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  p[hint] {
+    padding-left: 6px;
+    border-left: 2px solid var(--md-sys-color-outline-variant);
+  }
+  button[act] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+    margin-top: 4px;
+    padding: 3px 8px;
+    min-height: 28px;
+    font: inherit;
+    font-size: 0.72rem;
+    color: var(--md-sys-color-on-surface);
+    background-color: var(--md-sys-color-surface-container);
+    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-surface-container-high);
+  }
+  button[act]:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  button[act] md-icon {
+    font-size: 15px;
+    width: 15px;
+    height: 15px;
+  }
+`;
+//# sourceMappingURL=side-panel-styles.js.map

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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6SjC,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * The side panel's one look -- V2's inspector, for every element that draws in the V3 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, V2's:\n *   section              one titled group; the side is a stack of them\n *   h3                   a group's title -- small capitals\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: 0.76rem;\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The side is a stack of sections, each a titled group (V2's inspector). */\n  section {\n    display: grid;\n    gap: 6px;\n    padding: 8px 10px;\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-micro, 11px);\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  h3:first-child {\n    margin-top: 0;\n  }\n  label,\n  div[form] > span {\n    font-size: 0.68rem;\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  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 icon tools (align, mirror, snap), as V2's placement section had them. */\n  div[tools] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  div[tools] button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 28px;\n    padding: 0;\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[tools] md-icon {\n    font-size: 17px;\n    width: 17px;\n    height: 17px;\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    font-size: 0.76rem;\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  input[type='checkbox'],\n  input[type='radio'] {\n    width: auto;\n    min-height: 0;\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: 0.64rem;\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  label[toggle] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 0.76rem;\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 (V2). */\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: 0.68rem;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  p[hint] {\n    padding-left: 6px;\n    border-left: 2px solid var(--md-sys-color-outline-variant);\n  }\n  button[act] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    width: 100%;\n    margin-top: 4px;\n    padding: 3px 8px;\n    min-height: 28px;\n    font: inherit;\n    font-size: 0.72rem;\n    color: var(--md-sys-color-on-surface);\n    background-color: var(--md-sys-color-surface-container);\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-surface-container-high);\n  }\n  button[act]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  button[act] md-icon {\n    font-size: 15px;\n    width: 15px;\n    height: 15px;\n  }\n`\n"]}

package/dist-client/modeller/v3-canvas.d.ts

@@ -1,52 +1,44 @@
 import { LitElement, type PropertyValues } from 'lit';
 import type { GizmoReach } from './v3-gizmo.js';
-import { type V3RenderPart } from './v3-renderer.js';
-/** Renders evaluated V3 geometry directly. There is no parts/base or things-scene conversion. */
+import type { V3RenderPart } from './v3-renderer.js';
+import { type ViewSettings } from './figure-view.js';
 export declare class FigureV3Canvas extends LitElement {
     static styles: import("lit").CSSResult;
     parts: V3RenderPart[];
     palette: Record<string, string>;
+    /** Which figure is open. Another one stands the board up again. */
     context: string;
-    /** The selected part, and what the gizmo may write for it (`gizmoReachOf`). Nothing reachable, no gizmo. */
     selected: string;
+    /** What the gizmo may write for the selected part; a change beyond it is not applied and the part springs back. */
     reach: GizmoReach;
-    /** Move · turn · size — W · E · R, as in the V2 modeller. */
-    mode: 'translate' | 'rotate' | 'scale';
-    private transform?;
-    /** What the gizmo holds: a stand-in at the body's origin, so the body's own matrix stays the evaluation's. */
-    private readonly proxy;
-    private dragStart?;
-    /** The pointerup that ends a drag is not a pick — releasing off the body would otherwise deselect it. */
-    private justDragged;
-    private renderer?;
-    private readonly scene;
-    private readonly group;
-    private readonly camera;
-    private controls?;
-    private observer?;
-    private themeObserver?;
-    private initialized;
-    private contextAtRender;
+    view: ViewSettings;
+    private stage;
+    private scene?;
+    private board?;
+    private standingFor?;
+    private watcher?;
+    /** Set while this canvas writes to components, so the scene's echo of it is not taken for a drag. */
+    private writing;
     render(): import("lit-html").TemplateResult<1>;
-    private key;
-    protected firstUpdated(): void;
-    connectedCallback(): void;
-    private initialize;
+    firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
-    /** Puts the gizmo on the selected body, in a mode it may write — or takes it away. */
-    private placeGizmo;
-    private dragging;
-    /** While dragging, the body follows the stand-in; the next evaluation replaces it with where the inputs put it. */
-    private follow;
-    private updateGeometry;
+    disconnectedCallback(): void;
+    /** The whole figure in view: the board's fit, then the 3D camera's own, as V2 did. */
     fit(): void;
     /**
-     * The scene's background, taken from the host's computed background — the token resolved and normalised to
-     * `rgb(r, g, b)`, which THREE.Color reads. The token's own text may use the space-separated form it does not.
+     * 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.
      */
-    private paintBackground;
-    private draw;
-    private pick;
-    thumbnail(): any;
-    disconnectedCallback(): void;
+    private standUp;
+    private components;
+    /** The components standing now, by name. Not held between calls: the scene stands its board up again at times. */
+    private standing;
+    /** Bring the components to the evaluation: remove the gone, write only what differs, add the new. */
+    private sync;
+    /** Selection and drags, told out by the part's name -- never by its place in the list, which may change meanwhile. */
+    private watchScene;
+    private showSelected;
+    /** View settings go into the scene as they are: they are the board's own state names. Nothing is stood up again. */
+    private applyView;
+    private teardown;
 }