@adatechnology/notification-ui 0.1.0-rc.1 → 0.1.0-rc.3

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/NotificationProvider.tsx","../src/locales/pt-BR.json","../src/locales/en.json","../src/locales/index.ts","../src/hooks/useNotifications.ts","../src/hooks/queryKeys.ts","../src/hooks/useNotificationStream.ts","../src/hooks/usePreferences.ts","../src/components/NotificationBell.tsx","../src/components/NotificationList.tsx","../src/components/NotificationItem.tsx","../src/components/PreferencesPanel.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n *\n * Provider do pacote. **Não instancia `QueryClient`** — usa o do host (regra de módulos\n * plugáveis §4.2). Instanciar o próprio criaria dois caches na mesma página: a inbox invalidaria\n * um, e a tela do produto continuaria lendo o outro.\n */\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react'\nimport type { NotificationClient } from '@adatechnology/notification-client'\n\nimport { DEFAULT_LOCALE, resolveMessages, type NotificationLocale, type NotificationMessages } from './locales'\n\nexport type NotificationTheme = {\n  /** Classe aplicada na raiz de cada componente — é por onde o host injeta os tokens dele. */\n  readonly rootClassName?: string\n  readonly components?: Partial<Record<string, string>>\n}\n\nexport type NotificationContextValue = {\n  readonly client: NotificationClient\n  readonly messages: NotificationMessages\n  readonly theme: NotificationTheme\n  /** Polling de fallback quando o SSE não está disponível (segundos); `0` desliga. */\n  readonly pollIntervalSeconds: number\n}\n\nconst NotificationContext = createContext<NotificationContextValue | null>(null)\n\nexport type NotificationProviderProps = {\n  readonly client: NotificationClient\n  readonly locale?: NotificationLocale\n  /** Sobrescreve textos pontuais sem trocar o locale inteiro. */\n  readonly messageOverrides?: Partial<NotificationMessages>\n  readonly theme?: NotificationTheme\n  readonly pollIntervalSeconds?: number\n  readonly children: ReactNode\n}\n\nexport function NotificationProvider({\n  client,\n  locale = DEFAULT_LOCALE,\n  messageOverrides,\n  theme = {},\n  pollIntervalSeconds = 60,\n  children,\n}: NotificationProviderProps) {\n  const value = useMemo<NotificationContextValue>(\n    () => ({\n      client,\n      messages: { ...resolveMessages(locale), ...messageOverrides },\n      theme,\n      pollIntervalSeconds,\n    }),\n    [client, locale, messageOverrides, theme, pollIntervalSeconds],\n  )\n\n  return <NotificationContext.Provider value={value}>{children}</NotificationContext.Provider>\n}\n\nexport function useNotificationContext(): NotificationContextValue {\n  const context = useContext(NotificationContext)\n  if (!context) throw new Error('notification-ui: componente usado fora de <NotificationProvider>')\n  return context\n}\n","{\n  \"bell.label\": \"Notificações\",\n  \"bell.unreadSuffix\": \"não lidas\",\n  \"list.title\": \"Notificações\",\n  \"list.empty\": \"Nenhuma notificação por aqui.\",\n  \"list.loading\": \"Carregando…\",\n  \"list.error\": \"Não foi possível carregar suas notificações.\",\n  \"list.retry\": \"Tentar de novo\",\n  \"list.loadMore\": \"Carregar mais\",\n  \"list.markAllAsRead\": \"Marcar todas como lidas\",\n  \"item.markAsRead\": \"Marcar como lida\",\n  \"item.delete\": \"Excluir\",\n  \"item.unread\": \"Não lida\",\n  \"preferences.title\": \"Preferências de notificação\",\n  \"preferences.description\": \"Escolha por onde você quer ser avisado em cada assunto.\",\n  \"preferences.save\": \"Salvar preferências\",\n  \"preferences.saved\": \"Preferências salvas.\",\n  \"preferences.error\": \"Não foi possível salvar. Tente de novo.\",\n  \"preferences.empty\": \"Nenhuma preferência configurada ainda.\",\n  \"preferences.quietHours\": \"Silêncio entre\",\n  \"preferences.quietHoursTo\": \"e\",\n  \"channel.inbox\": \"No app\",\n  \"channel.push\": \"Push\",\n  \"channel.email\": \"E-mail\",\n  \"channel.whatsapp\": \"WhatsApp\",\n  \"channel.sms\": \"SMS\"\n}\n","{\n  \"bell.label\": \"Notifications\",\n  \"bell.unreadSuffix\": \"unread\",\n  \"list.title\": \"Notifications\",\n  \"list.empty\": \"Nothing here yet.\",\n  \"list.loading\": \"Loading…\",\n  \"list.error\": \"We couldn't load your notifications.\",\n  \"list.retry\": \"Try again\",\n  \"list.loadMore\": \"Load more\",\n  \"list.markAllAsRead\": \"Mark all as read\",\n  \"item.markAsRead\": \"Mark as read\",\n  \"item.delete\": \"Delete\",\n  \"item.unread\": \"Unread\",\n  \"preferences.title\": \"Notification preferences\",\n  \"preferences.description\": \"Choose how you want to be notified about each topic.\",\n  \"preferences.save\": \"Save preferences\",\n  \"preferences.saved\": \"Preferences saved.\",\n  \"preferences.error\": \"Couldn't save. Try again.\",\n  \"preferences.empty\": \"No preferences configured yet.\",\n  \"preferences.quietHours\": \"Quiet between\",\n  \"preferences.quietHoursTo\": \"and\",\n  \"channel.inbox\": \"In app\",\n  \"channel.push\": \"Push\",\n  \"channel.email\": \"Email\",\n  \"channel.whatsapp\": \"WhatsApp\",\n  \"channel.sms\": \"SMS\"\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n *\n * Nenhum texto visível vive em tag ou prop (`web.md` §6). O host sobrescreve chaves pontuais via\n * `messageOverrides` sem precisar fornecer um locale inteiro.\n */\n\nimport ptBR from './pt-BR.json'\nimport en from './en.json'\n\nexport type NotificationMessages = typeof ptBR\nexport type NotificationLocale = 'pt-BR' | 'en'\n\nexport const DEFAULT_LOCALE: NotificationLocale = 'pt-BR'\n\nconst MESSAGES_BY_LOCALE: Record<NotificationLocale, NotificationMessages> = {\n  'pt-BR': ptBR,\n  en: en as NotificationMessages,\n}\n\nexport function resolveMessages(locale: NotificationLocale): NotificationMessages {\n  return MESSAGES_BY_LOCALE[locale] ?? MESSAGES_BY_LOCALE[DEFAULT_LOCALE]\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n *\n * Camada headless — a válvula de escape do item 4 da §4 da regra de módulos plugáveis: quando a\n * tela default não serve, o produto monta a própria sobre estes mesmos hooks e continua herdando\n * upgrades de lógica.\n */\n\nimport { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport type { NotificationSummary } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { NOTIFICATION_QUERY_KEYS } from './queryKeys'\n\nexport type UseNotificationsOptions = {\n  readonly category?: string\n  readonly read?: boolean\n  readonly perPage?: number\n}\n\nexport function useNotifications(options: UseNotificationsOptions = {}) {\n  const { client } = useNotificationContext()\n\n  return useInfiniteQuery({\n    queryKey: NOTIFICATION_QUERY_KEYS.list({ category: options.category, read: options.read }),\n    initialPageParam: undefined as string | undefined,\n    queryFn: ({ pageParam }) =>\n      client.listNotifications({\n        category: options.category,\n        read: options.read,\n        cursor: pageParam,\n        perPage: options.perPage,\n      }),\n    getNextPageParam: (lastPage) => lastPage.nextCursor,\n  })\n}\n\nexport function useUnreadCount() {\n  const { client, pollIntervalSeconds } = useNotificationContext()\n\n  return useQuery({\n    queryKey: NOTIFICATION_QUERY_KEYS.unreadCount(),\n    queryFn: () => client.countUnread(),\n    // Polling é o fallback de quem não ligou o SSE. Com o stream ativo,\n    // `useNotificationStream` invalida esta chave e o refetch acontece na hora.\n    refetchInterval: pollIntervalSeconds > 0 ? pollIntervalSeconds * 1000 : false,\n  })\n}\n\nexport function useMarkAsRead() {\n  const { client } = useNotificationContext()\n  const queryClient = useQueryClient()\n\n  return useMutation({\n    mutationFn: (id: string) => client.markAsRead(id),\n    async onMutate(id: string) {\n      // Atualização otimista: marcar como lida é ação de um clique, e esperar o round-trip para\n      // o badge cair faz a interface parecer travada.\n      await queryClient.cancelQueries({ queryKey: NOTIFICATION_QUERY_KEYS.all })\n      const previousCount = queryClient.getQueryData<number>(NOTIFICATION_QUERY_KEYS.unreadCount())\n\n      queryClient.setQueryData<number>(NOTIFICATION_QUERY_KEYS.unreadCount(), (current) =>\n        current === undefined ? current : Math.max(0, current - 1),\n      )\n      return { previousCount, id }\n    },\n    onError(_error, _id, context) {\n      // Rollback: sem isto o badge ficaria mentindo até o próximo refetch.\n      if (context?.previousCount !== undefined) {\n        queryClient.setQueryData(NOTIFICATION_QUERY_KEYS.unreadCount(), context.previousCount)\n      }\n    },\n    onSettled() {\n      void queryClient.invalidateQueries({ queryKey: NOTIFICATION_QUERY_KEYS.all })\n    },\n  })\n}\n\nexport function useMarkAllAsRead() {\n  const { client } = useNotificationContext()\n  const queryClient = useQueryClient()\n\n  return useMutation({\n    mutationFn: () => client.markAllAsRead(),\n    onSettled() {\n      void queryClient.invalidateQueries({ queryKey: NOTIFICATION_QUERY_KEYS.all })\n    },\n  })\n}\n\nexport function useDeleteNotification() {\n  const { client } = useNotificationContext()\n  const queryClient = useQueryClient()\n\n  return useMutation({\n    mutationFn: (id: string) => client.deleteNotification(id),\n    onSettled() {\n      void queryClient.invalidateQueries({ queryKey: NOTIFICATION_QUERY_KEYS.all })\n    },\n  })\n}\n\n/** Achata as páginas do infinite query — a lista quase sempre quer o array direto. */\nexport function flattenNotificationPages(\n  pages: readonly { data: readonly NotificationSummary[] }[] | undefined,\n): readonly NotificationSummary[] {\n  return pages?.flatMap((page) => page.data) ?? []\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n *\n * Chaves centralizadas: o sino e a lista leem o mesmo `unreadCount`, e uma invalidação precisa\n * atingir os dois. Chave montada inline em cada hook é como badge e lista passam a mostrar\n * números diferentes.\n */\n\nexport const NOTIFICATION_QUERY_KEYS = {\n  all: ['notifications'] as const,\n  list: (filters: { category?: string; read?: boolean }) => ['notifications', 'list', filters] as const,\n  unreadCount: () => ['notifications', 'unread-count'] as const,\n  preferences: () => ['notifications', 'preferences'] as const,\n  templates: () => ['notifications', 'templates'] as const,\n} as const\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { useEffect } from 'react'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { subscribeToNotificationStream } from '@adatechnology/notification-client'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { NOTIFICATION_QUERY_KEYS } from './queryKeys'\n\nexport type UseNotificationStreamOptions = {\n  /** Desligado por omissão: abrir SSE é decisão do host, que sabe se o backend expõe a rota. */\n  readonly enabled?: boolean\n  readonly onEvent?: (event: { event: string; data: unknown }) => void\n}\n\n/**\n * Liga o SSE do inbox ao cache do TanStack: cada evento invalida as chaves, e o badge e a lista\n * atualizam juntos. `useEffect` aqui é o uso correto do hook — sincronizar com um sistema externo\n * (`react.md`, \"useEffect só para sincronizar com sistemas externos\"), não transformar dado.\n */\nexport function useNotificationStream(options: UseNotificationStreamOptions = {}): void {\n  const { client } = useNotificationContext()\n  const queryClient = useQueryClient()\n  const enabled = options.enabled ?? false\n  const onEvent = options.onEvent\n\n  useEffect(() => {\n    if (!enabled) return\n\n    let subscription: { close(): void } | undefined\n    let cancelled = false\n\n    void client.resolveStreamRequest().then(({ url, headers }) => {\n      // A resolução do token é assíncrona; se o componente desmontou nesse meio-tempo, não abre\n      // conexão nenhuma — senão sobraria um stream órfão a cada navegação rápida.\n      if (cancelled) return\n\n      subscription = subscribeToNotificationStream({\n        url,\n        headers,\n        onEvent: (event) => {\n          onEvent?.(event)\n          void queryClient.invalidateQueries({ queryKey: NOTIFICATION_QUERY_KEYS.all })\n        },\n      })\n    })\n\n    return () => {\n      cancelled = true\n      subscription?.close()\n    }\n  }, [client, queryClient, enabled, onEvent])\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport type { NotificationPreference } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { NOTIFICATION_QUERY_KEYS } from './queryKeys'\n\nexport function usePreferences() {\n  const { client } = useNotificationContext()\n\n  return useQuery({\n    queryKey: NOTIFICATION_QUERY_KEYS.preferences(),\n    queryFn: () => client.getPreferences(),\n  })\n}\n\nexport function useUpdatePreferences() {\n  const { client } = useNotificationContext()\n  const queryClient = useQueryClient()\n\n  return useMutation({\n    mutationFn: (preferences: readonly NotificationPreference[]) => client.updatePreferences(preferences),\n    onSuccess(saved) {\n      // A resposta já é o estado persistido — usar direto evita um refetch e o piscar do painel\n      // entre o valor otimista e o confirmado.\n      queryClient.setQueryData(NOTIFICATION_QUERY_KEYS.preferences(), saved)\n    },\n  })\n}\n\nexport function useTemplates() {\n  const { client } = useNotificationContext()\n\n  return useQuery({\n    queryKey: NOTIFICATION_QUERY_KEYS.templates(),\n    queryFn: () => client.listTemplates(),\n  })\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { Bell } from 'lucide-react'\nimport clsx from 'clsx'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { useUnreadCount } from '../hooks/useNotifications'\n\nexport type NotificationBellProps = {\n  readonly onClick?: () => void\n  readonly className?: string\n  /** Acima disso o badge mostra `99+`; um número de 4 dígitos estoura o desenho do badge. */\n  readonly maxBadgeCount?: number\n}\n\nconst DEFAULT_MAX_BADGE_COUNT = 99\n\nexport function NotificationBell({ onClick, className, maxBadgeCount = DEFAULT_MAX_BADGE_COUNT }: NotificationBellProps) {\n  const { messages, theme } = useNotificationContext()\n  const { data: unreadCount = 0 } = useUnreadCount()\n\n  const hasUnread = unreadCount > 0\n  const badgeLabel = unreadCount > maxBadgeCount ? `${maxBadgeCount}+` : String(unreadCount)\n  const accessibleLabel = hasUnread\n    ? `${messages['bell.label']}: ${unreadCount} ${messages['bell.unreadSuffix']}`\n    : messages['bell.label']\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={clsx('adn-bell', theme.rootClassName, className)}\n      // Botão só-ícone exige rótulo acessível (regra de ícones, `web.md` §9).\n      aria-label={accessibleLabel}\n    >\n      {/* Decorativo: o rótulo acessível já está no botão, e anunciar o ícone repetiria a ação. */}\n      <Bell className=\"adn-bell__icon\" aria-hidden=\"true\" />\n      {hasUnread ? (\n        // `aria-live` para leitor de tela anunciar a mudança do contador sem o usuário reabrir\n        // o menu; `polite` porque notificação nova não deve interromper o que ele está lendo.\n        <span className=\"adn-bell__badge\" aria-live=\"polite\">\n          {badgeLabel}\n        </span>\n      ) : null}\n    </button>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { CheckCheck, Inbox, RotateCw } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { NotificationSummary } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { flattenNotificationPages, useMarkAllAsRead, useNotifications, useUnreadCount } from '../hooks/useNotifications'\nimport { NotificationItem } from './NotificationItem'\n\nexport type NotificationListProps = {\n  readonly category?: string\n  readonly onSelect?: (notification: NotificationSummary) => void\n  readonly className?: string\n  /** Slot: o host troca a linha sem reimplementar a lista (regra §4.3, slots e overrides). */\n  readonly components?: { readonly Item?: typeof NotificationItem }\n}\n\nexport function NotificationList({ category, onSelect, className, components }: NotificationListProps) {\n  const { messages, theme } = useNotificationContext()\n  const query = useNotifications({ category })\n  const { data: unreadCount = 0 } = useUnreadCount()\n  const markAllAsRead = useMarkAllAsRead()\n\n  const Item = components?.Item ?? NotificationItem\n  const notifications = flattenNotificationPages(query.data?.pages)\n\n  return (\n    <section className={clsx('adn-list', theme.rootClassName, className)} aria-label={messages['list.title']}>\n      <header className=\"adn-list__header\">\n        <h2 className=\"adn-list__title\">{messages['list.title']}</h2>\n        {unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"adn-list__bulk-action\"\n            onClick={() => markAllAsRead.mutate()}\n            disabled={markAllAsRead.isPending}\n          >\n            <CheckCheck className=\"adn-list__bulk-icon\" aria-hidden=\"true\" />\n            {messages['list.markAllAsRead']}\n          </button>\n        ) : null}\n      </header>\n\n      {query.isPending ? <p className=\"adn-list__state\">{messages['list.loading']}</p> : null}\n\n      {query.isError ? (\n        <div className=\"adn-list__state adn-list__state--error\">\n          <p>{messages['list.error']}</p>\n          <button type=\"button\" className=\"adn-list__retry\" onClick={() => void query.refetch()}>\n            <RotateCw className=\"adn-list__retry-icon\" aria-hidden=\"true\" />\n            {messages['list.retry']}\n          </button>\n        </div>\n      ) : null}\n\n      {!query.isPending && !query.isError && notifications.length === 0 ? (\n        <div className=\"adn-list__state adn-list__state--empty\">\n          <Inbox className=\"adn-list__empty-icon\" aria-hidden=\"true\" />\n          <p>{messages['list.empty']}</p>\n        </div>\n      ) : null}\n\n      {notifications.length > 0 ? (\n        <ul className=\"adn-list__items\">\n          {notifications.map((notification) => (\n            <Item key={notification.id} notification={notification} onSelect={onSelect} />\n          ))}\n        </ul>\n      ) : null}\n\n      {query.hasNextPage ? (\n        <button\n          type=\"button\"\n          className=\"adn-list__load-more\"\n          onClick={() => void query.fetchNextPage()}\n          disabled={query.isFetchingNextPage}\n        >\n          {messages['list.loadMore']}\n        </button>\n      ) : null}\n    </section>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { Check, Trash2 } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { NotificationSummary } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { useDeleteNotification, useMarkAsRead } from '../hooks/useNotifications'\n\nexport type NotificationItemProps = {\n  readonly notification: NotificationSummary\n  readonly onSelect?: (notification: NotificationSummary) => void\n  readonly className?: string\n}\n\nexport function NotificationItem({ notification, onSelect, className }: NotificationItemProps) {\n  const { messages } = useNotificationContext()\n  const markAsRead = useMarkAsRead()\n  const deleteNotification = useDeleteNotification()\n\n  const isUnread = notification.readAt === undefined\n\n  function handleSelect(): void {\n    if (isUnread) markAsRead.mutate(notification.id)\n    onSelect?.(notification)\n  }\n\n  return (\n    <li className={clsx('adn-item', isUnread && 'adn-item--unread', className)}>\n      {/* Semântico: a linha inteira é clicável e precisa ser alcançável por teclado — `button`\n          entrega Enter, Espaço e foco de graça, e um `div` com onClick não (web.md §Acessibilidade). */}\n      <button type=\"button\" className=\"adn-item__main\" onClick={handleSelect}>\n        <span className=\"adn-item__title\">{notification.title}</span>\n        <span className=\"adn-item__body\">{notification.body}</span>\n        {isUnread ? <span className=\"adn-item__unread-dot\" aria-label={messages['item.unread']} /> : null}\n      </button>\n\n      <div className=\"adn-item__actions\">\n        {isUnread ? (\n          <button\n            type=\"button\"\n            className=\"adn-item__action\"\n            onClick={() => markAsRead.mutate(notification.id)}\n            disabled={markAsRead.isPending}\n            aria-label={messages['item.markAsRead']}\n            title={messages['item.markAsRead']}\n          >\n            <Check className=\"adn-item__action-icon\" aria-hidden=\"true\" />\n          </button>\n        ) : null}\n\n        <button\n          type=\"button\"\n          className=\"adn-item__action adn-item__action--danger\"\n          onClick={() => deleteNotification.mutate(notification.id)}\n          disabled={deleteNotification.isPending}\n          aria-label={messages['item.delete']}\n          title={messages['item.delete']}\n        >\n          {/* Ação destrutiva: ícone reforça o peso antes do clique (regra de ícones). */}\n          <Trash2 className=\"adn-item__action-icon\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </li>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { useState } from 'react'\nimport { Save } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { NotificationPreference } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { usePreferences, useUpdatePreferences } from '../hooks/usePreferences'\n\nexport type PreferencesPanelProps = {\n  readonly className?: string\n}\n\nfunction channelLabelKey(channel: string): string {\n  return `channel.${channel}`\n}\n\nexport function PreferencesPanel({ className }: PreferencesPanelProps) {\n  const { messages, theme } = useNotificationContext()\n  const { data: saved = [], isPending } = usePreferences()\n  const updatePreferences = useUpdatePreferences()\n\n  // Rascunho local só existe entre abrir e salvar: `undefined` significa \"ainda não mexeu\", e é o\n  // que faz o painel refletir o servidor sem sobrescrever edição em andamento a cada refetch.\n  const [draft, setDraft] = useState<NotificationPreference[] | undefined>(undefined)\n  const preferences = draft ?? saved\n\n  function toggleChannel(target: NotificationPreference): void {\n    setDraft(\n      preferences.map((preference) =>\n        preference.category === target.category && preference.channel === target.channel\n          ? { ...preference, enabled: !preference.enabled }\n          : preference,\n      ),\n    )\n  }\n\n  function handleSave(): void {\n    updatePreferences.mutate(preferences, { onSuccess: () => setDraft(undefined) })\n  }\n\n  if (isPending) return <p className=\"adn-preferences__state\">{messages['list.loading']}</p>\n\n  return (\n    <section className={clsx('adn-preferences', theme.rootClassName, className)}>\n      <header className=\"adn-preferences__header\">\n        <h2 className=\"adn-preferences__title\">{messages['preferences.title']}</h2>\n        <p className=\"adn-preferences__description\">{messages['preferences.description']}</p>\n      </header>\n\n      {preferences.length === 0 ? (\n        <p className=\"adn-preferences__state\">{messages['preferences.empty']}</p>\n      ) : (\n        <ul className=\"adn-preferences__items\">\n          {preferences.map((preference) => {\n            const inputId = `adn-pref-${preference.category}-${preference.channel}`\n            return (\n              <li key={inputId} className=\"adn-preferences__item\">\n                {/* `label` associado por `htmlFor`: aumenta a área de toque e é o que faz o\n                    leitor de tela anunciar canal e estado juntos. */}\n                <label className=\"adn-preferences__label\" htmlFor={inputId}>\n                  <input\n                    id={inputId}\n                    type=\"checkbox\"\n                    className=\"adn-preferences__checkbox\"\n                    checked={preference.enabled}\n                    onChange={() => toggleChannel(preference)}\n                  />\n                  <span className=\"adn-preferences__category\">{preference.category}</span>\n                  <span className=\"adn-preferences__channel\">\n                    {messages[channelLabelKey(preference.channel) as keyof typeof messages] ?? preference.channel}\n                  </span>\n                </label>\n\n                {preference.quietHoursStart && preference.quietHoursEnd ? (\n                  <span className=\"adn-preferences__quiet-hours\">\n                    {messages['preferences.quietHours']} {preference.quietHoursStart}{' '}\n                    {messages['preferences.quietHoursTo']} {preference.quietHoursEnd}\n                  </span>\n                ) : null}\n              </li>\n            )\n          })}\n        </ul>\n      )}\n\n      <footer className=\"adn-preferences__footer\">\n        {/* Ação primária de formulário com convenção clara → ícone (regra de ícones, web.md §9). */}\n        <button\n          type=\"button\"\n          className=\"adn-preferences__save\"\n          onClick={handleSave}\n          disabled={updatePreferences.isPending || draft === undefined}\n        >\n          <Save className=\"adn-preferences__save-icon\" aria-hidden=\"true\" />\n          {messages['preferences.save']}\n        </button>\n\n        {updatePreferences.isSuccess && draft === undefined ? (\n          <span className=\"adn-preferences__feedback\" role=\"status\">\n            {messages['preferences.saved']}\n          </span>\n        ) : null}\n        {updatePreferences.isError ? (\n          <span className=\"adn-preferences__feedback adn-preferences__feedback--error\" role=\"alert\">\n            {messages['preferences.error']}\n          </span>\n        ) : null}\n      </footer>\n    </section>\n  )\n}\n"],"mappings":"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","names":["createContext","useContext","useMemo","DEFAULT_LOCALE","MESSAGES_BY_LOCALE","ptBR","en","resolveMessages","locale","NotificationContext","createContext","NotificationProvider","client","locale","DEFAULT_LOCALE","messageOverrides","theme","pollIntervalSeconds","children","value","useMemo","messages","resolveMessages","Provider","useNotificationContext","context","useContext","Error","useInfiniteQuery","useMutation","useQuery","useQueryClient","NOTIFICATION_QUERY_KEYS","all","list","filters","unreadCount","preferences","templates","useNotifications","options","client","useNotificationContext","useInfiniteQuery","queryKey","NOTIFICATION_QUERY_KEYS","list","category","read","initialPageParam","undefined","queryFn","pageParam","listNotifications","cursor","perPage","getNextPageParam","lastPage","nextCursor","useUnreadCount","pollIntervalSeconds","useQuery","unreadCount","countUnread","refetchInterval","useMarkAsRead","queryClient","useQueryClient","useMutation","mutationFn","id","markAsRead","onMutate","cancelQueries","all","previousCount","getQueryData","setQueryData","current","Math","max","onError","_error","_id","context","onSettled","invalidateQueries","useMarkAllAsRead","markAllAsRead","useDeleteNotification","deleteNotification","flattenNotificationPages","pages","flatMap","page","data","useEffect","useQueryClient","subscribeToNotificationStream","useNotificationStream","options","client","useNotificationContext","queryClient","useQueryClient","enabled","onEvent","useEffect","subscription","cancelled","resolveStreamRequest","then","url","headers","subscribeToNotificationStream","event","invalidateQueries","queryKey","NOTIFICATION_QUERY_KEYS","all","close","useMutation","useQuery","useQueryClient","usePreferences","client","useNotificationContext","useQuery","queryKey","NOTIFICATION_QUERY_KEYS","preferences","queryFn","getPreferences","useUpdatePreferences","queryClient","useQueryClient","useMutation","mutationFn","updatePreferences","onSuccess","saved","setQueryData","useTemplates","templates","listTemplates","Bell","clsx","DEFAULT_MAX_BADGE_COUNT","NotificationBell","onClick","className","maxBadgeCount","messages","theme","useNotificationContext","data","unreadCount","useUnreadCount","hasUnread","badgeLabel","String","accessibleLabel","button","type","clsx","rootClassName","aria-label","Bell","aria-hidden","span","aria-live","CheckCheck","Inbox","RotateCw","clsx","Check","Trash2","clsx","NotificationItem","notification","onSelect","className","messages","useNotificationContext","markAsRead","useMarkAsRead","deleteNotification","useDeleteNotification","isUnread","readAt","undefined","handleSelect","mutate","id","li","clsx","button","type","onClick","span","title","body","aria-label","div","disabled","isPending","Check","aria-hidden","Trash2","NotificationList","category","onSelect","className","components","messages","theme","useNotificationContext","query","useNotifications","data","unreadCount","useUnreadCount","markAllAsRead","useMarkAllAsRead","Item","NotificationItem","notifications","flattenNotificationPages","pages","section","clsx","rootClassName","aria-label","header","h2","button","type","onClick","mutate","disabled","isPending","CheckCheck","aria-hidden","p","isError","div","refetch","RotateCw","length","Inbox","ul","map","notification","key","id","hasNextPage","fetchNextPage","isFetchingNextPage","useState","Save","clsx","channelLabelKey","channel","PreferencesPanel","className","messages","theme","useNotificationContext","data","saved","isPending","usePreferences","updatePreferences","useUpdatePreferences","draft","setDraft","useState","undefined","preferences","toggleChannel","target","map","preference","category","enabled","handleSave","mutate","onSuccess","p","section","clsx","rootClassName","header","h2","length","ul","inputId","li","key","label","htmlFor","input","id","type","checked","onChange","span","quietHoursStart","quietHoursEnd","footer","button","onClick","disabled","Save","aria-hidden","isSuccess","role","isError"]}
+{"version":3,"sources":["../src/components/NotificationBell.tsx","../src/components/NotificationList.tsx","../src/components/NotificationItem.tsx","../src/components/PreferencesPanel.tsx","../src/components/NotificationsWorkspace.tsx","../src/components/NotificationSettingsWorkspace.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { Bell } from 'lucide-react'\nimport clsx from 'clsx'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { useUnreadCount } from '../hooks/useNotifications'\n\nexport type NotificationBellProps = {\n  readonly onClick?: () => void\n  readonly className?: string\n  /** Acima disso o badge mostra `99+`; um número de 4 dígitos estoura o desenho do badge. */\n  readonly maxBadgeCount?: number\n}\n\nconst DEFAULT_MAX_BADGE_COUNT = 99\n\nexport function NotificationBell({\n  onClick,\n  className,\n  maxBadgeCount = DEFAULT_MAX_BADGE_COUNT,\n}: NotificationBellProps) {\n  const { messages, theme } = useNotificationContext()\n  const { data: unreadCount = 0 } = useUnreadCount()\n\n  const hasUnread = unreadCount > 0\n  const badgeLabel = unreadCount > maxBadgeCount ? `${maxBadgeCount}+` : String(unreadCount)\n  const accessibleLabel = hasUnread\n    ? `${messages['bell.label']}: ${unreadCount} ${messages['bell.unreadSuffix']}`\n    : messages['bell.label']\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={clsx('adn-bell', theme.rootClassName, className)}\n      // Botão só-ícone exige rótulo acessível (regra de ícones, `web.md` §9).\n      aria-label={accessibleLabel}\n    >\n      {/* Decorativo: o rótulo acessível já está no botão, e anunciar o ícone repetiria a ação. */}\n      <Bell className=\"adn-bell__icon\" aria-hidden=\"true\" />\n      {hasUnread ? (\n        // `aria-live` para leitor de tela anunciar a mudança do contador sem o usuário reabrir\n        // o menu; `polite` porque notificação nova não deve interromper o que ele está lendo.\n        <span className=\"adn-bell__badge\" aria-live=\"polite\">\n          {badgeLabel}\n        </span>\n      ) : null}\n    </button>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { CheckCheck, Inbox, RotateCw } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { ReactNode } from 'react'\nimport type { NotificationSummary } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { flattenNotificationPages, useMarkAllAsRead, useNotifications, useUnreadCount } from '../hooks/useNotifications'\nimport { NotificationItem } from './NotificationItem'\n\n/** Três linhas: o bastante para a lista já ter a forma dela antes de ter conteúdo. */\nconst SKELETON_ROWS = [0, 1, 2]\n\nexport type NotificationListProps = {\n  readonly category?: string\n  readonly onSelect?: (notification: NotificationSummary) => void\n  readonly className?: string\n  /**\n   * Substitui o vazio padrão. Quem decide se está vazio é a lista — o host que desenhava o próprio\n   * vazio ao lado dela mostrava \"nada por aqui\" embaixo das notificações que estavam ali.\n   */\n  readonly renderEmpty?: () => ReactNode\n  /** Slot: o host troca a linha sem reimplementar a lista (regra §4.3, slots e overrides). */\n  readonly components?: { readonly Item?: typeof NotificationItem }\n}\n\nexport function NotificationList({ category, onSelect, className, renderEmpty, components }: NotificationListProps) {\n  const { messages, theme } = useNotificationContext()\n  const query = useNotifications({ category })\n  const { data: unreadCount = 0 } = useUnreadCount()\n  const markAllAsRead = useMarkAllAsRead()\n\n  const Item = components?.Item ?? NotificationItem\n  const notifications = flattenNotificationPages(query.data?.pages)\n  const isEmpty = !query.isPending && !query.isError && notifications.length === 0\n\n  return (\n    <section className={clsx('adn-list', theme.rootClassName, className)} aria-label={messages['list.title']}>\n      <header className=\"adn-list__header\">\n        <div className=\"adn-list__heading\">\n          <h2 className=\"adn-list__title\">{messages['list.title']}</h2>\n          {/* O contador estava só no sino. Quem abriu a tela pelo menu lateral não passou pelo sino,\n              e ficava sem saber quantas ainda pedem atenção. */}\n          {unreadCount > 0 ? (\n            <span className=\"adn-list__count\" role=\"status\" aria-label={`${unreadCount} ${messages['list.unread']}`}>\n              {unreadCount}\n            </span>\n          ) : null}\n        </div>\n\n        {unreadCount > 0 ? (\n          <button\n            type=\"button\"\n            className=\"adn-list__bulk-action\"\n            onClick={() => markAllAsRead.mutate()}\n            disabled={markAllAsRead.isPending}\n          >\n            <CheckCheck className=\"adn-list__bulk-icon\" aria-hidden=\"true\" />\n            {messages['list.markAllAsRead']}\n          </button>\n        ) : null}\n      </header>\n\n      {/* Esqueleto com a forma da linha real, em vez de \"Carregando…\" centralizado: o texto some e o\n          conteúdo entra de altura diferente, e a tela pisca a cada carregamento. */}\n      {query.isPending ? (\n        <div className=\"adn-list__skeleton\" role=\"status\" aria-label={messages['list.loading']}>\n          {SKELETON_ROWS.map((row) => (\n            <span key={row} className=\"adn-list__skeleton-row\" />\n          ))}\n        </div>\n      ) : null}\n\n      {query.isError ? (\n        <div className=\"adn-list__state adn-list__state--error\" role=\"alert\">\n          <p>{messages['list.error']}</p>\n          <button type=\"button\" className=\"adn-list__retry\" onClick={() => void query.refetch()}>\n            <RotateCw className=\"adn-list__retry-icon\" aria-hidden=\"true\" />\n            {messages['list.retry']}\n          </button>\n        </div>\n      ) : null}\n\n      {isEmpty\n        ? (renderEmpty?.() ?? (\n            <div className=\"adn-list__state adn-list__state--empty\">\n              <Inbox className=\"adn-list__empty-icon\" aria-hidden=\"true\" />\n              <p>{messages['list.empty']}</p>\n            </div>\n          ))\n        : null}\n\n      {notifications.length > 0 ? (\n        <ul className=\"adn-list__items\">\n          {notifications.map((notification) => (\n            <Item key={notification.id} notification={notification} onSelect={onSelect} />\n          ))}\n        </ul>\n      ) : null}\n\n      {query.hasNextPage ? (\n        <div className=\"adn-list__footer\">\n          <button\n            type=\"button\"\n            className=\"adn-list__load-more\"\n            onClick={() => void query.fetchNextPage()}\n            disabled={query.isFetchingNextPage}\n          >\n            {messages['list.loadMore']}\n          </button>\n        </div>\n      ) : null}\n    </section>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { Check, Trash2 } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { NotificationSummary } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { formatNotificationTime, formatNotificationTimestamp } from '../format/notificationTime'\nimport { useDeleteNotification, useMarkAsRead } from '../hooks/useNotifications'\n\nexport type NotificationItemProps = {\n  readonly notification: NotificationSummary\n  readonly onSelect?: (notification: NotificationSummary) => void\n  readonly className?: string\n}\n\nexport function NotificationItem({ notification, onSelect, className }: NotificationItemProps) {\n  const { locale, messages } = useNotificationContext()\n  const markAsRead = useMarkAsRead()\n  const deleteNotification = useDeleteNotification()\n\n  const isUnread = notification.readAt === undefined\n\n  function handleSelect(): void {\n    if (isUnread) markAsRead.mutate(notification.id)\n    onSelect?.(notification)\n  }\n\n  return (\n    <li className={clsx('adn-item', isUnread && 'adn-item--unread', className)}>\n      {/* Semântico: a linha inteira é clicável e precisa ser alcançável por teclado — `button`\n          entrega Enter, Espaço e foco de graça, e um `div` com onClick não (web.md §Acessibilidade). */}\n      <button type=\"button\" className=\"adn-item__main\" onClick={handleSelect}>\n        <span className=\"adn-item__heading\">\n          {/* Marcador à esquerda, na altura do título: sobreposto ao canto, ele cobria a última\n              palavra do texto em linha comprida. */}\n          {isUnread ? <span className=\"adn-item__unread-dot\" aria-label={messages['item.unread']} /> : null}\n          <span className=\"adn-item__title\">{notification.title}</span>\n          {/* `<time>` e não `<span>`: a data legível por máquina é o que um leitor de tela e um\n              agregador conseguem interpretar; o texto visível é o relativo, que é o que se lê. */}\n          <time\n            className=\"adn-item__time\"\n            dateTime={notification.createdAt}\n            title={formatNotificationTimestamp(notification.createdAt, locale)}\n          >\n            {formatNotificationTime(notification.createdAt, locale, new Date())}\n          </time>\n        </span>\n        <span className=\"adn-item__body\">{notification.body}</span>\n      </button>\n\n      <div className=\"adn-item__actions\">\n        {isUnread ? (\n          <button\n            type=\"button\"\n            className=\"adn-item__action\"\n            onClick={() => markAsRead.mutate(notification.id)}\n            disabled={markAsRead.isPending}\n            aria-label={messages['item.markAsRead']}\n            title={messages['item.markAsRead']}\n          >\n            <Check className=\"adn-item__action-icon\" aria-hidden=\"true\" />\n          </button>\n        ) : null}\n\n        <button\n          type=\"button\"\n          className=\"adn-item__action adn-item__action--danger\"\n          onClick={() => deleteNotification.mutate(notification.id)}\n          disabled={deleteNotification.isPending}\n          aria-label={messages['item.delete']}\n          title={messages['item.delete']}\n        >\n          {/* Ação destrutiva: ícone reforça o peso antes do clique (regra de ícones). */}\n          <Trash2 className=\"adn-item__action-icon\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </li>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n */\n\nimport { useState } from 'react'\nimport { Save } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { NotificationPreference } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { usePreferences, useUpdatePreferences } from '../hooks/usePreferences'\n\nexport type PreferencesPanelProps = {\n  readonly className?: string\n}\n\nfunction channelLabelKey(channel: string): string {\n  return `channel.${channel}`\n}\n\nexport function PreferencesPanel({ className }: PreferencesPanelProps) {\n  const { messages, theme } = useNotificationContext()\n  const { data: saved = [], isPending } = usePreferences()\n  const updatePreferences = useUpdatePreferences()\n\n  // Rascunho local só existe entre abrir e salvar: `undefined` significa \"ainda não mexeu\", e é o\n  // que faz o painel refletir o servidor sem sobrescrever edição em andamento a cada refetch.\n  const [draft, setDraft] = useState<NotificationPreference[] | undefined>(undefined)\n  const preferences = draft ?? saved\n\n  function toggleChannel(target: NotificationPreference): void {\n    setDraft(\n      preferences.map((preference) =>\n        preference.category === target.category && preference.channel === target.channel\n          ? { ...preference, enabled: !preference.enabled }\n          : preference,\n      ),\n    )\n  }\n\n  function handleSave(): void {\n    updatePreferences.mutate(preferences, { onSuccess: () => setDraft(undefined) })\n  }\n\n  if (isPending) return <p className=\"adn-preferences__state\">{messages['list.loading']}</p>\n\n  return (\n    <section className={clsx('adn-preferences', theme.rootClassName, className)}>\n      <header className=\"adn-preferences__header\">\n        <h2 className=\"adn-preferences__title\">{messages['preferences.title']}</h2>\n        <p className=\"adn-preferences__description\">{messages['preferences.description']}</p>\n      </header>\n\n      {preferences.length === 0 ? (\n        <p className=\"adn-preferences__state\">{messages['preferences.empty']}</p>\n      ) : (\n        <ul className=\"adn-preferences__items\">\n          {preferences.map((preference) => {\n            const inputId = `adn-pref-${preference.category}-${preference.channel}`\n            return (\n              <li key={inputId} className=\"adn-preferences__item\">\n                {/* `label` associado por `htmlFor`: aumenta a área de toque e é o que faz o\n                    leitor de tela anunciar canal e estado juntos. */}\n                <label className=\"adn-preferences__label\" htmlFor={inputId}>\n                  <input\n                    id={inputId}\n                    type=\"checkbox\"\n                    className=\"adn-preferences__checkbox\"\n                    checked={preference.enabled}\n                    onChange={() => toggleChannel(preference)}\n                  />\n                  <span className=\"adn-preferences__category\">{preference.category}</span>\n                  <span className=\"adn-preferences__channel\">\n                    {messages[channelLabelKey(preference.channel) as keyof typeof messages] ?? preference.channel}\n                  </span>\n                </label>\n\n                {preference.quietHoursStart && preference.quietHoursEnd ? (\n                  <span className=\"adn-preferences__quiet-hours\">\n                    {messages['preferences.quietHours']} {preference.quietHoursStart}{' '}\n                    {messages['preferences.quietHoursTo']} {preference.quietHoursEnd}\n                  </span>\n                ) : null}\n              </li>\n            )\n          })}\n        </ul>\n      )}\n\n      <footer className=\"adn-preferences__footer\">\n        {/* Ação primária de formulário com convenção clara → ícone (regra de ícones, web.md §9). */}\n        <button\n          type=\"button\"\n          className=\"adn-preferences__save\"\n          onClick={handleSave}\n          disabled={updatePreferences.isPending || draft === undefined}\n        >\n          <Save className=\"adn-preferences__save-icon\" aria-hidden=\"true\" />\n          {messages['preferences.save']}\n        </button>\n\n        {updatePreferences.isSuccess && draft === undefined ? (\n          <span className=\"adn-preferences__feedback\" role=\"status\">\n            {messages['preferences.saved']}\n          </span>\n        ) : null}\n        {updatePreferences.isError ? (\n          <span className=\"adn-preferences__feedback adn-preferences__feedback--error\" role=\"alert\">\n            {messages['preferences.error']}\n          </span>\n        ) : null}\n      </footer>\n    </section>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n *\n * A tela de notificações COMPOSTA, no molde do `ConversationsWorkspace`.\n *\n * O pacote exportava só as peças (`NotificationList`, `PreferencesPanel`), e o primeiro consumidor\n * remontou o grid à mão — 56 linhas na página da inbox e 221 na de configuração, contra 35 da página\n * de Documentos, que consome workspace. É exatamente o que a regra de módulos plugáveis (§4) rejeita:\n * cada produto remontando o layout é como as telas divergiram antes.\n *\n * Customização por contrato, nunca por fork:\n * - vocabulário → `labels`\n * - UI do produto → slots `renderHeaderActions`, `renderAboveList`, `renderEmpty`\n * - regra de negócio → callbacks (`onSelectNotification`)\n * - **capacidade por ausência**: sem `settingsHref` não aparece link de configuração, sem\n *   `showPreferences` não aparece a coluna. Nunca flag `hasX`.\n */\n\nimport type { ReactNode } from 'react'\nimport type { NotificationSummary } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { NotificationList } from './NotificationList'\nimport { PreferencesPanel } from './PreferencesPanel'\n\nexport type NotificationsWorkspaceProps = {\n  /** Sobrescreve textos pontuais sem trocar o locale inteiro. */\n  readonly labels?: Partial<Record<string, string>>\n  /** Filtra a inbox por assunto. Ausente, mostra tudo. */\n  readonly category?: string\n  /**\n   * Coluna de preferências ao lado da inbox.\n   *\n   * Ligada por padrão porque é o caso comum; um produto que gerencia preferência noutra tela passa\n   * `false` e fica só com a inbox, em largura cheia.\n   */\n  readonly showPreferences?: boolean\n  /** Ausente, o link de configuração não aparece — o produto pode não ter essa tela. */\n  readonly settingsHref?: string | undefined\n  /** Clique numa notificação. Ausente, a linha não é clicável. */\n  readonly onSelectNotification?: (notification: NotificationSummary) => void\n  /**\n   * Substitui o cabeçalho padrão inteiro.\n   *\n   * O workspace desenha um `<h1>` porque ele é a tela; a página que já tem o título dela passava a\n   * ter dois `<h1>` dizendo a mesma palavra, e para leitor de tela duas primeiras manchetes é o\n   * mesmo que nenhuma. Ausente, o padrão continua desenhando — slot é substituição, não interruptor.\n   */\n  readonly renderHeader?: () => ReactNode\n  /** Ações do produto no cabeçalho, ao lado do link de configuração. */\n  readonly renderHeaderActions?: () => ReactNode\n  /** Aviso ou filtro do produto, entre o cabeçalho e a lista. */\n  readonly renderAboveList?: () => ReactNode\n  /** Substitui o vazio padrão — útil quando o produto sabe explicar por que está vazio. */\n  readonly renderEmpty?: () => ReactNode\n  readonly className?: string\n}\n\nexport function NotificationsWorkspace({\n  labels: labelsOverride,\n  category,\n  showPreferences = true,\n  settingsHref,\n  onSelectNotification,\n  renderHeader,\n  renderHeaderActions,\n  renderAboveList,\n  renderEmpty,\n  className,\n}: NotificationsWorkspaceProps) {\n  const { messages } = useNotificationContext()\n  const label = (key: string): string => labelsOverride?.[key] ?? (messages as Record<string, string>)[key] ?? key\n\n  return (\n    <div className={`adn-workspace ${className ?? ''}`}>\n      {renderHeader ? (\n        renderHeader()\n      ) : (\n        <header className=\"adn-workspace__header\">\n          <div>\n            <h1 className=\"adn-workspace__title\">{label('workspace.title')}</h1>\n            <p className=\"adn-workspace__description\">{label('workspace.description')}</p>\n          </div>\n\n          <div className=\"adn-workspace__actions\">\n            {renderHeaderActions?.()}\n            {/* Capacidade por ausência: sem href, sem link. */}\n            {settingsHref && (\n              <a href={settingsHref} className=\"adn-button adn-button--outline\">\n                {label('workspace.settingsLink')}\n              </a>\n            )}\n          </div>\n        </header>\n      )}\n\n      {renderAboveList?.()}\n\n      <div className={showPreferences ? 'adn-workspace__grid' : 'adn-workspace__grid--single'}>\n        <section className=\"adn-workspace__inbox\">\n          {/* O vazio desce para a lista, que é quem sabe se está vazia. Desenhado aqui, ele aparecia\n              ao lado das notificações — \"nada por aqui\" embaixo do que estava ali. */}\n          <NotificationList\n            {...(category ? { category } : {})}\n            {...(onSelectNotification ? { onSelect: onSelectNotification } : {})}\n            {...(renderEmpty ? { renderEmpty } : {})}\n          />\n        </section>\n\n        {showPreferences && (\n          <aside className=\"adn-workspace__aside\">\n            <PreferencesPanel />\n          </aside>\n        )}\n      </div>\n    </div>\n  )\n}\n","/**\n * Copyright (c) 2026 Ada Technology. MIT License.\n *\n * A tela de configuração COMPOSTA: canais por assunto e editor de mensagem com preview.\n *\n * Substitui as 221 linhas de página + 207 de hook que o primeiro consumidor escreveu. O que sobra\n * para o produto é dizer quais canais e assuntos existem — o resto é layout, e layout duplicado é\n * como as telas divergem.\n *\n * `channels` e `categories` são OBRIGATÓRIOS e vêm do produto porque o pacote não tem opinião sobre\n * eles: uma loja avisa status de pedido por WhatsApp, um banco avisa vencimento por e-mail, e o\n * `hint` de cada canal (\"exige template aprovado\", \"exige aparelho registrado\") é conhecimento do\n * produto sobre a própria operação.\n */\n\nimport type { ReactNode } from 'react'\nimport type { NotificationPreference, NotificationTemplate } from '@adatechnology/notification-contracts'\n\nimport { useNotificationContext } from '../NotificationProvider'\nimport { usePreferences, useUpdatePreferences } from '../hooks/usePreferences'\nimport { useTemplateEditor } from '../hooks/useTemplateEditor'\n\nexport type NotificationChannelOption = {\n  readonly id: string\n  readonly label: string\n  /** O custo do canal, em uma linha. É o que faz alguém decidir em vez de chutar. */\n  readonly hint?: string\n}\n\nexport type NotificationCategoryOption = {\n  readonly id: string\n  readonly label: string\n  readonly hint?: string\n}\n\nexport type NotificationSettingsWorkspaceProps = {\n  readonly labels?: Partial<Record<string, string>>\n  /** Os canais que ESTE produto oferece — o pacote despacha em cinco e não opina sobre quais usar. */\n  readonly channels: readonly NotificationChannelOption[]\n  /** Os assuntos que este produto dispara. */\n  readonly categories: readonly NotificationCategoryOption[]\n  /**\n   * Valores de exemplo do preview, por assunto do template. Ausente, o preview mostra campo vazio —\n   * que é honesto, mas menos útil para quem está escrevendo o texto.\n   */\n  readonly previewPayload?: Readonly<Record<string, unknown>>\n  /** Traduz `order.status.preparing` no rótulo que o produto usa. Ausente, mostra a chave crua. */\n  readonly templateLabelOf?: (template: NotificationTemplate) => string\n  /**\n   * Campo extra por canal — é onde entra o nome do template aprovado na Meta, que só o WhatsApp tem.\n   * Ausente, nenhum campo extra aparece.\n   */\n  readonly renderChannelFields?: (params: {\n    readonly channel: string\n    readonly value: string\n    readonly onChange: (value: string) => void\n  }) => ReactNode\n  /** Substitui o cabeçalho padrão — a página que já tem título próprio evita o segundo `<h1>`. */\n  readonly renderHeader?: () => ReactNode\n  /** Ações do produto no cabeçalho. */\n  readonly renderHeaderActions?: () => ReactNode\n  readonly className?: string\n}\n\nexport function NotificationSettingsWorkspace({\n  labels: labelsOverride,\n  channels,\n  categories,\n  previewPayload,\n  templateLabelOf,\n  renderChannelFields,\n  renderHeader,\n  renderHeaderActions,\n  className,\n}: NotificationSettingsWorkspaceProps) {\n  const { messages } = useNotificationContext()\n  const label = (key: string): string => labelsOverride?.[key] ?? (messages as Record<string, string>)[key] ?? key\n\n  const preferencesQuery = usePreferences()\n  const updatePreferences = useUpdatePreferences()\n  const editor = useTemplateEditor(previewPayload ? { previewPayload } : {})\n\n  /**\n   * Preferência ausente é o estado inicial normal — o módulo devolve só o que foi gravado. O default\n   * é ligado: comportamento de fábrica é avisar, e um destinatário que não recebeu porque a linha não\n   * existia é pior que um que recebeu demais.\n   */\n  function isEnabled(category: string, channel: string): boolean {\n    const row = (preferencesQuery.data ?? []).find(\n      (preference) => preference.category === category && preference.channel === channel,\n    )\n    return row?.enabled ?? true\n  }\n\n  function toggle(category: string, channel: string): void {\n    // Conjunto inteiro: a rota é `PUT` em lote, e enviar só o que mudou apagaria o resto.\n    const next: NotificationPreference[] = categories.flatMap((eachCategory) =>\n      channels.map((eachChannel) => ({\n        category: eachCategory.id,\n        channel: eachChannel.id as NotificationPreference['channel'],\n        enabled:\n          eachCategory.id === category && eachChannel.id === channel\n            ? !isEnabled(category, channel)\n            : isEnabled(eachCategory.id, eachChannel.id),\n      })),\n    )\n    updatePreferences.mutate(next)\n  }\n\n  return (\n    <div className={`adn-settings ${className ?? ''}`}>\n      {renderHeader ? (\n        renderHeader()\n      ) : (\n        <header className=\"adn-settings__header\">\n          <div>\n            <h1 className=\"adn-settings__title\">{label('settings.title')}</h1>\n            <p className=\"adn-settings__description\">{label('settings.description')}</p>\n          </div>\n          {renderHeaderActions?.()}\n        </header>\n      )}\n\n      <section className=\"adn-settings__channels\">\n        <h2 className=\"adn-settings__section-title\">{label('settings.channelsTitle')}</h2>\n        <p className=\"adn-settings__hint\">{label('settings.channelsHint')}</p>\n\n        {categories.map((category) => (\n          <div key={category.id} className=\"adn-settings__category\">\n            <p className=\"adn-settings__category-label\">{category.label}</p>\n            {category.hint && <p className=\"adn-settings__hint\">{category.hint}</p>}\n\n            <div className=\"adn-settings__channel-grid\">\n              {channels.map((channel) => (\n                <label key={channel.id} className=\"adn-settings__channel\">\n                  <input\n                    type=\"checkbox\"\n                    checked={isEnabled(category.id, channel.id)}\n                    disabled={updatePreferences.isPending}\n                    onChange={() => toggle(category.id, channel.id)}\n                  />\n                  <span>\n                    <span className=\"adn-settings__channel-label\">{channel.label}</span>\n                    {channel.hint && <span className=\"adn-settings__hint\">{channel.hint}</span>}\n                  </span>\n                </label>\n              ))}\n            </div>\n          </div>\n        ))}\n      </section>\n\n      <div className=\"adn-settings__templates\">\n        <section className=\"adn-settings__template-list\">\n          <header>\n            <h2 className=\"adn-settings__section-title\">{label('settings.templatesTitle')}</h2>\n            <p className=\"adn-settings__hint\">{label('settings.templatesHint')}</p>\n          </header>\n\n          {editor.isLoading && <p className=\"adn-settings__hint\">{label('list.loading')}</p>}\n          {!editor.isLoading && editor.templates.length === 0 && (\n            <p className=\"adn-settings__hint\">{label('settings.templatesEmpty')}</p>\n          )}\n\n          <ul>\n            {editor.templates.map((template) => (\n              <li key={template.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => editor.select(template)}\n                  className={editor.selected?.id === template.id ? 'adn-settings__row--active' : undefined}\n                >\n                  <span className=\"adn-settings__row-main\">\n                    <span className=\"adn-settings__row-title\">{templateLabelOf?.(template) ?? template.key}</span>\n                    <span className=\"adn-settings__row-body\">{template.body}</span>\n                  </span>\n                  <span className={`adn-settings__badge adn-settings__badge--${template.channel}`}>\n                    {label(`channel.${template.channel}`)}\n                  </span>\n                  <span className=\"adn-settings__version\">\n                    {label('settings.version')}\n                    {template.version}\n                  </span>\n                </button>\n              </li>\n            ))}\n          </ul>\n        </section>\n\n        <section className=\"adn-settings__editor\">\n          {!editor.draft && <p className=\"adn-settings__hint\">{label('settings.pickTemplate')}</p>}\n\n          {editor.draft && (\n            <>\n              <header className=\"adn-settings__editor-header\">\n                <div>\n                  <h2 className=\"adn-settings__section-title\">\n                    {editor.selected ? (templateLabelOf?.(editor.selected) ?? editor.selected.key) : ''}\n                  </h2>\n                  <p className=\"adn-settings__hint\">\n                    {editor.draft.channel} · {editor.draft.locale} · {label('settings.version')}\n                    {editor.selected?.version}\n                  </p>\n                </div>\n                <button type=\"button\" onClick={editor.clear}>\n                  {label('settings.close')}\n                </button>\n              </header>\n\n              <label className=\"adn-settings__field\">\n                <span className=\"adn-settings__field-label\">{label('settings.subject')}</span>\n                <span className=\"adn-settings__hint\">{label('settings.subjectHint')}</span>\n                <input\n                  value={editor.draft.subject}\n                  onChange={(event) => editor.update({ subject: event.target.value })}\n                />\n              </label>\n\n              <label className=\"adn-settings__field\">\n                <span className=\"adn-settings__field-label\">{label('settings.body')}</span>\n                <textarea\n                  rows={4}\n                  value={editor.draft.body}\n                  onChange={(event) => editor.update({ body: event.target.value })}\n                />\n              </label>\n\n              {/* Slot: campo que só um canal tem, e que o pacote não deve conhecer por nome. */}\n              {renderChannelFields?.({\n                channel: editor.draft.channel,\n                value: editor.draft.whatsappTemplateName,\n                onChange: (value) => editor.update({ whatsappTemplateName: value }),\n              })}\n\n              {editor.preview && (\n                <div className=\"adn-settings__preview\">\n                  <p className=\"adn-settings__preview-title\">{label('settings.previewTitle')}</p>\n                  <p className=\"adn-settings__preview-subject\">{editor.preview.title}</p>\n                  <p className=\"adn-settings__preview-body\">{editor.preview.body}</p>\n                </div>\n              )}\n\n              {editor.error && <p className=\"adn-settings__error\">{editor.error}</p>}\n\n              <div className=\"adn-settings__actions\">\n                <button type=\"button\" onClick={editor.save} disabled={!editor.isDirty || editor.isSaving}>\n                  {editor.isSaving ? label('settings.saving') : label('settings.save')}\n                </button>\n                {/* Diz por que está desabilitado, em vez de deixar o botão inerte sem explicação. */}\n                {!editor.isDirty && <span className=\"adn-settings__hint\">{label('settings.unchanged')}</span>}\n              </div>\n            </>\n          )}\n        </section>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["clsx","clsx","jsx","jsxs","clsx","jsx","jsxs","clsx","clsx","jsx","jsxs","clsx","jsx","jsxs","jsx","jsxs"]}

package/dist/styles.css

@@ -1,7 +1,9 @@
 /* src/styles.css */
 .adn-bell,
 .adn-list,
-.adn-preferences {
+.adn-preferences,
+.adn-workspace,
+.adn-settings {
   --adn-color-surface: var(--adn-surface, #ffffff);
   --adn-color-text: var(--adn-text, #111827);
   --adn-color-muted: var(--adn-muted, #6b7280);
@@ -65,9 +67,10 @@
 .adn-list {
   display: flex;
   flex-direction: column;
-  gap: var(--adn-space-2);
   background: var(--adn-color-surface);
+  border: 1px solid var(--adn-color-border);
   border-radius: var(--adn-radius);
+  overflow: hidden;
 }
 .adn-list__header {
   display: flex;
@@ -78,11 +81,28 @@
   padding: var(--adn-space-3);
   border-bottom: 1px solid var(--adn-color-border);
 }
+.adn-list__heading {
+  display: flex;
+  align-items: center;
+  gap: var(--adn-space-2);
+}
 .adn-list__title {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
 }
+.adn-list__count {
+  min-width: 20px;
+  padding: 0 var(--adn-space-1);
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--adn-color-accent) 16%, transparent);
+  color: var(--adn-color-accent);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
 .adn-list__bulk-action,
 .adn-list__retry,
 .adn-list__load-more {
@@ -112,6 +132,38 @@
   height: 16px;
   color: currentColor;
 }
+.adn-list__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-3);
+  padding: var(--adn-space-3);
+}
+.adn-list__skeleton-row {
+  height: var(--adn-touch-target);
+  border-radius: var(--adn-radius);
+  background:
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--adn-color-muted) 10%, transparent),
+      color-mix(in srgb, var(--adn-color-muted) 22%, transparent),
+      color-mix(in srgb, var(--adn-color-muted) 10%, transparent));
+  background-size: 200% 100%;
+  animation: adn-skeleton 1.4s ease-in-out infinite;
+}
+@keyframes adn-skeleton {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+.adn-list__footer {
+  display: flex;
+  justify-content: center;
+  padding: var(--adn-space-3);
+  border-top: 1px solid var(--adn-color-border);
+}
 .adn-list__items {
   display: flex;
   flex-direction: column;
@@ -144,9 +196,18 @@
   gap: var(--adn-space-2);
   border-bottom: 1px solid var(--adn-color-border);
 }
+.adn-item:last-child {
+  border-bottom: none;
+}
+.adn-item:hover {
+  background: color-mix(in srgb, var(--adn-color-muted) 8%, transparent);
+}
 .adn-item--unread {
   background: color-mix(in srgb, var(--adn-color-accent) 6%, transparent);
 }
+.adn-item--unread:hover {
+  background: color-mix(in srgb, var(--adn-color-accent) 12%, transparent);
+}
 .adn-item__main {
   position: relative;
   display: flex;
@@ -162,17 +223,37 @@
   color: inherit;
   text-align: left;
 }
+.adn-item__heading {
+  display: flex;
+  align-items: baseline;
+  gap: var(--adn-space-2);
+  width: 100%;
+}
 .adn-item__title {
+  flex: 1;
+  min-width: 0;
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.adn-item__time {
+  flex-shrink: 0;
+  color: var(--adn-color-muted);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
 }
 .adn-item__body {
   color: var(--adn-color-muted);
   font-size: 0.875rem;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 .adn-item__unread-dot {
-  position: absolute;
-  top: var(--adn-space-3);
-  right: var(--adn-space-2);
+  flex-shrink: 0;
+  align-self: center;
   width: 8px;
   height: 8px;
   background: var(--adn-color-accent);
@@ -309,5 +390,263 @@
   .adn-list__bulk-action {
     transition: none;
   }
+  .adn-list__skeleton-row {
+    animation: none;
+  }
+}
+.adn-workspace,
+.adn-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adn-space-4, 16px);
+  color: inherit;
+}
+.adn-workspace__header,
+.adn-settings__header,
+.adn-settings__editor-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--adn-space-3, 12px);
+}
+.adn-workspace__title,
+.adn-settings__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.adn-workspace__description,
+.adn-settings__description,
+.adn-settings__hint {
+  display: block;
+  margin: 2px 0 0;
+  font-size: 0.8125rem;
+  color: var(--adn-color-muted);
+}
+.adn-workspace__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+}
+.adn-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+  min-height: 44px;
+  padding: 0 var(--adn-space-3, 12px);
+  border-radius: var(--adn-radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: inherit;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+.adn-button--outline {
+  border-color: var(--adn-color-border);
+  background: var(--adn-surface, transparent);
+}
+.adn-workspace__grid,
+.adn-settings__templates {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--adn-space-4, 16px);
+}
+.adn-workspace__grid--single {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 1024px) {
+  .adn-workspace__grid {
+    grid-template-columns: 2fr 1fr;
+  }
+  .adn-settings__templates {
+    grid-template-columns: 2fr 3fr;
+  }
+  .adn-button {
+    min-height: 36px;
+  }
+}
+.adn-settings__channels,
+.adn-settings__template-list,
+.adn-settings__editor {
+  background: var(--adn-surface, transparent);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  padding: var(--adn-space-4, 16px);
+}
+.adn-settings__section-title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.adn-settings__category {
+  margin-top: var(--adn-space-4, 16px);
+}
+.adn-settings__category-label {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.adn-settings__channel-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--adn-space-2, 8px);
+  margin-top: var(--adn-space-2, 8px);
+}
+@media (min-width: 640px) {
+  .adn-settings__channel-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.adn-settings__channel {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--adn-space-2, 8px);
+  padding: var(--adn-space-2, 8px);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  cursor: pointer;
+  min-height: 44px;
+}
+.adn-settings__channel input {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  accent-color: var(--adn-color-accent);
+}
+.adn-settings__channel-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.adn-settings__template-list ul {
+  list-style: none;
+  margin: var(--adn-space-3, 12px) 0 0;
+  padding: 0;
+}
+.adn-settings__template-list li + li {
+  border-top: 1px solid var(--adn-color-border);
+}
+.adn-settings__template-list button {
+  display: flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+  width: 100%;
+  min-height: 44px;
+  padding: var(--adn-space-2, 8px);
+  background: transparent;
+  border: 0;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+}
+.adn-settings__row--active {
+  background: color-mix(in srgb, var(--adn-color-accent) 8%, transparent);
+}
+.adn-settings__row-main {
+  flex: 1;
+  min-width: 0;
+}
+.adn-settings__row-title,
+.adn-settings__row-body {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.adn-settings__row-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.adn-settings__row-body,
+.adn-settings__version {
+  font-size: 0.75rem;
+  color: var(--adn-color-muted);
+}
+.adn-settings__badge {
+  flex-shrink: 0;
+  padding: 2px var(--adn-space-2, 8px);
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--adn-color-accent) 12%, transparent);
+}
+.adn-settings__field {
+  display: block;
+  margin-top: var(--adn-space-3, 12px);
+}
+.adn-settings__field-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.adn-settings__field input,
+.adn-settings__field textarea {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  padding: var(--adn-space-2, 8px);
+  font: inherit;
+  font-size: 0.875rem;
+  color: inherit;
+  background: var(--adn-surface, transparent);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+}
+.adn-settings__preview {
+  margin-top: var(--adn-space-3, 12px);
+  padding: var(--adn-space-3, 12px);
+  border: 1px solid var(--adn-color-border);
+  border-radius: var(--adn-radius);
+  background: color-mix(in srgb, var(--adn-color-muted) 8%, transparent);
+}
+.adn-settings__preview-title {
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--adn-color-muted);
+}
+.adn-settings__preview-subject {
+  margin: 6px 0 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.adn-settings__preview-body {
+  margin: 0;
+  font-size: 0.875rem;
+  white-space: pre-wrap;
+}
+.adn-settings__error {
+  margin-top: var(--adn-space-2, 8px);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--adn-color-danger);
+}
+.adn-settings__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--adn-space-2, 8px);
+  margin-top: var(--adn-space-3, 12px);
+}
+.adn-settings__actions button {
+  min-height: 44px;
+  padding: 0 var(--adn-space-4, 16px);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #ffffff;
+  background: var(--adn-color-accent);
+  border: 0;
+  border-radius: var(--adn-radius);
+  cursor: pointer;
+}
+.adn-settings__actions button:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 /*# sourceMappingURL=styles.css.map */