@ramesesinc/platform-core 0.1.0

package/dist/lib/WebPlatform.js

@@ -0,0 +1,124 @@
+var _a, _b;
+const resolveContextPath = () => {
+    var _a, _b;
+    const path = ((_b = ((_a = process.env.CONTEXT_PATH) !== null && _a !== void 0 ? _a : process.env.NEXT_PUBLIC_APP_CONTEXT_PATH)) !== null && _b !== void 0 ? _b : "").trim();
+    if (path === '') {
+        return '/';
+    }
+    else if (!path.startsWith("/")) {
+        return `/${path}`;
+    }
+    return path;
+};
+const resolveTenantName = () => {
+    var _a, _b;
+    const name = ((_b = ((_a = process.env.TENANT_NAME) !== null && _a !== void 0 ? _a : process.env.NEXT_PUBLIC_TENANT_NAME)) !== null && _b !== void 0 ? _b : "").trim();
+    return (name === '' ? 'base' : name);
+};
+const resolveModuleName = () => {
+    var _a, _b;
+    const name = ((_b = ((_a = process.env.MODULE_NAME) !== null && _a !== void 0 ? _a : process.env.NEXT_PUBLIC_MODULE_NAME)) !== null && _b !== void 0 ? _b : '').trim();
+    return name;
+};
+const resolvePathName = (contextPath, module, pathname) => {
+    if (pathname.startsWith('//')) {
+        return resolvePathName(contextPath, module, pathname.substring(1));
+    }
+    else {
+        let newPath = pathname;
+        if (!pathname.startsWith('/')) {
+            newPath = `/${pathname}`;
+        }
+        let prefix = [contextPath, module].filter(str => str != null && str.trim() !== '').join('/');
+        if (prefix.startsWith('//'))
+            prefix = prefix.substring(1);
+        if (!prefix.startsWith('/'))
+            prefix = `/${prefix}`;
+        if (newPath.startsWith(prefix))
+            return newPath;
+        return resolvePathName(contextPath, module, `${prefix}${newPath}`);
+    }
+};
+const getResourcePath = (contextPath, module, pathname) => {
+    if (pathname.startsWith('//')) {
+        return getResourcePath(contextPath, module, pathname.substring(1));
+    }
+    else {
+        let newPath = pathname;
+        if (pathname.startsWith('/')) {
+            newPath = pathname.substring(1);
+        }
+        let prefix = [contextPath, '_res', module ? module : null].join('/');
+        if (prefix.startsWith('//')) {
+            prefix = prefix.substring(1);
+        }
+        if (!prefix.startsWith('/')) {
+            prefix = `/${prefix}`;
+        }
+        if (newPath.startsWith(prefix)) {
+            return newPath;
+        }
+        return `${prefix}${newPath}`;
+    }
+};
+const getSegmentsImpl = (pathname) => {
+    const valueOf = (parts, index) => {
+        try {
+            return parts[index];
+        }
+        catch (err) {
+            return null;
+        }
+    };
+    if (pathname.startsWith('/modules/')) {
+        const re = new RegExp('^/modules/([^/]+)/([^/]+)/.*$');
+        const match = pathname.match(re);
+        const tenant = valueOf(match, 1);
+        const moduleid = valueOf(match, 2);
+    }
+    else {
+        const re = new RegExp('^/([^/]+)/([^/]+)/.*$');
+        const match = pathname.match(re);
+        const tenant = valueOf(match, 1);
+        const moduleid = valueOf(match, 2);
+    }
+    return '';
+};
+export const WebPlatform = {
+    CONTEXT_PATH: resolveContextPath(),
+    TENANT_NAME: resolveTenantName(),
+    MODULE_NAME: resolveModuleName(),
+    MGMT_SERVER_URI: ((_b = ((_a = process.env.MGMT_SERVER_URI) !== null && _a !== void 0 ? _a : process.env.NEXT_PUBLIC_MGMT_SERVER_URI)) !== null && _b !== void 0 ? _b : null),
+    env: (name, defaultValue) => {
+        const key_1 = name;
+        const key_2 = `next_public_${key_1}`.toUpperCase();
+        const value = (process.env[key_1] || process.env[key_2]);
+        return (value !== null && value !== void 0 ? value : defaultValue);
+    },
+    getResourcePath: (pathname) => {
+        return getResourcePath(resolveContextPath(), resolveModuleName(), pathname);
+    },
+    resolvePathName: (pathname) => {
+        return resolvePathName(resolveContextPath(), resolveModuleName(), pathname);
+    },
+    isModulePath: (pathname) => {
+        let sPath = pathname;
+        if (sPath.startsWith('//'))
+            sPath = sPath.substring(1);
+        if (!sPath.startsWith('/'))
+            sPath = `/${sPath}`;
+        return sPath.startsWith('/modules');
+    },
+    isSysMgmtPath: (pathname) => {
+        let sPath = pathname;
+        if (sPath.startsWith('//'))
+            sPath = sPath.substring(1);
+        if (!sPath.startsWith('/'))
+            sPath = `/${sPath}`;
+        return sPath.startsWith('/sysmgmt');
+    },
+    getSegments: (pathname) => {
+        return getSegmentsImpl(pathname);
+    }
+};
+export default WebPlatform;

package/dist/lib/components/ActivityBar.d.ts

@@ -0,0 +1,13 @@
+type ActivityBarProps = {
+    value: string;
+    handler: (item: Record<string, any>) => void;
+};
+export type ActivityItem = {
+    id: string;
+    icon: React.ReactNode;
+    label: string;
+    [key: string]: any;
+};
+export declare const getResourcePath: (name: string) => string;
+declare function ActivityBar({ value, handler }: ActivityBarProps): import("react/jsx-runtime").JSX.Element;
+export default ActivityBar;

package/dist/lib/components/ActivityBar.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import WebPlatform from "../WebPlatform";
+export const getResourcePath = (name) => {
+    return WebPlatform.getResourcePath(`icons/${name}`);
+};
+const items = [
+    { id: "mainmenu", label: "Main Menu", icon: _jsx("img", { src: getResourcePath("hamburger-menu.png"), width: 24 }) },
+    { id: "dashboard", label: "Dashboard", icon: _jsx("img", { src: getResourcePath("dashboard.png"), width: 24 }) },
+    { id: "main", label: "Transactions", icon: _jsx("img", { src: getResourcePath("txn.png"), width: 24 }) },
+    { id: "mgmt", label: "Management", icon: _jsx("img", { src: getResourcePath("mgmt.png"), width: 24 }) },
+    { id: "sysmgmt", label: "System Management", icon: _jsx("img", { src: getResourcePath("settings.png"), width: 24 }) },
+];
+function ActivityBar({ value, handler }) {
+    items.map((item) => {
+        item.heightClassNames = "h-12";
+        item.hoverClassNames = "hover:bg-gray-200 ";
+        item.selectedClassNames = "";
+        if (item.id === value) {
+            item.selectedClassNames = "border-l-[3px] border-blue-500";
+        }
+        if (item.id === "mainmenu") {
+            item.heightClassNames = "h-[60px]";
+            item.hoverClassNames = "hover:bg-blue-100";
+        }
+    });
+    const handleClick = (item) => {
+        if (item.id === "mainmenu") {
+            // do nothing
+            return;
+        }
+        if (handler != null) {
+            const newItem = Object.assign({}, item);
+            handler(newItem);
+        }
+    };
+    return (_jsx("div", { className: "flex flex-col items-center w-12 h-screen border-r bg-gray-50", children: items.map((item) => (_jsx("button", { className: `w-12 ${item.heightClassNames} flex items-center justify-center transition-colors ${item.selectedClassNames} ${item.hoverClassNames}`.trim(), title: item.label, onClick: () => handleClick(item), children: _jsx("div", { className: `transition-transform transform hover:scale-100`, children: item.icon }) }, item.id))) }));
+}
+export default ActivityBar;

package/dist/lib/components/CopyButton.d.ts

@@ -0,0 +1,8 @@
+declare const CopyButton: ({ item, className, copySize, copiedSize, classNameCopied, }: {
+    item?: string | Record<string, any>;
+    className?: string;
+    copySize?: number;
+    copiedSize?: number;
+    classNameCopied?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CopyButton;

package/dist/lib/components/CopyButton.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Copy, CopyCheck } from "lucide-react";
+import { useState } from "react";
+import { Button } from "seti-ramesesv1";
+const CopyButton = ({ item, className, copySize = 20, copiedSize = 10, classNameCopied, }) => {
+    const [copied, setCopied] = useState(false);
+    const copyData = async () => {
+        if (!item) {
+            alert("No data to copy.");
+            return;
+        }
+        try {
+            let dataToCopy = "";
+            // ✅ Handle string or object
+            if (typeof item === "string") {
+                try {
+                    const parsed = JSON.parse(item); // if it's valid JSON string
+                    dataToCopy = JSON.stringify(parsed, null, 2); // pretty print
+                }
+                catch (_a) {
+                    dataToCopy = item; // copy raw string if not JSON
+                }
+            }
+            else if (typeof item === "object") {
+                dataToCopy = JSON.stringify(item, null, 2);
+            }
+            // ✅ Clipboard support check
+            if (!navigator.clipboard || !navigator.clipboard.writeText) {
+                console.warn("Clipboard API not available, using fallback.");
+                const textArea = document.createElement("textarea");
+                textArea.value = dataToCopy;
+                document.body.appendChild(textArea);
+                textArea.select();
+                document.execCommand("copy");
+                document.body.removeChild(textArea);
+            }
+            else {
+                await navigator.clipboard.writeText(dataToCopy);
+            }
+            setCopied(true);
+            setTimeout(() => setCopied(false), 800);
+        }
+        catch (err) {
+            console.error("Failed to copy data:", err);
+            alert("Failed to copy data.");
+        }
+    };
+    return (_jsx("div", { className: "flex flex-col items-center justify-center", children: !copied ? (_jsx(Button, { onClick: copyData, className: `flex items-center justify-center !px-3 !bg-gray-300 !text-black/80 ${className}`, children: _jsx(Copy, { size: copySize }) })) : (_jsx("div", { className: `bg-gray-200/80 px-[17px] py-[13px] rounded-lg ${classNameCopied}`, children: _jsx(CopyCheck, { size: copiedSize, className: "animate-ping" }) })) }));
+};
+export default CopyButton;

package/dist/lib/components/Header.d.ts

@@ -0,0 +1,2 @@
+declare const Header: () => import("react/jsx-runtime").JSX.Element;
+export default Header;

package/dist/lib/components/Header.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { moduleClient } from "@ramesesinc/lib/local-api";
+import { Bell, LogOut, User } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { useAuth } from "../../core/AuthContext";
+import HorizontalLayout from "../../layouts/HorizontalLayout";
+import WebPlatform from "../WebPlatform";
+import { getResourcePath } from "./ActivityBar";
+import QuickActionMenu from "./QuickActionMenu";
+import UserButton from "./UserButton";
+const Header = () => {
+    var _a;
+    const app = useApp();
+    const auth = useAuth();
+    const router = useRouter();
+    const [, reload] = useState("");
+    useEffect(() => {
+        reload(new Date().toISOString().slice(0, 19));
+    }, [auth.sessionId, app.tenant, app.module]);
+    const iconClass = "w-[12px] h-[12px] text-gray-600";
+    const menuItems = [
+        {
+            label: "Profile",
+            icon: _jsx(User, { className: iconClass }),
+            onClick: () => console.log("Navigate to profile"),
+        },
+        {
+            label: "Logout",
+            icon: _jsx(LogOut, { className: iconClass }),
+            onClick: async () => {
+                try {
+                    await auth.signOut();
+                    window.location.href = `/${app.tenant}/login`;
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            },
+        },
+    ];
+    const actionMenuHandler = {
+        getItems: async () => {
+            var _a;
+            try {
+                const list = await moduleClient((_a = app.tenant) !== null && _a !== void 0 ? _a : "").getModules();
+                list.map((item) => (item.id = item._id));
+                return list;
+            }
+            catch (err) {
+                console.log(err);
+                return null;
+            }
+        },
+        onSelect: async (item) => {
+            var _a, _b;
+            if (app.tenant != null && item.id != null) {
+                const activityId = (_b = (_a = item.defaultpage) !== null && _a !== void 0 ? _a : auth.activityId) !== null && _b !== void 0 ? _b : "main";
+                const newPath = `/${app.tenant}/${item.id}/${activityId}`;
+                router.push(newPath);
+            }
+        },
+    };
+    const handleIcon = () => {
+        router.push(`/${app.tenant}`);
+    };
+    const logoPath = WebPlatform.getResourcePath("logo.png");
+    const leftView = (_jsxs("div", { className: "flex justify-center items-center gap-2", children: [_jsx("img", { src: logoPath, alt: "", className: "h-[28px] cursor-pointer", onClick: handleIcon }), app.module && _jsx("span", { className: "font-bold text-[22px] text-gray-500 pb-1", children: (_a = app.module) === null || _a === void 0 ? void 0 : _a.toUpperCase() })] }));
+    const rightView = (_jsxs("div", { className: "flex items-center gap-2", children: [auth.sessionId && (_jsxs("div", { className: "relative cursor-pointer", children: [_jsx(Bell, { className: "text-gray-600 w-[20px] h-[18px]" }), _jsx("span", { className: "absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full" })] })), auth.sessionId && _jsx(QuickActionMenu, { handler: actionMenuHandler }), auth.sessionId && (_jsx("a", { href: `/sysmgmt/${app.tenant}/${app.module}`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center rounded-full hover:bg-gray-100", title: "System Management", children: _jsx("img", { src: getResourcePath("settings.png"), width: 18 }) })), auth.sessionId && _jsx(UserButton, { menuItems: menuItems })] }));
+    return (_jsx(HorizontalLayout, { left: leftView, right: rightView, className: "h-[60px] min-h-[60px] max-h-[60px] items-center px-8 py-2 border-b border-gray-200" }));
+};
+export default Header;

package/dist/lib/components/QuickActionMenu.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export type QuickActionMenuItem = {
+    id: string;
+    title: string;
+    short?: string;
+    defaultpage?: string;
+    icon?: string;
+    iconRenderer?: ReactNode;
+};
+type QuickActionHandler = {
+    getItems: () => Promise<QuickActionMenuItem[] | null>;
+    onSelect: (item: QuickActionMenuItem) => Promise<void>;
+};
+type QuickActionMenuProps = {
+    handler: QuickActionHandler;
+};
+declare const QuickActionMenu: ({ handler }: QuickActionMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default QuickActionMenu;

package/dist/lib/components/QuickActionMenu.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBinding } from "@ramesesinc/client";
+import { Package } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import WebPlatform from "../WebPlatform";
+const QuickActionMenu = ({ handler }) => {
+    const [open, setOpen] = useState(false);
+    const [items, setItems] = useState([]);
+    const menuRef = useRef(null);
+    const binding = useBinding();
+    const handleOpenActions = async () => {
+        const list = await handler.getItems();
+        if (list != null) {
+            list.map((item) => {
+                var _a;
+                item.short = (_a = item.short) !== null && _a !== void 0 ? _a : item.title;
+            });
+            list.sort((a, b) => {
+                return a.title.localeCompare(b.title);
+            });
+        }
+        setItems(list !== null && list !== void 0 ? list : []);
+        setOpen(!open);
+    };
+    // Close menu on click outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleItemClick = async (item) => {
+        setOpen(false);
+        if (item != null) {
+            await handler.onSelect(item);
+        }
+    };
+    const getIconRenderer = (item) => {
+        if (item.icon == null || item.icon === "") {
+            return _jsx(Package, { className: "w-[36px] h-[36px] object-contain" });
+        }
+        return _jsx("img", { src: item.icon, alt: "", className: "w-[36px] h-[36px] object-contain" });
+    };
+    const menuIconPath = WebPlatform.getResourcePath("icons/grid-menu.png");
+    return (_jsxs("div", { className: "relative inline-block", ref: menuRef, children: [_jsx("button", { title: "Quick Actions", className: `appearance-none flex items-center gap-1 rounded ${open ? "bg-gray-200" : "hover:bg-gray-100"} px-1 py-1 transition`, onClick: handleOpenActions, children: _jsx("img", { src: menuIconPath, alt: "", className: "w-[20px] h-[20px]" }) }), open && (_jsxs("div", { className: "fixed right-2 w-[330px] flex flex-col bg-white border border-gray-200 rounded-lg shadow-lg z-20 p-2", children: [_jsx("span", { className: "text-[0.6em] font-extrabold text-gray-400", children: "MODULES" }), _jsx("div", { className: "grid grid-cols-3 pt-1 gap-1", children: items.map((item) => (_jsxs("button", { title: item.title, onClick: () => handleItemClick(item), className: "appearance-none w-[100px] h-[90px] flex flex-col items-center justify-center p-1 bg-gray-50 border border-gray-100 rounded-lg hover:bg-blue-50 transition", children: [getIconRenderer(item), _jsx("span", { className: "text-[0.8em] font-semibold text-gray-500 text-center truncate w-full", children: item.short })] }, `quick-action:${item.id}`))) })] }))] }));
+};
+export default QuickActionMenu;

package/dist/lib/components/UserButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+type MenuItem = {
+    label: string;
+    onClick: () => void;
+    icon?: ReactNode;
+};
+type UserButtonProps = {
+    menuItems: MenuItem[];
+};
+declare const UserButton: ({ menuItems }: UserButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default UserButton;

package/dist/lib/components/UserButton.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBinding } from "@ramesesinc/client";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import * as session from "../../core/auth/session";
+import { useAuth } from "../../core/AuthContext";
+import WebPlatform from "../WebPlatform";
+const UserButton = ({ menuItems }) => {
+    var _a;
+    const app = useApp();
+    const auth = useAuth();
+    const binding = useBinding();
+    const [open, setOpen] = useState(false);
+    const [user, setUser] = useState(null);
+    const menuRef = useRef(null);
+    const handleOpenAction = async () => {
+        var _a;
+        let userInfo = null;
+        try {
+            if (auth.sessionId) {
+                const tokenInfo = await session.verifyToken(auth.sessionId);
+                const { INFO } = (tokenInfo !== null && tokenInfo !== void 0 ? tokenInfo : {});
+                if (INFO != null) {
+                    // auth_post_enabled is set to false
+                    // use the returned INFO as the user info
+                    userInfo = INFO;
+                }
+                else if ((tokenInfo === null || tokenInfo === void 0 ? void 0 : tokenInfo.USERID) != null) {
+                    userInfo = await session.getUser(tokenInfo.USERID, (_a = app.tenant) !== null && _a !== void 0 ? _a : "");
+                }
+            }
+        }
+        catch (err) {
+            userInfo = { fullname: "USER" };
+        }
+        setUser(userInfo);
+        setOpen(!open);
+    };
+    // Close menu on click outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleItemClick = (item) => {
+        try {
+            if (item && item.onClick != null) {
+                item.onClick();
+            }
+        }
+        finally {
+            setOpen(false);
+        }
+    };
+    const userIconPath = WebPlatform.getResourcePath("assets/HB.jpg");
+    return (_jsxs("div", { className: "relative inline-block", ref: menuRef, children: [_jsxs("button", { onClick: (e) => {
+                    e.preventDefault();
+                    handleOpenAction();
+                }, className: `appearance-none flex items-center gap-1 rounded-full ${open ? "bg-gray-200" : "bg-gray-100 hover:bg-gray-200"} px-1 py-1 transition`, children: [_jsx("img", { src: userIconPath, alt: "", className: "w-[24px] h-[24px] rounded-full object-cover" }), _jsx(ChevronDown, { className: `w-[12px] h-[12px] text-gray-600 transition-transform ${open ? "rotate-180" : ""}` })] }), open && (_jsx("div", { className: "absolute right-0 w-[270px] bg-white border border-gray-200 rounded-lg shadow-lg z-20", children: _jsxs("ul", { className: "px-2 py-2 text-sm text-gray-700", children: [user && (_jsxs(_Fragment, { children: [_jsxs("li", { className: "flex items-center gap-2 py-1 pl-1 pb-2 cursor-default", children: [_jsx("img", { src: userIconPath, alt: "", className: "w-[32px] h-[32px] rounded-full object-cover" }), _jsxs("div", { className: "flex flex-col max-w-[190px]", children: [_jsx("span", { className: "text-[0.9em] font-semibold leading-[10px] truncate block", children: user.fullname }), _jsx("span", { className: "text-[0.7em] font-semibold text-gray-400 truncate block", children: (_a = user.title) !== null && _a !== void 0 ? _a : "-" })] }), _jsx("div", { className: "flex-1" })] }), _jsx("li", { className: "border-[1px] border-t border-gray-100" }), _jsx("li", { className: "pt-1" })] })), menuItems.map((item) => (_jsxs("li", { className: "flex items-center gap-2 px-2 py-1 hover:bg-gray-100 hover:rounded-lg cursor-pointer", onClick: () => handleItemClick(item), children: [item.icon, _jsx("span", { children: item.label })] }, item.label)))] }) }))] }));
+};
+export default UserButton;

package/dist/lib/layouts/BorderLayout.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import HorizontalLayout from "./HorizontalLayout";
+import PageLayout from "./PageLayout";
+
+type BorderLayoutProps = {
+  layoutid?: string;
+  className?: string;
+  vgap?: number;
+  hgap?: number;
+
+  north?: ReactNode;
+  south?: ReactNode;
+  east?: ReactNode;
+  west?: ReactNode;
+
+  children?: ReactNode;
+};
+
+const BorderLayout = ({ layoutid, className, vgap = 0, hgap = 0, north, south, east, west, children }: BorderLayoutProps) => {
+  const preferredLayoutId = layoutid ?? "" ? layoutid : "borderlayout";
+
+  return (
+    <PageLayout layoutid={`${preferredLayoutId}`} className={className} gap={vgap} header={north} footer={south}>
+      <HorizontalLayout layoutid={`${preferredLayoutId}-center`} gap={hgap} left={west} right={east}>
+        {children}
+      </HorizontalLayout>
+    </PageLayout>
+  );
+};
+
+export default BorderLayout;

package/dist/lib/layouts/CardLayout.tsx

@@ -0,0 +1,73 @@
+import { UIControl } from "@ramesesinc/client";
+import React, { ReactElement, ReactNode, Suspense } from "react";
+
+export interface CardProps {
+  name: string;
+  element: ReactNode;
+}
+/**
+ * Card is a declarative wrapper for CardLayout.
+ * It does not render UI by itself, only provides data (name + element).
+ */
+export function Card(_props: CardProps): null {
+  return null;
+}
+
+type CardLayoutRefModel = {
+  getName: () => string | null;
+  getElement: () => ReactNode;
+  validate: () => void;
+};
+
+export type CardLayoutRef = {
+  current?: CardLayoutRefModel;
+};
+
+type CardLayoutProps = {
+  ref?: CardLayoutRef;
+  layoutid?: string;
+  className?: string;
+  children: ReactNode;
+
+  value: string;
+};
+
+const CardLayout = ({ ref, layoutid, className, children, value = "default" }: CardLayoutProps) => {
+  const preferredLayoutId = (layoutid ?? "") ? layoutid : "cardlayout";
+
+  // Extract only <Card> children
+  const cards: ReactElement<CardProps>[] = React.Children.toArray(children).filter(
+    (child): child is ReactElement<CardProps> => React.isValidElement(child) && child.type === Card,
+  );
+
+  const activeCard = cards.find((c) => c.props.name === value);
+
+  if (ref != null) {
+    ref.current = {
+      getName: () => (activeCard ? activeCard.props.name : null),
+      getElement: () => (activeCard ? activeCard.props.element : null),
+      validate: () => {
+        if (activeCard == null || activeCard.props.element == null) {
+          return;
+        }
+
+        const elem = activeCard.props.element;
+        const props = (elem as ReactElement<UIControl>).props;
+        if (props.binding != null) {
+          const result = props.binding.validate();
+          if (result != null) {
+            throw Error(result);
+          }
+        }
+      },
+    };
+  }
+
+  return (
+    <div className={`${preferredLayoutId}-container ${className ?? ""} flex flex-col h-full`}>
+      <Suspense fallback={<div>Loading...</div>}>{activeCard ? activeCard.props.element : null}</Suspense>
+    </div>
+  );
+};
+
+export default CardLayout;

package/dist/lib/layouts/CenterLayout.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+type CenterLayoutProps = {
+  layoutid?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+const CenterLayout = ({ layoutid, className, children }: CenterLayoutProps) => {
+
+  const preferredLayoutId = ((layoutid ?? '') ? layoutid : 'pagelayout');
+
+  return (
+    <div className={`${preferredLayoutId}-container ${className ?? ''} flex items-center justify-center w-full h-full`}>
+      {children}
+    </div>
+  );
+};
+
+export default CenterLayout;

package/dist/lib/layouts/GridLayout.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+type GridLayoutProps = {
+    className?: string;
+    cols?: number;
+    gap?: number;
+
+    children?: ReactNode;
+}
+
+const GridLayout = ({ className, cols = 3, gap = 1, children }: GridLayoutProps) => {
+
+    return (
+        <div className={`${className ?? ''} grid gap-${gap}`} style={{gridTemplateColumns: `repeat(${cols}, 1fr)`}}>
+            {children}
+        </div>
+    );
+};
+
+export default GridLayout;

package/dist/lib/layouts/HPanel.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import React, { CSSProperties, ReactNode } from "react";
+
+interface HPanelProps {
+  children?: ReactNode;
+  gap?: number | string; // spacing between items
+  style?: CSSProperties;
+  className?: string;
+  alignItems?: CSSProperties["alignItems"]; // flex alignment
+  justifyContent?: CSSProperties["justifyContent"];
+}
+
+const HPanel: React.FC<HPanelProps> = ({ children, gap = 0, style, className, alignItems = "center", justifyContent = "flex-start" }) => {
+  const panelStyle: CSSProperties = {
+    display: "flex",
+    flexDirection: "row",
+    gap: gap,
+    alignItems,
+    justifyContent,
+    ...style,
+  };
+
+  return (
+    <div style={panelStyle} className={className}>
+      {children}
+    </div>
+  );
+};
+
+export default HPanel;