@qoretechnologies/reqraft 0.10.25 → 0.10.26

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

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -37,9 +60,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompactRow = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var reqore_1 = require("@qoretechnologies/reqore");
+var optionActions_1 = require("./optionActions");
 var flatten_1 = __importDefault(require("lodash/flatten"));
 var size_1 = __importDefault(require("lodash/size"));
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var use_context_selector_1 = require("use-context-selector");
 var validations_1 = require("../../../helpers/validations");
 var templates_1 = require("../../../helpers/templates");
@@ -82,7 +106,7 @@ var COMPACT_COMPLEX_TYPES = new Set([
 ]);
 // Card editors that hold a SINGLE value through one text-bearing input — their
 // built-in ReqoreInput clear duplicates the card's own "Clear value" action, so
-// we suppress it (the card ✕ is the single source). Structural/multi-input
+// we suppress it (the card trash action is the single source). Structural/multi-input
 // editors (hash, list, schema…) and polymorphic ones (auto/any) are NOT listed:
 // their per-sub-field clears are distinct affordances and must stay, while the
 // card ✕ clears the whole value. (Operators force a card on a scalar value, so
@@ -95,6 +119,11 @@ var COMPACT_SINGLE_VALUE_TYPES = new Set([
     'byte-size',
     'method-name',
 ]);
+// How many consumer-injected actions may sit inline in a row before the rest
+// overflow into the row's menu. A row's action slot shares space with the
+// value; an unbounded button strip would squeeze the value out, and the
+// consumer controls how many actions it injects.
+var MAX_INLINE_OPTION_ACTIONS = 2;
 // One read-first row: label | value | action collapsed; the real editor (the
 // classic renderOption) expanded. `hidden` = search-surfaced optional —
 // activating the row adds the field first.
@@ -112,22 +141,20 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var isExpanded = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.expandedOptions.includes(optionName);
     });
+    var autoFocusNameRef = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.autoFocusNameRef; });
     var isHighlighted = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.highlightedOptions.includes(optionName);
     });
     var isFlashed = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.flashedOptions.includes(optionName);
     });
-    var infoPanelOverride = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.infoPanelOverrides[optionName]; });
     var setHighlightedOptions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.setHighlightedOptions; });
-    var setInfoPanelOverrides = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.setInfoPanelOverrides; });
     var setFocusedEditing = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.setFocusedEditing; });
     var readRowHeights = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.readRowHeights; });
     var originalValue = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.originalValue; });
     var availableOptions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.availableOptions; });
     var requiredGroupsInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.requiredGroupsInfo; });
     var handleValueChange = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.handleValueChange; });
-    var handleAddOptionalFieldChange = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.handleAddOptionalFieldChange; });
     var toggleExpandedOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.toggleExpandedOption; });
     var flashOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.flashOption; });
     var hasOptionChanged = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.hasOptionChanged; });
@@ -135,18 +162,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var removeSelectedOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.removeSelectedOption; });
     var getTypeForOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.getTypeForOption; });
     var confirmAction = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.confirmAction; });
+    var optionActions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.optionActions; });
+    var collapseOptionActions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.collapseOptionActions; });
     var renderOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.renderOption; });
     var theme = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.theme; });
     var cMuted = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cMuted; });
     var templates = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.templates; });
-    var cFaint = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cFaint; });
     var cKey = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cKey; });
     var cDivider = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cDivider; });
     var cHover = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cHover; });
     var cDanger = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cDanger; });
     var cWarning = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cWarning; });
     var cInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cInfo; });
-    var cBg = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cBg; });
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
     var renderReadFirstValue = function (field, schema, formatted) {
@@ -179,6 +206,16 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             var truthy = (field === null || field === void 0 ? void 0 : field.value) === true || (field === null || field === void 0 ? void 0 : field.value) === 'true';
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: truthy ? 'success' : 'danger', label: formatted }));
         }
+        // Code-editor read summary: replace the truncated string with a chip
+        // showing line count + character count. The actual code renders below
+        // the row as a monospace `<pre>` inside a `ReqoreCollapsibleContent` —
+        // see `showCodePreview` below. Keeps the row height fixed while making
+        // multi-line source readable without opening the full editor.
+        if (valueType === 'code-editor' && typeof (field === null || field === void 0 ? void 0 : field.value) === 'string') {
+            var lines = field.value.split('\n').length;
+            var chars = field.value.length;
+            return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: 'info', icon: 'CodeLine', label: "".concat(lines, " ").concat(lines === 1 ? 'line' : 'lines'), labelKey: "".concat(chars, " ").concat(chars === 1 ? 'char' : 'chars') }));
+        }
         // Selected allowed-value / enum item with a logo (e.g. language images):
         // render it beside the value, where it belongs — not as the field's icon.
         var allowedImage = (0, readFirst_1.getAllowedValueImage)(field === null || field === void 0 ? void 0 : field.value, schema);
@@ -213,6 +250,64 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     };
     var schema = options === null || options === void 0 ? void 0 : options[optionName];
     var label = (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName;
+    var injectedOptionActions = react_1.default.useMemo(function () {
+        return schema ?
+            (0, optionActions_1.resolveOptionActions)(optionActions, {
+                name: optionName,
+                schema: schema,
+                value: availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[optionName],
+            }).filter(function (action) { return action.show !== false; })
+            : [];
+    }, [availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[optionName], optionActions, optionName, schema]);
+    // Which injected actions stay as inline buttons, and which move into the
+    // overflow menu. Everything collapses on touch / narrow viewports — a
+    // hover-gated button is unreachable without a hover — and anything past the
+    // inline cap overflows regardless, so a consumer injecting ten actions can
+    // never push the row's value out of view.
+    var _p = react_1.default.useMemo(function () {
+        return collapseOptionActions ?
+            [[], injectedOptionActions]
+            : [
+                injectedOptionActions.slice(0, MAX_INLINE_OPTION_ACTIONS),
+                injectedOptionActions.slice(MAX_INLINE_OPTION_ACTIONS),
+            ];
+    }, [collapseOptionActions, injectedOptionActions]), inlineOptionActions = _p[0], menuOptionActions = _p[1];
+    var injectedOptionActionMenuItems = react_1.default.useMemo(function () {
+        return menuOptionActions.map(function (action, index) {
+            var _a, _b;
+            return ({
+                // A panel action labels itself with `label`, but an icon-only one
+                // (the IDE's AI-assist button) carries its name in the tooltip —
+                // a menu row has no hover affordance to fall back on.
+                label: (_b = (_a = action.label) !== null && _a !== void 0 ? _a : action.tooltip) !== null && _b !== void 0 ? _b : "Action ".concat(index + 1),
+                icon: action.icon,
+                intent: action.intent,
+                disabled: action.disabled,
+                onClick: function () { var _a; return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action); },
+            });
+        });
+    }, [menuOptionActions]);
+    var renderInjectedOptionAction = function (action, index, size) {
+        if (size === void 0) { size = 'small'; }
+        // `show` drives visibility here instead of reaching the DOM. The classic
+        // path hands these to ReqorePanel, which honours `show: 'hover'` itself;
+        // the compact slots render plain buttons, so 'hover' becomes a CSS gate on
+        // the containing row/card (see compactRowStyles) — same config, same
+        // behaviour in both modes.
+        // `size` is destructured out and deliberately NOT honoured: the row owns
+        // its action strip's rhythm, and a consumer-supplied size made the
+        // injected button visibly smaller than the revert / more / confirm
+        // buttons beside it. The contextual `size` argument is the row's own
+        // (small when editing or in a card, tiny on a read row), so injected
+        // actions always match their neighbours.
+        var actionLabel = action.label, onClick = action.onClick, show = action.show, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        _ignoredSize = action.size, className = action.className, actionProps = __rest(action, ["label", "onClick", "show", "size", "className"]);
+        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, __assign({ size: size, minimal: true, flat: true, fixed: true }, actionProps, { className: "".concat(className ? "".concat(className, " ") : '', "options-injected-action").concat(show === 'hover' ? ' options-injected-action-hover' : ''), onClick: function (event) {
+                event.stopPropagation();
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }, children: actionLabel }), "".concat(optionName, "-injected-action-").concat(index)));
+    };
     var required = !!((schema === null || schema === void 0 ? void 0 : schema.required) || (schema === null || schema === void 0 ? void 0 : schema.required_groups));
     var removable = !readOnly && !(schema === null || schema === void 0 ? void 0 : schema.preselected) && !(schema === null || schema === void 0 ? void 0 : schema.required) && !(schema === null || schema === void 0 ? void 0 : schema.required_groups);
     var changed = !hidden && !readOnly && hasOptionChanged(optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName);
@@ -256,7 +351,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                     });
                 }), true); }) }) })
         : null;
-    var editType = (_d = ((schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type))) !== null && _d !== void 0 ? _d : '';
+    var fixedAllowedValueOption = (0, readFirst_1.isFixedCompactAllowedValueOption)(schema);
+    var editType = (_d = (fixedAllowedValueOption
+        ? (schema === null || schema === void 0 ? void 0 : schema.type) || (schema === null || schema === void 0 ? void 0 : schema.ui_type)
+        : (schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type))) !== null && _d !== void 0 ? _d : '';
     // Scalars edit in place inside the row; complex fields (tall or nested
     // editors) still open the expanded card below.
     var inlineEditable = !readOnly &&
@@ -267,6 +365,22 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // A choice with per-option logos (e.g. language) reads better collapsed.
         !(0, readFirst_1.optionHasImages)(schema) &&
         !COMPACT_COMPLEX_TYPES.has(editType);
+    // Auto-focus the editor's first input when a field is opened, so you can type
+    // straight away (matches the prototype's tap-to-edit feel).
+    var editorRef = react_1.default.useRef(null);
+    react_1.default.useEffect(function () {
+        if (!isExpanded)
+            return undefined;
+        var id = window.setTimeout(function () {
+            var _a;
+            var el = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input:not([type="hidden"]):not([disabled]), textarea, [contenteditable="true"]');
+            // A user-driven expand scrolls the just-opened editor into view; the
+            // programmatic `autoFocusFirstRequired` expand must NOT — otherwise an
+            // off-screen / below-the-fold form scrolls itself into view on mount.
+            el === null || el === void 0 ? void 0 : el.focus((autoFocusNameRef === null || autoFocusNameRef === void 0 ? void 0 : autoFocusNameRef.current) === optionName ? { preventScroll: true } : undefined);
+        }, 60);
+        return function () { return window.clearTimeout(id); };
+    }, [isExpanded, optionName, autoFocusNameRef]);
     var revertButton = changed ?
         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-revert', size: 'small', flat: true, minimal: true, icon: 'HistoryLine', tooltip: 'Revert changes', onClick: function (e) {
                 var _a, _b, _c, _d;
@@ -278,8 +392,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // — distinct from the read-row "Remove field" (which deletes an optional
     // field entirely). Once cleared, `changed` flips on and `hasValue` off, so
     // this button gives way to `revertButton` in the same slot — the morph the
-    // edit row's actions are designed around. Neutral (not danger): it's a
-    // reversible step, undone by Revert or by re-typing.
+    // edit row's actions are designed around. Clearing is destructive even
+    // though it can be reverted before saving, so both the trigger and its
+    // confirmation use danger intent.
     //
     // Only editors with NO built-in clear of their own get this button —
     // toggles and fixed-choice pickers. The text/number/date inputs already
@@ -291,17 +406,27 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // CREATABLE one still renders the raw input (with its own ✕), so it keeps
         // its clear — matching the dispatch in AutoFormField/TemplateField.
         (!!(0, size_1.default)(schema === null || schema === void 0 ? void 0 : schema.allowed_values) && !(schema === null || schema === void 0 ? void 0 : schema.allowed_values_creatable));
+    var confirmClearValue = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        confirmAction({
+            title: 'Clear value',
+            description: "Clear the current value of \"".concat(label, "\"?"),
+            confirmLabel: 'Clear value',
+            confirmButtonIntent: 'danger',
+            intent: 'danger',
+            onConfirm: function () { return handleValueChange(optionName, undefined); },
+        });
+    };
     var clearValueButton = hasValue && !readOnly && editorLacksOwnClear ?
-        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-clear', size: 'small', flat: true, minimal: true, icon: 'CloseLine', tooltip: 'Clear value', onClick: function (e) {
-                e.stopPropagation();
-                handleValueChange(optionName, undefined);
-            } })
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-clear', size: 'small', flat: true, minimal: true, icon: 'DeleteBinLine', intent: 'danger', "aria-label": 'Clear value', tooltip: 'Clear value', onClick: confirmClearValue })
         : null;
     // Batched commit: a changed row is a draft until Save — mark it with the
     // product's Draft chip (always visible, unlike the hover-revealed revert).
     var draftChip = commitMode === 'batched' && changed ?
         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-draft', label: 'Draft', intent: 'warning', icon: 'EditLine', size: 'tiny', minimal: true, fixed: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 } })
         : null;
+    var isPassiveCloseAction = fixedAllowedValueOption || readOnly;
+    var closeExpandedFieldButton = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-done', size: 'small', intent: !isPassiveCloseAction ? 'success' : undefined, flat: isPassiveCloseAction, minimal: isPassiveCloseAction, fixed: true, icon: isPassiveCloseAction ? 'CloseLine' : 'CheckLine', "aria-label": isPassiveCloseAction ? 'Close field' : 'Done', tooltip: isPassiveCloseAction ? 'Close field' : 'Done', onClick: function () { return toggleExpandedOption(optionName); } }));
     // Info tiers: Tier 1 (danger/warning + dependency hints) must be visible
     // without interaction; Tier 2 (info/success, default notes) sits behind ⓘ.
     var infoActive = !hidden;
@@ -325,45 +450,50 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             .filter(function (m) { return m.label !== 'This field is required'; })
             .map(function (m) { return ({ intent: m.intent, content: String(m.label) }); })
         : [];
-    var isCriticalMsg = function (m) { return m.intent === 'danger' || m.intent === 'warning'; };
-    var tier1 = __spreadArray(__spreadArray([], schemaMessages, true), fieldMessages, true).filter(isCriticalMsg);
-    var tier2 = __spreadArray(__spreadArray([], __spreadArray(__spreadArray([], schemaMessages, true), fieldMessages, true).filter(function (m) { return !isCriticalMsg(m); }), true), (infoActive && (schema === null || schema === void 0 ? void 0 : schema.default_value_desc) ?
+    // TWO display channels, matching the Focus prototype:
+    //  • dedicated schema `messages` → prominent coloured PANELS below the row;
+    //  • everything else (validation reasons, the unmet-dependency hint, the
+    //    default-value note) → a compact INLINE reason strip — not a panel.
+    var panelMessages = schemaMessages;
+    var inlineMessages = __spreadArray(__spreadArray([], fieldMessages, true), (infoActive && (schema === null || schema === void 0 ? void 0 : schema.default_value_desc) ?
         [
             {
                 content: "Default: ".concat(schema.default_value_display_name || '', " \u2014 ").concat(schema.default_value_desc).trim(),
             },
         ]
         : []), true);
-    var worstIntent = tier1.some(function (m) { return m.intent === 'danger'; }) ? 'danger'
-        : tier1.length ? 'warning'
+    var allMsgs = __spreadArray(__spreadArray([], panelMessages, true), inlineMessages, true);
+    var worstIntent = allMsgs.some(function (m) { return m.intent === 'danger'; }) ? 'danger'
+        : allMsgs.some(function (m) { return m.intent === 'warning'; }) ? 'warning'
             : undefined;
     var intentColor = worstIntent === 'danger' ? cDanger
         : worstIntent === 'warning' ? cWarning
             : undefined;
     var showStripe = infoActive && !!intentColor;
-    // The short_desc renders UNDER the field name (revealed by the ⓘ toggle); the
-    // value-side panel carries only the messages (tier1/tier2).
     var labelShortDesc = schema === null || schema === void 0 ? void 0 : schema.short_desc;
-    var panelHasContent = tier1.length > 0 || tier2.length > 0;
-    var hasInfoPanelContent = infoActive && (panelHasContent || !!labelShortDesc);
-    // Open-state precedence: a per-row ⓘ override is most specific; else the
-    // global toggle when ENGAGED (show all / hide all — overriding the message
-    // auto-open); else the default, where only critical (tier1) messages open.
-    var defaultOpen = showAllDescriptions === undefined ? tier1.length > 0 : showAllDescriptions;
-    var infoPanelOpen = hasInfoPanelContent && (infoPanelOverride !== null && infoPanelOverride !== void 0 ? infoPanelOverride : defaultOpen);
-    var renderInfoStrip = function (m, index) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', opaque: false, flat: true, intent: m.intent, title: m.title, children: m.content }, "".concat(m.content, "-").concat(index))); };
-    var infoToggle = hasInfoPanelContent ?
-        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-info-toggle', size: 'tiny', minimal: true, flat: true, compact: true, fixed: true, active: infoPanelOpen, intent: worstIntent, icon: infoPanelOpen ? 'InformationFill' : 'InformationLine', tooltip: infoPanelOpen ? 'Hide field information' : 'Show field information', onClick: function (e) {
-                e.stopPropagation();
-                setInfoPanelOverrides(function (prev) {
-                    var _a;
-                    return (__assign(__assign({}, prev), (_a = {}, _a[optionName] = !infoPanelOpen, _a)));
-                });
+    // The per-row ⓘ is gone: short_desc shows under the name only when the global
+    // "descriptions" toggle is engaged (and inside the editor when expanded).
+    var showLabelDesc = !!labelShortDesc && showAllDescriptions === true;
+    // The `?` that opens the long-form help dialog. Shared by the read row AND
+    // the inline editor: opening a field used to drop it, leaving an editing row
+    // with no route to the field's description at all. Stops propagation because
+    // both labels are click targets themselves (the row expands / collapses).
+    var helpIcon = (schema === null || schema === void 0 ? void 0 : schema.desc) ?
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'QuestionLine', size: '12px', effect: { opacity: 0.55 }, margin: 'left', marginSize: 'tiny', role: 'button', tabIndex: -1, "aria-label": 'Help', className: 'options-readfirst-help', style: { cursor: 'help' }, onClick: function (event) {
+                event.stopPropagation();
+                handleOptionLabelClick(optionName);
             } })
         : null;
-    var infoBlock = infoPanelOpen && panelHasContent ?
-        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledInfoPanel, { className: 'options-readfirst-info-panel', children: __spreadArray(__spreadArray([], tier1, true), tier2, true).map(renderInfoStrip) })
-        : null;
+    var renderInfoStrip = function (m, index) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', opaque: false, flat: true, intent: m.intent, title: m.title, children: m.content }, "".concat(m.content, "-").concat(index))); };
+    var reasonColor = function (intent) {
+        var _a;
+        return intent === 'danger' ? cDanger
+            : intent === 'warning' ? cWarning
+                : intent === 'success' ?
+                    ((_a = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _a === void 0 ? void 0 : _a.success) || cInfo
+                    : "".concat(cMuted, "cc");
+    };
+    var infoToggle = null;
     // Cluster (required-group connection) — shared by the read row, its block
     // wrapper AND the inline editor, so the rail/node/highlight persist across
     // view↔edit. The node is opaque (it masks the rail behind it); hovering any
@@ -376,41 +506,68 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var clusterBlockClass = clustered ?
         "readfirst-cluster-rail".concat(clusterFirst ? ' readfirst-cluster-first' : '').concat(clusterLast ? ' readfirst-cluster-last' : '').concat(clusterSatisfied ? ' readfirst-cluster-satisfied' : '')
         : '';
-    var memberSet = clustered && !hidden && hasValue;
-    var clusterNode = clustered ?
-        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledClusterNode, { className: 'options-readfirst-node', "$filled": !!memberSet, "$color": clusterSatisfied ?
-                ((_f = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _f === void 0 ? void 0 : _f.success) || cInfo
-                : "".concat(cWarning, "99"), "$bg": cBg })
-        : null;
+    // The connection rail + status nodes are gone — the "One of the below is
+    // required" box (and the Covers / Covered-by chips) carry the grouping now.
+    var clusterNode = null;
     var clusterHoverProps = clustered && clusterMembers.length ?
         {
             onMouseEnter: function () { return setHighlightedOptions(clusterMembers); },
             onMouseLeave: function () { return setHighlightedOptions([]); },
         }
         : {};
+    // Secondary edit actions tuck into a "More" (⋮) menu so the card header stays
+    // calm: Fullscreen always, plus Remove field for a removable option. Rendered
+    // just before the Done ✓ in both expanded layouts.
+    var moreMenu = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-more', icon: 'More2Fill', flat: true, minimal: true, fixed: true, size: 'small', tooltip: 'More actions', items: __spreadArray(__spreadArray([
+            {
+                label: 'Edit fullscreen',
+                icon: 'FullscreenLine',
+                onClick: function () { return setFocusedEditing(optionName); },
+            }
+        ], (removable && !hidden ?
+            [
+                {
+                    label: 'Remove field',
+                    icon: 'DeleteBinLine',
+                    intent: 'danger',
+                    onClick: function () {
+                        return confirmAction({
+                            title: 'Remove field',
+                            onConfirm: function () { return removeSelectedOption(optionName); },
+                        });
+                    },
+                },
+            ]
+            : []), true), injectedOptionActionMenuItems, true) }));
     if (isExpanded) {
         if (inlineEditable) {
             var collapse_1 = function () { return toggleExpandedOption(optionName); };
             var editingRow = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, className: 'readfirst-row readfirst-row-editing options-readfirst-inline options-readfirst-value', style: readRowHeights.current[optionName] ?
                     { minHeight: readRowHeights.current[optionName] }
-                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
-                            if (event.key === 'Enter' || event.key === ' ') {
-                                event.preventDefault();
-                                collapse_1();
-                            }
-                        }, children: [label, required ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' }) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, onKeyDown: function (event) {
+                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
+                                    if (event.key === 'Enter' || event.key === ' ') {
+                                        event.preventDefault();
+                                        collapse_1();
+                                    }
+                                }, children: [label, required ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' }) : null, helpIcon] }), labelShortDesc ?
+                                (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
+                                : null] }), (0, jsx_runtime_1.jsx)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
                                 event.stopPropagation();
                                 collapse_1();
                             }
-                        }, children: renderOption(optionName, optionField, 'small', true) }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, revertButton, clearValueButton, (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-done', size: 'small', flat: true, minimal: true, intent: 'success', icon: 'CheckLine', tooltip: 'Done', onClick: collapse_1 })] }), clusterNode] }), optionName));
+                        }, children: renderOption(optionName, optionField, 'small', true) }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, revertButton, clearValueButton, inlineOptionActions.map(function (action, index) {
+                                return renderInjectedOptionAction(action, index);
+                            }), moreMenu, closeExpandedFieldButton] }), clusterNode] }), optionName));
             // ALWAYS wrap the editing row in the same StyledColumn so its parent stays
             // stable (the editor must not remount and lose focus mid-type). The
             // message panel is NOT rendered here: the editor's own OptionFieldMessages
             // strip already shows the field's messages, so a panel would duplicate
             // them. The wrapper carries the cluster rail class so the connection
             // persists while a member is being edited.
-            return ((0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledColumn, { "data-field": optionName, className: clusterBlockClass || undefined, children: editingRow }, optionName));
+            return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledColumn, { "data-field": optionName, className: clusterBlockClass || undefined, children: [editingRow, focusedEditing === optionName ?
+                        (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: true, modalOnly: true, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [(0, jsx_runtime_1.jsx)(Description_1.Description, { longDescription: schema === null || schema === void 0 ? void 0 : schema.desc, shortDescription: schema === null || schema === void 0 ? void 0 : schema.short_desc, longDescriptionShownByDefault: true }), renderOption(optionName, optionField)] })
+                        : null] }, optionName));
         }
         // Card chrome: badge / actions / tags render here — the row only fits
         // icon/image + the intent stripe.
@@ -418,10 +575,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         var cardBadges = schemaBadge !== undefined && schemaBadge !== null ?
             (Array.isArray(schemaBadge) ? schemaBadge : [schemaBadge])
             : [];
-        var cardActions = ((_g = schema === null || schema === void 0 ? void 0 : schema.actions) === null || _g === void 0 ? void 0 : _g.filter(function (action) { return !!action && typeof action === 'object'; })) || [];
+        var cardActions = ((_f = schema === null || schema === void 0 ? void 0 : schema.actions) === null || _f === void 0 ? void 0 : _f.filter(function (action) { return !!action && typeof action === 'object'; })) || [];
         var cardTags = ((schema === null || schema === void 0 ? void 0 : schema.tags) || []);
         var schemaIntentColor = (schema === null || schema === void 0 ? void 0 : schema.intent) ?
-            (_h = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _h === void 0 ? void 0 : _h[schema.intent]
+            (_g = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _g === void 0 ? void 0 : _g[schema.intent]
             : undefined;
         return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledEditCard, { "data-field": optionName, className: COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
                 'options-readfirst-card options-readfirst-card-single'
@@ -430,7 +587,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                         alignItems: 'flex-start',
                         justifyContent: 'space-between',
                         gap: 12,
-                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cMuted, children: [(schema === null || schema === void 0 ? void 0 : schema.icon) || (schema === null || schema === void 0 ? void 0 : schema.image) ?
+                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cKey, children: [(schema === null || schema === void 0 ? void 0 : schema.icon) || (schema === null || schema === void 0 ? void 0 : schema.image) ?
                                             (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: schema === null || schema === void 0 ? void 0 : schema.icon, image: schema === null || schema === void 0 ? void 0 : schema.image, size: '14px' })
                                             : null, (0, jsx_runtime_1.jsxs)("span", { children: [label, required ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' }) : null] }), cardBadges.map(function (badge, index) {
                                             return typeof badge === 'object' ?
@@ -443,14 +600,22 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                     : null] }), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { fixed: true, verticalAlign: 'center', children: [cardActions.map(function (action, index) {
                                     var _a = action, actionLabel = _a.label, actionProps = __rest(_a, ["label"]);
                                     return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, __assign({ size: 'small', minimal: true, flat: true, fixed: true, className: 'options-readfirst-card-action' }, actionProps, { children: actionLabel }), index));
-                                }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'FullscreenLine', minimal: true, flat: true, fixed: true, className: 'options-readfirst-fullscreen', tooltip: 'Edit fullscreen', onClick: function () { return setFocusedEditing(optionName); } }), hasValue && !readOnly ?
-                                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'CloseLine', minimal: true, flat: true, fixed: true, className: 'options-readfirst-clear', tooltip: 'Clear value', onClick: function () { return handleValueChange(optionName, undefined); } })
-                                    : null, (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'CheckLine', intent: 'success', fixed: true, className: 'options-readfirst-done', onClick: function () { return toggleExpandedOption(optionName); }, children: readOnly ? 'Close' : 'Done' })] })] }), (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: focusedEditing === optionName, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [focusedEditing === optionName ?
+                                }), inlineOptionActions.map(function (action, index) {
+                                    return renderInjectedOptionAction(action, index);
+                                }), hasValue && !readOnly ?
+                                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'DeleteBinLine', minimal: true, flat: true, fixed: true, intent: 'danger', className: 'options-readfirst-clear', "aria-label": 'Clear value', tooltip: 'Clear value', onClick: confirmClearValue })
+                                    : null, moreMenu, closeExpandedFieldButton] })] }), (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: focusedEditing === optionName, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [focusedEditing === optionName ?
                             (0, jsx_runtime_1.jsx)(Description_1.Description, { longDescription: schema === null || schema === void 0 ? void 0 : schema.desc, shortDescription: schema === null || schema === void 0 ? void 0 : schema.short_desc, longDescriptionShownByDefault: true })
                             : null, renderOption(optionName, optionField)] })] }, optionName));
     }
     var formatted = (0, readFirst_1.formatOptionValue)(optionField, schema);
     var empty = formatted === '';
+    // Inline reasons shown on the value line: validation / dependency / one-of /
+    // default-value hints, plus a read-only covered-by note (editable covered rows
+    // carry that in their chip instead).
+    var valueReasons = __spreadArray(__spreadArray([], inlineMessages, true), (empty && coveredByLabel ?
+        [{ content: "Covered by \u201C".concat(coveredByLabel, "\u201D"), intent: 'success' }]
+        : []), true);
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
     // more" disclosure; the row itself still expands the real editor on click.
     var valueType = (0, readFirst_1.getValueType)(optionField, schema);
@@ -459,6 +624,30 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition' ?
         (0, readFirst_1.getHashEntries)(optionField, schema)
         : [];
+    // A LIST OF HASHES/objects gets the same expandable structured preview a hash
+    // does — the flat "N items" summary can't convey object contents (and must
+    // never print "[object Object]"). StructuredDataView unwraps each item's
+    // {type,value} envelope. Plain scalar lists keep just their joined summary.
+    var isHashList = !hidden &&
+        (valueType === 'list' || valueType === 'free-list' || valueType === 'array') &&
+        Array.isArray(optionField === null || optionField === void 0 ? void 0 : optionField.value) &&
+        optionField.value.length > 0 &&
+        optionField.value.some(function (item) {
+            var inner = item && typeof item === 'object' && 'value' in item ?
+                item.value
+                : item;
+            return inner !== null && typeof inner === 'object';
+        });
+    var showStructuredPreview = hashEntries.length > 0 || isHashList;
+    // Multi-line code preview: a `code-editor` field with a non-empty string
+    // value gets a `<pre>`-based code block under the row, capped by a
+    // `ReqoreCollapsibleContent` so the collapsed height stays row-sized and
+    // "Show more" reveals the rest.  Sits in the same inset the hash/list
+    // preview uses — mutually exclusive with `showStructuredPreview`.
+    var showCodePreview = !hidden &&
+        valueType === 'code-editor' &&
+        typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
+        optionField.value.length > 0;
     var typeLabel = showFieldTypes ?
         "<".concat((schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type) || 'auto').concat((schema === null || schema === void 0 ? void 0 : schema.ui_element_type) ? "[".concat(schema.ui_element_type, "]") : '', ">")
         : null;
@@ -497,7 +686,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // "Depends on" dropdown whose items are the blocking fields (an "any of:"
     // divider for OR-groups), each clickable to flash/locate the blocker.
     var dependsOnChip = fieldDisabled && dependencyEntries.length ?
-        (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, onMouseEnter: function () { return setHighlightedOptions(depHighlightNames); }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-lock-deps', size: 'tiny', minimal: true, flat: true, compact: true, icon: 'LockLine', label: 'Depends on', effect: { uppercase: true, spaced: 1 }, items: __spreadArray([
+        (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, onMouseEnter: function () { return setHighlightedOptions(depHighlightNames); }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-lock-deps', size: 'tiny', minimal: true, flat: true, compact: true, icon: 'LockLine', tooltip: 'Disabled \u2014 depends on other fields. Click to locate them.', items: __spreadArray([
                     { divider: true, label: 'Unlocked by:', dividerAlign: 'left' }
                 ], dependencyEntries.flatMap(function (entry) { return __spreadArray(__spreadArray([], (Array.isArray(entry) ?
                     [{ divider: true, label: 'any of:', dividerAlign: 'left' }]
@@ -524,9 +713,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         if ((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('readfirst-row')) {
             readRowHeights.current[optionName] = Math.round(target.getBoundingClientRect().height);
         }
-        if (hidden) {
-            handleAddOptionalFieldChange('options', optionName);
-        }
+        // Optional fields aren't "added" — every one is editable in place. Opening a
+        // not-yet-set field just expands its editor (with an empty value); it joins
+        // the form's output the moment a value is set (and moves to Set / Needs
+        // attention), and drops back to Optional when cleared. No explicit add step.
         toggleExpandedOption(optionName);
     };
     // Row chrome: icon/image before the label; schema `intent` as the edge
@@ -535,7 +725,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: schema === null || schema === void 0 ? void 0 : schema.icon, image: schema === null || schema === void 0 ? void 0 : schema.image, size: '14px', className: 'options-readfirst-row-icon' })
         : null;
     var rowSchemaIntentColor = (schema === null || schema === void 0 ? void 0 : schema.intent) ?
-        (_j = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _j === void 0 ? void 0 : _j[schema.intent]
+        (_h = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _h === void 0 ? void 0 : _h[schema.intent]
         : undefined;
     var rowStripeColor = (showStripe ? intentColor : undefined) || rowSchemaIntentColor;
     // Intent stripe on the block ROOT so it spans the field's whole territory:
@@ -545,60 +735,67 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var stripeStyle = rowStripeColor ?
         (_b = {}, _b['--readfirst-stripe'] = rowStripeColor, _b)
         : undefined;
-    var blockWrapped = hashEntries.length > 0 || !!infoBlock;
-    var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: 'button', tabIndex: 0, "aria-label": "".concat(label).concat(hidden ? ' (add field)' : ''), className: "readfirst-row options-readfirst-value".concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(labelShortDesc && infoPanelOpen ? ' readfirst-row-info-open' : '').concat(!blockWrapped && clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: blockWrapped ? undefined : stripeStyle, onClick: activate, onKeyDown: function (event) {
+    // "Focus" trailing status dot, derived from the SHARED status helper (the
+    // same one FormEngine uses to bucket rows into the Needs-attention/Set/Optional
+    // boxes — so the dot and the box can never disagree). Hidden (not-yet-added)
+    // and dependency-locked rows show no dot (the add/lock affordance speaks for
+    // them). worstIntent already folds in schema + validation messages.
+    var cSuccess = (_j = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _j === void 0 ? void 0 : _j.success;
+    var rowStatus = (0, readFirst_1.getReadFirstStatus)({
+        empty: empty,
+        required: required,
+        covered: !!coveredByLabel || groupResolved,
+        invalid: worstIntent === 'danger',
+        warned: worstIntent === 'warning',
+    });
+    var dotStatus = hidden || fieldDisabled ? undefined : rowStatus;
+    var dotColor = dotStatus === 'invalid' ? cDanger
+        : dotStatus === 'todo' ? cWarning
+            : dotStatus === 'set' ? cSuccess || cInfo
+                : undefined;
+    var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: 'button', tabIndex: 0, "aria-label": label, className: "readfirst-row options-readfirst-value".concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: stripeStyle, onClick: activate, onKeyDown: function (event) {
             if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
                 activate(event);
             }
-        } }, clusterHoverProps, { children: [clusterNode, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, children: [rowChromeIcon, label, required ? (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' }) : null, typeLabel ?
+        } }, clusterHoverProps, { children: [clusterNode, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, children: [rowChromeIcon, (0, jsx_runtime_1.jsxs)("span", { className: 'options-readfirst-label-text', style: { minWidth: 0 }, children: [label, required ?
+                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px', margin: 'left', marginSize: 'tiny' })
+                                        : null, helpIcon] }), typeLabel ?
                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, label: typeLabel, labelEffect: { opacity: 0.55 } })
-                                : null, (schema === null || schema === void 0 ? void 0 : schema.desc) ?
-                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'QuestionLine', size: '12px', effect: { opacity: 0.55 }, margin: 'left', marginSize: 5, role: 'button', tabIndex: -1, "aria-label": 'Help', className: 'options-readfirst-help', style: { cursor: 'help' }, onClick: function (event) {
-                                        event.stopPropagation();
-                                        handleOptionLabelClick(optionName);
-                                    } })
-                                : null] }), labelShortDesc && infoPanelOpen ?
+                                : null] }), showLabelDesc ?
                         (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
-                        : null] }), (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowValue, { title: !empty && !hidden && typeof formatted === 'string' ? formatted : undefined, "$color": empty || hidden ? cFaint : "".concat(cMuted, "cc"), "$empty": empty || hidden, children: hidden ?
-                    'Not in form — add'
-                    : empty ?
-                        coveredByLabel ?
-                            // Editable rows carry the "covered by" explanation in the group
-                            // chip; read-only rows have no chip, so keep it inline here.
-                            readOnly ?
-                                "Not set \u2014 covered by \u201C".concat(coveredByLabel, "\u201D")
-                                : 'Not set'
-                            : required ?
-                                'Required — not set'
-                                : 'Not set'
-                        : renderReadFirstValue(optionField, schema, formatted) }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [!hidden && !fieldDisabled && (!clustered || !!coveredByLabel) ? requiredGroupChip : null, !hidden ? dependsOnChip : null, draftChip, changed ?
-                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-revert', size: 'tiny', flat: true, minimal: true, compact: true, icon: 'HistoryLine', tooltip: 'Revert changes', onClick: function (e) {
-                                var _a, _b, _c, _d;
-                                e.stopPropagation();
-                                handleValueChange(optionName, (_b = (_a = originalValue.current) === null || _a === void 0 ? void 0 : _a[optionName]) === null || _b === void 0 ? void 0 : _b.value, (_d = (_c = originalValue.current) === null || _c === void 0 ? void 0 : _c[optionName]) === null || _d === void 0 ? void 0 : _d.type);
-                            } })
-                        : null, removable && !hidden ?
-                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'readfirst-action', size: 'small', flat: true, minimal: true, intent: 'danger', icon: 'DeleteBinLine', tooltip: 'Remove field', onClick: function (e) {
-                                e.stopPropagation();
-                                confirmAction({
-                                    title: 'Remove field',
-                                    onConfirm: function () { return removeSelectedOption(optionName); },
-                                });
-                            } })
-                        : null, hidden || (fieldDisabled && !dependencyEntries.length) ?
-                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-trailing-slot', "$width": 18, children: hidden ?
-                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'AddLine', intent: 'info', size: '14px' })
-                                : (0, jsx_runtime_1.jsx)("span", { title: fieldDisabledReason, style: { display: 'inline-flex', opacity: 0.45 }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { className: 'options-readfirst-locked', icon: 'LockLine', size: '14px' }) }) })
+                        : null] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowValue, { title: !empty && !hidden && typeof formatted === 'string' ? formatted : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [(0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted) }), valueReasons.map(function (m, i) { return ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-reason', style: { color: reasonColor(m.intent) }, children: m.content }, "".concat(m.content, "-").concat(i))); }), panelMessages.length ?
+                        (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-info-panel', children: panelMessages.map(renderInfoStrip) })
+                        : null, showStructuredPreview ?
+                        // The inset lives inside the row now, so a click on a value chip would
+                        // bubble to the row's onClick and fire activate() a SECOND time (the
+                        // chip's onItemClick already calls it) — toggling the editor shut again.
+                        // Stop the bubble here; the chip's own handler still opens the editor.
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-structured', children: (0, jsx_runtime_1.jsx)(StructuredDataView_1.StructuredDataView, { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, collapsibleRoot: false, showTypes: showFieldTypes, defaultExpandDepth: 2, onItemClick: function () { return activate(); } }) }) }) })
+                        : null, showCodePreview ?
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset options-readfirst-code-inset', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledCodePreview, { className: 'options-readfirst-code', "$bg": cHover, "$border": "".concat(cDivider, "88"), "$fg": cKey, children: optionField.value }) }) })
+                        : null] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [!hidden && !fieldDisabled && !clustered && !coveredByLabel ? requiredGroupChip : null, !hidden ? dependsOnChip : null, draftChip, fieldDisabled && !dependencyEntries.length ?
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-trailing-slot', "$width": 18, children: (0, jsx_runtime_1.jsx)("span", { title: fieldDisabledReason, style: { display: 'inline-flex', opacity: 0.45 }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { className: 'options-readfirst-locked', icon: 'LockLine', size: '14px' }) }) })
                         : null, infoToggle ?
                         (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-info-slot', "$width": 26, children: infoToggle })
-                        : null] })] }), optionName));
-    if (hashEntries.length) {
-        return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledColumn, { "data-field": optionName, className: "options-readfirst-hash-row".concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), style: stripeStyle, children: [row, (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset', children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-structured', children: (0, jsx_runtime_1.jsx)(StructuredDataView_1.StructuredDataView, { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, collapsibleRoot: false, showTypes: showFieldTypes, defaultExpandDepth: 2, onItemClick: function () { return activate(); } }) }) }) }), infoBlock] }, optionName));
-    }
-    if (infoBlock) {
-        return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledColumn, { "data-field": optionName, className: "options-readfirst-info-row".concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), style: stripeStyle, children: [row, infoBlock] }, optionName));
-    }
+                        : null, inlineOptionActions.map(function (action, index) {
+                        return renderInjectedOptionAction(action, index, 'tiny');
+                    }), injectedOptionActionMenuItems.length ?
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-actions-slot', "$width": 26, 
+                            // The read row opens the editor when clicked. Without this the tap
+                            // that opens this menu also expands the row, which unmounts the
+                            // menu — on touch that made the collapsed actions unreachable,
+                            // the exact problem the collapse exists to solve.
+                            onClick: function (event) { return event.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-injected-actions-menu', icon: 'MoreFill', flat: true, minimal: true, fixed: true, size: 'tiny', tooltip: 'Field actions', items: injectedOptionActionMenuItems }) })
+                        : null, (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-statusdot-slot', "$width": 12, children: changed && !readOnly && !hidden ?
+                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-revert', size: 'tiny', flat: true, minimal: true, compact: true, icon: 'HistoryLine', tooltip: 'Revert changes', onClick: function (e) {
+                                    var _a, _b, _c, _d;
+                                    e.stopPropagation();
+                                    handleValueChange(optionName, (_b = (_a = originalValue.current) === null || _a === void 0 ? void 0 : _a[optionName]) === null || _b === void 0 ? void 0 : _b.value, (_d = (_c = originalValue.current) === null || _c === void 0 ? void 0 : _c[optionName]) === null || _d === void 0 ? void 0 : _d.type);
+                                } })
+                            : dotColor ?
+                                (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusDot, { "$color": dotColor, "$ring": dotStatus !== 'set', "aria-hidden": true })
+                                : null })] })] }), optionName));
     return row;
 });
 exports.CompactRow.displayName = 'CompactRow';