@ixo/ui 0.0.36 → 0.0.37

package/dist/{components-DClyFU-M.cjs → components-DN1Oa-f6.cjs}

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const radash = require("radash");
 const react = require("@emotion/react");
-const UsersSolid = require("./UsersSolid-D60imcQv.cjs");
+const UsersSolid = require("./UsersSolid-DjJvkV7c.cjs");
 const react$1 = require("react");
 const constants = require("./constants-DFJRYpE2.cjs");
 const core = require("@mantine/core");
@@ -33,13 +33,13 @@ const reactDom = require("react-dom");
 const DOMPurify = require("dompurify");
 const useUITheme = require("./useUITheme-DqgAb7n1.cjs");
 const hooks = require("@mantine/hooks");
+const useEventSubscribe = require("./useEventSubscribe-B019T27n.cjs");
 const Markdown = require("react-markdown");
 const remarkGfm = require("remark-gfm");
 const downshift = require("downshift");
 const reactTinyPopover = require("react-tiny-popover");
 const dayjs = require("dayjs");
 const Blank = require("./Blank-DapEucFF.cjs");
-const useEventSubscribe = require("./useEventSubscribe-BTFTMdWH.cjs");
 const themes = require("./themes-BwGjuKnC.cjs");
 function SlideUpArea({ children, isVisible }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -797,8 +797,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BnNEw5sb.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-CfGbTIXG.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CpWsRlKO.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-tAWB4Iqa.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -882,7 +882,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BSG0zFC9.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CdKYqXBt.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1317,7 +1317,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-eldkvceu.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Ch5hR4aV.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -2125,8 +2125,9 @@ function AIInputBar({ placeholder, icon, disabledInput, disabledButton, valueInp
     }
   );
 }
-function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, isHistoryOpened, oracleModel, sessionTitle }) {
+function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, onCanvasCycle, isHistoryOpened, canvasMode = "hidden", oracleModel, sessionTitle }) {
   const theme = useUITheme.useUITheme();
+  const canvasActive = canvasMode !== "hidden";
   return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { bg: theme.bg.navIconsBg, py: 16, justify: "space-between", align: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 6, align: "center", children: [
       sessionTitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "overPicture", size: "s", children: sessionTitle }),
@@ -2150,6 +2151,17 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, i
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.PlusSolid, { size: 18 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Center,
+        {
+          sx: {
+            cursor: "pointer",
+            borderRadius: 24
+          },
+          onClick: onCanvasCycle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.Canvas, { size: 18, color: canvasActive ? "primary" : void 0 })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(core.Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.HistorySolid, { size: 18 }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         core.Center,
@@ -2579,6 +2591,8 @@ function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
     }
   );
 }
+const CANVAS_MIN_WIDTH = 350;
+const CONTENT_MIN_WIDTH = 350;
 function AppShellNavigation({
   spaces,
   pageItem,
@@ -2604,20 +2618,78 @@ function AppShellNavigation({
   isAiBtnVisible,
   loading,
   children,
-  aiNavbarContent
+  aiNavbarContent,
+  canvasContent,
+  canvasMode = "hidden",
+  splitRatio = 0.4,
+  onSplitRatioChange
 }) {
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = hooks.useDisclosure(true);
   const [asideWidth, setAsideWidth] = react$1.useState(450);
   const theme = useUITheme.useUITheme();
-  const [navbarWidth, setNavbarWidth] = react$1.useState(isAiOpened ? 450 : 300);
-  const [isNavbarResizing, setIsNavbarResizing] = react$1.useState(false);
-  const isNavbarResizingRef = react$1.useRef(false);
+  const [isSplitResizing, setIsSplitResizing] = react$1.useState(false);
+  const isSplitResizingRef = react$1.useRef(false);
+  const mainContainerRef = react$1.useRef(null);
+  const isRightPanelOpen = !asideCollapsed && !!right;
+  const shouldShowCanvas = canvasMode !== "hidden" && !isRightPanelOpen;
+  const shouldShowContent = (canvasMode === "hidden" || canvasMode === "split") && !isRightPanelOpen || isRightPanelOpen;
+  const getCanvasWidth = () => {
+    if (!shouldShowCanvas) return "0%";
+    if (canvasMode === "full") return "100%";
+    return `${splitRatio * 100}%`;
+  };
+  const getContentWidth = () => {
+    if (!shouldShowContent) return "0%";
+    if (canvasMode === "hidden" || isRightPanelOpen) return "100%";
+    if (canvasMode === "full") return "0%";
+    return `${(1 - splitRatio) * 100}%`;
+  };
+  const handleSplitMouseMove = react$1.useCallback(
+    (e) => {
+      if (!isSplitResizingRef.current || !mainContainerRef.current) return;
+      const containerRect = mainContainerRef.current.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const relativeX = e.clientX - containerRect.left;
+      const minRatio = CANVAS_MIN_WIDTH / containerWidth;
+      const maxRatio = 1 - CONTENT_MIN_WIDTH / containerWidth;
+      const newRatio = Math.min(Math.max(relativeX / containerWidth, minRatio), maxRatio);
+      onSplitRatioChange?.(newRatio);
+    },
+    [onSplitRatioChange]
+  );
+  const handleSplitMouseUp = react$1.useCallback(() => {
+    setIsSplitResizing(false);
+    isSplitResizingRef.current = false;
+  }, []);
+  const handleSplitMouseDown = (e) => {
+    e.preventDefault();
+    setIsSplitResizing(true);
+    isSplitResizingRef.current = true;
+  };
   react$1.useEffect(() => {
-    const minWidth = isAiOpened ? 450 : 300;
-    if (navbarWidth < minWidth) {
-      setNavbarWidth(minWidth);
+    if (isSplitResizing) {
+      document.addEventListener("mousemove", handleSplitMouseMove);
+      document.addEventListener("mouseup", handleSplitMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      document.removeEventListener("mousemove", handleSplitMouseMove);
+      document.removeEventListener("mouseup", handleSplitMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
     }
-  }, [isAiOpened, navbarWidth]);
+    return () => {
+      document.removeEventListener("mousemove", handleSplitMouseMove);
+      document.removeEventListener("mouseup", handleSplitMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isSplitResizing, handleSplitMouseMove, handleSplitMouseUp]);
+  const [navbarWidthAiOpen, setNavbarWidthAiOpen] = useEventSubscribe.useLocalStorage("navbar-width-ai-open", 450);
+  const [navbarWidthAiClosed, setNavbarWidthAiClosed] = useEventSubscribe.useLocalStorage("navbar-width-ai-closed", 300);
+  const navbarWidth = isAiOpened ? navbarWidthAiOpen : navbarWidthAiClosed;
+  const [isNavbarResizing, setIsNavbarResizing] = react$1.useState(false);
+  const isNavbarResizingRef = react$1.useRef(false);
   function clearNavbarListeners() {
     document.removeEventListener("mousemove", handleNavbarMouseMove);
     document.removeEventListener("mouseup", handleNavbarMouseUp);
@@ -2630,7 +2702,11 @@ function AppShellNavigation({
       const minWidth = isAiOpened ? 450 : 300;
       const maxWidth = 700;
       const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
-      setNavbarWidth(newWidth);
+      if (isAiOpened) {
+        setNavbarWidthAiOpen(newWidth);
+      } else {
+        setNavbarWidthAiClosed(newWidth);
+      }
     },
     [isAiOpened]
   );
@@ -2658,15 +2734,17 @@ function AppShellNavigation({
     const handleWindowResize = () => {
       const maxWidth = 700;
       const minWidth = isAiOpened ? 450 : 300;
-      if (navbarWidth > maxWidth) {
-        setNavbarWidth(maxWidth);
-      } else if (navbarWidth < minWidth) {
-        setNavbarWidth(minWidth);
+      const currentWidth = isAiOpened ? navbarWidthAiOpen : navbarWidthAiClosed;
+      const setter = isAiOpened ? setNavbarWidthAiOpen : setNavbarWidthAiClosed;
+      if (currentWidth > maxWidth) {
+        setter(maxWidth);
+      } else if (currentWidth < minWidth) {
+        setter(minWidth);
       }
     };
     window.addEventListener("resize", handleWindowResize);
     return () => window.removeEventListener("resize", handleWindowResize);
-  }, [navbarWidth, isAiOpened]);
+  }, [navbarWidthAiOpen, navbarWidthAiClosed, isAiOpened]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.AppShell,
     {
@@ -2792,7 +2870,79 @@ function AppShellNavigation({
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(core.AppShell.Main, { children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.AppShell.Main,
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              height: "100vh",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Flex,
+              {
+                ref: mainContainerRef,
+                style: {
+                  flex: 1,
+                  height: "100%",
+                  overflow: "hidden",
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Box,
+                    {
+                      bg: theme.bg.navIconsBg,
+                      style: {
+                        width: getCanvasWidth(),
+                        minWidth: shouldShowCanvas && canvasMode === "split" ? CANVAS_MIN_WIDTH : void 0,
+                        display: shouldShowCanvas ? "flex" : "none",
+                        flexDirection: "column",
+                        overflow: "hidden",
+                        height: "100%",
+                        transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
+                        opacity: shouldShowCanvas ? 1 : 0,
+                        borderLeft: `1px solid ${theme.neutral.transparent10}`
+                      },
+                      children: canvasContent
+                    }
+                  ),
+                  canvasMode === "split" && !isRightPanelOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Box,
+                    {
+                      w: 4,
+                      h: "100%",
+                      bg: isSplitResizing ? theme.colors.focus : "transparent",
+                      sx: {
+                        cursor: "col-resize",
+                        flexShrink: 0,
+                        transition: "background-color 0.2s ease"
+                      },
+                      onMouseDown: handleSplitMouseDown
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    core.Box,
+                    {
+                      style: {
+                        width: getContentWidth(),
+                        minWidth: shouldShowContent && canvasMode === "split" ? CONTENT_MIN_WIDTH : void 0,
+                        display: shouldShowContent ? "flex" : "none",
+                        flexDirection: "column",
+                        overflow: "auto",
+                        height: "100%",
+                        transition: isSplitResizing ? "none" : "width 0.3s ease, opacity 0.2s ease",
+                        opacity: shouldShowContent ? 1 : 0
+                      },
+                      children
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(AsideResizable, { asideCollapsed, onAsideToggle, onMaxExpand, width: asideWidth, onWidthChange: setAsideWidth, children: right })
       ]
     }
@@ -5814,13 +5964,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DIjbP65y.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DAeeijml.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-BPMwSQiu.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-CwSS7HIf.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DXySGWRo.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-C1jkvV-X.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-BCq1MsXT.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-B9pVBHoG.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-CakMAOX7.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-Cp1GJZKj.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -11133,4 +11283,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-DClyFU-M.cjs.map
+//# sourceMappingURL=components-DN1Oa-f6.cjs.map