@ramesesinc/platform-core 0.1.0

package/dist/components/view/HtmlView.tsx

@@ -0,0 +1,114 @@
+import { localAPI } from "@ramesesinc/lib/local-api";
+import { useEffect, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { usePageContext } from "../../core/PageContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { render } from "../../lib/utils/ExprUtil";
+import UIComponent from "../common/UIComponent";
+
+type HtmlLabelProps = {
+  label?: string;
+  depends?: string;
+  expr?: string;
+  templateid?: string;
+  data?: Record<string, any>;
+};
+
+const Html = (props: HtmlLabelProps) => {
+  const { depends, expr, templateid } = props ?? {};
+  const [htmlTemplate, setHtmlTemplate] = useState(""); // Store the raw template
+  const [renderedHtml, setRenderedHtml] = useState(""); // Store the rendered HTML
+  const [resData, setResData] = useState<Record<string, any>>({});
+  const pageContext = usePageContext();
+  const binding = pageContext?.binding;
+  const { tenant, module } = useApp();
+
+  const loadHtmlContent = async (tempid: string) => {
+    try {
+      const htmlContent = await localAPI.useMgmt(tenant!, module!).get("html_templates", tempid);
+
+      if (htmlContent != null) {
+        // Store the raw template
+        setHtmlTemplate(htmlContent.htmlCode);
+
+        // Fetch data from API
+        const data = pageContext?.getAllData() ?? {};
+
+        // Render the template with the data
+        const rendered = render(htmlContent.htmlCode, data);
+        setRenderedHtml(rendered);
+      } else {
+        setHtmlTemplate("");
+        setRenderedHtml("");
+      }
+    } catch (error) {
+      console.error("Error loading HTML template:", error);
+      setHtmlTemplate("");
+      setRenderedHtml("");
+    }
+  };
+
+  // Render the expression using ExprUtil
+  const renderExpression = (expression: string) => {
+    if (!expression) return "";
+    try {
+      const data = pageContext?.getData() ?? {};
+      return render(expression, { data });
+    } catch (error) {
+      console.error("Expression render error:", error);
+      return expression;
+    }
+  };
+
+  const initialValue = renderExpression(expr ?? "");
+  const [value, setValue] = useState(initialValue);
+
+  const onRefresh = () => {
+    const newValue = renderExpression(expr ?? "");
+    setValue(newValue);
+
+    // Re-render the HTML template if data changes
+    if (htmlTemplate && resData) {
+      const rendered = render(htmlTemplate, resData);
+      setRenderedHtml(rendered);
+    }
+  };
+
+  useDependHandler({ name: depends, onRefresh });
+
+  useEffect(() => {
+    if (templateid != null && templateid.trim() !== "") {
+      loadHtmlContent(templateid);
+    }
+  }, [templateid]);
+
+  useEffect(() => {
+    const newValue = renderExpression(expr ?? "");
+    setValue(newValue);
+  }, [binding?.raw, expr]);
+
+  // Re-render template when data changes
+  useEffect(() => {
+    if (htmlTemplate && resData && Object.keys(resData).length > 0) {
+      const rendered = render(htmlTemplate, resData);
+      setRenderedHtml(rendered);
+    }
+  }, [resData, htmlTemplate]);
+
+  return (
+    <UIComponent {...(props ?? {})}>
+      {/* Debug info - remove in production */}
+      {/* <details style={{ marginBottom: "20px" }}>
+        <summary>Debug Data</summary>
+        <pre style={{ fontSize: "10px", maxHeight: "200px", overflow: "auto" }}>
+          {JSON.stringify(resData, null, 2)}
+        </pre>
+      </details> */}
+
+      {/* Rendered HTML */}
+      <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto" dangerouslySetInnerHTML={{ __html: renderedHtml }} />
+    </UIComponent>
+  );
+};
+
+export default Html;

package/dist/components/view/IFrameView.d.ts

@@ -0,0 +1,2 @@
+declare const Iframe: (props: Record<string, any>) => import("react/jsx-runtime").JSX.Element | null;
+export default Iframe;

package/dist/components/view/IFrameView.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+const Iframe = (props) => {
+    // console.log(props);
+    const { url = "", name, depends = "page", width = "100%", height = "100%" } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    const lastValueRef = useRef();
+    const [iframeUrl, setIframeUrl] = useState(url);
+    const dependHandler = (value) => {
+        if (lastValueRef.current === value)
+            return; // skip if unchanged
+        lastValueRef.current = value;
+        // value is expected to be a URL (string)
+        if (typeof value === "string") {
+            setIframeUrl(value);
+        }
+    };
+    useEffect(() => {
+        if (!depends)
+            return;
+        const unsubscribe = pageContext === null || pageContext === void 0 ? void 0 : pageContext.dependsTo(depends, dependHandler);
+        return unsubscribe;
+    }, [depends]);
+    if (!iframeUrl)
+        return null;
+    return (_jsx("div", { className: "h-[calc(100vh-60px)]", children: _jsx("iframe", { src: iframeUrl, name: name, title: name || "iframe", style: {
+                width,
+                height,
+                border: "none",
+            }, loading: "lazy" }) }));
+};
+export default Iframe;

package/dist/components/view/IFrameView.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
+
+const Iframe = (props: Record<string, any>) => {
+  // console.log(props);
+  const { url = "", name, depends = "page", width = "100%", height = "100%" } = props ?? {};
+  const pageContext = usePageContext();
+  const lastValueRef = useRef<any>();
+  const [iframeUrl, setIframeUrl] = useState(url);
+
+  const dependHandler = (value: any) => {
+    if (lastValueRef.current === value) return; // skip if unchanged
+    lastValueRef.current = value;
+
+    // value is expected to be a URL (string)
+    if (typeof value === "string") {
+      setIframeUrl(value);
+    }
+  };
+
+  useEffect(() => {
+    if (!depends) return;
+    const unsubscribe = pageContext?.dependsTo(depends, dependHandler);
+    return unsubscribe;
+  }, [depends]);
+
+  if (!iframeUrl) return null;
+
+  return (
+    <div className="h-[calc(100vh-60px)]">
+      <iframe
+        src={iframeUrl}
+        name={name}
+        title={name || "iframe"}
+        style={{
+          width,
+          height,
+          border: "none",
+        }}
+        loading="lazy"
+      />
+    </div>
+  );
+};
+
+export default Iframe;

package/dist/components/view/Modal.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export type ModalRenderFn = (close: () => void) => ReactNode;
+export type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode | ModalRenderFn;
+    title?: string;
+    className?: string;
+    width?: string;
+    height?: string;
+    hideCloseButton?: boolean;
+};
+declare const Modal: ({ open, onClose, title, children, className, width, height, hideCloseButton }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Modal;

package/dist/components/view/Modal.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect } from "react";
+const Modal = ({ open, onClose, title, children, className, width = "600px", height, hideCloseButton = false }) => {
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        if (open) {
+            document.addEventListener("keydown", handleKey);
+        }
+        return () => {
+            document.removeEventListener("keydown", handleKey);
+        };
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    const handleOverlayClick = (e) => {
+        // if (e.target === e.currentTarget) {
+        //   onClose();
+        // }
+    };
+    return (_jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/40", onClick: handleOverlayClick, children: _jsxs("div", { className: clsx("relative bg-white rounded-lg shadow-lg p-2 w-full max-w-[90vw] transition-all duration-300 ease-in-out", className), style: { width, height }, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? "modal-title" : undefined, children: [title && (_jsx("h2", { id: "modal-title", className: "text-lg font-semibold mb-4 border-b pb-2 text-gray-800", children: title })), _jsx("div", { className: "overflow-auto", children: typeof children === "function" ? children(onClose) : children }), !hideCloseButton && (_jsx("button", { onClick: onClose, "aria-label": "Close modal", className: "absolute top-2 right-2 text-gray-500 hover:text-gray-800 transition-colors", children: "\u2715" }))] }) }));
+};
+export default Modal;

package/dist/components/view/Modal.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import clsx from "clsx";
+import { MouseEvent, ReactNode, useEffect } from "react";
+
+export type ModalRenderFn = (close: () => void) => ReactNode;
+
+export type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode | ModalRenderFn;
+  title?: string;
+  className?: string;
+  width?: string; // e.g. "500px" or "50%"
+  height?: string; // e.g. "400px" or "80%"
+  hideCloseButton?: boolean;
+};
+
+const Modal = ({ open, onClose, title, children, className, width = "600px", height, hideCloseButton = false }: ModalProps) => {
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleKey);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const handleOverlayClick = (e: MouseEvent<HTMLDivElement>) => {
+    // if (e.target === e.currentTarget) {
+    //   onClose();
+    // }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40" onClick={handleOverlayClick}>
+      <div
+        className={clsx("relative bg-white rounded-lg shadow-lg p-2 w-full max-w-[90vw] transition-all duration-300 ease-in-out", className)}
+        style={{ width, height }}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? "modal-title" : undefined}
+      >
+        {title && (
+          <h2 id="modal-title" className="text-lg font-semibold mb-4 border-b pb-2 text-gray-800">
+            {title}
+          </h2>
+        )}
+
+        {/* Modal Content */}
+        <div className="overflow-auto">{typeof children === "function" ? children(onClose) : children}</div>
+
+        {!hideCloseButton && (
+          <button onClick={onClose} aria-label="Close modal" className="absolute top-2 right-2 text-gray-500 hover:text-gray-800 transition-colors">
+            ✕
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/dist/components/view/PageView.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { UIComponentProps } from "../common/UIComponent";
+interface PageViewProps extends UIComponentProps {
+    depends?: string;
+    url?: string;
+    fallback?: React.ReactNode;
+}
+declare const PageView: React.MemoExoticComponent<(props: PageViewProps) => import("react/jsx-runtime").JSX.Element>;
+export default PageView;

package/dist/components/view/PageView.js

@@ -0,0 +1,90 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import Page from "../../core/Page";
+import { usePageContext } from "../../core/PageContext";
+import { PageViewProvider, usePageViewContext } from "../../core/PageViewContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { useUrlParams } from "../../hooks/useUrlParams";
+import UIComponent from "../common/UIComponent";
+const StableShell = memo((props) => {
+    const { uiProps, slotRef, handle, paths } = props !== null && props !== void 0 ? props : {};
+    return (_jsx(UIComponent, Object.assign({}, uiProps, { children: _jsx(PageViewProvider, { handle: handle, paths: paths !== null && paths !== void 0 ? paths : [], children: _jsx(PageSlot, { ref: slotRef }) }) })));
+});
+const PageView = memo((props) => {
+    const { name = "selectedPage", depends, url } = props !== null && props !== void 0 ? props : {};
+    const [forceUpdate, setForceUpdate] = useState({});
+    const providerRef = useRef({});
+    const { setAnchorPath } = useUrlParams();
+    const slotRef = useRef(null);
+    const pageContext = usePageContext();
+    const [ownPaths, setOwnPaths] = useState([]);
+    const isEmpty = (value) => value == null || value.trim() === "";
+    const pageView = usePageViewContext();
+    let preferredName = isEmpty(name) ? depends : name;
+    let preferredDepends = isEmpty(depends) ? preferredName : depends;
+    const newProps = Object.assign(Object.assign({}, props), { name: preferredName, depends: preferredDepends });
+    const propsRef = useRef(newProps);
+    useEffect(() => {
+        propsRef.current = newProps;
+    });
+    const getUrl = () => {
+        if (url != null && url.trim() !== "")
+            return url;
+        if (newProps.name)
+            return pageContext.get(newProps.name);
+        return null;
+    };
+    const getUrlRef = useRef(getUrl);
+    useEffect(() => {
+        getUrlRef.current = getUrl;
+    });
+    // Stable handle — never recreated
+    const pageViewHandleRef = useRef({
+        displayName: "PageView#pageViewHandle",
+        init: (ref) => {
+            providerRef.current = ref;
+            setForceUpdate({});
+        },
+        renderPage: (page) => {
+            var _a, _b;
+            if (page == null || page.trim() === "") {
+                (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(null, "null");
+                return;
+            }
+            setOwnPaths([page]); // ← track own paths
+            const key = "page-" + Math.random().toString(36).slice(2);
+            const comp = _createElement(Page, Object.assign({}, propsRef.current, { url: page, key: key }));
+            (_b = slotRef.current) === null || _b === void 0 ? void 0 : _b.update(comp, page);
+        },
+        isStandalone: () => {
+            return pageView == null ? true : pageView.isStandalone();
+        },
+    });
+    const onRefresh = (val) => {
+        setForceUpdate({ val }); // ← carry the value
+    };
+    useDependHandler({ name: newProps.depends, onRefresh });
+    useEffect(() => {
+        const prov = providerRef.current;
+        if (prov == null || typeof prov.setPage !== "function")
+            return;
+        const url = getUrlRef.current();
+        // console.log("pageView forceUpdate", url, providerRef.current);
+        providerRef.current.setPage(url);
+    }, [forceUpdate]);
+    return _jsx(StableShell, { uiProps: newProps, handle: pageViewHandleRef.current, slotRef: slotRef, paths: ownPaths });
+});
+const PageSlot = memo(forwardRef((_, ref) => {
+    const [content, setContent] = useState(null);
+    const [opt, setOpt] = useState(null);
+    useImperativeHandle(ref, () => ({
+        update: (content, opt) => {
+            setContent(content);
+            setOpt(opt);
+        },
+    }), []);
+    return _jsx(_Fragment, { children: content == null ? null : content });
+}));
+export default PageView;

package/dist/components/view/PageView.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import Page from "../../core/Page";
+import { usePageContext } from "../../core/PageContext";
+import { PageViewContextValue, PageViewHandle, PageViewProvider, usePageViewContext } from "../../core/PageViewContext";
+import useDependHandler from "../../core/UIDependHandler";
+import { useUrlParams } from "../../hooks/useUrlParams";
+import UIComponent, { UIComponentProps } from "../common/UIComponent";
+
+type StableShellProps = {
+  uiProps: Record<string, any>;
+  handle: PageViewHandle;
+  slotRef: React.RefObject<PageSlotHandle>;
+  paths: string[]; // ← new
+};
+
+const StableShell = memo((props: StableShellProps) => {
+  const { uiProps, slotRef, handle, paths } = props ?? {};
+  return (
+    <UIComponent {...uiProps}>
+      <PageViewProvider handle={handle} paths={paths ?? []}>
+        <PageSlot ref={slotRef} />
+      </PageViewProvider>
+    </UIComponent>
+  );
+});
+
+interface PageViewProps extends UIComponentProps {
+  depends?: string;
+  url?: string;
+  fallback?: React.ReactNode;
+}
+
+const PageView = memo((props: PageViewProps) => {
+  const { name = "selectedPage", depends, url } = props ?? {};
+  const [forceUpdate, setForceUpdate] = useState({});
+  const providerRef = useRef<PageViewContextValue>({} as PageViewContextValue);
+  const { setAnchorPath } = useUrlParams();
+  const slotRef = useRef<PageSlotHandle>(null);
+  const pageContext = usePageContext();
+  const [ownPaths, setOwnPaths] = useState<string[]>([]);
+  const isEmpty = (value: string | null | undefined) => value == null || value.trim() === "";
+
+  const pageView = usePageViewContext();
+
+  let preferredName = isEmpty(name) ? depends : name;
+  let preferredDepends = isEmpty(depends) ? preferredName : depends;
+
+  const newProps = { ...props, name: preferredName, depends: preferredDepends };
+
+  const propsRef = useRef(newProps);
+  useEffect(() => {
+    propsRef.current = newProps;
+  });
+
+  const getUrl = () => {
+    if (url != null && url.trim() !== "") return url;
+    if (newProps.name) return pageContext.get(newProps.name);
+    return null;
+  };
+
+  const getUrlRef = useRef(getUrl);
+  useEffect(() => {
+    getUrlRef.current = getUrl;
+  });
+
+  // Stable handle — never recreated
+  const pageViewHandleRef = useRef({
+    displayName: "PageView#pageViewHandle",
+    init: (ref: PageViewContextValue) => {
+      providerRef.current = ref;
+      setForceUpdate({});
+    },
+    renderPage: (page: string | null) => {
+      if (page == null || page.trim() === "") {
+        slotRef.current?.update(null, "null");
+        return;
+      }
+      setOwnPaths([page]); // ← track own paths
+      const key = "page-" + Math.random().toString(36).slice(2);
+      const comp = <Page {...propsRef.current} url={page} key={key} />;
+      slotRef.current?.update(comp, page);
+    },
+    isStandalone: () => {
+      return pageView == null ? true : pageView.isStandalone();
+    },
+  });
+
+  const onRefresh = (val?: any) => {
+    setForceUpdate({ val }); // ← carry the value
+  };
+
+  useDependHandler({ name: newProps.depends, onRefresh });
+
+  useEffect(() => {
+    const prov = providerRef.current;
+    if (prov == null || typeof prov.setPage !== "function") return;
+
+    const url = getUrlRef.current();
+    // console.log("pageView forceUpdate", url, providerRef.current);
+    providerRef.current.setPage(url);
+  }, [forceUpdate]);
+
+  return <StableShell uiProps={newProps} handle={pageViewHandleRef.current} slotRef={slotRef} paths={ownPaths} />;
+});
+
+type PageSlotHandle = {
+  update: (content: React.ReactNode, opt?: any) => void;
+};
+const PageSlot = memo(
+  forwardRef<PageSlotHandle>((_, ref) => {
+    const [content, setContent] = useState<React.ReactNode>(null);
+    const [opt, setOpt] = useState<any>(null);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        update: (content: React.ReactNode, opt?: any) => {
+          setContent(content);
+          setOpt(opt);
+        },
+      }),
+      [],
+    );
+
+    return <>{content == null ? null : content}</>;
+  }),
+);
+
+export default PageView;

package/dist/components/view/PopupView.d.ts

@@ -0,0 +1,9 @@
+import { EventHandler } from "../../core";
+type PopupViewProps = {
+    url: string;
+    popupClassName?: string;
+    onClose?: () => void;
+    eventHandler?: EventHandler | null;
+};
+declare const PopupView: (props: PopupViewProps) => import("react/jsx-runtime").JSX.Element;
+export default PopupView;

package/dist/components/view/PopupView.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getError } from "@ramesesinc/client";
+import clsx from "clsx";
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import Page from "../../core/Page";
+import { PageViewProvider } from "../../core/PageViewContext";
+const PopupView = (props) => {
+    const { url, popupClassName, onClose = () => { }, eventHandler } = props !== null && props !== void 0 ? props : {};
+    const [paths, setPaths] = useState([]);
+    const providerRef = useRef({});
+    const slotRef = useRef(null);
+    const [newRootPath, setNewRootPath] = useState(null);
+    const [reInitPage, setReInitPage] = useState(true);
+    const mainPath = useRef("");
+    const defaultPopupClass = `bg-white rounded-lg shadow-xl w-[90%] h-[90%] flex flex-col`;
+    const finalPopupClass = twMerge(clsx(defaultPopupClass, popupClassName));
+    const loadPage = (path) => {
+        var _a;
+        // console.log("popupview load page", path);
+        let comp = null;
+        try {
+            const key = "page-" + Math.random().toString(36).slice(2);
+            comp = _jsx(Page, { url: path }, key);
+        }
+        catch (error) {
+            const e = getError(error);
+            comp = _jsx("div", { children: e.message });
+        }
+        // update the child slot
+        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(comp, finalPopupClass, onClose);
+    };
+    useEffect(() => {
+        // console.log("popupview change url", url);
+        const paths = (url == null || url.trim() === "" ? "" : url).split("#");
+        const [firstPath] = paths;
+        mainPath.current = firstPath;
+        setPaths(paths);
+    }, [url]);
+    useEffect(() => {
+        // this routine is for the initial loading
+        // console.log("popupview change paths", paths);
+        loadPage(mainPath.current);
+        setReInitPage(false);
+    }, [paths]);
+    useEffect(() => {
+        if (reInitPage) {
+            // let the initial loading take effect
+            return;
+        }
+        loadPage(newRootPath);
+    }, [newRootPath]);
+    const pageViewHandle = {
+        displayName: "PopupView#pageViewHandle",
+        init: (ref) => {
+            providerRef.current = ref;
+        },
+        renderPage: (page) => {
+            setNewRootPath(page);
+        },
+        isStandalone: () => true,
+    };
+    return (_jsx(PageViewProvider, { prefix: "popup", paths: paths, handle: pageViewHandle, eventHandler: eventHandler, children: _jsx(ChildrenSlot, { ref: slotRef }) }));
+};
+export default PopupView;
+const ChildrenSlot = memo(forwardRef((_, ref) => {
+    const [content, setContent] = useState(null);
+    const optionsRef = useRef({});
+    useImperativeHandle(ref, () => ({
+        update: (content, popupClassName, onClose) => {
+            const options = { popupClassName, onClose };
+            setContent(wrapContent(content, options));
+            optionsRef.current = options;
+        },
+    }), []);
+    const handleClose = () => {
+        setContent(null);
+        const { onClose } = optionsRef.current;
+        if (onClose != null && typeof onClose === "function") {
+            onClose();
+        }
+    };
+    const wrapContent = (comp, options) => {
+        if (comp == null) {
+            return null;
+        }
+        const { popupClassName } = options;
+        return (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: _jsxs("div", { className: popupClassName, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Page Viewer" }), _jsx("button", { onClick: handleClose, className: "w-8 h-8 flex items-center justify-center rounded-md hover:bg-gray-100 transition-colors", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: comp })] }) }));
+    };
+    return _jsx(_Fragment, { children: content == null ? null : content });
+}));