npm - @orbe-agro/client-core - Versions diffs - 5.6.259 → 5.6.261 - Mend

@orbe-agro/client-core 5.6.259 → 5.6.261

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/@ecme/assets/styles/app.css CHANGED Viewed

@@ -5079,6 +5079,10 @@ video {
 .inset-2{
   inset: 0.5rem;
 }
+.inset-y-0{
+  top: 0px;
+  bottom: 0px;
+}
 .-bottom-2{
   bottom: -0.5rem;
 }
@@ -5151,6 +5155,9 @@ video {
 .top-full{
   top: 100%;
 }
+.\!z-\[10000\]{
+  z-index: 10000 !important;
+}
 .z-10{
   z-index: 10;
 }
@@ -5831,6 +5838,9 @@ video {
 .w-\[750px\]{
   width: 750px;
 }
+.w-\[85\%\]{
+  width: 85%;
+}
 .w-\[950px\]{
   width: 950px;
 }
@@ -5995,6 +6005,9 @@ video {
 .grow{
   flex-grow: 1;
 }
+.origin-bottom-right{
+  transform-origin: bottom right;
+}
 .-translate-x-1\/2{
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6506,6 +6519,9 @@ video {
   --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);
+}
 .bg-black\/75{
   background-color: rgb(0 0 0 / 0.75);
 }
@@ -7698,9 +7714,6 @@ video {
 .hover\:bg-primary:hover{
   background-color: var(--primary);
 }
-.hover\:bg-primary-deep:hover{
-  background-color: var(--primary-deep);
-}
 .hover\:bg-primary-mild:hover{
   background-color: var(--primary-mild);
 }
@@ -8419,10 +8432,17 @@ video {
   .sm\:justify-end{
     justify-content: flex-end;
   }
+  .sm\:gap-2{
+    gap: 0.5rem;
+  }
   .sm\:px-0{
     padding-left: 0px;
     padding-right: 0px;
   }
+  .sm\:px-4{
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
   .sm\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;

package/dist/@ecme/assets/styles/tailwind/index.css CHANGED Viewed

@@ -1156,6 +1156,10 @@ video {
 .inset-2 {
   inset: 0.5rem;
 }
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
 .-bottom-2 {
   bottom: -0.5rem;
 }
@@ -1228,6 +1232,9 @@ video {
 .top-full {
   top: 100%;
 }
+.\!z-\[10000\] {
+  z-index: 10000 !important;
+}
 .z-10 {
   z-index: 10;
 }
@@ -1908,6 +1915,9 @@ video {
 .w-\[750px\] {
   width: 750px;
 }
+.w-\[85\%\] {
+  width: 85%;
+}
 .w-\[950px\] {
   width: 950px;
 }
@@ -2072,6 +2082,9 @@ video {
 .grow {
   flex-grow: 1;
 }
+.origin-bottom-right {
+  transform-origin: bottom right;
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2585,6 +2598,9 @@ video {
   --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);
+}
 .bg-black\/75 {
   background-color: rgb(0 0 0 / 0.75);
 }
@@ -3777,9 +3793,6 @@ video {
 .hover\:bg-primary:hover {
   background-color: var(--primary);
 }
-.hover\:bg-primary-deep:hover {
-  background-color: var(--primary-deep);
-}
 .hover\:bg-primary-mild:hover {
   background-color: var(--primary-mild);
 }
@@ -4529,11 +4542,20 @@ video {
     justify-content: flex-end;
   }
+  .sm\:gap-2 {
+    gap: 0.5rem;
+  }
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
+  .sm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

package/dist/@ecme/components/layouts/PostLoginLayout/PostLoginLayout.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { useLocation } from "react-router-dom";
 import "../../../configs/index.js";
 import GlobalLoading from "../../shared/loaders/GlobalLoading.js";
 import "../../template/OrbeAiWidget/index.js";
+import Can from "../../shared/Can.js";
 import { protectedRoutes, publicRoutes } from "../../../configs/routes.config/routes.config.js";
 import OrbeAiWidget from "../../template/OrbeAiWidget/OrbeAiWidget.js";
 const layouts = {
@@ -38,7 +39,7 @@ const PostLoginLayout = ({
   }, [location.pathname, layoutType]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GlobalLoading, {}),
-    /* @__PURE__ */ jsx(OrbeAiWidget, {}),
+    /* @__PURE__ */ jsx(Can, { I: "VISUALIZAR_CHAT_ORBE_AI", children: /* @__PURE__ */ jsx(OrbeAiWidget, {}) }),
     /* @__PURE__ */ jsx(
       Suspense,
       {

package/dist/@ecme/components/layouts/PostLoginLayout/PostLoginLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PostLoginLayout.js","sources":["../../../../../lib/@ecme/components/layouts/PostLoginLayout/PostLoginLayout.tsx"],"sourcesContent":["import { lazy, Suspense, useMemo } from \"react\";\nimport {\n LAYOUT_COLLAPSIBLE_SIDE,\n LAYOUT_STACKED_SIDE,\n LAYOUT_TOP_BAR_CLASSIC,\n LAYOUT_FRAMELESS_SIDE,\n LAYOUT_CONTENT_OVERLAY,\n LAYOUT_BLANK,\n} from \"@/constants/theme.constant\";\nimport Loading from \"@/components/shared/Loading\";\nimport type { CommonProps } from \"@/@types/common\";\nimport type { LazyExoticComponent, JSX } from \"react\";\nimport type { LayoutType } from \"@/@types/theme\";\nimport { LinkRenderer } from \"../Layouts\";\nimport { useLocation } from \"react-router-dom\";\nimport { Routes } from \"@/@types\";\nimport { protectedRoutes, publicRoutes } from \"@/configs\";\nimport GlobalLoading from \"@/components/shared/loaders/GlobalLoading\";\nimport OrbeAiWidget from \"@/components/template/OrbeAiWidget\";\n\ntype Layouts = Record<\n string,\n LazyExoticComponent<<T extends CommonProps>(props: T) => JSX.Element>\n>;\n\ninterface PostLoginLayoutProps extends CommonProps {\n layoutType: LayoutType;\n linkRenderer?: LinkRenderer;\n pageTitle?: string;\n}\n\nconst layouts: Layouts = {\n [LAYOUT_COLLAPSIBLE_SIDE]: lazy(() => import(\"./components/CollapsibleSide\")),\n [LAYOUT_STACKED_SIDE]: lazy(() => import(\"./components/StackedSide\")),\n [LAYOUT_TOP_BAR_CLASSIC]: lazy(() => import(\"./components/TopBarClassic\")),\n [LAYOUT_FRAMELESS_SIDE]: lazy(() => import(\"./components/FrameLessSide\")),\n [LAYOUT_CONTENT_OVERLAY]: lazy(() => import(\"./components/ContentOverlay\")),\n [LAYOUT_BLANK]: lazy(() => import(\"./components/Blank\")),\n};\n\nconst findRouteByPath = (\n path: string,\n routes: Routes\n): Routes[0] \| undefined => {\n for (const route of routes) {\n if (route.path === path) {\n return route;\n }\n }\n};\n\nconst PostLoginLayout = ({\n layoutType,\n children,\n linkRenderer,\n pageTitle,\n}: PostLoginLayoutProps) => {\n const location = useLocation();\n const AppLayout = useMemo(() => {\n const allRoutes = [...protectedRoutes, ...publicRoutes];\n const currentRoute = findRouteByPath(location.pathname, allRoutes);\n const layout = currentRoute?.meta?.layout ?? layoutType;\n return layouts[layout] ?? layouts[Object.keys(layouts)[0]];\n }, [location.pathname, layoutType]);\n\n return (\n <>\n <GlobalLoading />\n <OrbeAiWidget />\n <Suspense\n fallback={\n <div className=\"flex flex-auto flex-col h-[100vh]\">\n <Loading loading={true}/>\n </div>\n }\n >\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment /}\n {/ @ts-ignore */}\n <AppLayout linkRenderer={linkRenderer} pageTitle={pageTitle}>\n {children}\n </AppLayout>\n </Suspense>\n </>\n );\n};\n\nexport default PostLoginLayout;\n"],"names":[],"mappings":"~~;;;;;;;;;;AA+BA~~,MAAM,UAAmB;AAAA,EACvB,CAAC,uBAAuB,GAAG,KAAK,MAAM,OAAO,iCAA8B,CAAC;AAAA,EAC5E,CAAC,mBAAmB,GAAG,KAAK,MAAM,OAAO,6BAA0B,CAAC;AAAA,EACpE,CAAC,sBAAsB,GAAG,KAAK,MAAM,OAAO,+BAA4B,CAAC;AAAA,EACzE,CAAC,qBAAqB,GAAG,KAAK,MAAM,OAAO,+BAA4B,CAAC;AAAA,EACxE,CAAC,sBAAsB,GAAG,KAAK,MAAM,OAAO,gCAA6B,CAAC;AAAA,EAC1E,CAAC,YAAY,GAAG,KAAK,MAAM,OAAO,uBAAoB,CAAC;AACzD;AAEA,MAAM,kBAAkB,CACtB,MACA,WAC0B;AAC1B,aAAW,SAAS,QAAQ;AAC1B,QAAI,MAAM,SAAS,MAAM;AACvB,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,WAAW,YAAA;AACjB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,YAAY,CAAC,GAAG,iBAAiB,GAAG,YAAY;AACtD,UAAM,eAAe,gBAAgB,SAAS,UAAU,SAAS;AACjE,UAAM,SAAS,cAAc,MAAM,UAAU;AAC7C,WAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,KAAK,OAAO,EAAE,CAAC,CAAC;AAAA,EAC3D,GAAG,CAAC,SAAS,UAAU,UAAU,CAAC;AAElC,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc;AAAA,wBACd,~~cAAA~~,~~EAAa~~;AAAA,~~IACd~~;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,8BACG,OAAA,EAAI,WAAU,qCACb,UAAA,oBAAC,SAAA,EAAQ,SAAS,KAAA,CAAK,EAAA,CACzB;AAAA,QAKF,UAAA,oBAAC,WAAA,EAAU,cAA4B,WACpC,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
1	+ {"version":3,"file":"PostLoginLayout.js","sources":["../../../../../lib/@ecme/components/layouts/PostLoginLayout/PostLoginLayout.tsx"],"sourcesContent":["import { lazy, Suspense, useMemo } from \"react\";\nimport {\n LAYOUT_COLLAPSIBLE_SIDE,\n LAYOUT_STACKED_SIDE,\n LAYOUT_TOP_BAR_CLASSIC,\n LAYOUT_FRAMELESS_SIDE,\n LAYOUT_CONTENT_OVERLAY,\n LAYOUT_BLANK,\n} from \"@/constants/theme.constant\";\nimport Loading from \"@/components/shared/Loading\";\nimport type { CommonProps } from \"@/@types/common\";\nimport type { LazyExoticComponent, JSX } from \"react\";\nimport type { LayoutType } from \"@/@types/theme\";\nimport { LinkRenderer } from \"../Layouts\";\nimport { useLocation } from \"react-router-dom\";\nimport { Routes } from \"@/@types\";\nimport { protectedRoutes, publicRoutes } from \"@/configs\";\nimport GlobalLoading from \"@/components/shared/loaders/GlobalLoading\";\nimport OrbeAiWidget from \"@/components/template/OrbeAiWidget\";\nimport Can from \"@/components/shared/Can\";\n\ntype Layouts = Record<\n string,\n LazyExoticComponent<<T extends CommonProps>(props: T) => JSX.Element>\n>;\n\ninterface PostLoginLayoutProps extends CommonProps {\n layoutType: LayoutType;\n linkRenderer?: LinkRenderer;\n pageTitle?: string;\n}\n\nconst layouts: Layouts = {\n [LAYOUT_COLLAPSIBLE_SIDE]: lazy(() => import(\"./components/CollapsibleSide\")),\n [LAYOUT_STACKED_SIDE]: lazy(() => import(\"./components/StackedSide\")),\n [LAYOUT_TOP_BAR_CLASSIC]: lazy(() => import(\"./components/TopBarClassic\")),\n [LAYOUT_FRAMELESS_SIDE]: lazy(() => import(\"./components/FrameLessSide\")),\n [LAYOUT_CONTENT_OVERLAY]: lazy(() => import(\"./components/ContentOverlay\")),\n [LAYOUT_BLANK]: lazy(() => import(\"./components/Blank\")),\n};\n\nconst findRouteByPath = (\n path: string,\n routes: Routes\n): Routes[0] \| undefined => {\n for (const route of routes) {\n if (route.path === path) {\n return route;\n }\n }\n};\n\nconst PostLoginLayout = ({\n layoutType,\n children,\n linkRenderer,\n pageTitle,\n}: PostLoginLayoutProps) => {\n const location = useLocation();\n const AppLayout = useMemo(() => {\n const allRoutes = [...protectedRoutes, ...publicRoutes];\n const currentRoute = findRouteByPath(location.pathname, allRoutes);\n const layout = currentRoute?.meta?.layout ?? layoutType;\n return layouts[layout] ?? layouts[Object.keys(layouts)[0]];\n }, [location.pathname, layoutType]);\n\n return (\n <>\n <GlobalLoading />\n <Can I=\"VISUALIZAR_CHAT_ORBE_AI\">\n <OrbeAiWidget />\n </Can>\n <Suspense\n fallback={\n <div className=\"flex flex-auto flex-col h-[100vh]\">\n <Loading loading={true}/>\n </div>\n }\n >\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment /}\n {/ @ts-ignore */}\n <AppLayout linkRenderer={linkRenderer} pageTitle={pageTitle}>\n {children}\n </AppLayout>\n </Suspense>\n </>\n );\n};\n\nexport default PostLoginLayout;\n"],"names":[],"mappings":";;;;;;;;;;;AAgCA,MAAM,UAAmB;AAAA,EACvB,CAAC,uBAAuB,GAAG,KAAK,MAAM,OAAO,iCAA8B,CAAC;AAAA,EAC5E,CAAC,mBAAmB,GAAG,KAAK,MAAM,OAAO,6BAA0B,CAAC;AAAA,EACpE,CAAC,sBAAsB,GAAG,KAAK,MAAM,OAAO,+BAA4B,CAAC;AAAA,EACzE,CAAC,qBAAqB,GAAG,KAAK,MAAM,OAAO,+BAA4B,CAAC;AAAA,EACxE,CAAC,sBAAsB,GAAG,KAAK,MAAM,OAAO,gCAA6B,CAAC;AAAA,EAC1E,CAAC,YAAY,GAAG,KAAK,MAAM,OAAO,uBAAoB,CAAC;AACzD;AAEA,MAAM,kBAAkB,CACtB,MACA,WAC0B;AAC1B,aAAW,SAAS,QAAQ;AAC1B,QAAI,MAAM,SAAS,MAAM;AACvB,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,QAAM,WAAW,YAAA;AACjB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,YAAY,CAAC,GAAG,iBAAiB,GAAG,YAAY;AACtD,UAAM,eAAe,gBAAgB,SAAS,UAAU,SAAS;AACjE,UAAM,SAAS,cAAc,MAAM,UAAU;AAC7C,WAAO,QAAQ,MAAM,KAAK,QAAQ,OAAO,KAAK,OAAO,EAAE,CAAC,CAAC;AAAA,EAC3D,GAAG,CAAC,SAAS,UAAU,UAAU,CAAC;AAElC,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,eAAA,EAAc;AAAA,wBACd,KAAA,EAAI,GAAE,2BACL,UAAA,oBAAC,gBAAa,GAChB;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,8BACG,OAAA,EAAI,WAAU,qCACb,UAAA,oBAAC,SAAA,EAAQ,SAAS,KAAA,CAAK,EAAA,CACzB;AAAA,QAKF,UAAA,oBAAC,WAAA,EAAU,cAA4B,WACpC,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/@ecme/components/template/Footer.js CHANGED Viewed

@@ -3,7 +3,7 @@ import Container from "../shared/Container.js";
 import classNames from "../../utils/classNames.js";
 import { APP_NAME } from "../../constants/app.constant.js";
 import { PAGE_CONTAINER_GUTTER_X } from "../../constants/theme.constant.js";
-const version = true ? "5.6.259" : "0.0.0";
+const version = true ? "5.6.261" : "0.0.0";
 const FooterContent = () => {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-auto items-center justify-between", children: [
     /* @__PURE__ */ jsxs("span", { children: [

package/dist/@ecme/components/template/OrbeAiWidget/OrbeAiChatDrawer.js ADDED Viewed

@@ -0,0 +1,121 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import debounce from "lodash/debounce";
+import { AnimatePresence, motion } from "framer-motion";
+import { TbPlus, TbSearch } from "react-icons/tb";
+import { HiX } from "react-icons/hi";
+import "../../ui/Button/index.js";
+import ChatHistory from "../../../views/concepts/ai/Chat/components/ChatHistory.js";
+import { usGenerativeChatStore } from "../../../views/concepts/ai/Chat/store/generativeChatStore.js";
+import Button from "../../ui/Button/Button.js";
+const iconButtonClass = "flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200";
+const OrbeAiChatDrawer = ({ open, onClose }) => {
+  const [queryText, setQueryText] = useState("");
+  const { setSelectedConversation } = usGenerativeChatStore();
+  const debounceFn = useMemo(
+    () => debounce((e) => {
+      setQueryText(e.target.value);
+    }, 500),
+    []
+  );
+  useEffect(() => () => debounceFn.cancel(), [debounceFn]);
+  useEffect(() => {
+    if (!open) {
+      debounceFn.cancel();
+      setQueryText("");
+    }
+  }, [open, debounceFn]);
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  const handleNewChat = () => {
+    setSelectedConversation("");
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        "aria-hidden": true,
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.2 },
+        className: "absolute inset-0 z-40 bg-black/40",
+        onClick: onClose
+      },
+      "orbe-ai-drawer-backdrop"
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.aside,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Conversas",
+        initial: { x: "-100%" },
+        animate: { x: 0 },
+        exit: { x: "-100%" },
+        transition: { duration: 0.2, ease: "easeOut" },
+        className: "absolute inset-y-0 left-0 z-50 flex w-[85%] max-w-[300px] flex-col border-r border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Conversas" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: iconButtonClass,
+                onClick: onClose,
+                "aria-label": "Fechar conversas",
+                children: /* @__PURE__ */ jsx(HiX, { size: 18 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 pt-4", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                block: true,
+                variant: "solid",
+                size: "sm",
+                icon: /* @__PURE__ */ jsx(TbPlus, {}),
+                onClick: handleNewChat,
+                children: "Novo chat"
+              }
+            ),
+            /* @__PURE__ */ jsxs("label", { className: "flex h-9 items-center gap-2 rounded-lg border border-gray-200 px-3 focus-within:border-primary dark:border-gray-600", children: [
+              /* @__PURE__ */ jsx(TbSearch, { className: "shrink-0 text-lg text-gray-400" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "h-full min-w-0 flex-1 bg-transparent text-sm placeholder:text-gray-400 focus:outline-none heading-text",
+                  placeholder: "Buscar conversa",
+                  onChange: debounceFn
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "Histórico" }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+            ChatHistory,
+            {
+              queryText,
+              onClick: onClose,
+              dropdownFloatingClass: "!z-[10000]"
+            }
+          ) })
+        ]
+      },
+      "orbe-ai-drawer"
+    )
+  ] }) });
+};
+export {
+  OrbeAiChatDrawer as default
+};
+//# sourceMappingURL=OrbeAiChatDrawer.js.map

package/dist/@ecme/components/template/OrbeAiWidget/OrbeAiChatDrawer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"OrbeAiChatDrawer.js","sources":["../../../../../lib/@ecme/components/template/OrbeAiWidget/OrbeAiChatDrawer.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport debounce from 'lodash/debounce'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { TbPlus, TbSearch } from 'react-icons/tb'\nimport { HiX } from 'react-icons/hi'\nimport Button from '@/components/ui/Button'\nimport ChatHistory from '@/views/concepts/ai/Chat/components/ChatHistory'\nimport { usGenerativeChatStore } from '@/views/concepts/ai/Chat/store/generativeChatStore'\nimport type { ChangeEvent } from 'react'\n\ntype OrbeAiChatDrawerProps = {\n open: boolean\n onClose: () => void\n}\n\nconst iconButtonClass =\n 'flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'\n\n/**\n * Drawer de conversas DENTRO do painel do widget.\n *\n * Não usa o Drawer do ui: ele é portalizado no body com overlay em z-30 e\n * abriria atrás do widget (z-40 / z-[9999]), cobrindo a página inteira. Aqui é\n * `absolute`, então fica recortado pelo painel em qualquer tamanho.\n */\nconst OrbeAiChatDrawer = ({ open, onClose }: OrbeAiChatDrawerProps) => {\n const [queryText, setQueryText] = useState('')\n const { setSelectedConversation } = usGenerativeChatStore()\n\n // Memoizado: o store re-renderiza o drawer a cada token do streaming, e um\n // debounce recriado a cada render perderia a busca pendente.\n const debounceFn = useMemo(\n () =>\n debounce((e: ChangeEvent<HTMLInputElement>) => {\n setQueryText(e.target.value)\n }, 500),\n [],\n )\n\n useEffect(() => () => debounceFn.cancel(), [debounceFn])\n\n // O input desmonta ao fechar e volta vazio; o filtro precisa acompanhar.\n useEffect(() => {\n if (!open) {\n debounceFn.cancel()\n setQueryText('')\n }\n }, [open, debounceFn])\n\n useEffect(() => {\n if (!open) return\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') onClose()\n }\n window.addEventListener('keydown', handleKeyDown)\n return () => window.removeEventListener('keydown', handleKeyDown)\n }, [open, onClose])\n\n const handleNewChat = () => {\n setSelectedConversation('')\n onClose()\n }\n\n return (\n <AnimatePresence>\n {open && (\n <>\n <motion.div\n key=\"orbe-ai-drawer-backdrop\"\n aria-hidden\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.2 }}\n className=\"absolute inset-0 z-40 bg-black/40\"\n onClick={onClose}\n />\n <motion.aside\n key=\"orbe-ai-drawer\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Conversas\"\n initial={{ x: '-100%' }}\n animate={{ x: 0 }}\n exit={{ x: '-100%' }}\n transition={{ duration: 0.2, ease: 'easeOut' }}\n className=\"absolute inset-y-0 left-0 z-50 flex w-[85%] max-w-[300px] flex-col border-r border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-800\"\n >\n <div className=\"flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700\">\n <span className=\"font-semibold text-gray-900 dark:text-gray-100\">\n Conversas\n </span>\n <button\n type=\"button\"\n className={iconButtonClass}\n onClick={onClose}\n aria-label=\"Fechar conversas\"\n >\n <HiX size={18} />\n </button>\n </div>\n\n <div className=\"flex flex-col gap-3 px-4 pt-4\">\n <Button\n block\n variant=\"solid\"\n size=\"sm\"\n icon={<TbPlus />}\n onClick={handleNewChat}\n >\n Novo chat\n </Button>\n <label className=\"flex h-9 items-center gap-2 rounded-lg border border-gray-200 px-3 focus-within:border-primary dark:border-gray-600\">\n <TbSearch className=\"shrink-0 text-lg text-gray-400\" />\n <input\n className=\"h-full min-w-0 flex-1 bg-transparent text-sm placeholder:text-gray-400 focus:outline-none heading-text\"\n placeholder=\"Buscar conversa\"\n onChange={debounceFn}\n />\n </label>\n </div>\n\n <div className=\"px-4 pb-1 pt-4 text-xs font-semibold uppercase tracking-wide text-gray-400\">\n Histórico\n </div>\n <div className=\"min-h-0 flex-1\">\n <ChatHistory\n queryText={queryText}\n onClick={onClose}\n dropdownFloatingClass=\"!z-[10000]\"\n />\n </div>\n </motion.aside>\n </>\n )}\n </AnimatePresence>\n )\n}\n\nexport default OrbeAiChatDrawer\n"],"names":[],"mappings":"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"}

package/dist/@ecme/components/template/OrbeAiWidget/OrbeAiWidget.js CHANGED Viewed

@@ -1,30 +1,41 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { TbMessageChatbot, TbArrowsMinimize, TbArrowsMaximize } from "react-icons/tb";
+import { TbMenu2, TbMessageChatbot, TbArrowsMinimize, TbArrowsMaximize } from "react-icons/tb";
 import { HiX } from "react-icons/hi";
 import ChatView from "../../../views/concepts/ai/Chat/components/ChatView.js";
 import ChatHistoryRenameDialog from "../../../views/concepts/ai/Chat/components/ChatHistoryRenameDialog.js";
-import useResizablePanel from "./useResizablePanel.js";
+import useResizablePanel, { MARGIN } from "./useResizablePanel.js";
 import ResizeHandles from "./ResizeHandles.js";
+import OrbeAiChatDrawer from "./OrbeAiChatDrawer.js";
 const iconButtonClass = "flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200";
 const OrbeAiWidget = () => {
   const [open, setOpen] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
-  const { rect, startResize } = useResizablePanel();
-  const toggleOpen = () => setOpen((prev) => !prev);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const { rect, startResize, anchor } = useResizablePanel();
+  const toggleOpen = () => {
+    if (!open) anchor();
+    setOpen((prev) => !prev);
+    setDrawerOpen(false);
+  };
   const toggleFullscreen = () => setFullscreen((prev) => !prev);
+  const toggleDrawer = () => setDrawerOpen((prev) => !prev);
+  const closeDrawer = useCallback(() => setDrawerOpen(false), []);
   const close = () => {
     setOpen(false);
     setFullscreen(false);
+    setDrawerOpen(false);
   };
   const panelStyle = fullscreen ? void 0 : {
-    top: rect.top,
-    left: rect.left,
+    right: rect.right,
+    bottom: rect.bottom,
     width: rect.width,
-    height: rect.height
+    height: rect.height,
+    maxWidth: `calc(100% - ${rect.right + MARGIN}px)`,
+    maxHeight: `calc(100% - ${rect.bottom + MARGIN}px)`
   };
-  const panelVariantClass = fullscreen ? "inset-0 rounded-none border-0" : "rounded-2xl border shadow-2xl";
+  const panelVariantClass = fullscreen ? "inset-0 rounded-none border-0" : "origin-bottom-right rounded-2xl border shadow-2xl";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -41,12 +52,23 @@ const OrbeAiWidget = () => {
             className: `fixed flex flex-col overflow-hidden border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 ${panelVariantClass}`,
             children: [
               !fullscreen && /* @__PURE__ */ jsx(ResizeHandles, { onResizeStart: startResize }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white", children: /* @__PURE__ */ jsx(TbMessageChatbot, { size: 20 }) }),
-                  /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Orbe AI" })
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-3 sm:px-4 dark:border-gray-700", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1 sm:gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: iconButtonClass,
+                      onClick: toggleDrawer,
+                      "aria-label": "Abrir conversas",
+                      "aria-expanded": drawerOpen,
+                      children: /* @__PURE__ */ jsx(TbMenu2, { size: 20 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-white", children: /* @__PURE__ */ jsx(TbMessageChatbot, { size: 20 }) }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-gray-900 dark:text-gray-100", children: "Orbe AI" })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 sm:gap-2", children: [
                   /* @__PURE__ */ jsx(
                     "button",
                     {
@@ -70,9 +92,16 @@ const OrbeAiWidget = () => {
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 p-2", children: [
-                /* @__PURE__ */ jsx(ChatView, {}),
-                /* @__PURE__ */ jsx(ChatHistoryRenameDialog, {})
-              ] })
+                /* @__PURE__ */ jsx(ChatView, { showMobileNav: false }),
+                /* @__PURE__ */ jsx(ChatHistoryRenameDialog, { overlayClassName: "!z-[10000]" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                OrbeAiChatDrawer,
+                {
+                  open: drawerOpen,
+                  onClose: closeDrawer
+                }
+              )
             ]
           },
           "orbe-ai-panel"
@@ -81,7 +110,7 @@ const OrbeAiWidget = () => {
           "button",
           {
             type: "button",
-            className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-colors hover:bg-primary-deep focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+            className: "flex h-14 w-14 items-center justify-center rounded-full bg-primary text-neutral shadow-lg transition-colors hover:bg-primary-mild focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
             onClick: toggleOpen,
             "aria-label": open ? "Fechar chat Orbe AI" : "Abrir chat Orbe AI",
             "aria-expanded": open,

package/dist/@ecme/components/template/OrbeAiWidget/OrbeAiWidget.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrbeAiWidget.js","sources":["../../../../../lib/@ecme/components/template/OrbeAiWidget/OrbeAiWidget.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport {\n TbMessageChatbot,\n TbArrowsMaximize,\n TbArrowsMinimize,\n} from 'react-icons/tb'\nimport { HiX } from 'react-icons/hi'\nimport ChatView from '@/views/concepts/ai/Chat/components/ChatView'\nimport ChatHistoryRenameDialog from '@/views/concepts/ai/Chat/components/ChatHistoryRenameDialog'\nimport useResizablePanel from './useResizablePanel'\nimport ResizeHandles from './ResizeHandles'\n\nconst iconButtonClass =\n 'flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'\n\nconst OrbeAiWidget = () => {\n const [open, setOpen] = useState(false)\n const [fullscreen, setFullscreen] = useState(false)\n const { rect, startResize } = useResizablePanel()\n\n const toggleOpen = () => setOpen((prev) => !prev)\n const toggleFullscreen = () => setFullscreen((prev) => !prev)\n const close = () => {\n setOpen(false)\n setFullscreen(false)\n }\n\n // Tela cheia: cobre o viewport inteiro (inset-0). Flutuante: usa o retângulo do resize.\n const panelStyle = fullscreen\n ? undefined\n : {\n top: rect.top,\n left: rect.left,\n width: rect.width,\n height: rect.height,\n }\n const panelVariantClass = fullscreen\n ? 'inset-0 rounded-none border-0'\n : 'rounded-2xl border shadow-2xl'\n\n return (\n <div\n className={`fixed bottom-6 right-6 flex flex-col items-end gap-3 print:hidden ${\n fullscreen ? 'z-[9999]' : 'z-40'\n }`}\n >\n <AnimatePresence>\n {open && (\n <motion.div\n key=\"orbe-ai-panel\"\n initial={{ opacity: 0, y: 24, scale: 0.96 }}\n animate={{ opacity: 1, y: 0, scale: 1 }}\n exit={{ opacity: 0, y: 24, scale: 0.96 }}\n transition={{ duration: 0.2, ease: 'easeOut' }}\n style={panelStyle}\n className={`fixed flex flex-col overflow-hidden border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 ${panelVariantClass}`}\n >\n {!fullscreen && (\n <ResizeHandles onResizeStart={startResize} />\n )}\n\n <div className=\"flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700\">\n <div className=\"flex items-center gap-2\">\n <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white\">\n <TbMessageChatbot size={20} />\n </span>\n <span className=\"font-semibold text-gray-900 dark:text-gray-100\">\n Orbe AI\n </span>\n </div>\n <div className=\"flex items-center gap-2\">\n <button\n type=\"button\"\n className={iconButtonClass}\n onClick={toggleFullscreen}\n aria-label={\n fullscreen\n ? 'Sair da tela cheia'\n : 'Tela cheia'\n }\n >\n {fullscreen ? (\n <TbArrowsMinimize size={18} />\n ) : (\n <TbArrowsMaximize size={18} />\n )}\n </button>\n <button\n type=\"button\"\n className={iconButtonClass}\n onClick={close}\n aria-label=\"Fechar chat Orbe AI\"\n >\n <HiX size={18} />\n </button>\n </div>\n </div>\n\n <div className=\"min-h-0 flex-1 p-2\">\n <ChatView />\n <ChatHistoryRenameDialog />\n </div>\n </motion.div>\n )}\n </AnimatePresence>\n\n {!fullscreen && (\n <button\n type=\"button\"\n className=\"flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-colors hover:bg-primary-deep focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2\"\n onClick={toggleOpen}\n aria-label={open ? 'Fechar chat Orbe AI' : 'Abrir chat Orbe AI'}\n aria-expanded={open}\n >\n {open ? <HiX size={24} /> : <TbMessageChatbot size={26} />}\n </button>\n )}\n </div>\n )\n}\n\nexport default OrbeAiWidget\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"OrbeAiWidget.js","sources":["../../../../../lib/@ecme/components/template/OrbeAiWidget/OrbeAiWidget.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport {\n TbMessageChatbot,\n TbArrowsMaximize,\n TbArrowsMinimize,\n TbMenu2,\n} from 'react-icons/tb'\nimport { HiX } from 'react-icons/hi'\nimport ChatView from '@/views/concepts/ai/Chat/components/ChatView'\nimport ChatHistoryRenameDialog from '@/views/concepts/ai/Chat/components/ChatHistoryRenameDialog'\nimport useResizablePanel, { MARGIN } from './useResizablePanel'\nimport ResizeHandles from './ResizeHandles'\nimport OrbeAiChatDrawer from './OrbeAiChatDrawer'\n\nconst iconButtonClass =\n 'flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200'\n\nconst OrbeAiWidget = () => {\n const [open, setOpen] = useState(false)\n const [fullscreen, setFullscreen] = useState(false)\n const [drawerOpen, setDrawerOpen] = useState(false)\n const { rect, startResize, anchor } = useResizablePanel()\n\n const toggleOpen = () => {\n // Sempre abre colado no botão. No mesmo clique do setOpen: o React junta\n // os dois updates e o painel não pisca na posição antiga.\n if (!open) anchor()\n setOpen((prev) => !prev)\n setDrawerOpen(false)\n }\n const toggleFullscreen = () => setFullscreen((prev) => !prev)\n const toggleDrawer = () => setDrawerOpen((prev) => !prev)\n // Estável: o drawer registra o listener de Esc com ela como dependência.\n const closeDrawer = useCallback(() => setDrawerOpen(false), [])\n const close = () => {\n setOpen(false)\n setFullscreen(false)\n setDrawerOpen(false)\n }\n\n // Tela cheia: cobre o viewport inteiro (inset-0). Flutuante: ancorado no\n // canto do botão (right/bottom). O max-* limita só a exibição — o estado\n // guarda o tamanho escolhido, então ao desfazer o zoom o painel volta igual.\n // `100%` de um `fixed` é o viewport sem a barra de rolagem.\n const panelStyle = fullscreen\n ? undefined\n : {\n right: rect.right,\n bottom: rect.bottom,\n width: rect.width,\n height: rect.height,\n maxWidth: `calc(100% - ${rect.right + MARGIN}px)`,\n maxHeight: `calc(100% - ${rect.bottom + MARGIN}px)`,\n }\n const panelVariantClass = fullscreen\n ? 'inset-0 rounded-none border-0'\n : 'origin-bottom-right rounded-2xl border shadow-2xl'\n\n return (\n <div\n className={`fixed bottom-6 right-6 flex flex-col items-end gap-3 print:hidden ${\n fullscreen ? 'z-[9999]' : 'z-40'\n }`}\n >\n <AnimatePresence>\n {open && (\n <motion.div\n key=\"orbe-ai-panel\"\n initial={{ opacity: 0, y: 24, scale: 0.96 }}\n animate={{ opacity: 1, y: 0, scale: 1 }}\n exit={{ opacity: 0, y: 24, scale: 0.96 }}\n transition={{ duration: 0.2, ease: 'easeOut' }}\n style={panelStyle}\n className={`fixed flex flex-col overflow-hidden border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 ${panelVariantClass}`}\n >\n {!fullscreen && (\n <ResizeHandles onResizeStart={startResize} />\n )}\n\n <div className=\"flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-3 sm:px-4 dark:border-gray-700\">\n <div className=\"flex min-w-0 items-center gap-1 sm:gap-2\">\n <button\n type=\"button\"\n className={iconButtonClass}\n onClick={toggleDrawer}\n aria-label=\"Abrir conversas\"\n aria-expanded={drawerOpen}\n >\n <TbMenu2 size={20} />\n </button>\n <span className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-white\">\n <TbMessageChatbot size={20} />\n </span>\n <span className=\"truncate font-semibold text-gray-900 dark:text-gray-100\">\n Orbe AI\n </span>\n </div>\n <div className=\"flex shrink-0 items-center gap-1 sm:gap-2\">\n <button\n type=\"button\"\n className={iconButtonClass}\n onClick={toggleFullscreen}\n aria-label={\n fullscreen\n ? 'Sair da tela cheia'\n : 'Tela cheia'\n }\n >\n {fullscreen ? (\n <TbArrowsMinimize size={18} />\n ) : (\n <TbArrowsMaximize size={18} />\n )}\n </button>\n <button\n type=\"button\"\n className={iconButtonClass}\n onClick={close}\n aria-label=\"Fechar chat Orbe AI\"\n >\n <HiX size={18} />\n </button>\n </div>\n </div>\n\n <div className=\"min-h-0 flex-1 p-2\">\n <ChatView showMobileNav={false} />\n <ChatHistoryRenameDialog overlayClassName=\"!z-[10000]\" />\n </div>\n\n <OrbeAiChatDrawer\n open={drawerOpen}\n onClose={closeDrawer}\n />\n </motion.div>\n )}\n </AnimatePresence>\n\n {!fullscreen && (\n <button\n type=\"button\"\n className=\"flex h-14 w-14 items-center justify-center rounded-full bg-primary text-neutral shadow-lg transition-colors hover:bg-primary-mild focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2\"\n onClick={toggleOpen}\n aria-label={open ? 'Fechar chat Orbe AI' : 'Abrir chat Orbe AI'}\n aria-expanded={open}\n >\n {open ? <HiX size={24} /> : <TbMessageChatbot size={26} />}\n </button>\n )}\n </div>\n )\n}\n\nexport default OrbeAiWidget\n"],"names":[],"mappings":"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"}

package/dist/@ecme/components/template/OrbeAiWidget/useResizablePanel.js CHANGED Viewed

@@ -1,61 +1,74 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 const MIN = { width: 360, height: 420 };
 const DEFAULT = { width: 480, height: 720 };
 const MARGIN = 12;
-const ANCHOR = { right: 24, bottomOffset: 92 };
+const ANCHOR = { right: 24, bottom: 92 };
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-const getDefaultRect = () => {
-  const width = Math.min(DEFAULT.width, window.innerWidth - MARGIN * 2);
-  const height = Math.min(DEFAULT.height, window.innerHeight - MARGIN * 2);
-  return {
-    width,
-    height,
-    left: Math.max(MARGIN, window.innerWidth - width - ANCHOR.right),
-    top: Math.max(MARGIN, window.innerHeight - height - ANCHOR.bottomOffset)
-  };
-};
+const getViewport = () => ({
+  width: document.documentElement.clientWidth,
+  height: document.documentElement.clientHeight
+});
 const useResizablePanel = () => {
-  const [rect, setRect] = useState(getDefaultRect);
+  const [rect, setRect] = useState({ ...ANCHOR, ...DEFAULT });
+  const anchor = useCallback(() => {
+    setRect(
+      (prev) => prev.right === ANCHOR.right && prev.bottom === ANCHOR.bottom ? prev : { ...prev, ...ANCHOR }
+    );
+  }, []);
+  useEffect(() => {
+    window.addEventListener("resize", anchor);
+    return () => window.removeEventListener("resize", anchor);
+  }, [anchor]);
   const startResize = useCallback(
     (event, direction) => {
       event.preventDefault();
       event.stopPropagation();
       const startX = event.clientX;
       const startY = event.clientY;
-      const start = rect;
-      const right = start.left + start.width;
-      const bottom = start.top + start.height;
+      const viewport = getViewport();
+      const start = {
+        ...rect,
+        width: Math.min(rect.width, viewport.width - rect.right - MARGIN),
+        height: Math.min(
+          rect.height,
+          viewport.height - rect.bottom - MARGIN
+        )
+      };
       const previousUserSelect = document.body.style.userSelect;
       document.body.style.userSelect = "none";
       const handleMove = (moveEvent) => {
         const dx = moveEvent.clientX - startX;
         const dy = moveEvent.clientY - startY;
         const next = { ...start };
-        if (direction.includes("right")) {
+        if (direction.includes("left")) {
           next.width = clamp(
-            start.width + dx,
+            start.width - dx,
             MIN.width,
-            window.innerWidth - start.left - MARGIN
+            viewport.width - start.right - MARGIN
           );
         }
-        if (direction.includes("left")) {
-          next.width = clamp(start.width - dx, MIN.width, right - MARGIN);
-          next.left = right - next.width;
-        }
-        if (direction.includes("bottom")) {
+        if (direction.includes("top")) {
           next.height = clamp(
-            start.height + dy,
+            start.height - dy,
             MIN.height,
-            window.innerHeight - start.top - MARGIN
+            viewport.height - start.bottom - MARGIN
           );
         }
-        if (direction.includes("top")) {
+        if (direction.includes("right")) {
+          next.width = clamp(
+            start.width + dx,
+            MIN.width,
+            start.width + start.right - MARGIN
+          );
+          next.right = start.right - (next.width - start.width);
+        }
+        if (direction.includes("bottom")) {
           next.height = clamp(
-            start.height - dy,
+            start.height + dy,
             MIN.height,
-            bottom - MARGIN
+            start.height + start.bottom - MARGIN
           );
-          next.top = bottom - next.height;
+          next.bottom = start.bottom - (next.height - start.height);
         }
         setRect(next);
       };
@@ -69,9 +82,10 @@ const useResizablePanel = () => {
     },
     [rect]
   );
-  return { rect, startResize };
+  return { rect, startResize, anchor };
 };
 export {
+  MARGIN,
   useResizablePanel as default
 };
 //# sourceMappingURL=useResizablePanel.js.map