xmlui 0.9.72 → 0.9.73

package/dist/scripts/package.json

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

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

@@ -197,11 +197,17 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports
                     let label = children;
                     // --- Extract the optional target
                     if (typeof children === "string") {
-                        const match = children.match(/^(.*)\|\s*target\s*=\s*([_a-zA-Z0-9-]+)\s*$/);
+                        // Match a non-escaped pipe followed by target specification
+                        const match = children.match(/^((?:[^|]|\\\|)*[^\\])\|\s*target\s*=\s*([_a-zA-Z0-9-]+)\s*$/);
                         if (match) {
-                            label = match[1].trim();
+                            // Unescape any escaped pipes in the label
+                            label = match[1].trim().replace(/\\\|/g, '|');
                             target = match[2];
                         }
+                        else {
+                            // If no target specification, unescape any escaped pipes in the whole text
+                            label = children.replace(/\\\|/g, '|');
+                        }
                     }
                     return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, Object.assign({ to: href, target: target }, props, { children: label })));
                 },

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

@@ -60,18 +60,18 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
         window.open(`${safePopOutUrl}/#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, api, activeTone, safePopOutUrl]);
     if (withFrame) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [!splitView && (0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), splitView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
-                                                [NestedApp_module_scss_1.default.show]: showCode,
-                                                [NestedApp_module_scss_1.default.hide]: !showCode,
-                                            }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
-                                                [NestedApp_module_scss_1.default.show]: !showCode,
-                                                [NestedApp_module_scss_1.default.hide]: showCode,
-                                            }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [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: () => {
-                                            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%" }, className: NestedApp_module_scss_1.default.splitViewMarkdown, children: markdown })), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion }))] })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && !splitView && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [!splitView && (0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), splitView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                                        [NestedApp_module_scss_1.default.show]: showCode,
+                                                        [NestedApp_module_scss_1.default.hide]: !showCode,
+                                                    }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                                        [NestedApp_module_scss_1.default.show]: !showCode,
+                                                        [NestedApp_module_scss_1.default.hide]: showCode,
+                                                    }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [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: () => {
+                                                    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%" }, className: NestedApp_module_scss_1.default.splitViewMarkdown, children: markdown })), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion }))] })] })] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: height, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion })] }));
 }

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

@@ -59,9 +59,9 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`padding-viewControls-${COMP}`]: "$space-0_5",
         [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
         // --- Split view styles
-        [`padding-button-splitView-${COMP}`]: "4px 6px",
+        [`padding-button-splitView-${COMP}`]: "1px 6px",
         [`width-button-splitView-${COMP}`]: "60px",
-        [`width-logo-splitView-${COMP}`]: "2rem",
+        [`width-logo-splitView-${COMP}`]: "1.5rem",
         [`height-logo-splitView-${COMP}`]: "2rem",
         [`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-0",
         [`color-button-splitView-${COMP}`]: "$color-surface-600",

package/dist/scripts/src/components-core/event-handlers.js

@@ -33,8 +33,9 @@ function useMouseEventHandlers(lookupEvent, shouldSkip) {
             ? undefined
             : lookupEvent(eventName);
         const eventHandler = (0, react_1.useCallback)((event) => {
+            // If the event handler is not defined, we do nothing
             if (onEvent) {
-                event.stopPropagation();
+                event === null || event === void 0 ? void 0 : event.stopPropagation();
                 onEvent(event);
             }
         }, [onEvent]);

package/dist/scripts/src/components-core/utils/date-utils.js

@@ -82,9 +82,10 @@ function isDateTomorrow(date) {
  * Returns strings like "now", "12 seconds ago", "3 hours ago", "today", "yesterday", "3 weeks ago", etc.
  *
  * @param date The date to format
+ * @param shortFormat When true, uses abbreviated time units (e.g. "s" instead of "seconds")
  * @returns A human-readable elapsed time string
  */
-function formatHumanElapsedTime(date) {
+function formatHumanElapsedTime(date, shortFormat = false) {
     const now = new Date();
     const inputDate = new Date(date);
     // Calculate time difference in milliseconds
@@ -101,21 +102,55 @@ function formatHumanElapsedTime(date) {
     const diffWeeks = Math.floor(diffDays / 7);
     const diffMonths = Math.floor(diffDays / 30);
     const diffYears = Math.floor(diffDays / 365);
+    // Define unit formats based on shortFormat parameter
+    const units = {
+        second: {
+            singular: shortFormat ? 's' : 'second',
+            plural: shortFormat ? 's' : 'seconds'
+        },
+        minute: {
+            singular: shortFormat ? 'min' : 'minute',
+            plural: shortFormat ? 'min' : 'minutes'
+        },
+        hour: {
+            singular: shortFormat ? 'hr' : 'hour',
+            plural: shortFormat ? 'hrs' : 'hours'
+        },
+        day: {
+            singular: shortFormat ? 'd' : 'day',
+            plural: shortFormat ? 'd' : 'days'
+        },
+        week: {
+            singular: shortFormat ? 'wk' : 'week',
+            plural: shortFormat ? 'wks' : 'weeks'
+        },
+        month: {
+            singular: shortFormat ? 'mo' : 'month',
+            plural: shortFormat ? 'mos' : 'months'
+        },
+        year: {
+            singular: shortFormat ? 'y' : 'year',
+            plural: shortFormat ? 'yrs' : 'years'
+        }
+    };
     // Just now (within 10 seconds)
     if (diffSeconds < 10) {
         return "now";
     }
     // Seconds ago (up to 1 minute)
     if (diffSeconds < 60) {
-        return `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`;
+        const unit = diffSeconds === 1 ? units.second.singular : units.second.plural;
+        return `${diffSeconds} ${unit} ago`;
     }
     // Minutes ago (up to 1 hour)
     if (diffMinutes < 60) {
-        return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
+        const unit = diffMinutes === 1 ? units.minute.singular : units.minute.plural;
+        return `${diffMinutes} ${unit} ago`;
     }
     // Hours ago (up to today)
     if ((0, date_fns_1.isToday)(inputDate)) {
-        return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+        const unit = diffHours === 1 ? units.hour.singular : units.hour.plural;
+        return `${diffHours} ${unit} ago`;
     }
     // Yesterday
     if ((0, date_fns_1.isYesterday)(inputDate)) {
@@ -123,16 +158,20 @@ function formatHumanElapsedTime(date) {
     }
     // Days ago (up to 1 week)
     if (diffDays < 7) {
-        return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+        const unit = diffDays === 1 ? units.day.singular : units.day.plural;
+        return `${diffDays} ${unit} ago`;
     }
     // Weeks ago (up to 4 weeks / 1 month)
     if (diffWeeks < 4) {
-        return `${diffWeeks} week${diffWeeks === 1 ? "" : "s"} ago`;
+        const unit = diffWeeks === 1 ? units.week.singular : units.week.plural;
+        return `${diffWeeks} ${unit} ago`;
     }
     // Months ago (up to 12 months / 1 year)
     if (diffMonths < 12) {
-        return `${diffMonths} month${diffMonths === 1 ? "" : "s"} ago`;
+        const unit = diffMonths === 1 ? units.month.singular : units.month.plural;
+        return `${diffMonths} ${unit} ago`;
     }
     // Years ago
-    return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
+    const unit = diffYears === 1 ? units.year.singular : units.year.plural;
+    return `${diffYears} ${unit} ago`;
 }