xmlui 0.9.63 → 0.9.64

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.63",
+    "version": "0.9.64",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -48,6 +48,8 @@
         "@tanstack/react-query-devtools": "^4.36.1",
         "@tanstack/react-table": "8.17.3",
         "@tanstack/react-virtual": "3.10.8",
+        "@tiptap/react": "^2.23.0",
+        "@tiptap/starter-kit": "^2.23.0",
         "@types/chroma-js": "^3.1.1",
         "@types/color": "3.0.6",
         "@vitejs/plugin-react": "4.3.0",
@@ -66,6 +68,7 @@
         "file-saver": "^2.0.5",
         "glob": "7.2.0",
         "immer": "9.0.16",
+        "js-yaml": "^4.1.0",
         "lodash-es": "4.17.21",
         "memoize-one": "6.0.0",
         "msw": "2.8.4",
@@ -99,6 +102,7 @@
         "scroll-into-view-if-needed": "^3.1.0",
         "shiki": "^1.14.1",
         "ts-node": "10.9.1",
+        "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",
         "use-context-selector": "1.4.1",
         "virtua": "0.40.0",
@@ -116,6 +120,7 @@
         "@rollup/pluginutils": "5.1.0",
         "@types/adm-zip": "0.5.4",
         "@types/glob": "7.2.0",
+        "@types/js-yaml": "^4.0.9",
         "@types/lodash-es": "4.17.6",
         "@types/node": "18.11.5",
         "@types/react": "18.2.23",

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -104,5 +104,10 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
         }));
     }, [colorValues, dataKeys]);
     const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ dataKeys, nameKey });
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: data, layout: layout, margin: { left: 10, top: 0, bottom: 0, right: 10 }, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: hideX, tick: { fill: "currentColor" } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: tickFormatter, tick: { fill: "currentColor" } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: tickFormatter, height: hideX ? 0 : 30, hide: hideX, tick: !hideTickX && { fill: "currentColor" } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: !hideTickY && { fill: "currentColor" }, hide: hideY, width: hideY ? 0 : 60 })] })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined }, index))), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
+                    flexGrow: 1,
+                    minHeight: 0,
+                    width: style.width || "100%",
+                    height: style.height || "100%",
+                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: data, layout: layout, margin: { left: 10, top: 0, bottom: 0, right: 10 }, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: hideX, tick: { fill: "currentColor" } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: tickFormatter, tick: { fill: "currentColor" } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: tickFormatter, height: hideX ? 0 : 30, hide: hideX, tick: !hideTickX && { fill: "currentColor" } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: !hideTickY && { fill: "currentColor" }, hide: hideY, width: hideY ? 0 : 60 })] })), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined }, index))), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) }) })] }));
 }

package/dist/scripts/src/components/Charts/LineChart/LineChartNative.js

@@ -99,5 +99,10 @@ function LineChart({ data, dataKeys = [], nameKey, style, hideX = false, hideToo
         }));
     }, [colorValues, dataKeys]);
     const chartContextValue = (0, ChartProvider_1.useChartContextValue)({ nameKey, dataKeys });
-    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft }, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: "preserveEnd", dataKey: nameKey, tickLine: false, hide: hideX, axisLine: false, tick: { fill: "currentColor" }, tickFormatter: tickFormatter, minTickGap: 5 }), !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { dataKey: key, type: "monotone", stroke: config[key].color, dot: false }, index))), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ChartProvider_1.default, { value: chartContextValue, children: [children, (0, jsx_runtime_1.jsx)("div", { style: {
+                    flexGrow: 1,
+                    minHeight: 0,
+                    width: style.width || "100%",
+                    height: style.height || "100%",
+                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { accessibilityLayer: true, data: data, margin: { top: marginTop, right: marginRight, bottom: marginBottom, left: marginLeft }, children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { interval: "preserveEnd", dataKey: nameKey, tickLine: false, hide: hideX, axisLine: false, tick: { fill: "currentColor" }, tickFormatter: tickFormatter, minTickGap: 5 }), !hideTooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Line, { dataKey: key, type: "monotone", stroke: config[key].color, dot: false }, index))), chartContextValue.legend ? chartContextValue.legend : showLegend && (0, jsx_runtime_1.jsx)(recharts_1.Legend, {})] }) }) })] }));
 }

package/dist/scripts/src/components/CodeBlock/highlight-code.js

@@ -131,7 +131,7 @@ function extractMetaFromChildren(node, keys, code = "") {
             /* [CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(
               meta[CodeHighlighterMetaKeys.rowNumbers.data],
             ), */
-            [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code.split("\n").length, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
+            [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
             [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstrings.data]),
             [exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data], true),
         };
@@ -145,11 +145,12 @@ function parseBoolean(str) {
         return false;
     return false;
 }
-function parseRowHighlights(codeLines, str) {
+function parseRowHighlights(code, str) {
     if (!str)
         return [];
     if (str === "")
         return [];
+    const codeLines = code.split("\n");
     return str
         .split(",")
         .map((item) => {
@@ -159,33 +160,53 @@ function parseRowHighlights(codeLines, str) {
         let end = 0;
         if (split.length === 0)
             return { start, end, properties: { class: highlightRowsClass } };
-        const val = parseAndRemoveIfInvalid(split[0]);
-        start = val - 1;
-        if (split.length === 1) {
-            end = val;
+        // Start Index
+        const startIdx = parseAndValidate(split[0]) - 1;
+        if (startIdx > 0) {
+            start = getLineStartIndex(startIdx);
         }
-        else {
-            end = parseAndRemoveIfInvalid(split[1]);
+        // End Index
+        const endIdx = split.length === 1 ? startIdx : parseAndValidate(split[1]) - 1;
+        let endLineLength = 0;
+        if (endIdx >= 0 && codeLines[endIdx] !== undefined) {
+            endLineLength = codeLines[endIdx].length;
         }
+        end = getLineStartIndex(endIdx) + endLineLength;
         return { start, end, properties: { class: highlightRowsClass } };
     })
         .filter((item) => {
-        if (item.start === -1 || item.end === -1)
+        if (item.start <= -1 || item.end <= -1)
             return false;
-        if (item.start > codeLines || item.end > codeLines)
+        if (item.start > code.length || item.end > code.length)
             return false;
         return true;
     });
-    function parseAndRemoveIfInvalid(value) {
+    function parseAndValidate(value) {
         const parsed = parseInt(value, 10);
         if (Number.isNaN(parsed))
             return -1;
-        if (parsed < 0)
+        if (parsed <= 0)
             return -1;
-        if (parsed > codeLines)
+        if (parsed > codeLines.length)
             return -1;
         return parsed;
     }
+    function getLineStartIndex(lineNumber) {
+        if (lineNumber < 0)
+            return -1;
+        if (lineNumber === 0)
+            return 0;
+        let count = 0;
+        let index = 0;
+        while (count < lineNumber && index !== -1) {
+            index = code.indexOf('\n', index);
+            if (index !== -1) {
+                index++; // Move past the '\n'
+                count++;
+            }
+        }
+        return (index !== -1) ? index : -1;
+    }
 }
 function parseSubstringHighlights(code, str, emphasized = false) {
     if (!str)

package/dist/scripts/src/components/ComponentProvider.js

@@ -110,6 +110,7 @@ const LabelList_1 = require("./Charts/LabelList/LabelList");
 const Legend_1 = require("./Charts/Legend/Legend");
 const LineChart_1 = require("./Charts/LineChart/LineChart");
 const PieChart_1 = require("./Charts/PieChart/PieChart");
+const TableEditor_1 = require("./TableEditor/TableEditor");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -260,6 +261,9 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_HelloWorld !== "false") {
             this.registerCoreComponent(HelloWorld_1.helloWorldComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_TableEditor !== "false") {
+            this.registerCoreComponent(TableEditor_1.editorComponentRenderer);
+        }
         if (process.env.VITE_USED_COMPONENTS_Checkbox !== "false") {
             this.registerCoreComponent(Checkbox_1.checkboxComponentRenderer);
         }

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -29,6 +29,7 @@ const COMP = "FormItem";
 const filteredValidationSeverityValues = FormContext_1.validationSeverityValues.filter((value) => value !== "none");
 exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
+    allowArbitraryProps: true,
     description: "`FormItem` wraps individual input controls within a `Form`, providing data " +
         "binding, validation, labeling, and layout functionality. It connects form " +
         "controls to the parent form's data model and handles validation feedback " +

package/dist/scripts/src/components/FormSection/FormSection.js

@@ -10,11 +10,51 @@ exports.FormSectionMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`FormSection` groups elements within a `Form`. Child components are placed in " +
         "a [FlowLayout](/components/FlowLayout).",
+    props: {
+        heading: {
+            description: "The heading text to be displayed at the top of the form section.",
+            type: "string",
+        },
+        headingLevel: {
+            description: "The semantic and visual level of the heading.",
+            availableValues: ["h1", "h2", "h3", "h4", "h5", "h6"],
+            defaultValue: "h3",
+        },
+        headingWeight: {
+            description: "The font weight of the heading.",
+            type: "string",
+            defaultValue: "bold",
+        },
+        info: {
+            description: "Informational text displayed below the heading.",
+            type: "string",
+        },
+        infoFontSize: {
+            description: "The font size of the informational text.",
+            type: "string",
+            defaultValue: "0.8rem",
+        },
+        paddingTop: {
+            description: "The top padding of the FlowLayout where the section's children are placed.",
+            type: "string",
+            defaultValue: "$space-normal",
+        },
+        columnGap: {
+            description: "The gap between columns of items within the section.",
+            type: "string",
+            defaultValue: "3rem",
+        },
+        rowGap: {
+            description: "The gap between rows of items within the section.",
+            type: "string",
+            defaultValue: "$space-normal",
+        },
+    },
 });
 const componentSource = `
 <Component name="FormSection">
   <VStack paddingBottom="{$props.paddingBottom ?? '1rem'}" gap="0" width="100%">
-    <Heading 
+    <Heading
       when="{!!$props.heading}"
       marginBottom="$space-tight"
       level="{$props.headingLevel ?? 'h3'}"
@@ -25,7 +65,7 @@ const componentSource = `
       fontSize="{$props.infoFontSize ?? '0.8rem'}"
       paddingBottom="$space-normal"
       value="{$props.info}" />
-    <FlowLayout 
+    <FlowLayout
       width="100%"
       paddingTop="{$props.paddingTop ?? '$space-normal'}"
       columnGap="{$props.columnGap ?? '3rem'}"

package/dist/scripts/src/components/Icon/TableDeleteColumnIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TableDeleteColumnIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TableDeleteColumnIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: "0 0 24 16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "24", height: "16" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "1.5", y: "1.5", width: "13", height: "11", rx: "1" }), (0, jsx_runtime_1.jsx)("line", { x1: "5.5", y1: "3.5", x2: "5.5", y2: "11.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "9", y1: "3.5", x2: "9", y2: "11.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "17", y1: "8", x2: "21", y2: "8" })] })));
+}

package/dist/scripts/src/components/Icon/TableDeleteRowIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TableDeleteRowIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TableDeleteRowIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: "0 0 24 16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "1.5", y: "1.5", width: "13", height: "11", rx: "1" }), (0, jsx_runtime_1.jsx)("line", { x1: "1.5", y1: "5.5", x2: "14.5", y2: "5.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "1.5", y1: "9.5", x2: "14.5", y2: "9.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "17", y1: "8", x2: "21", y2: "8" })] })));
+}

package/dist/scripts/src/components/Icon/TableInsertColumnIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TableInsertColumnIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TableInsertColumnIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: "0 0 24 16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "24", height: "16" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "1.5", y: "1.5", width: "13", height: "11", rx: "1" }), (0, jsx_runtime_1.jsx)("line", { x1: "5.5", y1: "3.5", x2: "5.5", y2: "11.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "9", y1: "3.5", x2: "9", y2: "11.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "19", y1: "6.5", x2: "19", y2: "9.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "17.5", y1: "8", x2: "20.5", y2: "8" })] })));
+}

package/dist/scripts/src/components/Icon/TableInsertRowIcon.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TableInsertRowIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function TableInsertRowIcon(props) {
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: "0 0 24 16", stroke: "currentColor", fill: "none", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, props, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "1.5", y: "1.5", width: "13", height: "11", rx: "1" }), (0, jsx_runtime_1.jsx)("line", { x1: "1.5", y1: "5.5", x2: "14.5", y2: "5.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "1.5", y1: "9.5", x2: "14.5", y2: "9.5" }), (0, jsx_runtime_1.jsx)("line", { x1: "19", y1: "6", x2: "19", y2: "10" }), (0, jsx_runtime_1.jsx)("line", { x1: "17", y1: "8", x2: "21", y2: "8" })] })));
+}

package/dist/scripts/src/components/IconProvider.js

@@ -8,6 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconProvider = IconProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -88,6 +91,10 @@ const AdmonitionWarning_1 = require("./Icon/AdmonitionWarning");
 const AdmonitionDanger_1 = require("./Icon/AdmonitionDanger");
 const AdmonitionNote_1 = require("./Icon/AdmonitionNote");
 const AdmonitionTip_1 = require("./Icon/AdmonitionTip");
+const TableInsertRowIcon_1 = __importDefault(require("./Icon/TableInsertRowIcon"));
+const TableDeleteRowIcon_1 = __importDefault(require("./Icon/TableDeleteRowIcon"));
+const TableInsertColumnIcon_1 = __importDefault(require("./Icon/TableInsertColumnIcon"));
+const TableDeleteColumnIcon_1 = __importDefault(require("./Icon/TableDeleteColumnIcon"));
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -227,6 +234,10 @@ registerIconRenderer("arrowdown", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrow
 registerIconRenderer("square", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquare, Object.assign({}, props)));
 registerIconRenderer("squarehalf", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquareHalf, Object.assign({}, props)));
 registerIconRenderer("squarefill", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquareFill, Object.assign({}, props)));
+registerIconRenderer("table-insert-row", (props) => (0, jsx_runtime_1.jsx)(TableInsertRowIcon_1.default, Object.assign({}, props)));
+registerIconRenderer("table-delete-row", (props) => (0, jsx_runtime_1.jsx)(TableDeleteRowIcon_1.default, Object.assign({}, props)));
+registerIconRenderer("table-insert-column", (props) => (0, jsx_runtime_1.jsx)(TableInsertColumnIcon_1.default, Object.assign({}, props)));
+registerIconRenderer("table-delete-column", (props) => (0, jsx_runtime_1.jsx)(TableDeleteColumnIcon_1.default, Object.assign({}, props)));
 function IconProvider({ children }) {
     const getRegisteredIconNames = (0, react_1.useCallback)(() => {
         return Array.from(pool.keys());

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -97,11 +97,11 @@ function PreTagComponent({ id, children, codeHighlighter }) {
     return ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { meta: highlighterResult.meta, textToCopy: highlighterResult.codeStr, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "codefence", syntaxHighlightClasses: highlighterResult.classNames, dangerouslySetInnerHTML: { __html: highlighterResult.cleanedHtmlStr } }) }));
 }
 exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports.defaultProps.removeIndents, children, style, codeHighlighter, showHeadingAnchors, }) {
+    const imageInfo = (0, react_1.useRef)(new Map());
     if (typeof children !== "string") {
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    const imageInfo = (0, react_1.useRef)(new Map());
     const getImageKey = (node) => { var _a, _b, _c, _d; return `${(_b = (_a = node === null || node === void 0 ? void 0 : node.position) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.offset}|${(_d = (_c = node === null || node === void 0 ? void 0 : node.position) === null || _c === void 0 ? void 0 : _c.end) === null || _d === void 0 ? void 0 : _d.offset}`; };
     const markdownImgParser = () => {
         imageInfo.current.clear();
@@ -231,14 +231,14 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports
                     return (0, jsx_runtime_1.jsx)("tfoot", { className: HtmlTags_module_scss_1.default.htmlTfoot, children: children });
                 },
                 samp(_a) {
-                    var _b, _c;
+                    var _b, _c, _d;
                     var props = __rest(_a, []);
                     const markdownContentBase64 = props === null || props === void 0 ? void 0 : props["data-pg-markdown"];
                     const markdownContent = markdownContentBase64 ? atob(markdownContentBase64) : "";
                     const dataContentBase64 = props === null || props === void 0 ? void 0 : props["data-pg-content"];
                     const jsonContent = atob(dataContentBase64);
                     const appProps = JSON.parse(jsonContent);
-                    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { markdown: markdownContent, app: appProps.app, config: appProps.config, components: appProps.components, api: appProps.api, activeTheme: appProps.activeTheme, activeTone: appProps.activeTone, title: appProps.name, height: appProps.height, allowPlaygroundPopup: !appProps.noPopup, withFrame: appProps.noFrame ? false : true, splitView: (_b = appProps.splitView) !== null && _b !== void 0 ? _b : false, initiallyShowCode: (_c = appProps.initiallyShowCode) !== null && _c !== void 0 ? _c : false, popOutUrl: appProps.popOutUrl }));
+                    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { markdown: markdownContent, app: appProps.app, config: appProps.config, components: appProps.components, api: appProps.api, activeTheme: appProps.activeTheme, activeTone: appProps.activeTone, title: appProps.name, height: appProps.height, allowPlaygroundPopup: !appProps.noPopup, withFrame: appProps.noFrame ? false : true, noHeader: (_b = appProps.noHeader) !== null && _b !== void 0 ? _b : false, splitView: (_c = appProps.splitView) !== null && _c !== void 0 ? _c : false, initiallyShowCode: (_d = appProps.initiallyShowCode) !== null && _d !== void 0 ? _d : false, popOutUrl: appProps.popOutUrl }));
                 },
                 section(_a) {
                     var { children } = _a, props = __rest(_a, ["children"]);

package/dist/scripts/src/components/Markdown/utils.js

@@ -54,6 +54,10 @@ function parseSegmentProps(input) {
     if (/\bnoFrame\b/.test(input)) {
         segment.noFrame = true;
     }
+    // --- Match the "noHeader" flag
+    if (/\bnoHeader\b/.test(input)) {
+        segment.noHeader = true;
+    }
     // --- Match the "splitView" flag
     if (/\bsplitView\b/.test(input)) {
         segment.splitView = true;
@@ -196,7 +200,7 @@ function parsePlaygroundPattern(content) {
     }
 }
 function convertPlaygroundPatternToMarkdown(content) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const pattern = parsePlaygroundPattern(content);
     // --- Determine max order for segments
     let maxOrder = 0;
@@ -228,9 +232,10 @@ function convertPlaygroundPatternToMarkdown(content) {
     const pgContent = {
         noPopup: (_d = pattern.default) === null || _d === void 0 ? void 0 : _d.noPopup,
         noFrame: (_e = pattern.default) === null || _e === void 0 ? void 0 : _e.noFrame,
-        splitView: (_f = pattern.default) === null || _f === void 0 ? void 0 : _f.splitView,
-        initiallyShowCode: (_g = pattern.default) === null || _g === void 0 ? void 0 : _g.initiallyShowCode,
-        popOutUrl: (_h = pattern.default) === null || _h === void 0 ? void 0 : _h.popOutUrl,
+        noHeader: (_f = pattern.default) === null || _f === void 0 ? void 0 : _f.noHeader,
+        splitView: (_g = pattern.default) === null || _g === void 0 ? void 0 : _g.splitView,
+        initiallyShowCode: (_h = pattern.default) === null || _h === void 0 ? void 0 : _h.initiallyShowCode,
+        popOutUrl: (_j = pattern.default) === null || _j === void 0 ? void 0 : _j.popOutUrl,
     };
     // --- Extract optional playground attributes
     if (pattern.default.height) {
@@ -246,15 +251,15 @@ function convertPlaygroundPatternToMarkdown(content) {
     for (let i = 0; i <= maxOrder; i++) {
         let segment;
         let type = "";
-        if (((_j = pattern.app) === null || _j === void 0 ? void 0 : _j.order) === i) {
+        if (((_k = pattern.app) === null || _k === void 0 ? void 0 : _k.order) === i) {
             segment = pattern.app;
             type = "app";
         }
-        else if (((_k = pattern.config) === null || _k === void 0 ? void 0 : _k.order) === i) {
+        else if (((_l = pattern.config) === null || _l === void 0 ? void 0 : _l.order) === i) {
             segment = pattern.config;
             type = "config";
         }
-        else if (((_l = pattern.api) === null || _l === void 0 ? void 0 : _l.order) === i) {
+        else if (((_m = pattern.api) === null || _m === void 0 ? void 0 : _m.order) === i) {
             segment = pattern.api;
             type = "api";
         }
@@ -315,7 +320,7 @@ function convertPlaygroundPatternToMarkdown(content) {
                 if (segment.display) {
                     markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
                 }
-                (_m = pgContent.components) !== null && _m !== void 0 ? _m : (pgContent.components = []);
+                (_o = pgContent.components) !== null && _o !== void 0 ? _o : (pgContent.components = []);
                 pgContent.components.push(segment.content);
                 break;
             case "desc":

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -98,6 +98,7 @@ function buildNavHierarchy(children, extractValue, parent, pathSegments = []) {
             }
         }
         else if (child.children && child.children.length > 0) {
+            //console.log("CN", child.children);
             // Process any children that might contain NavGroup and NavLink components recursively
             const nestedNodes = buildNavHierarchy(child.children, extractValue, parent, pathSegments);
             if (nestedNodes.length > 0) {
@@ -197,6 +198,9 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
             appLayoutContext.registerLinkMap(linkMap);
         }
     }, [navLinks, appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.registerLinkMap]);
+    if (appLayoutContext && !(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.isNested)) {
+        //console.log(navLinks);
+    }
     if (inDrawer) {
         return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, navLinks: navLinks, children: children }));
     }

package/dist/scripts/src/components/NestedApp/AppWithCodeViewNative.js

@@ -29,7 +29,7 @@ const logo_svg_react_1 = __importDefault(require("./logo.svg?react"));
 /**
  * A component that displays markdown content on the left and a NestedApp on the right
  */
-function AppWithCodeViewNative({ markdown, splitView, initiallyShowCode = false, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, }) {
+function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader = false, initiallyShowCode = false, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, }) {
     const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
@@ -71,9 +71,9 @@ function AppWithCodeViewNative({ markdown, splitView, initiallyShowCode = false,
                                         }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                             setShowCode(false);
                                             setRefreshVersion(refreshVersion + 1);
-                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [showCode && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { style: { height: "100%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false, popOutUrl: popOutUrl }))] })] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [showCode && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { style: { height: "100%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false, noHeader: false, popOutUrl: popOutUrl }))] })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: true, popOutUrl: popOutUrl }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: withFrame, noHeader: noHeader, popOutUrl: popOutUrl }) })] }));
 }
 /**
  * Export a named default for easier imports

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -53,7 +53,7 @@ function IndexAwareNestedApp(props) {
     }
     return (0, jsx_runtime_1.jsx)(LazyNestedApp, Object.assign({}, props));
 }
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, popOutUrl, withFrame = defaultProps_1.defaultProps.withFrame, style, refVersion = 0, }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, popOutUrl, withFrame = defaultProps_1.defaultProps.withFrame, noHeader = defaultProps_1.defaultProps.noHeader, style, refVersion = 0, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -119,15 +119,17 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     (0, react_1.useEffect)(() => {
         var _a;
         if (!shadowRef.current && rootRef.current) {
-            // Clone existing style and link tags
-            shadowRef.current = rootRef.current.attachShadow({ mode: "open" });
-            const styleSheets = document.querySelectorAll('style, link[rel="stylesheet"]');
-            styleSheets.forEach((el) => {
-                if (el.hasAttribute("data-theme-root")) {
-                    return;
-                }
-                shadowRef.current.appendChild(el.cloneNode(true));
-            });
+            // TEMP: Disable Shadow DOM for debugging theming issues
+            // shadowRef.current = rootRef.current.attachShadow({ mode: "open" });
+            shadowRef.current = rootRef.current; // Use the normal DOM instead of shadow root
+            // Optionally, skip cloning styles since they're already in the main document
+            // const styleSheets = document.querySelectorAll('style, link[rel="stylesheet"]');
+            // styleSheets.forEach((el) => {
+            //   if (el.hasAttribute("data-theme-root")) {
+            //     return;
+            //   }
+            //   shadowRef.current.appendChild(el.cloneNode(true));
+            // });
         }
         if (!contentRootRef.current && shadowRef.current) {
             contentRootRef.current = client_1.default.createRoot(shadowRef.current);
@@ -157,11 +159,11 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                         compoundComponents,
                         themes: config === null || config === void 0 ? void 0 : config.themes,
                     }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }) }));
-        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                         openPlayground();
                                     }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                         setRefreshVersion(refreshVersion + 1);
-                                    }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }));
+                                    }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })), nestedAppRoot] })) : (nestedAppRoot) }));
     }, [
         activeTheme,
         allowPlaygroundPopup,
@@ -183,6 +185,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         title,
         toneToApply,
         withFrame,
+        noHeader,
         apiUrl,
     ]);
     const mountedRef = (0, react_1.useRef)(false);

package/dist/scripts/src/components/NestedApp/defaultProps.js

@@ -6,5 +6,6 @@ const constants_1 = require("../../components-core/constants");
 exports.defaultProps = {
     allowPlaygroundPopup: true,
     withFrame: true,
+    noHeader: false,
     components: constants_1.EMPTY_ARRAY
 };

package/dist/scripts/src/components/RadioGroup/RadioGroup.js

@@ -45,14 +45,12 @@ exports.RadioGroupMd = (0, metadata_helpers_1.createMetadata)({
         [`borderColor-checked-${RGOption}`]: "$color-primary-500",
         [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
         [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
+        [`borderColor-${RGOption}-error`]: `$borderColor-Input-default--error`,
+        [`borderColor-${RGOption}-warning`]: `$borderColor-Input-default--warning`,
+        [`borderColor-${RGOption}-success`]: `$borderColor-Input-default--success`,
         [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
         [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
-        [`backgroundColor-${RGOption}-checked--disabled`]: `$textColor--disabled`,
-        [`backgroundColor-checked-indicator-${RGOption}`]: `transparent`,
-        [`backgroundColor-${RGOption}-checked-indicator--disabled`]: `transparent`,
-        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-error`,
-        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-warning`,
-        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-success`,
+        [`backgroundColor-checked-${RGOption}--disabled`]: `$textColor--disabled`,
         [`fontSize-${RGOption}`]: "$fontSize-small",
         [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },