@snksergio/design-system 0.1.0

package/dist-lib/preview/chat.mjs

@@ -0,0 +1,1120 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { t as tv, B as Button, C as Chip, c as cn, a as ChipGroup, b as ChipGroupItem } from "../chunks/chip-group-D3D0i72q.mjs";
+import { u as useTheme } from "../chunks/useTheme-BUPLZBMs.mjs";
+import { G as DropdownMenu, J as DropdownMenuTrigger, K as DropdownMenuContent, r as DropdownMenuItem, v as DropdownMenuSeparator, a as Avatar, b as AvatarFallback, A as AppShell } from "../chunks/app-shell-CDy42aNI.mjs";
+import { MoreVertical, CheckCircle2, Phone, Video, Tag, UserPlus, Archive, CheckCheck, Check, ArrowLeft, PanelRightClose, PanelRightOpen, Paperclip, Smile, Send, Mic, ChevronDown, X, Plus, Menu, Search } from "lucide-react";
+import { e as APP_SHELL_THEME_OPTIONS, c as APP_SHELL_MESSAGES, d as APP_SHELL_NOTIFICATIONS, A as APP_SHELL_COMMANDS, a as APP_SHELL_CONTEXTS } from "../chunks/app-shell-mocks-kWIVSzLs.mjs";
+import { C as CHANNEL_LABEL, a as CHANNEL_HEX, S as SAMPLE_MESSAGES, b as STATUS_DOT, F as FILTER_GROUPS, d as CONVERSATIONS, e as CONVERSATION_DETAILS, D as DEFAULT_DETAIL } from "../chunks/chat-v2-mocks-DvZRkhmz.mjs";
+import { I as Input } from "../chunks/input-DF4XAWmr.mjs";
+const chatV2Styles = tv({
+  slots: {
+    /** Body do AppShell — flex row com gap entre colunas. `relative` pra mobile overlays. */
+    root: "flex flex-1 min-h-0 gap-gp-2xl relative",
+    /** Wrapper dos filtros (col 1) — escondido em mobile. */
+    filtersWrap: "hidden md:contents"
+  }
+});
+const mobileOverlay = {
+  active: "max-md:absolute max-md:inset-0 max-md:w-full max-md:rounded-radius-none max-md:border-0",
+  hidden: "max-md:hidden"
+};
+function useResizable({
+  initial,
+  min,
+  max,
+  storageKey
+}) {
+  const [width, setWidth] = useState(initial);
+  const hydrated = useRef(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const raw = window.localStorage.getItem(storageKey);
+      const n = raw ? Number(raw) : NaN;
+      if (!Number.isNaN(n) && n >= min && n <= max) setWidth(n);
+    } catch {
+    }
+    hydrated.current = true;
+  }, [min, max, storageKey]);
+  useEffect(() => {
+    if (!hydrated.current || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(storageKey, String(width));
+    } catch {
+    }
+  }, [width, storageKey]);
+  const onResizeStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startWidth = width;
+      const onMove = (ev) => {
+        const delta = startX - ev.clientX;
+        const next = Math.max(min, Math.min(max, startWidth + delta));
+        setWidth(next);
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [width, min, max]
+  );
+  return { width, onResizeStart };
+}
+function ChannelDot({ channel, dotOnly = false }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center gap-[4px] text-[11px] text-fg-muted",
+      title: CHANNEL_LABEL[channel],
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-[8px] rounded-radius-full shrink-0",
+            style: { background: CHANNEL_HEX[channel] },
+            "aria-hidden": true
+          }
+        ),
+        !dotOnly && CHANNEL_LABEL[channel]
+      ]
+    }
+  );
+}
+function ConversationActionsMenu({
+  showResolveInMenu = false,
+  onResolve,
+  onCall,
+  onVideo,
+  onAddTag,
+  onAssign,
+  onArchive
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        color: "secondary",
+        variant: "outline",
+        size: "icon-sm",
+        "aria-label": "Mais opções",
+        children: /* @__PURE__ */ jsx(MoreVertical, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "min-w-[200px]", children: [
+      showResolveInMenu && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onResolve, children: [
+          /* @__PURE__ */ jsx(CheckCircle2, {}),
+          " Resolver"
+        ] }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onCall, children: [
+        /* @__PURE__ */ jsx(Phone, {}),
+        " Ligar"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onVideo, children: [
+        /* @__PURE__ */ jsx(Video, {}),
+        " Vídeo chamada"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onAddTag, children: [
+        /* @__PURE__ */ jsx(Tag, {}),
+        " Adicionar tag"
+      ] }),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onAssign, children: [
+        /* @__PURE__ */ jsx(UserPlus, {}),
+        " Atribuir"
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(DropdownMenuItem, { variant: "destructive", onSelect: onArchive, children: [
+        /* @__PURE__ */ jsx(Archive, {}),
+        " Arquivar"
+      ] })
+    ] })
+  ] });
+}
+function DateSeparator({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center my-pad-md", children: /* @__PURE__ */ jsx("span", { className: "px-pad-lg py-pad-2xs rounded-radius-full bg-bg-muted text-[11px] text-fg-muted [font-variant-numeric:tabular-nums]", children: label }) });
+}
+const messageBubbleStyles = tv({
+  slots: {
+    /** Wrapper que controla o alinhamento horizontal (esquerda/direita). */
+    row: "flex",
+    /** Balão em si — variants definem cor + corner pointer. */
+    bubble: "max-w-[70%] px-pad-xl py-pad-md rounded-radius-xl shadow-sh-sm",
+    /** Texto da mensagem. */
+    text: "text-[13.5px] leading-[1.45] whitespace-pre-wrap break-words",
+    /** Footer com horário + status icon. */
+    meta: "flex items-center justify-end gap-[4px] mt-[2px] text-[10.5px]",
+    /** Span do horário (tabular-nums pra alinhar). */
+    time: "[font-variant-numeric:tabular-nums]"
+  },
+  variants: {
+    from: {
+      me: {
+        row: "justify-end",
+        bubble: "bg-bg-brand text-fg-on-brand rounded-br-[4px]",
+        meta: "text-fg-on-brand opacity-80"
+      },
+      them: {
+        row: "justify-start",
+        bubble: "bg-bg-surface text-fg-default border border-border-subtle rounded-bl-[4px]",
+        meta: "text-fg-muted"
+      }
+    }
+  },
+  defaultVariants: {
+    from: "them"
+  }
+});
+function MessageBubble({ msg }) {
+  const from = msg.from === "me" ? "me" : "them";
+  const { row, bubble, text, meta, time } = messageBubbleStyles({ from });
+  return /* @__PURE__ */ jsx("div", { className: row(), children: /* @__PURE__ */ jsxs("div", { className: bubble(), children: [
+    /* @__PURE__ */ jsx("div", { className: text(), children: msg.text }),
+    /* @__PURE__ */ jsxs("div", { className: meta(), children: [
+      /* @__PURE__ */ jsx("span", { className: time(), children: msg.time }),
+      from === "me" && (msg.status === "read" ? /* @__PURE__ */ jsx(CheckCheck, { size: 12, strokeWidth: 2 }) : /* @__PURE__ */ jsx(Check, { size: 12, strokeWidth: 2 }))
+    ] })
+  ] }) });
+}
+const SIZE_CLASSES = {
+  sm: "size-[28px] text-[11px]",
+  md: "size-[36px] text-[13px]",
+  lg: "size-[40px] text-[14px]"
+};
+function PersonAvatar({ initials, hex, size = "md" }) {
+  return /* @__PURE__ */ jsx(Avatar, { className: SIZE_CLASSES[size], style: { background: hex }, children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-white font-bold", children: initials }) });
+}
+const conversationColumnStyles = tv({
+  slots: {
+    root: "flex flex-col flex-1 min-w-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
+    header: "flex items-center gap-gp-lg px-pad-2xl py-pad-md border-b border-border-subtle shrink-0",
+    headerInfo: "flex-1 min-w-0 flex flex-col gap-[2px]",
+    headerTitleRow: "flex items-center gap-gp-sm",
+    headerName: "text-title-md text-fg-default whitespace-nowrap overflow-hidden text-ellipsis",
+    headerMetaRow: "flex flex-wrap items-center gap-x-gp-sm gap-y-[2px] text-[11.5px] text-fg-muted min-w-0",
+    headerActions: "flex items-center gap-gp-sm shrink-0",
+    statusInner: "inline-flex items-center gap-[4px]",
+    statusDot: "size-[6px] rounded-radius-full shrink-0",
+    thread: "flex-1 min-h-0 overflow-y-auto bg-bg-muted dark:bg-bg-canvas px-pad-3xl py-pad-2xl flex flex-col gap-gp-md",
+    composer: "flex items-center gap-gp-sm px-pad-2xl py-pad-md border-t border-border-subtle shrink-0 bg-bg-surface"
+  }
+});
+function ConversationColumn({
+  conversation,
+  detailsOpen,
+  onToggleDetails,
+  onBackToList,
+  className
+}) {
+  const s = conversationColumnStyles();
+  const [text, setText] = useState("");
+  const [msgs, setMsgs] = useState(SAMPLE_MESSAGES);
+  const send = (e) => {
+    e?.preventDefault();
+    if (!text.trim()) return;
+    setMsgs((m) => [
+      ...m,
+      {
+        id: Date.now(),
+        from: "me",
+        text: text.trim(),
+        time: (/* @__PURE__ */ new Date()).toLocaleTimeString("pt-BR", {
+          hour: "2-digit",
+          minute: "2-digit"
+        }),
+        status: "sent"
+      }
+    ]);
+    setText("");
+  };
+  return /* @__PURE__ */ jsxs("section", { "aria-label": "Conversa", className: cn(s.root(), className), children: [
+    /* @__PURE__ */ jsxs("header", { className: s.header(), children: [
+      onBackToList && /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "secondary",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "Voltar pra lista",
+          onClick: onBackToList,
+          className: "md:hidden",
+          children: /* @__PURE__ */ jsx(ArrowLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "max-md:hidden", children: /* @__PURE__ */ jsx(
+        PersonAvatar,
+        {
+          initials: conversation.initials,
+          hex: conversation.avatarHex,
+          size: "md"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: s.headerInfo(), children: [
+        /* @__PURE__ */ jsxs("div", { className: s.headerTitleRow(), children: [
+          /* @__PURE__ */ jsx("span", { className: s.headerName(), children: conversation.name }),
+          /* @__PURE__ */ jsx(Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: s.headerMetaRow(), children: [
+          /* @__PURE__ */ jsx("span", { className: "[font-variant-numeric:tabular-nums]", children: conversation.id }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "·" }),
+          /* @__PURE__ */ jsx(ChannelDot, { channel: conversation.channel }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "·" }),
+          /* @__PURE__ */ jsxs("span", { className: s.statusInner(), children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: s.statusDot(),
+                style: { background: STATUS_DOT[conversation.status] },
+                "aria-hidden": true
+              }
+            ),
+            conversation.statusLabel
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: s.headerActions(), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "primary",
+            variant: "filled",
+            size: "sm",
+            iconLeft: /* @__PURE__ */ jsx(CheckCircle2, {}),
+            className: "max-md:hidden",
+            children: "Resolver"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConversationActionsMenu,
+          {
+            showResolveInMenu: true,
+            onResolve: () => console.log("resolver"),
+            onCall: () => console.log("ligar"),
+            onVideo: () => console.log("video"),
+            onAddTag: () => console.log("tag"),
+            onAssign: () => console.log("atribuir"),
+            onArchive: () => console.log("arquivar")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "secondary",
+            variant: "outline",
+            size: "icon-sm",
+            "aria-label": detailsOpen ? "Ocultar detalhes" : "Mostrar detalhes",
+            "aria-pressed": detailsOpen,
+            onClick: onToggleDetails,
+            children: detailsOpen ? /* @__PURE__ */ jsx(PanelRightClose, {}) : /* @__PURE__ */ jsx(PanelRightOpen, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: s.thread(), "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx(DateSeparator, { label: "Hoje" }),
+      msgs.map((m) => /* @__PURE__ */ jsx(MessageBubble, { msg: m }, m.id))
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: send, className: s.composer(), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "secondary",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "Anexar",
+          type: "button",
+          children: /* @__PURE__ */ jsx(Paperclip, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: text,
+          onChange: (e) => setText(e.target.value),
+          placeholder: "Digite uma mensagem...",
+          "aria-label": "Mensagem",
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "secondary",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "Emoji",
+          type: "button",
+          children: /* @__PURE__ */ jsx(Smile, {})
+        }
+      ),
+      text.trim() ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "primary",
+          variant: "filled",
+          size: "icon-sm",
+          "aria-label": "Enviar",
+          type: "submit",
+          children: /* @__PURE__ */ jsx(Send, { strokeWidth: 2.2 })
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "primary",
+          variant: "filled",
+          size: "icon-sm",
+          "aria-label": "Gravar áudio",
+          type: "button",
+          children: /* @__PURE__ */ jsx(Mic, { strokeWidth: 2.2 })
+        }
+      )
+    ] })
+  ] });
+}
+function DetailField({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-gp-md py-pad-2xs", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[12px] text-fg-muted shrink-0", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "text-[12.5px] text-fg-default text-right break-words min-w-0", children: value || "—" })
+  ] });
+}
+function DetailSection({
+  title,
+  open,
+  onToggle,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "flex flex-col border-b border-border-subtle pb-pad-xl last:border-b-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onToggle,
+        "aria-expanded": open,
+        className: "flex items-center justify-between w-full px-pad-sm py-pad-sm -mx-pad-sm rounded-radius-md cursor-pointer text-left transition-colors duration-150 hover:bg-bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-brand",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-fg-default", children: title }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              size: 14,
+              className: [
+                "text-fg-muted transition-transform duration-150",
+                open ? "" : "-rotate-90"
+              ].join(" ")
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-gp-sm pt-pad-xs", children })
+  ] });
+}
+const detailsColumnStyles = tv({
+  slots: {
+    root: "relative flex flex-col shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
+    /** Resize handle no left edge — 4px. */
+    handle: "absolute left-0 top-0 bottom-0 w-[4px] z-[1] bg-transparent cursor-col-resize hover:bg-bg-brand active:bg-bg-brand transition-colors duration-150 focus-visible:outline-none focus-visible:bg-bg-brand",
+    header: "flex items-center gap-gp-md px-pad-2xl py-pad-lg border-b border-border-subtle shrink-0",
+    title: "m-0 text-title-md text-fg-default flex-1",
+    body: "flex-1 min-h-0 overflow-y-auto px-pad-2xl py-pad-md flex flex-col gap-gp-2xl",
+    contactHead: "flex flex-col items-center gap-gp-md pb-pad-md",
+    contactName: "text-[14px] font-semibold text-fg-default text-center",
+    tagsRow: "flex flex-col gap-gp-sm pt-pad-xs",
+    tagsLabel: "text-[12px] text-fg-muted",
+    tagsChips: "flex items-center gap-gp-xs flex-wrap",
+    tagAddBtn: "inline-flex items-center gap-[3px] px-pad-md h-[22px] rounded-radius-full border border-dashed border-border-input text-[11px] font-medium text-fg-muted hover:bg-bg-muted hover:text-fg-default transition-colors",
+    historyEmpty: "text-[12px] text-fg-subtle text-center py-pad-md",
+    historyList: "m-0 p-0 list-none flex flex-col gap-gp-sm",
+    historyItem: "flex gap-gp-md p-pad-md rounded-radius-md bg-bg-muted border border-border-subtle",
+    historyId: "text-[11px] text-fg-muted shrink-0 [font-variant-numeric:tabular-nums] pt-[1px]",
+    historyBody: "flex-1 min-w-0 flex flex-col gap-[1px]",
+    historySubject: "text-[12.5px] font-medium text-fg-default",
+    historyMeta: "text-[11px] text-fg-muted"
+  }
+});
+function DetailsColumn({
+  conversation,
+  detail,
+  openSections,
+  onToggleSection,
+  onClose,
+  width,
+  onResizeStart,
+  onBackToChat,
+  className
+}) {
+  const s = detailsColumnStyles();
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "aria-label": "Detalhes do contato",
+      style: { width },
+      className: cn(s.root(), className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onMouseDown: onResizeStart,
+            "aria-label": "Redimensionar painel de detalhes",
+            className: s.handle()
+          }
+        ),
+        /* @__PURE__ */ jsxs("header", { className: s.header(), children: [
+          onBackToChat && /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: "secondary",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": "Voltar pra conversa",
+              onClick: onBackToChat,
+              className: "md:hidden",
+              children: /* @__PURE__ */ jsx(ArrowLeft, {})
+            }
+          ),
+          /* @__PURE__ */ jsx("h3", { className: s.title(), children: "Detalhes" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              color: "secondary",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": "Fechar painel",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(X, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+          /* @__PURE__ */ jsxs(
+            DetailSection,
+            {
+              title: "Contato",
+              open: openSections.contact,
+              onToggle: () => onToggleSection("contact"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: s.contactHead(), children: [
+                  /* @__PURE__ */ jsx(
+                    PersonAvatar,
+                    {
+                      initials: conversation.initials,
+                      hex: conversation.avatarHex,
+                      size: "lg"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: s.contactName(), children: conversation.name })
+                ] }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Telefone", value: detail.phone }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Email", value: detail.email }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Primeiro contato", value: detail.firstContact })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            DetailSection,
+            {
+              title: "Atendimento",
+              open: openSections.ticket,
+              onToggle: () => onToggleSection("ticket"),
+              children: [
+                /* @__PURE__ */ jsx(DetailField, { label: "ID", value: conversation.id }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Status", value: conversation.statusLabel }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Atribuído a", value: detail.assignedTo }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Canal", value: CHANNEL_LABEL[conversation.channel] }),
+                /* @__PURE__ */ jsx(DetailField, { label: "Criado em", value: detail.createdAt }),
+                /* @__PURE__ */ jsxs("div", { className: s.tagsRow(), children: [
+                  /* @__PURE__ */ jsx("span", { className: s.tagsLabel(), children: "Tags" }),
+                  /* @__PURE__ */ jsxs("div", { className: s.tagsChips(), children: [
+                    /* @__PURE__ */ jsx(Chip, { color: conversation.tagKind, variant: "soft", size: "sm", shape: "pill", children: conversation.tag }),
+                    detail.extraTags.map((t) => /* @__PURE__ */ jsx(Chip, { color: "info", variant: "soft", size: "sm", shape: "pill", children: t }, t)),
+                    /* @__PURE__ */ jsxs("button", { type: "button", className: s.tagAddBtn(), children: [
+                      /* @__PURE__ */ jsx(Plus, { size: 11, strokeWidth: 2.2 }),
+                      " tag"
+                    ] })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DetailSection,
+            {
+              title: "Histórico",
+              open: openSections.history,
+              onToggle: () => onToggleSection("history"),
+              children: detail.history.length === 0 ? /* @__PURE__ */ jsx("div", { className: s.historyEmpty(), children: "Nenhum atendimento anterior." }) : /* @__PURE__ */ jsx("ul", { className: s.historyList(), children: detail.history.map((h) => /* @__PURE__ */ jsxs("li", { className: s.historyItem(), children: [
+                /* @__PURE__ */ jsx("span", { className: s.historyId(), children: h.id }),
+                /* @__PURE__ */ jsxs("div", { className: s.historyBody(), children: [
+                  /* @__PURE__ */ jsx("span", { className: s.historySubject(), children: h.subject }),
+                  /* @__PURE__ */ jsxs("span", { className: s.historyMeta(), children: [
+                    h.date,
+                    " · ",
+                    h.status
+                  ] })
+                ] })
+              ] }, h.id)) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const filterRowStyles = tv({
+  slots: {
+    button: [
+      "flex items-center gap-gp-md w-full",
+      "px-pad-md py-pad-sm rounded-radius-md text-left",
+      "transition-colors duration-150 cursor-pointer"
+    ].join(" "),
+    /** Leading slot (icon ou dot fallback). */
+    leading: "shrink-0 inline-flex items-center justify-center size-[18px]",
+    /** Label do filtro (ellipsis). */
+    label: "flex-1 min-w-0 text-[12.5px] font-medium whitespace-nowrap overflow-hidden text-ellipsis",
+    /** Dot brand 6px pra "tem novidades". */
+    unreadDot: "size-[6px] rounded-radius-full bg-bg-brand shrink-0",
+    /** Contador à direita. */
+    count: "text-[11px] text-fg-muted shrink-0 [font-variant-numeric:tabular-nums]",
+    /** Dot fallback (quando item não tem icon). */
+    fallbackDot: "size-[8px] rounded-radius-full"
+  },
+  variants: {
+    isActive: {
+      true: {
+        button: "bg-bg-muted dark:bg-bg-emphasis text-fg-default font-semibold"
+      },
+      false: {
+        button: "text-fg-muted hover:bg-bg-muted hover:text-fg-default"
+      }
+    }
+  },
+  defaultVariants: {
+    isActive: false
+  }
+});
+function FilterRow({ item, isActive, onClick }) {
+  const Icon = item.icon;
+  const s = filterRowStyles({ isActive });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": isActive,
+      className: s.button(),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: s.leading(), children: Icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 15,
+            strokeWidth: 1.8,
+            style: { color: item.color ?? "var(--color-fg-muted)" }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: s.fallbackDot(),
+            style: { background: item.color ?? "var(--color-fg-muted)" },
+            "aria-hidden": true
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: s.label(), children: item.name }),
+        item.hasUnread && /* @__PURE__ */ jsx("span", { className: s.unreadDot(), "aria-label": "tem novidades" }),
+        /* @__PURE__ */ jsx("span", { className: s.count(), children: item.count })
+      ]
+    }
+  );
+}
+const filtersColumnStyles = tv({
+  slots: {
+    /** Aside raiz da versão expandida (280px). */
+    root: "flex flex-col w-[280px] shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
+    /** Aside raiz da versão rail (64px). */
+    rail: "flex flex-col w-[64px] shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
+    /** Container scrollável das seções (expandida). */
+    scroll: "flex-1 min-h-0 overflow-y-auto px-pad-md py-pad-md flex flex-col gap-gp-lg",
+    /** Container scrollável (rail). */
+    railScroll: "flex-1 min-h-0 overflow-y-auto py-pad-md flex flex-col items-center gap-gp-sm",
+    /** Section wrapper (expandida). */
+    section: "flex flex-col gap-gp-2xs",
+    /** Header de section (título all-caps). Usa `subheading-strong-sm` —
+        token DS criado especificamente pra este caso (10px/700/+0.06em). */
+    sectionTitle: "px-pad-md pt-pad-2xs pb-pad-2xs text-[10px] font-bold tracking-[0.06em] text-fg-subtle uppercase",
+    /** Group wrapper (rail) — divider entre grupos. */
+    railGroup: "w-full flex flex-col items-center gap-gp-xs px-pad-md",
+    /** Modifier de divisor pros grupos não-primeiros (rail). */
+    railGroupDivider: "pt-pad-sm border-t border-border-subtle",
+    /** Modifier de divisor pras sections não-primeiras (expandida). */
+    sectionDivider: "pt-pad-lg border-t border-border-subtle"
+  }
+});
+function FiltersColumn({
+  filters,
+  onToggleFilter,
+  className
+}) {
+  const s = filtersColumnStyles();
+  return /* @__PURE__ */ jsx("aside", { "aria-label": "Filtros", className: cn(s.root(), className), children: /* @__PURE__ */ jsx("div", { className: s.scroll(), children: FILTER_GROUPS.map((sec, i) => /* @__PURE__ */ jsx(
+    FilterSection,
+    {
+      title: sec.title,
+      group: sec.group,
+      items: sec.items,
+      filters,
+      onToggle: onToggleFilter,
+      isFirst: i === 0
+    },
+    sec.group
+  )) }) });
+}
+function FilterSection({
+  title,
+  group,
+  items,
+  filters,
+  onToggle,
+  isFirst
+}) {
+  const s = filtersColumnStyles();
+  return /* @__PURE__ */ jsxs("section", { className: cn(s.section(), !isFirst && s.sectionDivider()), children: [
+    /* @__PURE__ */ jsx("div", { className: s.sectionTitle(), children: title }),
+    items.map((item) => /* @__PURE__ */ jsx(
+      FilterRow,
+      {
+        item,
+        isActive: filters[group].has(item.id),
+        onClick: () => onToggle(group, item.id)
+      },
+      item.id
+    ))
+  ] });
+}
+const railItemStyles = tv({
+  slots: {
+    button: [
+      "relative grid place-items-center size-form-md rounded-radius-md cursor-pointer",
+      "transition-colors duration-150"
+    ].join(" "),
+    /** Badge dot 6px (top-right) pra "tem novidades". */
+    unreadDot: "absolute top-[2px] right-[2px] size-[6px] rounded-radius-full bg-bg-brand",
+    /** Fallback dot (quando item não tem icon). */
+    fallbackDot: "size-[10px] rounded-radius-full"
+  },
+  variants: {
+    isActive: {
+      true: {
+        button: "bg-bg-muted dark:bg-bg-emphasis text-fg-default"
+      },
+      false: {
+        button: "text-fg-muted hover:bg-bg-muted hover:text-fg-default"
+      }
+    }
+  },
+  defaultVariants: {
+    isActive: false
+  }
+});
+function RailItem({ item, isActive, onClick }) {
+  const Icon = item.icon;
+  const s = railItemStyles({ isActive });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": isActive,
+      title: `${item.name} (${item.count})`,
+      className: s.button(),
+      children: [
+        Icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 16,
+            strokeWidth: 1.8,
+            style: { color: item.color ?? "currentColor" }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: s.fallbackDot(),
+            style: { background: item.color ?? "var(--color-fg-muted)" },
+            "aria-hidden": true
+          }
+        ),
+        item.hasUnread && /* @__PURE__ */ jsx("span", { className: s.unreadDot(), "aria-label": "tem novidades" })
+      ]
+    }
+  );
+}
+function FiltersRail({
+  filters,
+  onToggleFilter,
+  className
+}) {
+  const s = filtersColumnStyles();
+  return /* @__PURE__ */ jsx("aside", { "aria-label": "Filtros (compactos)", className: cn(s.rail(), className), children: /* @__PURE__ */ jsx("div", { className: s.railScroll(), children: FILTER_GROUPS.map(({ group, items }, gi) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(s.railGroup(), gi > 0 && s.railGroupDivider()),
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        RailItem,
+        {
+          item,
+          isActive: filters[group].has(item.id),
+          onClick: () => onToggleFilter(group, item.id)
+        },
+        item.id
+      ))
+    },
+    group
+  )) }) });
+}
+const conversationListItemStyles = tv({
+  slots: {
+    /** Card raiz (button) — flex horizontal com avatar + conteúdo. */
+    root: [
+      "group/conv text-left relative",
+      "flex gap-gp-md p-pad-md rounded-radius-md",
+      "cursor-pointer transition-colors duration-150"
+    ].join(" "),
+    /** Coluna direita (3 rows). */
+    content: "flex-1 min-w-0 flex flex-col gap-[3px]",
+    /** Row 1 — nome + horário. */
+    rowTop: "flex items-center gap-gp-sm",
+    /** Nome (ellipsis). */
+    name: "text-[13px] font-semibold text-fg-default whitespace-nowrap overflow-hidden text-ellipsis flex-1 min-w-0",
+    /** Horário. */
+    time: "text-[11px] text-fg-muted shrink-0 [font-variant-numeric:tabular-nums]",
+    /** Row 2 — preview + badge unread. */
+    rowMid: "flex items-center gap-gp-sm",
+    /** Preview da última mensagem (ellipsis). */
+    preview: "text-[12px] text-fg-muted whitespace-nowrap overflow-hidden text-ellipsis flex-1 min-w-0",
+    /** Badge contador de não lidas — usa `subheading-strong-md` (11px/700) como
+        base e força `font-bold` + `leading-none` inline pra preservar o weight
+        e a centralização vertical do número dentro do círculo (preset DS sozinho
+        usa lineHeight 0.875rem, que descentraliza o conteúdo). */
+    unread: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-[5px] rounded-radius-full bg-bg-brand text-fg-on-brand text-[10.5px] font-bold leading-none shrink-0 [font-variant-numeric:tabular-nums]",
+    /** Row 3 — canal + tag + ID. */
+    rowBot: "flex items-center gap-gp-sm",
+    /** ID da conversa (canto inferior direito). */
+    id: "ml-auto text-[10.5px] text-fg-subtle shrink-0 [font-variant-numeric:tabular-nums]"
+  },
+  variants: {
+    isActive: {
+      true: {
+        root: [
+          "bg-bg-muted dark:bg-bg-emphasis",
+          "before:content-[''] before:absolute before:left-0 before:top-[10px] before:bottom-[10px]",
+          "before:w-[3px] before:bg-bg-brand before:rounded-r-[2px] before:pointer-events-none"
+        ].join(" ")
+      },
+      false: {
+        root: "hover:bg-bg-muted"
+      }
+    }
+  },
+  defaultVariants: {
+    isActive: false
+  }
+});
+function ConversationListItem({
+  conv,
+  isActive,
+  onSelect
+}) {
+  const s = conversationListItemStyles({ isActive });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelect(conv.id),
+      className: s.root(),
+      "aria-pressed": isActive,
+      children: [
+        /* @__PURE__ */ jsx(PersonAvatar, { initials: conv.initials, hex: conv.avatarHex, size: "md" }),
+        /* @__PURE__ */ jsxs("div", { className: s.content(), children: [
+          /* @__PURE__ */ jsxs("div", { className: s.rowTop(), children: [
+            /* @__PURE__ */ jsx("span", { className: s.name(), children: conv.name }),
+            /* @__PURE__ */ jsx("span", { className: s.time(), children: conv.time })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: s.rowMid(), children: [
+            /* @__PURE__ */ jsx("span", { className: s.preview(), children: conv.last }),
+            conv.unread > 0 && /* @__PURE__ */ jsx("span", { className: s.unread(), "aria-label": `${conv.unread} não lidas`, children: conv.unread })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: s.rowBot(), children: [
+            /* @__PURE__ */ jsx(ChannelDot, { channel: conv.channel }),
+            /* @__PURE__ */ jsx(Chip, { color: conv.tagKind, variant: "soft", size: "sm", shape: "pill", children: conv.tag }),
+            /* @__PURE__ */ jsx("span", { className: s.id(), children: conv.id })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const queueColumnStyles = tv({
+  slots: {
+    root: "flex flex-col w-[340px] shrink-0 bg-bg-surface border border-border-subtle rounded-radius-xl overflow-hidden",
+    header: "flex items-center gap-gp-sm px-pad-md pt-pad-md pb-pad-md",
+    title: "m-0 text-title-md text-fg-default flex-1 min-w-0",
+    searchWrap: "px-pad-md pb-pad-lg",
+    searchInner: "relative",
+    searchIcon: "absolute left-pad-lg top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none",
+    searchInput: "pl-[34px] pr-[30px]",
+    searchClear: "absolute right-pad-md top-1/2 -translate-y-1/2 grid place-items-center size-[20px] rounded-radius-md text-fg-muted hover:bg-bg-muted hover:text-fg-default transition-colors",
+    chipsWrap: "px-pad-md pb-pad-2xl",
+    list: "flex-1 min-h-0 overflow-y-auto px-pad-md pb-pad-md flex flex-col gap-gp-xs",
+    empty: "py-pad-4xl px-pad-xl text-center text-[12px] text-fg-subtle"
+  }
+});
+function QueueColumn({
+  activeId,
+  onSelect,
+  searchQuery,
+  onSearchChange,
+  queueFilter,
+  onQueueFilterChange,
+  filtersCollapsed,
+  onToggleFilters,
+  className
+}) {
+  const s = queueColumnStyles();
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    const bySearch = q ? CONVERSATIONS.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q) || c.last.toLowerCase().includes(q)
+    ) : CONVERSATIONS;
+    if (queueFilter === "unread") return bySearch.filter((c) => c.unread > 0);
+    if (queueFilter === "read") return bySearch.filter((c) => c.unread === 0);
+    return bySearch;
+  }, [searchQuery, queueFilter]);
+  const counts = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    const bySearch = q ? CONVERSATIONS.filter(
+      (c) => c.name.toLowerCase().includes(q) || c.id.toLowerCase().includes(q) || c.last.toLowerCase().includes(q)
+    ) : CONVERSATIONS;
+    return {
+      all: bySearch.length,
+      unread: bySearch.filter((c) => c.unread > 0).length,
+      read: bySearch.filter((c) => c.unread === 0).length
+    };
+  }, [searchQuery]);
+  return /* @__PURE__ */ jsxs("aside", { "aria-label": "Fila de conversas", className: cn(s.root(), className), children: [
+    /* @__PURE__ */ jsxs("header", { className: s.header(), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: "secondary",
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: onToggleFilters,
+          "aria-label": filtersCollapsed ? "Expandir filtros" : "Colapsar filtros",
+          "aria-pressed": !filtersCollapsed,
+          children: /* @__PURE__ */ jsx(Menu, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("h2", { className: s.title(), children: "Conversas" }),
+      /* @__PURE__ */ jsx(Chip, { color: "primary", variant: "soft", size: "sm", shape: "rounded", children: filtered.length })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: s.searchWrap(), children: /* @__PURE__ */ jsxs("div", { className: s.searchInner(), children: [
+      /* @__PURE__ */ jsx(Search, { size: 14, strokeWidth: 1.8, className: s.searchIcon() }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          placeholder: "Buscar conversa, ID ou nome...",
+          value: searchQuery,
+          onChange: (e) => onSearchChange(e.target.value),
+          className: s.searchInput()
+        }
+      ),
+      searchQuery && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSearchChange(""),
+          className: s.searchClear(),
+          "aria-label": "Limpar busca",
+          children: /* @__PURE__ */ jsx(X, { size: 12 })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: s.chipsWrap(), children: /* @__PURE__ */ jsxs(
+      ChipGroup,
+      {
+        type: "single",
+        value: queueFilter,
+        onValueChange: (v) => onQueueFilterChange(v || "all"),
+        size: "md",
+        ariaLabel: "Filtrar conversas",
+        children: [
+          /* @__PURE__ */ jsxs(ChipGroupItem, { value: "all", children: [
+            "Todas",
+            counts.all > 0 && ` (${counts.all})`
+          ] }),
+          /* @__PURE__ */ jsxs(ChipGroupItem, { value: "unread", children: [
+            "Não lidas",
+            counts.unread > 0 && ` (${counts.unread})`
+          ] }),
+          /* @__PURE__ */ jsxs(ChipGroupItem, { value: "read", children: [
+            "Lidas",
+            counts.read > 0 && ` (${counts.read})`
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: s.list(), children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: s.empty(), children: "Nenhuma conversa encontrada." }) : filtered.map((c) => /* @__PURE__ */ jsx(
+      ConversationListItem,
+      {
+        conv: c,
+        isActive: c.id === activeId,
+        onSelect
+      },
+      c.id
+    )) })
+  ] });
+}
+function ChatV2() {
+  const s = chatV2Styles();
+  const [activeId, setActiveId] = useState(CONVERSATIONS[0].id);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { theme, setTheme } = useTheme();
+  const [mobileView, setMobileView] = useState("list");
+  const handleSelectConversation = (id) => {
+    setActiveId(id);
+    setMobileView("chat");
+  };
+  const handleToggleDetails = () => {
+    const isMobile = typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches;
+    if (isMobile) {
+      setDetailsOpen(true);
+      setMobileView((v) => v === "details" ? "chat" : "details");
+    } else {
+      setDetailsOpen((o) => !o);
+    }
+  };
+  const [filters, setFilters] = useState({
+    status: /* @__PURE__ */ new Set(["open"]),
+    channels: /* @__PURE__ */ new Set(),
+    categories: /* @__PURE__ */ new Set(),
+    innerStatus: /* @__PURE__ */ new Set()
+  });
+  const toggleFilter = (group, id) => {
+    setFilters((prev) => {
+      const next = new Set(prev[group]);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return { ...prev, [group]: next };
+    });
+  };
+  const [filtersCollapsed, setFiltersCollapsed] = useState(false);
+  const [queueFilter, setQueueFilter] = useState("all");
+  const [detailsOpen, setDetailsOpen] = useState(true);
+  const [openSections, setOpenSections] = useState({
+    contact: true,
+    ticket: true,
+    history: true
+  });
+  const toggleSection = (id) => setOpenSections((m) => ({ ...m, [id]: !m[id] }));
+  const detailsResize = useResizable({
+    initial: 360,
+    min: 280,
+    max: 520,
+    // Mantém storageKey diferente da ChatShowcase pra não conflitar valores entre as 2 páginas.
+    storageKey: "chat-v2.detailsWidth"
+  });
+  const activeConversation = CONVERSATIONS.find((c) => c.id === activeId) ?? CONVERSATIONS[0];
+  const activeDetail = CONVERSATION_DETAILS[activeConversation.id] ?? DEFAULT_DETAIL;
+  return /* @__PURE__ */ jsx(
+    AppShell,
+    {
+      contexts: APP_SHELL_CONTEXTS,
+      defaultActiveContextId: "inbox",
+      defaultActiveItemHref: "#chat-v2",
+      breadcrumb: [{ label: "Atendimentos" }],
+      commandGroups: APP_SHELL_COMMANDS,
+      notifications: {
+        items: APP_SHELL_NOTIFICATIONS,
+        onMarkAllRead: () => alert("Marcar todas como lidas"),
+        onMoreActions: () => alert("Mais ações"),
+        onViewAll: () => alert("Ver todas")
+      },
+      messages: {
+        items: APP_SHELL_MESSAGES,
+        onNewMessage: () => alert("Nova mensagem"),
+        onExpand: () => alert("Expandir"),
+        onViewAll: () => alert("Ver todas")
+      },
+      theme,
+      onThemeChange: (id) => setTheme(id),
+      themeOptions: APP_SHELL_THEME_OPTIONS,
+      mobileEdgeToEdge: true,
+      children: /* @__PURE__ */ jsxs("div", { className: s.root(), children: [
+        /* @__PURE__ */ jsx("div", { className: s.filtersWrap(), children: filtersCollapsed ? /* @__PURE__ */ jsx(FiltersRail, { filters, onToggleFilter: toggleFilter }) : /* @__PURE__ */ jsx(FiltersColumn, { filters, onToggleFilter: toggleFilter }) }),
+        /* @__PURE__ */ jsx(
+          QueueColumn,
+          {
+            activeId,
+            onSelect: handleSelectConversation,
+            searchQuery,
+            onSearchChange: setSearchQuery,
+            queueFilter,
+            onQueueFilterChange: setQueueFilter,
+            filtersCollapsed,
+            onToggleFilters: () => setFiltersCollapsed((c) => !c),
+            className: cn(
+              mobileView === "list" ? `${mobileOverlay.active} max-md:z-[1]` : mobileOverlay.hidden
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConversationColumn,
+          {
+            conversation: activeConversation,
+            detailsOpen,
+            onToggleDetails: handleToggleDetails,
+            onBackToList: () => setMobileView("list"),
+            className: cn(
+              mobileView === "chat" ? `${mobileOverlay.active} max-md:z-[2]` : mobileOverlay.hidden
+            )
+          }
+        ),
+        detailsOpen && /* @__PURE__ */ jsx(
+          DetailsColumn,
+          {
+            conversation: activeConversation,
+            detail: activeDetail,
+            openSections,
+            onToggleSection: toggleSection,
+            onClose: () => {
+              setDetailsOpen(false);
+              setMobileView("chat");
+            },
+            onBackToChat: () => setMobileView("chat"),
+            width: detailsResize.width,
+            onResizeStart: detailsResize.onResizeStart,
+            className: cn(
+              mobileView === "details" ? `${mobileOverlay.active} max-md:!w-full max-md:z-[3]` : mobileOverlay.hidden
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ChatV2,
+  ChatV2 as default
+};
+//# sourceMappingURL=chat.mjs.map