@qoretechnologies/reqore 0.76.0-pr.673.gfcc9a9f → 0.76.0

package/dist/components/DataView/index.cjs

@@ -1,961 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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)
- * as a typed, collapsible tree.
- *
- * Visually adjacent to `ReqoreTree` but optimised for *displaying*
- * server payloads (workflow / job / event data, error info, structured
- * audit rows) where the operator wants to see types at a glance, drill
- * into nested sections, and recognise typed-envelope shapes
- * (`{ type, value }`) without an extra layer of rendering noise.
- *
- * Highlights:
- *   - Wraps `ReqorePanel`, so the full panel chrome is available —
- *     label / icon / badge / intent / customTheme / effect / actions /
- *     collapsible / minimal / flat / rounded / size, etc.
- *   - Type-aware value chips powered by `ReqoreTag` intents (string /
- *     number / boolean / date / null / array / object).
- *   - Envelope detection — opt-in shape that unwraps `{ type, value }`
- *     style records to render the inner value with the type label as a
- *     chip. Configurable per call.
- *   - Pluggable date parser + formatter (default works on ISO strings
- *     and `Date.parse`able shapes; consumers can plug in stricter or
- *     domain-specific parsers).
- *   - Pluggable embedded-string parser — for cases where the server
- *     hands back a stringified structured payload that should be
- *     parsed and rendered inline.
- *   - Scalar arrays inline by default (a list of plain strings reads as
- *     a wrapping chip row instead of a tall column of cells).
- *   - Sticky-position scroll preservation when toggling nested sections,
- *     so the operator doesn't lose their place when expanding deep
- *     trees.
- */
-var react_1 = require("react");
-var polished_1 = require("polished");
-var styled_components_1 = __importStar(require("styled-components"));
-var sizes_1 = require("../../constants/sizes.cjs");
-var fonts_1 = require("../../constants/fonts.cjs");
-var colors_1 = require("../../helpers/colors.cjs");
-var useTheme_1 = require("../../hooks/useTheme.cjs");
-var Button_1 = __importDefault(require("../Button/index.cjs"));
-var Checkbox_1 = __importDefault(require("../Checkbox/index.cjs"));
-var ControlGroup_1 = __importDefault(require("../ControlGroup/index.cjs"));
-var Dropdown_1 = __importDefault(require("../Dropdown/index.cjs"));
-var Input_1 = __importDefault(require("../Input/index.cjs"));
-var Paragraph_1 = require("../Paragraph/index.cjs");
-var Panel_1 = require("../Panel/index.cjs");
-var Tag_1 = __importDefault(require("../Tag/index.cjs"));
-var helpers_1 = require("./helpers.cjs");
-var SECTION_LABEL = function (kind, count) {
-    var word = kind === 'Object' ? 'field' : 'item';
-    return "".concat(kind, " \u00B7 ").concat(count, " ").concat(word).concat(count === 1 ? '' : 's');
-};
-var Tree = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: ", "px;\n  min-width: 0;\n  width: 100%;\n  font-size: ", "px;\n  color: ", ";\n\n  /* Force monospace on every tag we render inside the view \u2014 keys,\n     values and type labels \u2014 so the tree reads like one consistent\n     data-view material rather than a row of disconnected chips.\n     Override via the tag's own `effect.textSize` if you need to\n     dial it back. `&&` (not `!important`) beats `StyledTag`'s\n     `font-family: system-ui` \u2014 both are one generated class deep, so\n     without the specificity boost the winner is just whichever\n     styled-component happens to mount last. `!important` here would\n     tax every downstream consumer trying to override this from their\n     own `customTheme` / `effect`. \n     Prefer `effect={{ fontFamily: 'mono' }}` on new code \u2014 `StyledTag` now only\n     declares its own family when the effect does not, so a tag can simply ask for\n     mono. This block stays because the classes below are set on tags this component\n     does not own the props of; migrating them is a separate change. */\n  && .reqore-data-view-key,\n  && .reqore-data-view-key .reqore-tag-content,\n  && .reqore-data-view-value,\n  && .reqore-data-view-value .reqore-tag-content,\n  && .reqore-data-view-type,\n  && .reqore-data-view-type .reqore-tag-content {\n    font-family: ", ";\n    /* Long unbreakable identifiers (UUIDs, snake_case keys, HL7\n       payloads with no spaces) need an extra hint to break \u2014 the\n       tag's own `wrap` enables breaks at WHITESPACE, but these run\n       on continuously. `overflow-wrap: anywhere` is the\n       last-resort break point. Only applied here (inside the tag\n       content) so the chip's outer geometry isn't affected. */\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: ", "px;\n  min-width: 0;\n  width: 100%;\n  font-size: ", "px;\n  color: ", ";\n\n  /* Force monospace on every tag we render inside the view \u2014 keys,\n     values and type labels \u2014 so the tree reads like one consistent\n     data-view material rather than a row of disconnected chips.\n     Override via the tag's own \\`effect.textSize\\` if you need to\n     dial it back. \\`&&\\` (not \\`!important\\`) beats \\`StyledTag\\`'s\n     \\`font-family: system-ui\\` \u2014 both are one generated class deep, so\n     without the specificity boost the winner is just whichever\n     styled-component happens to mount last. \\`!important\\` here would\n     tax every downstream consumer trying to override this from their\n     own \\`customTheme\\` / \\`effect\\`. \n     Prefer \\`effect={{ fontFamily: 'mono' }}\\` on new code \u2014 \\`StyledTag\\` now only\n     declares its own family when the effect does not, so a tag can simply ask for\n     mono. This block stays because the classes below are set on tags this component\n     does not own the props of; migrating them is a separate change. */\n  && .reqore-data-view-key,\n  && .reqore-data-view-key .reqore-tag-content,\n  && .reqore-data-view-value,\n  && .reqore-data-view-value .reqore-tag-content,\n  && .reqore-data-view-type,\n  && .reqore-data-view-type .reqore-tag-content {\n    font-family: ", ";\n    /* Long unbreakable identifiers (UUIDs, snake_case keys, HL7\n       payloads with no spaces) need an extra hint to break \u2014 the\n       tag's own \\`wrap\\` enables breaks at WHITESPACE, but these run\n       on continuously. \\`overflow-wrap: anywhere\\` is the\n       last-resort break point. Only applied here (inside the tag\n       content) so the chip's outer geometry isn't affected. */\n    overflow-wrap: anywhere;\n    word-break: break-word;\n  }\n"])), function (_a) {
-    var $size = _a.$size;
-    return sizes_1.GAP_FROM_SIZE[$size];
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.TEXT_FROM_SIZE[$size];
-}, function (_a) {
-    var $theme = _a.$theme;
-    return $theme.text.color || $theme.main;
-}, fonts_1.MONO_FONT);
-var TableShell = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  /* Nested containers get a *darker* tint \u2014 visual depth comes from\n     the surface itself stepping down a notch for every level of\n     nesting, the same pattern the IDE uses. The container's right /\n     top / bottom borders are a near-invisible neutral; the LEFT edge\n     carries a 2px theme-tinted accent so every group (root *and*\n     nested) reads as an indented chunk with a clear left rail. */\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: ", "px;\n  /* Nested groups need a *visibly* darker fill to read as one level\n     deeper. A small alpha bump (0.10 \u2192 0.22) was too subtle on top of\n     an already-dark panel surface; 0.45 makes the depth step\n     unmistakable while still being a colour darken (so it works on\n     both light and dark themes). */\n  background: ", ";\n"], ["\n  display: flex;\n  flex-flow: column;\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  /* Nested containers get a *darker* tint \u2014 visual depth comes from\n     the surface itself stepping down a notch for every level of\n     nesting, the same pattern the IDE uses. The container's right /\n     top / bottom borders are a near-invisible neutral; the LEFT edge\n     carries a 2px theme-tinted accent so every group (root *and*\n     nested) reads as an indented chunk with a clear left rail. */\n  border: 1px solid ", ";\n  border-left: 2px solid ", ";\n  border-radius: ", "px;\n  /* Nested groups need a *visibly* darker fill to read as one level\n     deeper. A small alpha bump (0.10 \u2192 0.22) was too subtle on top of\n     an already-dark panel surface; 0.45 makes the depth step\n     unmistakable while still being a colour darken (so it works on\n     both light and dark themes). */\n  background: ", ";\n"])), function (_a) {
-    var $theme = _a.$theme;
-    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.08);
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.18);
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.RADIUS_FROM_SIZE[$size];
-}, function (_a) {
-    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 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;
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.PADDING_FROM_SIZE[$size] / 2;
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.PADDING_FROM_SIZE[$size];
-}, function (_a) {
-    var $theme = _a.$theme, $odd = _a.$odd;
-    return $odd ? (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.06) : 'transparent';
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.08);
-}, function (_a) {
-    var $complex = _a.$complex;
-    return $complex && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
-});
-var ValueCell = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-width: 0;\n  max-width: 100%;\n  font-family: ", ";\n  font-size: ", "px;\n  word-break: break-word;\n  /* Complex values (records / arrays) get a generous left inset and a\n     small top margin so the nested block reads as an indented chunk\n     under its key. The left rail itself lives on the nested\n     TableShell, NOT here \u2014 that way the root group carries the same\n     rail without needing a wrapping ValueCell. */\n  ", "\n"], ["\n  min-width: 0;\n  max-width: 100%;\n  font-family: ", ";\n  font-size: ", "px;\n  word-break: break-word;\n  /* Complex values (records / arrays) get a generous left inset and a\n     small top margin so the nested block reads as an indented chunk\n     under its key. The left rail itself lives on the nested\n     TableShell, NOT here \u2014 that way the root group carries the same\n     rail without needing a wrapping ValueCell. */\n  ", "\n"])), fonts_1.MONO_FONT, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.TEXT_FROM_SIZE[$size] - 1;
-}, function (_a) {
-    var $complex = _a.$complex, $size = _a.$size;
-    return $complex && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-top: 4px;\n      padding-left: ", "px;\n    "], ["\n      margin-top: 4px;\n      padding-left: ", "px;\n    "])), sizes_1.PADDING_FROM_SIZE[$size] + 6);
-});
-/** Multiline strings are data documents, not compact scalar labels. Rendering
- *  them inside a tag creates a very tall pill and makes large text/plain
- *  payloads difficult to inspect. Keep their original whitespace in a
- *  bounded, scrollable data surface instead — but keep the same border /
- *  background language as the neutral (no-intent) value chip in
- *  `renderScalar` below (a plain `ReqoreTag` with `minimal flat={false}`
- *  and no `color`) so the block reads as the same value-chip family, just
- *  taller and pre-formatted, rather than an unrelated visual element. Only
- *  the font, wrapping and scroll behaviour are new. */
-var MultilineValue = styled_components_1.default.pre(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  box-sizing: border-box;\n  flex: 1 1 300px;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n  max-height: min(320px, 45vh);\n  margin: 0;\n  padding: ", "px;\n  overflow: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  tab-size: 2;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  font-variant-ligatures: none;\n  line-height: 1.45;\n  cursor: ", ";\n\n  ", "\n"], ["\n  box-sizing: border-box;\n  flex: 1 1 300px;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n  max-height: min(320px, 45vh);\n  margin: 0;\n  padding: ", "px;\n  overflow: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  word-break: break-word;\n  tab-size: 2;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  font-variant-ligatures: none;\n  line-height: 1.45;\n  cursor: ", ";\n\n  ", "\n"])), function (_a) {
-    var $size = _a.$size;
-    return sizes_1.PADDING_FROM_SIZE[$size];
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, colors_1.changeLightness)($theme.main, 0.2);
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.RADIUS_FROM_SIZE[$size];
-}, (0, polished_1.rgba)((0, colors_1.changeLightness)('#000000', 0.05), 0.3), function (_a) {
-    var $theme = _a.$theme;
-    return (0, colors_1.getReadableColorFrom)((0, colors_1.changeLightness)($theme.main, 0.1));
-}, fonts_1.MONO_FONT, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.TEXT_FROM_SIZE[$size] - 1;
-}, function (_a) {
-    var $interactive = _a.$interactive;
-    return ($interactive ? 'pointer' : 'text');
-}, function (_a) {
-    var $interactive = _a.$interactive, $theme = _a.$theme;
-    return $interactive && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &:hover,\n      &:focus-visible {\n        border-color: ", ";\n        outline: none;\n      }\n    "], ["\n      &:hover,\n      &:focus-visible {\n        border-color: ", ";\n        outline: none;\n      }\n    "])), (0, colors_1.changeLightness)($theme.main, 0.35));
-});
-var ArrayStack = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: ", "px;\n  min-width: 0;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: ", "px;\n  min-width: 0;\n  width: 100%;\n"])), function (_a) {
-    var $size = _a.$size;
-    return sizes_1.GAP_FROM_SIZE[$size];
-});
-var ArrayItem = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __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) {
-    var $size = _a.$size;
-    return sizes_1.PADDING_FROM_SIZE[$size];
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.PADDING_FROM_SIZE[$size];
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.PADDING_FROM_SIZE[$size] + 6;
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.08);
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.18);
-}, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.RADIUS_FROM_SIZE[$size];
-});
-/** 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_11 || (templateObject_11 = __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_12 || (templateObject_12 = __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) {
-    var $theme = _a.$theme;
-    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.12);
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, colors_1.getReadableColor)($theme);
-}, fonts_1.MONO_FONT);
-var ScalarRow = (0, styled_components_1.default)(ControlGroup_1.default)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex-wrap: wrap;\n"], ["\n  flex-wrap: wrap;\n"])));
-var SectionDetails = styled_components_1.default.details(templateObject_14 || (templateObject_14 = __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_15 || (templateObject_15 = __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"])), fonts_1.MONO_FONT, function (_a) {
-    var $size = _a.$size;
-    return sizes_1.TEXT_FROM_SIZE[$size] - 2;
-}, function (_a) {
-    var $theme = _a.$theme;
-    return (0, colors_1.getReadableColor)($theme);
-}, SectionDetails);
-var scrollPattern = /(auto|scroll|overlay)/;
-var isScrollable = function (element) {
-    var style = window.getComputedStyle(element);
-    return (scrollPattern.test("".concat(style.overflowY, " ").concat(style.overflow)) &&
-        element.scrollHeight > element.clientHeight);
-};
-var findScrollTarget = function (element) {
-    var current = element.parentElement;
-    while (current && current !== document.body) {
-        if (isScrollable(current))
-            return current;
-        current = current.parentElement;
-    }
-    return window;
-};
-var shiftScroll = function (target, delta) {
-    if (!delta)
-        return;
-    if (target === window) {
-        window.scrollBy(0, delta);
-        return;
-    }
-    target.scrollTop += delta;
-};
-var PreservedDetails = (0, react_1.memo)(function (_a) {
-    var initialOpen = _a.initialOpen, label = _a.label, path = _a.path, size = _a.size, theme = _a.theme, onToggle = _a.onToggle, children = _a.children;
-    var _b = (0, react_1.useState)(initialOpen), open = _b[0], setOpen = _b[1];
-    var summaryRef = (0, react_1.useRef)(null);
-    var pendingTopRef = (0, react_1.useRef)(null);
-    var scrollTargetRef = (0, react_1.useRef)(null);
-    var preserveScroll = (0, react_1.useCallback)(function () {
-        var summary = summaryRef.current;
-        if (!summary)
-            return;
-        pendingTopRef.current = summary.getBoundingClientRect().top;
-        scrollTargetRef.current = findScrollTarget(summary);
-    }, []);
-    var toggle = (0, react_1.useCallback)(function () {
-        preserveScroll();
-        setOpen(function (current) {
-            var next = !current;
-            onToggle === null || onToggle === void 0 ? void 0 : onToggle(next, path);
-            return next;
-        });
-    }, [onToggle, path, preserveScroll]);
-    var onSummaryClick = (0, react_1.useCallback)(function (event) {
-        event.preventDefault();
-        toggle();
-    }, [toggle]);
-    var onSummaryKey = (0, react_1.useCallback)(function (event) {
-        if (event.key !== 'Enter' && event.key !== ' ')
-            return;
-        event.preventDefault();
-        toggle();
-    }, [toggle]);
-    (0, react_1.useLayoutEffect)(function () {
-        var previous = pendingTopRef.current;
-        var summary = summaryRef.current;
-        var target = scrollTargetRef.current;
-        if (previous === null || !summary || !target)
-            return;
-        pendingTopRef.current = null;
-        scrollTargetRef.current = null;
-        shiftScroll(target, summary.getBoundingClientRect().top - previous);
-    }, [open]);
-    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_16 || (templateObject_16 = __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_17 || (templateObject_17 = __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_18 || (templateObject_18 = __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)) {
-        return false;
-    }
-    return !Array.isArray(unwrapped) && !(0, helpers_1.reqoreIsRecord)(unwrapped);
-};
-var renderScalar = 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);
-    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' })] }));
-    }
-    var multiline = kind === 'string' && /[\r\n]/.test(scalar.display);
-    if (multiline) {
-        // `white-space: pre-wrap` reliably forces a line break on \n in every
-        // browser, but a *lone* \r (the actual HL7 v2 segment separator, and
-        // old-Mac-style line endings generally) is not guaranteed to — Chromium
-        // renders it as a zero-width no-op, silently fusing the two segments
-        // together (`...P|2.5` + \r + `OBR|1...` becomes the unreadable
-        // `2.5OBR`). Normalize every line-ending style to \n before display so
-        // the break is spec-guaranteed regardless of the source payload's
-        // original convention.
-        var displayText = scalar.display.replace(/\r\n?/g, '\n');
-        var block = ((0, jsx_runtime_1.jsx)(MultilineValue, { "$size": ctx.size, "$theme": ctx.theme, "$interactive": Boolean(ctx.onItemClick), className: 'reqore-data-view-value reqore-data-view-multiline-value', role: ctx.onItemClick ? 'button' : undefined, tabIndex: ctx.onItemClick ? 0 : undefined, onClick: ctx.onItemClick
-                ? function () { return ctx.onItemClick(value, path); }
-                : undefined, onKeyDown: ctx.onItemClick
-                ? function (event) {
-                    if (event.key !== 'Enter' && event.key !== ' ')
-                        return;
-                    event.preventDefault();
-                    ctx.onItemClick(value, path);
-                }
-                : undefined, children: displayText }));
-        if (!ctx.showTypes || !displayType)
-            return block;
-        return ((0, jsx_runtime_1.jsxs)(ScalarRow, { gapSize: 'tiny', verticalAlign: 'top', size: ctx.size, fluid: true, children: [block, (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
-    // panel chrome, but the inner chips read more cleanly as values
-    // when they have a visible outline regardless. Consumers who want
-    // borderless chips can override via a wrapper or via reqore's
-    // built-in `effect` slot.
-    var tag = ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: ctx.size, flat: false, minimal: true, 
-        // `wrap` is critical for the value chip — without it, a long
-        // string scalar (an HL7 payload, a stack trace, a UUID-heavy
-        // identifier) renders as a single non-wrapping pill that
-        // overflows its column horizontally. With `wrap`, ReqoreTag
-        // lets the label flow onto multiple lines inside the chip.
-        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' }));
-    if (!ctx.showTypes || !displayType)
-        return tag;
-    return ((0, jsx_runtime_1.jsxs)(ScalarRow, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, children: [tag, (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' })] }));
-};
-/** Width (in CSS px) below which a `RecordTable` switches its rows
- *  from a two-column grid (key | value) to a single column (key on
- *  top, value beneath). Tuned to the point where the 120px-min key
- *  column + gap + the value column starts squeezing the value into a
- *  useless sliver. */
-var STACK_BELOW_PX = 360;
-/**
- * Record renderer that observes its own width and switches the row
- * layout to vertical (key above value) when narrower than
- * `STACK_BELOW_PX`. The observer hooks the actual rendered
- * `TableShell` so the layout responds to *the parent panel's* width,
- * not the viewport — works inside narrow drawers on a wide monitor.
- *
- * Lives outside `renderTree` because `renderTree` is a pure function;
- * this component is where the `useState` + `ResizeObserver` lifecycle
- * live.
- */
-var RecordTable = (0, react_1.memo)(function (_a) {
-    var entries = _a.entries, ctx = _a.ctx, theme = _a.theme, depth = _a.depth, path = _a.path;
-    var shellRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(false), stacked = _b[0], setStacked = _b[1];
-    (0, react_1.useLayoutEffect)(function () {
-        var node = shellRef.current;
-        if (!node || typeof ResizeObserver === 'undefined')
-            return undefined;
-        var observer = new ResizeObserver(function (events) {
-            var _a, _b;
-            var entry = events[0];
-            if (!entry)
-                return;
-            var width = (_b = (_a = entry.contentRect) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : node.clientWidth;
-            setStacked(width > 0 && width < STACK_BELOW_PX);
-        });
-        observer.observe(node);
-        return function () { return observer.disconnect(); };
-    }, []);
-    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) {
-    var envelopeType = ctx.envelope === false ? undefined : (0, helpers_1.reqoreEnvelopeType)(value, ctx.envelope);
-    var unwrapped = ctx.envelope === false ? value : (0, helpers_1.reqoreUnwrapEnvelope)(value, ctx.envelope);
-    // Embedded string parsing (e.g. JSON inside a string).
-    if (typeof unwrapped === 'string' && ctx.parseEmbedded) {
-        var parsed = ctx.parseEmbedded(unwrapped);
-        if (parsed) {
-            return ((0, jsx_runtime_1.jsxs)(Tree, { "$size": ctx.size, "$theme": theme, children: [parsed.prefix ? ((0, jsx_runtime_1.jsx)(Paragraph_1.ReqoreP, { size: ctx.size, effect: { opacity: 0.72 }, children: parsed.prefix })) : null, renderTree(parsed.data, ctx, theme, depth + 1, __spreadArray(__spreadArray([], path, true), ['<parsed>'], false))] }));
-        }
-    }
-    // Arrays.
-    if (Array.isArray(unwrapped)) {
-        // 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.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 }));
-    }
-    // Records.
-    if ((0, helpers_1.reqoreIsRecord)(unwrapped)) {
-        var entries = Object.entries(unwrapped);
-        var content = ((0, jsx_runtime_1.jsx)(RecordTable, { entries: entries, ctx: ctx, theme: theme, depth: depth, path: path }));
-        if (depth === 0)
-            return content;
-        return ((0, jsx_runtime_1.jsx)(PreservedDetails, { initialOpen: depth < ctx.defaultExpandDepth, label: SECTION_LABEL('Object', entries.length), path: path, size: ctx.size, theme: theme, onToggle: ctx.onSectionToggle, children: content }));
-    }
-    return renderScalar(unwrapped, envelopeType, ctx, 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.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);
-    // 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 = {
-        theme: theme,
-        envelope: envelope,
-        parseEmbedded: parseEmbedded,
-        showTypes: showTypes,
-        inlineScalarArrays: inlineScalarArrays,
-        defaultExpandDepth: defaultExpandDepth,
-        size: size,
-        scalarOptions: { parseDate: parseDate, formatDate: formatDate },
-        onItemClick: onItemClick,
-        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)
-            : (0, helpers_1.reqoreIsRecord)(data)
-                ? SECTION_LABEL('Object', Object.keys(data).length)
-                : 'Value', path: [], size: size, theme: theme, onToggle: onSectionToggle, children: (0, jsx_runtime_1.jsx)(Tree, { "$size": size, "$theme": theme, className: 'reqore-data-view-root', children: renderTree(data, ctx, theme, 0, []) }) })) : ((0, jsx_runtime_1.jsx)(Tree, { "$size": size, "$theme": theme, className: 'reqore-data-view-root', children: renderTree(data, ctx, theme, 0, []) }));
-    return ((0, jsx_runtime_1.jsx)(Panel_1.ReqorePanel, __assign({}, panelProps, { ref: ref, size: size, customTheme: customTheme, inheritCustomTheme: inheritCustomTheme, intent: intent, flat: flat, className: "reqore-data-view ".concat((_b = panelProps.className) !== null && _b !== void 0 ? _b : '').trim(), children: body })));
-}));
-exports.ReqoreDataView.displayName = 'ReqoreDataView';
-var helpers_2 = require("./helpers.cjs");
-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, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
-//# sourceMappingURL=index.cjs.map