organify-ui 0.3.3 → 0.3.4

package/dist/index.js

@@ -1,14 +1,14 @@
 export { I18nProvider, createTranslator, useI18n } from './chunk-FQA33MF4.js';
 export { ThemeProvider, useTheme } from './chunk-RFOKENE3.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, Separator, ResponsiveDialog, Label, Input, Textarea, Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-Z7OW3K7Y.js';
-export { Alert, Button, ChatMessages, ChatSidebar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Input, Label, MOCK_PROJECTS, MOCK_USERS, OrgLoader, OrgLoaderInline, OrganifyChat, ResponsiveDialog, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TypingIndicatorMock, alertVariants, buttonVariants, generateAutoReplies, getMockMentionOptions, getRoomPermissions, inputVariants, orgLoaderVariants, typingIndicator, useChat } from './chunk-Z7OW3K7Y.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, Separator, ResponsiveDialog, Label, Input, Textarea, Button, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-NUA6OPJV.js';
+export { AiChatSidebar, Alert, Button, ChatMessages, ChatSidebar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Input, Label, MOCK_PROJECTS, MOCK_USERS, OrgLoader, OrgLoaderInline, OrganifyChat, ResponsiveDialog, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TypingIndicatorMock, alertVariants, buttonVariants, generateAutoReplies, getMockMentionOptions, getRoomPermissions, inputVariants, orgLoaderVariants, typingIndicator, useChat } from './chunk-NUA6OPJV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-A2H2TBSV.js';
 export { NotificationBell, NotificationItem, NotificationList, OrganifyNotifications, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PresenceAvatarStack, PresenceIndicator, useNotifications, usePresence } from './chunk-A2H2TBSV.js';
 import { cn, Avatar, AvatarImage, AvatarFallback, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Skeleton, useOrganify, useOrganifyGql, ScrollArea, useOrganifyUser, useOrganifyApi, Badge, useOrganifyWorkspace, useOrganifyNavigation, useOrganifyProject } from './chunk-VHQZS77G.js';
 export { Avatar, AvatarFallback, AvatarImage, Badge, OrganifyContext, OrganifyProvider, ScrollArea, ScrollBar, Skeleton, SkeletonCard, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, avatarVariants, badgeVariants, cn, useOrganify, useOrganifyApi, useOrganifyGql, useOrganifyNavigation, useOrganifyProject, useOrganifyRest, useOrganifyUser, useOrganifyWorkspace } from './chunk-VHQZS77G.js';
 import { OrgDiamond, OrgPlus, OrgComment, OrgEdit, OrgTrash, OrgCheckCircle, OrgAttachment, OrgCalendar, OrgMail, OrgBoard, OrgSprint, OrgRocket, OrgWarning, OrgFlag, OrgShield, OrgZap, OrgStar } from './chunk-MZKEDV5W.js';
 export { OrgAI, OrgActivity, OrgArrowLeft, OrgArrowRight, OrgAttachment, OrgBell, OrgBoard, OrgCalendar, OrgCelebrate, OrgChart, OrgChat, OrgCheck, OrgCheckCircle, OrgChevronDown, OrgChevronLeft, OrgChevronRight, OrgChevronUp, OrgClock, OrgClose, OrgComment, OrgCopy, OrgCreditCard, OrgDeveloper, OrgDiamond, OrgDoor, OrgDownload, OrgEdit, OrgError, OrgExecutive, OrgEye, OrgEyeOff, OrgFile, OrgFilter, OrgFlag, OrgFolder, OrgGauge, OrgGlobe, OrgGrid, OrgHeart, OrgHome, OrgInfo, OrgIntegration, OrgLink, OrgList, OrgLock, OrgLogo, OrgLogout, OrgMail, OrgMention, OrgMenu, OrgMoon, OrgPMO, OrgPause, OrgPlay, OrgPlus, OrgProjectManager, OrgReport, OrgRocket, OrgSearch, OrgSettings, OrgShield, OrgSort, OrgSprint, OrgStakeholder, OrgStar, OrgSun, OrgTag, OrgTarget, OrgTeam, OrgTrash, OrgTutorial, OrgUnlock, OrgUpload, OrgUser, OrgWarning, OrgWave, OrgWordmark, OrgWorkflow, OrgWorkspace, OrgZap } from './chunk-MZKEDV5W.js';
-import * as React4 from 'react';
+import * as React5 from 'react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
@@ -25,8 +25,8 @@ export { toast } from 'sonner';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
 export { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-var Toggle = React4.forwardRef(({ className, label, description, ...props }, ref) => {
-  const id = React4.useId();
+var Toggle = React5.forwardRef(({ className, label, description, ...props }, ref) => {
+  const id = React5.useId();
   if (label) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -167,7 +167,7 @@ function UserAvatar({
   ] }) });
 }
 UserAvatar.displayName = "UserAvatar";
-var Progress = React4.forwardRef(({ className, value, showLabel, label, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+var Progress = React5.forwardRef(({ className, value, showLabel, label, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
   (label || showLabel) && /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between", children: [
     label && /* @__PURE__ */ jsx("span", { className: "text-label uppercase tracking-widest text-org-text-muted", children: label }),
     showLabel && /* @__PURE__ */ jsxs("span", { className: "font-mono text-lg text-primary-light", children: [
@@ -345,8 +345,8 @@ function EmptyState({
   );
 }
 function useMediaQuery(query) {
-  const [matches, setMatches] = React4.useState(false);
-  React4.useEffect(() => {
+  const [matches, setMatches] = React5.useState(false);
+  React5.useEffect(() => {
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
     const handler = (e) => setMatches(e.matches);
@@ -763,77 +763,127 @@ function DockSidebar({
   onExpandedChange,
   hoverExpand = false,
   renderLink,
+  mobileOpen = false,
+  onMobileClose,
   className,
   // Destructure hoverExpand out so it doesn't leak to DOM via ...props
   ...props
 }) {
   const handleToggle = () => onExpandedChange?.(!expanded);
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className: cn(
-        sidebarVariants({ state: expanded ? "expanded" : "collapsed" }),
-        className
-      ),
-      onMouseEnter: () => hoverExpand && onExpandedChange?.(true),
-      onMouseLeave: () => hoverExpand && onExpandedChange?.(false),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center px-3 h-16 border-b border-white/10", expanded ? "justify-between" : "justify-center"), children: [
-          header,
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleToggle,
-              "aria-label": expanded ? "Collapse sidebar" : "Expand sidebar",
-              className: cn(
-                "flex h-7 w-7 items-center justify-center rounded-xl",
-                "text-org-text-muted transition-all hover:bg-white/[0.05] hover:text-org-text"
+  React5.useEffect(() => {
+    if (!mobileOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onMobileClose?.();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [mobileOpen, onMobileClose]);
+  React5.useEffect(() => {
+    if (!mobileOpen) return;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-[49] bg-black/60 backdrop-blur-sm sm:hidden animate-in fade-in duration-200",
+        onClick: onMobileClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: cn(
+          // Desktop: normal fixed sidebar
+          "hidden sm:flex",
+          sidebarVariants({ state: expanded ? "expanded" : "collapsed" }),
+          // Mobile: overlay drawer mode
+          mobileOpen && "flex sm:flex fixed inset-y-0 left-0 z-50 w-64 shadow-2xl shadow-black/50 animate-in slide-in-from-left duration-300",
+          !mobileOpen && "max-sm:hidden",
+          className
+        ),
+        onMouseEnter: () => hoverExpand && onExpandedChange?.(true),
+        onMouseLeave: () => hoverExpand && onExpandedChange?.(false),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(
+            "flex items-center px-3 h-16 border-b border-white/10",
+            expanded || mobileOpen ? "justify-between" : "justify-center"
+          ), children: [
+            header,
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              mobileOpen && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onMobileClose,
+                  "aria-label": "Fechar menu",
+                  className: "flex h-7 w-7 items-center justify-center rounded-xl text-org-text-muted hover:bg-white/[0.05] hover:text-org-text sm:hidden",
+                  children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4 4L12 12M12 4L4 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                }
               ),
-              children: /* @__PURE__ */ jsx(
-                "svg",
+              /* @__PURE__ */ jsx(
+                "button",
                 {
-                  width: "16",
-                  height: "16",
-                  viewBox: "0 0 16 16",
-                  fill: "none",
+                  type: "button",
+                  onClick: handleToggle,
+                  "aria-label": expanded ? "Collapse sidebar" : "Expand sidebar",
                   className: cn(
-                    "transition-transform duration-[400ms]",
-                    expanded ? "rotate-0" : "rotate-180"
+                    "hidden sm:flex h-7 w-7 items-center justify-center rounded-xl",
+                    "text-org-text-muted transition-all hover:bg-white/[0.05] hover:text-org-text"
                   ),
-                  children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      className: cn(
+                        "transition-transform duration-[400ms]",
+                        expanded ? "rotate-0" : "rotate-180"
+                      ),
+                      children: /* @__PURE__ */ jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 px-2 space-y-0.5", children: items.map((entry, i) => /* @__PURE__ */ jsx(
-          SidebarEntry,
-          {
-            entry,
-            expanded,
-            renderLink
-          },
-          isSeparator(entry) ? `sep-${i}` : entry.id
-        )) }),
-        bottomItems && bottomItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-white/10 py-2 px-2 space-y-0.5", children: bottomItems.map((entry, i) => /* @__PURE__ */ jsx(
-          SidebarEntry,
-          {
-            entry,
-            expanded,
-            renderLink
-          },
-          isSeparator(entry) ? `bsep-${i}` : entry.id
-        )) })
-      ]
-    }
-  );
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 px-2 space-y-0.5", children: items.map((entry, i) => /* @__PURE__ */ jsx(
+            SidebarEntry,
+            {
+              entry,
+              expanded: expanded || mobileOpen,
+              renderLink,
+              onNavigate: mobileOpen ? onMobileClose : void 0
+            },
+            isSeparator(entry) ? `sep-${i}` : entry.id
+          )) }),
+          bottomItems && bottomItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-white/10 py-2 px-2 space-y-0.5", children: bottomItems.map((entry, i) => /* @__PURE__ */ jsx(
+            SidebarEntry,
+            {
+              entry,
+              expanded: expanded || mobileOpen,
+              renderLink,
+              onNavigate: mobileOpen ? onMobileClose : void 0
+            },
+            isSeparator(entry) ? `bsep-${i}` : entry.id
+          )) })
+        ]
+      }
+    )
+  ] });
 }
 function SidebarEntry({
   entry,
   expanded,
-  renderLink
+  renderLink,
+  onNavigate
 }) {
   if (isSeparator(entry)) {
     return /* @__PURE__ */ jsxs("div", { className: "py-2", children: [
@@ -846,16 +896,22 @@ function SidebarEntry({
     {
       item: entry,
       expanded,
-      renderLink
+      renderLink,
+      onNavigate
     }
   );
 }
 function SidebarButton({
   item,
   expanded,
-  renderLink
+  renderLink,
+  onNavigate
 }) {
   const { icon, label, href, onClick, active, badge, disabled } = item;
+  const handleClick = () => {
+    onClick?.();
+    onNavigate?.();
+  };
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl transition-all", children: icon }),
     /* @__PURE__ */ jsx(
@@ -891,13 +947,13 @@ function SidebarButton({
     !expanded && "justify-center"
   );
   if (href && renderLink) {
-    return renderLink({ href, children: content, className: sharedClass, onClick });
+    return renderLink({ href, children: content, className: sharedClass, onClick: handleClick });
   }
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick,
+      onClick: handleClick,
       disabled,
       "aria-current": active ? "page" : void 0,
       className: sharedClass,
@@ -964,12 +1020,12 @@ function WorkspaceSwitcher({ compact = false, onCreateWorkspace, className }) {
     onWorkspaceChange
   } = useOrganify();
   const gql = useOrganifyGql();
-  const [isOpen, setIsOpen] = React4.useState(false);
-  const [createDialogOpen, setCreateDialogOpen] = React4.useState(false);
-  const [editingWorkspace, setEditingWorkspace] = React4.useState(null);
-  const [deletingWorkspace, setDeletingWorkspace] = React4.useState(null);
-  const dropdownRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [createDialogOpen, setCreateDialogOpen] = React5.useState(false);
+  const [editingWorkspace, setEditingWorkspace] = React5.useState(null);
+  const [deletingWorkspace, setDeletingWorkspace] = React5.useState(null);
+  const dropdownRef = React5.useRef(null);
+  React5.useEffect(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -978,7 +1034,7 @@ function WorkspaceSwitcher({ compact = false, onCreateWorkspace, className }) {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleCreateWorkspace = React4.useCallback(
+  const handleCreateWorkspace = React5.useCallback(
     async (data) => {
       const optimisticId = `temp-${Date.now()}`;
       const optimisticSlug = data.name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
@@ -1018,7 +1074,7 @@ function WorkspaceSwitcher({ compact = false, onCreateWorkspace, className }) {
     },
     [workspaces, gql, onWorkspacesChange, onWorkspaceChange, onCreateWorkspace]
   );
-  const handleUpdateWorkspace = React4.useCallback(
+  const handleUpdateWorkspace = React5.useCallback(
     async (slug, data) => {
       const prevWorkspaces = [...workspaces];
       const prevActive = workspace;
@@ -1053,7 +1109,7 @@ function WorkspaceSwitcher({ compact = false, onCreateWorkspace, className }) {
     },
     [workspaces, workspace, gql, onWorkspacesChange, onWorkspaceChange]
   );
-  const handleDeleteWorkspace = React4.useCallback(
+  const handleDeleteWorkspace = React5.useCallback(
     async (slug) => {
       const prevWorkspaces = [...workspaces];
       const prevActive = workspace;
@@ -1242,7 +1298,7 @@ function SwitcherItem({
   onEdit,
   onDelete
 }) {
-  const [showActions, setShowActions] = React4.useState(false);
+  const [showActions, setShowActions] = React5.useState(false);
   const isOptimistic = ws.id.startsWith("temp-");
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -1316,11 +1372,11 @@ function CreateWorkspaceInlineDialog({
   onOpenChange,
   onSubmit
 }) {
-  const [name, setName] = React4.useState("");
-  const [description, setDescription] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState("");
-  React4.useEffect(() => {
+  const [name, setName] = React5.useState("");
+  const [description, setDescription] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  const [error, setError] = React5.useState("");
+  React5.useEffect(() => {
     if (open) {
       setName("");
       setDescription("");
@@ -1393,11 +1449,11 @@ function EditWorkspaceDialog({
   workspace,
   onSubmit
 }) {
-  const [name, setName] = React4.useState("");
-  const [description, setDescription] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState("");
-  React4.useEffect(() => {
+  const [name, setName] = React5.useState("");
+  const [description, setDescription] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  const [error, setError] = React5.useState("");
+  React5.useEffect(() => {
     if (open && workspace) {
       setName(workspace.name);
       setDescription(workspace.description ?? "");
@@ -1471,10 +1527,10 @@ function DeleteWorkspaceDialog({
   workspace,
   onConfirm
 }) {
-  const [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState("");
-  const [confirmText, setConfirmText] = React4.useState("");
-  React4.useEffect(() => {
+  const [loading, setLoading] = React5.useState(false);
+  const [error, setError] = React5.useState("");
+  const [confirmText, setConfirmText] = React5.useState("");
+  React5.useEffect(() => {
     if (open) {
       setError("");
       setConfirmText("");
@@ -4104,7 +4160,7 @@ function SheetContent({
         "data-slot": "sheet-content",
         className: cn(
           "data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-xl dark:shadow-[0_24px_80px_-15px_rgba(0,0,0,0.8)] transition ease-[cubic-bezier(0.25,1,0.5,1)] data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          "border-gray-300 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-white",
+          "[background:var(--org-bg-elevated,#110E22)] [color:var(--org-text,#F0ECF9)] [border-color:var(--org-glass-border,rgba(167,139,250,0.15))]",
           side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l-2 sm:max-w-sm",
           side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r-2 sm:max-w-sm",
           side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b-2",
@@ -4202,9 +4258,9 @@ function CommentItem({
   onDelete,
   onReact
 }) {
-  const [editing, setEditing] = React4.useState(false);
-  const [editContent, setEditContent] = React4.useState(comment.content);
-  const [showReactions, setShowReactions] = React4.useState(false);
+  const [editing, setEditing] = React5.useState(false);
+  const [editContent, setEditContent] = React5.useState(comment.content);
+  const [showReactions, setShowReactions] = React5.useState(false);
   const isAuthor = comment.author.id === currentUser.id;
   const isPending = comment._status === "pending";
   const isError = comment._status === "error";
@@ -4368,9 +4424,9 @@ function CommentInput({
   compact = false,
   alwaysExpanded = true
 }) {
-  const [content, setContent] = React4.useState("");
-  const textareaRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [content, setContent] = React5.useState("");
+  const textareaRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (autoFocus && textareaRef.current) {
       textareaRef.current.focus();
     }
@@ -4490,7 +4546,7 @@ function CommentThread({
     displayName: providerUser?.name ?? "",
     avatarUrl: providerUser?.avatarUrl ?? null
   };
-  const effectiveOnFetch = React4.useCallback(
+  const effectiveOnFetch = React5.useCallback(
     async (_entityType, _entityId) => {
       if (onFetch) return onFetch(_entityType, _entityId);
       const data = await gql(
@@ -4509,7 +4565,7 @@ function CommentThread({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gql, onFetch]
   );
-  const effectiveOnAdd = React4.useCallback(
+  const effectiveOnAdd = React5.useCallback(
     async (input) => {
       if (onAdd) return onAdd(input);
       const data = await gql(
@@ -4526,7 +4582,7 @@ function CommentThread({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gql, onAdd, currentUser.id]
   );
-  const effectiveOnEdit = React4.useCallback(
+  const effectiveOnEdit = React5.useCallback(
     async (commentId, content) => {
       if (onEdit) return onEdit(commentId, content);
       const data = await gql(
@@ -4548,7 +4604,7 @@ function CommentThread({
     },
     [gql, onEdit]
   );
-  const effectiveOnDelete = React4.useCallback(
+  const effectiveOnDelete = React5.useCallback(
     async (commentId) => {
       if (onDelete) return onDelete(commentId);
       await gql(
@@ -4559,15 +4615,15 @@ function CommentThread({
     },
     [gql, onDelete]
   );
-  const [comments, setComments] = React4.useState(externalComments || []);
-  const [loading, setLoading] = React4.useState(!externalComments);
-  const [showAll, setShowAll] = React4.useState(false);
-  const [replyingTo, setReplyingTo] = React4.useState(null);
-  const hasFetchedRef = React4.useRef(false);
-  React4.useEffect(() => {
+  const [comments, setComments] = React5.useState(externalComments || []);
+  const [loading, setLoading] = React5.useState(!externalComments);
+  const [showAll, setShowAll] = React5.useState(false);
+  const [replyingTo, setReplyingTo] = React5.useState(null);
+  const hasFetchedRef = React5.useRef(false);
+  React5.useEffect(() => {
     hasFetchedRef.current = false;
   }, [entityId, entityType]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (externalComments) return;
     if (hasFetchedRef.current) return;
     hasFetchedRef.current = true;
@@ -4585,12 +4641,12 @@ function CommentThread({
       cancelled = true;
     };
   }, [entityType, entityId, externalComments, effectiveOnFetch]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (externalComments) {
       setComments(externalComments);
     }
   }, [externalComments]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (externalComments || onFetch) return;
     if (!entityId || entityType !== "task") return;
     const projectsServiceUrl = api?.services?.projects || api?.gatewayUrl;
@@ -4850,7 +4906,7 @@ function CommentThread({
       /* @__PURE__ */ jsx("p", { className: "text-[11px] text-theme-muted mt-0.5", children: "Seja o primeiro a comentar." })
     ] }),
     !loading && visibleComments.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-      visibleComments.map((comment) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+      visibleComments.map((comment) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
         /* @__PURE__ */ jsx(
           CommentItem,
           {
@@ -4939,11 +4995,11 @@ function LabelPicker({
   trigger,
   disabled = false
 }) {
-  const [open, setOpen] = React4.useState(false);
-  const [search, setSearch] = React4.useState("");
-  const [isCreating, setIsCreating] = React4.useState(false);
-  const [newLabelName, setNewLabelName] = React4.useState("");
-  const [newLabelColor, setNewLabelColor] = React4.useState(presetColors[8]);
+  const [open, setOpen] = React5.useState(false);
+  const [search, setSearch] = React5.useState("");
+  const [isCreating, setIsCreating] = React5.useState(false);
+  const [newLabelName, setNewLabelName] = React5.useState("");
+  const [newLabelColor, setNewLabelColor] = React5.useState(presetColors[8]);
   const selectedIds = new Set(selectedLabels.map((l) => l.id));
   const filteredLabels = availableLabels.filter(
     (label) => label.name.toLowerCase().includes(search.toLowerCase())
@@ -5098,8 +5154,8 @@ function AssigneePicker({
   disabled = false,
   maxAssignees
 }) {
-  const [open, setOpen] = React4.useState(false);
-  const [search, setSearch] = React4.useState("");
+  const [open, setOpen] = React5.useState(false);
+  const [search, setSearch] = React5.useState("");
   const selectedIds = new Set(selectedAssignees.map((a) => a.id));
   const canAddMore = maxAssignees ? selectedAssignees.length < maxAssignees : true;
   const filteredUsers = availableUsers.filter(
@@ -5184,8 +5240,8 @@ var statusColors = {
   DONE: "bg-emerald-500/15 text-emerald-400 border-emerald-500/30"
 };
 function useMediaQuery2(query) {
-  const [matches, setMatches] = React4.useState(false);
-  React4.useEffect(() => {
+  const [matches, setMatches] = React5.useState(false);
+  React5.useEffect(() => {
     const mql = window.matchMedia(query);
     setMatches(mql.matches);
     const handler = (e) => setMatches(e.matches);
@@ -5202,13 +5258,13 @@ function EditableField({
   inputClassName,
   as: Tag = "span"
 }) {
-  const [editing, setEditing] = React4.useState(false);
-  const [localValue, setLocalValue] = React4.useState(value);
-  const inputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [editing, setEditing] = React5.useState(false);
+  const [localValue, setLocalValue] = React5.useState(value);
+  const inputRef = React5.useRef(null);
+  React5.useEffect(() => {
     setLocalValue(value);
   }, [value]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -5262,9 +5318,9 @@ function EditableField({
   );
 }
 function EditableDate({ value, onSave, placeholder = "Adicionar data" }) {
-  const [editing, setEditing] = React4.useState(false);
-  const inputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [editing, setEditing] = React5.useState(false);
+  const inputRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
     }
@@ -5348,13 +5404,13 @@ function AssigneeItem({ assignee, onRemove, showDelete = true }) {
   ] });
 }
 function SubtaskItem({ subtask, onToggle, onDelete, onUpdate }) {
-  const [editing, setEditing] = React4.useState(false);
-  const [localTitle, setLocalTitle] = React4.useState(subtask.title);
-  const inputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [editing, setEditing] = React5.useState(false);
+  const [localTitle, setLocalTitle] = React5.useState(subtask.title);
+  const inputRef = React5.useRef(null);
+  React5.useEffect(() => {
     setLocalTitle(subtask.title);
   }, [subtask.title]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -5428,10 +5484,10 @@ function SubtaskItem({ subtask, onToggle, onDelete, onUpdate }) {
   ] });
 }
 function SubtaskAddForm({ onAdd }) {
-  const [adding, setAdding] = React4.useState(false);
-  const [title, setTitle] = React4.useState("");
-  const inputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [adding, setAdding] = React5.useState(false);
+  const [title, setTitle] = React5.useState("");
+  const inputRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (adding && inputRef.current) {
       inputRef.current.focus();
     }
@@ -5519,7 +5575,7 @@ function SubtaskSection({
   onDelete,
   onUpdate
 }) {
-  const [loading, setLoading] = React4.useState(null);
+  const [loading, setLoading] = React5.useState(null);
   const handleAdd = async (title) => {
     if (onAdd) {
       setLoading("add");
@@ -5977,7 +6033,7 @@ function TaskCard({
   className,
   ...props
 }) {
-  const [sheetOpen, setSheetOpen] = React4.useState(false);
+  const [sheetOpen, setSheetOpen] = React5.useState(false);
   if (!task) {
     return /* @__PURE__ */ jsx(TaskCardSkeleton, { compact, className });
   }
@@ -6416,8 +6472,33 @@ function TaskCard2({
   isDragging,
   externalDnD,
   onDragStart,
-  onDragEnd
+  onDragEnd,
+  onTouchDragStart
 }) {
+  const touchTimerRef = React5.useRef(null);
+  const hasMoved = React5.useRef(false);
+  const handleTouchStart = (e) => {
+    hasMoved.current = false;
+    touchTimerRef.current = setTimeout(() => {
+      if (!hasMoved.current) {
+        onTouchDragStart?.(task, columnId);
+        if (navigator.vibrate) navigator.vibrate(50);
+      }
+    }, 300);
+  };
+  const handleTouchMove = () => {
+    hasMoved.current = true;
+    if (touchTimerRef.current) {
+      clearTimeout(touchTimerRef.current);
+      touchTimerRef.current = null;
+    }
+  };
+  const handleTouchEnd = () => {
+    if (touchTimerRef.current) {
+      clearTimeout(touchTimerRef.current);
+      touchTimerRef.current = null;
+    }
+  };
   const displayLabels = (task.labels || []).map(
     (label) => typeof label === "string" ? label : label.name
   );
@@ -6428,14 +6509,18 @@ function TaskCard2({
       onDragStart: !externalDnD ? (e) => onDragStart?.(e, task, columnId) : void 0,
       onDragEnd: !externalDnD ? onDragEnd : void 0,
       onClick,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
       "data-task-id": task.id,
       "data-column-id": columnId,
       "data-index": index,
       className: cn(
-        "group relative flex flex-col gap-2 p-3 cursor-pointer",
+        "group relative flex flex-col gap-2 p-3 cursor-pointer select-none",
         "bg-theme-subtle backdrop-blur-md border border-theme-subtle",
         "transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)] rounded-xl",
         "hover:border-primary-light/30",
+        "active:scale-[0.98]",
         isDragging && "opacity-50 scale-95"
       ),
       children: [
@@ -6447,7 +6532,7 @@ function TaskCard2({
             children: /* @__PURE__ */ jsx(GripVertical, { className: "w-4 h-4" })
           }
         ),
-        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-theme pr-6", children: task.title }),
+        /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-theme pr-6 line-clamp-2", children: task.title }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
           task.priority && /* @__PURE__ */ jsx(
             Badge,
@@ -6488,18 +6573,19 @@ function Column({
   onDragEnd,
   onDragOver,
   onDrop,
-  isDropTarget
+  isDropTarget,
+  onTouchDragStart
 }) {
-  const [isRenaming, setIsRenaming] = React4.useState(false);
-  const [renameValue, setRenameValue] = React4.useState(column.title);
-  const renameInputRef = React4.useRef(null);
-  const [isAddingTask, setIsAddingTask] = React4.useState(false);
-  const [newTaskTitle, setNewTaskTitle] = React4.useState("");
-  const taskInputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [isRenaming, setIsRenaming] = React5.useState(false);
+  const [renameValue, setRenameValue] = React5.useState(column.title);
+  const renameInputRef = React5.useRef(null);
+  const [isAddingTask, setIsAddingTask] = React5.useState(false);
+  const [newTaskTitle, setNewTaskTitle] = React5.useState("");
+  const taskInputRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (isRenaming) renameInputRef.current?.focus();
   }, [isRenaming]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isAddingTask) taskInputRef.current?.focus();
   }, [isAddingTask]);
   const handleRenameSubmit = () => {
@@ -6543,9 +6629,10 @@ function Column({
       } : void 0,
       onDrop: !externalDnD ? (e) => onDrop?.(e, column.id) : void 0,
       className: cn(
-        "flex flex-col w-72 shrink-0 h-full",
+        "flex flex-col w-[280px] sm:w-72 shrink-0 max-h-[calc(100vh-10rem)]",
         "bg-theme-glass backdrop-blur-md border border-theme-subtle rounded-xl",
         "transition-all duration-[400ms] ease-[cubic-bezier(0.25,1,0.5,1)]",
+        "snap-start",
         isDropTarget && "border-primary-light/50 bg-primary/5"
       ),
       children: [
@@ -6581,16 +6668,30 @@ function Column({
               children: column.title
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsxs(
             Badge,
             {
-              variant: "default",
-              className: "bg-theme-highlight text-theme-muted border-theme-subtle text-xs shrink-0",
-              children: column.tasks.length
+              variant: column.wipLimit && column.tasks.length > column.wipLimit ? "error" : "default",
+              className: cn(
+                "text-xs",
+                column.wipLimit && column.tasks.length > column.wipLimit ? "bg-red-500/20 text-red-400 border-red-500/40 animate-pulse" : "bg-theme-highlight text-theme-muted border-theme-subtle"
+              ),
+              children: [
+                column.tasks.length,
+                column.wipLimit != null && /* @__PURE__ */ jsxs("span", { className: "text-theme-muted", children: [
+                  "/",
+                  column.wipLimit
+                ] })
+              ]
             }
-          )
+          ) })
+        ] }),
+        column.wipLimit != null && column.tasks.length > column.wipLimit && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 bg-red-500/10 border-b border-red-500/20 text-[10px] font-medium text-red-400 text-center", children: [
+          "\u26A0 WIP limit exceeded (",
+          column.tasks.length - column.wipLimit,
+          " over)"
         ] }),
-        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2", children: [
+        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0 [&_[data-radix-scroll-area-viewport]]:!overflow-y-auto [&_[data-radix-scroll-area-viewport]]:scrollbar-none", children: /* @__PURE__ */ jsxs("div", { className: "p-2 space-y-2", children: [
           column.tasks.map((task, index) => {
             const isDragging = draggedTask?.task.id === task.id;
             return /* @__PURE__ */ jsx(
@@ -6603,7 +6704,8 @@ function Column({
                 isDragging,
                 externalDnD,
                 onDragStart,
-                onDragEnd
+                onDragEnd,
+                onTouchDragStart
               },
               task.id
             );
@@ -6687,16 +6789,40 @@ function KanbanBoard({
   onAddSubtask,
   onToggleSubtask,
   onDeleteSubtask,
-  onUpdateSubtask
+  onUpdateSubtask,
+  onTaskClick
 }) {
-  const [draggedTask, setDraggedTask] = React4.useState(null);
-  const [dropTargetColumnId, setDropTargetColumnId] = React4.useState(null);
-  const [sheetOpen, setSheetOpen] = React4.useState(false);
-  const [selectedTask, setSelectedTask] = React4.useState(null);
-  const [isAddingColumn, setIsAddingColumn] = React4.useState(false);
-  const [newColumnTitle, setNewColumnTitle] = React4.useState("");
-  const addColumnInputRef = React4.useRef(null);
-  React4.useEffect(() => {
+  const [draggedTask, setDraggedTask] = React5.useState(null);
+  const [dropTargetColumnId, setDropTargetColumnId] = React5.useState(null);
+  const [touchDraggedTask, setTouchDraggedTask] = React5.useState(null);
+  const handleTouchDragStart = React5.useCallback((task, fromColumnId) => {
+    setTouchDraggedTask({ task, fromColumnId });
+  }, []);
+  const handleTouchDrop = React5.useCallback((toColumnId) => {
+    if (!touchDraggedTask) return;
+    const { task, fromColumnId } = touchDraggedTask;
+    if (fromColumnId !== toColumnId) {
+      onTaskMove?.(task.id, fromColumnId, toColumnId, 0);
+      if (onColumnChange) {
+        const newColumns = columns.map((col) => {
+          if (col.id === fromColumnId) return { ...col, tasks: col.tasks.filter((t) => t.id !== task.id) };
+          if (col.id === toColumnId) return { ...col, tasks: [...col.tasks, task] };
+          return col;
+        });
+        onColumnChange(newColumns);
+      }
+    }
+    setTouchDraggedTask(null);
+  }, [touchDraggedTask, columns, onTaskMove, onColumnChange]);
+  const cancelTouchDrag = React5.useCallback(() => setTouchDraggedTask(null), []);
+  const isTouchDragging = touchDraggedTask !== null;
+  const effectiveDraggedTask = draggedTask || touchDraggedTask;
+  const [sheetOpen, setSheetOpen] = React5.useState(false);
+  const [selectedTask, setSelectedTask] = React5.useState(null);
+  const [isAddingColumn, setIsAddingColumn] = React5.useState(false);
+  const [newColumnTitle, setNewColumnTitle] = React5.useState("");
+  const addColumnInputRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (isAddingColumn) addColumnInputRef.current?.focus();
   }, [isAddingColumn]);
   const handleAddColumnSubmit = () => {
@@ -6717,6 +6843,10 @@ function KanbanBoard({
     }
   };
   const handleTaskClick = (task, columnId) => {
+    if (onTaskClick) {
+      onTaskClick(task.id);
+      return;
+    }
     setSelectedTask({ task, columnId });
     setSheetOpen(true);
   };
@@ -6758,8 +6888,9 @@ function KanbanBoard({
       "div",
       {
         className: cn(
-          "flex gap-4 p-4 overflow-x-auto h-full min-h-[400px]",
-          "bg-void",
+          "flex gap-3 sm:gap-4 p-3 sm:p-4 overflow-x-auto h-full min-h-[400px]",
+          "bg-void snap-x snap-mandatory sm:snap-none",
+          "scrollbar-none",
           className
         ),
         children: [
@@ -6771,12 +6902,13 @@ function KanbanBoard({
               onAddTask,
               onRenameColumn,
               externalDnD,
-              draggedTask,
+              draggedTask: effectiveDraggedTask,
               onDragStart: handleDragStart,
               onDragEnd: handleDragEnd,
               onDragOver: handleDragOver,
               onDrop: handleDrop,
-              isDropTarget: dropTargetColumnId === column.id
+              isDropTarget: dropTargetColumnId === column.id,
+              onTouchDragStart: handleTouchDragStart
             },
             column.id
           )),
@@ -6837,6 +6969,35 @@ function KanbanBoard({
         ]
       }
     ),
+    isTouchDragging && /* @__PURE__ */ jsxs("div", { className: "fixed inset-x-0 bottom-0 z-50 flex gap-2 p-3 bg-void/90 backdrop-blur-xl border-t border-theme-subtle animate-in slide-in-from-bottom-4 duration-300 sm:hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto scrollbar-none flex gap-2", children: columns.filter((col) => col.id !== touchDraggedTask?.fromColumnId).map((col) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => handleTouchDrop(col.id),
+          className: cn(
+            "flex-shrink-0 flex items-center gap-2 px-4 py-3 rounded-xl",
+            "bg-theme-glass border border-theme-subtle",
+            "text-sm font-medium text-theme",
+            "active:bg-primary/20 active:border-primary-light/50",
+            "transition-all duration-200"
+          ),
+          children: [
+            col.color && /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: col.color } }),
+            col.title,
+            /* @__PURE__ */ jsx(Badge, { className: "text-[10px] bg-theme-highlight text-theme-muted border-theme-subtle", children: col.tasks.length })
+          ]
+        },
+        col.id
+      )) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: cancelTouchDrag,
+          className: "shrink-0 p-3 rounded-xl bg-rose-500/20 text-rose-400 border border-rose-500/30",
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       TaskDetailSheet,
       {
@@ -7025,7 +7186,7 @@ function PlanBadgeFull({
                   config.bgColor,
                   config.borderColor
                 ),
-                children: /* @__PURE__ */ jsx("span", { className: config.color, children: React4.cloneElement(config.icon, {
+                children: /* @__PURE__ */ jsx("span", { className: config.color, children: React5.cloneElement(config.icon, {
                   className: "w-5 h-5"
                 }) })
               }
@@ -7326,7 +7487,7 @@ function Checkbox({
     }
   );
 }
-var Switch = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitive.Root,
   {
     className: cn(
@@ -7744,11 +7905,11 @@ function CreateProjectDialog({
   const gql = useOrganifyGql();
   const { workspace } = useOrganifyWorkspace();
   const { navigate } = useOrganifyNavigation();
-  const [name, setName] = React4.useState("");
-  const [type, setType] = React4.useState("KANBAN");
-  const [error, setError] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [name, setName] = React5.useState("");
+  const [type, setType] = React5.useState("KANBAN");
+  const [error, setError] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  React5.useEffect(() => {
     if (open) {
       setName("");
       setType("KANBAN");
@@ -7864,10 +8025,10 @@ function CreateWorkspaceDialog({
 }) {
   const gql = useOrganifyGql();
   const { navigate } = useOrganifyNavigation();
-  const [name, setName] = React4.useState("");
-  const [error, setError] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [name, setName] = React5.useState("");
+  const [error, setError] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  React5.useEffect(() => {
     if (open) {
       setName("");
       setError("");
@@ -7957,13 +8118,13 @@ function CreateSprintDialog({
   const gql = useOrganifyGql();
   const { project } = useOrganifyProject();
   const effectiveProjectId = propProjectId ?? project?.id;
-  const [name, setName] = React4.useState("");
-  const [goal, setGoal] = React4.useState("");
-  const [startDate, setStartDate] = React4.useState("");
-  const [endDate, setEndDate] = React4.useState("");
-  const [error, setError] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [name, setName] = React5.useState("");
+  const [goal, setGoal] = React5.useState("");
+  const [startDate, setStartDate] = React5.useState("");
+  const [endDate, setEndDate] = React5.useState("");
+  const [error, setError] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  React5.useEffect(() => {
     if (open) {
       setName("");
       setGoal("");
@@ -8104,12 +8265,12 @@ function CreateEpicDialog({
   const gql = useOrganifyGql();
   const { project } = useOrganifyProject();
   const effectiveProjectId = propProjectId ?? project?.id;
-  const [name, setName] = React4.useState("");
-  const [description, setDescription] = React4.useState("");
-  const [color, setColor] = React4.useState(EPIC_COLORS[0]);
-  const [error, setError] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [name, setName] = React5.useState("");
+  const [description, setDescription] = React5.useState("");
+  const [color, setColor] = React5.useState(EPIC_COLORS[0]);
+  const [error, setError] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  React5.useEffect(() => {
     if (open) {
       setName("");
       setDescription("");
@@ -8245,11 +8406,11 @@ function CreateTaskDialog({
   const gql = useOrganifyGql();
   const projectCtx = useOrganifyProject();
   const projectId = projectIdProp ?? projectCtx?.project?.id;
-  const [title, setTitle] = React4.useState("");
-  const [priority, setPriority] = React4.useState("NONE");
-  const [error, setError] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [title, setTitle] = React5.useState("");
+  const [priority, setPriority] = React5.useState("NONE");
+  const [error, setError] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  React5.useEffect(() => {
     if (open) {
       setTitle("");
       setPriority("NONE");
@@ -8361,11 +8522,11 @@ function InviteMemberDialog({
   const gql = useOrganifyGql();
   const { workspace } = useOrganifyWorkspace();
   const effectiveWsId = propWorkspaceId ?? workspace?.id;
-  const [email, setEmail] = React4.useState("");
-  const [role, setRole] = React4.useState("MEMBER");
-  const [error, setError] = React4.useState("");
-  const [loading, setLoading] = React4.useState(false);
-  React4.useEffect(() => {
+  const [email, setEmail] = React5.useState("");
+  const [role, setRole] = React5.useState("MEMBER");
+  const [error, setError] = React5.useState("");
+  const [loading, setLoading] = React5.useState(false);
+  React5.useEffect(() => {
     if (open) {
       setEmail("");
       setRole("MEMBER");