@qoretechnologies/reqraft 0.10.36 → 0.10.37-pr.95.g4e65c57

package/dist/components/codeSize/index.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
+export interface IReqraftCodeSize {
+    /** Number of lines, counting a trailing newline's empty last line. */
+    lines: number;
+    /** Number of characters (UTF-16 code units, as `String.length` reports). */
+    chars: number;
+}
+/**
+ * Measure a block of code. Split out from the tag so the numbers can be
+ * asserted without rendering, and reused by callers that want to phrase the
+ * size themselves.
+ *
+ * An empty string is one line of zero characters, which is what an editor
+ * showing it displays — not zero lines.
+ */
+export declare function describeCodeSize(code: string): IReqraftCodeSize;
+/** `4 lines` / `1 line` — the label half of the chip. */
+export declare function formatCodeLines(lines: number): string;
+/** `92 chars` / `1 char` — the key half of the chip. */
+export declare function formatCodeChars(chars: number): string;
+/**
+ * The chip as plain `ReqoreTag` props. Needed wherever a host takes tag
+ * *props* rather than an element — a `ReqorePanel` `badge`, a button badge —
+ * which is most of Reqore's badge surface.
+ */
+export declare function codeSizeTagProps(code: string): IReqoreTagProps;
+export interface IReqraftCodeSizeTagProps extends Omit<IReqoreTagProps, 'label' | 'labelKey'> {
+    /** The code being summarised. */
+    code: string;
+}
+/**
+ * `N chars | N lines` chip summarising a block of source. Every prop of
+ * `ReqoreTag` passes through except the two labels, which are the point.
+ */
+export declare const ReqraftCodeSizeTag: import("react").MemoExoticComponent<({ code, ...rest }: IReqraftCodeSizeTagProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/codeSize/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/codeSize/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAG/E,MAAM,WAAW,gBAAgB;IAC/B,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAE/D;AAED,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,wDAAwD;AACxD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAErD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CAW9D;AAED,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,UAAU,CAAC;IACnD,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,0DACT,wBAAwB,6CAK7C,CAAC"}

package/dist/components/codeSize/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReqraftCodeSizeTag = exports.codeSizeTagProps = exports.formatCodeChars = exports.formatCodeLines = exports.describeCodeSize = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2026 Qore Technologies, s.r.o.
+// How much code is there? — the one answer, rendered one way.
+//
+// A read-only view of source has to say something about the code it is not
+// showing in full: how many lines, how much text. The compact form engine
+// grew that chip first (a `code-editor` value's read summary); detail pages
+// outside the form engine want the identical affordance. It lives here so
+// there is one renderer rather than one per caller, each drifting in
+// pluralisation, icon and intent.
+var reqore_1 = require("@qoretechnologies/reqore");
+var react_1 = require("react");
+/**
+ * Measure a block of code. Split out from the tag so the numbers can be
+ * asserted without rendering, and reused by callers that want to phrase the
+ * size themselves.
+ *
+ * An empty string is one line of zero characters, which is what an editor
+ * showing it displays — not zero lines.
+ */
+function describeCodeSize(code) {
+    return { lines: code.split('\n').length, chars: code.length };
+}
+exports.describeCodeSize = describeCodeSize;
+/** `4 lines` / `1 line` — the label half of the chip. */
+function formatCodeLines(lines) {
+    return "".concat(lines, " ").concat(lines === 1 ? 'line' : 'lines');
+}
+exports.formatCodeLines = formatCodeLines;
+/** `92 chars` / `1 char` — the key half of the chip. */
+function formatCodeChars(chars) {
+    return "".concat(chars, " ").concat(chars === 1 ? 'char' : 'chars');
+}
+exports.formatCodeChars = formatCodeChars;
+/**
+ * The chip as plain `ReqoreTag` props. Needed wherever a host takes tag
+ * *props* rather than an element — a `ReqorePanel` `badge`, a button badge —
+ * which is most of Reqore's badge surface.
+ */
+function codeSizeTagProps(code) {
+    var _a = describeCodeSize(code), lines = _a.lines, chars = _a.chars;
+    return {
+        size: 'small',
+        minimal: true,
+        intent: 'info',
+        icon: 'CodeLine',
+        label: formatCodeLines(lines),
+        labelKey: formatCodeChars(chars),
+    };
+}
+exports.codeSizeTagProps = codeSizeTagProps;
+/**
+ * `N chars | N lines` chip summarising a block of source. Every prop of
+ * `ReqoreTag` passes through except the two labels, which are the point.
+ */
+exports.ReqraftCodeSizeTag = (0, react_1.memo)(function (_a) {
+    var code = _a.code, rest = __rest(_a, ["code"]);
+    var _b = codeSizeTagProps(code), label = _b.label, labelKey = _b.labelKey, defaults = __rest(_b, ["label", "labelKey"]);
+    return (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({}, defaults, rest, { label: label, labelKey: labelKey }));
+});
+exports.ReqraftCodeSizeTag.displayName = 'ReqraftCodeSizeTag';
+//# sourceMappingURL=index.js.map

package/dist/components/codeSize/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/codeSize/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA2C;AAC3C,8DAA8D;AAC9D,EAAE;AACF,2EAA2E;AAC3E,0EAA0E;AAC1E,4EAA4E;AAC5E,0EAA0E;AAC1E,qEAAqE;AACrE,kCAAkC;AAElC,mDAAqD;AAErD,+BAA6B;AAS7B;;;;;;;GAOG;AACH,SAAgB,gBAAgB,CAAC,IAAY;IAC3C,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAChE,CAAC;AAFD,4CAEC;AAED,yDAAyD;AACzD,SAAgB,eAAe,CAAC,KAAa;IAC3C,OAAO,UAAG,KAAK,cAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAE,CAAC;AACtD,CAAC;AAFD,0CAEC;AAED,wDAAwD;AACxD,SAAgB,eAAe,CAAC,KAAa;IAC3C,OAAO,UAAG,KAAK,cAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAE,CAAC;AACtD,CAAC;AAFD,0CAEC;AAED;;;;GAIG;AACH,SAAgB,gBAAgB,CAAC,IAAY;IACrC,IAAA,KAAmB,gBAAgB,CAAC,IAAI,CAAC,EAAvC,KAAK,WAAA,EAAE,KAAK,WAA2B,CAAC;IAEhD,OAAO;QACL,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC;QAC7B,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC;KACjC,CAAC;AACJ,CAAC;AAXD,4CAWC;AAQD;;;GAGG;AACU,QAAA,kBAAkB,GAAG,IAAA,YAAI,EACpC,UAAC,EAA2C;IAAzC,IAAA,IAAI,UAAA,EAAK,IAAI,cAAf,QAAiB,CAAF;IACd,IAAM,KAAmC,gBAAgB,CAAC,IAAI,CAAC,EAAvD,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAK,QAAQ,cAA9B,qBAAgC,CAAyB,CAAC;IAEhE,OAAO,uBAAC,kBAAS,eAAK,QAAQ,EAAM,IAAI,IAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC;AACjF,CAAC,CACF,CAAC;AACF,0BAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC"}

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

@@ -1,9 +1,14 @@
 import { IQorusFormField } from '@qoretechnologies/ts-toolkit';
 import React from 'react';
-export declare const CompactRow: React.MemoExoticComponent<({ optionName, optionField, hidden, clustered, clusterFirst, clusterLast, }: {
+export declare const CompactRow: React.MemoExoticComponent<({ optionName, optionField, hidden, clustered, clusterFirst, clusterLast, absorbedFields, }: {
     optionName: string;
     optionField: IQorusFormField;
     hidden?: boolean;
+    /** Siblings this row renders inside its own container instead of leaving
+     *  them a row each — declared by the schema's `absorb_fields`. The pair it
+     *  exists for is a code editor and its language: one decision, so one
+     *  element. */
+    absorbedFields?: string[];
     clustered?: boolean;
     clusterFirst?: boolean;
     clusterLast?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"CompactRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/CompactRow.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAqC,MAAM,8BAA8B,CAAC;AAGlG,OAAO,KAAe,MAAM,OAAO,CAAC;AAgHpC,eAAO,MAAM,UAAU,yGAQlB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IAIjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,6CAi+CF,CAAC"}
+{"version":3,"file":"CompactRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/CompactRow.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,eAAe,EAIhB,MAAM,8BAA8B,CAAC;AAItC,OAAO,KAAe,MAAM,OAAO,CAAC;AAqHpC,eAAO,MAAM,UAAU,yHASlB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;mBAGe;IACf,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAI1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,6CAivDF,CAAC"}

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

@@ -33,6 +33,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)
@@ -62,6 +98,7 @@ 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 isEqual_1 = __importDefault(require("lodash/isEqual"));
 var size_1 = __importDefault(require("lodash/size"));
 var react_1 = __importStar(require("react"));
 var use_context_selector_1 = require("use-context-selector");
@@ -69,12 +106,15 @@ var validations_1 = require("../../../helpers/validations");
 var templates_1 = require("../../../helpers/templates");
 var common_1 = require("../../../helpers/common");
 var ReadOnlyTemplateTag_1 = require("../fields/template/ReadOnlyTemplateTag");
+var codeSize_1 = require("../../codeSize");
 var Description_1 = require("../../Description");
 var markdownRendererContext_1 = require("../../Description/markdownRendererContext");
 var FocusedEditing_1 = require("../../FocusedEditing");
 var compactRowContext_1 = require("./compactRowContext");
 var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
+var SchemaDataView_1 = require("./_structuredData/SchemaDataView");
+var fetch_1 = require("../../../utils/fetch");
 var readFirst_1 = require("./readFirst");
 var StructuredDataView_1 = require("./_structuredData/StructuredDataView");
 /**
@@ -140,11 +180,19 @@ var MAX_INLINE_OPTION_ACTIONS = 2;
 // activating the row adds the field first.
 exports.CompactRow = (0, react_1.memo)(function (_a) {
     var _b;
-    var _c, _d, _e, _f, _g, _h, _j;
-    var optionName = _a.optionName, optionField = _a.optionField, _k = _a.hidden, hidden = _k === void 0 ? false : _k, _l = _a.clustered, clustered = _l === void 0 ? false : _l, _m = _a.clusterFirst, clusterFirst = _m === void 0 ? false : _m, _o = _a.clusterLast, clusterLast = _o === void 0 ? false : _o;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var optionName = _a.optionName, optionField = _a.optionField, _o = _a.hidden, hidden = _o === void 0 ? false : _o, _p = _a.clustered, clustered = _p === void 0 ? false : _p, _q = _a.clusterFirst, clusterFirst = _q === void 0 ? false : _q, _r = _a.clusterLast, clusterLast = _r === void 0 ? false : _r, absorbedFields = _a.absorbedFields;
     var readOnly = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.readOnly; });
     var commitMode = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.commitMode; });
     var options = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.options; });
+    // An absorbed field keeps its own name — it is a different field, not a
+    // property of its host — so the label comes from its schema exactly as it
+    // would on its own row.
+    var getAbsorbedLabel = function (absorbedName) {
+        var _a;
+        return ((_a = options === null || options === void 0 ? void 0 : options[absorbedName]) === null || _a === void 0 ? void 0 : _a.display_name) ||
+            absorbedName;
+    };
     var codePreviewRenderer = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.codePreviewRenderer; });
     var markdownRenderer = (0, markdownRendererContext_1.useMarkdownRenderer)();
     var operators = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.operators; });
@@ -229,9 +277,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // 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') }));
+            // An absorbed sibling has no row of its own, so a COLLAPSED host has to
+            // carry its value or it disappears from the form entirely when closed.
+            // It reads as a chip beside the size chip — "Qore · 62 lines" — which
+            // is the same summary the read-only interface pages already show.
+            return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { gapSize: 'tiny', verticalAlign: 'center', wrap: true, children: [(absorbedFields !== null && absorbedFields !== void 0 ? absorbedFields : []).map(function (absorbedName) {
+                        var _a;
+                        var absorbedValue = (_a = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[absorbedName]) === null || _a === void 0 ? void 0 : _a.value;
+                        if (absorbedValue === undefined || absorbedValue === null || absorbedValue === '') {
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-absorbed-tag', size: 'small', minimal: true, label: String(absorbedValue), tooltip: getAbsorbedLabel(absorbedName) }, absorbedName));
+                    }), (0, jsx_runtime_1.jsx)(codeSize_1.ReqraftCodeSizeTag, { code: field.value })] }));
         }
         // Markdown read summary: the row prints the value's prose (the markdown
         // markers are stripped by `formatOptionValue`), so a multi-line document
@@ -306,14 +363,14 @@ exports.CompactRow = (0, react_1.memo)(function (_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 () {
+    var _s = 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];
+    }, [collapseOptionActions, injectedOptionActions]), inlineOptionActions = _s[0], menuOptionActions = _s[1];
     var injectedOptionActionMenuItems = react_1.default.useMemo(function () {
         return menuOptionActions.map(function (action, index) {
             var _a, _b;
@@ -424,6 +481,103 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         }, 60);
         return function () { return window.clearTimeout(id); };
     }, [isExpanded, optionName, autoFocusNameRef]);
+    // What the field held when it was opened — the baseline Cancel restores.
+    //
+    // Deliberately NOT `originalValue`, which is the whole form's load-time
+    // snapshot. That answers "undo every change ever made to this field", which
+    // is a different question from "forget what I just typed"; a Cancel sitting
+    // next to Done has to mean the second one, or it silently throws away edits
+    // the user made earlier and had already accepted.
+    //
+    // The dependency list is `isExpanded` alone on purpose: adding the value
+    // would re-take the snapshot on every keystroke, leaving nothing to cancel.
+    var editEntryValue = react_1.default.useRef(undefined);
+    react_1.default.useEffect(function () {
+        if (isExpanded) {
+            editEntryValue.current = { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, type: optionField === null || optionField === void 0 ? void 0 : optionField.type };
+        }
+        else {
+            editEntryValue.current = undefined;
+        }
+    }, [isExpanded]);
+    // True while the open editor holds something other than what it opened with.
+    var editedSinceOpened = isExpanded &&
+        !!editEntryValue.current &&
+        !(0, isEqual_1.default)(editEntryValue.current.value, optionField === null || optionField === void 0 ? void 0 : optionField.value);
+    // Discard whatever was typed since the field was opened and close it. Used
+    // by both the Cancel button and Escape, so the two cannot diverge.
+    var cancelEdit = react_1.default.useCallback(function () {
+        var snapshot = editEntryValue.current;
+        if (snapshot && !(0, isEqual_1.default)(snapshot.value, optionField === null || optionField === void 0 ? void 0 : optionField.value)) {
+            handleValueChange(optionName, snapshot.value, snapshot.type);
+        }
+        toggleExpandedOption(optionName);
+    }, [handleValueChange, optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName, toggleExpandedOption]);
+    // The sub-schema describing this field's value, when it has one. A value the
+    // form knows the shape of is previewed THROUGH that shape (see
+    // `SchemaDataView`); only genuinely undescribed data falls through to the
+    // untyped data tree.
+    //
+    // The server does NOT inline that sub-schema. `encodeFieldsForUi()` registers
+    // it and sends an id string in its place, which the consumer fetches back —
+    // exactly what AutoFormField does to build the editor ("Some arg schemas are
+    // not provided as objects, but as strings so we need to fetch them"). A
+    // preview that understood only the inline object therefore fell through to
+    // the untyped tree for every field a real server describes: the schema view
+    // worked against hand-written story fixtures and nowhere else.
+    //
+    // Resolved here rather than beside the preview it feeds: the preview renders
+    // below an early return, so a hook placed there would run conditionally.
+    var rawArgSchema = schema === null || schema === void 0 ? void 0 : schema.arg_schema;
+    var argSchemaId = typeof rawArgSchema === 'string' ? rawArgSchema : undefined;
+    var _t = react_1.default.useState(undefined), resolvedArgSchema = _t[0], setResolvedArgSchema = _t[1];
+    // Only worth a request when there is a described value to preview: a row whose
+    // value is unset or scalar renders no inset, so fetching its schema would buy
+    // a round trip per row and show nothing. `query` caches GETs, so rows sharing
+    // an id (every row of one list) cost one request between them.
+    var valueLooksStructured = !!(optionField === null || optionField === void 0 ? void 0 : optionField.value) && typeof optionField.value === 'object';
+    react_1.default.useEffect(function () {
+        if (!argSchemaId || !valueLooksStructured) {
+            return undefined;
+        }
+        var cancelled = false;
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, fetch_1.query)({
+                            url: "dataprovider/arg_schemas/".concat(argSchemaId),
+                            method: 'GET',
+                        })];
+                    case 1:
+                        response = _a.sent();
+                        // A failed fetch is not an error state here: the preview simply stays the
+                        // untyped tree, which is what it was before the schema view existed.
+                        if (!cancelled && response.ok) {
+                            setResolvedArgSchema(response.data);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            cancelled = true;
+        };
+    }, [argSchemaId, valueLooksStructured]);
+    var previewArgSchema = argSchemaId ? resolvedArgSchema : rawArgSchema;
+    var previewWithSchema = react_1.default.useMemo(function () { return (0, SchemaDataView_1.canRenderWithSchema)(optionField === null || optionField === void 0 ? void 0 : optionField.value, previewArgSchema); }, [optionField === null || optionField === void 0 ? void 0 : optionField.value, previewArgSchema]);
+    // The form-load revert: back to the value the FORM was loaded with.
+    //
+    // In an open editor this is offered only when it would do something
+    // `cancelEditButton` does not — that is, when the field was already
+    // modified BEFORE it was opened, so "undo this edit" and "undo every edit"
+    // are different answers. On the usual path (open an untouched field, type,
+    // change your mind) the two are identical, and two buttons with the same
+    // effect and different names are worse than one.
+    //
+    // It is unconditional on the READ row, where it renders inline in the
+    // status-dot column — there is no edit in progress there to cancel, so the
+    // whole-field revert is the only undo that makes sense.
     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;
@@ -469,6 +623,27 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         (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;
+    // Cancel — the counterpart to Done, and the answer to "how do I get out of
+    // here without keeping this". Done was the only way to leave an open field,
+    // so every way out committed: the check, clicking away, and Escape (which
+    // closed without discarding, so it committed too, silently).
+    //
+    // Shown only while there is something to discard. On an untouched field
+    // Cancel and Done would do exactly the same thing, and two buttons that
+    // differ in name but not in effect are worse than one.
+    //
+    // Not offered when the close action is passive (read-only, or a fixed
+    // choice) — nothing can have been typed, so there is nothing to cancel.
+    var cancelEditButton = !isPassiveCloseAction && editedSinceOpened ?
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-cancel', size: 'small', flat: true, fixed: true, icon: 'CloseLine', intent: 'warning', "aria-label": 'Cancel edit', tooltip: 'Cancel edit \u2014 discard the changes made since this field was opened', onClick: function (event) {
+                event.stopPropagation();
+                cancelEdit();
+            } })
+        : null;
+    // See `revertButton` above for why this is conditional in the edit row.
+    var openedWithFormLoadValue = !editEntryValue.current ||
+        (0, isEqual_1.default)(editEntryValue.current.value, (_f = (_e = originalValue.current) === null || _e === void 0 ? void 0 : _e[optionName]) === null || _f === void 0 ? void 0 : _f.value);
+    var editRowRevertButton = openedWithFormLoadValue ? null : revertButton;
     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 ⓘ.
@@ -541,7 +716,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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
     // member lights up the whole group via the shared highlight state.
-    var clusterGroup = clustered ? (_e = schema === null || schema === void 0 ? void 0 : schema.required_groups) === null || _e === void 0 ? void 0 : _e[0] : undefined;
+    var clusterGroup = clustered ? (_g = schema === null || schema === void 0 ? void 0 : schema.required_groups) === null || _g === void 0 ? void 0 : _g[0] : undefined;
     var clusterMembers = clusterGroup ? requiredGroupsInfo.members[clusterGroup] || [] : [];
     // The group is fulfilled once any member is set — the whole rail then reads
     // success (not just the satisfying node).
@@ -582,6 +757,27 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 },
             ]
             : []), true), injectedOptionActionMenuItems, true) }));
+    // The absorbed siblings' controls, rendered inside this row.
+    //
+    // Each keeps its own label so it is still identifiable — it is a different
+    // field, not a property of this one — but it sits inside this row's
+    // container, above the editor, so the pair reads as the single decision it
+    // is. `renderOption` is the same function the row uses for its own editor,
+    // so an absorbed field renders exactly as it would have on its own row.
+    var absorbedNodes = (absorbedFields === null || absorbedFields === void 0 ? void 0 : absorbedFields.length) ?
+        absorbedFields
+            .map(function (absorbedName) {
+            var absorbedField = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[absorbedName];
+            if (!absorbedField)
+                return null;
+            return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledAbsorbedField, { className: 'options-readfirst-absorbed', children: [(0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledAbsorbedLabel, { size: 'small', effect: { opacity: 0.6 }, children: getAbsorbedLabel(absorbedName) }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0, flex: 1 }, children: renderOption(absorbedName, absorbedField, 'small', true) })] }, absorbedName));
+        })
+            .filter(Boolean)
+        : null;
+    // Declared here rather than beside the hash rows below: the `isExpanded`
+    // branch returns before that point, and its editor needs to know whether it is
+    // holding code.
+    var valueType = (0, readFirst_1.getValueType)(optionField, schema);
     if (isExpanded) {
         if (inlineEditable) {
             var collapse_1 = function () { return toggleExpandedOption(optionName); };
@@ -596,12 +792,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                         (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) {
+                                : null] }), (0, jsx_runtime_1.jsxs)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
                                 event.stopPropagation();
-                                collapse_1();
+                                // Escape discards. It used to call `collapse()`, which closed
+                                // the field and KEPT whatever had been typed — the one
+                                // keystroke every editor treats as "get me out of this
+                                // without saving" was the quietest way to commit.
+                                cancelEdit();
                             }
-                        }, children: renderOption(optionName, optionField, 'small', true) }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, revertButton, clearValueButton, inlineOptionActions.map(function (action, index) {
+                        }, children: [absorbedNodes, valueType === 'code-editor' && typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' ?
+                                (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-editing-summary', children: (0, jsx_runtime_1.jsx)(codeSize_1.ReqraftCodeSizeTag, { code: optionField.value }) })
+                                : null, renderOption(optionName, optionField, 'small', true)] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, editRowRevertButton, cancelEditButton, 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
@@ -620,10 +822,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         var cardBadges = schemaBadge !== undefined && schemaBadge !== null ?
             (Array.isArray(schemaBadge) ? schemaBadge : [schemaBadge])
             : [];
-        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 cardActions = ((_h = schema === null || schema === void 0 ? void 0 : schema.actions) === null || _h === void 0 ? void 0 : _h.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) ?
-            (_g = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _g === void 0 ? void 0 : _g[schema.intent]
+            (_j = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _j === void 0 ? void 0 : _j[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'
@@ -652,7 +854,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                     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 ?
+                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (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));
     }
@@ -666,7 +868,6 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         : []), 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);
     var hashEntries = (!hidden &&
         (valueType === 'hash' || valueType === 'free-hash') &&
         (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition') ?
@@ -804,7 +1005,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) ?
-        (_h = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _h === void 0 ? void 0 : _h[schema.intent]
+        (_k = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _k === void 0 ? void 0 : _k[schema.intent]
         : undefined;
     var rowStripeColor = (showStripe ? intentColor : undefined) || rowSchemaIntentColor;
     // Intent stripe on the block ROOT so it spans the field's whole territory:
@@ -819,7 +1020,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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 cSuccess = (_l = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _l === void 0 ? void 0 : _l.success;
     var rowStatus = (0, readFirst_1.getReadFirstStatus)({
         empty: empty,
         required: required,
@@ -863,14 +1064,53 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                     !showMarkdownPreview &&
                     typeof formatted === 'string') ?
                     formatted
-                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [showMarkdownPreview ? null : ((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 ?
+                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [showMarkdownPreview || previewWithSchema ? null : ((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(); } }) }) }) })
+                        (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
+                            // The schema view spends more height per datum than a data tree
+                            // does — a labelled row rather than a packed chip — but there is
+                            // far less of it to read, so it gets enough room to show a
+                            // couple of complete items instead of fading out mid-row. A tree
+                            // of unknown depth keeps the tighter cap.
+                            , { 
+                                // The schema view spends more height per datum than a data tree
+                                // does — a labelled row rather than a packed chip — but there is
+                                // far less of it to read, so it gets enough room to show a
+                                // couple of complete items instead of fading out mid-row. A tree
+                                // of unknown depth keeps the tighter cap.
+                                maxCollapsedHeight: previewWithSchema ? 140 : 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-structured', children: previewWithSchema ?
+                                        // The form already knows this value's shape, names and
+                                        // choices, so the preview says it rather than making the
+                                        // reader decode it: "Scheme Type — Default RBAC", not a data
+                                        // tree announcing "Object · 1 field" over `type: default`.
+                                        (0, jsx_runtime_1.jsx)(SchemaDataView_1.SchemaDataView, { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, schema: previewArgSchema, showTypes: showFieldTypes, colors: {
+                                                key: cKey,
+                                                muted: cMuted,
+                                                // Deliberately stronger than `cDivider`. That tier is for
+                                                // decorative hairlines between rows, where being nearly
+                                                // invisible is the point. This rule is load-bearing — it
+                                                // is the only thing saying which fields belong to which
+                                                // numbered item — so it gets the muted tier at partial
+                                                // alpha: quiet, but actually visible.
+                                                border: "".concat(cMuted, "66"),
+                                                // The identity accent for each item's heading.
+                                                //
+                                                // `custom1` first: BRAND_DESIGN §1 says apps may register
+                                                // their own named intents and reference them like the
+                                                // built-ins, and that is where a product's own accent
+                                                // lives (qorus-ide registers its brand purple there).
+                                                // Falling back to `info` keeps this working for a
+                                                // consumer that registers nothing — the heading is
+                                                // accented either way, just in the theme's own colour
+                                                // rather than one this library picked.
+                                                accent: ((_m = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _m === void 0 ? void 0 : _m.custom1) || cInfo,
+                                            }, onItemClick: function () { return activate(); } })
+                                        : (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: codePreviewRenderer ?
                                     codePreviewRenderer({