@qoretechnologies/reqore 0.69.4 → 0.70.0

package/dist/components/DataView/index.js

@@ -71,7 +71,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reqoreUnwrapEnvelope = exports.reqoreIsRecord = exports.reqoreIsEnvelope = exports.reqoreHasStructuredValue = exports.reqoreFormatScalar = exports.reqoreEnvelopeType = exports.reqoreDataValueKind = exports.reqoreDataValueIntent = exports.DEFAULT_ENVELOPE = exports.ReqoreDataView = void 0;
+exports.reqoreUnwrapEnvelope = exports.reqoreSetAtPath = exports.reqoreRenameKeyAtPath = exports.reqoreIsRecord = exports.reqoreIsEnvelope = exports.reqoreHasStructuredValue = exports.reqoreFormatScalar = exports.reqoreEnvelopeType = exports.reqoreDeleteAtPath = exports.reqoreDataValueKind = exports.reqoreDataValueIntent = exports.reqoreCoerceValueToKind = exports.DEFAULT_ENVELOPE = exports.ReqoreDataView = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * `ReqoreDataView` — render a structured value (record / array / scalar)
@@ -110,7 +110,11 @@ var styled_components_1 = __importStar(require("styled-components"));
 var sizes_1 = require("../../constants/sizes");
 var colors_1 = require("../../helpers/colors");
 var useTheme_1 = require("../../hooks/useTheme");
+var Button_1 = __importDefault(require("../Button"));
+var Checkbox_1 = __importDefault(require("../Checkbox"));
 var ControlGroup_1 = __importDefault(require("../ControlGroup"));
+var Dropdown_1 = __importDefault(require("../Dropdown"));
+var Input_1 = __importDefault(require("../Input"));
 var Paragraph_1 = require("../Paragraph");
 var Panel_1 = require("../Panel");
 var Tag_1 = __importDefault(require("../Tag"));
@@ -144,11 +148,26 @@ var TableShell = styled_components_1.default.div(templateObject_2 || (templateOb
     var $nested = _a.$nested;
     return $nested ? 'rgba(0, 0, 0, 0.45)' : 'rgba(0, 0, 0, 0.15)';
 });
-var Row = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: ", "px;\n  align-items: start;\n  min-width: 0;\n  padding: ", "px ", "px;\n  /* Zebra striping. The stripe tint is derived from the *text* colour\n     (the high-contrast colour relative to the panel surface) \u2014 that\n     way an alpha lift produces a visible stripe regardless of whether\n     the theme is light, dark, or custom. Painting against theme.main\n     directly is invisible on a panel whose background is also\n     theme.main. */\n  background: ", ";\n  border-bottom: 1px solid\n    ", ";\n\n  &:last-child {\n    border-bottom: 0;\n  }\n\n  ", "\n\n  /* The key chip's grid behaviour, applied universally \u2014 covers\n     two-column rows, complex-value rows AND stacked (narrow\n     container) rows in one set of rules:\n     - `justify-self: start` stops the grid's default\n       `justify-items: stretch` from expanding the chip to fill the\n       full grid cell. The chip sizes to its content instead, only\n       hitting the column cap when content actually needs it.\n     - `min-width: 0` releases ReqoreTag's intrinsic min-content size\n       (its longest unbreakable run) so the grid track can honour\n       its `minmax(..., 220px)` cap. Without this, snake_case keys\n       or UUIDs feed back into the track sizing and expand the\n       column past 220px. */\n  & > .reqore-data-view-key {\n    justify-self: start;\n    min-width: 0;\n    max-width: 100%;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: ", "px;\n  align-items: start;\n  min-width: 0;\n  padding: ", "px ", "px;\n  /* Zebra striping. The stripe tint is derived from the *text* colour\n     (the high-contrast colour relative to the panel surface) \u2014 that\n     way an alpha lift produces a visible stripe regardless of whether\n     the theme is light, dark, or custom. Painting against theme.main\n     directly is invisible on a panel whose background is also\n     theme.main. */\n  background: ", ";\n  border-bottom: 1px solid\n    ", ";\n\n  &:last-child {\n    border-bottom: 0;\n  }\n\n  ", "\n\n  /* The key chip's grid behaviour, applied universally \u2014 covers\n     two-column rows, complex-value rows AND stacked (narrow\n     container) rows in one set of rules:\n     - \\`justify-self: start\\` stops the grid's default\n       \\`justify-items: stretch\\` from expanding the chip to fill the\n       full grid cell. The chip sizes to its content instead, only\n       hitting the column cap when content actually needs it.\n     - \\`min-width: 0\\` releases ReqoreTag's intrinsic min-content size\n       (its longest unbreakable run) so the grid track can honour\n       its \\`minmax(..., 220px)\\` cap. Without this, snake_case keys\n       or UUIDs feed back into the track sizing and expand the\n       column past 220px. */\n  & > .reqore-data-view-key {\n    justify-self: start;\n    min-width: 0;\n    max-width: 100%;\n  }\n"])), function (_a) {
-    var $complex = _a.$complex, $stacked = _a.$stacked;
-    return $complex || $stacked
+var Row = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: grid;\n  /* Grid columns + named areas together so children land in fixed\n     cells regardless of how many children render. Without\n     grid-template-areas, a 3-child row (key + value + actions) in a\n     2-column grid would auto-place the value into the actions\n     column. */\n  grid-template-columns: ", ";\n  grid-template-areas: ", ";\n\n  & > .reqore-data-view-key,\n  & > .reqore-data-view-key-edit-group {\n    grid-area: key;\n  }\n  & > .reqore-data-view-value-cell {\n    grid-area: value;\n  }\n  & > .reqore-data-view-row-actions {\n    grid-area: actions;\n  }\n  gap: ", "px;\n  align-items: start;\n  min-width: 0;\n  padding: ", "px ", "px;\n  /* Zebra striping. The stripe tint is derived from the *text* colour\n     (the high-contrast colour relative to the panel surface) \u2014 that\n     way an alpha lift produces a visible stripe regardless of whether\n     the theme is light, dark, or custom. Painting against theme.main\n     directly is invisible on a panel whose background is also\n     theme.main. */\n  background: ", ";\n  border-bottom: 1px solid\n    ", ";\n\n  &:last-child {\n    border-bottom: 0;\n  }\n\n  ", "\n\n  /* The key chip's grid behaviour, applied universally \u2014 covers\n     two-column rows, complex-value rows AND stacked (narrow\n     container) rows in one set of rules:\n     - `justify-self: start` stops the grid's default\n       `justify-items: stretch` from expanding the chip to fill the\n       full grid cell. The chip sizes to its content instead, only\n       hitting the column cap when content actually needs it.\n     - `min-width: 0` releases ReqoreTag's intrinsic min-content size\n       (its longest unbreakable run) so the grid track can honour\n       its `minmax(..., 220px)` cap. Without this, snake_case keys\n       or UUIDs feed back into the track sizing and expand the\n       column past 220px. */\n  & > .reqore-data-view-key {\n    justify-self: start;\n    min-width: 0;\n    max-width: 100%;\n  }\n"], ["\n  display: grid;\n  /* Grid columns + named areas together so children land in fixed\n     cells regardless of how many children render. Without\n     grid-template-areas, a 3-child row (key + value + actions) in a\n     2-column grid would auto-place the value into the actions\n     column. */\n  grid-template-columns: ", ";\n  grid-template-areas: ", ";\n\n  & > .reqore-data-view-key,\n  & > .reqore-data-view-key-edit-group {\n    grid-area: key;\n  }\n  & > .reqore-data-view-value-cell {\n    grid-area: value;\n  }\n  & > .reqore-data-view-row-actions {\n    grid-area: actions;\n  }\n  gap: ", "px;\n  align-items: start;\n  min-width: 0;\n  padding: ", "px ", "px;\n  /* Zebra striping. The stripe tint is derived from the *text* colour\n     (the high-contrast colour relative to the panel surface) \u2014 that\n     way an alpha lift produces a visible stripe regardless of whether\n     the theme is light, dark, or custom. Painting against theme.main\n     directly is invisible on a panel whose background is also\n     theme.main. */\n  background: ", ";\n  border-bottom: 1px solid\n    ", ";\n\n  &:last-child {\n    border-bottom: 0;\n  }\n\n  ", "\n\n  /* The key chip's grid behaviour, applied universally \u2014 covers\n     two-column rows, complex-value rows AND stacked (narrow\n     container) rows in one set of rules:\n     - \\`justify-self: start\\` stops the grid's default\n       \\`justify-items: stretch\\` from expanding the chip to fill the\n       full grid cell. The chip sizes to its content instead, only\n       hitting the column cap when content actually needs it.\n     - \\`min-width: 0\\` releases ReqoreTag's intrinsic min-content size\n       (its longest unbreakable run) so the grid track can honour\n       its \\`minmax(..., 220px)\\` cap. Without this, snake_case keys\n       or UUIDs feed back into the track sizing and expand the\n       column past 220px. */\n  & > .reqore-data-view-key {\n    justify-self: start;\n    min-width: 0;\n    max-width: 100%;\n  }\n"])), function (_a) {
+    var $complex = _a.$complex, $stacked = _a.$stacked, $editable = _a.$editable;
+    var stacked = $complex || $stacked;
+    if ($editable) {
+        return stacked
+            ? 'minmax(0, 1fr) auto'
+            : 'minmax(120px, min(34%, 220px)) minmax(0, 1fr) auto';
+    }
+    return stacked
         ? 'minmax(0, 1fr)'
         : 'minmax(120px, min(34%, 220px)) minmax(0, 1fr)';
+}, function (_a) {
+    var $complex = _a.$complex, $stacked = _a.$stacked, $editable = _a.$editable;
+    var stacked = $complex || $stacked;
+    if ($editable) {
+        return stacked
+            ? "'key actions' 'value value'"
+            : "'key value actions'";
+    }
+    return stacked ? "'key' 'value'" : "'key value'";
 }, function (_a) {
     var $size = _a.$size, $complex = _a.$complex, $stacked = _a.$stacked;
     return $complex || $stacked ? sizes_1.GAP_FROM_SIZE[$size] : 8;
@@ -179,7 +198,7 @@ var ArrayStack = styled_components_1.default.div(templateObject_7 || (templateOb
     var $size = _a.$size;
     return sizes_1.GAP_FROM_SIZE[$size];
 });
-var ArrayItem = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  /* More left padding than the other three sides so the item index\n     and contents read as visually inset under the parent \u2014 mirrors\n     the IDE pattern of \"nested = inset\". */\n  padding: ", "px\n    ", "px\n    ", "px\n    ", "px;\n  /* Same depth model as nested TableShell \u2014 darker overlay, neutral\n     hairline border on three sides + a slightly more visible accent\n     on the left edge to read as a nested chunk. */\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: ", "px;\n  /* Same depth as a nested TableShell (0.45) \u2014 an array item *is* a\n     nested chunk. */\n  background: rgba(0, 0, 0, 0.45);\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  /* More left padding than the other three sides so the item index\n     and contents read as visually inset under the parent \u2014 mirrors\n     the IDE pattern of \"nested = inset\". */\n  padding: ", "px\n    ", "px\n    ", "px\n    ", "px;\n  /* Same depth model as nested TableShell \u2014 darker overlay, neutral\n     hairline border on three sides + a slightly more visible accent\n     on the left edge to read as a nested chunk. */\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: ", "px;\n  /* Same depth as a nested TableShell (0.45) \u2014 an array item *is* a\n     nested chunk. */\n  background: rgba(0, 0, 0, 0.45);\n"])), function (_a) {
+var ArrayItem = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  /* Two-column flex layout: content (index + value) on the left,\n     hover-revealed action cell on the right. Keeps the actions\n     properly inside the item's bounds instead of leaning on absolute\n     positioning. */\n  display: flex;\n  flex-flow: row;\n  align-items: start;\n  gap: 8px;\n  /* More left padding than the other three sides so the item index\n     and contents read as visually inset under the parent \u2014 mirrors\n     the IDE pattern of \"nested = inset\". */\n  padding: ", "px\n    ", "px\n    ", "px\n    ", "px;\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: ", "px;\n  background: rgba(0, 0, 0, 0.45);\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  /* Two-column flex layout: content (index + value) on the left,\n     hover-revealed action cell on the right. Keeps the actions\n     properly inside the item's bounds instead of leaning on absolute\n     positioning. */\n  display: flex;\n  flex-flow: row;\n  align-items: start;\n  gap: 8px;\n  /* More left padding than the other three sides so the item index\n     and contents read as visually inset under the parent \u2014 mirrors\n     the IDE pattern of \"nested = inset\". */\n  padding: ", "px\n    ", "px\n    ", "px\n    ", "px;\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: ", "px;\n  background: rgba(0, 0, 0, 0.45);\n"])), function (_a) {
     var $size = _a.$size;
     return sizes_1.PADDING_FROM_SIZE[$size];
 }, function (_a) {
@@ -201,7 +220,11 @@ var ArrayItem = styled_components_1.default.div(templateObject_8 || (templateObj
     var $size = _a.$size;
     return sizes_1.RADIUS_FROM_SIZE[$size];
 });
-var ArrayItemIndex = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-block;\n  margin-bottom: ", "px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11px;\n  opacity: 0.78;\n"], ["\n  display: inline-block;\n  margin-bottom: ", "px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11px;\n  opacity: 0.78;\n"])), function (_a) {
+/** Content column for an array item — wraps the item's index +
+ *  rendered value so the flex row's other cell (the action group)
+ *  sits to the right without competing for width. */
+var ArrayItemContent = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex: 1 1 auto;\n  min-width: 0;\n"], ["\n  flex: 1 1 auto;\n  min-width: 0;\n"])));
+var ArrayItemIndex = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-block;\n  margin-bottom: ", "px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11px;\n  opacity: 0.78;\n"], ["\n  display: inline-block;\n  margin-bottom: ", "px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: 11px;\n  opacity: 0.78;\n"])), function (_a) {
     var $size = _a.$size;
     return sizes_1.GAP_FROM_SIZE[$size];
 }, function (_a) {
@@ -211,12 +234,12 @@ var ArrayItemIndex = styled_components_1.default.span(templateObject_9 || (templ
     var $theme = _a.$theme;
     return (0, colors_1.getReadableColor)($theme);
 }, MONO_FONT);
-var ScalarRow = (0, styled_components_1.default)(ControlGroup_1.default)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  flex-wrap: wrap;\n"], ["\n  flex-wrap: wrap;\n"])));
-var SectionDetails = styled_components_1.default.details(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n\n  &[open] > summary {\n    margin-bottom: ", "px;\n  }\n"], ["\n  min-width: 0;\n  max-width: 100%;\n\n  &[open] > summary {\n    margin-bottom: ", "px;\n  }\n"])), function (_a) {
+var ScalarRow = (0, styled_components_1.default)(ControlGroup_1.default)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex-wrap: wrap;\n"], ["\n  flex-wrap: wrap;\n"])));
+var SectionDetails = styled_components_1.default.details(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n\n  &[open] > summary {\n    margin-bottom: ", "px;\n  }\n"], ["\n  min-width: 0;\n  max-width: 100%;\n\n  &[open] > summary {\n    margin-bottom: ", "px;\n  }\n"])), function (_a) {
     var $size = _a.$size;
     return sizes_1.GAP_FROM_SIZE[$size];
 });
-var SectionSummary = styled_components_1.default.summary(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  cursor: pointer;\n  user-select: none;\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 700;\n  /* Section labels MUST stay readable \u2014 they're the only way the\n     operator knows what's nested below. We derive a high-contrast\n     colour from the panel's surface instead of falling back to\n     theme.main, which would be the SAME colour as the panel\n     background on most themes (invisible). */\n  color: ", ";\n  opacity: 0.85;\n  transition: opacity 0.15s ease-out;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &::before {\n    content: '\u25B8';\n    display: inline-block;\n    transition: transform 0.15s ease-out;\n    transform-origin: 50% 50%;\n  }\n\n  ", "[open] > &::before {\n    transform: rotate(90deg);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  cursor: pointer;\n  user-select: none;\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 700;\n  /* Section labels MUST stay readable \u2014 they're the only way the\n     operator knows what's nested below. We derive a high-contrast\n     colour from the panel's surface instead of falling back to\n     theme.main, which would be the SAME colour as the panel\n     background on most themes (invisible). */\n  color: ", ";\n  opacity: 0.85;\n  transition: opacity 0.15s ease-out;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &::before {\n    content: '\u25B8';\n    display: inline-block;\n    transition: transform 0.15s ease-out;\n    transform-origin: 50% 50%;\n  }\n\n  ", "[open] > &::before {\n    transform: rotate(90deg);\n  }\n"])), MONO_FONT, function (_a) {
+var SectionSummary = styled_components_1.default.summary(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  cursor: pointer;\n  user-select: none;\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 700;\n  /* Section labels MUST stay readable \u2014 they're the only way the\n     operator knows what's nested below. We derive a high-contrast\n     colour from the panel's surface instead of falling back to\n     theme.main, which would be the SAME colour as the panel\n     background on most themes (invisible). */\n  color: ", ";\n  opacity: 0.85;\n  transition: opacity 0.15s ease-out;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &::before {\n    content: '\u25B8';\n    display: inline-block;\n    transition: transform 0.15s ease-out;\n    transform-origin: 50% 50%;\n  }\n\n  ", "[open] > &::before {\n    transform: rotate(90deg);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  cursor: pointer;\n  user-select: none;\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: 700;\n  /* Section labels MUST stay readable \u2014 they're the only way the\n     operator knows what's nested below. We derive a high-contrast\n     colour from the panel's surface instead of falling back to\n     theme.main, which would be the SAME colour as the panel\n     background on most themes (invisible). */\n  color: ", ";\n  opacity: 0.85;\n  transition: opacity 0.15s ease-out;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &::before {\n    content: '\u25B8';\n    display: inline-block;\n    transition: transform 0.15s ease-out;\n    transform-origin: 50% 50%;\n  }\n\n  ", "[open] > &::before {\n    transform: rotate(90deg);\n  }\n"])), MONO_FONT, function (_a) {
     var $size = _a.$size;
     return sizes_1.TEXT_FROM_SIZE[$size] - 2;
 }, function (_a) {
@@ -291,6 +314,347 @@ var PreservedDetails = (0, react_1.memo)(function (_a) {
     return ((0, jsx_runtime_1.jsxs)(SectionDetails, { "$size": size, "$theme": theme, open: open, children: [(0, jsx_runtime_1.jsx)(SectionSummary, { ref: summaryRef, "$size": size, "$theme": theme, role: 'button', "aria-expanded": open, tabIndex: 0, onClick: onSummaryClick, onKeyDown: onSummaryKey, children: label }), children] }));
 });
 PreservedDetails.displayName = 'ReqoreDataView.PreservedDetails';
+/** Render the read-only value chip for a scalar leaf. Extracted so
+ *  both the read-only view and the click-to-edit cell share one
+ *  rendering — keeps the "before / after" look of an edited row
+ *  perfectly aligned with rows you can't edit. */
+var renderScalarChip = function (value, type, ctx, path) {
+    var scalar = (0, helpers_1.reqoreFormatScalar)(value, type, ctx.scalarOptions);
+    var kind = type ? (0, helpers_1.reqoreDataValueKind)(value, type) : scalar.kind;
+    var intent = (0, helpers_1.reqoreDataValueIntent)(kind);
+    return ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, flat: false, minimal: true, wrap: true, label: scalar.display, intent: intent, effect: { weight: 'bold' }, onClick: ctx.onItemClick ? function () { return ctx.onItemClick(value, path); } : undefined, className: 'reqore-data-view-value' }));
+};
+var EditCellShell = styled_components_1.default.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  max-width: 100%;\n  cursor: ", ";\n\n  /* Subtle hover hint on the chip so operators know it's clickable \u2014\n     without shouting. The chip itself doesn't gain border / shadow;\n     we just lift its outline a hair. */\n  &:not([data-editing='true']):hover .reqore-data-view-value {\n    outline: 1px dashed\n      ", ";\n    outline-offset: 1px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  max-width: 100%;\n  cursor: ", ";\n\n  /* Subtle hover hint on the chip so operators know it's clickable \u2014\n     without shouting. The chip itself doesn't gain border / shadow;\n     we just lift its outline a hair. */\n  &:not([data-editing='true']):hover .reqore-data-view-value {\n    outline: 1px dashed\n      ", ";\n    outline-offset: 1px;\n  }\n"])), function (_a) {
+    var $editing = _a.$editing;
+    return ($editing ? 'text' : 'pointer');
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme), 0.35);
+});
+var initialDraftFor = function (value, k) {
+    if (k === 'boolean')
+        return value === true;
+    return value === null || value === undefined ? '' : String(value);
+};
+var EditableScalarCell = (0, react_1.memo)(function (_a) {
+    var _b;
+    var value = _a.value, kind = _a.kind, type = _a.type, ctx = _a.ctx, path = _a.path;
+    var commit = ctx.commitScalar;
+    var isNumber = kind === 'number';
+    var isBoolean = kind === 'boolean';
+    var _c = (0, react_1.useState)(false), editing = _c[0], setEditing = _c[1];
+    var _d = (0, react_1.useState)(initialDraftFor(value, kind)), draft = _d[0], setDraft = _d[1];
+    var inputRef = (0, react_1.useRef)(null);
+    // Re-sync the local draft when the prop value or kind changes
+    // externally. Editing keeps its own draft until commit/cancel.
+    (0, react_1.useLayoutEffect)(function () {
+        if (editing)
+            return;
+        setDraft(initialDraftFor(value, kind));
+    }, [value, kind, editing]);
+    // Focus the input when entering edit mode (text / number cells
+    // only — boolean's checkbox is keyboard-accessible by tab).
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        if (!editing || isBoolean)
+            return;
+        var node = inputRef.current;
+        if (!node)
+            return;
+        node.focus();
+        (_a = node.select) === null || _a === void 0 ? void 0 : _a.call(node);
+    }, [editing, isBoolean]);
+    var startEditing = (0, react_1.useCallback)(function () {
+        if (!commit)
+            return;
+        setDraft(initialDraftFor(value, kind));
+        setEditing(true);
+    }, [commit, kind, value]);
+    var cancelEditing = (0, react_1.useCallback)(function () {
+        setDraft(initialDraftFor(value, kind));
+        setEditing(false);
+    }, [kind, value]);
+    var commitDraft = (0, react_1.useCallback)(function () {
+        if (!commit) {
+            setEditing(false);
+            return;
+        }
+        if (isBoolean) {
+            commit(path, draft === true);
+            setEditing(false);
+            return;
+        }
+        var text = typeof draft === 'string' ? draft : '';
+        if (isNumber) {
+            if (text.trim() === '') {
+                commit(path, null);
+                setEditing(false);
+                return;
+            }
+            var parsed = Number(text);
+            if (Number.isNaN(parsed)) {
+                cancelEditing();
+                return;
+            }
+            commit(path, parsed);
+            setEditing(false);
+            return;
+        }
+        // String / null cells. An empty edit on a null leaf is a no-op
+        // (don't accidentally upgrade null → empty string).
+        if (text === '' && (value === null || value === undefined)) {
+            setEditing(false);
+            return;
+        }
+        commit(path, text);
+        setEditing(false);
+    }, [cancelEditing, commit, draft, isBoolean, isNumber, path, value]);
+    if (!editing) {
+        return ((0, jsx_runtime_1.jsx)(EditCellShell, { "data-editing": 'false', onClick: function (e) {
+                e.stopPropagation();
+                startEditing();
+            }, onKeyDown: function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    startEditing();
+                }
+            }, role: 'button', tabIndex: 0, "aria-label": 'Edit value', children: renderScalarChip(value, type, ctx, path) }));
+    }
+    // Inline type-change. Coerces the CURRENT DRAFT (in its
+    // canonical form for the current kind — string for text/numeric
+    // inputs, boolean for the checkbox) to the picked kind. A user
+    // who has typed `42` and then realises they meant Number keeps
+    // the `42` they typed; a user who has clicked the checkbox `on`
+    // and switches to String gets `"true"`.
+    //
+    // Picking `string` / `number` / `boolean` keeps the cell in edit
+    // mode and re-initialises the draft to the coerced value (so the
+    // input swap doesn't visually drop the user's intent). Picking
+    // `object` / `array` / `null` commits the coerced value and
+    // exits so the right control takes over (structural view / "—"
+    // chip).
+    var handlePickType = function (newKind) {
+        var _a;
+        if (newKind === kind)
+            return;
+        var coerced = (0, helpers_1.reqoreCoerceValueToKind)(draft, newKind);
+        (_a = ctx.commitTypeChange) === null || _a === void 0 ? void 0 : _a.call(ctx, path, newKind);
+        if (newKind === 'string' || newKind === 'number') {
+            setDraft(coerced === null || coerced === undefined ? '' : String(coerced));
+        }
+        else if (newKind === 'boolean') {
+            setDraft(coerced === true);
+        }
+        else {
+            setEditing(false);
+        }
+    };
+    var currentTypeItem = TYPE_PICKER_ITEMS.find(function (entry) { return entry.kind === kind; });
+    return ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, className: 'reqore-data-view-edit-group', children: [isBoolean ? ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: draft === true, size: ctx.size, 
+                // Toggle the LOCAL draft only — Save commits, Cancel
+                // discards. Keeps the edit semantics identical to
+                // text/number cells.
+                onClick: function () { return setDraft(!(draft === true)); }, className: 'reqore-data-view-edit-bool' })) : ((0, jsx_runtime_1.jsx)(Input_1.default, { size: ctx.size, type: isNumber ? 'number' : 'text', value: typeof draft === 'string' ? draft : '', ref: (function (node) {
+                    if (node instanceof HTMLElement) {
+                        inputRef.current = node.querySelector('input');
+                    }
+                }), onChange: function (event) {
+                    return setDraft(event.target.value);
+                }, onBlur: commitDraft, onKeyDown: function (event) {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        commitDraft();
+                    }
+                    else if (event.key === 'Escape') {
+                        event.preventDefault();
+                        cancelEditing();
+                    }
+                }, className: 'reqore-data-view-edit' })), ctx.commitTypeChange ? ((0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: ctx.size, icon: (_b = currentTypeItem === null || currentTypeItem === void 0 ? void 0 : currentTypeItem.icon) !== null && _b !== void 0 ? _b : 'TextWrap', tooltip: 'Change type', className: 'reqore-data-view-edit-type', items: TYPE_PICKER_ITEMS.map(function (entry) { return ({
+                    label: entry.label,
+                    icon: entry.icon,
+                    selected: entry.kind === kind,
+                    onClick: function () { return handlePickType(entry.kind); },
+                }); }) })) : null, (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'CheckLine', intent: 'success', flat: true, minimal: true, tooltip: 'Save (Enter)', onMouseDown: function (e) {
+                    e.preventDefault();
+                    commitDraft();
+                }, className: 'reqore-data-view-edit-commit' }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'CloseLine', flat: true, minimal: true, tooltip: 'Cancel (Esc)', onMouseDown: function (e) {
+                    e.preventDefault();
+                    cancelEditing();
+                }, className: 'reqore-data-view-edit-cancel' })] }));
+});
+EditableScalarCell.displayName = 'ReqoreDataView.EditableScalarCell';
+var EditableKeyCell = (0, react_1.memo)(function (_a) {
+    var _b;
+    var keyName = _a.keyName, siblingKeys = _a.siblingKeys, parentPath = _a.parentPath, ctx = _a.ctx;
+    var commit = ctx.commitRename;
+    var _c = (0, react_1.useState)(false), editing = _c[0], setEditing = _c[1];
+    var _d = (0, react_1.useState)(keyName), draft = _d[0], setDraft = _d[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(function () {
+        if (editing)
+            return;
+        setDraft(keyName);
+    }, [keyName, editing]);
+    (0, react_1.useLayoutEffect)(function () {
+        var _a;
+        if (!editing)
+            return;
+        var node = inputRef.current;
+        if (!node)
+            return;
+        node.focus();
+        (_a = node.select) === null || _a === void 0 ? void 0 : _a.call(node);
+    }, [editing]);
+    var start = (0, react_1.useCallback)(function () {
+        if (!commit)
+            return;
+        setDraft(keyName);
+        setEditing(true);
+    }, [commit, keyName]);
+    var cancel = (0, react_1.useCallback)(function () {
+        setDraft(keyName);
+        setEditing(false);
+    }, [keyName]);
+    var submit = (0, react_1.useCallback)(function () {
+        var trimmed = draft.trim();
+        if (!commit || !trimmed || trimmed === keyName) {
+            cancel();
+            return;
+        }
+        if (siblingKeys.includes(trimmed)) {
+            cancel();
+            return;
+        }
+        commit(parentPath, keyName, trimmed);
+        setEditing(false);
+    }, [cancel, commit, draft, keyName, parentPath, siblingKeys]);
+    if (!editing) {
+        return ((0, jsx_runtime_1.jsx)(EditCellShell, { "data-editing": 'false', onClick: function (e) {
+                e.stopPropagation();
+                start();
+            }, role: 'button', tabIndex: 0, "aria-label": 'Rename key', children: (0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, flat: false, minimal: true, wrap: true, intent: ctx.keyIntent === null ? undefined : (_b = ctx.keyIntent) !== null && _b !== void 0 ? _b : 'info', color: ctx.keyColor, label: keyName, effect: { weight: 'bold' }, className: 'reqore-data-view-key' }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(ControlGroup_1.default, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, className: 'reqore-data-view-key-edit-group', children: [(0, jsx_runtime_1.jsx)(Input_1.default, { size: ctx.size, value: draft, ref: (function (node) {
+                    if (node instanceof HTMLElement) {
+                        inputRef.current = node.querySelector('input');
+                    }
+                }), onChange: function (e) {
+                    return setDraft(e.target.value);
+                }, onBlur: submit, onKeyDown: function (e) {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        submit();
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        cancel();
+                    }
+                }, className: 'reqore-data-view-key-edit' }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'CheckLine', intent: 'success', flat: true, minimal: true, tooltip: 'Rename (Enter)', onMouseDown: function (e) {
+                    e.preventDefault();
+                    submit();
+                }, className: 'reqore-data-view-key-edit-commit' }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'CloseLine', flat: true, minimal: true, tooltip: 'Cancel (Esc)', onMouseDown: function (e) {
+                    e.preventDefault();
+                    cancel();
+                }, className: 'reqore-data-view-key-edit-cancel' })] }));
+});
+EditableKeyCell.displayName = 'ReqoreDataView.EditableKeyCell';
+/** Hover-revealed row action group — currently the delete button.
+ *  Renders as a normal grid cell at the trailing edge of each row so
+ *  it always sits cleanly inside the row's bounds (no absolute
+ *  positioning, no overflow past the panel's rounded corner). The
+ *  group's `opacity` is `0` by default and promoted to `1` on row
+ *  hover via the parent `Row`'s `:hover` rule. The cell itself stays
+ *  in the layout so the row width doesn't jump as the user hovers. */
+var RowActionsContainer = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  /* Pad the action cell off the row's right edge a touch so the button\n     doesn't kiss the panel's rounded corner. */\n  padding-right: 2px;\n  opacity: 0;\n  transition: opacity 0.12s ease-out;\n  pointer-events: none;\n\n  .reqore-data-view-row:hover & {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Keep the actions visible when any child is focused (keyboard\n     navigation must reveal them too). */\n  &:focus-within {\n    opacity: 1;\n    pointer-events: auto;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  /* Pad the action cell off the row's right edge a touch so the button\n     doesn't kiss the panel's rounded corner. */\n  padding-right: 2px;\n  opacity: 0;\n  transition: opacity 0.12s ease-out;\n  pointer-events: none;\n\n  .reqore-data-view-row:hover & {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* Keep the actions visible when any child is focused (keyboard\n     navigation must reveal them too). */\n  &:focus-within {\n    opacity: 1;\n    pointer-events: auto;\n  }\n"])));
+var RowActions = (0, react_1.memo)(function (_a) {
+    var ctx = _a.ctx, path = _a.path, ariaLabel = _a.ariaLabel;
+    if (!ctx.commitDelete)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(RowActionsContainer, { className: 'reqore-data-view-row-actions', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'DeleteBin6Line', flat: true, minimal: true, tooltip: ariaLabel, intent: 'danger', onClick: function () { return ctx.commitDelete(path); }, className: 'reqore-data-view-row-delete' }) }));
+});
+RowActions.displayName = 'ReqoreDataView.RowActions';
+/** Default value for a new entry of the picked type. */
+var defaultForKind = function (kind) {
+    switch (kind) {
+        case 'string':
+            return '';
+        case 'number':
+            return 0;
+        case 'boolean':
+            return false;
+        case 'object':
+            return {};
+        case 'array':
+            return [];
+        case 'null':
+        default:
+            return null;
+    }
+};
+var TYPE_PICKER_ITEMS = [
+    { kind: 'string', label: 'String', icon: 'TextWrap' },
+    { kind: 'number', label: 'Number', icon: 'Hashtag' },
+    { kind: 'boolean', label: 'Boolean', icon: 'CheckboxLine' },
+    { kind: 'object', label: 'Object (hash)', icon: 'BracesLine' },
+    { kind: 'array', label: 'Array (list)', icon: 'BracketsLine' },
+    { kind: 'null', label: 'Null', icon: 'CircleLine' },
+];
+var AddRowShell = styled_components_1.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row wrap;\n  gap: 6px;\n  align-items: center;\n  padding: 8px;\n  border-top: 1px dashed\n    ", ";\n  background: rgba(0, 0, 0, 0.12);\n"], ["\n  display: flex;\n  flex-flow: row wrap;\n  gap: 6px;\n  align-items: center;\n  padding: 8px;\n  border-top: 1px dashed\n    ", ";\n  background: rgba(0, 0, 0, 0.12);\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme), 0.2);
+});
+var AddEntryAffordance = (0, react_1.memo)(function (_a) {
+    var _b;
+    var ctx = _a.ctx, parentPath = _a.parentPath, context = _a.context;
+    var _c = (0, react_1.useState)(false), open = _c[0], setOpen = _c[1];
+    var _d = (0, react_1.useState)(''), key = _d[0], setKey = _d[1];
+    var _e = (0, react_1.useState)('string'), valueKind = _e[0], setValueKind = _e[1];
+    if (!ctx.commitAdd)
+        return null;
+    var reset = function () {
+        setOpen(false);
+        setKey('');
+        setValueKind('string');
+    };
+    var submit = function () {
+        var initial = defaultForKind(valueKind);
+        if (context.kind === 'record') {
+            var trimmed = key.trim();
+            if (!trimmed)
+                return;
+            if (context.existingKeys.includes(trimmed))
+                return;
+            ctx.commitAdd(parentPath, trimmed, initial);
+        }
+        else {
+            ctx.commitAdd(parentPath, context.length, initial);
+        }
+        reset();
+    };
+    if (!open) {
+        return ((0, jsx_runtime_1.jsx)(AddRowShell, { className: 'reqore-data-view-add-row', "data-state": 'collapsed', children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'AddLine', flat: true, minimal: true, onClick: function () { return setOpen(true); }, label: context.kind === 'record' ? 'Add property' : 'Add item' }) }));
+    }
+    var typeItem = TYPE_PICKER_ITEMS.find(function (entry) { return entry.kind === valueKind; });
+    return ((0, jsx_runtime_1.jsxs)(AddRowShell, { className: 'reqore-data-view-add-row', "data-state": 'expanded', onKeyDown: function (e) {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                reset();
+            }
+        }, children: [context.kind === 'record' ? ((0, jsx_runtime_1.jsx)(Input_1.default, { size: ctx.size, placeholder: 'property name', value: key, onChange: function (e) {
+                    return setKey(e.target.value);
+                }, onKeyDown: function (e) {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        submit();
+                    }
+                }, className: 'reqore-data-view-add-key' })) : null, (0, jsx_runtime_1.jsx)(Dropdown_1.default, { size: ctx.size, icon: typeItem === null || typeItem === void 0 ? void 0 : typeItem.icon, label: (_b = typeItem === null || typeItem === void 0 ? void 0 : typeItem.label) !== null && _b !== void 0 ? _b : 'String', className: 'reqore-data-view-add-type', items: TYPE_PICKER_ITEMS.map(function (entry) { return ({
+                    label: entry.label,
+                    icon: entry.icon,
+                    selected: entry.kind === valueKind,
+                    onClick: function () { return setValueKind(entry.kind); },
+                }); }) }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'CheckLine', intent: 'success', flat: true, minimal: true, onClick: submit, label: 'Add', className: 'reqore-data-view-add-commit' }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: ctx.size, icon: 'CloseLine', flat: true, minimal: true, onClick: reset, tooltip: 'Cancel', className: 'reqore-data-view-add-cancel' })] }));
+});
+AddEntryAffordance.displayName = 'ReqoreDataView.AddEntryAffordance';
 var isInlineableScalarValue = function (value, ctx) {
     var unwrapped = ctx.envelope === false ? value : (0, helpers_1.reqoreUnwrapEnvelope)(value, ctx.envelope);
     if (typeof unwrapped === 'string' && ctx.parseEmbedded && ctx.parseEmbedded(unwrapped)) {
@@ -303,6 +667,15 @@ var renderScalar = function (value, type, ctx, path) {
     var kind = type ? (0, helpers_1.reqoreDataValueKind)(value, type) : scalar.kind;
     var intent = (0, helpers_1.reqoreDataValueIntent)(kind);
     var displayType = type !== null && type !== void 0 ? type : kind;
+    // Editable mode: render the click-to-edit cell instead of the
+    // static chip. Date-typed scalars stay read-only until the date
+    // picker lands.
+    if (ctx.editable && kind !== 'date' && kind !== 'object' && kind !== 'array') {
+        var cell = ((0, jsx_runtime_1.jsx)(EditableScalarCell, { value: value, kind: kind, type: type, ctx: ctx, path: path }));
+        if (!ctx.showTypes || !displayType)
+            return cell;
+        return ((0, jsx_runtime_1.jsxs)(ScalarRow, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, children: [cell, (0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, flat: true, minimal: true, label: displayType, effect: { uppercase: true, spaced: 1, opacity: 0.6 }, className: 'reqore-data-view-type' })] }));
+    }
     // Value chip: minimal + intent-tinted (so the type is colour-coded
     // without shouting), weight bold. We always render with a border
     // (flat={false}) — the panel's own `flat` prop affects the outer
@@ -361,17 +734,22 @@ var RecordTable = (0, react_1.memo)(function (_a) {
         observer.observe(node);
         return function () { return observer.disconnect(); };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(TableShell, { ref: shellRef, "$size": ctx.size, "$theme": theme, "$nested": depth > 0, className: 'reqore-data-view-record', children: entries.map(function (_a, index) {
-            var _b;
-            var key = _a[0], item = _a[1];
-            var complex = (0, helpers_1.reqoreIsRecord)(ctx.envelope === false ? item : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)) ||
-                (Array.isArray(ctx.envelope === false ? item : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)) &&
-                    !(ctx.inlineScalarArrays &&
-                        (ctx.envelope === false
-                            ? item
-                            : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)).every(function (entry) { return isInlineableScalarValue(entry, ctx); })));
-            return ((0, jsx_runtime_1.jsxs)(Row, { "$size": ctx.size, "$theme": theme, "$complex": complex, "$odd": index % 2 === 0, "$stacked": stacked, className: 'reqore-data-view-row', children: [(0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, flat: false, minimal: true, wrap: true, intent: ctx.keyIntent === null ? undefined : (_b = ctx.keyIntent) !== null && _b !== void 0 ? _b : 'info', color: ctx.keyColor, label: key, effect: { weight: 'bold' }, className: 'reqore-data-view-key' }), (0, jsx_runtime_1.jsx)(ValueCell, { "$size": ctx.size, "$theme": theme, "$complex": complex, className: 'reqore-data-view-value-cell', children: renderTree(item, ctx, theme, depth + 1, __spreadArray(__spreadArray([], path, true), [key], false)) })] }, "".concat(path.join('.'), "-").concat(key)));
-        }) }));
+    var siblingKeys = entries.map(function (_a) {
+        var k = _a[0];
+        return k;
+    });
+    return ((0, jsx_runtime_1.jsxs)(TableShell, { ref: shellRef, "$size": ctx.size, "$theme": theme, "$nested": depth > 0, className: 'reqore-data-view-record', children: [entries.map(function (_a, index) {
+                var _b;
+                var key = _a[0], item = _a[1];
+                var complex = (0, helpers_1.reqoreIsRecord)(ctx.envelope === false ? item : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)) ||
+                    (Array.isArray(ctx.envelope === false ? item : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)) &&
+                        !(ctx.inlineScalarArrays &&
+                            (ctx.envelope === false
+                                ? item
+                                : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)).every(function (entry) { return isInlineableScalarValue(entry, ctx); })));
+                var rowPath = __spreadArray(__spreadArray([], path, true), [key], false);
+                return ((0, jsx_runtime_1.jsxs)(Row, { "$size": ctx.size, "$theme": theme, "$complex": complex, "$odd": index % 2 === 0, "$stacked": stacked, "$editable": ctx.editable, className: 'reqore-data-view-row', children: [ctx.editable ? ((0, jsx_runtime_1.jsx)(EditableKeyCell, { keyName: key, siblingKeys: siblingKeys, parentPath: path, ctx: ctx })) : ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, flat: false, minimal: true, wrap: true, intent: ctx.keyIntent === null ? undefined : (_b = ctx.keyIntent) !== null && _b !== void 0 ? _b : 'info', color: ctx.keyColor, label: key, effect: { weight: 'bold' }, className: 'reqore-data-view-key' })), (0, jsx_runtime_1.jsx)(ValueCell, { "$size": ctx.size, "$theme": theme, "$complex": complex, className: 'reqore-data-view-value-cell', children: renderTree(item, ctx, theme, depth + 1, rowPath) }), ctx.editable ? ((0, jsx_runtime_1.jsx)(RowActions, { ctx: ctx, path: rowPath, ariaLabel: "Remove ".concat(key) })) : null] }, "".concat(path.join('.'), "-").concat(key)));
+            }), ctx.editable ? ((0, jsx_runtime_1.jsx)(AddEntryAffordance, { ctx: ctx, parentPath: path, context: { kind: 'record', existingKeys: siblingKeys } })) : null] }));
 });
 RecordTable.displayName = 'ReqoreDataView.RecordTable';
 var renderTree = function (value, ctx, theme, depth, path) {
@@ -386,11 +764,19 @@ var renderTree = function (value, ctx, theme, depth, path) {
     }
     // Arrays.
     if (Array.isArray(unwrapped)) {
-        var allInlineable = ctx.inlineScalarArrays && unwrapped.every(function (item) { return isInlineableScalarValue(item, ctx); });
+        // In editable mode, render every array item as its own row so the
+        // hover-revealed delete + `+ Add item` affordance has a place to
+        // live. The inline chip-row variant is for read-only density.
+        var allInlineable = !ctx.editable &&
+            ctx.inlineScalarArrays &&
+            unwrapped.every(function (item) { return isInlineableScalarValue(item, ctx); });
         if (allInlineable) {
             return ((0, jsx_runtime_1.jsxs)(ScalarRow, { size: ctx.size, gapSize: 'small', verticalAlign: 'center', children: [envelopeType ? ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, minimal: true, flat: false, label: envelopeType, effect: { uppercase: true, spaced: 1, opacity: 0.6 }, className: 'reqore-data-view-type' })) : null, unwrapped.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("span", { children: renderScalar(ctx.envelope === false ? item : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope), ctx.envelope === false ? undefined : (0, helpers_1.reqoreEnvelopeType)(item, ctx.envelope), ctx, __spreadArray(__spreadArray([], path, true), [String(index)], false)) }, "".concat(path.join('.'), "-").concat(index))); })] }));
         }
-        var content = ((0, jsx_runtime_1.jsx)(ArrayStack, { "$size": ctx.size, "$theme": theme, className: 'reqore-data-view-array', children: unwrapped.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(ArrayItem, { "$size": ctx.size, "$theme": theme, className: 'reqore-data-view-array-item', children: [unwrapped.length > 1 ? ((0, jsx_runtime_1.jsx)(ArrayItemIndex, { "$size": ctx.size, "$theme": theme, children: index + 1 })) : null, renderTree(item, ctx, theme, depth + 1, __spreadArray(__spreadArray([], path, true), [String(index)], false))] }, "".concat(path.join('.'), "-").concat(index))); }) }));
+        var content = ((0, jsx_runtime_1.jsxs)(ArrayStack, { "$size": ctx.size, "$theme": theme, className: 'reqore-data-view-array', children: [unwrapped.map(function (item, index) {
+                    var itemPath = __spreadArray(__spreadArray([], path, true), [String(index)], false);
+                    return ((0, jsx_runtime_1.jsxs)(ArrayItem, { "$size": ctx.size, "$theme": theme, className: 'reqore-data-view-array-item reqore-data-view-row', children: [(0, jsx_runtime_1.jsxs)(ArrayItemContent, { children: [unwrapped.length > 1 ? ((0, jsx_runtime_1.jsx)(ArrayItemIndex, { "$size": ctx.size, "$theme": theme, children: index + 1 })) : null, renderTree(item, ctx, theme, depth + 1, itemPath)] }), ctx.editable ? ((0, jsx_runtime_1.jsx)(RowActions, { ctx: ctx, path: itemPath, ariaLabel: "Remove item ".concat(index + 1) })) : null] }, "".concat(path.join('.'), "-").concat(index)));
+                }), ctx.editable ? ((0, jsx_runtime_1.jsx)(AddEntryAffordance, { ctx: ctx, parentPath: path, context: { kind: 'array', length: unwrapped.length } })) : null] }));
         if (depth === 0)
             return content;
         return ((0, jsx_runtime_1.jsx)(PreservedDetails, { initialOpen: depth < ctx.defaultExpandDepth, label: SECTION_LABEL('List', unwrapped.length), path: path, size: ctx.size, theme: theme, onToggle: ctx.onSectionToggle, children: content }));
@@ -407,9 +793,73 @@ var renderTree = function (value, ctx, theme, depth, path) {
 };
 exports.ReqoreDataView = (0, react_1.memo)((0, react_1.forwardRef)(function (_a, ref) {
     var _b;
-    var data = _a.data, _c = _a.emptyText, emptyText = _c === void 0 ? 'No data.' : _c, _d = _a.collapsibleRoot, collapsibleRoot = _d === void 0 ? true : _d, _e = _a.defaultExpandDepth, defaultExpandDepth = _e === void 0 ? 2 : _e, _f = _a.showTypes, showTypes = _f === void 0 ? false : _f, _g = _a.inlineScalarArrays, inlineScalarArrays = _g === void 0 ? true : _g, _h = _a.envelope, envelope = _h === void 0 ? helpers_1.DEFAULT_ENVELOPE : _h, parseEmbedded = _a.parseEmbedded, parseDate = _a.parseDate, formatDate = _a.formatDate, onItemClick = _a.onItemClick, onSectionToggle = _a.onSectionToggle, keyColor = _a.keyColor, keyIntent = _a.keyIntent, _j = _a.size, size = _j === void 0 ? 'normal' : _j, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, intent = _a.intent, flat = _a.flat, panelProps = __rest(_a, ["data", "emptyText", "collapsibleRoot", "defaultExpandDepth", "showTypes", "inlineScalarArrays", "envelope", "parseEmbedded", "parseDate", "formatDate", "onItemClick", "onSectionToggle", "keyColor", "keyIntent", "size", "customTheme", "inheritCustomTheme", "intent", "flat"]);
+    var data = _a.data, _c = _a.emptyText, emptyText = _c === void 0 ? 'No data.' : _c, _d = _a.collapsibleRoot, collapsibleRoot = _d === void 0 ? true : _d, _e = _a.defaultExpandDepth, defaultExpandDepth = _e === void 0 ? 2 : _e, _f = _a.showTypes, showTypes = _f === void 0 ? false : _f, _g = _a.inlineScalarArrays, inlineScalarArrays = _g === void 0 ? true : _g, _h = _a.envelope, envelope = _h === void 0 ? helpers_1.DEFAULT_ENVELOPE : _h, parseEmbedded = _a.parseEmbedded, parseDate = _a.parseDate, formatDate = _a.formatDate, onItemClick = _a.onItemClick, onSectionToggle = _a.onSectionToggle, keyColor = _a.keyColor, keyIntent = _a.keyIntent, _j = _a.editable, editable = _j === void 0 ? false : _j, onDataChange = _a.onDataChange, onValueChange = _a.onValueChange, onRemoveProperty = _a.onRemoveProperty, onRenameProperty = _a.onRenameProperty, onAddProperty = _a.onAddProperty, onChangeType = _a.onChangeType, _k = _a.size, size = _k === void 0 ? 'normal' : _k, customTheme = _a.customTheme, inheritCustomTheme = _a.inheritCustomTheme, intent = _a.intent, flat = _a.flat, panelProps = __rest(_a, ["data", "emptyText", "collapsibleRoot", "defaultExpandDepth", "showTypes", "inlineScalarArrays", "envelope", "parseEmbedded", "parseDate", "formatDate", "onItemClick", "onSectionToggle", "keyColor", "keyIntent", "editable", "onDataChange", "onValueChange", "onRemoveProperty", "onRenameProperty", "onAddProperty", "onChangeType", "size", "customTheme", "inheritCustomTheme", "intent", "flat"]);
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent, undefined, inheritCustomTheme);
-    var empty = !(0, helpers_1.reqoreHasStructuredValue)(data, envelope === false ? undefined : envelope);
+    // In editable mode an empty `{}` or `[]` must still render the
+    // tree so the `+ Add property` / `+ Add item` affordance is
+    // reachable — otherwise a from-scratch build is impossible.
+    // Only fall back to the empty callout when read-only AND the
+    // value is genuinely empty.
+    var empty = !editable &&
+        !(0, helpers_1.reqoreHasStructuredValue)(data, envelope === false ? undefined : envelope);
+    var dataRef = (0, react_1.useRef)(data);
+    (0, react_1.useLayoutEffect)(function () {
+        dataRef.current = data;
+    }, [data]);
+    var commitScalar = (0, react_1.useCallback)(function (path, value) {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(path, value);
+        if (!onDataChange)
+            return;
+        var next = (0, helpers_1.reqoreSetAtPath)(dataRef.current, path, value);
+        onDataChange(next);
+    }, [onDataChange, onValueChange]);
+    var commitDelete = (0, react_1.useCallback)(function (path) {
+        onRemoveProperty === null || onRemoveProperty === void 0 ? void 0 : onRemoveProperty(path);
+        if (!onDataChange)
+            return;
+        var next = (0, helpers_1.reqoreDeleteAtPath)(dataRef.current, path);
+        onDataChange(next);
+    }, [onDataChange, onRemoveProperty]);
+    var commitRename = (0, react_1.useCallback)(function (parentPath, oldKey, newKey) {
+        onRenameProperty === null || onRenameProperty === void 0 ? void 0 : onRenameProperty(parentPath, oldKey, newKey);
+        if (!onDataChange)
+            return;
+        var next = (0, helpers_1.reqoreRenameKeyAtPath)(dataRef.current, parentPath, oldKey, newKey);
+        onDataChange(next);
+    }, [onDataChange, onRenameProperty]);
+    var commitAdd = (0, react_1.useCallback)(function (parentPath, keyOrIndex, initialValue) {
+        onAddProperty === null || onAddProperty === void 0 ? void 0 : onAddProperty(parentPath, keyOrIndex, initialValue);
+        if (!onDataChange)
+            return;
+        var next = (0, helpers_1.reqoreSetAtPath)(dataRef.current, __spreadArray(__spreadArray([], parentPath, true), [String(keyOrIndex)], false), initialValue);
+        onDataChange(next);
+    }, [onAddProperty, onDataChange]);
+    var commitTypeChange = (0, react_1.useCallback)(function (path, kind) {
+        onChangeType === null || onChangeType === void 0 ? void 0 : onChangeType(path, kind);
+        if (!onDataChange)
+            return;
+        // Read the current value at path, coerce it to the target
+        // kind, and re-emit the tree. The lookup walks the same
+        // path the set will use, so a missing path is a no-op.
+        var current = dataRef.current;
+        for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
+            var segment = path_1[_i];
+            if (current == null)
+                return;
+            if (Array.isArray(current)) {
+                var index = Number.parseInt(segment, 10);
+                current = Number.isNaN(index) ? undefined : current[index];
+            }
+            else if ((0, helpers_1.reqoreIsRecord)(current)) {
+                current = current[segment];
+            }
+            else {
+                return;
+            }
+        }
+        var next = (0, helpers_1.reqoreSetAtPath)(dataRef.current, path, (0, helpers_1.reqoreCoerceValueToKind)(current, kind));
+        onDataChange(next);
+    }, [onChangeType, onDataChange]);
     var ctx = {
         envelope: envelope,
         parseEmbedded: parseEmbedded,
@@ -422,6 +872,12 @@ exports.ReqoreDataView = (0, react_1.memo)((0, react_1.forwardRef)(function (_a,
         onSectionToggle: onSectionToggle,
         keyColor: keyColor,
         keyIntent: keyIntent,
+        editable: editable,
+        commitScalar: editable ? commitScalar : undefined,
+        commitDelete: editable ? commitDelete : undefined,
+        commitRename: editable ? commitRename : undefined,
+        commitAdd: editable ? commitAdd : undefined,
+        commitTypeChange: editable ? commitTypeChange : undefined,
     };
     var body = empty ? ((0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, { size: size, effect: { opacity: 0.65 }, children: emptyText })) : collapsibleRoot ? ((0, jsx_runtime_1.jsx)(PreservedDetails, { initialOpen: true, label: Array.isArray(data)
             ? SECTION_LABEL('List', data.length)
@@ -433,13 +889,17 @@ exports.ReqoreDataView = (0, react_1.memo)((0, react_1.forwardRef)(function (_a,
 exports.ReqoreDataView.displayName = 'ReqoreDataView';
 var helpers_2 = require("./helpers");
 Object.defineProperty(exports, "DEFAULT_ENVELOPE", { enumerable: true, get: function () { return helpers_2.DEFAULT_ENVELOPE; } });
+Object.defineProperty(exports, "reqoreCoerceValueToKind", { enumerable: true, get: function () { return helpers_2.reqoreCoerceValueToKind; } });
 Object.defineProperty(exports, "reqoreDataValueIntent", { enumerable: true, get: function () { return helpers_2.reqoreDataValueIntent; } });
 Object.defineProperty(exports, "reqoreDataValueKind", { enumerable: true, get: function () { return helpers_2.reqoreDataValueKind; } });
+Object.defineProperty(exports, "reqoreDeleteAtPath", { enumerable: true, get: function () { return helpers_2.reqoreDeleteAtPath; } });
 Object.defineProperty(exports, "reqoreEnvelopeType", { enumerable: true, get: function () { return helpers_2.reqoreEnvelopeType; } });
 Object.defineProperty(exports, "reqoreFormatScalar", { enumerable: true, get: function () { return helpers_2.reqoreFormatScalar; } });
 Object.defineProperty(exports, "reqoreHasStructuredValue", { enumerable: true, get: function () { return helpers_2.reqoreHasStructuredValue; } });
 Object.defineProperty(exports, "reqoreIsEnvelope", { enumerable: true, get: function () { return helpers_2.reqoreIsEnvelope; } });
 Object.defineProperty(exports, "reqoreIsRecord", { enumerable: true, get: function () { return helpers_2.reqoreIsRecord; } });
+Object.defineProperty(exports, "reqoreRenameKeyAtPath", { enumerable: true, get: function () { return helpers_2.reqoreRenameKeyAtPath; } });
+Object.defineProperty(exports, "reqoreSetAtPath", { enumerable: true, get: function () { return helpers_2.reqoreSetAtPath; } });
 Object.defineProperty(exports, "reqoreUnwrapEnvelope", { enumerable: true, get: function () { return helpers_2.reqoreUnwrapEnvelope; } });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 //# sourceMappingURL=index.js.map