@things-factory/figure-ui 10.1.94 → 10.1.96

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

@@ -10,7 +10,11 @@ import { css } from 'lit'
  *
  * The vocabulary:
  *   section              one titled group; the side is a stack of them
- *   h3                   a group's title -- small capitals
+ *   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
@@ -25,14 +29,14 @@ import { css } from 'lit'
 export const SidePanelStyles = css`
   :host {
     --figure-control-height: 30px;
-    font-size: 0.76rem;
+    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: 6px;
-    padding: 8px 10px;
+    gap: 8px;
+    padding: 16px 12px 12px;
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
   }
   section > h3 {
@@ -48,18 +52,21 @@ export const SidePanelStyles = css`
     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);
+    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: 0.68rem;
+    font-size: inherit;
     color: var(--md-sys-color-on-surface-variant);
   }
   div[field] {
@@ -90,7 +97,7 @@ export const SidePanelStyles = css`
   }
   /* 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: 0.76rem;
+    font-size: inherit;
     color: var(--md-sys-color-on-surface);
   }
   label span[unit] {
@@ -108,10 +115,9 @@ export const SidePanelStyles = css`
     gap: 4px;
   }
   div[tools] button {
-    height: 28px;
+    height: var(--figure-control-height);
     padding: 0 10px;
     font: inherit;
-    font-size: 0.78rem;
     color: var(--md-sys-color-on-surface);
     background: var(--md-sys-color-surface-container-lowest);
     border: 1px solid var(--md-sys-color-outline-variant);
@@ -146,16 +152,45 @@ export const SidePanelStyles = css`
     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;
   }
+  /* 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'] {
@@ -239,7 +274,7 @@ export const SidePanelStyles = css`
   }
   div[cell] span[axis] {
     flex: none;
-    font-size: 0.64rem;
+    font-size: var(--ui-t-micro, 11px);
     letter-spacing: 0.02em;
     color: var(--md-sys-color-on-surface-variant);
   }
@@ -272,7 +307,6 @@ export const SidePanelStyles = css`
     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. */
@@ -299,41 +333,42 @@ export const SidePanelStyles = css`
   small {
     display: block;
     margin: 2px 0 4px;
-    font-size: 0.68rem;
+    font-size: var(--ui-t-micro, 11px);
     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);
-  }
+  /*
+   * 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;
-    gap: 4px;
-    width: 100%;
+    justify-self: start;
+    gap: 6px;
+    width: auto;
+    max-width: 100%;
     margin-top: 4px;
-    padding: 3px 8px;
-    min-height: 28px;
+    padding: 0 12px;
+    min-height: var(--figure-control-height);
     font: inherit;
-    font-size: 0.72rem;
-    color: var(--md-sys-color-on-surface);
-    background-color: var(--md-sys-color-surface-container);
+    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-surface-container-high);
+    background-color: var(--md-sys-color-primary-container);
   }
   button[act]:disabled {
     opacity: 0.5;
     cursor: default;
   }
   button[act] md-icon {
-    font-size: 15px;
-    width: 15px;
-    height: 15px;
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
   }
 `

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

@@ -309,8 +309,7 @@ export declare class FigureEditor extends LitElement {
     private pointBlockedOf;
     private renderStart;
     /**
-     * The part the panel speaks of, held at its top: its kind, how its size answers, what holds it (designer 2026-09-27,
-     * B). No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
+     * The part the panel speaks of, held at its top: its kind, and what its size follows when it follows something. No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
      * list's root is the way back to the model's settings.
      */
     private renderSubject;
@@ -328,6 +327,12 @@ export declare class FigureEditor extends LitElement {
      */
     private withSizeRow;
     private renderVector;
+    /**
+     * Why a row's numbers cannot be typed, said once under the rows by what decides them (user 2026-10-01: "set by a
+     * rule" named nothing): a fastened part's place and turn are its fastening's; other numbers are worked out from
+     * something else. A size that follows something is said at the panel's head, so not again here.
+     */
+    private renderHeldAxes;
     /**
      * A part's fields only the declared room still reads (ADR-0097, designer 2026-09-27): shown as what they are and not
      * typed into -- they move nothing. Declaring the room again is offered; nothing is deleted or widened on the way.

package/dist-client/modeller/editor.js

@@ -386,13 +386,18 @@ let FigureEditor = class FigureEditor extends LitElement {
       z-index: 1;
       display: grid;
       gap: 4px;
-      padding: 8px 10px;
+      padding: 10px 12px;
       background: var(--md-sys-color-surface-container-lowest);
       border-bottom: 1px solid var(--md-sys-color-outline-variant);
     }
+    /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */
     div[subject-summary] {
       display: grid;
-      gap: 1px;
+      gap: 2px;
+    }
+    div[subject-summary] b {
+      font-size: var(--ui-t-body, 13px);
+      font-weight: 600;
     }
     div[subject-summary] b span {
       font-weight: 400;
@@ -1651,14 +1656,13 @@ let FigureEditor = class FigureEditor extends LitElement {
         if (this.detachSaid?.key === key)
             return this.detachSaid.words;
         const say = (k, params) => i18next.t(k, params);
-        const from = 'plane' in joint.body0 ? say('figure.label.mounting-plane') : partLabelOf(joint.body0.part);
         let words;
         try {
             const seen = this.session.previewCommand({ kind: 'detach', part: this.selected });
             const own = seen.moves.some(m => m.body === this.selected);
             words = own
                 ? [say('figure.text.detach-moves'), ...previewWordsOf({ context: seen.context, revision: seen.revision, key, moves: seen.moves }, this.selected, say)]
-                : [say('figure.text.detach-stays', { from })];
+                : /* It stays where it is: as expected, so nothing is said (user 2026-10-01). */ [];
             const children = (asset.joints ?? []).filter(j => 'part' in j.body0 && j.body0.part === this.selected).map(j => partLabelOf(j.body1.part));
             if (children.length)
                 words.push(say('figure.text.detach-keeps-children', { parts: children.join(', ') }));
@@ -1892,14 +1896,15 @@ let FigureEditor = class FigureEditor extends LitElement {
     </div>`;
     }
     /**
-     * The part the panel speaks of, held at its top: its kind, how its size answers, what holds it (designer 2026-09-27,
-     * B). No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
+     * The part the panel speaks of, held at its top: its kind, and what its size follows when it follows something. No path above it (user 2026-10-01): the parts list and the canvas already show which part is chosen, and the
      * list's root is the way back to the model's settings.
      */
     renderSubject() {
         let summary;
         try {
-            summary = this.selected ? partSummaryOf(parseFigureAsset(this.session.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params)) : undefined;
+            summary = this.selected
+                ? partSummaryOf(parseFigureAsset(this.session.source()), ownerOf(this.selected), (key, params) => i18next.t(key, params), i18next.language || 'ko')
+                : undefined;
         }
         catch {
             summary = undefined;
@@ -1909,7 +1914,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         return html `<div subject>
       <div subject-summary>
         ${summary.kind ? html `<b>${summary.kind}</b>` : nothing}
-        <small>${summary.size}</small><small>${summary.relation}</small>
+        ${summary.size ? html `<small>${summary.size}</small>` : nothing}
       </div>
     </div>`;
     }
@@ -2150,6 +2155,7 @@ let FigureEditor = class FigureEditor extends LitElement {
             ? html `<section>
           <h3>${i18next.t(vectorTitle)}</h3>
           ${groups.vectors.map(g => this.renderVector(g, unavailable, held))}
+          ${this.renderHeldAxes(groups.vectors)}
           ${tools ?? nothing}
         </section>`
             : nothing}
@@ -2205,7 +2211,22 @@ let FigureEditor = class FigureEditor extends LitElement {
           </div>`)}
       </div>
     </div>
-    ${ruled.length ? html `<p hint held-axes>${i18next.t('figure.text.axes-held-by-rule', { group: i18next.t('figure.label.group-' + group.name), axes: ruled.map(a => a.toUpperCase()).join(' · ') })}</p>` : nothing}`;
+`;
+    }
+    /**
+     * Why a row's numbers cannot be typed, said once under the rows by what decides them (user 2026-10-01: "set by a
+     * rule" named nothing): a fastened part's place and turn are its fastening's; other numbers are worked out from
+     * something else. A size that follows something is said at the panel's head, so not again here.
+     */
+    renderHeldAxes(vectors) {
+        const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(this.selected));
+        const held = vectors.filter(g => g.kind === 'vector' && g.name !== 'size' && ['x', 'y', 'z'].some(axis => !g.cells[axis]));
+        if (!held.length)
+            return nothing;
+        const placed = held.every(g => g.name === 'position' || g.name === 'rotation');
+        if (fastened && placed)
+            return html `<p hint held-axes>${i18next.t('figure.text.held-by-fastening')}</p>`;
+        return html `<p hint held-axes>${i18next.t('figure.text.held-worked-out', { group: held.map(g => i18next.t('figure.label.group-' + g.name)).join(' · ') })}</p>`;
     }
     /**
      * A part's fields only the declared room still reads (ADR-0097, designer 2026-09-27): shown as what they are and not
@@ -2218,7 +2239,7 @@ let FigureEditor = class FigureEditor extends LitElement {
       <div form>
         ${fields.map(f => html `<span>${fieldWordsOf(f.id, key => i18next.t(key))} (${f.unit})</span><input aria-label=${f.id} type="number" .value=${String(f.value)} disabled />`)}
       </div>
-      <button act room-refit ?disabled=${unavailable} @click=${() => this.askRoomRefit()}>${i18next.t('figure.button.room-refit')}</button>
+      <button act room-refit ?disabled=${unavailable} @click=${() => this.askRoomRefit()}><md-icon>fit_screen</md-icon>${i18next.t('figure.button.room-refit')}</button>
     </section>`;
     }
     /** The room as declared and as proposed, and what lies outside each as measured, before the author confirms. */