@qoretechnologies/reqraft 0.10.59-pr.130.gff5fd49 → 0.10.59

package/dist/components/form/engine/compactRowStyles.js

@@ -84,20 +84,26 @@ exports.PANEL_LEFT_CSS = "calc(".concat(exports.LABEL_COL, " + ").concat(exports
 // promotes the header to its own GPU layer, which stops the backdrop-filter
 // repaint flicker on scroll. `$headerBg` is a pre-mixed translucent colour so
 // content blurs softly through.
-exports.StyledCompactPanel = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to `overflow: hidden` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 `flat raised minimal`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the `big` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via `compactToolbar`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       `big` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". `normal` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centred, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared `show: 'hover'` \u2014 the shape ReqorePanel\n     honours on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"], ["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to \\`overflow: hidden\\` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 \\`flat raised minimal\\`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the \\`big\\` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via \\`compactToolbar\\`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       \\`big\\` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". \\`normal\\` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centred, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared \\`show: 'hover'\\` \u2014 the shape ReqorePanel\n     honours on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"])), function (_a) {
+exports.StyledCompactPanel = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to `overflow: hidden` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 `flat raised minimal`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  /* A NARROW header dressed by the consumer (`compactPanelProps` label, icon\n     or actions) stacks: the label and the consumer's actions share the first\n     line, and the toolbar takes the whole second line.\n\n     ReqorePanel lays its header out as one unwrapping row \u2014 the label, then an\n     action group that never shrinks. The toolbar is one of those actions and\n     is as wide as the form, so at phone width the label was squeezed to\n     nothing and the consumer's own action was pushed past the panel's edge and\n     clipped. Flattening the action group (`display: contents`) lets its\n     members wrap with the label, and `order` moves the toolbar after them. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    /* Above the status-box headers, which pin just below this toolbar. A\n       pinned header cannot leave its own box, so when the end of a box\n       scrolls up past the toolbar it pushes the header up with it \u2014 and with\n       both at ReqorePanel's sticky z-index the header, later in the\n       document, slid OVER the toolbar and covered the search and the\n       meter. One step higher and it slides under the toolbar's blur\n       instead. Nested sub-forms pin nothing, so they keep the default. */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the `big` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via `compactToolbar`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       `big` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". `normal` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centred, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared `show: 'hover'` \u2014 the shape ReqorePanel\n     honours on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"], ["\n  /* The wrapper must not clip, or nothing INSIDE it can pin.\n  \n     ReqorePanel sets its wrapper to \\`overflow: hidden\\` unless its own header\n     is sticky \u2014 and a clipping box is a scrollport, so a status box header\n     inside it resolves against the wrapper instead of the page and stops\n     pinning. That coupling is right for the panel's own header and wrong for\n     its descendants': a host that turns this form's toolbar off (a two-field\n     form inside a longer page, where a pinned search bar is the biggest thing\n     on screen and the least useful) was silently turning the box headers off\n     with it.\n  \n     The clip is the panel's rounded corners, and this panel is transparent and\n     border-less \u2014 \\`flat raised minimal\\`, no background of its own \u2014 so there\n     is nothing for it to clip. */\n  ", "\n  /* A NARROW header dressed by the consumer (\\`compactPanelProps\\` label, icon\n     or actions) stacks: the label and the consumer's actions share the first\n     line, and the toolbar takes the whole second line.\n\n     ReqorePanel lays its header out as one unwrapping row \u2014 the label, then an\n     action group that never shrinks. The toolbar is one of those actions and\n     is as wide as the form, so at phone width the label was squeezed to\n     nothing and the consumer's own action was pushed past the panel's edge and\n     clipped. Flattening the action group (\\`display: contents\\`) lets its\n     members wrap with the label, and \\`order\\` moves the toolbar after them. */\n  ", "\n  > .reqore-panel-title {\n    /* The blur + translateZ exist only to make the STICKY top-level toolbar ghost\n       content beneath it; a nested sub-form's header isn't sticky, so skip them\n       (and the stacking context translateZ creates). */\n    ", "\n    /* Above the status-box headers, which pin just below this toolbar. A\n       pinned header cannot leave its own box, so when the end of a box\n       scrolls up past the toolbar it pushes the header up with it \u2014 and with\n       both at ReqorePanel's sticky z-index the header, later in the\n       document, slid OVER the toolbar and covered the search and the\n       meter. One step higher and it slides under the toolbar's blur\n       instead. Nested sub-forms pin nothing, so they keep the default. */\n    ", "\n    padding-top: ", "px;\n    /* A header with a SEARCH ROW keeps the \\`big\\` gap below it \u2014 a tall\n       interactive control earns separation from the content it filters. A\n       header without one (search hidden via \\`compactToolbar\\`, self-hidden on\n       a single-option form, or no toolbar at all) is a thin strip, and at\n       \\`big\\` its padding stacked onto the panel content's own 8px into a 26px\n       dead band between the completion meter and the first status box \u2014\n       rejected on build #140 as \"unnecessarily big\". \\`normal\\` lands it at\n       the boxes' own 10px rhythm, and scoping the change here keeps every\n       search-bearing form pixel-identical. */\n    padding-bottom: ", "px;\n  }\n\n  /* Group framing. The HORIZONTAL rule is a real element in the header\n     (StyledGroupHeaderLine) so it sits on the name's row, centred, and stretches\n     from the name out to the status chip pinned at the far end \u2014 which needs the\n     title's left group to fill the header width. The VERTICAL group spine is\n     drawn by StyledGroupBody (so it shares the required-group rail's coordinate\n     space and the two line up instead of doubling). */\n  .options-readfirst-group {\n    position: relative;\n  }\n  .options-readfirst-group > .reqore-panel-title > :first-child,\n  .options-readfirst-group > .reqore-panel-title > :first-child > :first-child,\n  .options-readfirst-group .reqore-panel-title-label-row {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* An injected option action declared \\`show: 'hover'\\` \u2014 the shape ReqorePanel\n     honours on the classic path \u2014 is revealed only while its row or card is\n     hovered or holds focus. The compact slots render plain buttons, so the gate\n     has to be CSS here. Kept focus-visible too, so the action stays reachable by\n     keyboard. Opacity rather than display keeps the slot's width stable, so rows\n     don't reflow on hover. */\n  .options-injected-action-hover {\n    opacity: 0;\n    /* Not hit-testable while invisible \u2014 an opacity:0 button still takes taps\n       and clicks, which reads as a mystery control firing out of nowhere. */\n    pointer-events: none;\n    transition: opacity 0.15s ease;\n  }\n  .readfirst-row:hover .options-injected-action-hover,\n  .readfirst-row:focus-within .options-injected-action-hover,\n  .options-readfirst-card:hover .options-injected-action-hover,\n  .options-readfirst-card:focus-within .options-injected-action-hover {\n    opacity: 1;\n    pointer-events: auto;\n  }\n  /* Touch and other hover-less pointers never fire :hover, so a hover-gated\n     action would be permanently unreachable there. Show it unconditionally\n     instead \u2014 losing the tidiness beats losing the functionality. */\n  @media (hover: none), (pointer: coarse) {\n    .options-injected-action-hover {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  }\n"])), function (_a) {
     var $stickyBoxes = _a.$stickyBoxes;
     return $stickyBoxes ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &&& {\n          overflow: visible;\n        }\n      "], ["\n        &&& {\n          overflow: visible;\n        }\n      "]))) : '';
+}, function (_a) {
+    var $stackHeader = _a.$stackHeader;
+    return $stackHeader ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        && > .reqore-panel-title {\n          flex-wrap: wrap;\n          row-gap: ", "px;\n        }\n        && > .reqore-panel-title > .reqore-panel-title-header {\n          flex: 1 1 0;\n          min-width: 0;\n        }\n        && > .reqore-panel-title > .reqore-control-group {\n          display: contents;\n        }\n        && > .reqore-panel-title .options-readfirst-toolbar {\n          order: 1;\n          flex: 1 1 100%;\n          min-width: 0;\n        }\n      "], ["\n        && > .reqore-panel-title {\n          flex-wrap: wrap;\n          row-gap: ", "px;\n        }\n        && > .reqore-panel-title > .reqore-panel-title-header {\n          flex: 1 1 0;\n          min-width: 0;\n        }\n        && > .reqore-panel-title > .reqore-control-group {\n          display: contents;\n        }\n        && > .reqore-panel-title .options-readfirst-toolbar {\n          order: 1;\n          flex: 1 1 100%;\n          min-width: 0;\n        }\n      "])), sizes_1.GAP_FROM_SIZE.normal) : '';
 }, function (_a) {
     var $nested = _a.$nested;
     return $nested ? '' : ('backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transform: translateZ(0);');
+}, function (_a) {
+    var $nested = _a.$nested;
+    return ($nested ? '' : 'z-index: 3;');
 }, sizes_1.GAP_FROM_SIZE[exports.HEADER_GAP], function (_a) {
     var $tightHeader = _a.$tightHeader;
     return $tightHeader ? sizes_1.GAP_FROM_SIZE.normal : sizes_1.GAP_FROM_SIZE[exports.HEADER_GAP];
 });
 // Compact group header laid out as the panel's `label`: the group name, a
 // hairline that fades toward the status chip, and the chip pinned at the end.
-exports.StyledGroupHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n"])));
-exports.StyledGroupHeaderLine = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  height: 2px;\n  min-width: 16px;\n  background: linear-gradient(to right, ", ", transparent);\n"], ["\n  flex: 1;\n  height: 2px;\n  min-width: 16px;\n  background: linear-gradient(to right, ", ", transparent);\n"])), function (_a) {
+exports.StyledGroupHeader = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n"])));
+exports.StyledGroupHeaderLine = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  height: 2px;\n  min-width: 16px;\n  background: linear-gradient(to right, ", ", transparent);\n"], ["\n  flex: 1;\n  height: 2px;\n  min-width: 16px;\n  background: linear-gradient(to right, ", ", transparent);\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 });
@@ -105,7 +111,7 @@ exports.StyledGroupHeaderLine = styled_components_1.default.span(templateObject_
 // a barely-there accent border + a ~5%-opacity tint, NOT the loud intent border a
 // stock ReqorePanel draws. `$accent` is the box's theme colour (warning/success/
 // muted).
-exports.StyledStatusBox = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  &&& {\n    border: 1px solid ", ";\n    /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n       instead of the faint accent tint the coloured boxes use. */\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a `minimal`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque `$bg`, so that is used as-is.\n  \n     Only when `$surface` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before. */\n  ", "\n"], ["\n  &&& {\n    border: 1px solid ", ";\n    /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n       instead of the faint accent tint the coloured boxes use. */\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a \\`minimal\\`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque \\`$bg\\`, so that is used as-is.\n  \n     Only when \\`$surface\\` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before. */\n  ", "\n"])), function (_a) {
+exports.StyledStatusBox = (0, styled_components_1.default)(reqore_1.ReqorePanel)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  &&& {\n    border: 1px solid ", ";\n    /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n       instead of the faint accent tint the coloured boxes use. */\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a `minimal`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque `$bg`, so that is used as-is.\n  \n     Only when `$surface` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before. */\n  ", "\n"], ["\n  &&& {\n    border: 1px solid ", ";\n    /* $bg lets the muted \"Optional\" box opt into a darker, recessed surface\n       instead of the faint accent tint the coloured boxes use. */\n    background: ", ";\n    border-radius: 10px;\n  }\n\n  /* A PINNED header needs a surface of its own.\n  \n     The box's tint lives on the wrapper, behind the header, and a \\`minimal\\`\n     panel header is transparent \u2014 which is right while the header sits in the\n     flow over its own box, and wrong the moment it pins, because the rows then\n     scroll THROUGH it. Reqore's backdrop blur softens them but a 12% tint over\n     moving text still reads as two overlaid labels.\n  \n     So repaint the pinned header as the box looks at rest: an opaque layer of\n     the page background with the box's own translucent tint composited on top,\n     which is exactly what the eye sees where the box meets the page. The\n     Optional box already carries an opaque \\`$bg\\`, so that is used as-is.\n  \n     Only when \\`$surface\\` is supplied \u2014 i.e. only on a form that pins at all \u2014\n     so an unpinned box is pixel-identical to before. */\n  ", "\n"])), function (_a) {
     var $accent = _a.$accent;
     return "".concat($accent, "33");
 }, function (_a) {
@@ -113,34 +119,34 @@ exports.StyledStatusBox = (0, styled_components_1.default)(reqore_1.ReqorePanel)
     return $bg || "".concat($accent, "1f");
 }, function (_a) {
     var $surface = _a.$surface, $accent = _a.$accent, $bg = _a.$bg;
-    return $surface ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "], ["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "])), $bg || $surface, $bg ? '' : "background-image: linear-gradient(".concat($accent, "1f, ").concat($accent, "1f);")) : '';
+    return $surface ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "], ["\n        &&& > .reqore-panel-title {\n          background-color: ", ";\n          ", "\n        }\n      "])), $bg || $surface, $bg ? '' : "background-image: linear-gradient(".concat($accent, "1f, ").concat($accent, "1f);")) : '';
 });
 // "One of the below is required" cluster box — wraps the members of an unmet
 // one-of required group (in the Needs-attention box) so the constraint reads as
 // one unit. The connection rail + status nodes still render inside (they convey
 // which member satisfies the group); this box adds the explicit heading.
-exports.StyledRequiredClusterBox = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  padding: 2px 6px 6px;\n  margin: 4px 0;\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centring\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: 4px;\n  gap: 4px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  padding: 2px 6px 6px;\n  margin: 4px 0;\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centring\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: 4px;\n  gap: 4px;\n"])), function (_a) {
+exports.StyledRequiredClusterBox = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  padding: 2px 6px 6px;\n  margin: 4px 0;\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centring\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: 4px;\n  gap: 4px;\n"], ["\n  border: 1px solid ", ";\n  border-radius: 8px;\n  background: ", ";\n  padding: 2px 6px 6px;\n  margin: 4px 0;\n  /* The members render directly here (not via the gapped group body), so give\n     them the same modest gap the rest of the rows have. Pin the divider-centring\n     var to that gap (it doesn't widen in narrow like the group body's does). */\n  display: flex;\n  flex-flow: column;\n  --readfirst-row-gap: 4px;\n  gap: 4px;\n"])), function (_a) {
     var $border = _a.$border;
     return $border;
 }, function (_a) {
     var $tint = _a.$tint;
     return $tint;
 });
-exports.StyledRequiredClusterHeader = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 0 4px ", ";\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 0 4px ", ";\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  color: ", ";\n"])), exports.GROUP_INDENT, function (_a) {
+exports.StyledRequiredClusterHeader = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 0 4px ", ";\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 0 4px ", ";\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  color: ", ";\n"])), exports.GROUP_INDENT, function (_a) {
     var $color = _a.$color;
     return $color;
 });
 // Thin schema-group sub-label inside a status box (CONNECTION / AUTHENTICATION /
 // …). Quiet by design — the box header is the loud heading; this just keeps each
 // field's group context as you scan. Indented to the rows' content line.
-exports.StyledStatusBoxGroupLabel = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  opacity: 0.5;\n  padding: 8px 0 2px ", ";\n"], ["\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  opacity: 0.5;\n  padding: 8px 0 2px ", ";\n"])), exports.GROUP_INDENT);
+exports.StyledStatusBoxGroupLabel = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  opacity: 0.5;\n  padding: 8px 0 2px ", ";\n"], ["\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  opacity: 0.5;\n  padding: 8px 0 2px ", ";\n"])), exports.GROUP_INDENT);
 // Required-group "connection" rail: contiguous members are linked by a continuous
 // vertical rail (StyledGroupBody draws it; the line bridges the row gaps and is
 // trimmed to the first/last node). Each member carries a status node — absolutely
 // positioned in the EXISTING left gutter, so labels keep their place — tied to the
 // label by a short stub. Theme-derived: the node's hollow centre is painted the
 // form background so it MASKS the rail behind it; filled when the member is set.
-exports.StyledClusterNode = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"])), function (_a) {
+exports.StyledClusterNode = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  left: -14px;\n  top: 13px;\n  width: 12px;\n  height: 12px;\n  box-sizing: border-box;\n  border-radius: 50%;\n  border: 2px solid ", ";\n  background: ", ";\n  box-shadow: 0 0 5px ", ";\n  z-index: 1;\n  pointer-events: none;\n  /* short stub toward the label \u2014 stops a few px short so it doesn't touch it */\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    width: 6px;\n    height: 2px;\n    transform: translateY(-1px);\n    background: ", ";\n  }\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
@@ -153,7 +159,7 @@ exports.StyledClusterNode = styled_components_1.default.span(templateObject_10 |
     var $color = _a.$color;
     return $color;
 });
-exports.StyledEditCard = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  padding: 12px;\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"], ["\n  padding: 12px;\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"])), function (_a) {
+exports.StyledEditCard = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  padding: 12px;\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"], ["\n  padding: 12px;\n  display: flex;\n  flex-flow: column;\n  gap: 8px;\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n\n  /* Single-value editors (operators, long-string, markdown, richtext, byte-size)\n     carry the card's own \"Clear value\" action, so suppress the value input's\n     built-in ReqoreInput clear \u2014 ReqoreInput has no prop to hide it, and a\n     separate input \u2715 plus the row-level trash action\n     read as a duplicate. Multi-input cards (hash/list/\u2026) are not marked single,\n     so their per-sub-field clears stay. */\n  &.options-readfirst-card-single .reqore-clear-input-button {\n    display: none;\n  }\n"])), function (_a) {
     var $bg = _a.$bg;
     return $bg;
 }, function (_a) {
@@ -161,8 +167,8 @@ exports.StyledEditCard = styled_components_1.default.div(templateObject_11 || (t
     return $border;
 });
 // Recurring micro-layouts of the read-first rows and their popovers.
-exports.StyledLabelBlock = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"])));
-exports.StyledRowLabel = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n"])), function (_a) {
+exports.StyledLabelBlock = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 2px;\n  min-width: 0;\n"])));
+exports.StyledRowLabel = styled_components_1.default.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  color: ", ";\n  font-weight: 600;\n  font-size: 13px;\n  min-width: 0;\n  white-space: normal;\n  overflow-wrap: anywhere;\n  cursor: ", ";\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
@@ -173,17 +179,17 @@ exports.StyledRowLabel = styled_components_1.default.div(templateObject_13 || (t
 // revealed by the row's ⓘ. Reuses ReqoreP for the muted-note styling (size +
 // effect opacity); the only custom bit is the line-clamp that keeps it from
 // pushing the row wide.
-exports.StyledLabelDesc = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"], ["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
-exports.StyledCardHeading = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"])));
+exports.StyledLabelDesc = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"], ["\n  margin-top: 2px;\n  white-space: normal;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n"])));
+exports.StyledCardHeading = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"], ["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n"])));
 /* The card (expanded) label matches the read-row label exactly — same size /
    weight / case — so a field's name doesn't switch styles when you open it. */
-exports.StyledCardLabel = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"], ["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), function (_a) {
+exports.StyledCardLabel = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"], ["\n  font-size: 13px;\n  font-weight: 600;\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 });
 /* min-width: 0 lets the grid cell shrink below its content's intrinsic width
    so the ellipsis engages instead of overflowing. */
-exports.StyledRowValue = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent colour applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value colour. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"], ["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent colour applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value colour. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"])), function (_a) {
+exports.StyledRowValue = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent colour applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value colour. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"], ["\n  min-width: 0;\n  font-size: 13px;\n  /* Value + inline reason(s) share the line, wrapping the reason below only when\n     it doesn't fit (the Focus prototype's layout). */\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  column-gap: 10px;\n  row-gap: 2px;\n  /* The muted/translucent colour applies to the VALUE TEXT only \u2014 not the whole\n     cell \u2014 so the message panels and the structured preview below render at full\n     opacity instead of inheriting the dimmed value colour. */\n  .options-readfirst-valuetext {\n    min-width: 0;\n    max-width: 100%;\n    color: ", ";\n    font-style: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  /* The code size chip kept above an OPEN editor. The read row puts the same chip\n     at the top of the value cell with a 2px row-gap under it; matching that here is\n     what stops the editor moving as the field opens. */\n  .options-readfirst-editing-summary {\n    margin-bottom: 2px;\n  }\n  .options-readfirst-reason {\n    font-style: italic;\n    font-size: 12px;\n    line-height: 1.3;\n  }\n  /* Schema message panels: full width of the value column, on their own line\n     directly beneath the value. */\n  .options-readfirst-info-panel {\n    flex-basis: 100%;\n    width: 100%;\n    display: flex;\n    flex-flow: column;\n    gap: 4px;\n    margin-top: 4px;\n  }\n  /* Read-only companions of the value: what a chosen option means, on its own\n     line under it; and a long text drawn in full in the inset. */\n  .options-readfirst-choice-desc {\n    flex-basis: 100%;\n    width: 100%;\n    min-width: 0;\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.6;\n  }\n  .options-readfirst-text {\n    color: ", ";\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    line-height: 1.5;\n  }\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
@@ -193,27 +199,27 @@ exports.StyledRowValue = styled_components_1.default.div(templateObject_17 || (t
     var $color = _a.$color;
     return $color;
 });
-exports.StyledRowActions = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"], ["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"])));
+exports.StyledRowActions = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"], ["\n  display: flex;\n  align-items: center;\n  /* No align-self override: the actions (incl. the status dot) follow the row's\n     own vertical alignment \u2014 CENTRED on the common single-line row, TOP-aligned\n     (first line) on the tall rows that opt into align-items:start (descriptions /\n     message panels / hash previews). */\n  gap: 6px;\n"])));
 // A single status mark pinned at the row's trailing edge: one dot, colour =
 // severity (danger/warning/success). This is the "Focus" read-first signal that
 // replaces the recessed value surface's intent stripe — attention dots carry a
 // faint ring, a plain "set" dot does not. `unset` rows render no dot.
-exports.StyledStatusDot = styled_components_1.default.span(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"], ["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
+exports.StyledStatusDot = styled_components_1.default.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"], ["\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: ", ";\n  box-shadow: ", ";\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
     var $color = _a.$color, $ring = _a.$ring;
     return ($ring ? "0 0 0 3px ".concat($color, "22") : 'none');
 });
-exports.StyledActionSlot = styled_components_1.default.span(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"])), function (_a) {
+exports.StyledActionSlot = styled_components_1.default.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  width: ", "px;\n  flex: 0 0 auto;\n"])), function (_a) {
     var $width = _a.$width;
     return $width;
 });
-exports.StyledColumn = styled_components_1.default.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n"], ["\n  display: flex;\n  flex-flow: column;\n"])));
+exports.StyledColumn = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n"], ["\n  display: flex;\n  flex-flow: column;\n"])));
 // The structured hash/list preview, rendered inside the value cell directly
 // under the value summary. Full-width of the value column (it's a flex child of
 // the wrapping value cell) so it lines up with the value, not the label gutter.
-exports.StyledRowInset = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"], ["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"])));
+exports.StyledRowInset = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"], ["\n  flex-basis: 100%;\n  width: 100%;\n  margin-top: 4px;\n"])));
 /**
  * The stack literal text renders in: source, ids, tokens, data strings.
  *
@@ -230,7 +236,7 @@ exports.MONO_FONT_STACK = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Conso
 // the aesthetic of the classic code-view surface but small enough to sit
 // inside a read-row.  Height is capped by the wrapping `ReqoreCollapsibleContent`
 // so the "Show more" affordance stays useful.
-exports.StyledCodePreview = styled_components_1.default.pre(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"])), function (_a) {
+exports.StyledCodePreview = styled_components_1.default.pre(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"], ["\n  margin: 0;\n  padding: 8px 10px;\n  border-radius: 4px;\n  background: ", ";\n  border: 1px solid ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11.5px;\n  line-height: 1.5;\n  white-space: pre;\n  overflow: auto;\n  max-width: 100%;\n"])), function (_a) {
     var $bg = _a.$bg;
     return $bg;
 }, function (_a) {
@@ -241,14 +247,14 @@ exports.StyledCodePreview = styled_components_1.default.pre(templateObject_23 ||
     return $fg;
 }, exports.MONO_FONT_STACK);
 // A small inline colour swatch shown before an rgbcolor value's hex string.
-exports.StyledColorSwatch = styled_components_1.default.span(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  flex: 0 0 auto;\n  background: ", ";\n  border: 1px solid ", ";\n"], ["\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  flex: 0 0 auto;\n  background: ", ";\n  border: 1px solid ", ";\n"])), function (_a) {
+exports.StyledColorSwatch = styled_components_1.default.span(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  flex: 0 0 auto;\n  background: ", ";\n  border: 1px solid ", ";\n"], ["\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  flex: 0 0 auto;\n  background: ", ";\n  border: 1px solid ", ";\n"])), function (_a) {
     var $color = _a.$color;
     return $color;
 }, function (_a) {
     var $border = _a.$border;
     return $border;
 });
-exports.StyledGroupBody = styled_components_1.default.div(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can centre itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centred line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centred in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  .readfirst-row:hover {\n    background: ", ";\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  .readfirst-more-row:hover {\n    background: ", ";\n    border-style: solid;\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centring gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centred on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Centre each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to centre in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  .readfirst-row-editing:hover {\n    background: ", ";\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the full width\n     beneath. The class is set from a measured wrap width (react-use useMeasure)\n     rather than a viewport media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centred in it \u2014 so the dot always\n     sits at the same place (centred on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centred default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no\n     indent), like the Focus prototype. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: 0;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can centre itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centred line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centred in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  .readfirst-row:hover {\n    background: ", ";\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  .readfirst-more-row:hover {\n    background: ", ";\n    border-style: solid;\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centring gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centred on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Centre each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to centre in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  .readfirst-row-editing:hover {\n    background: ", ";\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the full width\n     beneath. The class is set from a measured wrap width (react-use useMeasure)\n     rather than a viewport media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centred in it \u2014 so the dot always\n     sits at the same place (centred on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centred default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no\n     indent), like the Focus prototype. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: 0;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n"])), exports.LABEL_COL, exports.COMPACT_ROW_PAD_X, exports.COMPACT_ROW_PAD_X, function (_a) {
+exports.StyledGroupBody = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can centre itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centred line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centred in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  .readfirst-row:hover {\n    background: ", ";\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  .readfirst-more-row:hover {\n    background: ", ";\n    border-style: solid;\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centring gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centred on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Centre each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to centre in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  .readfirst-row-editing:hover {\n    background: ", ";\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the full width\n     beneath. The class is set from a measured wrap width (react-use useMeasure)\n     rather than a viewport media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centred in it \u2014 so the dot always\n     sits at the same place (centred on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centred default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no\n     indent), like the Focus prototype. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: 0;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  position: relative;\n  /* Exposed as a var so the inter-field divider can centre itself in the gap\n     (the gap differs wide vs narrow). */\n  --readfirst-row-gap: 4px;\n  gap: var(--readfirst-row-gap);\n\n  /* Indent each field block under the group header by a FLUID step. The %\n     resolves against this container's width (not the screen), so it tracks the\n     (Field blocks no longer get a left gutter \u2014 the spine/rail that needed it are\n     gone, so rows sit flush against the box, like the Focus prototype.) */\n  > * {\n    margin-left: 0;\n  }\n\n  /* No group spine: the \"Focus\" look keeps the rows flat against the box. (The\n     required-group rail is a separate descendant ::after and still renders.) */\n\n  .readfirst-row {\n    display: grid;\n    /* Fixed label column: the recessed value surface (::before below) starts at a\n       constant x, so the label width can't flex or the stripe would drift off the\n       value edge. The value column is minmax(0, 1fr) \u2014 a bare 1fr keeps its\n       min-content width, so a long unbroken value (e.g. a URL) would force the\n       grid wider than its container and produce a horizontal scrollbar. The 0\n       minimum lets it shrink and the value cell's ellipsis take over instead. */\n    grid-template-columns: ", " minmax(0, 1fr) auto;\n    /* CENTRE the cells vertically: on the common single-line read row the label,\n       value and status dot all sit on one centred line. Tall rows (a shown\n       description, message panels or a hash preview) opt back into top-alignment\n       (.readfirst-row-info-open / .readfirst-row-tall below) so the label + dot\n       stay on the value's FIRST line instead of floating to the middle. */\n    align-items: center;\n    gap: 14px;\n    /* Generous, SYMMETRIC vertical padding so a single-line row isn't cramped\n       (content sits with even breathing room top + bottom); a min-height floor\n       keeps the rare shorter row a comfortable tap target. */\n    min-height: 40px;\n    padding: 9px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n  }\n  /* A dim hairline in the gap below each field so its start/end reads clearly.\n     Absolutely positioned (not a border) so it stays straight + full-width and\n     the row's rounded hover highlight is unaffected; sits in the inter-row gap. */\n  .readfirst-row::after {\n    content: '';\n    position: absolute;\n    /* Inset to the row's horizontal padding so the line spans the content, not\n       the full box edge-to-edge. */\n    left: ", "px;\n    right: ", "px;\n    /* Centred in the inter-field gap (which differs wide vs narrow) so the space\n       above and below each line is equal. */\n    bottom: calc(var(--readfirst-row-gap, 4px) / -2);\n    height: 1px;\n    background: ", ";\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n  }\n  .readfirst-row:last-child::after {\n    display: none;\n  }\n  .readfirst-row:hover {\n    background: ", ";\n  }\n  .readfirst-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n    background: ", ";\n  }\n  /* A hidden (not-yet-added) field surfaced by the search is dimmed. */\n  .readfirst-row-hidden {\n    opacity: 0.65;\n  }\n  /* The \"N more fields\" control IS a field row \u2014 same grid, same padding, same\n     hover \u2014 so it lines up with the rows above instead of floating as a scrap\n     of text in the box's corner. A dashed edge and a lower-contrast label are\n     what say it is not itself a field: nothing here can be set.\n\n     It spans both content columns because it has no label/value split, and it\n     drops the inter-row hairline (the ::after rule) since it always sits last. */\n  .readfirst-more-row {\n    grid-template-columns: 1fr auto;\n    border: 1px dashed ", ";\n    background: transparent;\n    width: 100%;\n    text-align: left;\n    font: inherit;\n    color: inherit;\n    /* The dashed edge replaces the hairline; two lines would read as a divider\n       AND a border stacked. */\n    margin-top: 2px;\n  }\n  .readfirst-more-row::after {\n    display: none;\n  }\n  .readfirst-more-row:hover {\n    background: ", ";\n    border-style: solid;\n  }\n  .readfirst-more-row:focus-visible {\n    outline: 2px solid ", ";\n    outline-offset: -2px;\n  }\n  /* The chevron points the way the click goes: down to reveal, up to fold. */\n  .readfirst-more-row .readfirst-more-chevron {\n    transition: transform 0.15s ease;\n  }\n  .readfirst-more-row[aria-expanded='true'] .readfirst-more-chevron {\n    transform: rotate(180deg);\n  }\n  /* A disabled field (schema disabled flag or unmet dependencies) is not a\n     click target \u2014 no hover invite, not-allowed cursor; a lock replaces the\n     pencil. */\n  /* A disabled field reads dimmed (its name + value at 0.6) \u2014 clearly inactive. */\n  .readfirst-row-disabled {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n  .readfirst-row-disabled:hover {\n    background: transparent;\n  }\n  /* Required-group linkage: hovering a member highlights every sibling row \u2014\n     just a background tint, no left stripe (that reads as an intent edge). */\n  .readfirst-row-group-highlight {\n    background: ", ";\n  }\n  .readfirst-row-flash {\n    animation: readfirstRowFlash 1.4s ease;\n  }\n  @keyframes readfirstRowFlash {\n    0% {\n      background: ", ";\n    }\n    100% {\n      background: transparent;\n    }\n  }\n  /* A scalar row being edited in place: the real editor replaces the value\n     cell. The row stops being a click target (the editor owns the clicks) and\n     keeps a constant active background. Vertical padding is tightened so the\n     editor fits inside the same ~38px the read row occupies \u2014 switching into\n     (and out of) inline editing must not shift the rows around it. */\n  .readfirst-row-editing {\n    cursor: default;\n    /* Top-anchor the cells: with multi-line editors (e.g. allowed-values =\n       input + picker), per-cell centring gives every control a different\n       anchor. Instead everything aligns to the FIRST editor line \u2014 label and\n       the \u2713/\u21BA cluster get small offsets to sit optically centred on it. */\n    align-items: start;\n    background: ", ";\n    /* No top padding (the per-cell nudges below anchor the editor to the first\n       line), but a real BOTTOM padding so the editor never sits flush against\n       the row's bottom edge \u2014 a tall input used to look clipped/unfinished. */\n    padding-top: 0;\n    padding-bottom: 9px;\n    /* Tighter column gap: the editor's trailing template \u22EE and our \u2713 should\n       read as one control cluster, not two separated groups. */\n    column-gap: 6px;\n  }\n  /* Centre each cell's content on the row's ~38px first-line band. The label\n     text (+10) and the \u2713/\u21BA cluster (+3) were already nudged, but the editor\n     cell was not \u2014 so a single-line input sat ~3px above the buttons. A 32px\n     control needs +3 to centre in 38px, so the editor gets the same offset and\n     lines up with the buttons. (A multi-line editor's first line lands on the\n     band too; its extra rows grow downward.) */\n  .readfirst-row-editing > div:nth-child(1) {\n    padding-top: 10px;\n  }\n  .readfirst-row-editing > div:nth-child(2) {\n    padding-top: 3px;\n  }\n  .readfirst-row-editing > div:nth-child(3) {\n    padding-top: 3px;\n  }\n  /* A read-only row is not a control. No pointer and no hover tint, because a\n     click does nothing; and its value wraps in full \u2014 the row is the only\n     rendering the value gets, so a line cut with an ellipsis would be the\n     reader's whole answer. */\n  .readfirst-row-read {\n    cursor: default;\n  }\n  .readfirst-row-read:hover {\n    background: transparent;\n  }\n  .readfirst-row-read .options-readfirst-valuetext {\n    white-space: pre-wrap;\n    overflow: visible;\n    text-overflow: clip;\n    overflow-wrap: anywhere;\n  }\n  .readfirst-row-editing:hover {\n    background: ", ";\n  }\n\n  /* Narrow FORMS (phone / slim drawer): stack each row \u2014 label + actions share\n     the first line, the value cell (or the inline editor) takes the full width\n     beneath. The class is set from a measured wrap width (react-use useMeasure)\n     rather than a viewport media query, so a slim desktop drawer stacks too.\n     The 3 row children are placed explicitly:\n     label (1,1) \u00B7 actions (1,2) \u00B7 value (2, span both). */\n  /* Generous breathing room BETWEEN fields when stacked \u2014 far easier to scan and\n     less overwhelming on a phone. */\n  &.readfirst-narrow {\n    --readfirst-row-gap: 18px;\n  }\n  &.readfirst-narrow .readfirst-row {\n    grid-template-columns: minmax(0, 1fr) auto;\n    gap: 2px 14px;\n    position: relative;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(1) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(3) {\n    grid-column: 2;\n    grid-row: 1;\n  }\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    grid-column: 1 / -1;\n    grid-row: 2;\n  }\n  /* Read (non-editing) rows: float the trailing actions (status dot + the\n     hover-revealed delete/revert) out of the grid flow so a delete button can't\n     inflate the first row and push the value down. They're pinned to a band the\n     height of the LABEL line and vertically centred in it \u2014 so the dot always\n     sits at the same place (centred on the field name), never the bare corner. */\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(3) {\n    position: absolute;\n    top: 2px;\n    right: 10px;\n    height: 22px;\n  }\n  &.readfirst-narrow .readfirst-row:not(.readfirst-row-editing) > :nth-child(1) {\n    padding-right: 46px;\n  }\n\n  /* Focus calm rows: NO recessed value surface and NO intent stripe. Row status\n     is carried by the trailing status dot; message/preview panels keep their own\n     intent backgrounds. The (now invisible) pseudo is retained only to preserve\n     the block's positioning/stacking context that the required-group rail and its\n     cluster nodes resolve against \u2014 removing it would unmoor them. */\n  > *:not(.options-readfirst-card) {\n    position: relative;\n  }\n  > *:not(.options-readfirst-card)::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    left: ", ";\n    background: transparent;\n    pointer-events: none;\n    z-index: 0;\n  }\n  /* Content rides above the surface layer \u2014 except the cluster node, which is\n     absolutely positioned in the gutter and must keep its own positioning. */\n  > *:not(.options-readfirst-card) > *:not(.options-readfirst-node) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* (The required-group connection rail was removed \u2014 the \"One of the below is\n     required\" box now carries the grouping.) */\n\n  /* Tall rows top-anchor (overriding the row's centred default) so the label and\n     dot stay on the value's FIRST line rather than floating to the vertical\n     middle: .readfirst-row-info-open = a shown short_desc grows the LABEL;\n     .readfirst-row-tall = message panels / a hash preview grow the VALUE cell. */\n  .readfirst-row-info-open,\n  .readfirst-row-tall {\n    align-items: start;\n  }\n  /* Narrow stacks label-over-value: the value aligns flush UNDER the label (no\n     indent), like the Focus prototype. */\n  &.readfirst-narrow .readfirst-row > :nth-child(2) {\n    padding-left: 0;\n  }\n  &.readfirst-narrow > *:not(.options-readfirst-card)::before {\n    left: 0;\n  }\n  /* Touch layouts have no hover: a slot reserved for the hover-revealed edit\n     pencil is permanent dead space that insets every chip from the edge \u2014\n     drop it (rows are tap-to-edit; the lock/add slots stay, they're static). */\n  &.readfirst-narrow .options-readfirst-trailing-hover-only {\n    /* !important: the slot carries an inline display for the desktop layout. */\n    display: none !important;\n  }\n  /* Stacked rows: keep them tight (match the Focus prototype). The min-height is\n     dropped so a 2-line label+value row sizes to its content instead of being\n     padded out to 38px. The in-place editor keeps zero padding (below). */\n  &.readfirst-narrow .readfirst-row {\n    padding-top: 2px;\n    padding-bottom: 2px;\n    min-height: 0;\n  }\n  &.readfirst-narrow .readfirst-row-editing {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n"])), exports.LABEL_COL, exports.COMPACT_ROW_PAD_X, exports.COMPACT_ROW_PAD_X, function (_a) {
     var $divider = _a.$divider;
     return $divider;
 }, function (_a) {
@@ -291,10 +297,10 @@ exports.StyledGroupBody = styled_components_1.default.div(templateObject_25 || (
 // element it now sits in, and separated from the editor below it by a hairline
 // rather than a gap — the two share one container, so the seam has to look like
 // a division inside it and not like two stacked things.
-exports.StyledAbsorbedField = styled_components_1.default.div(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
+exports.StyledAbsorbedField = styled_components_1.default.div(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return "".concat(theme.main, "22");
 });
-exports.StyledAbsorbedLabel = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  margin: 0;\n"], ["\n  flex: 0 0 auto;\n  margin: 0;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27;
+exports.StyledAbsorbedLabel = (0, styled_components_1.default)(reqore_1.ReqoreP)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  margin: 0;\n"], ["\n  flex: 0 0 auto;\n  margin: 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
 //# sourceMappingURL=compactRowStyles.js.map

package/dist/components/form/engine/compactRowStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"compactRowStyles.js","sourceRoot":"","sources":["../../../../src/components/form/engine/compactRowStyles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"compactRowStyles.js","sourceRoot":"","sources":["../../../../src/components/form/engine/compactRowStyles.ts"],"names":[],"mappings":"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"}

package/dist/components/form/engine/revealRow.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Bring a form row into view only when it is not already there, and never
+ * under a pinned header.
+ *
+ * A row that moves between status boxes (filling a field moves it from "Needs
+ * attention" to "Set") is followed so the reader does not lose it. That used
+ * to be `scrollIntoView({ block: 'center' })`, which scrolls even when the row
+ * is already in plain sight, and centres it against the whole scrollport while
+ * the box header pinned at the top hides part of it. In the qorus-ide schema
+ * editor the moved row landed with the "Needs attention" header (375-423)
+ * drawn over it (405).
+ *
+ * The visible area is the scrollport minus the pinned chrome above the row:
+ * the form's sticky toolbar and the sticky header of every status box the row
+ * sits in. Both are read from the DOM when the reveal runs, so a host's own
+ * offset, a toolbar that wraps, or a header that is not pinned at all are all
+ * accounted for without the caller knowing about them.
+ */
+/** The nearest ancestor that actually scrolls; `undefined` means the viewport. */
+export declare const findScrollContainer: (element: HTMLElement) => HTMLElement | undefined;
+/**
+ * How far below the top of the scrollport the pinned chrome above `element`
+ * reaches: the largest `top + height` of any sticky header of an enclosing
+ * status box or form toolbar. Zero when nothing above it is pinned.
+ */
+export declare const getPinnedChromeHeight: (element: HTMLElement) => number;
+/**
+ * How far below the top edge of the row's scrollport the pinned chrome reaches.
+ *
+ * A sticky `top` is measured from the scrollport's top edge INSET BY ITS
+ * PADDING, while `scrollIntoView` and `scroll-margin-top` align against the
+ * edge itself. Leaving the padding out put an opened row 16px under its box
+ * header inside a padded host scroller (the Storybook canvas, and any panel
+ * with padding).
+ */
+export declare const getRevealClearance: (element: HTMLElement) => number;
+/**
+ * Whether the whole of `element` is visible below `clearance` (measured from
+ * the top edge of its scrollport, see {@link getRevealClearance}).
+ */
+export declare const isRowInView: (element: HTMLElement, clearance: number) => boolean;
+/**
+ * Scroll `element` the least distance that shows it clear of the pinned chrome
+ * above it — and not at all when it is already fully in view.
+ *
+ * `scroll-margin-top` is what keeps a row that has to come down from above from
+ * stopping under the header: `block: 'nearest'` aligns the row's margin box,
+ * so the row itself stops exactly below the pinned chrome.
+ *
+ * Returns whether a scroll was started.
+ */
+export declare const revealRow: (element: HTMLElement, behavior?: ScrollBehavior) => boolean;
+//# sourceMappingURL=revealRow.d.ts.map

package/dist/components/form/engine/revealRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"revealRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/revealRow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAaH,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,YAAa,WAAW,KAAG,WAAW,GAAG,SAUxE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,YAAa,WAAW,KAAG,MAmB5D,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,YAAa,WAAW,KAAG,MAIzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,aAAa,MAAM,KAAG,OASrE,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,YAAa,WAAW,aAAY,cAAc,KAAc,OAarF,CAAC"}