xmlui 0.11.3 → 0.11.6

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

@@ -1,42 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.codeBlockComponentRenderer = exports.CodeBlockMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const CodeBlockNative_1 = require("./CodeBlockNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "CodeBlock";
-exports.CodeBlockMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
-    props: {},
-    themeVars: (0, themeVars_1.parseScssVar)(CodeBlock_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        "backgroundColor-CodeBlock": "$color-primary-50",
-        "backgroundColor-CodeBlock-header": "$color-primary-100",
-        "marginTop-CodeBlock": "$space-5",
-        "marginBottom-CodeBlock": "$space-5",
-        "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-200 r g b / 0.25)",
-        "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-200 r g b / 0.5)",
-        "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
-        "border-CodeBlock": "0.5px solid $borderColor",
-        "borderRadius-CodeBlock": "$space-2",
-        "height-CodeBlock": "fit-content",
-        "paddingVertical-content-CodeBlock": "0",
-        "paddingHorizontal-content-CodeBlock": "0",
-        dark: {
-            "backgroundColor-CodeBlock-header": "$color-surface-200",
-            "backgroundColor-CodeBlock": "$color-surface-50",
-            "backgroundColor-CodeBlock-highlightRow": "rgb(from $color-primary-300 r g b / 0.15)",
-            "backgroundColor-CodeBlock-highlightString": "rgb(from $color-primary-300 r g b / 0.5)",
-        }
-    },
-});
-exports.codeBlockComponentRenderer = (0, renderers_1.createComponentRenderer)("CodeBlock", exports.CodeBlockMd, ({ node, renderChild, className }) => {
-    return ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { className: className, children: renderChild(node.children) }));
-});

package/dist/scripts/src/components/CodeBlock/CodeBlock.spec.js

@@ -1,196 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`<CodeBlock />`);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("component renders with Text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">const hello = "world";</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("const hello = \"world\";");
-}));
-(0, fixtures_1.test)("component renders with children content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock>
-      <pre><code>function test() { return 42; }</code></pre>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("function test() { return 42; }");
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component has proper semantic structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">const x = 1;</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    // CodeBlock should be identifiable as a code container
-    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/codeBlock/);
-}));
-(0, fixtures_1.test)("component content is accessible to screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">function accessible() { return true; }</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    // Code content should be readable
-    const codeText = yield driver.getCodeText();
-    (0, fixtures_1.expect)(codeText).toContain("function accessible() { return true; }");
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component applies theme variables correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`<CodeBlock />`, {
-        testThemeVars: {
-            "backgroundColor-CodeBlock": "rgb(255, 0, 0)",
-            "borderRadius-CodeBlock": "8px",
-        },
-    });
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(255, 0, 0)");
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", "8px");
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`<CodeBlock/>`);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles empty content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`<CodeBlock></CodeBlock>`);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles special characters in code", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">const emoji = "🚀"; const unicode = "émojis"; const quotes = '"test"';</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText('const emoji = "🚀"');
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("émojis");
-}));
-(0, fixtures_1.test)("component handles very long code content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    const longCode = "const veryLongVariableName = ".repeat(100) + '"end";';
-    yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">${longCode}</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("end");
-}));
-(0, fixtures_1.test)("component handles invalid meta prop gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock meta="invalid">
-      <Text variant="codefence">test code</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <VStack>
-      <Text>Code example:</Text>
-      <CodeBlock>
-        <Text variant="codefence">const layout = 'test';</Text>
-      </CodeBlock>
-      <Text>End of example</Text>
-    </VStack>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("const layout = 'test';");
-}));
-(0, fixtures_1.test)("component handles multiline code content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">function example() {
-  return "multiline test";
-}</Text>
-    </CodeBlock>
-  `);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("function example()");
-    yield (0, fixtures_1.expect)(driver.getContent()).toContainText("return \"multiline test\"");
-}));
-(0, fixtures_1.test)("component applies global CSS class correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    yield initTestBed(`<CodeBlock />`);
-    const driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveClass(/global-codeBlock/);
-}));
-(0, fixtures_1.test)("component maintains consistent styling across themes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-    // Test light theme
-    yield initTestBed(`<CodeBlock />`, {
-        testThemeVars: {
-            "backgroundColor-CodeBlock": "rgb(248, 249, 250)",
-            "border-CodeBlock": "1px solid rgb(208, 215, 222)",
-        },
-    });
-    let driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(248, 249, 250)");
-    // Test dark theme
-    yield initTestBed(`<CodeBlock />`, {
-        testThemeVars: {
-            "backgroundColor-CodeBlock": "rgb(22, 27, 34)",
-            "border-CodeBlock": "1px solid rgb(48, 54, 61)",
-        },
-    });
-    driver = yield createCodeBlockDriver();
-    yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(22, 27, 34)");
-}));
-// --- Smoke Tests (maintaining existing)
-fixtures_1.test.describe("smoke tests", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-        yield initTestBed(`<CodeBlock />`);
-        yield (0, fixtures_1.expect)((yield createCodeBlockDriver()).component).toBeAttached();
-    }));
-    (0, fixtures_1.test)("component with Text codefence renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createCodeBlockDriver }) {
-        yield initTestBed(`
-    <CodeBlock>
-      <Text variant="codefence">
-        This is a test
-      </Text>
-    </CodeBlock>
-    `);
-        yield (0, fixtures_1.expect)((yield createCodeBlockDriver()).component).toBeAttached();
-    }));
-});

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.js

@@ -1,127 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = void 0;
-exports.CodeBlock = CodeBlock;
-exports.markdownCodeBlockParser = markdownCodeBlockParser;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
-const TextNative_1 = require("../Text/TextNative");
-const highlight_code_1 = require("./highlight-code");
-const ButtonNative_1 = require("../Button/ButtonNative");
-const IconNative_1 = __importDefault(require("../Icon/IconNative"));
-const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
-const unist_util_visit_1 = require("unist-util-visit");
-const classnames_1 = __importDefault(require("classnames"));
-exports.defaultProps = {
-// No default props needed for this component currently
-};
-function CodeBlock(_a) {
-    var { children, meta, textToCopy, style, className } = _a, rest = __rest(_a, ["children", "meta", "textToCopy", "style", "className"]);
-    // 'global-codeBlock' class is there so we could apply styles if this codeblock is used inside a splitView nested app
-    if (!meta) {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(className, CodeBlock_module_scss_1.default.codeBlock, "global-codeBlock"), style: style, children: (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: children }) })));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(CodeBlock_module_scss_1.default.codeBlock, "global-codeBlock"), style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockContent, children: [children, meta.copy !== false && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", className: CodeBlock_module_scss_1.default.copyButton, icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
-                                if (!textToCopy)
-                                    return;
-                                void navigator.clipboard.writeText(textToCopy);
-                                react_hot_toast_1.default.success("Code copied!");
-                            } }) }))] })] }));
-}
-function markdownCodeBlockParser() {
-    return function transformer(tree) {
-        (0, unist_util_visit_1.visit)(tree, "code", visitor);
-    };
-    /**
-     * This visitor visits each node in the mdast tree and adds all meta information to the code block html element
-     * that we use later in the Markdown component.
-     */
-    function visitor(node, _, parent) {
-        var _a;
-        const { lang, meta } = node;
-        const nodeData = { hProperties: {} };
-        if (lang !== null) {
-            nodeData.hProperties["dataLanguage"] = lang;
-            node.data = nodeData;
-        }
-        if (!parent)
-            return;
-        if (!meta)
-            return;
-        const params = (_a = splitter(meta)) === null || _a === void 0 ? void 0 : _a.filter((s) => s !== "").map((s) => s.trim());
-        if (!params)
-            return;
-        if (params.length === 0)
-            return;
-        const parsedMeta = params.reduce((acc, item) => {
-            item = item.trim();
-            if (item === "")
-                return acc;
-            if (item.toLocaleLowerCase().startsWith("filename=")) {
-                const index = item.indexOf("=");
-                acc[highlight_code_1.CodeHighlighterMetaKeys.filename.data] = item
-                    .substring(index + 1)
-                    .replace(/"(.+)"/, "$1")
-                    .replace(/'(.+)'/, "$1");
-            }
-            if (item.startsWith("/") && item.endsWith("/")) {
-                const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data];
-                const newItemBase64 = (0, highlight_code_1.encodeToBase64)(item.substring(1, item.length - 1));
-                if (!unparsedSubstrings) {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = newItemBase64;
-                }
-                else {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] =
-                        `${unparsedSubstrings} ${newItemBase64}`;
-                }
-            }
-            if (item.startsWith("!/") && item.endsWith("/")) {
-                const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data];
-                const newItemBase64 = (0, highlight_code_1.encodeToBase64)(item.substring(2, item.length - 1));
-                if (!unparsedSubstrings) {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] = newItemBase64;
-                }
-                else {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] =
-                        `${unparsedSubstrings} ${newItemBase64}`;
-                }
-            }
-            if (item.startsWith("{") && item.endsWith("}")) {
-                const unparsedRows = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data];
-                const newItem = item.substring(1, item.length - 1);
-                if (!unparsedRows) {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = newItem;
-                }
-                else {
-                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = `${unparsedRows}, ${newItem}`;
-                }
-            }
-            if (item === "copy") {
-                acc[highlight_code_1.CodeHighlighterMetaKeys.copy.data] = "true";
-            }
-            if (item === "rowNumbers") {
-                acc[highlight_code_1.CodeHighlighterMetaKeys.rowNumbers.data] = "true";
-            }
-            return acc;
-        }, {});
-        nodeData.hProperties = Object.assign(Object.assign({}, nodeData.hProperties), parsedMeta);
-        node.data = nodeData;
-    }
-    function splitter(str) {
-        return str.match(/(?:("|')[^"']*\1|\{[^{}]*\}|\/.*?\/|[^\s"'{}/])+/g);
-    }
-}

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

@@ -1,273 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodeHighlighterMetaKeysData = exports.CodeHighlighterMetaKeys = exports.decodeFromBase64 = exports.encodeToBase64 = void 0;
-exports.parseMetaAndHighlightCode = parseMetaAndHighlightCode;
-exports.transformCodeLines = transformCodeLines;
-exports.extractMetaFromChildren = extractMetaFromChildren;
-exports.isCodeHighlighter = isCodeHighlighter;
-const react_1 = require("react");
-const base64_utils_1 = require("../../components-core/utils/base64-utils");
-Object.defineProperty(exports, "encodeToBase64", { enumerable: true, get: function () { return base64_utils_1.encodeToBase64; } });
-Object.defineProperty(exports, "decodeFromBase64", { enumerable: true, get: function () { return base64_utils_1.decodeFromBase64; } });
-const highlightRowsClass = "codeBlockHighlightRow";
-const highlightSubstringsClass = "codeBlockHighlightString";
-const highlightSubstringsEmphasisClass = "codeBlockHighlightStringEmphasis";
-/**
- * This function handles two things:
- * 1. The extraction of meta information from code blocks and exposing them as data-meta attributes
- * 2. The highlighting of code blocks providing the highlighter function with meta information
- * @param node The React node containing the code block
- * @param codeHighlighter The highlighter object containing the highlight function and the available languages
- * @returns CSS class names for the codefence and the HTML string with highlighted code tokens
- */
-function parseMetaAndHighlightCode(node, codeHighlighter, themeTone) {
-    // parse
-    const rawCodeStr = getCodeStrFromNode(node);
-    const rawMeta = getCodeMetaFromNode(node, exports.CodeHighlighterMetaKeysData);
-    // map
-    const codeStr = transformCodeLines(rawCodeStr);
-    const meta = extractMetaFromChildren(rawMeta, codeStr);
-    const { language } = meta, restMeta = __rest(meta, ["language"]);
-    if (language && codeHighlighter.availableLangs.includes(language)) {
-        // NOTE: Keep in mind, at this point, we are working with the markdown text
-        try {
-            const htmlCodeStr = codeHighlighter.highlight(codeStr, language, restMeta, themeTone);
-            const match = htmlCodeStr.match(/<pre\b[^>]*\bclass\s*=\s*["']([^"']*)["'][^>]*>/i);
-            const classNames = match ? match[1] : null;
-            // NOTE: Why remove the <pre>?
-            // Shiki appends <pre> tags to the highlighted code,
-            // so we would get <pre><pre><code>...</code></pre></pre>
-            let cleanedHtmlStr = htmlCodeStr.replace(/<pre\b[^>]*>|<\/pre>/gi, "");
-            const numberedRowClass = meta.rowNumbers ? "numbered" : "";
-            cleanedHtmlStr = cleanedHtmlStr.replaceAll(/<span class="line"/g, `<span class="line ${numberedRowClass}"`);
-            return { classNames, cleanedHtmlStr, codeStr, meta };
-        }
-        catch (e) {
-            // this could happen in safari after the optimized build (some regexp issues, could be remix/vite/shiki related, TBD)
-            return {
-                meta,
-                codeStr,
-                cleanedHtmlStr: codeStr,
-                classNames: null
-            };
-        }
-    }
-    return null;
-}
-function getCodeStrFromNode(node) {
-    if (typeof node === "string") {
-        return node;
-    }
-    if ((0, react_1.isValidElement)(node) && node.props && node.props.children) {
-        if (Array.isArray(node.props.children)) {
-            return node.props.children.map(getCodeStrFromNode).join("");
-        }
-        return getCodeStrFromNode(node.props.children);
-    }
-    return "";
-}
-function getCodeMetaFromNode(node, keys) {
-    if (!node)
-        return {};
-    if (typeof node === "string")
-        return {};
-    if (typeof node === "number")
-        return {};
-    if (typeof node === "boolean")
-        return {};
-    if (Array.isArray(node))
-        return {};
-    if ((0, react_1.isValidElement)(node) &&
-        node.props &&
-        node.props.children &&
-        typeof node.props.children === "string") {
-        return Object.entries(node.props)
-            .filter(([key, _]) => keys.includes(key))
-            .reduce((acc, [key, value]) => {
-            acc[key] = value;
-            return acc;
-        }, {});
-    }
-    return {};
-}
-function transformCodeLines(node) {
-    const splitNode = node.split(/\r?\n/);
-    for (let i = 0; i < splitNode.length; i++) {
-        // Backslash before a codefence indicates an escaped codefence
-        // -> don't render the backslash
-        if (splitNode[i].startsWith("\\```")) {
-            splitNode[i] = splitNode[i].replace("\\```", "```");
-        }
-    }
-    // Remove empty lines from start and end
-    let startTrimIdx = 0;
-    let endTrimIdx = splitNode.length - 1;
-    for (let i = 0; i < splitNode.length; i++) {
-        if (splitNode[i].trim() !== "") {
-            startTrimIdx = i;
-            break;
-        }
-    }
-    for (let i = splitNode.length - 1; i >= 0; i--) {
-        if (splitNode[i].trim() !== "") {
-            endTrimIdx = i;
-            break;
-        }
-    }
-    splitNode.splice(0, startTrimIdx);
-    splitNode.splice(endTrimIdx + 1);
-    return splitNode.join("\n");
-}
-function extractMetaFromChildren(meta, code = "") {
-    if (!meta)
-        return {};
-    return {
-        // NOTE: Row numbers are disabled for now, because applying the highlight class removes the "numbered" class
-        /* [CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(
-          meta[CodeHighlighterMetaKeys.rowNumbers.data],
-        ), */
-        [exports.CodeHighlighterMetaKeys.language.prop]: meta[exports.CodeHighlighterMetaKeys.language.data],
-        [exports.CodeHighlighterMetaKeys.copy.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.copy.data]),
-        [exports.CodeHighlighterMetaKeys.filename.prop]: meta[exports.CodeHighlighterMetaKeys.filename.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),
-    };
-}
-function parseBoolean(str) {
-    if (str === "true")
-        return true;
-    if (str === "false")
-        return false;
-    return false;
-}
-function parseRowHighlights(code, str) {
-    if (!str)
-        return [];
-    if (str === "")
-        return [];
-    const codeLines = code.split("\n");
-    return str
-        .split(",")
-        .map((item) => {
-        item = item.trim();
-        const split = item.split("-");
-        let start = -1;
-        let end = -1;
-        if (split.length === 0)
-            return { start, end, properties: { class: highlightRowsClass } };
-        if (split.length > 2)
-            return { start, end, properties: { class: highlightRowsClass } };
-        if (split[0] === "")
-            return { start, end, properties: { class: highlightRowsClass } };
-        if (split[1] === "")
-            return { start, end, properties: { class: highlightRowsClass } };
-        start = 0;
-        end = 0;
-        // Start Index
-        const startIdx = validate(parse(split[0]));
-        start = getLineLengthIndex(startIdx);
-        // End Index
-        const endIdx = split.length === 1 ? startIdx : validate(parse(split[1]));
-        let endLineLength = 0;
-        if (endIdx >= 0 && codeLines[endIdx] !== undefined) {
-            endLineLength = codeLines[endIdx].length;
-        }
-        end = getLineLengthIndex(endIdx) + endLineLength;
-        return { start, end, properties: { class: highlightRowsClass } };
-    })
-        .filter((item) => {
-        if (item.start <= -1 || item.end <= -1)
-            return false;
-        if (item.start > code.length || item.end > code.length)
-            return false;
-        return true;
-    });
-    function parse(value) {
-        const parsed = parseInt(value, 10);
-        if (Number.isNaN(parsed))
-            return -1;
-        return parsed;
-    }
-    function validate(parsed) {
-        // correct for 0-indexed array
-        parsed -= 1;
-        // check bounds
-        if (parsed < 0 || parsed >= codeLines.length)
-            return -1;
-        return parsed;
-    }
-    function getLineLengthIndex(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)
-        return [];
-    if (!code)
-        return [];
-    return str
-        .split(" ")
-        .map((item) => (0, base64_utils_1.decodeFromBase64)(item))
-        .filter((item) => item.trim() !== "")
-        .reduce((acc, item) => acc.concat(findAllNonOverlappingSubstrings(code, item)), []);
-    function findAllNonOverlappingSubstrings(str, code) {
-        const result = [];
-        let startIndex = 0;
-        const searchLength = code.length;
-        while (startIndex <= str.length - searchLength) {
-            const index = str.indexOf(code, startIndex);
-            if (index === -1)
-                break;
-            result.push({
-                start: index,
-                end: index + searchLength,
-                properties: {
-                    class: emphasized ? highlightSubstringsEmphasisClass : highlightSubstringsClass,
-                },
-            });
-            startIndex = index + searchLength; // Jump past this match
-        }
-        return result;
-    }
-}
-function isCodeHighlighter(obj) {
-    return obj && obj.highlight && typeof obj.highlight === "function" && obj.availableLangs;
-}
-exports.CodeHighlighterMetaKeys = {
-    language: { data: "data-language", prop: "language" },
-    copy: { data: "data-copy", prop: "copy" },
-    filename: { data: "data-filename", prop: "filename" },
-    rowNumbers: { data: "data-row-numbers", prop: "rowNumbers" },
-    highlightRows: { data: "data-highlight-rows", prop: "highlightRows" },
-    highlightSubstrings: { data: "data-highlight-substrings", prop: "highlightSubstrings" },
-    highlightSubstringsEmphasized: {
-        data: "data-highlight-substrings-emp",
-        prop: "highlightSubstringsEmphasized",
-    },
-};
-exports.CodeHighlighterMetaKeysData = Object.values(exports.CodeHighlighterMetaKeys).map((item) => item.data);