organify-ui 0.2.0 → 0.2.1

package/dist/chunk-CK63AZ3Z.js

@@ -0,0 +1,2359 @@
+import { cn, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ScrollArea, Skeleton, Avatar, AvatarFallback, Badge, useOrganifyApi, useOrganifyUser, useOrganifyWorkspace } from './chunk-WQKUJRYK.js';
+import { OrgPlus, OrgSearch, OrgComment, OrgTeam, OrgGlobe, OrgLock, OrgCheckCircle, OrgError, OrgWarning, OrgInfo, OrgClose, OrgChevronDown, OrgChevronRight, OrgEdit, OrgDoor, OrgTrash, OrgChevronLeft } from './chunk-KGSUBEDA.js';
+import * as React5 from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ChevronDown, ChevronUp, Check, XIcon } from 'lucide-react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+var orgLoaderVariants = cva("relative inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      xs: "h-4 w-4",
+      sm: "h-6 w-6",
+      default: "h-10 w-10",
+      lg: "h-16 w-16",
+      xl: "h-24 w-24",
+      full: "h-32 w-32"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var diamondSizes = {
+  xs: 3,
+  sm: 4,
+  default: 6,
+  lg: 8,
+  xl: 10,
+  full: 14
+};
+var strokeWidths = {
+  xs: 1.5,
+  sm: 1.5,
+  default: 2,
+  lg: 2,
+  xl: 2.5,
+  full: 2.5
+};
+function OrgLoader({
+  size = "default",
+  caption,
+  overlay = false,
+  className,
+  ...props
+}) {
+  const s = size ?? "default";
+  const d = diamondSizes[s];
+  const sw = strokeWidths[s];
+  const loader = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-3",
+        overlay && "pointer-events-none",
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(orgLoaderVariants({ size })), children: /* @__PURE__ */ jsxs("svg", { className: "h-full w-full", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: "18",
+              className: "stroke-current opacity-10 dark:opacity-[0.08]",
+              strokeWidth: sw
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: "18",
+              stroke: "url(#org-loader-gradient)",
+              strokeWidth: sw,
+              strokeLinecap: "round",
+              strokeDasharray: "85 28.27",
+              className: "origin-center",
+              style: { animation: "org-loader-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }
+            }
+          ),
+          /* @__PURE__ */ jsx("g", { style: { animation: "org-loader-orbit 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }, className: "origin-center", children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 24 - d / 2,
+              y: 6 - d / 2,
+              width: d,
+              height: d,
+              rx: d * 0.15,
+              transform: `rotate(45 24 6)`,
+              fill: "url(#org-loader-diamond)",
+              className: "drop-shadow-[0_0_6px_rgba(79,57,246,0.5)]"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: "2",
+              className: "fill-current opacity-20",
+              style: { animation: "org-loader-pulse 1.4s ease-in-out infinite" }
+            }
+          ),
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("linearGradient", { id: "org-loader-gradient", x1: "6", y1: "6", x2: "42", y2: "42", gradientUnits: "userSpaceOnUse", children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#4F39F6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#5b42f2" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#241979" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: "org-loader-diamond", x1: "0", y1: "0", x2: "1", y2: "1", children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#4F39F6" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#241979" })
+            ] })
+          ] })
+        ] }) }),
+        caption && /* @__PURE__ */ jsx("span", { className: cn(
+          "font-mono uppercase tracking-widest text-current opacity-40",
+          s === "xs" || s === "sm" ? "text-[8px]" : "text-[10px]"
+        ), children: caption })
+      ]
+    }
+  );
+  if (overlay) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm dark:bg-black/60", children: loader });
+  }
+  return loader;
+}
+function OrgLoaderInline({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("h-4 w-4", className),
+      viewBox: "0 0 48 48",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "status",
+      "aria-label": "Loading",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "24", cy: "24", r: "18", className: "stroke-current opacity-10", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "24",
+            cy: "24",
+            r: "18",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeDasharray: "85 28.27",
+            className: "origin-center",
+            style: { animation: "org-loader-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { style: { animation: "org-loader-orbit 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite" }, className: "origin-center", children: /* @__PURE__ */ jsx("rect", { x: "21", y: "3", width: "6", height: "6", rx: "1", transform: "rotate(45 24 6)", fill: "currentColor" }) })
+      ]
+    }
+  );
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-wide uppercase transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-white hover:bg-primary-light shadow-glow-primary clip-geo",
+        secondary: "bg-transparent border border-white/20 text-white hover:text-white hover:border-primary-light hover:bg-white/5 clip-geo-inv",
+        ghost: "bg-transparent text-white/70 hover:bg-white/5 hover:text-white",
+        destructive: "bg-error text-white hover:bg-error/90 shadow-glow-error clip-geo",
+        outline: "bg-transparent border border-white/20 text-white hover:bg-white/5 hover:border-white/40",
+        link: "text-primary-light underline-offset-4 hover:underline",
+        // ─── Cream Light theme buttons ─────────────
+        cream: "bg-primary text-white hover:shadow-cream-glow hover:translate-y-[-1px] rounded-lg",
+        "cream-secondary": "bg-transparent border border-primary text-primary hover:bg-primary/[0.03] rounded-lg"
+      },
+      size: {
+        default: "px-8 py-3",
+        sm: "px-4 py-2 text-xs",
+        lg: "px-10 py-4 text-base",
+        icon: "h-10 w-10",
+        "icon-sm": "h-8 w-8",
+        "icon-lg": "h-12 w-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React5.forwardRef(
+  ({ className, variant, size, asChild = false, loading = false, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(OrgLoaderInline, { className: "shrink-0" }),
+          children
+        ] }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var inputVariants = cva(
+  "flex w-full bg-white/5 backdrop-blur-md border border-white/10 px-4 py-3 text-sm font-light text-white transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-white/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "clip-geo-br focus:ring-1 focus:ring-primary-light focus:border-primary-light/50",
+        flat: "rounded-none focus:ring-1 focus:ring-primary-light focus:border-primary-light/50",
+        rounded: "rounded-lg focus:ring-1 focus:ring-primary-light focus:border-primary-light/50",
+        error: "border-error/30 bg-error/5 text-red-100 placeholder:text-red-500/30 focus:border-error focus:ring-1 focus:ring-error/20 clip-geo-br",
+        // ─── Cream Light theme ─────────────────────
+        cream: "bg-white/40 border-black/5 text-neutral-900 placeholder:text-neutral-400 rounded-lg focus:border-primary focus:bg-white/80 focus:shadow-[0_0_0_1px_rgba(36,25,121,0.05)] backdrop-blur-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Input = React5.forwardRef(
+  ({ className, variant, type, label, error, labelPosition = "left", ...props }, ref) => {
+    const id = React5.useId();
+    const effectiveVariant = error ? "error" : variant;
+    return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "absolute -top-3 z-10 px-2 text-label uppercase tracking-widest",
+            effectiveVariant === "cream" ? "bg-cream-base" : "bg-surface",
+            labelPosition === "left" ? "left-0 ml-2" : "right-0 mr-2",
+            error ? "text-error" : "text-primary-light"
+          ),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type,
+          className: cn(inputVariants({ variant: effectiveVariant, className })),
+          ref,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${id}-error` : void 0,
+          ...props
+        }
+      ),
+      effectiveVariant !== "cream" && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 right-0 h-4 w-4 border-b border-r border-white/20" }),
+      error && /* @__PURE__ */ jsx("div", { id: `${id}-error`, className: "mt-2 flex items-center justify-end gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-mono-xs text-error", children: error }) })
+    ] });
+  }
+);
+Input.displayName = "Input";
+function getRoomIcon(room) {
+  if (room.type === "DIRECT") return /* @__PURE__ */ jsx(OrgComment, { className: "w-4 h-4" });
+  if (room.visibility === "PRIVATE") return /* @__PURE__ */ jsx(OrgLock, { className: "w-3.5 h-3.5" });
+  return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "#" });
+}
+function ChatSidebar({
+  rooms,
+  activeRoomId,
+  loading,
+  onSelectRoom,
+  onCreateRoom,
+  onMobileClose
+}) {
+  const [search, setSearch] = React5.useState("");
+  const [channelsOpen, setChannelsOpen] = React5.useState(true);
+  const [dmsOpen, setDmsOpen] = React5.useState(true);
+  const filtered = React5.useMemo(
+    () => search ? rooms.filter(
+      (r) => r.name?.toLowerCase().includes(search.toLowerCase()) || r.slug?.toLowerCase().includes(search.toLowerCase())
+    ) : rooms,
+    [rooms, search]
+  );
+  const channels = filtered.filter((r) => r.type === "CHANNEL");
+  const dms = filtered.filter((r) => r.type === "DIRECT");
+  const handleSelect = (roomId) => {
+    onSelectRoom(roomId);
+    onMobileClose?.();
+  };
+  const renderRoom = (room) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: () => handleSelect(room.id),
+      className: cn(
+        "flex items-center gap-2.5 w-full px-2.5 py-2 rounded-md text-left text-sm transition-all duration-150",
+        "active:scale-[0.98]",
+        room.id === activeRoomId ? "bg-primary/12 text-primary-light" : "text-white/70 hover:bg-white/4 hover:text-white"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center h-7 w-7 rounded-md text-sm shrink-0",
+              room.id === activeRoomId ? "bg-primary/20 text-primary-light" : "bg-white/8 text-white/50"
+            ),
+            children: getRoomIcon(room)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-[13px] truncate", children: room.name || "Sem nome" }) }),
+        room.unreadCount > 0 && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "primary",
+            className: "text-[10px] px-1.5 py-0 min-w-[18px] h-[18px] flex items-center justify-center rounded-full animate-in zoom-in-50 duration-200",
+            children: room.unreadCount > 99 ? "99+" : room.unreadCount
+          }
+        )
+      ]
+    },
+    room.id
+  );
+  const renderSection = (title, items, isOpen, toggle) => /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: toggle,
+        className: "flex items-center gap-1 w-full px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wider text-white/30 hover:text-white/50 transition-colors",
+        children: [
+          isOpen ? /* @__PURE__ */ jsx(OrgChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ jsx(OrgChevronRight, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsx("span", { children: title }),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] font-normal", children: items.length })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "space-y-0.5 animate-in fade-in-0 slide-in-from-top-1 duration-200", children: items.map(renderRoom) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full border-r border-white/8 bg-surface", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-white/8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white", children: "Chat" }),
+      /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onCreateRoom,
+            className: "h-7 w-7 p-0 text-white/50 hover:text-primary-light hover:bg-primary/10 transition-colors",
+            children: /* @__PURE__ */ jsx(OrgPlus, { className: "w-4 h-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Nova conversa" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(OrgSearch, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/25" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          variant: "flat",
+          placeholder: "Pesquisar...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: "h-8 text-xs bg-white/5 border-white/8 rounded-md pl-8"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: loading ? /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", className: "h-7 w-7 shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1.5", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }) })
+    ] }, i)) }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-white/30", children: [
+      /* @__PURE__ */ jsx(OrgSearch, { className: "w-6 h-6 mb-2 opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: search ? "Sem resultados" : "Sem conversas" }),
+      !search && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCreateRoom,
+          className: "mt-3 text-xs text-primary-light/70 hover:text-primary-light transition-colors",
+          children: "Criar primeira conversa \u2192"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      channels.length > 0 && renderSection("Canais", channels, channelsOpen, () => setChannelsOpen(!channelsOpen)),
+      dms.length > 0 && renderSection("Mensagens Diretas", dms, dmsOpen, () => setDmsOpen(!dmsOpen))
+    ] }) }) })
+  ] });
+}
+function formatTime(iso) {
+  return new Date(iso).toLocaleTimeString("pt-BR", {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function formatDateSeparator(iso) {
+  const date = new Date(iso);
+  const today = /* @__PURE__ */ new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (date.toDateString() === today.toDateString()) return "Hoje";
+  if (date.toDateString() === yesterday.toDateString()) return "Ontem";
+  return date.toLocaleDateString("pt-BR", { day: "numeric", month: "long" });
+}
+function getInitials(name) {
+  if (!name) return "??";
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function groupReactions(reactions) {
+  const map = /* @__PURE__ */ new Map();
+  reactions.forEach((r) => map.set(r.emoji, (map.get(r.emoji) || 0) + 1));
+  return Array.from(map.entries());
+}
+function shouldShowDateSeparator(messages, index) {
+  if (index === 0) return true;
+  const curr = new Date(messages[index].createdAt).toDateString();
+  const prev = new Date(messages[index - 1].createdAt).toDateString();
+  return curr !== prev;
+}
+function MessageItem({ msg }) {
+  const isPending = msg._status === "pending";
+  const isError = msg._status === "error";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group flex gap-3 px-2 py-1.5 rounded-md transition-colors hover:bg-white/[0.03]",
+        isPending && "opacity-60",
+        isError && "border-l-2 border-rose-500/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "mt-0.5 shrink-0", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs font-semibold", children: getInitials(msg.authorName || msg.authorId) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 mb-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-white", children: msg.authorName || msg.authorId.substring(0, 8) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/30", children: formatTime(msg.createdAt) }),
+            msg.edited && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/25 italic", children: "(editado)" }),
+            isPending && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/25 italic", children: "enviando..." }),
+            isError && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-rose-400", children: "erro ao enviar \u2014 clique para reenviar" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-[13px] text-white/80 leading-relaxed break-words whitespace-pre-wrap", children: msg.content }),
+          msg.reactions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-1", children: groupReactions(msg.reactions).map(([emoji, count]) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs bg-white/5 border border-white/8 hover:bg-primary/10 transition-colors", children: [
+              /* @__PURE__ */ jsx("span", { children: emoji }),
+              /* @__PURE__ */ jsx("span", { className: "text-white/50", children: count })
+            ] }) }),
+            /* @__PURE__ */ jsxs(TooltipContent, { children: [
+              emoji,
+              " \u2014 ",
+              count,
+              " rea\xE7\xE3o",
+              count > 1 ? "\xF5es" : ""
+            ] })
+          ] }) }, emoji)) })
+        ] })
+      ]
+    }
+  );
+}
+function TypingIndicator({ users }) {
+  if (users.length === 0) return null;
+  const text = users.length === 1 ? `${users[0].substring(0, 8)} est\xE1 digitando` : users.length === 2 ? `${users[0].substring(0, 8)} e ${users[1].substring(0, 8)} est\xE3o digitando` : `${users.length} pessoas est\xE3o digitando`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-5 py-1 animate-in fade-in-0 duration-200", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "w-1.5 h-1.5 rounded-full bg-primary-light/50 animate-bounce",
+        style: { animationDelay: `${i * 150}ms` }
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/30", children: text })
+  ] });
+}
+function ChatMessages({
+  room,
+  messages,
+  loading,
+  typingUsers = [],
+  currentUserId,
+  permissions,
+  onSendMessage,
+  onTyping,
+  onStopTyping,
+  onOpenManagement,
+  onBack,
+  isMobile
+}) {
+  const [inputValue, setInputValue] = React5.useState("");
+  const scrollRef = React5.useRef(null);
+  React5.useEffect(() => {
+    requestAnimationFrame(() => {
+      const el = scrollRef.current;
+      if (el) el.scrollTop = el.scrollHeight;
+    });
+  }, [messages]);
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+    onSendMessage(inputValue);
+    setInputValue("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    onTyping?.();
+  };
+  if (!room) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center text-center px-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(OrgComment, { className: "w-8 h-8 text-primary-light/60" }) }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-white mb-2", children: "Selecione uma conversa" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40 max-w-[240px]", children: "Escolha um canal ou mensagem direta para come\xE7ar a conversar." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full overflow-hidden relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 md:px-5 py-3 border-b border-white/8", children: [
+      isMobile && onBack && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onBack,
+          className: "p-1.5 rounded-md text-white/50 hover:text-white hover:bg-white/5 transition-colors",
+          children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "flex items-center justify-center h-8 w-8 rounded-md text-sm",
+            "bg-primary/15 text-primary-light"
+          ),
+          children: room.type === "DIRECT" ? /* @__PURE__ */ jsx(OrgComment, { className: "w-4 h-4" }) : "#"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-[15px] font-semibold text-white truncate", children: room.name || "Sem nome" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-white/30 truncate", children: [
+          room.memberCount,
+          " membro",
+          room.memberCount !== 1 ? "s" : ""
+        ] })
+      ] }),
+      onOpenManagement && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: onOpenManagement,
+            className: "h-8 w-8 p-0 text-white/40 hover:text-white",
+            children: /* @__PURE__ */ jsx(OrgTeam, { className: "w-4 h-4" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: "Detalhes do canal" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollRef,
+        className: "flex-1 overflow-y-auto px-3 md:px-5 py-4 space-y-0.5",
+        children: loading ? /* @__PURE__ */ jsx("div", { className: "space-y-4 py-4", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8 shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-32" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-3/4" })
+          ] })
+        ] }, i)) }) : messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(OrgComment, { className: "w-6 h-6 text-primary-light/50" }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-white/40", children: "Ainda sem mensagens." }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-white/25 mt-1", children: "Comece a conversa!" })
+        ] }) : messages.map((msg, idx) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+          shouldShowDateSeparator(messages, idx) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-white/8" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-white/25 font-medium", children: formatDateSeparator(msg.createdAt) }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-white/8" })
+          ] }),
+          /* @__PURE__ */ jsx(MessageItem, { msg })
+        ] }, msg.id))
+      }
+    ),
+    /* @__PURE__ */ jsx(TypingIndicator, { users: typingUsers }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 md:px-5 py-3 border-t border-white/8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 bg-white/5 border border-white/8 rounded-lg px-3 py-2 focus-within:border-primary/50 transition-colors", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: inputValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          placeholder: "Escreva uma mensagem...",
+          autoComplete: "off",
+          className: "flex-1 bg-transparent border-none outline-none text-[13px] text-white placeholder:text-white/25"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "default",
+          size: "sm",
+          onClick: handleSend,
+          disabled: !inputValue.trim(),
+          className: "h-7 px-3 text-xs",
+          children: "Enviar"
+        }
+      )
+    ] }) })
+  ] });
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      "data-slot": "label",
+      className: cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none text-foreground dark:text-white",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+var Tabs = TabsPrimitive.Root;
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function getInitials2(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function CreateRoomDialog({
+  open,
+  onOpenChange,
+  onCreateChannel,
+  onCreateDM,
+  workspaceMembers,
+  loadingMembers
+}) {
+  const [tab, setTab] = React5.useState("channel");
+  const [creating, setCreating] = React5.useState(false);
+  const [channelName, setChannelName] = React5.useState("");
+  const [channelDesc, setChannelDesc] = React5.useState("");
+  const [visibility, setVisibility] = React5.useState("WORKSPACE");
+  const [selectedMembers, setSelectedMembers] = React5.useState([]);
+  const [showAdvanced, setShowAdvanced] = React5.useState(false);
+  const [dmSearch, setDmSearch] = React5.useState("");
+  const [nameError, setNameError] = React5.useState("");
+  const validateName = (value) => {
+    if (!value.trim()) {
+      setNameError("Nome do canal \xE9 obrigat\xF3rio");
+      return false;
+    }
+    if (value.length < 2) {
+      setNameError("Nome deve ter pelo menos 2 caracteres");
+      return false;
+    }
+    if (!/^[a-zA-Z0-9À-ÿ\s\-_]+$/.test(value)) {
+      setNameError("Apenas letras, n\xFAmeros, espa\xE7os e h\xEDfens");
+      return false;
+    }
+    setNameError("");
+    return true;
+  };
+  const filteredMembers = React5.useMemo(() => {
+    if (!dmSearch) return workspaceMembers;
+    const q = dmSearch.toLowerCase();
+    return workspaceMembers.filter(
+      (m) => m.displayName.toLowerCase().includes(q) || m.email?.toLowerCase().includes(q)
+    );
+  }, [workspaceMembers, dmSearch]);
+  const handleCreateChannel = async () => {
+    if (!validateName(channelName)) return;
+    setCreating(true);
+    try {
+      const result = await onCreateChannel({
+        name: channelName.trim(),
+        description: channelDesc.trim() || void 0,
+        visibility,
+        memberIds: selectedMembers
+      });
+      if (result) {
+        resetForm();
+        onOpenChange(false);
+      }
+    } finally {
+      setCreating(false);
+    }
+  };
+  const handleCreateDM = async (userId) => {
+    setCreating(true);
+    try {
+      const result = await onCreateDM(userId);
+      if (result) {
+        resetForm();
+        onOpenChange(false);
+      }
+    } finally {
+      setCreating(false);
+    }
+  };
+  const toggleMember = (userId) => {
+    setSelectedMembers(
+      (prev) => prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]
+    );
+  };
+  const resetForm = () => {
+    setChannelName("");
+    setChannelDesc("");
+    setVisibility("WORKSPACE");
+    setSelectedMembers([]);
+    setShowAdvanced(false);
+    setDmSearch("");
+    setNameError("");
+    setTab("channel");
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md bg-surface border-white/10", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "text-white", children: "Nova conversa" }),
+      /* @__PURE__ */ jsx(DialogDescription, { className: "text-white/50", children: "Crie um canal para a equipa ou inicie uma conversa direta." })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), children: [
+      /* @__PURE__ */ jsxs(TabsList, { className: "grid w-full grid-cols-2 bg-white/5", children: [
+        /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "channel",
+            className: "text-xs data-[state=active]:bg-primary/20 data-[state=active]:text-primary-light",
+            children: [
+              /* @__PURE__ */ jsx(OrgTeam, { className: "w-3.5 h-3.5 mr-1.5" }),
+              "Canal"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          TabsTrigger,
+          {
+            value: "dm",
+            className: "text-xs data-[state=active]:bg-primary/20 data-[state=active]:text-primary-light",
+            children: [
+              /* @__PURE__ */ jsx(OrgComment, { className: "w-3.5 h-3.5 mr-1.5" }),
+              "Mensagem Direta"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "channel", className: "space-y-4 mt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-white/70 text-xs", children: "Nome do canal" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              variant: "flat",
+              placeholder: "ex: equipa-design",
+              value: channelName,
+              onChange: (e) => {
+                setChannelName(e.target.value);
+                if (nameError) validateName(e.target.value);
+              },
+              onBlur: () => channelName && validateName(channelName),
+              className: cn(
+                "h-9 text-sm bg-white/5 border-white/8",
+                nameError && "border-rose-500/50 focus:border-rose-500"
+              ),
+              autoFocus: true
+            }
+          ),
+          nameError && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-rose-400 animate-in fade-in-0 slide-in-from-top-1 duration-200", children: nameError })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setVisibility("WORKSPACE"),
+              className: cn(
+                "flex-1 flex items-center gap-2 px-3 py-2 rounded-md text-xs transition-all duration-200 border",
+                visibility === "WORKSPACE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-white/3 border-white/8 text-white/50 hover:bg-white/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(OrgGlobe, { className: "w-3.5 h-3.5" }),
+                "P\xFAblico"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setVisibility("PRIVATE"),
+              className: cn(
+                "flex-1 flex items-center gap-2 px-3 py-2 rounded-md text-xs transition-all duration-200 border",
+                visibility === "PRIVATE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-white/3 border-white/8 text-white/50 hover:bg-white/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(OrgLock, { className: "w-3.5 h-3.5" }),
+                "Privado"
+              ]
+            }
+          )
+        ] }),
+        !showAdvanced ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowAdvanced(true),
+            className: "text-xs text-primary-light/70 hover:text-primary-light transition-colors",
+            children: "+ Adicionar descri\xE7\xE3o e membros"
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "space-y-4 animate-in fade-in-0 slide-in-from-top-2 duration-300", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Label, { className: "text-white/70 text-xs", children: "Descri\xE7\xE3o (opcional)" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                placeholder: "Sobre o que \xE9 este canal...",
+                value: channelDesc,
+                onChange: (e) => setChannelDesc(e.target.value),
+                className: "min-h-[60px] text-sm bg-white/5 border-white/8 text-white"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxs(Label, { className: "text-white/70 text-xs", children: [
+              "Adicionar membros (",
+              selectedMembers.length,
+              " selecionados)"
+            ] }),
+            /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[150px] rounded-md border border-white/8 bg-white/3", children: /* @__PURE__ */ jsx("div", { className: "p-2 space-y-0.5", children: loadingMembers ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-7 w-7" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+            ] }, i)) : workspaceMembers.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-white/30 p-2 text-center", children: "Sem membros dispon\xEDveis" }) : workspaceMembers.map((member) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleMember(member.id),
+                className: cn(
+                  "flex items-center gap-2 w-full p-2 rounded-md text-left text-xs transition-colors",
+                  selectedMembers.includes(member.id) ? "bg-primary/15 text-primary-light" : "text-white/70 hover:bg-white/5"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-[10px]", children: getInitials2(member.displayName) }) }),
+                  /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: member.displayName }),
+                  selectedMembers.includes(member.id) && /* @__PURE__ */ jsx(Badge, { variant: "primary", className: "text-[9px] px-1 py-0 h-4", children: "\u2713" })
+                ]
+              },
+              member.id
+            )) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => onOpenChange(false),
+              className: "text-xs text-white/50",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "default",
+              size: "sm",
+              onClick: handleCreateChannel,
+              disabled: !channelName.trim() || creating,
+              className: "text-xs",
+              children: creating ? "Criando..." : "Criar Canal"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "dm", className: "space-y-3 mt-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(OrgSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/30" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              variant: "flat",
+              placeholder: "Pesquisar membro...",
+              value: dmSearch,
+              onChange: (e) => setDmSearch(e.target.value),
+              className: "h-9 text-sm bg-white/5 border-white/8 pl-9",
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[280px]", children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: loadingMembers ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-28" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-20" })
+          ] })
+        ] }, i)) : filteredMembers.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8 text-white/30", children: [
+          /* @__PURE__ */ jsx(OrgSearch, { className: "w-8 h-8 mb-2 opacity-50" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs", children: dmSearch ? "Nenhum membro encontrado" : "Sem membros no workspace" })
+        ] }) : filteredMembers.map((member) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handleCreateDM(member.id),
+            disabled: creating,
+            className: "flex items-center gap-3 w-full p-2.5 rounded-md text-left transition-all duration-200 hover:bg-white/5 active:scale-[0.98] disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs", children: getInitials2(member.displayName) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-white truncate", children: member.displayName }),
+                member.email && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-white/30 truncate", children: member.email })
+              ] }),
+              member.status && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "w-2 h-2 rounded-full flex-shrink-0",
+                    member.status === "ONLINE" && "bg-emerald-400 animate-pulse",
+                    member.status === "AWAY" && "bg-amber-400",
+                    member.status === "BUSY" && "bg-rose-400",
+                    member.status === "OFFLINE" && "bg-white/20"
+                  )
+                }
+              )
+            ]
+          },
+          member.id
+        )) }) })
+      ] })
+    ] })
+  ] }) });
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React5.forwardRef(({ className, children, label, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+  label && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 right-0 z-10 mr-2 bg-card-surface px-2 text-label uppercase tracking-widest text-white/40", children: label }),
+  /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "flex w-full items-center justify-between bg-white/5 backdrop-blur-md border border-white/10 px-4 py-3 text-sm font-light text-white/80 transition-all clip-geo-br focus:outline-none focus:ring-1 focus:ring-primary-light/50 focus:border-primary-light/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-primary-light opacity-60" }) })
+      ]
+    }
+  )
+] }));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-white/40" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-white/40" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "glass-panel relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-none border border-white/10 bg-card-surface/95 backdrop-blur-2xl text-white shadow-glass-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center py-2 pl-8 pr-2 text-sm font-light text-white/80 outline-none transition-colors focus:bg-white/5 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary-light" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-white/5", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("py-1.5 pl-8 pr-2 text-label uppercase tracking-widest text-white/30", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+function getInitials3(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+var roleBadgeColors = {
+  OWNER: "bg-amber-500/15 text-amber-300 border-amber-500/30",
+  ADMIN: "bg-blue-500/15 text-blue-300 border-blue-500/30",
+  MEMBER: "bg-white/5 text-white/40 border-white/10"
+};
+var roleLabels = {
+  OWNER: "Dono",
+  ADMIN: "Admin",
+  MEMBER: "Membro"
+};
+function RoomManagementPanel({
+  room,
+  members,
+  permissions,
+  currentUserId,
+  loading,
+  onClose,
+  onUpdateRoom,
+  onArchiveRoom,
+  onLeaveRoom,
+  onRemoveMember,
+  onUpdateMemberRole,
+  className
+}) {
+  const [view, setView] = React5.useState("info");
+  const [editName, setEditName] = React5.useState(room.name || "");
+  const [editDesc, setEditDesc] = React5.useState(room.description || "");
+  const [editVisibility, setEditVisibility] = React5.useState(room.visibility);
+  const [saving, setSaving] = React5.useState(false);
+  const [confirmArchive, setConfirmArchive] = React5.useState(false);
+  React5.useEffect(() => {
+    setEditName(room.name || "");
+    setEditDesc(room.description || "");
+    setEditVisibility(room.visibility);
+  }, [room]);
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await onUpdateRoom(room.id, {
+        name: editName.trim(),
+        description: editDesc.trim() || void 0,
+        visibility: editVisibility
+      });
+      setView("info");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const renderHeader = (title, showBack) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-white/8", children: [
+    showBack && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setView("info"),
+        className: "p-1 rounded-md hover:bg-white/5 text-white/50 hover:text-white transition-colors",
+        children: /* @__PURE__ */ jsx(OrgChevronLeft, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx("h3", { className: "flex-1 text-sm font-semibold text-white", children: title }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onClose,
+        className: "p-1 rounded-md hover:bg-white/5 text-white/40 hover:text-white transition-colors",
+        children: /* @__PURE__ */ jsx(OrgClose, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+  const renderInfo = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader(room.name || "Detalhes"),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center h-12 w-12 rounded-lg text-lg",
+              "bg-primary/15 text-primary-light"
+            ),
+            children: room.type === "DIRECT" ? "\u{1F4AC}" : "#"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-[15px] font-semibold text-white", children: room.name || "Sem nome" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "default",
+                className: "text-[10px] px-1.5 py-0 h-4 border-white/10 text-white/40",
+                children: room.type === "DIRECT" ? "DM" : room.visibility === "PRIVATE" ? "\u{1F512} Privado" : "\u{1F310} P\xFAblico"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-white/30", children: [
+              room.memberCount,
+              " membros"
+            ] })
+          ] })
+        ] })
+      ] }),
+      room.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-white/50 leading-relaxed", children: room.description }),
+      /* @__PURE__ */ jsx(Separator, { className: "bg-white/8" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setView("members"),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-md text-sm text-white/70 hover:bg-white/5 hover:text-white transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgTeam, { className: "w-4 h-4 text-white/40" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Membros" }),
+              /* @__PURE__ */ jsx(Badge, { variant: "default", className: "text-[10px] px-1.5 py-0 h-4 border-white/10 text-white/40", children: members.length })
+            ]
+          }
+        ),
+        permissions.canEditRoomSettings && room.type !== "DIRECT" && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setView("edit"),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-md text-sm text-white/70 hover:bg-white/5 hover:text-white transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgEdit, { className: "w-4 h-4 text-white/40" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Editar canal" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, { className: "bg-white/8 my-2" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onLeaveRoom(room.id),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-md text-sm text-white/50 hover:bg-rose-500/10 hover:text-rose-400 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgDoor, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Sair do canal" })
+            ]
+          }
+        ),
+        permissions.canArchiveRoom && /* @__PURE__ */ jsx(Fragment, { children: !confirmArchive ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setConfirmArchive(true),
+            className: "flex items-center gap-3 w-full px-3 py-2.5 rounded-md text-sm text-white/50 hover:bg-rose-500/10 hover:text-rose-400 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(OrgTrash, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: "Arquivar canal" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-rose-500/10 border border-rose-500/20 animate-in fade-in-0 duration-200", children: [
+          /* @__PURE__ */ jsx("p", { className: "flex-1 text-xs text-rose-300", children: "Tem certeza?" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setConfirmArchive(false),
+              className: "h-6 px-2 text-[10px] text-white/50",
+              children: "N\xE3o"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              size: "sm",
+              onClick: () => onArchiveRoom(room.id),
+              className: "h-6 px-2 text-[10px]",
+              children: "Sim, arquivar"
+            }
+          )
+        ] }) })
+      ] })
+    ] })
+  ] });
+  const renderMembers = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader("Membros", true),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-3 space-y-0.5", children: loading ? Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "circular", className: "h-8 w-8" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-2 w-16" })
+      ] })
+    ] }, i)) : members.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-white/30 text-center py-8", children: "Sem membros" }) : members.map((member) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-3 p-2 rounded-md hover:bg-white/3 group transition-colors",
+        children: [
+          /* @__PURE__ */ jsx(Avatar, { shape: "circle", size: "sm", className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-primary/20 text-primary-light text-xs", children: getInitials3(member.displayName) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-white truncate", children: member.displayName }),
+              member.userId === currentUserId && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/30", children: "(voc\xEA)" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "default",
+                className: cn(
+                  "text-[9px] px-1 py-0 h-3.5 border mt-0.5",
+                  roleBadgeColors[member.role]
+                ),
+                children: roleLabels[member.role]
+              }
+            )
+          ] }),
+          permissions.canManageMembers && member.userId !== currentUserId && member.role !== "OWNER" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: member.role,
+                onValueChange: (val) => onUpdateMemberRole(room.id, member.userId, val),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "h-6 w-20 text-[10px] bg-white/5 border-white/10", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsx(SelectItem, { value: "ADMIN", children: "Admin" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "MEMBER", children: "Membro" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: () => onRemoveMember(room.id, member.userId),
+                className: "h-6 w-6 p-0 text-white/30 hover:text-rose-400 hover:bg-rose-500/10",
+                children: /* @__PURE__ */ jsx(OrgClose, { className: "w-3 h-3" })
+              }
+            )
+          ] })
+        ]
+      },
+      member.id
+    )) }) })
+  ] });
+  const renderEdit = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderHeader("Editar canal", true),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-white/70 text-xs", children: "Nome" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            variant: "flat",
+            value: editName,
+            onChange: (e) => setEditName(e.target.value),
+            className: "h-9 text-sm bg-white/5 border-white/8"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-white/70 text-xs", children: "Descri\xE7\xE3o" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: editDesc,
+            onChange: (e) => setEditDesc(e.target.value),
+            className: "min-h-[60px] text-sm bg-white/5 border-white/8 text-white",
+            placeholder: "Descri\xE7\xE3o do canal..."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-white/70 text-xs", children: "Visibilidade" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setEditVisibility("WORKSPACE"),
+              className: cn(
+                "flex-1 flex items-center gap-2 px-3 py-2 rounded-md text-xs transition-all duration-200 border",
+                editVisibility === "WORKSPACE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-white/3 border-white/8 text-white/50 hover:bg-white/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(OrgGlobe, { className: "w-3.5 h-3.5" }),
+                "P\xFAblico"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setEditVisibility("PRIVATE"),
+              className: cn(
+                "flex-1 flex items-center gap-2 px-3 py-2 rounded-md text-xs transition-all duration-200 border",
+                editVisibility === "PRIVATE" ? "bg-primary/15 border-primary/30 text-primary-light" : "bg-white/3 border-white/8 text-white/50 hover:bg-white/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(OrgLock, { className: "w-3.5 h-3.5" }),
+                "Privado"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setView("info"),
+            className: "text-xs text-white/50",
+            children: "Cancelar"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "default",
+            size: "sm",
+            onClick: handleSave,
+            disabled: !editName.trim() || saving,
+            className: "text-xs",
+            children: saving ? "Salvando..." : "Salvar"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col h-full border-l border-white/8 bg-surface w-[280px] shrink-0",
+        "animate-in slide-in-from-right-5 duration-300",
+        className
+      ),
+      children: [
+        view === "info" && renderInfo(),
+        view === "members" && renderMembers(),
+        view === "edit" && renderEdit()
+      ]
+    }
+  );
+}
+
+// src/components/chat/types.ts
+function getRoomPermissions(role, isWorkspaceAdmin) {
+  const isOwnerOrAdmin = role === "OWNER" || role === "ADMIN" || isWorkspaceAdmin;
+  return {
+    canCreateChannel: true,
+    canCreateDM: true,
+    canDeleteRoom: role === "OWNER" || !!isWorkspaceAdmin,
+    canArchiveRoom: isOwnerOrAdmin ?? false,
+    canManageMembers: isOwnerOrAdmin ?? false,
+    canEditRoomSettings: isOwnerOrAdmin ?? false
+  };
+}
+
+// src/components/chat/use-chat.ts
+function useChat(options = {}) {
+  const {
+    workspaceRole,
+    initialRooms,
+    initialMessages
+  } = options;
+  const { gatewayUrl, authToken } = useOrganifyApi();
+  const user = useOrganifyUser();
+  const { workspace } = useOrganifyWorkspace();
+  const userId = user?.id ?? "";
+  const workspaceId = workspace?.id ?? "";
+  const [rooms, setRooms] = useState(initialRooms ?? []);
+  const [messages, setMessages] = useState(initialMessages ?? []);
+  const [activeRoomId, setActiveRoomId] = useState(null);
+  const [loadingRooms, setLoadingRooms] = useState(false);
+  const [loadingMessages, setLoadingMessages] = useState(false);
+  const [roomMembers, setRoomMembers] = useState([]);
+  const [myRoomRole, setMyRoomRole] = useState(null);
+  const [typingUsers, setTypingUsers] = useState([]);
+  const [error, setError] = useState(null);
+  const wsRef = useRef(null);
+  const typingTimerRef = useRef(void 0);
+  const isWorkspaceAdmin = workspaceRole === "OWNER" || workspaceRole === "ADMIN";
+  const permissions = getRoomPermissions(myRoomRole, isWorkspaceAdmin);
+  const gql = useCallback(
+    async (query, variables) => {
+      const res = await fetch(`${gatewayUrl}/graphql/chat`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...authToken && { Authorization: `Bearer ${authToken}` },
+          "x-user-id": userId
+        },
+        credentials: "include",
+        body: JSON.stringify({ query, variables })
+      });
+      const json = await res.json();
+      if (json.errors?.length) throw new Error(json.errors[0].message);
+      return json.data;
+    },
+    [gatewayUrl, userId, authToken]
+  );
+  const fetchRooms = useCallback(async () => {
+    if (initialRooms && initialRooms.length > 0) return;
+    if (!workspaceId) return;
+    setLoadingRooms(true);
+    setError(null);
+    try {
+      const data = await gql(
+        `query($workspaceId: String!) {
+          rooms(workspaceId: $workspaceId) {
+            items {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+            total hasMore
+          }
+        }`,
+        { workspaceId }
+      );
+      setRooms(data.rooms.items);
+    } catch (err) {
+      console.error("[organify-chat] fetchRooms:", err);
+      setError("N\xE3o foi poss\xEDvel carregar as conversas. Tente novamente.");
+    } finally {
+      setLoadingRooms(false);
+    }
+  }, [workspaceId, gql, initialRooms]);
+  const fetchMessages = useCallback(
+    async (roomId) => {
+      if (initialMessages && initialMessages.length > 0) {
+        const roomMessages = initialMessages.filter((m) => m.roomId === roomId);
+        setMessages(roomMessages);
+        return;
+      }
+      setLoadingMessages(true);
+      setError(null);
+      try {
+        const data = await gql(
+          `query($roomId: ID!) {
+            messages(roomId: $roomId) {
+              items {
+                id roomId authorId authorName authorAvatarUrl
+                content edited editedAt createdAt
+                mentions { type targetId display }
+                reactions { emoji userId }
+              }
+              total hasMore nextCursor
+            }
+          }`,
+          { roomId }
+        );
+        setMessages(data.messages.items);
+      } catch (err) {
+        console.error("[organify-chat] fetchMessages:", err);
+        setError("Erro ao carregar mensagens.");
+      } finally {
+        setLoadingMessages(false);
+      }
+    },
+    [gql, initialMessages]
+  );
+  const fetchRoomMembers = useCallback(
+    async (roomId) => {
+      try {
+        const data = await gql(
+          `query($roomId: ID!) {
+            roomMembers(roomId: $roomId) {
+              id userId displayName avatarUrl role joinedAt
+            }
+          }`,
+          { roomId }
+        );
+        setRoomMembers(data.roomMembers);
+        const myMembership = data.roomMembers.find((m) => m.userId === userId);
+        setMyRoomRole(myMembership?.role ?? null);
+      } catch (err) {
+        console.error("[organify-chat] fetchRoomMembers:", err);
+      }
+    },
+    [gql, userId]
+  );
+  const selectRoom = useCallback(
+    (roomId) => {
+      if (activeRoomId === roomId) return;
+      if (activeRoomId && wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ event: "leave_room", data: { roomId: activeRoomId } }));
+      }
+      setActiveRoomId(roomId);
+      setMessages([]);
+      setRoomMembers([]);
+      setMyRoomRole(null);
+      setTypingUsers([]);
+      fetchMessages(roomId);
+      fetchRoomMembers(roomId);
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ event: "join_room", data: { roomId } }));
+      }
+    },
+    [activeRoomId, fetchMessages, fetchRoomMembers]
+  );
+  const sendMessage = useCallback(
+    async (content) => {
+      if (!activeRoomId || !content.trim()) return;
+      const tempId = `temp_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      const optimisticMsg = {
+        id: tempId,
+        roomId: activeRoomId,
+        authorId: userId,
+        content: content.trim(),
+        edited: false,
+        editedAt: null,
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        mentions: [],
+        reactions: [],
+        _status: "pending"
+      };
+      setMessages((prev) => [...prev, optimisticMsg]);
+      try {
+        const data = await gql(
+          `mutation($input: SendMessageInput!) {
+            sendMessage(input: $input) {
+              id roomId authorId authorName authorAvatarUrl
+              content edited editedAt createdAt
+              mentions { type targetId display }
+              reactions { emoji userId }
+            }
+          }`,
+          { input: { roomId: activeRoomId, content: content.trim() } }
+        );
+        setMessages(
+          (prev) => prev.map((m) => m.id === tempId ? { ...data.sendMessage, _status: "sent" } : m)
+        );
+      } catch (err) {
+        console.error("[organify-chat] sendMessage:", err);
+        setMessages(
+          (prev) => prev.map((m) => m.id === tempId ? { ...m, _status: "error" } : m)
+        );
+      }
+    },
+    [activeRoomId, gql, userId]
+  );
+  const createRoom = useCallback(
+    async (input) => {
+      setError(null);
+      try {
+        const data = await gql(
+          `mutation($input: CreateRoomInput!) {
+            createRoom(input: $input) {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+          }`,
+          {
+            input: {
+              ...input,
+              workspaceId
+            }
+          }
+        );
+        const newRoom = data.createRoom;
+        setRooms((prev) => [newRoom, ...prev]);
+        return newRoom;
+      } catch (err) {
+        console.error("[organify-chat] createRoom:", err);
+        setError(err.message || "N\xE3o foi poss\xEDvel criar a sala.");
+        return null;
+      }
+    },
+    [gql, workspaceId]
+  );
+  const createDirectMessage = useCallback(
+    async (targetUserId) => {
+      setError(null);
+      try {
+        const data = await gql(
+          `mutation($input: CreateDMInput!) {
+            createDirectMessage(input: $input) {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+          }`,
+          {
+            input: {
+              workspaceId,
+              targetUserId
+            }
+          }
+        );
+        const dm = data.createDirectMessage;
+        setRooms((prev) => {
+          if (prev.find((r) => r.id === dm.id)) return prev;
+          return [dm, ...prev];
+        });
+        return dm;
+      } catch (err) {
+        console.error("[organify-chat] createDM:", err);
+        setError(err.message || "N\xE3o foi poss\xEDvel iniciar a conversa.");
+        return null;
+      }
+    },
+    [gql, workspaceId]
+  );
+  const updateRoom = useCallback(
+    async (roomId, updates) => {
+      if (!permissions.canEditRoomSettings) return;
+      try {
+        const data = await gql(
+          `mutation($roomId: ID!, $input: UpdateRoomInput!) {
+            updateRoom(roomId: $roomId, input: $input) {
+              id name slug type visibility description
+              memberCount unreadCount avatarUrl createdBy
+              archived lastMessageAt
+            }
+          }`,
+          { roomId, input: updates }
+        );
+        setRooms((prev) => prev.map((r) => r.id === roomId ? data.updateRoom : r));
+      } catch (err) {
+        setError(err.message || "Erro ao atualizar sala.");
+      }
+    },
+    [gql, permissions.canEditRoomSettings]
+  );
+  const archiveRoom = useCallback(
+    async (roomId) => {
+      if (!permissions.canArchiveRoom) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!) { archiveRoom(roomId: $roomId) }`,
+          { roomId }
+        );
+        setRooms((prev) => prev.filter((r) => r.id !== roomId));
+        if (activeRoomId === roomId) {
+          setActiveRoomId(null);
+          setMessages([]);
+        }
+      } catch (err) {
+        setError(err.message || "Erro ao arquivar sala.");
+      }
+    },
+    [gql, permissions.canArchiveRoom, activeRoomId]
+  );
+  const leaveRoom = useCallback(
+    async (roomId) => {
+      try {
+        await gql(
+          `mutation($roomId: ID!) { leaveRoom(roomId: $roomId) }`,
+          { roomId }
+        );
+        setRooms((prev) => prev.filter((r) => r.id !== roomId));
+        if (activeRoomId === roomId) {
+          setActiveRoomId(null);
+          setMessages([]);
+        }
+      } catch (err) {
+        setError(err.message || "Erro ao sair da sala.");
+      }
+    },
+    [gql, activeRoomId]
+  );
+  const addMember = useCallback(
+    async (roomId, targetUserId, role = "MEMBER") => {
+      if (!permissions.canManageMembers) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!, $userId: String!, $role: MemberRole!) {
+            addRoomMember(roomId: $roomId, userId: $userId, role: $role) { id userId role }
+          }`,
+          { roomId, userId: targetUserId, role }
+        );
+        fetchRoomMembers(roomId);
+      } catch (err) {
+        setError(err.message || "Erro ao adicionar membro.");
+      }
+    },
+    [gql, permissions.canManageMembers, fetchRoomMembers]
+  );
+  const removeMember = useCallback(
+    async (roomId, targetUserId) => {
+      if (!permissions.canManageMembers) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!, $userId: String!) {
+            removeRoomMember(roomId: $roomId, userId: $userId)
+          }`,
+          { roomId, userId: targetUserId }
+        );
+        setRoomMembers((prev) => prev.filter((m) => m.userId !== targetUserId));
+      } catch (err) {
+        setError(err.message || "Erro ao remover membro.");
+      }
+    },
+    [gql, permissions.canManageMembers]
+  );
+  const updateMemberRole = useCallback(
+    async (roomId, targetUserId, role) => {
+      if (!permissions.canManageMembers) return;
+      try {
+        await gql(
+          `mutation($roomId: ID!, $userId: String!, $role: MemberRole!) {
+            updateMemberRole(roomId: $roomId, userId: $userId, role: $role) { id userId role }
+          }`,
+          { roomId, userId: targetUserId, role }
+        );
+        setRoomMembers(
+          (prev) => prev.map((m) => m.userId === targetUserId ? { ...m, role } : m)
+        );
+      } catch (err) {
+        setError(err.message || "Erro ao atualizar cargo.");
+      }
+    },
+    [gql, permissions.canManageMembers]
+  );
+  const sendTyping = useCallback(() => {
+    if (!activeRoomId || wsRef.current?.readyState !== WebSocket.OPEN) return;
+    wsRef.current.send(JSON.stringify({ event: "typing", data: { roomId: activeRoomId, userId } }));
+    clearTimeout(typingTimerRef.current);
+    typingTimerRef.current = setTimeout(() => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ event: "stop_typing", data: { roomId: activeRoomId, userId } }));
+      }
+    }, 3e3);
+  }, [activeRoomId, userId]);
+  useEffect(() => {
+    const wsUrl = gatewayUrl.replace(/^http/, "ws");
+    let reconnectTimer;
+    let reconnectAttempts = 0;
+    const maxReconnectDelay = 3e4;
+    function connect() {
+      try {
+        const ws = new WebSocket(
+          `${wsUrl}/chat?userId=${encodeURIComponent(userId)}&workspaceId=${encodeURIComponent(workspaceId)}`
+        );
+        wsRef.current = ws;
+        ws.onopen = () => {
+          reconnectAttempts = 0;
+          if (activeRoomId) {
+            ws.send(JSON.stringify({ event: "join_room", data: { roomId: activeRoomId } }));
+          }
+        };
+        ws.onmessage = (event) => {
+          try {
+            const msg = JSON.parse(event.data);
+            switch (msg.event) {
+              case "new_message":
+                setMessages((prev) => {
+                  if (prev.find((m) => m.id === msg.data.id)) return prev;
+                  return [...prev, msg.data];
+                });
+                if (msg.data.roomId !== activeRoomId) {
+                  setRooms(
+                    (prev) => prev.map(
+                      (r) => r.id === msg.data.roomId ? { ...r, unreadCount: r.unreadCount + 1 } : r
+                    )
+                  );
+                }
+                break;
+              case "typing":
+                if (msg.data.userId !== userId) {
+                  setTypingUsers(
+                    (prev) => prev.includes(msg.data.userId) ? prev : [...prev, msg.data.userId]
+                  );
+                }
+                break;
+              case "stop_typing":
+                setTypingUsers((prev) => prev.filter((id) => id !== msg.data.userId));
+                break;
+              case "room_updated":
+                setRooms(
+                  (prev) => prev.map((r) => r.id === msg.data.id ? { ...r, ...msg.data } : r)
+                );
+                break;
+              case "member_joined":
+              case "member_left":
+                if (msg.data.roomId === activeRoomId && activeRoomId) {
+                  fetchRoomMembers(activeRoomId);
+                }
+                break;
+            }
+          } catch {
+          }
+        };
+        ws.onclose = () => {
+          const delay = Math.min(1e3 * Math.pow(2, reconnectAttempts) + Math.random() * 1e3, maxReconnectDelay);
+          reconnectAttempts++;
+          reconnectTimer = setTimeout(connect, delay);
+        };
+      } catch {
+        reconnectTimer = setTimeout(connect, 3e3);
+      }
+    }
+    connect();
+    return () => {
+      clearTimeout(reconnectTimer);
+      clearTimeout(typingTimerRef.current);
+      wsRef.current?.close();
+    };
+  }, [gatewayUrl, userId, workspaceId]);
+  useEffect(() => {
+    fetchRooms();
+  }, [fetchRooms]);
+  useEffect(() => {
+    if (error) {
+      const t = setTimeout(() => setError(null), 5e3);
+      return () => clearTimeout(t);
+    }
+  }, [error]);
+  return {
+    // State
+    rooms,
+    messages,
+    activeRoomId,
+    loadingRooms,
+    loadingMessages,
+    roomMembers,
+    myRoomRole,
+    permissions,
+    typingUsers,
+    error,
+    // Room selection
+    selectRoom,
+    // Messaging
+    sendMessage,
+    sendTyping,
+    // Room CRUD
+    createRoom,
+    createDirectMessage,
+    updateRoom,
+    archiveRoom,
+    leaveRoom,
+    // Member management
+    addMember,
+    removeMember,
+    updateMemberRole,
+    // Refresh
+    fetchRooms,
+    fetchRoomMembers
+  };
+}
+var alertVariants = cva(
+  "group relative overflow-visible rounded-r-2xl rounded-l-md border-l-4 border-y border-r border-white/10 bg-surface/80 py-5 pl-12 pr-6 shadow-lg backdrop-blur-xl",
+  {
+    variants: {
+      variant: {
+        success: "border-l-emerald-500",
+        error: "border-l-rose-500",
+        warning: "border-l-amber-400",
+        info: "border-l-blue-500"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+var alertIconVariants = cva(
+  "absolute -left-4 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-xl border border-white/20 shadow-lg transition-transform duration-300 group-hover:rotate-0",
+  {
+    variants: {
+      variant: {
+        success: "bg-emerald-500 text-black rotate-[-6deg]",
+        error: "bg-rose-500 text-white rotate-[6deg]",
+        warning: "bg-amber-400 text-black rotate-[-3deg]",
+        info: "bg-blue-500 text-white rotate-[3deg]"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  title,
+  description,
+  icon,
+  onClose,
+  action,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(alertVariants({ variant }), className), role: "alert", ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: cn(alertIconVariants({ variant })), children: icon || /* @__PURE__ */ jsxs(Fragment, { children: [
+      variant === "success" && /* @__PURE__ */ jsx(OrgCheckCircle, { className: "w-6 h-6" }),
+      variant === "error" && /* @__PURE__ */ jsx(OrgError, { className: "w-6 h-6" }),
+      variant === "warning" && /* @__PURE__ */ jsx(OrgWarning, { className: "w-6 h-6" }),
+      variant === "info" && /* @__PURE__ */ jsx(OrgInfo, { className: "w-6 h-6" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold text-white", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-light text-slate-300", children: description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: action.onClick,
+            className: cn(
+              "whitespace-nowrap rounded-lg border px-3 py-1.5 text-xs font-semibold tracking-wide transition-all",
+              variant === "error" && "border-rose-500/30 bg-rose-500/20 text-rose-300 hover:bg-rose-500/30",
+              variant === "success" && "border-emerald-500/30 bg-emerald-500/20 text-emerald-300 hover:bg-emerald-500/30",
+              variant === "warning" && "border-amber-400/30 bg-amber-400/20 text-amber-300 hover:bg-amber-400/30",
+              variant === "info" && "border-blue-500/30 bg-blue-500/20 text-blue-300 hover:bg-blue-500/30"
+            ),
+            children: action.label
+          }
+        ),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 text-slate-400 transition-colors hover:text-white",
+            "aria-label": "Close alert",
+            children: /* @__PURE__ */ jsx(OrgClose, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = React5.useState(false);
+  React5.useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function OrganifyChat({
+  workspaceRole,
+  workspaceMembers = [],
+  initialRooms,
+  initialMessages,
+  className
+}) {
+  const user = useOrganifyUser();
+  const userId = user?.id ?? "";
+  const chat = useChat({
+    workspaceRole,
+    initialRooms,
+    initialMessages
+  });
+  const isMobile = !useMediaQuery("(min-width: 768px)");
+  const [createDialogOpen, setCreateDialogOpen] = React5.useState(false);
+  const [managementOpen, setManagementOpen] = React5.useState(false);
+  const [mobileView, setMobileView] = React5.useState("sidebar");
+  const activeRoom = React5.useMemo(
+    () => chat.rooms.find((r) => r.id === chat.activeRoomId),
+    [chat.rooms, chat.activeRoomId]
+  );
+  const handleRoomSelect = (roomId) => {
+    chat.selectRoom(roomId);
+    if (isMobile) {
+      setMobileView("room");
+    }
+  };
+  const handleBackToSidebar = () => {
+    setMobileView("sidebar");
+  };
+  const handleOpenManagement = () => {
+    if (isMobile) {
+      setMobileView("management");
+    } else {
+      setManagementOpen(true);
+    }
+  };
+  const handleCloseManagement = () => {
+    if (isMobile) {
+      setMobileView("room");
+    } else {
+      setManagementOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-full min-h-[500px]",
+        "bg-background border border-white/8 rounded-lg overflow-hidden",
+        className
+      ),
+      children: [
+        chat.error && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 z-50 px-4 pt-2 animate-in slide-in-from-top-2 duration-300", children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            variant: "error",
+            title: "Erro",
+            description: chat.error,
+            className: "py-3 text-xs"
+          }
+        ) }),
+        !isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[260px] shrink-0", children: /* @__PURE__ */ jsx(
+            ChatSidebar,
+            {
+              rooms: chat.rooms,
+              activeRoomId: chat.activeRoomId,
+              loading: chat.loadingRooms,
+              onSelectRoom: chat.selectRoom,
+              onCreateRoom: () => setCreateDialogOpen(true)
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            ChatMessages,
+            {
+              room: activeRoom,
+              messages: chat.messages,
+              loading: chat.loadingMessages,
+              typingUsers: chat.typingUsers,
+              currentUserId: userId,
+              permissions: chat.permissions,
+              onSendMessage: chat.sendMessage,
+              onTyping: chat.sendTyping,
+              onStopTyping: chat.sendTyping,
+              onOpenManagement: () => setManagementOpen(true),
+              isMobile: false
+            }
+          ) }),
+          managementOpen && activeRoom && /* @__PURE__ */ jsx("div", { className: "w-[300px] shrink-0 border-l border-white/10 bg-card-surface/50", children: /* @__PURE__ */ jsx(
+            RoomManagementPanel,
+            {
+              room: activeRoom,
+              members: chat.roomMembers,
+              currentUserId: userId,
+              permissions: chat.permissions,
+              onClose: () => setManagementOpen(false),
+              onUpdateRoom: chat.updateRoom,
+              onArchiveRoom: chat.archiveRoom,
+              onLeaveRoom: chat.leaveRoom,
+              onRemoveMember: chat.removeMember,
+              onUpdateMemberRole: chat.updateMemberRole
+            }
+          ) })
+        ] }),
+        isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+          mobileView === "sidebar" && /* @__PURE__ */ jsx("div", { className: "w-full animate-in fade-in-0 slide-in-from-left-5 duration-300", children: /* @__PURE__ */ jsx(
+            ChatSidebar,
+            {
+              rooms: chat.rooms,
+              activeRoomId: chat.activeRoomId,
+              loading: chat.loadingRooms,
+              onSelectRoom: handleRoomSelect,
+              onCreateRoom: () => setCreateDialogOpen(true)
+            }
+          ) }),
+          mobileView === "room" && activeRoom && /* @__PURE__ */ jsx("div", { className: "w-full animate-in fade-in-0 slide-in-from-right-5 duration-300", children: /* @__PURE__ */ jsx(
+            ChatMessages,
+            {
+              room: activeRoom,
+              messages: chat.messages,
+              loading: chat.loadingMessages,
+              typingUsers: chat.typingUsers,
+              currentUserId: userId,
+              permissions: chat.permissions,
+              onSendMessage: chat.sendMessage,
+              onTyping: chat.sendTyping,
+              onStopTyping: chat.sendTyping,
+              onOpenManagement: handleOpenManagement,
+              onBack: handleBackToSidebar,
+              isMobile: true
+            }
+          ) }),
+          mobileView === "management" && activeRoom && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-50 flex", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex-1 bg-black/50 backdrop-blur-sm",
+                onClick: handleCloseManagement
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-[85%] max-w-sm h-full bg-card-surface/95 backdrop-blur-2xl border-l border-white/10 animate-in slide-in-from-right-5 duration-300", children: /* @__PURE__ */ jsx(
+              RoomManagementPanel,
+              {
+                room: activeRoom,
+                members: chat.roomMembers,
+                currentUserId: userId,
+                permissions: chat.permissions,
+                onClose: handleCloseManagement,
+                onUpdateRoom: chat.updateRoom,
+                onArchiveRoom: chat.archiveRoom,
+                onLeaveRoom: chat.leaveRoom,
+                onRemoveMember: chat.removeMember,
+                onUpdateMemberRole: chat.updateMemberRole
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CreateRoomDialog,
+          {
+            open: createDialogOpen,
+            onOpenChange: setCreateDialogOpen,
+            onCreateChannel: async (data) => {
+              const room = await chat.createRoom({
+                name: data.name,
+                type: "CHANNEL",
+                visibility: data.visibility,
+                description: data.description,
+                memberIds: data.memberIds
+              });
+              if (room) chat.selectRoom(room.id);
+              return room;
+            },
+            onCreateDM: async (targetUserId) => {
+              const room = await chat.createDirectMessage(targetUserId);
+              if (room) chat.selectRoom(room.id);
+              return room;
+            },
+            workspaceMembers
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Alert, Button, ChatMessages, ChatSidebar, CreateRoomDialog, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, OrgLoader, OrgLoaderInline, OrganifyChat, RoomManagementPanel, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, alertVariants, buttonVariants, getRoomPermissions, inputVariants, orgLoaderVariants, useChat };
+//# sourceMappingURL=chunk-CK63AZ3Z.js.map
+//# sourceMappingURL=chunk-CK63AZ3Z.js.map