xmlui 0.9.54 → 0.9.55

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.54",
+    "version": "0.9.55",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -101,6 +101,7 @@ const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
 const InspectButton_1 = require("./InspectButton/InspectButton");
 const NestedApp_1 = require("./NestedApp/NestedApp");
+const AppWithCodeView_1 = require("./NestedApp/AppWithCodeView");
 const CodeBlock_1 = require("./CodeBlock/CodeBlock");
 const BarChart_1 = require("./Charts/BarChart/BarChart");
 const DonutChart_1 = require("./Charts/DonutChart/DonutChart");
@@ -405,6 +406,7 @@ class ComponentRegistry {
             this.registerCoreComponent(CodeBlock_1.codeBlockComponentRenderer);
             // --- Nested app and related components
             this.registerCoreComponent(NestedApp_1.nestedAppComponentRenderer);
+            this.registerCoreComponent(AppWithCodeView_1.appWithCodeViewComponentRenderer);
             // --- New Bootstrap-inspired components
             this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
             this.registerCoreComponent(Accordion_1.accordionComponentRenderer);

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

@@ -59,7 +59,6 @@ const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const Toggle_1 = require("../Toggle/Toggle");
-const NestedAppNative_1 = require("../NestedApp/NestedAppNative");
 const highlight_code_1 = require("../CodeBlock/highlight-code");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const AppContext_1 = require("../../components-core/AppContext");
@@ -69,6 +68,7 @@ const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 const TreeDisplayNative_1 = require("../TreeDisplay/TreeDisplayNative");
 const unist_util_visit_1 = require("unist-util-visit");
 const ExpandableItemNative_1 = require("../ExpandableItem/ExpandableItemNative");
+const AppWithCodeViewNative_1 = __importDefault(require("../NestedApp/AppWithCodeViewNative"));
 // Default props for the Markdown component
 exports.defaultProps = {
     removeIndents: true,
@@ -232,15 +232,15 @@ 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;
                     var props = __rest(_a, []);
                     const nestedProps = props;
+                    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"];
-                    if (dataContentBase64 !== undefined) {
-                        const jsonContent = atob(dataContentBase64);
-                        const appProps = JSON.parse(jsonContent);
-                        return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { 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 }));
-                    }
-                    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: nestedProps.app, config: nestedProps.config, components: nestedProps.components, api: nestedProps.api, activeTheme: nestedProps.activeTheme, activeTone: nestedProps.activeTone, title: nestedProps.title, height: nestedProps.height, allowPlaygroundPopup: true }));
+                    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, sideBySide: (_b = appProps.sideBySide) !== null && _b !== void 0 ? _b : false }));
                 },
                 section(_a) {
                     var { children } = _a, props = __rest(_a, ["children"]);
@@ -320,10 +320,10 @@ const Blockquote = ({ children, style }) => {
                     // Get the child's text content
                     const childText = extractTextContent(child.props.children);
                     // Skip the first line which contains the summary
-                    const lines = childText.split('\n');
+                    const lines = childText.split("\n");
                     if (lines.length > 1) {
                         // Create modified element with remaining content
-                        const remainingContent = lines.slice(1).join('\n');
+                        const remainingContent = lines.slice(1).join("\n");
                         if (remainingContent.trim()) {
                             contentWithoutSummary.push(react_1.default.cloneElement(child, child.props, remainingContent));
                         }

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

@@ -50,6 +50,14 @@ function parseSegmentProps(input) {
     if (/\bnoPopup\b/.test(input)) {
         segment.noPopup = true;
     }
+    // --- Match the "noFrame" flag
+    if (/\bnoFrame\b/.test(input)) {
+        segment.noFrame = true;
+    }
+    // --- Match the "sideBySide" flag
+    if (/\bsideBySide\b/.test(input)) {
+        segment.sideBySide = true;
+    }
     // Match the "highlights" pattern
     const highlightsMatch = input.match(/\{([^\}]+)\}/);
     if (highlightsMatch) {
@@ -179,7 +187,7 @@ function parsePlaygroundPattern(content) {
     }
 }
 function convertPlaygroundPatternToMarkdown(content) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const pattern = parsePlaygroundPattern(content);
     // --- Determine max order for segments
     let maxOrder = 0;
@@ -208,7 +216,11 @@ function convertPlaygroundPatternToMarkdown(content) {
     }
     // --- Assemble the final markdown content
     let markdownContent = "";
-    const pgContent = { noPopup: (_d = pattern.default) === null || _d === void 0 ? void 0 : _d.noPopup };
+    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,
+        sideBySide: (_f = pattern.default) === null || _f === void 0 ? void 0 : _f.sideBySide
+    };
     // --- Extract optional playground attributes
     if (pattern.default.height) {
         pgContent.height = pattern.default.height;
@@ -220,15 +232,15 @@ function convertPlaygroundPatternToMarkdown(content) {
     for (let i = 0; i <= maxOrder; i++) {
         let segment;
         let type = "";
-        if (((_e = pattern.app) === null || _e === void 0 ? void 0 : _e.order) === i) {
+        if (((_g = pattern.app) === null || _g === void 0 ? void 0 : _g.order) === i) {
             segment = pattern.app;
             type = "app";
         }
-        else if (((_f = pattern.config) === null || _f === void 0 ? void 0 : _f.order) === i) {
+        else if (((_h = pattern.config) === null || _h === void 0 ? void 0 : _h.order) === i) {
             segment = pattern.config;
             type = "config";
         }
-        else if (((_g = pattern.api) === null || _g === void 0 ? void 0 : _g.order) === i) {
+        else if (((_j = pattern.api) === null || _j === void 0 ? void 0 : _j.order) === i) {
             segment = pattern.api;
             type = "api";
         }
@@ -288,7 +300,7 @@ function convertPlaygroundPatternToMarkdown(content) {
                 if (segment.display) {
                     markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
                 }
-                (_h = pgContent.components) !== null && _h !== void 0 ? _h : (pgContent.components = []);
+                (_k = pgContent.components) !== null && _k !== void 0 ? _k : (pgContent.components = []);
                 pgContent.components.push(segment.content);
                 break;
             case "desc":
@@ -298,9 +310,9 @@ function convertPlaygroundPatternToMarkdown(content) {
     }
     // --- Convert the JSON representation of pgContent to a base64 string
     const jsonString = JSON.stringify(pgContent);
-    const base64String = btoa(jsonString);
-    markdownContent += '<samp data-pg-content="' + base64String + '"></samp>\n\n';
-    return markdownContent;
+    const base64ContentString = btoa(jsonString);
+    const base64MarkdownString = btoa(markdownContent);
+    return '<samp data-pg-content="' + base64ContentString + '" data-pg-markdown="' + base64MarkdownString + '"></samp>\n\n';
 }
 function observeTreeDisplay(content) {
     const startPattern = "```xmlui-tree";

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appWithCodeViewComponentRenderer = exports.AppWithCodeViewMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppWithCodeView_module_scss_1 = __importDefault(require("./AppWithCodeView.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const AppWithCodeViewNative_1 = require("./AppWithCodeViewNative");
+const defaultProps_1 = require("./defaultProps");
+const COMP = "AppWithCodeView";
+exports.AppWithCodeViewMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The ${COMP} component displays a combination of markdown content and a nested xmlui app. 
+It supports both side-by-side and stacked layouts.`,
+    props: {
+        markdown: {
+            description: "The markdown content to be displayed alongside the app",
+            valueType: "string",
+        },
+        sideBySide: {
+            description: "Whether to render the markdown and app side by side or stacked vertically",
+            valueType: "boolean",
+        },
+        app: {
+            description: "The source markup of the app to be nested",
+        },
+        api: {
+            description: "This property defines an optional emulated API to be used with the nested app.",
+        },
+        components: {
+            description: "This property defines an optional list of components to be used with the nested app.",
+            defaultValue: defaultProps_1.defaultProps.components,
+        },
+        config: {
+            description: "You can define the nested app's configuration with this property.",
+        },
+        activeTheme: {
+            description: "This property defines the active theme for the nested app. " +
+                "If not set, the default theme is used.",
+        },
+        activeTone: {
+            description: "This property defines the active tone for the nested app. " +
+                "If not set, the default tone is used.",
+        },
+        title: {
+            description: "The optional title of the nested app. If not set, no title is displayed.",
+        },
+        height: {
+            description: "The height of the nested app. If not set, the height is determined automatically.",
+        },
+        allowPlaygroundPopup: {
+            description: "This property defines whether the nested app can be opened in the xmlui playground.",
+            valueType: "boolean",
+            defaultValue: defaultProps_1.defaultProps.allowPlaygroundPopup,
+        },
+        withFrame: {
+            description: "This property defines whether the nested app should be displayed with a frame.",
+            valueType: "boolean",
+            defaultValue: defaultProps_1.defaultProps.withFrame,
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(AppWithCodeView_module_scss_1.default.themeVars),
+    defaultThemeVars: {},
+});
+exports.appWithCodeViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppWithCodeViewMd, ({ node, extractValue }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.AppWithCodeViewNative, { markdown: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.markdown), sideBySide: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.sideBySide), app: (_c = node.props) === null || _c === void 0 ? void 0 : _c.app, api: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.api), components: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.components), config: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.config), activeTheme: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.activeTheme), activeTone: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.activeTone), title: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.title), height: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.withFrame) }));
+});

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppWithCodeViewNative = AppWithCodeViewNative;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AppWithCodeView_module_scss_1 = __importDefault(require("./AppWithCodeView.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const NestedAppNative_1 = require("./NestedAppNative");
+const Markdown_1 = require("../Markdown/Markdown");
+/**
+ * A component that displays markdown content on the left and a NestedApp on the right
+ */
+function AppWithCodeViewNative({ markdown, sideBySide, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, withFrame, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppWithCodeView_module_scss_1.default.container, {
+            [AppWithCodeView_module_scss_1.default.horizontal]: sideBySide,
+            [AppWithCodeView_module_scss_1.default.vertical]: !sideBySide,
+        }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [AppWithCodeView_module_scss_1.default.column]: sideBySide }), children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [AppWithCodeView_module_scss_1.default.column]: sideBySide }), children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.NestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: sideBySide ? false : withFrame }) })] }));
+}
+/**
+ * Export a named default for easier imports
+ */
+exports.default = AppWithCodeViewNative;

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

@@ -69,6 +69,6 @@ exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup) }));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.withFrame) }));
 });

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, withFrame = defaultProps_1.defaultProps.withFrame, playgroundId, }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -1303,7 +1303,7 @@ declare type Message = ValueOrFunction<Renderable, Toast>;
  */
 declare type ModuleErrors = Record<string, ScriptParserErrorMessage[]>;
 
-declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame, playgroundId, }: NestedAppProps): JSX_2.Element;
+declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame, }: NestedAppProps): JSX_2.Element;
 
 declare type NestedAppProps = {
     api?: any;
@@ -1316,7 +1316,6 @@ declare type NestedAppProps = {
     height?: string | number;
     allowPlaygroundPopup?: boolean;
     withFrame?: boolean;
-    playgroundId?: string;
 };
 
 declare type NO_ARG_EXPRESSION = typeof T_NO_ARG_EXPRESSION;