@things-factory/figure-ui 10.1.180 → 10.1.183

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

@@ -90,11 +90,27 @@ export const EditorStyles = css `
     color: var(--md-sys-color-primary);
     font-weight: 600;
   }
-  ox-canvas-bar button[save] {
+  /*
+    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):
+    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,
+    a promise to whoever draws the figure, is outlined.
+  */
+  ox-canvas-bar button[save],
+  ox-canvas-bar button[publish] {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     height: 32px;
-    padding: 0 14px;
-    border: none;
+    padding: 0 14px 0 10px;
     border-radius: 999em;
+    font-weight: 600;
+  }
+  ox-canvas-bar button[save] md-icon,
+  ox-canvas-bar button[publish] md-icon {
+    --md-icon-size: 18px;
+  }
+  ox-canvas-bar button[save] {
+    border: 1px solid transparent;
     color: var(--md-sys-color-on-primary);
     background: var(--md-sys-color-primary);
   }
@@ -359,9 +375,10 @@ export const EditorStyles = css `
     align-items: center;
     gap: 4px;
     height: 32px;
-    padding: 0 10px;
+    padding: 0 14px 0 10px;
     border: none;
-    border-radius: 6px;
+    /* Round as save and release beside it: one shape for the bar's end. */
+    border-radius: 999em;
     color: var(--md-sys-color-on-error-container);
     background: var(--md-sys-color-error-container);
   }
@@ -382,12 +399,14 @@ export const EditorStyles = css `
     box-shadow: var(--md-sys-elevation-2, 0 2px 8px #0003);
   }
   ox-canvas-bar button[publish] {
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 6px;
+    border: 1px solid var(--md-sys-color-outline);
+    color: var(--md-sys-color-primary);
     background: var(--md-sys-color-surface);
   }
+  ox-canvas-bar button[publish][aria-pressed='true'] {
+    background: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
   button:disabled {
     opacity: 0.45;
     cursor: default;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiZ9B,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  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoa9B,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  /*\n    The bar's two commitments, one shape (user 2026-10-18: 「발행버튼도 저장버튼도 라운드 버튼으로 … 버튼 안에 적절한 아이콘」):\n    round, an icon inside, so neither is taken for the other. Save, done many times a day, is the filled one; release,\n    a promise to whoever draws the figure, is outlined.\n  */\n  ox-canvas-bar button[save],\n  ox-canvas-bar button[publish] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 14px 0 10px;\n    border-radius: 999em;\n    font-weight: 600;\n  }\n  ox-canvas-bar button[save] md-icon,\n  ox-canvas-bar button[publish] md-icon {\n    --md-icon-size: 18px;\n  }\n  ox-canvas-bar button[save] {\n    border: 1px solid transparent;\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  /* The folded 「더 보기」: its title is the fold's handle, at the title's size. */\n  section[more] > details > summary {\n    padding: 0;\n  }\n  section[more] > 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 14px 0 10px;\n    border: none;\n    /* Round as save and release beside it: one shape for the bar's end. */\n    border-radius: 999em;\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    border: 1px solid var(--md-sys-color-outline);\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface);\n  }\n  ox-canvas-bar button[publish][aria-pressed='true'] {\n    background: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\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/editor.d.ts

@@ -9,6 +9,7 @@ import './figure-material-panel.js';
 import './figure-section-panel.js';
 import './figure-section-editor.js';
 import './figure-links.js';
+import './figure-fasten-dialog.js';
 import './figure-controls.js';
 import './figure-clips.js';
 import './figure-data-panel.js';
@@ -63,6 +64,17 @@ export declare class FigureEditor extends LitElement {
     private tab;
     /** The view settings or the release history, open over the work from the bar. */
     private overlay?;
+    /**
+     * The fastening window open for the selected part (user 2026-10-17), in the standard popup (2026-10-18): chosen there,
+     * applied once. It closes with nothing written when the part, the tab or the middle changes under it.
+     */
+    private fastening;
+    private fastenPopup?;
+    private fastenWindow?;
+    /** Why the window's 「적용」 was refused, said in it. */
+    private fastenError;
+    /** The face of the part a row of the window's list is on, lit on the canvas while the pointer or the arrows are there. */
+    private fastenHover;
     /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
     private moreOpen;
     private static storedMoreOpen;
@@ -287,13 +299,22 @@ export declare class FigureEditor extends LitElement {
     private releaseWords;
     /** The findings that block release, under the bar beside 「발행」, each with the way out the verdict tab offers for it. */
     private renderReleaseBlockers;
-    /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
     private goRelease;
     private overhangOf;
     /** The selected part's motion at both ends of its range, made once per version and part. */
     private motionEnds;
-    /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+    /** "Fasten it first", from the motion tab or a row: to the properties tab, the fastening window open on this part. */
     private goFasten;
+    private openFastening;
+    private closeFastening;
+    private fastenClosed;
+    /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+    private tellFastening;
+    disconnectedCallback(): void;
+    /** 「적용」: the command, one step; refused, the window stays open and says why. */
+    private applyFastening;
+    /** A row of the window's list under the pointer or the arrows: the face of that part it would be fastened on, lit. */
+    private hoverFastening;
     /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
     private previewShown;
     /**

package/dist-client/modeller/editor.js

@@ -7,7 +7,7 @@ import { openPopup } from '@operato/layout';
 import { OxPrompt } from '@operato/popup';
 import { customElement, property, state } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
+import { figurePartFaceOf, PART_LIMIT, parseFigureRecipe, resolveFigureRecipe, figurePartCountOf, figurePartIdFor, figureRecipeIdFor, figureSizeEditChanges, figureScaleAnchorOf, figureSectionMeasuresOf, figurePlaneAlignChanges, figureRowOf, figureFaceOverhangOf, figureRoomOnlyInputsOf, figureRoomRefitOf } from '@hatiolab/figure-model';
 import './figure-recipe-catalog.js';
 import { captureFigureThumbnail } from './thumbnail.js';
 import { drawableFigureParts } from './renderer.js';
@@ -16,10 +16,11 @@ import './figure-parts.js';
 import './figure-material-panel.js';
 import './figure-section-panel.js';
 import './figure-section-editor.js';
-import { rowWordsOf } from './command-preview.js';
+import { faceHighlightOf, rowWordsOf } from './command-preview.js';
 import { CommandPreview, NO_WORDS } from './command-preview-controller.js';
 import { motionEndsOf } from './motion-ends.js';
 import './figure-links.js';
+import './figure-fasten-dialog.js';
 import './figure-controls.js';
 import './figure-clips.js';
 import './figure-data-panel.js';
@@ -78,6 +79,15 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.selected = '';
         this.error = '';
         this.tab = 'properties';
+        /**
+         * The fastening window open for the selected part (user 2026-10-17), in the standard popup (2026-10-18): chosen there,
+         * applied once. It closes with nothing written when the part, the tab or the middle changes under it.
+         */
+        this.fastening = false;
+        /** Why the window's 「적용」 was refused, said in it. */
+        this.fastenError = '';
+        /** The face of the part a row of the window's list is on, lit on the canvas while the pointer or the arrows are there. */
+        this.fastenHover = null;
         /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
         this.moreOpen = FigureEditor_1.storedMoreOpen();
         /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes. */
@@ -136,8 +146,16 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.lastAnchors = {};
         /** Data tried in the data tab, given to the preview's figures as their `data`; null when none is (ADR-0051 §8). */
         this.dataSample = null;
-        /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
+        /*
+          The bar's one way to the releases (user 2026-10-18: the history icon and 「발행」 opened the same panel): the panel
+          of releases -- what to release now, the releases before it and going back to one -- opened at its release section,
+          closed again by a second press.
+        */
         this.goRelease = async () => {
+            if (this.overlay === 'history') {
+                this.overlay = undefined;
+                return;
+            }
             this.overlay = 'history';
             await this.updateComplete;
             await this.querySelector('figure-history-panel')?.showRelease?.();
@@ -242,6 +260,9 @@ let FigureEditor = class FigureEditor extends LitElement {
             this.selected = '';
         if (_changed.has('selected'))
             this.gizmoMode = undefined;
+        /* The window is about the part chosen on the properties tab, being edited: it does not follow anywhere else. */
+        if (this.fastening && (_changed.has('selected') || !this.selected || this.tab !== 'properties' || this.middle !== 'edit'))
+            this.closeFastening();
         /*
          * The section editor is of one part: when the selection moves off it by any way -- another part picked, the scene's
          * own Esc, the part removed, another figure opened -- it closes and lets go of the preview it held.
@@ -765,10 +786,11 @@ let FigureEditor = class FigureEditor extends LitElement {
         return html `<figure-links
       .revision=${shown}
       .section=${section}
-      .active=${this.tab === tab}
+      .active=${this.tab === tab && !(section === 'shape' && this.fastening)}
       .partId=${this.selected}
       ?locked=${unavailable}
       @command=${(e) => this.linkCommand(e.detail.action)}
+      @fasten-open=${() => this.openFastening()}
       .previewWords=${this.commandPreview.words()}
       .detachWords=${this.commandPreview.detachWords(shown)}
       .overhangWords=${section === 'shape' ? this.overhangOf(shown).words : NO_WORDS}
@@ -877,7 +899,7 @@ let FigureEditor = class FigureEditor extends LitElement {
       <div overlay-body>${body}</div>
     </div>`;
         return html `${panel('view', 'figure.label.tab-environment', html `<figure-settings .view=${this.view} @update-view=${(e) => this.setView(e.detail.view)}></figure-settings>`)}
-      ${panel('history', 'figure.label.history', html `<slot name="history"></slot>`)}`;
+      ${panel('history', 'figure.button.release', html `<slot name="history"></slot>`)}`;
     }
     /**
      * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
@@ -1429,12 +1451,76 @@ let FigureEditor = class FigureEditor extends LitElement {
             }
         });
     }
-    /** "Fasten it first", from the motion tab: to the properties tab, the fastening form open on this part. */
+    /** "Fasten it first", from the motion tab or a row: to the properties tab, the fastening window open on this part. */
     async goFasten() {
         this.tab = 'properties';
         await this.updateComplete;
-        const links = [...this.renderRoot.querySelectorAll('figure-links')].find(l => l.section === 'shape');
-        await links?.showFastening?.();
+        this.openFastening();
+    }
+    openFastening() {
+        if (!this.selected || this.fastenPopup)
+            return;
+        this.fastenError = '';
+        this.fastenHover = null;
+        this.fastening = true;
+        const content = document.createElement('figure-fasten-dialog');
+        content.addEventListener('preview-command', e => this.commandPreview.ask(e.detail));
+        content.addEventListener('fasten-hover', e => this.hoverFastening(e.detail));
+        content.addEventListener('fasten-apply', e => this.applyFastening(e.detail.action));
+        content.addEventListener('fasten-cancel', () => this.closeFastening());
+        this.fastenWindow = content;
+        this.tellFastening();
+        const popup = openPopup(html `${content}`, { title: i18next.t('figure.label.fastening'), size: 'fit', backdrop: true, movable: true, closable: true, escapable: true });
+        this.fastenPopup = popup;
+        /* Closed by its own X or Esc as well: the editor lets go of it the same way. */
+        popup.result.then(() => this.fastenPopup === popup && this.fastenClosed());
+    }
+    closeFastening() {
+        const popup = this.fastenPopup;
+        this.fastenClosed();
+        popup?.close();
+    }
+    fastenClosed() {
+        this.fastenPopup = undefined;
+        this.fastenWindow = undefined;
+        this.fastening = false;
+        this.fastenError = '';
+        this.fastenHover = null;
+    }
+    /** What the window shows is the editor's: the figure on screen, the part, and what the preview and a refusal said. */
+    tellFastening() {
+        const content = this.fastenWindow;
+        const view = this.session?.read();
+        if (!content || !view)
+            return;
+        content.revision = this.shown();
+        content.partId = this.selected;
+        content.locked = view.loading || !!view.error || view.saving || !view.context;
+        content.previewWords = this.commandPreview.words();
+        content.error = this.fastenError;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.closeFastening();
+    }
+    /** 「적용」: the command, one step; refused, the window stays open and says why. */
+    applyFastening(action) {
+        if (this.linkCommand(action))
+            this.closeFastening();
+        else
+            this.fastenError = this.error;
+    }
+    /** A row of the window's list under the pointer or the arrows: the face of that part it would be fastened on, lit. */
+    hoverFastening(on) {
+        const shown = this.shown();
+        let lit = null;
+        try {
+            lit = on?.face && shown ? faceHighlightOf(figurePartFaceOf(shown.asset, on.part, on.face, shown.inputs)) : null;
+        }
+        catch {
+            lit = null;
+        }
+        this.fastenHover = lit;
     }
     /** What the canvas draws of it, made once per preview: a new list every render would stand the board up each time. */
     previewShown() {
@@ -1442,7 +1528,9 @@ let FigureEditor = class FigureEditor extends LitElement {
         /* On the motion tab, with nothing being tried: where the selected part's motion takes it, at both ends. */
         if (!p && this.tab === 'motion' && this.middle === 'edit')
             return { ghost: this.motionEnds()?.ghost ?? [], highlight: null };
-        return this.commandPreview.drawnOf(p);
+        const drawn = this.commandPreview.drawnOf(p);
+        /* A part in the fastening window's list under the pointer: its face lit in place of the one the command meets. */
+        return this.fastenHover ? { ghost: drawn.ghost, highlight: this.fastenHover } : drawn;
     }
     /**
      * What the author has in view, for the AI dock to hear with a request (ADR-0097 §5.6 item 5): the part selected and
@@ -1485,6 +1573,7 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     updated(changed) {
         super.updated?.(changed);
+        this.tellFastening();
         /* Nothing blocks release any more: the list under the bar closes, and opens fresh when something does again. */
         if (changed.has('releaseBlockers') && !this.releaseBlockers.length && this.blockersOpen)
             this.blockersOpen = false;
@@ -1697,14 +1786,22 @@ let FigureEditor = class FigureEditor extends LitElement {
           </button>`)}
         <span slot="status" class="status" role="status" ?dirty=${status === 'figure.text.unsaved-changes'}>${i18next.t(status)}</span>
         <span slot="status" release-state>${this.releaseWords(view)}</span>
-        ${this.renderOverlayButton('history', 'history', 'figure.label.history', 'commit')}
         ${blockers.length
             ? html `<button slot="commit" release-blocked aria-expanded=${String(this.blockersOpen)} @click=${() => (this.blockersOpen = !this.blockersOpen)}>
               <md-icon>error</md-icon>${i18next.t('figure.button.release-blocked', { count: blockers.length })}
             </button>`
             : nothing}
-        <button slot="commit" publish ?disabled=${!view.id} title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')} @click=${this.goRelease}>${i18next.t('figure.button.release')}</button>
-        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}>${i18next.t('figure.button.save')}</button>
+        <button
+          slot="commit"
+          publish
+          aria-pressed=${String(this.overlay === 'history')}
+          ?disabled=${!view.id}
+          title=${view.id ? '' : i18next.t('figure.text.save-the-figure-before-releasing')}
+          @click=${this.goRelease}
+        >
+          <md-icon>publish</md-icon>${i18next.t('figure.button.release')}
+        </button>
+        <button slot="commit" save ?disabled=${unavailable || (!view.dirty && !!view.id)} @click=${this.save}><md-icon>save</md-icon>${i18next.t('figure.button.save')}</button>
       </ox-canvas-bar>
       ${this.blockersOpen && blockers.length ? this.renderReleaseBlockers(blockers, asset, unavailable) : nothing}
       ${this.catalogOpen
@@ -2098,6 +2195,18 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], FigureEditor.prototype, "overlay", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "fastening", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "fastenError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "fastenHover", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)