@ramesesinc/platform-core 0.1.5 → 0.1.8

package/dist/core/PopupContext.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// src/core/PageContext.tsx
+import { mergeCN } from "@ramesesinc/client";
+import { createContext, useContext, useRef, useEffect, useLayoutEffect, useState, useSyncExternalStore, useMemo, } from "react";
+// 
+// CONTEXT
+// 
+const PopupManagerContext = createContext(null);
+function createPopupStore() {
+    let popups = [];
+    const listeners = new Set();
+    function emit() {
+        listeners.forEach((l) => {
+            // console.log("emitting listener =>", l);
+            l();
+        });
+    }
+    function subscribe(listener) {
+        listeners.add(listener);
+        // console.log("subscribers", listeners);
+        return () => listeners.delete(listener);
+    }
+    function getSnapshot() {
+        return popups;
+    }
+    function addPopup(state) {
+        popups = [...popups, state];
+        emit();
+    }
+    function updatePopup(id, patch) {
+        if (patch == null || Object.keys(patch).length === 0)
+            return;
+        let state_names = ["visible", "content"];
+        const popupState_patch = {};
+        Object.keys(patch).forEach((key) => {
+            if (state_names.indexOf(key) >= 0) {
+                popupState_patch[key] = patch[key];
+            }
+        });
+        state_names = [
+            "modal", "draggable", "showCloseButton",
+            "minWidth", "minHeight", "className", "title",
+            "width", "height"
+        ];
+        const popupOptions_patch = {};
+        Object.keys(patch).forEach((key) => {
+            if (state_names.indexOf(key) >= 0) {
+                popupOptions_patch[key] = patch[key];
+            }
+        });
+        // console.log("updatePopup", id, popupState_patch, popupOptions_patch);
+        popups = popups.map((p) => {
+            var _a;
+            if (p.id === id) {
+                return Object.assign(Object.assign(Object.assign({}, p), popupState_patch), { options: Object.assign(Object.assign({}, ((_a = p.options) !== null && _a !== void 0 ? _a : {})), popupOptions_patch) });
+            }
+            return p;
+        });
+        emit();
+    }
+    function removePopup(id) {
+        popups = popups.filter((p) => p.id !== id);
+        emit();
+    }
+    function removeAll() {
+        popups = [];
+        emit();
+    }
+    return {
+        subscribe,
+        getSnapshot,
+        addPopup,
+        updatePopup,
+        removePopup,
+        removeAll,
+    };
+}
+// Singleton store
+const store = createPopupStore();
+// 
+// POPUP MANAGER
+// 
+const counterRef = { current: 0 };
+function createPopupManager() {
+    const create = (initialOptions) => {
+        // console.log("create initialOptions => ", initialOptions); 
+        const counter = ++counterRef.current;
+        const id = `popup-${counter}`;
+        const options = Object.assign({ modal: true, draggable: true, showCloseButton: true, minWidth: 400, minHeight: 200, className: "" }, (initialOptions !== null && initialOptions !== void 0 ? initialOptions : {}));
+        const state = {
+            id,
+            counter,
+            content: null,
+            visible: false,
+            options
+        };
+        store.addPopup(state);
+        return {
+            id,
+            setContent(content) {
+                store.updatePopup(id, { content });
+            },
+            show() {
+                store.updatePopup(id, { visible: true });
+            },
+            hide() {
+                // store.updatePopup(id, { visible: false });
+                store.removePopup(id);
+            },
+            close() {
+                store.removePopup(id);
+            },
+        };
+    };
+    const closeAll = () => {
+        store.removeAll();
+    };
+    return { create, closeAll };
+}
+// Singleton manager
+const popupMgr = createPopupManager();
+// 
+// POPUP OVERLAY COMPONENT
+// 
+function PopupContentLayout({ data, style = null, children, }) {
+    const { options = {} } = data !== null && data !== void 0 ? data : {};
+    const { showCloseButton = true, showTitle = false, title, className = "" } = options;
+    const preferredStyles = Object.assign({}, (style !== null && style !== void 0 ? style : {}));
+    const layoutContentClass = mergeCN("min-w-[200px] min-h-[100px] overflow-auto p-0", className);
+    const getTitleStyles = () => {
+        const cssProps = {};
+        if ((title !== null && title !== void 0 ? title : "").trim() === "" && !showCloseButton) {
+            cssProps.paddingTop = '8px';
+        }
+        return cssProps;
+    };
+    const handleClose = () => {
+        store.removePopup(String(data.id));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsx("label", { id: "layout-title", className: "popup-drag-handle flex-1 p-0 text-sm font-semibold text-gray-800 truncate min-w-[100px]", style: Object.assign({ paddingLeft: "8px", cursor: 'grab', userSelect: 'none' }, getTitleStyles()), children: showTitle ? (title !== null && title !== void 0 ? title : "") : "" }), showCloseButton && (_jsx("button", { id: "layout-button", onClick: handleClose, className: "flex flex-shrink-1 justify-center items-center p-0 m-0 w-6 h-6 rounded-md font-bold text-gray-400 hover:text-gray-700 hover:bg-gray-100", style: { fontSize: "14px" }, children: "\u2715" }))] }), _jsx("div", { id: "layout-content", className: layoutContentClass, style: Object.assign({ padding: "10px", paddingTop: "4px" }, preferredStyles), children: children !== null && children !== void 0 ? children : null })] }));
+}
+function PopupOverlay({ popup }) {
+    var _a;
+    const modalRef = useRef(null);
+    const [layout, setLayout] = useState({ opacity: 0, top: 0, left: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const [windowStart, setWindowStart] = useState({ x: 0, y: 0 });
+    const { visible: isVisible = false, options: popupOptions = {} } = popup;
+    const { modal: isModal = true, draggable: isDraggable = true, showCloseButton: allowShowCloseButton = true, minWidth = 300, minHeight = 150, width, height, className = "", } = popupOptions;
+    // Get all visible popups to determine backdrop count
+    const allPopups = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    const visibleModalPopups = allPopups.filter(p => p.visible && isModal);
+    const isLastModalPopup = ((_a = visibleModalPopups.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === popup.id;
+    // --- LOGIC: DRAG FUNCTIONALITY ---
+    // Handle mouse events for dragging the popup window
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const handleMouseMove = (e) => {
+            if (!isDraggable)
+                return;
+            if (!isDragging)
+                return;
+            const deltaX = e.clientX - dragStart.x;
+            const deltaY = e.clientY - dragStart.y;
+            setLayout(prev => (Object.assign(Object.assign({}, prev), { top: Math.max(0, windowStart.y + deltaY), left: Math.max(0, windowStart.x + deltaX) })));
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            document.body.style.userSelect = 'none';
+            document.body.style.cursor = 'grabbing';
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.userSelect = '';
+            document.body.style.cursor = '';
+        };
+    }, [isDragging, dragStart, windowStart, isVisible]);
+    const handleMouseDown = (e) => {
+        if (!isDraggable)
+            return;
+        // Allow dragging when clicking on the popup container or drag handle
+        const target = e.target;
+        const isDragHandle = target.classList.contains('popup-drag-handle') ||
+            target.closest('.popup-drag-handle');
+        if (target !== modalRef.current && !isDragHandle)
+            return;
+        setIsDragging(true);
+        setDragStart({ x: e.clientX, y: e.clientY });
+        setWindowStart({ x: layout.left, y: layout.top });
+    };
+    // --- LOGIC: SCROLL LOCK ---
+    // Prevents background body from scrolling while a MODAL is open
+    useEffect(() => {
+        if (isVisible && isModal) {
+            const originalStyle = window.getComputedStyle(document.body).overflow;
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = originalStyle;
+            };
+        }
+    }, [isVisible, isModal]);
+    // --- LOGIC: FOCUS TRAP ---
+    // Keeps keyboard navigation inside the modal
+    useEffect(() => {
+        if (!isVisible || !isModal)
+            return;
+        const element = modalRef.current;
+        if (!element)
+            return;
+        // A. Focus the modal container immediately
+        element.focus();
+        // B. Handle Tab Key & Escape Key
+        const handleKeyDown = (e) => {
+            if (e.key === "Tab") {
+                const focusable = element.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                if (focusable.length === 0) {
+                    e.preventDefault();
+                    return;
+                }
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                // Shift + Tab: Loop to last
+                if (e.shiftKey && document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+                // Tab: Loop to first
+                else if (!e.shiftKey && document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+            // Escape Key: Don't close automatically - let user handle via close button
+            // if (e.key === "Escape") {
+            //   store.removePopup(popup.id);
+            // }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isVisible, isModal, popup.id]);
+    const padding = { top: 4, right: 4, bottom: 4, left: 4 };
+    // --- LOGIC: POSITIONING ---
+    // Measures content size before showing to center it perfectly
+    useLayoutEffect(() => {
+        if (!isVisible)
+            return;
+        const element = modalRef.current;
+        if (!element)
+            return;
+        const measureAndCenter = () => {
+            var _a, _b, _c, _d;
+            let { width, height } = element.getBoundingClientRect();
+            width = Math.trunc(width);
+            height = Math.trunc(height);
+            const newlayout = { opacity: 1, top: 0, left: 0 };
+            const winWidth = Math.trunc(window.innerWidth);
+            const winHeight = Math.trunc(window.innerHeight);
+            if (width > winWidth) {
+                width = winWidth;
+                newlayout.width = width;
+            }
+            if (height > winHeight) {
+                height = winHeight;
+                newlayout.height = height;
+            }
+            newlayout.top = Math.max(0, (winHeight - height) / 2);
+            newlayout.left = Math.max(0, (winWidth - width) / 2);
+            newlayout.top = Math.max(0, newlayout.top - padding.top);
+            newlayout.left = Math.max(0, newlayout.left - padding.left);
+            // console.log("measure dimensions", { width, height, winWidth, winHeight, newlayout });
+            const oldlayoutStr = `top=${layout.top}, left=${layout.left}, width=${(_a = layout.width) !== null && _a !== void 0 ? _a : null}, height=${(_b = layout.height) !== null && _b !== void 0 ? _b : null}`;
+            const newlayoutStr = `top=${newlayout.top}, left=${newlayout.left}, width=${(_c = newlayout.width) !== null && _c !== void 0 ? _c : null}, height=${(_d = newlayout.height) !== null && _d !== void 0 ? _d : null}`;
+            const hasChanged = (oldlayoutStr !== newlayoutStr);
+            // console.log("layout change", { hasChanged,  old: oldlayoutStr, new: newlayoutStr });
+            if (hasChanged)
+                setLayout(newlayout);
+        };
+        // initial computation 
+        measureAndCenter();
+        // Watch for size changes
+        const resizeObserver = new ResizeObserver(() => {
+            measureAndCenter();
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [isVisible]);
+    // Reset layout when hidden
+    useEffect(() => {
+        if (!isVisible) {
+            setLayout({ opacity: 0, top: 0, left: 0, width: 0, height: 0 });
+        }
+    }, [isVisible]);
+    // --- RENDER ---
+    // If hidden, render nothing (unmounts children)
+    if (!isVisible)
+        return null;
+    const zIndex = 10000 + (popup.counter * 25);
+    const layoutStyles = { top: layout.top, left: layout.left };
+    if (width != null && String(width).trim() !== '') {
+        let sval = String(width).trim().toLowerCase();
+        if (!sval.endsWith("%") && !sval.endsWith("px")) {
+            sval = `${sval}px`;
+        }
+        layoutStyles.width = sval;
+    }
+    if (height != null && String(height).trim() !== '') {
+        let sval = String(height).trim().toLowerCase();
+        if (!sval.endsWith("%") && !sval.endsWith("px")) {
+            sval = `${sval}px`;
+        }
+        layoutStyles.height = sval;
+    }
+    return (_jsxs(_Fragment, { children: [isModal && (_jsx("div", { 
+                // Backdrop click handler removed - don't close automatically
+                style: {
+                    position: "fixed",
+                    inset: 0,
+                    backgroundColor: isLastModalPopup ? "rgba(0,0,0,0.5)" : "transparent",
+                    zIndex: zIndex - 4,
+                    pointerEvents: "auto",
+                    cursor: "default",
+                }, "aria-hidden": "true" })), _jsx("div", { ref: modalRef, className: `popup-manager-window ${className}`, "data-popup-id": popup.id, role: "dialog", "aria-modal": isModal ? "true" : "false", tabIndex: -1, onMouseDown: handleMouseDown, style: Object.assign({ position: "fixed", zIndex: zIndex, minWidth,
+                    minHeight, opacity: layout.opacity, backgroundColor: "white", boxShadow: "0 4px 20px rgba(0,0,0,0.3)", borderRadius: "8px", padding: "4px", boxSizing: "border-box", outline: "none", pointerEvents: "auto" }, layoutStyles), children: _jsx(PopupSlotProvider, { data: popup, children: _jsx(PopupContentLayout, { data: popup, children: popup.content }) }) })] }));
+}
+// 
+// PUBLIC COMPONENTS
+// 
+export function PopupManagerSlot() {
+    const popups = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+    return (_jsx(PopupManagerContext.Provider, { value: popupMgr, children: popups.map((p) => {
+            return _jsx(PopupOverlay, { popup: p }, p.id);
+        }) }));
+}
+export function PopupManagerProvider({ children }) {
+    return (_jsx(PopupManagerContext.Provider, { value: popupMgr, children: children }));
+}
+// 
+// HOOK
+// 
+export function usePopupManager() {
+    const ctx = useContext(PopupManagerContext);
+    if (!ctx) {
+        throw new Error("usePopupManager must be used within PopupManagerProvider or PopupManagerSlot");
+    }
+    return ctx;
+}
+const PopupSlotContext = createContext(null);
+export function usePopupContext() {
+    const ctx = useContext(PopupSlotContext);
+    return ctx;
+}
+export function PopupSlotProvider(props) {
+    const { data, children } = props !== null && props !== void 0 ? props : {};
+    const { id: popupId } = data !== null && data !== void 0 ? data : {};
+    const value = useMemo(() => ({
+        getId: () => String(popupId),
+        close: () => {
+            store.removePopup(String(popupId));
+        },
+        setTitle: (title) => {
+            store.updatePopup(String(popupId), { title });
+        }
+    }), [data]);
+    return (_jsx(PopupSlotContext.Provider, { value: value, children: children }));
+}
+// 
+// EXPORTS
+// 
+export { popupMgr };

package/dist/core/RowContext.js

@@ -7,7 +7,7 @@ export const useRowContext = () => {
     return context;
 };
 export const RowProvider = ({ data, children }) => {
-    const dataWrapper = useCreateContextValue(data !== null && data !== void 0 ? data : {});
+    const dataWrapper = useCreateContextValue(data !== null && data !== void 0 ? data : {}, "row");
     const values = {
         getData: () => dataWrapper.getData(),
     };

package/dist/core/WindowContext.d.ts

@@ -0,0 +1,15 @@
+import { PageDef } from ".";
+export type WindowContextValue = {
+    getPageDef: () => PageDef | null;
+    setPageDef: (def: PageDef | null) => void;
+    getTitle: () => string | null;
+    setTitle: (title: string | null) => void;
+};
+export declare const useWindowContext: () => WindowContextValue;
+export type WindowHandleRef = {};
+type WindowContextProviderProps = {
+    handle?: WindowHandleRef;
+    children: React.ReactNode;
+};
+export declare const WindowContextProvider: (props: WindowContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/WindowContext.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef } from "react";
+const createDefaultValue = () => ({
+    getPageDef: () => null,
+    setPageDef: () => { },
+    getTitle: () => null,
+    setTitle: () => { },
+});
+const WindowContext = createContext(createDefaultValue());
+export const useWindowContext = () => {
+    const context = useContext(WindowContext);
+    return context;
+};
+export const WindowContextProvider = (props) => {
+    const { handle, children } = props !== null && props !== void 0 ? props : {};
+    const dataRef = useRef({ def: null, title: null });
+    const value = useMemo(() => ({
+        getPageDef: () => dataRef.current.def,
+        setPageDef: (def) => {
+            dataRef.current.def = def;
+        },
+        getTitle: () => { var _a, _b; return (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : null; },
+        setTitle: (title) => {
+            dataRef.current.title = title;
+        },
+    }), [handle]);
+    return (_jsx(WindowContext.Provider, { value: value, children: children !== null && children !== void 0 ? children : null }));
+};

package/dist/core/index.d.ts

@@ -1,5 +1,21 @@
 export * from "./auth";
 export { verifyToken, getUser, buildSessionHeader } from "./auth/session";
+export type ChangeEvent = Record<string, any> & {
+    name: string | null;
+    value: any;
+};
+export type ChangeEventHandler = (e: ChangeEvent) => void;
+export type VoidCallback = () => void;
 export type EventHandler = {
     [key: string]: (...args: any[]) => any;
 };
+export type PageDef = {
+    _id: string;
+    title?: string;
+    template: string;
+    data?: {
+        api: string;
+        params?: Record<string, any>;
+    };
+    [key: string]: any;
+};

package/dist/index.css

@@ -681,6 +681,9 @@ video {
 .z-\[9999\] {
   z-index: 9999;
 }
+.m-0 {
+  margin: 0px;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -813,6 +816,9 @@ video {
 .max-h-\[60px\] {
   max-height: 60px;
 }
+.min-h-\[100px\] {
+  min-height: 100px;
+}
 .min-h-\[60px\] {
   min-height: 60px;
 }
@@ -879,9 +885,18 @@ video {
 .w-full {
   width: 100%;
 }
+.min-w-\[100px\] {
+  min-width: 100px;
+}
 .min-w-\[180px\] {
   min-width: 180px;
 }
+.min-w-\[200px\] {
+  min-width: 200px;
+}
+.min-w-\[300px\] {
+  min-width: 300px;
+}
 .min-w-\[50px\] {
   min-width: 50px;
 }
@@ -1112,10 +1127,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(232 240 254 / var(--tw-bg-opacity, 1));
 }
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
 .bg-black\/40 {
   background-color: rgb(0 0 0 / 0.4);
 }
@@ -1185,9 +1196,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
 }
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1196,6 +1204,9 @@ video {
   -o-object-fit: cover;
      object-fit: cover;
 }
+.p-0 {
+  padding: 0px;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1450,6 +1461,9 @@ video {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.outline {
+  outline-style: solid;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1566,6 +1580,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
 .hover\:text-gray-800:hover {
   --tw-text-opacity: 1;
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));

package/dist/lib/utils/BeanUtils.js

@@ -1,6 +1,6 @@
 export const getValue = (path, data) => {
     if (path == null)
-        return undefined;
+        return null;
     // If path is an object, recursively resolve all its values
     if (typeof path === "object") {
         const resolved = {};
@@ -10,7 +10,7 @@ export const getValue = (path, data) => {
         return resolved;
     }
     if (typeof path !== "string")
-        return undefined;
+        return null;
     if (!path.includes("{"))
         return path;
     // If the entire string is a single placeholder e.g. "{vdata}" or "{vdata.company.name}"
@@ -21,10 +21,10 @@ export const getValue = (path, data) => {
         let current = data;
         for (const token of tokens) {
             if (current == null)
-                return undefined;
+                return null;
             current = current[token];
         }
-        return current !== undefined ? current : undefined;
+        return current == null ? null : current;
     }
     // If the string contains placeholders mixed with other text e.g. "Hello {name}!"
     // fall back to string replacement
@@ -36,13 +36,13 @@ export const getValue = (path, data) => {
                 return match;
             current = current[token];
         }
-        return current !== undefined ? current : match;
+        return current == null ? null : current;
     });
 };
 export const replaceValues = (obj, source) => {
     // Handle null or undefined
-    if (obj === null || obj === undefined) {
-        return obj;
+    if (obj == null) {
+        return null;
     }
     // Handle primitives (numbers, booleans)
     if (typeof obj !== 'object' && typeof obj !== 'string') {

package/dist/templates/DataListTemplate.js

@@ -1,13 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataList from "../components/table/DataList";
+import { usePageViewContext } from "../core/PageViewContext";
 import Panel from "../core/Panel";
 import BorderLayout from "../layouts/BorderLayout";
 const DataListTemplate = (props) => {
     const { title, cols, data, rowsPerPage, rowActions, bulkActions, toolbarActions, header, footer, right, left, commonActions, filters, disableTotalCount, emptyMessage, errorMessage, striped, bordered, hover, dense, showPagination, paginationPosition, showPageInfo, showTotalCount, showRowsPerPage, rowsPerPageOptions, searchable, searchPlaceholder, searchDebounce, onSearchChange, showFilterPanel, onFilterChange, sortable, defaultSort, showSortIndicator, selectable, selectionMode, onSelectionChange, selectOnRowClick, onRowClick, onRowDoubleClick, toolbarTitle, showRefreshButton, showExportButton, onError, onRefresh, onExport, className, rowClassName, } = props !== null && props !== void 0 ? props : {};
-    const attr = { title, cols, data, rowsPerPage, commonActions, rowActions, toolbarActions, bulkActions, filters };
+    const pageView = usePageViewContext();
+    const getPreferredTitle = () => {
+        return title !== null && title !== void 0 ? title : pageView.getUI().getTitle();
+    };
+    const attr = { title: getPreferredTitle(), cols, data, rowsPerPage, commonActions, rowActions, toolbarActions, bulkActions, filters };
     const loadPanel = (section) => {
         return _jsx(Panel, { content: section });
     };
-    return (_jsx(BorderLayout, { className: "py-2", north: loadPanel(header), south: loadPanel(footer), east: loadPanel(right), west: loadPanel(left), children: _jsx(DataList, { attr: attr }) }));
+    return (_jsx(BorderLayout, { className: "p-0", north: loadPanel(header), south: loadPanel(footer), east: loadPanel(right), west: loadPanel(left), children: _jsx(DataList, { attr: attr }) }));
 };
 export default DataListTemplate;

package/dist/templates/ExplorerTemplate.js

@@ -11,7 +11,7 @@ const ExplorerTemplate = (props) => {
                                 width: "230px",
                                 opacity: open ? 1 : 0,
                                 pointerEvents: open ? "auto" : "none",
-                            }, children: _jsx(TreeMenu, { name: name, menugroup: menugroup, items: items, data: data }) }) }), _jsx("button", { onClick: () => setOpen((prev) => !prev), className: "absolute top-5 -right-4 w-8 h-8 bg-white border rounded-full flex items-center justify-center shadow z-10", children: open ? _jsx(ChevronLeft, { size: 18 }) : _jsx(ChevronRight, { size: 18 }) })] }), children: _jsx("div", { className: "px-6 py-2", children: _jsx(PageView, { name: name, depends: name }) }) }) }));
+                            }, children: _jsx(TreeMenu, { name: name, menugroup: menugroup, items: items, data: data }) }) }), _jsx("button", { onClick: () => setOpen((prev) => !prev), className: "absolute top-5 -right-4 w-8 h-8 bg-white border rounded-full flex items-center justify-center shadow z-10", children: open ? _jsx(ChevronLeft, { size: 18 }) : _jsx(ChevronRight, { size: 18 }) })] }), children: _jsx("div", { className: "px-6 py-1", children: _jsx(PageView, { name: name, depends: name }) }) }) }));
 };
 ExplorerTemplate.hasSelectionHandling = true;
 export default ExplorerTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramesesinc/platform-core",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Platform Core Library",
   "author": "Rameses Systems Inc.",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "./index.css": "./dist/index.css"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc && postcss src/styles/index.css -o dist/index.css && cp -r src/components dist/ && cp -r src/layouts dist/lib/ && npm run copy-res",
+    "build": "rm -rf dist && tsc && postcss src/styles/index.css -o dist/index.css",
     "build2": "rm -rf dist && tsc",
     "clean": "rm -rf dist",
     "dev": "tsc --watch",
@@ -36,9 +36,9 @@
     "react-dom": ">=18.2.0"
   },
   "devDependencies": {
-    "@ramesesinc/app-forms": "0.1.0",
-    "@ramesesinc/client": "1.0.14",
-    "@ramesesinc/lib": "1.0.12",
+    "@ramesesinc/app-forms": "*",
+    "@ramesesinc/client": "*",
+    "@ramesesinc/lib": "*",
     "@types/crypto-js": "^4.2.2",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",