@things-factory/figure-ui 10.1.175 → 10.1.176

package/client/modeller/editor-styles.ts

@@ -263,7 +263,7 @@ export const EditorStyles = css`
   /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */
   div[group-fields] {
     display: grid;
-    gap: 8px;
+    gap: 6px;
   }
   /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */
   section[more] > details > summary,

package/client/modeller/figure-links.ts

@@ -121,8 +121,10 @@ export class FigureLinks extends localize(i18next)(LitElement) {
       flex: 1;
       margin: 0;
     }
-    div[fastened-summary] > button[quiet] {
-      margin-left: 0;
+    /* Opening the form is an action: the primary colour, at the line's end. */
+    div[fastened-summary] > button[act] {
+      flex: none;
+      margin: 0 -6px 0 0;
     }
     /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
     div[row] > b {
@@ -667,7 +669,7 @@ export class FigureLinks extends localize(i18next)(LitElement) {
         ${overhang}
         <div fastened-summary>
           <p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
-          <button quiet change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
+          <button act change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
         </div>
         ${this.renderDetachWords()}
       `

package/client/modeller/figure-parts.ts

@@ -140,6 +140,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         outline: 2px solid var(--md-sys-color-primary);
         outline-offset: 1px;
       }
+      /* The cost line as a line, not a card; lit under the hand like the rest of the list. */
       button[budget] {
         display: flex;
         align-items: flex-start;
@@ -153,8 +154,8 @@ export class FigureParts extends localize(i18next)(LitElement) {
         text-align: left;
         color: var(--md-sys-color-on-surface-variant);
         background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
+        border: 1px solid transparent;
+        border-radius: 4px;
         cursor: pointer;
       }
       button[budget]:hover {
@@ -202,17 +203,20 @@ export class FigureParts extends localize(i18next)(LitElement) {
         font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-on-surface-variant);
       }
-      /* One height with the side's fields (30px, side-panel-styles): it stood at 21px, the only small box on the screen. */
+      /* A field in the side panel's look (side-panel-styles): 26px, a quiet ground, its line only under the hand. */
       div[level] select {
         min-width: 0;
-        min-height: 30px;
+        min-height: 26px;
         padding: 2px 4px;
         font: inherit;
         font-size: var(--ui-t-small, 11.5px);
         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;
+        background: var(--md-sys-color-surface-container-low);
+        border: 1px solid transparent;
+        border-radius: 4px;
+      }
+      div[level] select:hover:not(:disabled) {
+        border-color: var(--md-sys-color-outline-variant);
       }
       small[copies] {
         color: var(--md-sys-color-on-surface-variant);
@@ -229,6 +233,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: 3px;
       }
+      /* A tile with no outline: its icon and name, lit under the hand -- ten outlined tiles were the boxiest part of the screen (user 2026-10-17). */
       button[shape] {
         display: flex;
         flex-direction: column;
@@ -241,37 +246,49 @@ export class FigureParts extends localize(i18next)(LitElement) {
         line-height: 1.2;
         text-align: center;
         overflow-wrap: anywhere;
+        /* A tile's name on one line, so the nine stand one height; a long name ends in an ellipsis, its title says it all. */
+        white-space: nowrap;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
         background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 6px;
+        border: 1px solid transparent;
+        border-radius: 4px;
         cursor: pointer;
       }
       /*
         A file brought in is not a starting shape: its own row under the nine, its words on one line. As a tenth tile its
         two-word name broke onto two lines and stood it taller than the rest (2026-10-16).
       */
+      button[shape] > span {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
       button[shape][import] {
         grid-column: 1 / -1;
         flex-direction: row;
         justify-content: center;
         gap: 6px;
-        min-height: 30px;
+        min-height: 26px;
         padding: 0 8px;
       }
+      /* An action in the side panel's look: icon and words in the primary colour, no pill. */
       button[recipe-catalog] {
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        padding: 4px 10px;
+        padding: 4px 6px;
+        margin-left: -6px;
         font: inherit;
         font-size: var(--ui-t-small, 11.5px);
-        color: var(--md-sys-color-on-surface);
+        color: var(--md-sys-color-primary);
         background: none;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 999em;
+        border: 1px solid transparent;
+        border-radius: 4px;
         cursor: pointer;
       }
+      button[recipe-catalog]:hover:not(:disabled) {
+        background: var(--md-sys-color-surface-container);
+      }
       button[shape]:hover:not([disabled]) {
         color: var(--md-sys-color-on-primary-container);
         background-color: var(--md-sys-color-primary-container);

package/client/modeller/figure-properties.ts

@@ -50,10 +50,10 @@ export class FigureProperties extends localize(i18next)(LitElement) {
     div[row] > select {
       flex: 1;
     }
+    /* Words as wide as themselves (side-panel-styles' action): stretched over the row, their label floated in the middle. */
     div[row] > button[act] {
-      flex: 1;
+      flex: none;
       width: auto;
-      margin-top: 0;
     }
     div[row] > span {
       flex: 1;

package/client/pages/figure-modeller-page.ts

@@ -59,25 +59,48 @@ export class FigureModellerPage extends PageView {
       min-width: 0;
       min-height: 0;
     }
-    /* The first field of the properties tab, in the side panel's look (side-panel-styles): a label above the field. */
+    /*
+      The first field of the properties tab, in the side panel's look (side-panel-styles): its label and its field on one
+      line, the field a line under its value. It is slotted into the figure panel, so the panel's measures reach it by
+      inheritance.
+    */
     label[type-field] {
       display: grid;
-      gap: 2px;
-      margin: 0 0 5px;
-      font-size: 0.68rem;
+      grid-template-columns: var(--figure-label-width, 72px) minmax(0, 1fr);
+      align-items: center;
+      gap: 4px 8px;
+      margin: 0;
+      font-size: var(--ui-t-small, 11.5px);
       color: var(--md-sys-color-on-surface-variant);
     }
+    label[type-field] > :not(span) {
+      grid-column: 2;
+    }
     label[type-field] input,
     label[type-field] code {
       box-sizing: border-box;
-      min-height: 30px;
-      padding: 4px 7px;
+      min-height: var(--figure-control-height, 26px);
+      padding: 2px 2px;
       font-family: var(--ui-mono, ui-monospace, monospace);
-      font-size: 0.76rem;
+      font-size: var(--ui-t-small, 11.5px);
+      line-height: calc(var(--figure-control-height, 26px) - 6px);
       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;
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #c4c7c5);
+      border-radius: 0;
+    }
+    /* Fixed once released: its value with no line under it, read not edited. */
+    label[type-field] code {
+      border-bottom-color: transparent;
+    }
+    label[type-field] input:hover:not(:focus) {
+      border-bottom-color: var(--md-sys-color-on-surface-variant);
+    }
+    label[type-field] input:focus {
+      outline: none;
+      border-bottom-color: var(--md-sys-color-primary);
+      box-shadow: inset 0 -1px 0 var(--md-sys-color-primary);
     }
     label[type-field] small {
       color: var(--md-sys-color-on-surface-variant);
@@ -85,7 +108,7 @@ export class FigureModellerPage extends PageView {
     p[fit-error] {
       margin: 0;
       padding: 8px 12px;
-      font-size: 12px;
+      font-size: var(--ui-t-small, 11.5px);
       color: var(--md-sys-color-error);
     }
     label[type-field] small[role='alert'] {

package/dist-client/modeller/editor-styles.js

@@ -262,7 +262,7 @@ export const EditorStyles = css `
   /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */
   div[group-fields] {
     display: grid;
-    gap: 8px;
+    gap: 6px;
   }
   /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */
   section[more] > details > summary,

package/dist-client/modeller/editor-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    border: 1px solid transparent;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] {\n    height: 32px;\n    padding: 0 14px;\n    border: none;\n    border-radius: 999em;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 8px;\n  }\n  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */\n  section[more] > details > summary,\n  section[capability] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3,\n  section[capability] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).\n  */\n  :host {\n    position: relative;\n  }\n  div[bar-overlay-panel] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  div[overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 10px;\n    border: none;\n    border-radius: 6px;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    height: 32px;\n    padding: 0 8px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}
+{"version":3,"file":"editor-styles.js","sourceRoot":"","sources":["../../client/modeller/editor-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,gHAAgH;AAChH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZ9B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/** The modeller editor's own styles: the bar's tools, the panes, the start card, the side's tabs and panels. */\nexport const EditorStyles = css`\n  :host {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    height: 100%;\n    /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */\n    container-type: inline-size;\n    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second\n       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */\n    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);\n    font-size: var(--ui-t-body, 13px);\n    color: var(--md-sys-color-on-surface);\n  }\n  /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and\n     fit in the suite's places. What the editor puts in it - the mode switch, the status, save - is styled here. */\n  ox-canvas-bar button[mode] {\n    height: 28px;\n    border: 1px solid transparent;\n    padding: 0 10px;\n    border-radius: 999em;\n    border-color: transparent;\n    background: none;\n  }\n  ox-canvas-bar button[mode][aria-pressed='true'] {\n    border-color: var(--md-sys-color-primary);\n  }\n  /* The gizmo's tools, drawn as the bar's own icon buttons (undo, redo, fit). */\n  ox-canvas-bar .gizmo-tools {\n    display: inline-flex;\n    gap: 2px;\n    padding-left: 4px;\n    border-left: 1px solid var(--md-sys-color-outline-variant);\n  }\n  ox-canvas-bar button[tool] {\n    display: inline-grid;\n    place-items: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    background: transparent;\n    color: var(--md-sys-color-on-surface-variant);\n    cursor: pointer;\n  }\n  ox-canvas-bar button[tool]:hover:not(:disabled) {\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n  }\n  ox-canvas-bar button[tool][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n  ox-canvas-bar button[tool]:disabled {\n    opacity: 0.38;\n    cursor: default;\n  }\n  /*\n    Slotted into the bar from here, the tools do not get the bar's own icon size (20px, set inside its shadow): they\n    showed at md-icon's 24px, heavier than undo, redo and fit beside them. The same size, and the bar's focus ring.\n  */\n  ox-canvas-bar button[tool] md-icon {\n    --md-icon-size: 20px;\n  }\n  ox-canvas-bar button[tool]:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary);\n    outline-offset: 1px;\n  }\n  figure-preview {\n    min-width: 0;\n    min-height: 0;\n  }\n  /* The edit canvas stays standing while the preview is in front (a 3D scene costs a third of a second to make), out of sight. */\n  div[middle][hidden] {\n    display: none;\n  }\n  /* The preview, once made, stays standing out of sight too: its 3D scene is not made again each time it is asked for. */\n  figure-preview[hidden] {\n    display: none;\n  }\n  ox-canvas-bar .status {\n    padding: 0 8px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  ox-canvas-bar .status[dirty] {\n    color: var(--md-sys-color-primary);\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] {\n    height: 32px;\n    padding: 0 14px;\n    border: none;\n    border-radius: 999em;\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n  }\n  /* The three panes are ox-three-pane's (ADR-0060 decision 8): widths 200 | 1fr | 340, 160 | 300 under\n     860px and one column with the middle first under 560px are the frame's, as are the dividers. */\n  ox-three-pane {\n    flex: 1;\n    min-height: 0;\n  }\n  figure-parts {\n    min-height: 0;\n  }\n  figure-canvas {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n  }\n  div[middle] {\n    position: relative;\n    display: flex;\n    min-width: 0;\n    min-height: 0;\n  }\n  /* A new figure's first question, over the empty canvas. */\n  div[start] {\n    position: absolute;\n    inset: 50% auto auto 50%;\n    z-index: 10;\n    color: var(--md-sys-color-on-surface);\n    transform: translate(-50%, -50%);\n    width: min(440px, calc(100% - 32px));\n    box-sizing: border-box;\n    padding: 20px;\n    border-radius: 12px;\n    background: var(--md-sys-color-surface, #fff);\n    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);\n  }\n  div[start] button[start-button] {\n    width: auto;\n    margin: 0;\n    font-size: var(--ui-t-body);\n    height: 36px;\n    padding: 0 16px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999em;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface, #fff);\n    cursor: pointer;\n  }\n  div[start] button[start-button]:hover:not(:disabled) {\n    background: var(--md-sys-color-primary-container);\n  }\n  div[start] button[start-button][pressed] {\n    color: var(--md-sys-color-on-primary);\n    background: var(--md-sys-color-primary);\n    border-color: var(--md-sys-color-primary);\n  }\n  div[start] button[start-button]:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n  div[start] h2 {\n    margin: 0 0 12px;\n    font-size: var(--ui-t-title);\n  }\n  div[start-paths] {\n    display: grid;\n    gap: 14px;\n  }\n  div[start-paths] h3 {\n    margin: 0 0 6px;\n    font-size: var(--ui-t-body);\n  }\n  div[start-shapes] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n  div[start] small {\n    display: block;\n    margin-top: 4px;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /* The side: tabs over one panel at a time, each using the whole height. */\n  /*\n    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body\n    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.\n  */\n  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    font-size: var(--ui-t-small, 11.5px);\n    background: var(--md-sys-color-surface-container-lowest);\n  }\n  div[tabs] {\n    display: flex;\n    flex: none;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  button[tab] {\n    flex: 1;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 1px;\n    min-width: 0;\n    height: 48px;\n    padding: 0;\n    border: none;\n    border-radius: 0;\n    border-bottom: 2px solid transparent;\n    background: none;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  button[tab]:hover:not([on]) {\n    background: var(--md-sys-color-surface-container);\n  }\n  button[tab][on] {\n    color: var(--md-sys-color-primary);\n    border-bottom-color: var(--md-sys-color-primary);\n  }\n  button[tab] md-icon {\n    font-size: 20px;\n    width: 20px;\n    height: 20px;\n  }\n  button[tab] span[tab-label] {\n    max-width: 100%;\n    overflow: hidden;\n    font-size: var(--ui-t-micro, 11px);\n    line-height: 1.2;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  span[badge] {\n    position: absolute;\n    top: 3px;\n    right: 2px;\n    padding: 0 5px;\n    font-size: var(--ui-t-micro, 11px);\n    font-weight: 700;\n    line-height: 1.5;\n    color: var(--md-sys-color-on-primary-container);\n    background: var(--md-sys-color-primary-container);\n    border-radius: 999em;\n    pointer-events: none;\n  }\n  /* The sections inside carry the margins (side-panel-styles); the panel only scrolls. */\n  div[panel] {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding: 0;\n  }\n  div[panel][flush] {\n    padding: 0;\n  }\n  /* Hidden, not removed: a panel keeps what it holds (the verdict its last answer) while another tab is open. */\n  [off] {\n    display: none !important;\n  }\n  /* The part's own numbers inside a group the links draw (size, place): one column, the panel's gap. */\n  div[group-fields] {\n    display: grid;\n    gap: 6px;\n  }\n  /* A folded group (capability, 「더 보기」): its title is the fold's handle, at the title's size. */\n  section[more] > details > summary,\n  section[capability] > details > summary {\n    padding: 0;\n  }\n  section[more] > details > summary > h3,\n  section[capability] > details > summary > h3 {\n    margin: 0;\n  }\n  div[more-body] {\n    display: grid;\n    gap: 16px;\n    margin-top: 12px;\n  }\n  /*\n    The view settings and the release history, opened from the bar over the right of the work: neither is about the\n    part chosen, so neither takes a tab beside the part's (chief architect 2026-10-16).\n  */\n  :host {\n    position: relative;\n  }\n  div[bar-overlay-panel] {\n    position: absolute;\n    top: var(--figure-bar-height, 44px);\n    right: 8px;\n    z-index: 5;\n    display: flex;\n    flex-direction: column;\n    width: min(360px, calc(100% - 16px));\n    max-height: calc(100% - var(--figure-bar-height, 44px) - 16px);\n    background: var(--md-sys-color-surface-container-lowest);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);\n  }\n  div[overlay-head] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 8px 8px 12px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  div[overlay-head] h3 {\n    margin: 0;\n  }\n  div[overlay-head] button[quiet] {\n    margin-left: 0;\n  }\n  div[overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    gap: 4px;\n    padding: 10px 12px;\n    background: var(--md-sys-color-surface-container-lowest);\n    border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  }\n  /* The panel's three sizes (side-panel-styles): the part's kind at the title's, its two lines at the hint's. */\n  div[subject-summary] {\n    display: grid;\n    gap: 2px;\n  }\n  div[subject-summary] b {\n    font-size: var(--ui-t-body, 13px);\n    font-weight: 600;\n  }\n  div[subject-summary] b span {\n    font-weight: 400;\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  div[subject-summary] small {\n    color: var(--md-sys-color-on-surface-variant);\n  }\n  /*\n    No rule here draws every button as a box: the side's buttons take the shared panel rules (SidePanelStyles), one\n    height with the fields beside them, and only the bar's publish keeps an outline (user 2026-10-16: 「버튼 박스도\n    과하게 사용되어서」 -- a bare 「button」 rule had put a 32px box round every button the editor drew).\n  */\n  button {\n    font: inherit;\n    box-sizing: border-box;\n    color: inherit;\n    min-width: 0;\n    cursor: pointer;\n  }\n  /* What blocks release, beside 「발행」: one red word button, and its list under the bar. */\n  ox-canvas-bar button[release-blocked] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 32px;\n    padding: 0 10px;\n    border: none;\n    border-radius: 6px;\n    color: var(--md-sys-color-on-error-container);\n    background: var(--md-sys-color-error-container);\n  }\n  ox-canvas-bar button[release-blocked] md-icon {\n    --md-icon-size: 18px;\n  }\n  div[release-blockers] {\n    position: absolute;\n    top: 46px;\n    right: 8px;\n    z-index: 6;\n    width: min(340px, calc(100% - 16px));\n    padding: 8px 10px 10px;\n    box-sizing: border-box;\n    background: var(--md-sys-color-surface);\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 8px;\n    box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);\n  }\n  ox-canvas-bar button[publish] {\n    height: 32px;\n    padding: 0 8px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n  }\n  button:disabled {\n    opacity: 0.45;\n    cursor: default;\n  }\n  button[aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n    border-color: var(--md-sys-color-primary);\n  }\n  .hint {\n    color: var(--md-sys-color-on-surface-variant);\n    line-height: 1.5;\n  }\n`\n"]}

package/dist-client/modeller/figure-links.js

@@ -102,8 +102,10 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
       flex: 1;
       margin: 0;
     }
-    div[fastened-summary] > button[quiet] {
-      margin-left: 0;
+    /* Opening the form is an action: the primary colour, at the line's end. */
+    div[fastened-summary] > button[act] {
+      flex: none;
+      margin: 0 -6px 0 0;
     }
     /* The measure's name, then its rule: X, or a cylinder's 반지름 · 길이, on one line. */
     div[row] > b {
@@ -576,7 +578,7 @@ let FigureLinks = class FigureLinks extends localize(i18next)(LitElement) {
         ${overhang}
         <div fastened-summary>
           <p fasten-sentence>${this.sentenceOf(myFace, f.toPlane ? planeWord : `${f.target}의 ${i18next.t('figure.label.face-' + targetFace)}`, mode)}</p>
-          <button quiet change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
+          <button act change-fastening ?disabled=${this.locked} @click=${() => (this.changingFastening = true)}>${i18next.t('figure.button.change-fastening')}</button>
         </div>
         ${this.renderDetachWords()}
       `;