xmlui 0.7.13 → 0.7.15

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

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sliderComponentRenderer = exports.SliderMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const Slider_module_scss_1 = __importDefault(require("./Slider.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const SliderNative_1 = require("./SliderNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Slider";
+// This component must be focusable and keyboard accessible.
+// Add this component to the form infrastructure.
+exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
+    status: "in progress",
+    description: `(**NOT IMPLEMENTED YET**) The \`${COMP}\` component allows you to select a numeric value ` +
+        `between a range specified by minimum and maximum values.`,
+    props: {
+        minValue: (0, ComponentDefs_1.d)(`This property specifies the minimum value of the allowed input range.`, null, "number", 0),
+        maxValue: (0, ComponentDefs_1.d)(`This property specifies the maximum value of the allowed input range.`, null, "number", 10),
+        rangeHighlight: (0, ComponentDefs_1.d)(`This property indicates if you want to highlight a specific part of the input range.`, [
+            { value: "none", description: "No highlight (default)" },
+            {
+                value: "lower",
+                description: "Highlight the lower part of the range (from the minimum to the current slider value)",
+            },
+            {
+                value: "upper",
+                description: "Highlight the upper part of the range (from the current slider value to the maximum)",
+            },
+        ], "string", "none"),
+    },
+    events: {
+        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
+        getFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
+        dostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
+    },
+    apis: {
+        focus: (0, metadata_helpers_1.dFocus)(COMP),
+        value: (0, metadata_helpers_1.dValue)(),
+        setValue: (0, metadata_helpers_1.dSetValueApi)(),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Slider_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        light: {},
+        dark: {},
+    },
+});
+exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(SliderNative_1.Slider, {});
+});

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Slider = ({}) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: "orangered", color: "white", padding: 2 }, children: "Slider component is not implemented yet" }));
+};
+exports.Slider = Slider;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spaceFillerComponentRenderer = exports.SpaceFillerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const SpaceFiller_module_scss_1 = __importDefault(require("./SpaceFiller.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const SpaceFillerNative_1 = require("./SpaceFillerNative");
+const COMP = "SpaceFiller";
+exports.SpaceFillerMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` is a component that works well in layout containers to fill the ` +
+        `remaining (unused) space. Its behavior depends on the layout container in which it is used.`,
+    themeVars: (0, themeVars_1.parseScssVar)(SpaceFiller_module_scss_1.default.themeVars),
+});
+exports.spaceFillerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SpaceFillerMd, () => ((0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {})));

package/dist/scripts/src/components/SpaceFiller/SpaceFillerNative.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpaceFiller = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SpaceFiller_module_scss_1 = __importDefault(require("./SpaceFiller.module.scss"));
+const SpaceFiller = () => (0, jsx_runtime_1.jsx)("div", { className: SpaceFiller_module_scss_1.default.spacer });
+exports.SpaceFiller = SpaceFiller;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spinnerComponentRenderer = exports.SpinnerMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const SpinnerNative_1 = require("./SpinnerNative");
+const COMP = "Spinner";
+exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component is an animated indicator that represents a particular action ` +
+        `in progress without a deterministic progress value.`,
+    props: {
+        delay: (0, ComponentDefs_1.d)(`The delay in milliseconds before the spinner is displayed.`),
+        fullScreen: (0, ComponentDefs_1.d)(`If set to \`true\`, the component will be rendered in a full screen container.`),
+        themeColor: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Spinner_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`size-${COMP}`]: "$space-10",
+        [`thickness-${COMP}`]: "$space-0_5",
+        light: {
+            [`color-border-${COMP}`]: "$color-surface-400",
+        },
+        dark: {
+            [`color-border-${COMP}`]: "$color-surface-600",
+        },
+    },
+});
+exports.spinnerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SpinnerMd, ({ node, layoutCss, extractValue }) => {
+    delete layoutCss.width;
+    delete layoutCss.minWidth;
+    delete layoutCss.maxWidth;
+    delete layoutCss.height;
+    delete layoutCss.minHeight;
+    delete layoutCss.maxHeight;
+    return ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: layoutCss, delay: extractValue.asOptionalNumber(node.props.delay), fullScreen: extractValue.asOptionalBoolean(node.props.fullScreen) }));
+});

package/dist/scripts/src/components/Spinner/SpinnerNative.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
+const react_1 = require("react");
+// source https://loading.io/css/
+function Spinner({ delay = 400, fullScreen = false, style }) {
+    const [pastDelay, setPastDelay] = (0, react_1.useState)(delay === 0);
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            setPastDelay(true);
+        }, delay);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [delay]);
+    const spinner = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], style: style, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) }));
+    if (!pastDelay) {
+        return null;
+    }
+    else {
+        if (fullScreen) {
+            return (0, jsx_runtime_1.jsx)("div", { className: Spinner_module_scss_1.default.fullScreenSpinnerWrapper, children: spinner });
+        }
+        return spinner;
+    }
+}

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

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hSplitterComponentRenderer = exports.vSplitterComponentRenderer = exports.splitterComponentRenderer = exports.VSplitterMd = exports.HSplitterMd = exports.SplitterMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const misc_1 = require("@components-core/utils/misc");
+const EngineError_1 = require("@components-core/EngineError");
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const SplitterNative_1 = require("./SplitterNative");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const COMP = "Splitter";
+const baseSplitterMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component divides a container (such as a window, panel, pane, etc.) ` +
+        `into two resizable sections.`,
+    props: {
+        swapped: (0, ComponentDefs_1.d)(`This optional booelan property indicates whether the \`${COMP}\` sections are layed out as ` +
+            `primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`),
+        splitterTemplate: (0, metadata_helpers_1.dComponent)(`The divider can be customized using XMLUI components via this property.`),
+        initialPrimarySize: (0, ComponentDefs_1.d)(`This optional number property sets the initial size of the primary section. The unit of ` +
+            `the size value is in pixels or percentages.`),
+        minPrimarySize: (0, ComponentDefs_1.d)(`This property sets the minimum size the primary section can have. The unit of the size ` +
+            `value is in pixels or percentages.`),
+        maxPrimarySize: (0, ComponentDefs_1.d)(`This property sets the maximum size the primary section can have. The unit of the size ` +
+            `value is in pixels or percentages.`),
+        floating: (0, ComponentDefs_1.d)(`Toggles whether the resizer is visible (\`false\`) or not (\`true\`) when not hovered ` +
+            `or dragged. The default value is \`false\`, meaning the resizer is visible all the time.`),
+    },
+    events: {
+        resize: (0, ComponentDefs_1.d)(`This event fires when the component is resized.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Splitter_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-resizer-${COMP}`]: "$color-bg-Card",
+        [`thickness-resizer-${COMP}`]: "5px",
+        [`cursor-resizer-horizontal-${COMP}`]: "ew-resize",
+        [`cursor-resizer-vertical-${COMP}`]: "ns-resize",
+    },
+});
+exports.SplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { props: Object.assign(Object.assign({}, baseSplitterMd.props), { orientation: (0, ComponentDefs_1.d)(`Sets whether the \`Splitter\` divides the container horizontally and lays out the ` +
+            `section on top of each other (\`vertical\`), or vertically by placing the sections ` +
+            `next to each other (\`horizontal\`).`) }) });
+exports.HSplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { specializedFrom: COMP });
+exports.VSplitterMd = Object.assign(Object.assign({}, baseSplitterMd), { specializedFrom: COMP });
+const DEFAULT_ORIENTATION = "vertical";
+function renderSplitter(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { node, extractValue, layoutNonCss, layoutCss, renderChild, lookupEventHandler, orientation = (_b = layoutNonCss.orientation) !== null && _b !== void 0 ? _b : DEFAULT_ORIENTATION, } = _a;
+    if (!(0, misc_1.isComponentDefChildren)(node.children)) {
+        throw new EngineError_1.NotAComponentDefError();
+    }
+    return ((0, jsx_runtime_1.jsx)(SplitterNative_1.Splitter, { layout: layoutCss, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), children: renderChild(node.children) }));
+}
+exports.splitterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderSplitter({
+        node,
+        extractValue,
+        layoutCss,
+        layoutNonCss,
+        renderChild,
+        lookupEventHandler: lookupEventHandler,
+    });
+});
+exports.vSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("VSplitter", exports.VSplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderSplitter({
+        node,
+        extractValue,
+        layoutCss,
+        layoutNonCss,
+        renderChild,
+        orientation: "vertical",
+        lookupEventHandler: lookupEventHandler,
+    });
+});
+exports.hSplitterComponentRenderer = (0, renderers_1.createComponentRenderer)("HSplitter", exports.HSplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderSplitter({
+        node,
+        extractValue,
+        layoutCss,
+        layoutNonCss,
+        renderChild,
+        orientation: "horizontal",
+        lookupEventHandler: lookupEventHandler,
+    });
+});

package/dist/scripts/src/components/Splitter/SplitterNative.js

@@ -0,0 +1,159 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Splitter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Splitter_module_scss_1 = __importDefault(require("./Splitter.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const constants_1 = require("@components-core/constants");
+const utils_1 = require("@components/Splitter/utils");
+const Splitter = ({ initialPrimarySize = "50%", minPrimarySize = "0%", maxPrimarySize = "100%", orientation = "vertical", children, layout, swapped = false, floating = false, splitterTemplate, resize = constants_1.noop, }) => {
+    var _a;
+    const [size, setSize] = (0, react_1.useState)(0);
+    const [splitter, setSplitter] = (0, react_1.useState)(null);
+    const [resizerVisible, setResizerVisible] = (0, react_1.useState)(false);
+    const [resizer, setResizer] = (0, react_1.useState)(null);
+    const [floatingResizer, setFloatingResizer] = (0, react_1.useState)(null);
+    const resizerElement = (0, react_1.useMemo)(() => (floating ? floatingResizer : resizer), [floating, resizer, floatingResizer]);
+    (0, react_1.useEffect)(() => {
+        if (splitter) {
+            const containerSize = orientation === "horizontal"
+                ? splitter.getBoundingClientRect().width
+                : splitter.getBoundingClientRect().height;
+            const initialParsedSize = (0, utils_1.parseSize)(initialPrimarySize, containerSize);
+            setSize(initialParsedSize);
+            if (resize) {
+                resize([
+                    (0, utils_1.toPercentage)(initialParsedSize, containerSize),
+                    (0, utils_1.toPercentage)(containerSize - initialParsedSize, containerSize),
+                ]);
+            }
+        }
+    }, [initialPrimarySize, orientation, resize, splitter, swapped]);
+    (0, react_1.useEffect)(() => {
+        const handleMouseMove = (event) => {
+            if (splitter && resizerElement) {
+                const containerSize = orientation === "horizontal"
+                    ? splitter.getBoundingClientRect().width
+                    : splitter.getBoundingClientRect().height;
+                const newSize = orientation === "horizontal"
+                    ? Math.min(Math.max(event.clientX - splitter.getBoundingClientRect().left, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize))
+                    : Math.min(Math.max(event.clientY - splitter.getBoundingClientRect().top, (0, utils_1.parseSize)(minPrimarySize, containerSize)), (0, utils_1.parseSize)(maxPrimarySize, containerSize));
+                setSize(newSize);
+                if (resize) {
+                    resize([
+                        (0, utils_1.toPercentage)(newSize, containerSize),
+                        (0, utils_1.toPercentage)(containerSize - newSize, containerSize),
+                    ]);
+                }
+            }
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+        const handleMouseDown = () => {
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        };
+        if (resizerElement) {
+            resizerElement.addEventListener("mousedown", handleMouseDown);
+        }
+        return () => {
+            if (resizerElement) {
+                resizerElement.removeEventListener("mousedown", handleMouseDown);
+            }
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [minPrimarySize, maxPrimarySize, orientation, resize, floating, resizerElement, splitter]);
+    (0, react_1.useEffect)(() => {
+        const watchResizer = (event) => {
+            const cursorPosition = orientation === "horizontal" ? event.clientX : event.clientY;
+            if (splitter) {
+                const paneStart = orientation === "horizontal"
+                    ? splitter.getBoundingClientRect().left
+                    : splitter.getBoundingClientRect().top;
+                const resizerPosition = paneStart + size;
+                // Check if the cursor is near the resizer (within 20 pixels)
+                if (cursorPosition > resizerPosition - 20 && cursorPosition < resizerPosition + 20) {
+                    setResizerVisible(true);
+                }
+                else {
+                    setResizerVisible(false);
+                }
+            }
+        };
+        if (splitter) {
+            splitter.addEventListener("mousemove", watchResizer);
+            splitter.addEventListener("mouseleave", () => setResizerVisible(false));
+        }
+        return () => {
+            if (splitter) {
+                splitter.removeEventListener("mouseleave", () => setResizerVisible(false));
+                splitter.removeEventListener("mousemove", watchResizer);
+            }
+        };
+    }, [size, orientation, splitter]);
+    (0, react_1.useEffect)(() => {
+        if (floatingResizer) {
+            floatingResizer.style.opacity = resizerVisible ? "1" : "0";
+        }
+    }, [floatingResizer, resizerVisible]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (s) => setSplitter(s), className: (0, classnames_1.default)(Splitter_module_scss_1.default.splitter, {
+            [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
+            [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
+        }), style: layout, children: react_1.default.Children.count(children) > 1 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: !swapped ? { flexBasis: size } : {}, className: (0, classnames_1.default)({
+                        [Splitter_module_scss_1.default.primaryPanel]: !swapped,
+                        [Splitter_module_scss_1.default.secondaryPanel]: swapped,
+                    }), children: react_1.default.Children.toArray(children)[0] }), !floating && ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Splitter_module_scss_1.default.resizer, {
+                        [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
+                        [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
+                    }), ref: (r) => setResizer(r), children: splitterTemplate })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({
+                        [Splitter_module_scss_1.default.primaryPanel]: swapped,
+                        [Splitter_module_scss_1.default.secondaryPanel]: !swapped,
+                    }), style: swapped ? { flexBasis: size } : {}, children: react_1.default.Children.toArray(children)[1] }), floating && ((0, jsx_runtime_1.jsx)("div", { ref: (fr) => setFloatingResizer(fr), className: (0, classnames_1.default)(Splitter_module_scss_1.default.floatingResizer, {
+                        [Splitter_module_scss_1.default.horizontal]: orientation === "horizontal",
+                        [Splitter_module_scss_1.default.vertical]: orientation === "vertical",
+                    }), style: {
+                        top: orientation === "horizontal" ? 0 : size,
+                        left: orientation === "horizontal" ? size : 0,
+                    }, children: splitterTemplate }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((_a = react_1.default.Children.toArray(children)) === null || _a === void 0 ? void 0 : _a[0]) && ((0, jsx_runtime_1.jsx)("div", { className: Splitter_module_scss_1.default.panel, children: react_1.default.Children.toArray(children)[0] })) })) }));
+};
+exports.Splitter = Splitter;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toPercentage = exports.parseSize = void 0;
+const parseSize = (size, containerSize) => {
+    if (size.endsWith('px')) {
+        return parseInt(size, 10);
+    }
+    else if (size.endsWith('%')) {
+        return (parseInt(size, 10) / 100) * containerSize;
+    }
+    throw new Error('Invalid size format. Use px or %.');
+};
+exports.parseSize = parseSize;
+const toPercentage = (size, containerSize) => {
+    return (size / containerSize) * 100;
+};
+exports.toPercentage = toPercentage;

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

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chStackComponentRenderer = exports.cvStackComponentRenderer = exports.hStackComponentRenderer = exports.vStackComponentRenderer = exports.stackComponentRenderer = exports.CHStackMd = exports.CVStackMd = exports.HStackMd = exports.VStackMd = exports.StackMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const misc_1 = require("@components-core/utils/misc");
+const EngineError_1 = require("@components-core/EngineError");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const metadata_helpers_1 = require("@components/metadata-helpers");
+const StackNative_1 = require("./StackNative");
+const COMP = "Stack";
+const HORIZONTAL_ALIGNMENT = (0, ComponentDefs_1.d)(`Manages the horizontal content alignment for each child element in the Stack.`);
+const VERTICAL_ALIGNMENT = (0, ComponentDefs_1.d)(`Manages the vertical content alignment for each child element in the Stack.`);
+const stackMd = (0, ComponentDefs_1.createMetadata)({
+    description: `\`Stack\` is a layout container displaying children in a horizontal or vertical stack.`,
+    props: {
+        gap: (0, ComponentDefs_1.d)(`Optional size value indicating the gap between child elements.`),
+        reverse: (0, ComponentDefs_1.d)(`Optional boolean property to reverse the order of child elements.`),
+        wrapContent: (0, ComponentDefs_1.d)(`Optional boolean which wraps the content if set to true and the available space is not big ` +
+            `enough. Works in all orientations.`),
+        hoverContainer: (0, ComponentDefs_1.d)("Reserved for future use"),
+        visibleOnHover: (0, ComponentDefs_1.d)("Reserved for future use"),
+    },
+    events: {
+        click: (0, metadata_helpers_1.dClick)(COMP),
+        mounted: (0, ComponentDefs_1.d)("Reserved for future use"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Stack_module_scss_1.default.themeVars),
+});
+exports.StackMd = Object.assign(Object.assign({}, stackMd), { props: Object.assign(Object.assign({}, stackMd.props), { orientation: (0, ComponentDefs_1.d)(`An optional property that governs the Stack's orientation (whether the Stack lays out its ` +
+            `children in a row or a column).`), horizontalAlignment: HORIZONTAL_ALIGNMENT, verticalAlignment: VERTICAL_ALIGNMENT }) });
+exports.VStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack rendering its contents vertically.`, props: Object.assign(Object.assign({}, stackMd.props), { horizontalAlignment: HORIZONTAL_ALIGNMENT, verticalAlignment: VERTICAL_ALIGNMENT }) });
+exports.HStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack rendering its contents horizontally.`, props: Object.assign(Object.assign({}, stackMd.props), { horizontalAlignment: HORIZONTAL_ALIGNMENT, verticalAlignment: VERTICAL_ALIGNMENT }) });
+exports.CVStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack that renders its contents vertically ` +
+        `and aligns that in the center along both axes.` });
+exports.CHStackMd = Object.assign(Object.assign({}, exports.StackMd), { specializedFrom: COMP, description: `This component represents a stack that renders its contents horizontally ` +
+        `and aligns that in the center along both axes.` });
+function renderStack({ node, layoutNonCss, extractValue, layoutCss, lookupEventHandler, renderChild, orientation = layoutNonCss.orientation || StackNative_1.DEFAULT_ORIENTATION, horizontalAlignment = layoutNonCss.horizontalAlignment, verticalAlignment = layoutNonCss.verticalAlignment, }) {
+    var _a, _b, _c;
+    if (!(0, misc_1.isComponentDefChildren)(node.children)) {
+        throw new EngineError_1.NotAComponentDefError();
+    }
+    return ((0, jsx_runtime_1.jsx)(StackNative_1.Stack, { orientation: orientation, horizontalAlignment: horizontalAlignment, verticalAlignment: verticalAlignment, reverse: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.reverse), hoverContainer: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.hoverContainer), visibleOnHover: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.visibleOnHover), layout: layoutCss, onMount: lookupEventHandler("mounted"), children: renderChild(node.children, {
+            type: "Stack",
+            orientation,
+        }) }));
+}
+exports.stackComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.StackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+    });
+});
+exports.vStackComponentRenderer = (0, renderers_1.createComponentRenderer)("VStack", exports.VStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "vertical",
+    });
+});
+exports.hStackComponentRenderer = (0, renderers_1.createComponentRenderer)("HStack", exports.HStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "horizontal",
+    });
+});
+exports.cvStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CVStack", exports.CVStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "vertical",
+        horizontalAlignment: "center",
+        verticalAlignment: "center",
+    });
+});
+exports.chStackComponentRenderer = (0, renderers_1.createComponentRenderer)("CHStack", exports.CHStackMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
+    return renderStack({
+        node,
+        layoutNonCss,
+        extractValue,
+        layoutCss,
+        lookupEventHandler,
+        renderChild,
+        orientation: "horizontal",
+        horizontalAlignment: "center",
+        verticalAlignment: "center",
+    });
+});

package/dist/scripts/src/components/Stack/StackNative.js

@@ -0,0 +1,39 @@
+"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.Stack = exports.DEFAULT_ORIENTATION = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Stack_module_scss_1 = __importDefault(require("./Stack.module.scss"));
+const component_hooks_1 = require("@components-core/component-hooks");
+const hooks_1 = require("@components-core/utils/hooks");
+exports.DEFAULT_ORIENTATION = "vertical";
+// =====================================================================================================================
+// Stack React component
+exports.Stack = (0, react_1.forwardRef)(function Stack(_a, ref) {
+    var { uid, children, orientation = exports.DEFAULT_ORIENTATION, horizontalAlignment, verticalAlignment, layout, reverse, hoverContainer, visibleOnHover, onClick, onMount } = _a, rest = __rest(_a, ["uid", "children", "orientation", "horizontalAlignment", "verticalAlignment", "layout", "reverse", "hoverContainer", "visibleOnHover", "onClick", "onMount"]);
+    (0, hooks_1.useOnMount)(onMount);
+    const { horizontal, vertical } = (0, component_hooks_1.useContentAlignment)(orientation, horizontalAlignment, verticalAlignment);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { onClick: onClick, ref: ref, style: layout, className: (0, classnames_1.default)(Stack_module_scss_1.default.base, {
+            [Stack_module_scss_1.default.vertical]: orientation === "vertical",
+            [Stack_module_scss_1.default.horizontal]: orientation === "horizontal",
+            [Stack_module_scss_1.default.reverse]: reverse,
+            [Stack_module_scss_1.default.hoverContainer]: hoverContainer,
+            "display-on-hover": visibleOnHover,
+            [Stack_module_scss_1.default.handlesClick]: !!onClick,
+        }, horizontal !== null && horizontal !== void 0 ? horizontal : "", vertical !== null && vertical !== void 0 ? vertical : ""), children: children })));
+});

package/dist/scripts/src/components/StateViewer/StateViewerNative.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const StateViewer_module_scss_1 = __importDefault(require("./StateViewer.module.scss"));
+const StateViewer = ({ children, state, showBoundary = true, blink = true }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(StateViewer_module_scss_1.default.stateViewerContainer), style: { width: "inherit", height: "inherit" }, children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StateViewer_module_scss_1.default.overlay, {
+                    [StateViewer_module_scss_1.default.showBoundary]: showBoundary,
+                }), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(StateViewer_module_scss_1.default.marker, {
+                        [StateViewer_module_scss_1.default.blink]: blink,
+                    }), onClick: () => {
+                        console.log(state);
+                    } }) })] }));
+};
+exports.StateViewer = StateViewer;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stickyBoxComponentRenderer = exports.StickyBoxMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const StickyBox_module_scss_1 = __importDefault(require("./StickyBox.module.scss"));
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const StickyBoxNative_1 = require("./StickyBoxNative");
+const COMP = "StickyBox";
+exports.StickyBoxMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` is a component that "sticks" or remains fixed at the top or bottom ` +
+        `position on the screen as the user scrolls.`,
+    props: {
+        to: (0, ComponentDefs_1.d)(`This property determines whether the StickyBox should be anchored to ` +
+            `the \`top\` or \`bottom\`.`),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(StickyBox_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`color-bg-${COMP}`]: "$color-bg",
+    },
+});
+exports.stickyBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.StickyBoxMd, ({ node, renderChild, extractValue, layoutCss }) => {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)(StickyBoxNative_1.StickyBox, { uid: node.uid, layout: layoutCss, to: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.to), children: renderChild(node.children) }));
+});