@ixo/ui 0.0.36 → 0.0.37

package/dist/{components-B1a2iVqu.js → components-CzYIAVLV.js}

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
-import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, H as HistorySolid, U as User, e as AngleLeftSolid, M as MinusCircleSolid, f as SettingsBarSolid, G as Globe, D as Dashboard, h as Groups, i as UserCircleSolid, j as Assets$1, k as Claims, l as Accounts, m as LinkedResources, n as Proposals, I as ImpactCredits, o as GoTo, p as Share, q as PiePiece, r as ImpactCertificates, s as CommentDotsSolid, t as CommentAltSolid, u as MicrophoneSolid, v as Command, w as ArrowCircleRightSolid, x as Protocols, y as Investments, O as Oracles, z as Projects, B as Daos, F as Star, J as AngleRightSolid, K as Expand, N as LeafSolid, Q as ArrowDownSolid, R as ArrowRightSolid, T as Play, V as CheckCircle, W as Events, X as ThumbsUpSolid, Y as CommentsSolid, Z as CopySolid, _ as Hourglass, $ as Act, a0 as Info$1, a1 as ClaimsW, a2 as TachometerAltSolid, a3 as UserCogSolid, a4 as UsersSolid, a5 as EllipsisHSolid } from "./UsersSolid-BAU7PbE4.js";
+import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, e as Canvas, H as HistorySolid, U as User, f as AngleLeftSolid, M as MinusCircleSolid, h as SettingsBarSolid, G as Globe, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, n as LinkedResources, o as Proposals, I as ImpactCredits, p as GoTo, q as Share, r as PiePiece, s as ImpactCertificates, t as CommentDotsSolid, u as CommentAltSolid, v as MicrophoneSolid, w as Command, x as ArrowCircleRightSolid, y as Protocols, z as Investments, O as Oracles, B as Projects, F as Daos, J as Star, K as AngleRightSolid, N as Expand, Q as LeafSolid, R as ArrowDownSolid, T as ArrowRightSolid, V as Play, W as CheckCircle, X as Events, Y as ThumbsUpSolid, Z as CommentsSolid, _ as CopySolid, $ as Hourglass, a0 as Act, a1 as Info$1, a2 as ClaimsW, a3 as TachometerAltSolid, a4 as UserCogSolid, a5 as UsersSolid, a6 as EllipsisHSolid } from "./UsersSolid-C6NkfomI.js";
 import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useMemo, useId, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
 import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, Divider, ScrollArea } from "@mantine/core";
@@ -10,13 +10,13 @@ import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
 import { u as useUITheme } from "./useUITheme-7i8NJ2FG.js";
 import { useResizeObserver, useHover, useDisclosure } from "@mantine/hooks";
+import { a as useLocalStorage, E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-BuXZL79s.js";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCombobox, useSelect } from "downshift";
 import { Popover as Popover$1 } from "react-tiny-popover";
 import dayjs from "dayjs";
 import { B as Blank } from "./Blank-CElsicB7.js";
-import { E as EventEmitter, u as useEventSubscribe } from "./useEventSubscribe-16wxaghO.js";
 import { d as dark, l as light } from "./themes-ZDjULHjG.js";
 function SlideUpArea({ children, isVisible }) {
   return /* @__PURE__ */ jsx(
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-CHaUG4pj.js"));
-const Footer = lazy(() => import("./index-CkY33lka.js"));
+const Header$3 = lazy(() => import("./index-F9Irhjcn.js"));
+const Footer = lazy(() => import("./index-CPagTbY2.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-D0Hsuk8i.js"));
+const Header$2 = lazy(() => import("./index-DQlyhNQS.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-NInTEDOl.js"));
+const Badge = lazy(() => import("./index-vNRsVBzW.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2102,8 +2102,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();
+  const canvasActive = canvasMode !== "hidden";
   return /* @__PURE__ */ jsxs(Flex, { bg: theme.bg.navIconsBg, py: 16, justify: "space-between", align: "center", children: [
     /* @__PURE__ */ jsxs(Flex, { gap: 6, align: "center", children: [
       sessionTitle && /* @__PURE__ */ jsx(Typography.Text, { color: "overPicture", size: "s", children: sessionTitle }),
@@ -2127,6 +2128,17 @@ function AIChatToolbar({ onClose, onHistoryClick, onPlusClick, onHistoryClose, i
       }
     ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onPlusClick, children: /* @__PURE__ */ jsx(PlusSolid, { size: 18 }) }),
+      /* @__PURE__ */ jsx(
+        Center,
+        {
+          sx: {
+            cursor: "pointer",
+            borderRadius: 24
+          },
+          onClick: onCanvasCycle,
+          children: /* @__PURE__ */ jsx(Canvas, { size: 18, color: canvasActive ? "primary" : void 0 })
+        }
+      ),
       /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, onClick: onHistoryClick, children: /* @__PURE__ */ jsx(HistorySolid, { size: 18 }) }),
       /* @__PURE__ */ jsx(
         Center,
@@ -2556,6 +2568,8 @@ function SpaceItem({ icon, id, name, selectedSpace, onClick }) {
     }
   );
 }
+const CANVAS_MIN_WIDTH = 350;
+const CONTENT_MIN_WIDTH = 350;
 function AppShellNavigation({
   spaces,
   pageItem,
@@ -2581,20 +2595,78 @@ function AppShellNavigation({
   isAiBtnVisible,
   loading,
   children,
-  aiNavbarContent
+  aiNavbarContent,
+  canvasContent,
+  canvasMode = "hidden",
+  splitRatio = 0.4,
+  onSplitRatioChange
 }) {
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
   const [asideWidth, setAsideWidth] = useState(450);
   const theme = useUITheme();
-  const [navbarWidth, setNavbarWidth] = useState(isAiOpened ? 450 : 300);
-  const [isNavbarResizing, setIsNavbarResizing] = useState(false);
-  const isNavbarResizingRef = useRef(false);
+  const [isSplitResizing, setIsSplitResizing] = useState(false);
+  const isSplitResizingRef = useRef(false);
+  const mainContainerRef = 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 = 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 = useCallback(() => {
+    setIsSplitResizing(false);
+    isSplitResizingRef.current = false;
+  }, []);
+  const handleSplitMouseDown = (e) => {
+    e.preventDefault();
+    setIsSplitResizing(true);
+    isSplitResizingRef.current = true;
+  };
   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] = useLocalStorage("navbar-width-ai-open", 450);
+  const [navbarWidthAiClosed, setNavbarWidthAiClosed] = useLocalStorage("navbar-width-ai-closed", 300);
+  const navbarWidth = isAiOpened ? navbarWidthAiOpen : navbarWidthAiClosed;
+  const [isNavbarResizing, setIsNavbarResizing] = useState(false);
+  const isNavbarResizingRef = useRef(false);
   function clearNavbarListeners() {
     document.removeEventListener("mousemove", handleNavbarMouseMove);
     document.removeEventListener("mouseup", handleNavbarMouseUp);
@@ -2607,7 +2679,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]
   );
@@ -2635,15 +2711,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__ */ jsxs(
     AppShell,
     {
@@ -2769,7 +2847,79 @@ function AppShellNavigation({
             ] })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx(AppShell.Main, { children }),
+        /* @__PURE__ */ jsx(
+          AppShell.Main,
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              height: "100vh",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                ref: mainContainerRef,
+                style: {
+                  flex: 1,
+                  height: "100%",
+                  overflow: "hidden",
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    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__ */ jsx(
+                    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__ */ jsx(
+                    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__ */ jsx(AsideResizable, { asideCollapsed, onAsideToggle, onMaxExpand, width: asideWidth, onWidthChange: setAsideWidth, children: right })
       ]
     }
@@ -5791,13 +5941,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-D2vpQrea.js"));
-const Header$1 = lazy(() => import("./index-CrLkPKdH.js"));
-const Content = lazy(() => import("./index-CgY82myI.js"));
+const MainAction = lazy(() => import("./index-B3L8bASL.js"));
+const Header$1 = lazy(() => import("./index-Cjz-hgYn.js"));
+const Content = lazy(() => import("./index-CcmQ18nv.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-Dzht1xdr.js"));
-const Actions = lazy(() => import("./index-BUOaLr6a.js"));
+const Assets = lazy(() => import("./index-FtJpq2EO.js"));
+const Actions = lazy(() => import("./index-kDLY4FBs.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -11112,4 +11262,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-B1a2iVqu.js.map
+//# sourceMappingURL=components-CzYIAVLV.js.map