@snksergio/design-system 0.61.0 → 0.63.0

package/dist-lib/ai/exemplos/app-shell/nav-data.ts

@@ -0,0 +1,97 @@
+import {
+  LayoutDashboard,
+  Users,
+  BarChart3,
+  Settings,
+  User,
+  UsersRound,
+} from "lucide-react";
+import type {
+  SidebarContext,
+  SidebarMenuItem,
+} from "@/components/ui/MenuSidebar";
+
+/**
+ * nav-data — navegação do esqueleto de app, por CONTEXTO (módulo no rail).
+ *
+ * Modelo genérico de SaaS (adapte ao seu app): cada CONTEXTO é um módulo com
+ * seus itens; itens podem ter `subitems` (grupo expansível). O `href` é o id de
+ * navegação — o AppShell casa o item ativo por href e o mapa de rotas
+ * (`routes.tsx`) resolve o componente. Sem router externo (troque por
+ * react-router/next se quiser: mantenha o href como path).
+ */
+export const NAV_CONTEXTS: SidebarContext[] = [
+  {
+    id: "app",
+    label: "Aplicação",
+    icon: LayoutDashboard,
+    items: [
+      { name: "Início", icon: LayoutDashboard, href: "#/app/inicio" },
+      { name: "Clientes", icon: Users, href: "#/app/clientes" },
+      {
+        name: "Relatórios",
+        icon: BarChart3,
+        subitems: [
+          { name: "Vendas", href: "#/app/relatorios/vendas" },
+          { name: "Desempenho", href: "#/app/relatorios/desempenho" },
+        ],
+      },
+    ],
+  },
+  {
+    id: "config",
+    label: "Configurações",
+    icon: Settings,
+    items: [
+      { name: "Perfil", icon: User, href: "#/config/perfil" },
+      { name: "Equipe", icon: UsersRound, href: "#/config/equipe" },
+    ],
+  },
+];
+
+/** Entrada achatada por href — pro breadcrumb, command palette (⌘K) e lookups. */
+export type NavEntry = {
+  href: string;
+  label: string;
+  parentLabel?: string;
+  contextId: string;
+  contextLabel: string;
+};
+
+function flattenItem(
+  item: SidebarMenuItem,
+  contextId: string,
+  contextLabel: string,
+): NavEntry[] {
+  if (item.subitems && item.subitems.length > 0) {
+    return item.subitems
+      .filter((s) => s.href)
+      .map((s) => ({
+        href: s.href!,
+        label: s.name,
+        parentLabel: item.name,
+        contextId,
+        contextLabel,
+      }));
+  }
+  if (item.href) {
+    return [{ href: item.href, label: item.name, contextId, contextLabel }];
+  }
+  return [];
+}
+
+/** Todas as folhas navegáveis (itens-link + sub-itens), achatadas. */
+export const NAV_ENTRIES: NavEntry[] = NAV_CONTEXTS.flatMap((ctx) =>
+  ctx.items.flatMap((item) => flattenItem(item, ctx.id, ctx.label)),
+);
+
+/** Primeiro href navegável de um contexto (evita item órfão ao trocar de módulo). */
+export function firstHrefOfContext(contextId: string): string {
+  const entry = NAV_ENTRIES.find((e) => e.contextId === contextId);
+  return entry?.href ?? NAV_ENTRIES[0].href;
+}
+
+/** Entrada de um href (ou a primeira como fallback). */
+export function entryOfHref(href: string): NavEntry {
+  return NAV_ENTRIES.find((e) => e.href === href) ?? NAV_ENTRIES[0];
+}

package/dist-lib/ai/exemplos/app-shell/routes.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { entryOfHref } from "./nav-data";
+
+/**
+ * Mapa de rotas DECLARATIVO — href → conteúdo. Substitui a cadeia de
+ * `if (href === ...) return <X/>` (frágil e verbosa quando cresce): registrar
+ * uma tela = adicionar 1 linha aqui. `resolveRoute` faz o lookup com fallback.
+ *
+ * Cada tela real vem dos builders do DS (crud/list/dashboard) — aqui os stubs
+ * só mostram o esqueleto navegável. Troque `<StubPage/>` pelo componente da tela.
+ */
+function StubPage({ href }: { href: string }) {
+  const entry = entryOfHref(href);
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-gp-2xl">
+      <PageHeader
+        title={entry.label}
+        description={
+          entry.parentLabel
+            ? `${entry.contextLabel} › ${entry.parentLabel}`
+            : entry.contextLabel
+        }
+      />
+      <div className="grid flex-1 place-items-center rounded-radius-xl border border-dashed border-border-default bg-bg-subtle p-pad-6xl">
+        <div className="flex max-w-[420px] flex-col items-center gap-gp-sm text-center">
+          <p className="text-title-md font-semibold text-fg-default">
+            Conteúdo de “{entry.label}”
+          </p>
+          <p className="text-body-sm text-fg-muted">
+            Monte esta tela com os builders do DS —{" "}
+            <code className="rounded-radius-sm bg-bg-muted px-pad-xs py-[1px] text-caption-sm">
+              /ds-create-crud
+            </code>
+            ,{" "}
+            <code className="rounded-radius-sm bg-bg-muted px-pad-xs py-[1px] text-caption-sm">
+              /ds-create-list
+            </code>{" "}
+            ou{" "}
+            <code className="rounded-radius-sm bg-bg-muted px-pad-xs py-[1px] text-caption-sm">
+              /ds-create-dashboard
+            </code>{" "}
+            — e troque o stub pela tela no mapa de rotas.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Registro de rotas: href → factory de conteúdo. Adicione telas reais aqui
+ * (ex.: `"#/app/clientes": () => <ClientesScreen />`).
+ */
+export const ROUTES: Record<string, () => ReactNode> = {
+  "#/app/inicio": () => <StubPage href="#/app/inicio" />,
+  "#/app/clientes": () => <StubPage href="#/app/clientes" />,
+  "#/app/relatorios/vendas": () => <StubPage href="#/app/relatorios/vendas" />,
+  "#/app/relatorios/desempenho": () => (
+    <StubPage href="#/app/relatorios/desempenho" />
+  ),
+  "#/config/perfil": () => <StubPage href="#/config/perfil" />,
+  "#/config/equipe": () => <StubPage href="#/config/equipe" />,
+};
+
+/** Resolve o conteúdo de um href, com placeholder pra rota não registrada. */
+export function resolveRoute(href: string): ReactNode {
+  const route = ROUTES[href];
+  if (route) return route();
+  return (
+    <div className="grid h-full min-h-[60vh] place-items-center">
+      <p className="text-body-sm text-fg-muted">Rota não encontrada: {href}</p>
+    </div>
+  );
+}

package/dist-lib/ai/exemplos/chat/chat-screen.tsx

@@ -0,0 +1,152 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { chatV2Styles, mobileOverlay } from "./chat-v2.styles";
+import { CONVERSATIONS, CONVERSATION_DETAILS, DEFAULT_DETAIL } from "./chat-v2-mocks";
+import type { FilterGroupKey, QueueFilter } from "./chat-v2.types";
+import { useResizable } from "./hooks/use-resizable";
+import { ConversationColumn } from "./components/ConversationColumn";
+import { DetailsColumn, type SectionsState } from "./components/DetailsColumn";
+import { FiltersColumn, FiltersRail, type FiltersState } from "./components/FiltersColumn";
+import { QueueColumn } from "./components/QueueColumn";
+
+/** Em mobile (<md) só uma view fica visível por vez. */
+type MobileView = "list" | "chat" | "details";
+
+export function ChatScreen() {
+  const s = chatV2Styles();
+
+  const [activeId, setActiveId] = useState<string>(CONVERSATIONS[0].id);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [mobileView, setMobileView] = useState<MobileView>("list");
+
+  const handleSelectConversation = (id: string) => {
+    setActiveId(id);
+    setMobileView("chat");
+  };
+
+  // Toggle de detalhes:
+  // - Desktop: alterna o painel lateral (detailsOpen).
+  // - Mobile (<md): navega entre "chat" ↔ "details" SEM fechar o painel.
+  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);
+    }
+  };
+
+  // Filtros multi-seleção (Set por grupo)
+  const [filters, setFilters] = useState<FiltersState>({
+    status: new Set(["open"]),
+    channels: new Set(),
+    categories: new Set(),
+    innerStatus: new Set(),
+  });
+  const toggleFilter = (group: FilterGroupKey, id: string) => {
+    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<QueueFilter>("all");
+
+  const [detailsOpen, setDetailsOpen] = useState(true);
+  const [openSections, setOpenSections] = useState<SectionsState>({
+    contact: true,
+    ticket: true,
+    history: true,
+  });
+  const toggleSection = (id: keyof SectionsState) =>
+    setOpenSections((m) => ({ ...m, [id]: !m[id] }));
+
+  const detailsResize = useResizable({
+    initial: 360,
+    min: 280,
+    max: 520,
+    storageKey: "chat-screen.detailsWidth",
+  });
+
+  const activeConversation =
+    CONVERSATIONS.find((c) => c.id === activeId) ?? CONVERSATIONS[0];
+  const activeDetail =
+    CONVERSATION_DETAILS[activeConversation.id] ?? DEFAULT_DETAIL;
+
+  return (
+    // Conteúdo da página (sem shell). Embrulhe no seu AppShell/layout — o
+    // parent precisa dar altura (h-full/flex) pra a tela de chat preencher.
+    <div className="flex flex-col h-full min-h-0">
+      {/* Body — desktop: 4 colunas lado a lado.
+         Mobile (<md): só uma view visível por vez, fullscreen, controlada por
+         `mobileView` (list → chat → details). Simula navegação de app. */}
+      <div className={s.root()}>
+        {/* Filters: escondido em mobile. `md:contents` mantém a coluna no flex parent. */}
+        <div className={s.filtersWrap()}>
+          {filtersCollapsed ? (
+            <FiltersRail filters={filters} onToggleFilter={toggleFilter} />
+          ) : (
+            <FiltersColumn filters={filters} onToggleFilter={toggleFilter} />
+          )}
+        </div>
+
+        <QueueColumn
+          activeId={activeId}
+          onSelect={handleSelectConversation}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          queueFilter={queueFilter}
+          onQueueFilterChange={setQueueFilter}
+          filtersCollapsed={filtersCollapsed}
+          onToggleFilters={() => setFiltersCollapsed((c) => !c)}
+          className={cn(
+            mobileView === "list"
+              ? `${mobileOverlay.active} max-md:z-[1]`
+              : mobileOverlay.hidden,
+          )}
+        />
+
+        <ConversationColumn
+          conversation={activeConversation}
+          detailsOpen={detailsOpen}
+          onToggleDetails={handleToggleDetails}
+          onBackToList={() => setMobileView("list")}
+          className={cn(
+            mobileView === "chat"
+              ? `${mobileOverlay.active} max-md:z-[2]`
+              : mobileOverlay.hidden,
+          )}
+        />
+
+        {detailsOpen && (
+          <DetailsColumn
+            conversation={activeConversation}
+            detail={activeDetail}
+            openSections={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,
+            )}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ChatScreen;

package/dist-lib/ai/exemplos/chat/chat-v2-mocks.ts

@@ -0,0 +1,171 @@
+import {
+  CheckCircle2,
+  Clock,
+  Crown,
+  Inbox,
+  Mail,
+  MessageSquare,
+  Send,
+  Shield,
+  Users,
+} from "lucide-react";
+import type {
+  ChannelId,
+  Conversation,
+  ConversationDetail,
+  ConversationStatus,
+  FilterGroupKey,
+  FilterItem,
+  Message,
+} from "./chat-v2.types";
+
+/* ── Lookups por canal ──────────────────────────────────────────── */
+
+export const CHANNEL_LABEL: Record<ChannelId, string> = {
+  whatsapp:  "WhatsApp",
+  telegram:  "Telegram",
+  instagram: "Instagram",
+  webchat:   "Web Chat",
+  email:     "Email",
+};
+
+export const CHANNEL_HEX: Record<ChannelId, string> = {
+  whatsapp:  "#25d366",
+  telegram:  "#0088cc",
+  instagram: "#e1306c",
+  webchat:   "#0a3a2e",
+  email:     "#8754ec",
+};
+
+/* ── Status dot (cor por status na sidebar/header) ──────────────── */
+
+export const STATUS_DOT: Record<ConversationStatus, string> = {
+  attending: "var(--color-fg-success)",
+  waiting:   "var(--color-fg-warning)",
+  ai:        "var(--color-fg-info)",
+};
+
+/* ── Conversations (fila) ───────────────────────────────────────── */
+
+export const CONVERSATIONS: Conversation[] = [
+  {
+    id: "#A-2453", name: "Maria Hernandez", initials: "MH", avatarHex: "#f59e0b",
+    channel: "whatsapp", tag: "Royal", tagKind: "warning",
+    status: "attending", statusLabel: "Em atendimento",
+    last: "Quanto seria o investimento inicial?", time: "10:42", unread: 0,
+  },
+  {
+    id: "#A-2455", name: "James Johnson", initials: "JJ", avatarHex: "#0a3a2e",
+    channel: "telegram", tag: "Licenciado", tagKind: "info",
+    status: "waiting", statusLabel: "Em espera",
+    last: "Hey, how are you?", time: "10:30", unread: 2,
+  },
+  {
+    id: "#A-2458", name: "Camila Ribeiro", initials: "CR", avatarHex: "#8754ec",
+    channel: "instagram", tag: "Royal", tagKind: "warning",
+    status: "attending", statusLabel: "Em atendimento",
+    last: "Vou enviar os documentos hoje à tarde", time: "09:55", unread: 1,
+  },
+  {
+    id: "#A-2461", name: "Roberto Souza", initials: "RS", avatarHex: "#0088cc",
+    channel: "whatsapp", tag: "Lead", tagKind: "success",
+    status: "ai", statusLabel: "IA",
+    last: "Obrigado! Vou avaliar a proposta.", time: "Ontem", unread: 0,
+  },
+  {
+    id: "#A-2466", name: "Ana Costa", initials: "AC", avatarHex: "#1cb280",
+    channel: "email", tag: "Licenciado", tagKind: "info",
+    status: "waiting", statusLabel: "Em espera",
+    last: "Bom dia! Quando podemos conversar?", time: "Ontem", unread: 0,
+  },
+  {
+    id: "#A-2470", name: "Pedro Pereira", initials: "PP", avatarHex: "#ef4444",
+    channel: "webchat", tag: "Lead", tagKind: "success",
+    status: "attending", statusLabel: "Em atendimento",
+    last: "Recebi os materiais, muito bons!", time: "Seg", unread: 0,
+  },
+];
+
+/* ── Filtros (sidebar esquerda) ─────────────────────────────────── */
+
+export const STATUS_WORKFLOW: FilterItem[] = [
+  { id: "open",     name: "Abertos",    count: 24, hasUnread: true,  icon: Inbox },
+  { id: "pending",  name: "Pendentes",  count: 6,                    icon: Clock },
+  { id: "resolved", name: "Resolvidos", count: 18,                   icon: CheckCircle2 },
+];
+
+export const CHANNELS_LIST: FilterItem[] = [
+  { id: "whatsapp",  name: "WhatsApp",  count: 12, hasUnread: true, color: "#25d366", icon: MessageSquare },
+  { id: "telegram",  name: "Telegram",  count: 4,                    color: "#0088cc", icon: Send },
+  { id: "instagram", name: "Instagram", count: 5,                    color: "#e1306c", icon: MessageSquare },
+  { id: "webchat",   name: "Web Chat",  count: 2,                    color: "#0a3a2e", icon: MessageSquare },
+  { id: "email",     name: "Email",     count: 1,                    color: "#8754ec", icon: Mail },
+];
+
+export const CATEGORIES_LIST: FilterItem[] = [
+  { id: "royal",      name: "Royals",      count: 9,  color: "#f6b51e", icon: Crown },
+  { id: "licenciado", name: "Licenciados", count: 11, color: "#8754ec", icon: Shield },
+  { id: "lead",       name: "Leads",       count: 4,  color: "#70c748", icon: Users },
+];
+
+export const STATUS_INNER_LIST: FilterItem[] = [
+  { id: "attending", name: "Em atendimento", count: 8, color: "var(--color-fg-success)" },
+  { id: "waiting",   name: "Em espera",      count: 7, color: "var(--color-fg-warning)" },
+  { id: "ai",        name: "IA",             count: 9, color: "var(--color-fg-info)" },
+];
+
+/* ── Ordem canônica dos 4 grupos de filtros ───────────────────── */
+
+/**
+ * Fonte única dos grupos de filtros. Consumido por `FiltersColumn` (com
+ * `title`) e `FiltersRail` (sem `title`, divisor entre grupos).
+ */
+export const FILTER_GROUPS: {
+  group: FilterGroupKey;
+  title: string;
+  items: FilterItem[];
+}[] = [
+  { group: "status",      title: "STATUS",         items: STATUS_WORKFLOW },
+  { group: "channels",    title: "CANAIS",         items: CHANNELS_LIST },
+  { group: "categories",  title: "CATEGORIAS",     items: CATEGORIES_LIST },
+  { group: "innerStatus", title: "STATUS INTERNO", items: STATUS_INNER_LIST },
+];
+
+/* ── Conversation details (painel direito) ──────────────────────── */
+
+export const CONVERSATION_DETAILS: Record<string, ConversationDetail> = {
+  "#A-2453": {
+    phone: "+55 11 98765-4321",
+    email: "maria.hernandez@example.com",
+    firstContact: "12 mar 2024",
+    assignedTo: "Você",
+    createdAt: "Hoje, 09:30",
+    extraTags: ["VIP", "Setor financeiro"],
+    history: [
+      { id: "#A-2401", date: "20 abr 2024", subject: "Dúvida sobre comissão",    status: "Resolvido" },
+      { id: "#A-2389", date: "15 abr 2024", subject: "Reativação de conta",      status: "Resolvido" },
+      { id: "#A-2367", date: "10 abr 2024", subject: "Materiais exclusivos",     status: "Resolvido" },
+    ],
+  },
+};
+
+export const DEFAULT_DETAIL: ConversationDetail = {
+  phone: "—",
+  email: "—",
+  firstContact: "—",
+  assignedTo: "—",
+  createdAt: "—",
+  extraTags: [],
+  history: [],
+};
+
+/* ── Sample messages (thread inicial da conversa ativa) ─────────── */
+
+export const SAMPLE_MESSAGES: Message[] = [
+  { id: 1, from: "them", text: "Olá! Bom dia 👋", time: "10:30" },
+  { id: 2, from: "them", text: "Vi a oferta de vocês para licenciados Royal e gostaria de mais informações.", time: "10:30" },
+  { id: 3, from: "me",   text: "Bom dia, Maria! Tudo bem? 😊 Posso te ajudar com toda alegria.", time: "10:32", status: "read" },
+  { id: 4, from: "me",   text: "A oferta para Royals inclui 30% de comissão recorrente, suporte prioritário e materiais exclusivos.", time: "10:32", status: "read" },
+  { id: 5, from: "them", text: "Have good budget for the project.", time: "10:42" },
+  { id: 6, from: "them", text: "Quanto seria o investimento inicial?", time: "10:42" },
+];

package/dist-lib/ai/exemplos/chat/chat-v2.styles.ts

@@ -0,0 +1,23 @@
+import { tv } from "@/utils/tv";
+
+/**
+ * Layout root da página Chat V2 — 4 colunas side-by-side em desktop,
+ * fullscreen overlays em mobile (<md), controladas por `mobileView`.
+ */
+export 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",
+  },
+});
+
+/**
+ * Helpers de className pros 3 estados de mobile view (list/chat/details).
+ * Cada coluna recebe a classe correspondente; em desktop ficam sem efeito.
+ */
+export 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",
+} as const;

package/dist-lib/ai/exemplos/chat/chat-v2.types.ts

@@ -0,0 +1,81 @@
+import type { LucideIcon } from "@/lib/lucide-types";
+
+/* ── Channels (canais de comunicação) ───────────────────────────── */
+
+export type ChannelId =
+  | "whatsapp"
+  | "telegram"
+  | "instagram"
+  | "webchat"
+  | "email";
+
+/* ── Conversation (item da fila) ─────────────────────────────────── */
+
+export type ConvTagKind = "warning" | "info" | "success";
+
+export type ConversationStatus = "attending" | "waiting" | "ai";
+
+export type Conversation = {
+  id: string;
+  name: string;
+  initials: string;
+  avatarHex: string;
+  channel: ChannelId;
+  tag: string;
+  tagKind: ConvTagKind;
+  status: ConversationStatus;
+  statusLabel: string;
+  last: string;
+  time: string;
+  unread: number;
+};
+
+/* ── Details (painel direito da tela) ────────────────────────────── */
+
+export type ConversationHistoryItem = {
+  id: string;
+  subject: string;
+  date: string;
+  status: string;
+};
+
+export type ConversationDetail = {
+  phone: string;
+  email: string;
+  firstContact: string;
+  assignedTo: string;
+  createdAt: string;
+  extraTags: string[];
+  history: ConversationHistoryItem[];
+};
+
+/* ── Filters (sidebar esquerda) ──────────────────────────────────── */
+
+export type FilterGroupKey = "status" | "channels" | "categories" | "innerStatus";
+
+export type FilterItem = {
+  id: string;
+  name: string;
+  count: number;
+  hasUnread?: boolean;
+  /** Cor do dot/ícone leading — aceita CSS var ou hex. */
+  color?: string;
+  /** Componente lucide opcional pra leading. */
+  icon?: LucideIcon;
+};
+
+/* ── Messages (thread) ───────────────────────────────────────────── */
+
+export type MessageStatus = "sent" | "read";
+
+export type Message = {
+  id: number;
+  from: "me" | "them";
+  text: string;
+  time: string;
+  status?: MessageStatus;
+};
+
+/* ── Queue filter chips (Todas / Não lidas / Lidas) ─────────────── */
+
+export type QueueFilter = "all" | "unread" | "read";

package/dist-lib/ai/exemplos/chat/components/ChannelDot/channel-dot.tsx

@@ -0,0 +1,28 @@
+import type { ChannelId } from "../../chat-v2.types";
+import { CHANNEL_HEX, CHANNEL_LABEL } from "../../chat-v2-mocks";
+
+export type ChannelDotProps = {
+  channel: ChannelId;
+  /** Quando true, mostra apenas o dot (sem label). Default: false. */
+  dotOnly?: boolean;
+};
+
+/**
+ * Dot 8px + label do canal. Cor vem de `CHANNEL_HEX`. Usado em
+ * `ConversationListItem`, header de `ConversationColumn` e tooltips.
+ */
+export function ChannelDot({ channel, dotOnly = false }: ChannelDotProps) {
+  return (
+    <span
+      className="inline-flex items-center gap-[4px] text-caption-sm text-fg-muted"
+      title={CHANNEL_LABEL[channel]}
+    >
+      <span
+        className="size-[8px] rounded-radius-full shrink-0"
+        style={{ background: CHANNEL_HEX[channel] }}
+        aria-hidden
+      />
+      {!dotOnly && CHANNEL_LABEL[channel]}
+    </span>
+  );
+}