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

package/dist/components/DataView/index.js

@@ -1,3 +1,4 @@
+"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;
@@ -13,6 +14,39 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    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)
@@ -33,7 +67,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.
@@ -65,50 +104,50 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *     so the operator doesn't lose their place when expanding deep
  *     trees.
  */
-import { forwardRef, memo, useCallback, useLayoutEffect, useRef, useState, } from 'react';
-import { rgba } from 'polished';
-import styled, { css } from 'styled-components';
-import { GAP_FROM_SIZE, PADDING_FROM_SIZE, RADIUS_FROM_SIZE, TEXT_FROM_SIZE, } from '../../constants/sizes.js';
-import { MONO_FONT } from '../../constants/fonts.js';
-import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors.js';
-import { useReqoreTheme } from '../../hooks/useTheme.js';
-import ReqoreButton from '../Button/index.js';
-import ReqoreCheckbox from '../Checkbox/index.js';
-import ReqoreControlGroup from '../ControlGroup/index.js';
-import ReqoreDropdown from '../Dropdown/index.js';
-import ReqoreInput from '../Input/index.js';
-import { ReqoreP } from '../Paragraph/index.js';
-import { ReqorePanel } from '../Panel/index.js';
-import ReqoreTag from '../Tag/index.js';
-import { DEFAULT_ENVELOPE, reqoreCoerceValueToKind, reqoreDataValueIntent, reqoreDataValueKind, reqoreDeleteAtPath, reqoreEnvelopeType, reqoreFormatScalar, reqoreHasStructuredValue, reqoreIsRecord, reqoreRenameKeyAtPath, reqoreSetAtPath, reqoreUnwrapEnvelope, } from './helpers.js';
+var react_1 = require("react");
+var polished_1 = require("polished");
+var styled_components_1 = __importStar(require("styled-components"));
+var sizes_1 = require("../../constants/sizes");
+var fonts_1 = require("../../constants/fonts");
+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"));
+var helpers_1 = require("./helpers");
 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.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 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 GAP_FROM_SIZE[$size];
+    return sizes_1.GAP_FROM_SIZE[$size];
 }, function (_a) {
     var $size = _a.$size;
-    return TEXT_FROM_SIZE[$size];
+    return sizes_1.TEXT_FROM_SIZE[$size];
 }, function (_a) {
     var $theme = _a.$theme;
     return $theme.text.color || $theme.main;
-}, MONO_FONT);
-var TableShell = styled.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) {
+}, 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 rgba(getReadableColor($theme), 0.08);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.08);
 }, function (_a) {
     var $theme = _a.$theme;
-    return rgba(getReadableColor($theme), 0.18);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.18);
 }, function (_a) {
     var $size = _a.$size;
-    return RADIUS_FROM_SIZE[$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.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 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) {
@@ -130,29 +169,29 @@ var Row = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObjec
     return stacked ? "'key' 'value'" : "'key value'";
 }, function (_a) {
     var $size = _a.$size, $complex = _a.$complex, $stacked = _a.$stacked;
-    return $complex || $stacked ? GAP_FROM_SIZE[$size] : 8;
+    return $complex || $stacked ? sizes_1.GAP_FROM_SIZE[$size] : 8;
 }, function (_a) {
     var $size = _a.$size;
-    return PADDING_FROM_SIZE[$size] / 2;
+    return sizes_1.PADDING_FROM_SIZE[$size] / 2;
 }, function (_a) {
     var $size = _a.$size;
-    return PADDING_FROM_SIZE[$size];
+    return sizes_1.PADDING_FROM_SIZE[$size];
 }, function (_a) {
     var $theme = _a.$theme, $odd = _a.$odd;
-    return $odd ? rgba(getReadableColor($theme), 0.06) : 'transparent';
+    return $odd ? (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.06) : 'transparent';
 }, function (_a) {
     var $theme = _a.$theme;
-    return rgba(getReadableColor($theme), 0.08);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.08);
 }, function (_a) {
     var $complex = _a.$complex;
-    return $complex && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      flex-direction: column;\n    "], ["\n      flex-direction: column;\n    "])));
+    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.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"])), MONO_FONT, function (_a) {
+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 TEXT_FROM_SIZE[$size] - 1;
+    return sizes_1.TEXT_FROM_SIZE[$size] - 1;
 }, function (_a) {
     var $complex = _a.$complex, $size = _a.$size;
-    return $complex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-top: 4px;\n      padding-left: ", "px;\n    "], ["\n      margin-top: 4px;\n      padding-left: ", "px;\n    "])), PADDING_FROM_SIZE[$size] + 6);
+    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
@@ -163,79 +202,79 @@ var ValueCell = styled.div(templateObject_6 || (templateObject_6 = __makeTemplat
  *  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.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 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 PADDING_FROM_SIZE[$size];
+    return sizes_1.PADDING_FROM_SIZE[$size];
 }, function (_a) {
     var $theme = _a.$theme;
-    return changeLightness($theme.main, 0.2);
+    return (0, colors_1.changeLightness)($theme.main, 0.2);
 }, function (_a) {
     var $size = _a.$size;
-    return RADIUS_FROM_SIZE[$size];
-}, rgba(changeLightness('#000000', 0.05), 0.3), function (_a) {
+    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 getReadableColorFrom(changeLightness($theme.main, 0.1));
-}, MONO_FONT, function (_a) {
+    return (0, colors_1.getReadableColorFrom)((0, colors_1.changeLightness)($theme.main, 0.1));
+}, fonts_1.MONO_FONT, function (_a) {
     var $size = _a.$size;
-    return TEXT_FROM_SIZE[$size] - 1;
+    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 && 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    "])), changeLightness($theme.main, 0.35));
+    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.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 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 GAP_FROM_SIZE[$size];
+    return sizes_1.GAP_FROM_SIZE[$size];
 });
-var ArrayItem = styled.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 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 PADDING_FROM_SIZE[$size];
+    return sizes_1.PADDING_FROM_SIZE[$size];
 }, function (_a) {
     var $size = _a.$size;
-    return PADDING_FROM_SIZE[$size];
+    return sizes_1.PADDING_FROM_SIZE[$size];
 }, function (_a) {
     var $size = _a.$size;
-    return PADDING_FROM_SIZE[$size];
+    return sizes_1.PADDING_FROM_SIZE[$size];
 }, function (_a) {
     var $size = _a.$size;
-    return PADDING_FROM_SIZE[$size] + 6;
+    return sizes_1.PADDING_FROM_SIZE[$size] + 6;
 }, function (_a) {
     var $theme = _a.$theme;
-    return rgba(getReadableColor($theme), 0.08);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.08);
 }, function (_a) {
     var $theme = _a.$theme;
-    return rgba(getReadableColor($theme), 0.18);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.18);
 }, function (_a) {
     var $size = _a.$size;
-    return RADIUS_FROM_SIZE[$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.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.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 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 GAP_FROM_SIZE[$size];
+    return sizes_1.GAP_FROM_SIZE[$size];
 }, function (_a) {
     var $theme = _a.$theme;
-    return rgba(getReadableColor($theme), 0.12);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)($theme), 0.12);
 }, function (_a) {
     var $theme = _a.$theme;
-    return getReadableColor($theme);
-}, MONO_FONT);
-var ScalarRow = styled(ReqoreControlGroup)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex-wrap: wrap;\n"], ["\n  flex-wrap: wrap;\n"])));
-var SectionDetails = styled.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) {
+    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 GAP_FROM_SIZE[$size];
+    return sizes_1.GAP_FROM_SIZE[$size];
 });
-var SectionSummary = styled.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"])), MONO_FONT, function (_a) {
+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 TEXT_FROM_SIZE[$size] - 2;
+    return sizes_1.TEXT_FROM_SIZE[$size] - 2;
 }, function (_a) {
     var $theme = _a.$theme;
-    return getReadableColor($theme);
+    return (0, colors_1.getReadableColor)($theme);
 }, SectionDetails);
 var scrollPattern = /(auto|scroll|overlay)/;
 var isScrollable = function (element) {
@@ -261,20 +300,20 @@ var shiftScroll = function (target, delta) {
     }
     target.scrollTop += delta;
 };
-var PreservedDetails = memo(function (_a) {
+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 = useState(initialOpen), open = _b[0], setOpen = _b[1];
-    var summaryRef = useRef(null);
-    var pendingTopRef = useRef(null);
-    var scrollTargetRef = useRef(null);
-    var preserveScroll = useCallback(function () {
+    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 = useCallback(function () {
+    var toggle = (0, react_1.useCallback)(function () {
         preserveScroll();
         setOpen(function (current) {
             var next = !current;
@@ -282,17 +321,17 @@ var PreservedDetails = memo(function (_a) {
             return next;
         });
     }, [onToggle, path, preserveScroll]);
-    var onSummaryClick = useCallback(function (event) {
+    var onSummaryClick = (0, react_1.useCallback)(function (event) {
         event.preventDefault();
         toggle();
     }, [toggle]);
-    var onSummaryKey = useCallback(function (event) {
+    var onSummaryKey = (0, react_1.useCallback)(function (event) {
         if (event.key !== 'Enter' && event.key !== ' ')
             return;
         event.preventDefault();
         toggle();
     }, [toggle]);
-    useLayoutEffect(function () {
+    (0, react_1.useLayoutEffect)(function () {
         var previous = pendingTopRef.current;
         var summary = summaryRef.current;
         var target = scrollTargetRef.current;
@@ -302,7 +341,7 @@ var PreservedDetails = memo(function (_a) {
         scrollTargetRef.current = null;
         shiftScroll(target, summary.getBoundingClientRect().top - previous);
     }, [open]);
-    return (_jsxs(SectionDetails, { "$size": size, "$theme": theme, open: open, children: [_jsx(SectionSummary, { ref: summaryRef, "$size": size, "$theme": theme, role: 'button', "aria-expanded": open, tabIndex: 0, onClick: onSummaryClick, onKeyDown: onSummaryKey, children: label }), children] }));
+    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
@@ -310,42 +349,42 @@ PreservedDetails.displayName = 'ReqoreDataView.PreservedDetails';
  *  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 = reqoreFormatScalar(value, type, ctx.scalarOptions);
-    var kind = type ? reqoreDataValueKind(value, type) : scalar.kind;
-    var intent = reqoreDataValueIntent(kind);
-    return (_jsx(ReqoreTag, { 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 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.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 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 rgba(getReadableColor(theme), 0.35);
+    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 = memo(function (_a) {
+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 = useState(false), editing = _c[0], setEditing = _c[1];
-    var _d = useState(initialDraftFor(value, kind)), draft = _d[0], setDraft = _d[1];
-    var inputRef = useRef(null);
+    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.
-    useLayoutEffect(function () {
+    (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).
-    useLayoutEffect(function () {
+    (0, react_1.useLayoutEffect)(function () {
         var _a;
         if (!editing || isBoolean)
             return;
@@ -355,17 +394,17 @@ var EditableScalarCell = memo(function (_a) {
         node.focus();
         (_a = node.select) === null || _a === void 0 ? void 0 : _a.call(node);
     }, [editing, isBoolean]);
-    var startEditing = useCallback(function () {
+    var startEditing = (0, react_1.useCallback)(function () {
         if (!commit)
             return;
         setDraft(initialDraftFor(value, kind));
         setEditing(true);
     }, [commit, kind, value]);
-    var cancelEditing = useCallback(function () {
+    var cancelEditing = (0, react_1.useCallback)(function () {
         setDraft(initialDraftFor(value, kind));
         setEditing(false);
     }, [kind, value]);
-    var commitDraft = useCallback(function () {
+    var commitDraft = (0, react_1.useCallback)(function () {
         if (!commit) {
             setEditing(false);
             return;
@@ -401,7 +440,7 @@ var EditableScalarCell = memo(function (_a) {
         setEditing(false);
     }, [cancelEditing, commit, draft, isBoolean, isNumber, path, value]);
     if (!editing) {
-        return (_jsx(EditCellShell, { "data-editing": 'false', onClick: function (e) {
+        return ((0, jsx_runtime_1.jsx)(EditCellShell, { "data-editing": 'false', onClick: function (e) {
                 e.stopPropagation();
                 startEditing();
             }, onKeyDown: function (e) {
@@ -428,7 +467,7 @@ var EditableScalarCell = memo(function (_a) {
         var _a;
         if (newKind === kind)
             return;
-        var coerced = reqoreCoerceValueToKind(draft, newKind);
+        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));
@@ -441,11 +480,11 @@ var EditableScalarCell = memo(function (_a) {
         }
     };
     var currentTypeItem = TYPE_PICKER_ITEMS.find(function (entry) { return entry.kind === kind; });
-    return (_jsxs(ReqoreControlGroup, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, className: 'reqore-data-view-edit-group', children: [isBoolean ? (_jsx(ReqoreCheckbox, { checked: draft === true, size: ctx.size, 
+    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' })) : (_jsx(ReqoreInput, { size: ctx.size, type: isNumber ? 'number' : 'text', value: typeof draft === 'string' ? draft : '', ref: (function (node) {
+                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');
                     }
@@ -460,33 +499,33 @@ var EditableScalarCell = memo(function (_a) {
                         event.preventDefault();
                         cancelEditing();
                     }
-                }, className: 'reqore-data-view-edit' })), ctx.commitTypeChange ? (_jsx(ReqoreDropdown, { 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 ({
+                }, 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, _jsx(ReqoreButton, { size: ctx.size, icon: 'CheckLine', intent: 'success', flat: true, minimal: true, tooltip: 'Save (Enter)', onMouseDown: function (e) {
+                }); }) })) : 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' }), _jsx(ReqoreButton, { size: ctx.size, icon: 'CloseLine', flat: true, minimal: true, tooltip: 'Cancel (Esc)', onMouseDown: function (e) {
+                }, 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 = memo(function (_a) {
+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 = useState(false), editing = _c[0], setEditing = _c[1];
-    var _d = useState(keyName), draft = _d[0], setDraft = _d[1];
-    var inputRef = useRef(null);
-    useLayoutEffect(function () {
+    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]);
-    useLayoutEffect(function () {
+    (0, react_1.useLayoutEffect)(function () {
         var _a;
         if (!editing)
             return;
@@ -496,17 +535,17 @@ var EditableKeyCell = memo(function (_a) {
         node.focus();
         (_a = node.select) === null || _a === void 0 ? void 0 : _a.call(node);
     }, [editing]);
-    var start = useCallback(function () {
+    var start = (0, react_1.useCallback)(function () {
         if (!commit)
             return;
         setDraft(keyName);
         setEditing(true);
     }, [commit, keyName]);
-    var cancel = useCallback(function () {
+    var cancel = (0, react_1.useCallback)(function () {
         setDraft(keyName);
         setEditing(false);
     }, [keyName]);
-    var submit = useCallback(function () {
+    var submit = (0, react_1.useCallback)(function () {
         var trimmed = draft.trim();
         if (!commit || !trimmed || trimmed === keyName) {
             cancel();
@@ -520,12 +559,12 @@ var EditableKeyCell = memo(function (_a) {
         setEditing(false);
     }, [cancel, commit, draft, keyName, parentPath, siblingKeys]);
     if (!editing) {
-        return (_jsx(EditCellShell, { "data-editing": 'false', onClick: function (e) {
+        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: _jsx(ReqoreTag, { 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' }) }));
+            }, 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 (_jsxs(ReqoreControlGroup, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, className: 'reqore-data-view-key-edit-group', children: [_jsx(ReqoreInput, { size: ctx.size, value: draft, ref: (function (node) {
+    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');
                     }
@@ -540,10 +579,10 @@ var EditableKeyCell = memo(function (_a) {
                         e.preventDefault();
                         cancel();
                     }
-                }, className: 'reqore-data-view-key-edit' }), _jsx(ReqoreButton, { size: ctx.size, icon: 'CheckLine', intent: 'success', flat: true, minimal: true, tooltip: 'Rename (Enter)', onMouseDown: function (e) {
+                }, 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' }), _jsx(ReqoreButton, { size: ctx.size, icon: 'CloseLine', flat: true, minimal: true, tooltip: 'Cancel (Esc)', onMouseDown: function (e) {
+                }, 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' })] }));
@@ -556,12 +595,12 @@ EditableKeyCell.displayName = 'ReqoreDataView.EditableKeyCell';
  *  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.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 = memo(function (_a) {
+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 (_jsx(RowActionsContainer, { className: 'reqore-data-view-row-actions', onClick: function (e) { return e.stopPropagation(); }, children: _jsx(ReqoreButton, { 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' }) }));
+    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. */
@@ -590,16 +629,16 @@ var TYPE_PICKER_ITEMS = [
     { kind: 'array', label: 'Array (list)', icon: 'BracketsLine' },
     { kind: 'null', label: 'Null', icon: 'CircleLine' },
 ];
-var AddRowShell = styled.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 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 rgba(getReadableColor(theme), 0.2);
+    return (0, polished_1.rgba)((0, colors_1.getReadableColor)(theme), 0.2);
 });
-var AddEntryAffordance = memo(function (_a) {
+var AddEntryAffordance = (0, react_1.memo)(function (_a) {
     var _b;
     var ctx = _a.ctx, parentPath = _a.parentPath, context = _a.context;
-    var _c = useState(false), open = _c[0], setOpen = _c[1];
-    var _d = useState(''), key = _d[0], setKey = _d[1];
-    var _e = useState('string'), valueKind = _e[0], setValueKind = _e[1];
+    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 () {
@@ -623,49 +662,49 @@ var AddEntryAffordance = memo(function (_a) {
         reset();
     };
     if (!open) {
-        return (_jsx(AddRowShell, { className: 'reqore-data-view-add-row', "data-state": 'collapsed', children: _jsx(ReqoreButton, { size: ctx.size, icon: 'AddLine', flat: true, minimal: true, onClick: function () { return setOpen(true); }, label: context.kind === 'record' ? 'Add property' : 'Add item' }) }));
+        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 (_jsxs(AddRowShell, { className: 'reqore-data-view-add-row', "data-state": 'expanded', onKeyDown: function (e) {
+    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' ? (_jsx(ReqoreInput, { size: ctx.size, placeholder: 'property name', value: key, onChange: function (e) {
+        }, 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, _jsx(ReqoreDropdown, { 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 ({
+                }, 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); },
-                }); }) }), _jsx(ReqoreButton, { size: ctx.size, icon: 'CheckLine', intent: 'success', flat: true, minimal: true, onClick: submit, label: 'Add', className: 'reqore-data-view-add-commit' }), _jsx(ReqoreButton, { size: ctx.size, icon: 'CloseLine', flat: true, minimal: true, onClick: reset, tooltip: 'Cancel', className: 'reqore-data-view-add-cancel' })] }));
+                }); }) }), (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 : reqoreUnwrapEnvelope(value, ctx.envelope);
+    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) && !reqoreIsRecord(unwrapped);
+    return !Array.isArray(unwrapped) && !(0, helpers_1.reqoreIsRecord)(unwrapped);
 };
 var renderScalar = function (value, type, ctx, path) {
-    var scalar = reqoreFormatScalar(value, type, ctx.scalarOptions);
-    var kind = type ? reqoreDataValueKind(value, type) : scalar.kind;
-    var intent = reqoreDataValueIntent(kind);
+    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 = (_jsx(EditableScalarCell, { value: value, kind: kind, type: type, ctx: ctx, path: path }));
+        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 (_jsxs(ScalarRow, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, children: [cell, _jsx(ReqoreTag, { size: ctx.size, flat: true, minimal: true, label: displayType, effect: { uppercase: true, spaced: 1, opacity: 0.6 }, className: 'reqore-data-view-type' })] }));
+        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) {
@@ -678,7 +717,7 @@ var renderScalar = function (value, type, ctx, path) {
         // the break is spec-guaranteed regardless of the source payload's
         // original convention.
         var displayText = scalar.display.replace(/\r\n?/g, '\n');
-        var block = (_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
+        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) {
@@ -690,7 +729,7 @@ var renderScalar = function (value, type, ctx, path) {
                 : undefined, children: displayText }));
         if (!ctx.showTypes || !displayType)
             return block;
-        return (_jsxs(ScalarRow, { gapSize: 'tiny', verticalAlign: 'top', size: ctx.size, fluid: true, children: [block, _jsx(ReqoreTag, { size: ctx.size, flat: true, minimal: true, label: displayType, effect: { uppercase: true, spaced: 1, opacity: 0.6 }, className: 'reqore-data-view-type' })] }));
+        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
@@ -699,7 +738,7 @@ var renderScalar = function (value, type, ctx, path) {
     // 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 = (_jsx(ReqoreTag, { size: ctx.size, flat: false, minimal: true, 
+    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
@@ -712,7 +751,7 @@ var renderScalar = function (value, type, ctx, path) {
             : undefined, className: 'reqore-data-view-value' }));
     if (!ctx.showTypes || !displayType)
         return tag;
-    return (_jsxs(ScalarRow, { gapSize: 'tiny', verticalAlign: 'center', size: ctx.size, children: [tag, _jsx(ReqoreTag, { size: ctx.size, flat: true, minimal: true, label: displayType, effect: { uppercase: true, spaced: 1, opacity: 0.6 }, className: 'reqore-data-view-type' })] }));
+    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
@@ -731,11 +770,11 @@ var STACK_BELOW_PX = 360;
  * this component is where the `useState` + `ResizeObserver` lifecycle
  * live.
  */
-var RecordTable = memo(function (_a) {
+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 = useRef(null);
-    var _b = useState(false), stacked = _b[0], setStacked = _b[1];
-    useLayoutEffect(function () {
+    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;
@@ -754,28 +793,28 @@ var RecordTable = memo(function (_a) {
         var k = _a[0];
         return k;
     });
-    return (_jsxs(TableShell, { ref: shellRef, "$size": ctx.size, "$theme": theme, "$nested": depth > 0, className: 'reqore-data-view-record', children: [entries.map(function (_a, index) {
+    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 = reqoreIsRecord(ctx.envelope === false ? item : reqoreUnwrapEnvelope(item, ctx.envelope)) ||
-                    (Array.isArray(ctx.envelope === false ? item : reqoreUnwrapEnvelope(item, ctx.envelope)) &&
+                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
-                                : reqoreUnwrapEnvelope(item, ctx.envelope)).every(function (entry) { return isInlineableScalarValue(entry, ctx); })));
+                                : (0, helpers_1.reqoreUnwrapEnvelope)(item, ctx.envelope)).every(function (entry) { return isInlineableScalarValue(entry, ctx); })));
                 var rowPath = __spreadArray(__spreadArray([], path, true), [key], false);
-                return (_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 ? (_jsx(EditableKeyCell, { keyName: key, siblingKeys: siblingKeys, parentPath: path, ctx: ctx })) : (_jsx(ReqoreTag, { 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' })), _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 ? (_jsx(RowActions, { ctx: ctx, path: rowPath, ariaLabel: "Remove ".concat(key) })) : null] }, "".concat(path.join('.'), "-").concat(key)));
-            }), ctx.editable ? (_jsx(AddEntryAffordance, { ctx: ctx, parentPath: path, context: { kind: 'record', existingKeys: siblingKeys } })) : null] }));
+                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 : reqoreEnvelopeType(value, ctx.envelope);
-    var unwrapped = ctx.envelope === false ? value : reqoreUnwrapEnvelope(value, ctx.envelope);
+    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 (_jsxs(Tree, { "$size": ctx.size, "$theme": theme, children: [parsed.prefix ? (_jsx(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))] }));
+            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.
@@ -787,70 +826,70 @@ var renderTree = function (value, ctx, theme, depth, path) {
             ctx.inlineScalarArrays &&
             unwrapped.every(function (item) { return isInlineableScalarValue(item, ctx); });
         if (allInlineable) {
-            return (_jsxs(ScalarRow, { size: ctx.size, gapSize: 'small', verticalAlign: 'center', children: [envelopeType ? (_jsx(ReqoreTag, { 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 (_jsx("span", { children: renderScalar(ctx.envelope === false ? item : reqoreUnwrapEnvelope(item, ctx.envelope), ctx.envelope === false ? undefined : reqoreEnvelopeType(item, ctx.envelope), ctx, __spreadArray(__spreadArray([], path, true), [String(index)], false)) }, "".concat(path.join('.'), "-").concat(index))); })] }));
+            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 = (_jsxs(ArrayStack, { "$size": ctx.size, "$theme": theme, className: 'reqore-data-view-array', children: [unwrapped.map(function (item, 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 (_jsxs(ArrayItem, { "$size": ctx.size, "$theme": theme, className: 'reqore-data-view-array-item reqore-data-view-row', children: [_jsxs(ArrayItemContent, { children: [unwrapped.length > 1 ? (_jsx(ArrayItemIndex, { "$size": ctx.size, "$theme": theme, children: index + 1 })) : null, renderTree(item, ctx, theme, depth + 1, itemPath)] }), ctx.editable ? (_jsx(RowActions, { ctx: ctx, path: itemPath, ariaLabel: "Remove item ".concat(index + 1) })) : null] }, "".concat(path.join('.'), "-").concat(index)));
-                }), ctx.editable ? (_jsx(AddEntryAffordance, { ctx: ctx, parentPath: path, context: { kind: 'array', length: unwrapped.length } })) : null] }));
+                    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 (_jsx(PreservedDetails, { initialOpen: depth < ctx.defaultExpandDepth, label: SECTION_LABEL('List', unwrapped.length), path: path, size: ctx.size, theme: theme, onToggle: ctx.onSectionToggle, children: 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 (reqoreIsRecord(unwrapped)) {
+    if ((0, helpers_1.reqoreIsRecord)(unwrapped)) {
         var entries = Object.entries(unwrapped);
-        var content = (_jsx(RecordTable, { entries: entries, ctx: ctx, theme: theme, depth: depth, path: path }));
+        var content = ((0, jsx_runtime_1.jsx)(RecordTable, { entries: entries, ctx: ctx, theme: theme, depth: depth, path: path }));
         if (depth === 0)
             return content;
-        return (_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 ((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);
 };
-export var ReqoreDataView = memo(forwardRef(function (_a, ref) {
+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 ? 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 = useReqoreTheme('main', customTheme, intent, undefined, inheritCustomTheme);
+    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 &&
-        !reqoreHasStructuredValue(data, envelope === false ? undefined : envelope);
-    var dataRef = useRef(data);
-    useLayoutEffect(function () {
+        !(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 = useCallback(function (path, value) {
+    var commitScalar = (0, react_1.useCallback)(function (path, value) {
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(path, value);
         if (!onDataChange)
             return;
-        var next = reqoreSetAtPath(dataRef.current, path, value);
+        var next = (0, helpers_1.reqoreSetAtPath)(dataRef.current, path, value);
         onDataChange(next);
     }, [onDataChange, onValueChange]);
-    var commitDelete = useCallback(function (path) {
+    var commitDelete = (0, react_1.useCallback)(function (path) {
         onRemoveProperty === null || onRemoveProperty === void 0 ? void 0 : onRemoveProperty(path);
         if (!onDataChange)
             return;
-        var next = reqoreDeleteAtPath(dataRef.current, path);
+        var next = (0, helpers_1.reqoreDeleteAtPath)(dataRef.current, path);
         onDataChange(next);
     }, [onDataChange, onRemoveProperty]);
-    var commitRename = useCallback(function (parentPath, oldKey, newKey) {
+    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 = reqoreRenameKeyAtPath(dataRef.current, parentPath, oldKey, newKey);
+        var next = (0, helpers_1.reqoreRenameKeyAtPath)(dataRef.current, parentPath, oldKey, newKey);
         onDataChange(next);
     }, [onDataChange, onRenameProperty]);
-    var commitAdd = useCallback(function (parentPath, keyOrIndex, initialValue) {
+    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 = reqoreSetAtPath(dataRef.current, __spreadArray(__spreadArray([], parentPath, true), [String(keyOrIndex)], false), initialValue);
+        var next = (0, helpers_1.reqoreSetAtPath)(dataRef.current, __spreadArray(__spreadArray([], parentPath, true), [String(keyOrIndex)], false), initialValue);
         onDataChange(next);
     }, [onAddProperty, onDataChange]);
-    var commitTypeChange = useCallback(function (path, kind) {
+    var commitTypeChange = (0, react_1.useCallback)(function (path, kind) {
         onChangeType === null || onChangeType === void 0 ? void 0 : onChangeType(path, kind);
         if (!onDataChange)
             return;
@@ -866,14 +905,14 @@ export var ReqoreDataView = memo(forwardRef(function (_a, ref) {
                 var index = Number.parseInt(segment, 10);
                 current = Number.isNaN(index) ? undefined : current[index];
             }
-            else if (reqoreIsRecord(current)) {
+            else if ((0, helpers_1.reqoreIsRecord)(current)) {
                 current = current[segment];
             }
             else {
                 return;
             }
         }
-        var next = reqoreSetAtPath(dataRef.current, path, reqoreCoerceValueToKind(current, kind));
+        var next = (0, helpers_1.reqoreSetAtPath)(dataRef.current, path, (0, helpers_1.reqoreCoerceValueToKind)(current, kind));
         onDataChange(next);
     }, [onChangeType, onDataChange]);
     var ctx = {
@@ -896,14 +935,27 @@ export var ReqoreDataView = memo(forwardRef(function (_a, ref) {
         commitAdd: editable ? commitAdd : undefined,
         commitTypeChange: editable ? commitTypeChange : undefined,
     };
-    var body = empty ? (_jsx(ReqoreP, { size: size, effect: { opacity: 0.65 }, children: emptyText })) : collapsibleRoot ? (_jsx(PreservedDetails, { initialOpen: true, label: Array.isArray(data)
+    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)
-            : reqoreIsRecord(data)
+            : (0, helpers_1.reqoreIsRecord)(data)
                 ? SECTION_LABEL('Object', Object.keys(data).length)
-                : 'Value', path: [], size: size, theme: theme, onToggle: onSectionToggle, children: _jsx(Tree, { "$size": size, "$theme": theme, className: 'reqore-data-view-root', children: renderTree(data, ctx, theme, 0, []) }) })) : (_jsx(Tree, { "$size": size, "$theme": theme, className: 'reqore-data-view-root', children: renderTree(data, ctx, theme, 0, []) }));
-    return (_jsx(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 })));
+                : '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 })));
 }));
-ReqoreDataView.displayName = 'ReqoreDataView';
-export { DEFAULT_ENVELOPE, reqoreCoerceValueToKind, reqoreDataValueIntent, reqoreDataValueKind, reqoreDeleteAtPath, reqoreEnvelopeType, reqoreFormatScalar, reqoreHasStructuredValue, reqoreIsEnvelope, reqoreIsRecord, reqoreRenameKeyAtPath, reqoreSetAtPath, reqoreUnwrapEnvelope, } from './helpers.js';
+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, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
 //# sourceMappingURL=index.js.map