@things-factory/figure-ui 10.1.270 → 10.1.272

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwe9B,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    /* The bar's height, beside its 32px icons and the save (sweep 2026-10-27 U25). */\n    height: 32px;\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  /*\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  /* Which size handles change one diameter (ADR-0140 4.1): a quiet line over the canvas, out of the gizmo's way. */\n  /* What a drag does on the joint of the part chosen: one line under the board, its buttons quiet text (review 2026-11-09). */\n  p[joint-handle] {\n    position: absolute;\n    bottom: 12px;\n    left: 50%;\n    z-index: 5;\n    transform: translateX(-50%);\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: 2px 8px;\n    /* As wide as its words: at left 50% the line would otherwise wrap at half the board. */\n    width: max-content;\n    max-width: calc(100% - 24px);\n    box-sizing: border-box;\n    margin: 0;\n    padding: 4px 6px 4px 12px;\n    border-radius: 16px;\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--ui-t-small, 11.5px);\n  }\n  p[joint-handle] button {\n    padding: 2px 6px;\n    border: none;\n    border-radius: 4px;\n    background: none;\n    color: var(--md-sys-color-primary);\n    font: inherit;\n    font-weight: 600;\n    cursor: pointer;\n  }\n  p[joint-handle] button:hover {\n    background: var(--md-sys-color-surface-container-highest);\n  }\n  p[same-measure] {\n    position: absolute;\n    bottom: 12px;\n    left: 50%;\n    z-index: 5;\n    transform: translateX(-50%);\n    margin: 0;\n    padding: 4px 10px;\n    border-radius: 999em;\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--ui-t-small, 11.5px);\n    pointer-events: none;\n    white-space: nowrap;\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  div[start] button[start-more] {\n    display: block;\n    text-align: left;\n    margin: 4px 0 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--ui-t-small);\n    color: var(--md-sys-color-primary);\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n  /* No rule under the last way to start: it closed nothing (sweep 2026-10-27 U23). */\n  div[start-paths] > section:last-of-type {\n    border-bottom: none;\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  /* A range's two ends read as one: smallest – largest. */\n  div[pair][range] {\n    align-items: center;\n  }\n  div[pair][range] > span[dash] {\n    flex: none;\n    color: var(--md-sys-color-on-surface-variant);\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). The fastening window stands in\n    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).\n  */\n  :host {\n    position: relative;\n  }\n  div[side-overlay] {\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  [overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. Above z-index 1: a chip's label (md-filter-chip) sits at 1 and, coming later, was\n     drawn over it when the panel scrolled (sweep 2026-10-27 U2). */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\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  /* A mirror asked about: under its row, the panel's own field rows (what comes with it, its names, how it turns). */\n  div[mirror-form] {\n    display: grid;\n    gap: 6px;\n    margin: 4px 0 8px;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmf9B,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    /* The bar's height, beside its 32px icons and the save (sweep 2026-10-27 U25). */\n    height: 32px;\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  /*\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  div[release-blockers] button[as-new-type] {\n    justify-self: start;\n    margin-top: 4px;\n    padding: 4px 10px;\n    border: 1px solid var(--md-sys-color-outline);\n    border-radius: 999px;\n    color: var(--md-sys-color-primary);\n    background: var(--md-sys-color-surface);\n    font: inherit;\n    cursor: pointer;\n  }\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  /* Which size handles change one diameter (ADR-0140 4.1): a quiet line over the canvas, out of the gizmo's way. */\n  /* What a drag does on the joint of the part chosen: one line under the board, its buttons quiet text (review 2026-11-09). */\n  p[joint-handle] {\n    position: absolute;\n    bottom: 12px;\n    left: 50%;\n    z-index: 5;\n    transform: translateX(-50%);\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: 2px 8px;\n    /* As wide as its words: at left 50% the line would otherwise wrap at half the board. */\n    width: max-content;\n    max-width: calc(100% - 24px);\n    box-sizing: border-box;\n    margin: 0;\n    padding: 4px 6px 4px 12px;\n    border-radius: 16px;\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--ui-t-small, 11.5px);\n  }\n  p[joint-handle] button {\n    padding: 2px 6px;\n    border: none;\n    border-radius: 4px;\n    background: none;\n    color: var(--md-sys-color-primary);\n    font: inherit;\n    font-weight: 600;\n    cursor: pointer;\n  }\n  p[joint-handle] button:hover {\n    background: var(--md-sys-color-surface-container-highest);\n  }\n  p[same-measure] {\n    position: absolute;\n    bottom: 12px;\n    left: 50%;\n    z-index: 5;\n    transform: translateX(-50%);\n    margin: 0;\n    padding: 4px 10px;\n    border-radius: 999em;\n    background: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface-variant);\n    font-size: var(--ui-t-small, 11.5px);\n    pointer-events: none;\n    white-space: nowrap;\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  div[start] button[start-more] {\n    display: block;\n    text-align: left;\n    margin: 4px 0 0;\n    padding: 0;\n    font: inherit;\n    font-size: var(--ui-t-small);\n    color: var(--md-sys-color-primary);\n    background: none;\n    border: none;\n    cursor: pointer;\n  }\n  /* No rule under the last way to start: it closed nothing (sweep 2026-10-27 U23). */\n  div[start-paths] > section:last-of-type {\n    border-bottom: none;\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  /* A range's two ends read as one: smallest – largest. */\n  div[pair][range] {\n    align-items: center;\n  }\n  div[pair][range] > span[dash] {\n    flex: none;\n    color: var(--md-sys-color-on-surface-variant);\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). The fastening window stands in\n    the same place, over the side panel, so the canvas it previews on stays in sight (user 2026-10-19).\n  */\n  :host {\n    position: relative;\n  }\n  div[side-overlay] {\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  [overlay-body] {\n    min-height: 0;\n    overflow: auto;\n  }\n  /* Which part the panel speaks of. Above z-index 1: a chip's label (md-filter-chip) sits at 1 and, coming later, was\n     drawn over it when the panel scrolled (sweep 2026-10-27 U2). */\n  div[subject] {\n    position: sticky;\n    top: 0;\n    z-index: 2;\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  /* A mirror asked about: under its row, the panel's own field rows (what comes with it, its names, how it turns). */\n  div[mirror-form] {\n    display: grid;\n    gap: 6px;\n    margin: 4px 0 8px;\n  }\n`\n"]}

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

@@ -190,6 +190,12 @@ export declare class FigureEditor extends LitElement {
      * address, the edits staying here; writing over is asked once more, since the other's change is lost.
      */
     private resolveConflict;
+    /**
+     * The edits kept apart as a new figure, the one opened left as the server has it: a copy after a save conflict, or a
+     * new figure type for edits a released figure cannot take (the release gate's way out, tutorial 2026-11-11). The first
+     * save asks its identifier.
+     */
+    private saveAsNewFigure;
     private add;
     /**
      * A GLB made into a mesh part (ADR-0129): the server reads and keeps it, the author picks the whole file or one node

package/dist-client/modeller/editor.js

@@ -44,7 +44,7 @@ import { SidePanelStyles } from '@things-factory/figure-viewer/dist-client/side-
 import { EditorStyles } from './editor-styles.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { alignChanges, canMirror, mirrorEditOf, mirroredClipsOf, mirrorPlanOf } from './align.js';
-import { paletteRecipe } from './palette.js';
+import { firstPartFastensToPlane, paletteRecipe } from './palette.js';
 import { meshChoicesOf, meshPartOf } from './mesh-import.js';
 import './figure-mesh-choice.js';
 import { uploadFigureMesh } from '../graphql/index.js';
@@ -531,13 +531,8 @@ let FigureEditor = class FigureEditor extends LitElement {
             return;
         if (choice === 'latest')
             window.open(location.href, '_blank', 'noopener');
-        else if (choice === 'copy') {
-            session.detachAsCopy();
-            /* The page forgets the row of the figure left: the copy's identifier is asked, not the other's offered. */
-            this.dispatchEvent(new CustomEvent('figure-detached', { bubbles: true, composed: true }));
-            this.changed();
-            await this.save();
-        }
+        else if (choice === 'copy')
+            await this.saveAsNewFigure();
         else if (choice === 'overwrite') {
             const agreed = await OxPrompt.open({
                 type: 'warning',
@@ -551,13 +546,38 @@ let FigureEditor = class FigureEditor extends LitElement {
             await this.save();
         }
     }
+    /**
+     * The edits kept apart as a new figure, the one opened left as the server has it: a copy after a save conflict, or a
+     * new figure type for edits a released figure cannot take (the release gate's way out, tutorial 2026-11-11). The first
+     * save asks its identifier.
+     */
+    async saveAsNewFigure() {
+        this.session.detachAsCopy();
+        this.blockersOpen = false;
+        /* The page forgets the row of the figure left: the copy's identifier is asked, not the other's offered. */
+        this.dispatchEvent(new CustomEvent('figure-detached', { bubbles: true, composed: true }));
+        this.changed();
+        await this.save();
+    }
     add(kind) {
         if (!this.session)
             return;
         this.run(() => {
             /* The id is figure-model's to choose: what is in use is its rule, not a list the screen keeps. */
-            const part = paletteRecipe(kind, figurePartIdFor(this.session.revisionNow().asset, kind));
-            this.session.add(part);
+            const asset = this.session.revisionNow().asset;
+            const part = paletteRecipe(kind, figurePartIdFor(asset, kind));
+            /*
+             * The first part of a figure that stands on a plane (floor, ceiling, wall) is its base: it is added fastened to
+             * that plane, one step of the history, so a size typed next keeps it on the plane instead of sinking through it.
+             */
+            if (firstPartFastensToPlane(this.session.read().geometry ?? [], asset?.placement)) {
+                this.session.applyRecipe([
+                    { kind: 'add-part', part },
+                    { kind: 'attach', part: part.id, to: { plane: 'mounting-plane' } }
+                ]);
+            }
+            else
+                this.session.add(part);
             this.selected = part.id;
         });
     }
@@ -1649,7 +1669,11 @@ let FigureEditor = class FigureEditor extends LitElement {
         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>
-        ${blockers.map(finding => renderGateFinding(finding, true, nothing, parts))}
+        ${blockers.map(finding => renderGateFinding(finding, true, 
+        /* A break of the released contract: the edits go out as a new figure type, the placed ones keep the old one. */
+        finding.asNewType
+            ? html `<button as-new-type @click=${() => this.saveAsNewFigure()}>${i18next.t('figure.button.save-as-new-type')}</button>`
+            : nothing, parts))}
       </ul>
     </div>`;
     }