@things-factory/figure-ui 10.1.169 → 10.1.171

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+S9B,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    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    font: 13px sans-serif;\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    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  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\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: 0.66rem;\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: 0.62rem;\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  /* 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  button {\n    font: inherit;\n    box-sizing: border-box;\n    height: 32px;\n    border: 1px solid var(--md-sys-color-outline-variant);\n    border-radius: 6px;\n    background: var(--md-sys-color-surface);\n    color: inherit;\n    padding: 0 8px;\n    min-width: 0;\n  }\n  button {\n    cursor: pointer;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Y9B,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    font: 13px sans-serif;\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  aside {\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\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: 0.66rem;\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: 0.62rem;\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"]}

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

@@ -16,6 +16,7 @@ import './figure-preview.js';
 import './figure-settings.js';
 import './figure-capability-panel.js';
 import './figure-mesh-choice.js';
+import type { FigureGateFinding } from '../types.js';
 import type { FigureBudgetLine } from './maturity.js';
 import type { FirstSave } from './first-save.js';
 export declare class FigureEditor extends LitElement {
@@ -26,6 +27,12 @@ export declare class FigureEditor extends LitElement {
         state?: 'draft' | 'released';
         version: number;
     };
+    /**
+     * What blocks release now, as the page's verdict heard it: said beside 「발행」 with the way out at hand, so an author
+     * does not find it at the foot of the verdict tab (first 15 minutes, 2026-10-16; chief architect, Q1 B).
+     */
+    releaseBlockers: FigureGateFinding[];
+    private blockersOpen;
     /** The recipe templates (ADR-0095), read by the page from the server. */
     templates: RecipeTemplate[];
     /** Reads a template's guide; given by the page. */
@@ -52,6 +59,14 @@ export declare class FigureEditor extends LitElement {
     /** The same link offered again with the size range narrowed, after a link the declared range could not hold. */
     private retry?;
     private tab;
+    /** The view settings or the release history, open over the work from the bar. */
+    private overlay?;
+    /** The capability group open: the canvas marks the places only while their group is in sight. */
+    private capabilityOpen;
+    /** 「더 보기」 open, as this person left it last (chief architect 2026-10-16: kept per person). */
+    private moreOpen;
+    private static storedMoreOpen;
+    private setMoreOpen;
     /** The frame the bar folds - found after the first render, since the bar is drawn before it. */
     private panes?;
     /** What the middle shows: the parts being edited, or the figure placed on a board at eight sizes. */
@@ -187,6 +202,30 @@ export declare class FigureEditor extends LitElement {
     private renamePart;
     /** Size response, fastening and motion for the selected part, as authoring commands. */
     private renderLinks;
+    /**
+     * A part's groups in one order whatever its state (chief architect 2026-10-16): its size, its place, its row. The links
+     * draw the three groups and their rules; the part's own numbers go into them by slot. A fastened part's place and turn
+     * are its fastening's: the place group says it in one line and the locked cells are not drawn (user 2026-10-16).
+     */
+    private renderPartGroups;
+    /**
+     * What the figure does -- its places (ADR-0118) -- as a group of the properties, folded: a declaration made once,
+     * whose marks on the canvas show while it is open. A verdict that finds it empty still says where it is.
+     */
+    private renderCapability;
+    /**
+     * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
+     * 2026-10-16) -- the section, its corners and inside; transparency, glow and segments; the mirrored copy and the
+     * alignment tools.
+     */
+    private renderMore;
+    /** A bar button that opens the view settings or the release history over the work; pressed while it is open. */
+    private renderOverlayButton;
+    /**
+     * The view settings or the release history, over the work under the bar. Both stay drawn, hidden when closed: the
+     * history keeps what it read, as the tabs kept it. Esc closes it.
+     */
+    private renderOverlay;
     /**
      * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
      * while dragging and the commit keeps it, so nothing jumps on release. A part whose fastening is turned has none the
@@ -248,7 +287,9 @@ export declare class FigureEditor extends LitElement {
     private setPitch;
     /** Choose a part, from the list, the canvas or a place row. A figure-level tab gives way to the part's properties. */
     private releaseWords;
-    /** To the release that exists: the history tab's release section, not a second one here. */
+    /** 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. */

package/dist-client/modeller/editor.js

@@ -46,7 +46,8 @@ const NO_MARKS = [];
 import { apexOver, drawnOf } from './section-drawing.js';
 import { END_FACE } from './section-controls.js';
 import { nudgeOf, placementOf } from './stage-model.js';
-import { roomRefitRowsOf } from './occupancy.js';
+import { occupancyFromParts, roomRefitRowsOf } from './occupancy.js';
+import { gateFindingStyles, renderGateFinding } from './gate-findings.js';
 import { editRefusalOf, inDeclaredRoom, narrowingRetryOf, partNameRefusalOf, partRefusalOf, placedRefusalOf, recipeRefusalOf, removalNoticeOf } from './refusals.js';
 import { endPlaceKeyOf, fieldWordsOf, followOf, measureNow, partSummaryOf, instanceRangeOf, instanceRangeToDeclare, proportionToFollow, rangeDiffers, rangeWith, turnsAboutAJoint, valueNow } from './links.js';
 import { jointFanOf } from './joint-fan.js';
@@ -54,11 +55,20 @@ import { derivedOf } from './revision.js';
 import { jointDragOf } from './joint-drag.js';
 import { liveOverSession, NOTHING_LIVE, scrubbed, scrubStep } from './live.js';
 import { startingShapeKindOfBody } from './starting-shape.js';
+import { groupMenu, GroupMenuStyles } from './group-menu.js';
+/** The person's own fold of the properties' 「더 보기」, kept in their browser. */
+const MORE_OPEN_KEY = 'figure-properties-more-open';
 /** Product editor surface. The injected session is shared by page persistence and AI commands. */
 const NO_OVERHANG = { words: NO_WORDS, note: NO_WORDS };
 let FigureEditor = class FigureEditor extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * What blocks release now, as the page's verdict heard it: said beside 「발행」 with the way out at hand, so an author
+         * does not find it at the foot of the verdict tab (first 15 minutes, 2026-10-16; chief architect, Q1 B).
+         */
+        this.releaseBlockers = [];
+        this.blockersOpen = false;
         /** The recipe templates (ADR-0095), read by the page from the server. */
         this.templates = [];
         this.catalogOpen = false;
@@ -68,6 +78,10 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.selected = '';
         this.error = '';
         this.tab = 'properties';
+        /** The capability group open: the canvas marks the places only while their group is in sight. */
+        this.capabilityOpen = false;
+        /** 「더 보기」 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. */
         this.middle = 'edit';
         /** A line saying what a command did besides what was asked; gone at the next command. */
@@ -124,16 +138,35 @@ 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 tab's release section, not a second one here. */
+        /** To the release that exists: the history's release section, opened from the bar, not a second one here. */
         this.goRelease = async () => {
-            this.tab = 'history';
+            this.overlay = 'history';
             await this.updateComplete;
             await this.querySelector('figure-history-panel')?.showRelease?.();
         };
     }
     static { FigureEditor_1 = this; }
     /* The operato scrollbar, as every scrolling panel of the app has it -- the side panel scrolled with the browser's own. */
-    static { this.styles = [ScrollbarStyles, SidePanelStyles, EditorStyles]; }
+    static { this.styles = [ScrollbarStyles, SidePanelStyles, gateFindingStyles, GroupMenuStyles, EditorStyles]; }
+    static storedMoreOpen() {
+        try {
+            return localStorage.getItem(MORE_OPEN_KEY) === '1';
+        }
+        catch {
+            return false;
+        }
+    }
+    setMoreOpen(open) {
+        if (open === this.moreOpen)
+            return;
+        this.moreOpen = open;
+        try {
+            localStorage.setItem(MORE_OPEN_KEY, open ? '1' : '0');
+        }
+        catch {
+            /* A browser that keeps nothing folds it again next time. */
+        }
+    }
     static storedView() {
         try {
             const stored = JSON.parse(localStorage.getItem('figure-view') ?? 'null');
@@ -720,7 +753,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         }
     }
     /** Size response, fastening and motion for the selected part, as authoring commands. */
-    renderLinks(unavailable, section) {
+    renderLinks(unavailable, section, slotted = nothing) {
         const shown = this.shown();
         if (!shown)
             return null;
@@ -738,7 +771,122 @@ let FigureEditor = class FigureEditor extends LitElement {
       @go-fasten=${() => this.goFasten()}
       @preview-command=${(e) => this.commandPreview.ask(e.detail)}
       @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
-    ></figure-links>`;
+    >${slotted}</figure-links>`;
+    }
+    /**
+     * A part's groups in one order whatever its state (chief architect 2026-10-16): its size, its place, its row. The links
+     * draw the three groups and their rules; the part's own numbers go into them by slot. A fastened part's place and turn
+     * are its fastening's: the place group says it in one line and the locked cells are not drawn (user 2026-10-16).
+     */
+    renderPartGroups(shown, geometry, fields, unavailable, held) {
+        const groups = this.withSizeRow(groupFields(fields, this.selected), held);
+        const size = groups.vectors.filter(g => g.kind === 'vector' && g.name === 'size');
+        const place = groups.vectors.filter(g => g.kind === 'vector' && g.name !== 'size');
+        const fastened = !!this.asset()?.joints?.some(j => j.body1.part === ownerOf(this.selected));
+        const placeLocked = fastened && place.every(g => g.kind === 'vector' && ['x', 'y', 'z'].every(axis => !g.cells[axis]));
+        return this.renderLinks(unavailable, 'shape', html `${size.length || groups.singles.length
+            ? html `<div slot="size" group-fields>
+              ${size.map(g => this.renderVector(g, unavailable, held))}
+              ${groups.singles.length
+                ? html `<div form>${groups.singles.map(g => (g.kind === 'single' ? this.renderSingle(g.name, g.field, unavailable) : nothing))}</div>`
+                : nothing}
+            </div>`
+            : nothing}
+        ${place.length && !placeLocked
+            ? html `<div slot="place" group-fields>${place.map(g => this.renderVector(g, unavailable, held))}${this.renderHeldAxes(place)}</div>`
+            : nothing}
+        ${this.renderRepeat(shown, geometry, unavailable)}`);
+    }
+    /**
+     * What the figure does -- its places (ADR-0118) -- as a group of the properties, folded: a declaration made once,
+     * whose marks on the canvas show while it is open. A verdict that finds it empty still says where it is.
+     */
+    renderCapability(asset, unavailable) {
+        return html `<section capability>
+      <details capability-fold ?open=${this.capabilityOpen} @toggle=${(e) => (this.capabilityOpen = e.target.open)}>
+        <summary><h3>${i18next.t('figure.label.tab-capability')}</h3></summary>
+        ${this.selected ? this.renderLinks(unavailable, 'places') : nothing}
+        <figure-capability-panel
+          .asset=${asset}
+          .selected=${this.selected}
+          ?locked=${unavailable}
+          @select-part=${(e) => this.choose(e.detail.id)}
+          @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+        ></figure-capability-panel>
+      </details>
+    </section>`;
+    }
+    /**
+     * 「더 보기」: what few parts need, folded by default and left as this person last left it (chief architect
+     * 2026-10-16) -- the section, its corners and inside; transparency, glow and segments; the mirrored copy and the
+     * alignment tools.
+     */
+    renderMore(part, palette, unavailable) {
+        const tools = this.renderTools(unavailable);
+        return html `<section more>
+      <details more-fold ?open=${this.moreOpen} @toggle=${(e) => this.setMoreOpen(e.target.open)}>
+        <summary><h3>${i18next.t('figure.label.group-more')}</h3></summary>
+        <div more-body>
+          ${tools ? html `<div group-fields>${tools}</div>` : nothing}
+          <figure-section-panel
+            embedded
+            .body=${{ ...part, id: this.selected }}
+            ?locked=${unavailable}
+            .faceMapping=${this.faceMapping?.from === 'panel' ? this.faceMapping.need : undefined}
+            @face-mapped=${(e) => this.mapFaces(e.detail.remap)}
+            @face-mapping-cancel=${() => (this.faceMapping = undefined)}
+            @command=${(e) => this.linkCommand(e.detail.action)}
+            @command-live=${(e) => this.holdAction(e.detail.action)}
+            @section-editor-open=${() => (this.sectionEditing = this.selected)}
+          ></figure-section-panel>
+          <figure-material-panel
+            show="more"
+            .body=${{ ...part, id: this.selected }}
+            .palette=${palette}
+            ?locked=${unavailable}
+            @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
+            @part-live=${(e) => this.hold({}, e.detail.edit)}
+          ></figure-material-panel>
+        </div>
+      </details>
+    </section>`;
+    }
+    /** A bar button that opens the view settings or the release history over the work; pressed while it is open. */
+    renderOverlayButton(which, icon, label, slot) {
+        const open = this.overlay === which;
+        return html `<button
+      slot=${slot ?? nothing}
+      tool
+      bar-overlay=${which}
+      aria-pressed=${String(open)}
+      aria-label=${i18next.t(label)}
+      title=${i18next.t(label)}
+      @click=${() => (this.overlay = open ? undefined : which)}
+    >
+      <md-icon>${icon}</md-icon>
+    </button>`;
+    }
+    /**
+     * The view settings or the release history, over the work under the bar. Both stay drawn, hidden when closed: the
+     * history keeps what it read, as the tabs kept it. Esc closes it.
+     */
+    renderOverlay() {
+        const close = () => (this.overlay = undefined);
+        const panel = (which, label, body) => html `<div
+      bar-overlay-panel=${which}
+      role="dialog"
+      aria-label=${i18next.t(label)}
+      ?off=${this.overlay !== which}
+      @keydown=${(e) => e.key === 'Escape' && (e.stopPropagation(), close())}
+    >
+      <div overlay-head>
+        <h3>${i18next.t(label)}</h3>
+        <button quiet aria-label=${i18next.t('figure.button.close')} title=${i18next.t('figure.button.close')} @click=${close}><md-icon>close</md-icon></button>
+      </div>
+      <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>`)}`;
     }
     /**
      * The face a size drag keeps for the selected part, figure-model's rule (`figureScaleAnchorOf`): the gizmo shows it
@@ -800,6 +948,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         this.retry = undefined;
         this.notice = '';
         const hadSize = this.hasSize();
+        const hadSpace = !!this.shown()?.asset.occupancy;
         try {
             this.session.command(action);
             this.error = '';
@@ -807,7 +956,9 @@ let FigureEditor = class FigureEditor extends LitElement {
             /* What the command did besides what was asked, in one line: the figure's size declared to follow (ADR ruling Q1). */
             if (action.kind === 'follow-size' && !hadSize) {
                 const size = this.designValues();
-                this.notice = i18next.t('figure.text.size-declared-to-follow', {
+                /* The same step may have fitted the space the figure takes to its parts (figure-model, ruling 2026-10-16 Q1 A): one line says both. */
+                const spaceToo = !hadSpace && !!this.shown()?.asset.occupancy;
+                this.notice = i18next.t(spaceToo ? 'figure.text.size-and-space-declared-to-follow' : 'figure.text.size-declared-to-follow', {
                     x: Math.round(size['size.x'] ?? 0).toLocaleString(),
                     y: Math.round(size['size.y'] ?? 0).toLocaleString(),
                     z: Math.round(size['size.z'] ?? 0).toLocaleString()
@@ -1057,8 +1208,12 @@ let FigureEditor = class FigureEditor extends LitElement {
         const longest = model.inputs.find(i => i.id === lengthRef)?.max;
         const limit = model.constants.find(c => c.id === layout?.args[6])?.value;
         const field = { id: own, unit: 'mm', role: 'design', value: pitch ?? 0 };
-        return html `<section>
-      <h3>${i18next.t('figure.label.repeat')}</h3>
+        const removable = !!asset.joints?.some(j => j.body1.part === this.selected && j.repeat);
+        return html `<section slot="row" row>
+      <h3>
+        ${i18next.t('figure.label.repeat')}
+        ${groupMenu([{ label: i18next.t('figure.button.remove-repeat'), icon: 'close', disabled: unavailable || !removable, run: () => this.run(() => this.session.command({ kind: 'remove-repeat', part: this.selected })) }])}
+      </h3>
       <div inline-field><label>${i18next.t('figure.label.repeat-axis')}</label><span value>${axis.toUpperCase()}</span></div>
       <div inline-field><label>${i18next.t('figure.label.repeat-count')}</label><span value>${repeat.count}</span></div>
       <div inline-field>
@@ -1084,11 +1239,6 @@ let FigureEditor = class FigureEditor extends LitElement {
             : i18next.t(fits ? 'figure.text.repeat-fits-length' : 'figure.text.repeat-fixed-count')}
       </p>
       ${this.renderPublicPitch(asset, pitch ?? 0, unavailable)}
-      ${asset.joints?.some(j => j.body1.part === this.selected && j.repeat)
-            ? html `<button act ?disabled=${unavailable} @click=${() => this.run(() => this.session.command({ kind: 'remove-repeat', part: this.selected }))}>
-            <md-icon>close</md-icon>${i18next.t('figure.button.remove-repeat')}
-          </button>`
-            : nothing}
     </section>`;
     }
     /** The selected row as it is drawn now, read by figure-model: nothing when it cannot be read. */
@@ -1218,6 +1368,21 @@ let FigureEditor = class FigureEditor extends LitElement {
             return i18next.t('figure.text.release-state-released', { version: String(version) });
         return version > 0 ? i18next.t('figure.text.release-state-draft-over', { version: String(version) }) : i18next.t('figure.text.release-state-draft-new');
     }
+    /** The findings that block release, under the bar beside 「발행」, each with the way out the verdict tab offers for it. */
+    renderReleaseBlockers(asset, unavailable) {
+        const parts = (asset?.appearance ?? []).map(look => look.target);
+        const way = (code) => (code === 'occupancy-undeclared' || code === 'part-outside-occupancy') && asset && parts.length
+            ? html `<button act ?disabled=${unavailable} @click=${() => this.linkCommand(occupancyFromParts(asset))}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>`
+            : nothing;
+        return html `<div release-blockers role="dialog" aria-label=${i18next.t('figure.text.must-fix-to-release')} @keydown=${(e) => e.key === 'Escape' && (this.blockersOpen = false)}>
+      <ul gate>
+        <li head>${i18next.t('figure.text.must-fix-to-release')}</li>
+        ${this.releaseBlockers.map(finding => renderGateFinding(finding, true, way(finding.code), parts))}
+      </ul>
+    </div>`;
+    }
     /*
       Past the edge of the face a part is fastened to (ADR-0097 §5.5, Q3): the selected part's own, and the parts fastened
       to it -- said apart from the room, nothing moved. Read once per version, part and language. The note says it is wider
@@ -1313,7 +1478,7 @@ let FigureEditor = class FigureEditor extends LitElement {
         /* A copy on the canvas selects its repeat: the part the author made. */
         this.selected = id ? ownerOf(id) : id;
         this.faceMapping = undefined;
-        if (id && (this.tab === 'verdict' || this.tab === 'view' || this.tab === 'history'))
+        if (id && this.tab === 'verdict')
             this.tab = 'properties';
     }
     asset() {
@@ -1329,6 +1494,9 @@ let FigureEditor = class FigureEditor extends LitElement {
     }
     updated(changed) {
         super.updated?.(changed);
+        /* 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;
         this.refusals.tell(changed);
         this.panelMemory.restore(() => this.selected);
         const panes = this.renderRoot.querySelector('ox-three-pane') ?? undefined;
@@ -1408,7 +1576,6 @@ let FigureEditor = class FigureEditor extends LitElement {
                 ${i18next.t(`figure.label.resize-place-${one}`)}
               </button>`)}
           </div>
-          <small>${i18next.t('figure.text.placement-is-intent')}</small>
         </section>
         <section>
           <h3>${i18next.t('figure.label.start-shape')}</h3>
@@ -1527,14 +1694,22 @@ let FigureEditor = class FigureEditor extends LitElement {
         @canvas-fit=${() => this.renderRoot.querySelector('figure-canvas')?.fit()}
       >
         ${this.renderGizmoTools(!unavailable && this.middle === 'edit')}
+        ${this.renderOverlayButton('view', 'wb_sunny', 'figure.label.tab-environment')}
         ${['edit', 'preview'].map(mode => html `<button slot="mode" mode aria-pressed=${String(this.middle === mode)} title=${i18next.t('figure.text.mode-' + mode + '-explained')} @click=${() => (this.middle = mode)}>
             ${i18next.t('figure.label.mode-' + mode)}
           </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')}
+        ${this.releaseBlockers.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: this.releaseBlockers.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>
       </ox-canvas-bar>
+      ${this.blockersOpen && this.releaseBlockers.length ? this.renderReleaseBlockers(asset, unavailable) : nothing}
       ${this.catalogOpen
             ? html `<figure-recipe-catalog
             .templates=${this.templates}
@@ -1600,7 +1775,7 @@ let FigureEditor = class FigureEditor extends LitElement {
           .fan=${this.fanOf(shown, live)}
           .ghost=${this.previewShown().ghost}
           .highlight=${this.previewShown().highlight}
-          .marks=${this.tab === 'capability' ? this.slotMarks(view, asset) : NO_MARKS}
+          .marks=${this.tab === 'properties' && this.capabilityOpen ? this.slotMarks(view, asset) : NO_MARKS}
           .palette=${view.palette ?? {}}
           .context=${view.context ?? ''}
           .selected=${this.selected}
@@ -1614,12 +1789,9 @@ let FigureEditor = class FigureEditor extends LitElement {
         <aside slot="end">
           <div tabs>
             ${this.renderTab('properties', 'tune', i18next.t('figure.label.properties'))}
-            ${this.renderTab('capability', 'conveyor_belt', i18next.t('figure.label.tab-capability'))}
             ${this.renderTab('motion', 'animation', i18next.t('figure.label.motion'))}
             ${this.renderTab('data', 'sensors', i18next.t('figure.label.tab-data'))}
             ${this.renderTab('verdict', 'insights', i18next.t('figure.label.maturity'), this.instances)}
-            ${this.renderTab('view', 'wb_sunny', i18next.t('figure.label.tab-environment'))}
-            ${this.renderTab('history', 'history', i18next.t('figure.label.history'))}
           </div>
           <slot name="notice"></slot>
           <div panel ?off=${tab !== 'properties'}>
@@ -1639,27 +1811,17 @@ let FigureEditor = class FigureEditor extends LitElement {
                     </div>
                     ${this.renderRepeatNote(view.geometry)}
                   </section>
-                  ${this.renderRepeat(shown, view.geometry, unavailable)}
-                  ${this.renderGroups(this.withSizeRow(groupFields(partFields, this.selected), held), 'figure.label.group-placement-size', 'figure.label.group-shape', unavailable, this.renderTools(unavailable), held)}
+                  ${this.renderPartGroups(shown, view.geometry, partFields, unavailable, held)}
                   ${roomFields.length ? this.renderRoomOnly(roomFields, unavailable) : nothing}
-                  ${this.renderLinks(unavailable, 'shape')}
-                  <figure-section-panel
-                    .body=${{ ...part, id: this.selected }}
-                    ?locked=${unavailable}
-                    .faceMapping=${this.faceMapping?.from === 'panel' ? this.faceMapping.need : undefined}
-                    @face-mapped=${(e) => this.mapFaces(e.detail.remap)}
-                    @face-mapping-cancel=${() => (this.faceMapping = undefined)}
-                    @command=${(e) => this.linkCommand(e.detail.action)}
-                    @command-live=${(e) => this.holdAction(e.detail.action)}
-                    @section-editor-open=${() => (this.sectionEditing = this.selected)}
-                  ></figure-section-panel>
                   <figure-material-panel
                     .body=${{ ...part, id: this.selected }}
                     .palette=${view.palette ?? {}}
                     ?locked=${unavailable}
                     @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
                     @part-live=${(e) => this.hold({}, e.detail.edit)}
-                  ></figure-material-panel>`
+                  ></figure-material-panel>
+                  ${this.renderCapability(asset, unavailable)}
+                  ${this.renderMore(part, view.palette ?? {}, unavailable)}`
             : view.geometry.length === 0
                 ? html `${this.renderSubject()}<section empty-figure>
                     <p>${i18next.t('figure.text.empty-figure-next')}</p>
@@ -1670,18 +1832,8 @@ let FigureEditor = class FigureEditor extends LitElement {
                   </section>`
                 : html `${this.renderSubject()}<slot name="figure"></slot>
                   ${this.renderGroups(groupFields(common), 'figure.label.group-figure-size', 'figure.label.design-inputs', unavailable)}
-                  ${this.renderInstanceRange(shown, unavailable)}`}
-          </div>
-          <div panel ?off=${tab !== 'capability'}>
-            ${this.renderSubject()}
-            ${this.selected && part ? this.renderLinks(unavailable, 'places') : null}
-            <figure-capability-panel
-              .asset=${asset}
-              .selected=${this.selected}
-              ?locked=${unavailable}
-              @select-part=${(e) => this.choose(e.detail.id)}
-              @part-edit=${(e) => this.run(() => this.session.edit(e.detail.edit))}
-            ></figure-capability-panel>
+                  ${this.renderInstanceRange(shown, unavailable)}
+                  ${this.renderCapability(asset, unavailable)}`}
           </div>
           <div panel ?off=${tab !== 'motion'}>
             ${this.renderSubject()}
@@ -1699,12 +1851,9 @@ let FigureEditor = class FigureEditor extends LitElement {
             ></figure-data-panel>
           </div>
           <div panel flush ?off=${tab !== 'verdict'}><slot name="verdict"></slot></div>
-          <div panel flush ?off=${tab !== 'view'}>
-            <figure-settings .view=${this.view} @update-view=${(e) => this.setView(e.detail.view)}></figure-settings>
-          </div>
-          <div panel flush ?off=${tab !== 'history'}><slot name="history"></slot></div>
         </aside>
-      </ox-three-pane>`;
+      </ox-three-pane>
+      ${this.renderOverlay()}`;
     }
     /** Position, rotation and size as rows of three cells; the shape's own measures one to a line, under their title. */
     renderGroups(groups, vectorTitle, singleTitle, unavailable, tools = null, held) {
@@ -1859,6 +2008,14 @@ __decorate([
     property({ attribute: false }),
     __metadata("design:type", Object)
 ], FigureEditor.prototype, "releaseState", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], FigureEditor.prototype, "releaseBlockers", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "blockersOpen", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Array)
@@ -1919,6 +2076,18 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], FigureEditor.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureEditor.prototype, "overlay", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "capabilityOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FigureEditor.prototype, "moreOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Function)