xertica-ui 2.3.0 → 2.4.1

package/docs/architecture-improvements.md

@@ -403,11 +403,11 @@ O projeto já tem excelentes exemplos do padrão headless hook que devem servir
 
 ### Fase 1 — Correções Críticas (1-2 dias)
 
-| #   | Tarefa                                                        | Arquivo(s)        | Esforço |
-| --- | ------------------------------------------------------------- | ----------------- | ------- |
-| ~~1.1~~ | ~~Corrigir `ThemeToggle` para usar `useTheme()`~~ | ✅ Resolvido em v2.2.0 | — |
-| 1.2 | Criar `types.ts` compartilhado para o assistente              | `types.ts` (novo) | 1h      |
-| 1.3 | Atualizar imports em `AssistenteContext` e `use-assistant.ts` | 2 arquivos        | 30min   |
+| #       | Tarefa                                                        | Arquivo(s)             | Esforço |
+| ------- | ------------------------------------------------------------- | ---------------------- | ------- |
+| ~~1.1~~ | ~~Corrigir `ThemeToggle` para usar `useTheme()`~~             | ✅ Resolvido em v2.2.0 | —       |
+| 1.2     | Criar `types.ts` compartilhado para o assistente              | `types.ts` (novo)      | 1h      |
+| 1.3     | Atualizar imports em `AssistenteContext` e `use-assistant.ts` | 2 arquivos             | 30min   |
 
 ### Fase 2 — Eliminação de Duplicações (2-3 dias)
 

package/docs/architecture.md

@@ -12,14 +12,14 @@ The library underwent a **complete architectural modularization**. The flat `com
 
 ### Component Domains
 
-| Domain      | Path                    | Contains                                                         |
-| ----------- | ----------------------- | ---------------------------------------------------------------- |
-| `ui`        | `components/ui/[name]/` | Design system primitives (Button, Card, Calendar, Chart, etc.)   |
-| `layout`    | `components/layout/`    | Sidebar, Header, SidebarPrimitive                                |
-| `blocks`    | `components/blocks/`    | High-level composed components built from `ui/` primitives       |
-| `assistant` | `components/assistant/` | XerticaAssistant, MarkdownMessage, CodeBlock, etc.               |
-| `brand`     | `components/brand/`     | XerticaLogo, ThemeToggle, LanguageSelector, XerticaProvider      |
-| `pages`     | `components/pages/`     | LoginPage, HomePage, TemplatePage, etc.                          |
+| Domain      | Path                    | Contains                                                                                                     |
+| ----------- | ----------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `ui`        | `components/ui/[name]/` | Design system primitives (Button, Card, Calendar, Chart, etc.)                                               |
+| `layout`    | `components/layout/`    | Sidebar, Header, SidebarPrimitive                                                                            |
+| `blocks`    | `components/blocks/`    | High-level composed components built from `ui/` primitives                                                   |
+| `assistant` | `components/assistant/` | XerticaAssistant, MarkdownMessage, CodeBlock, etc.                                                           |
+| `brand`     | `components/brand/`     | XerticaLogo, ThemeToggle, LanguageSelector, XerticaProvider                                                  |
+| `pages`     | `components/pages/`     | LoginPage, HomePage, TemplatePage, etc.                                                                      |
 | `shared`    | `components/shared/`    | utils.ts, use-mobile.ts, layout-constants.ts, navigation.ts, **error-boundary.tsx**, **error-fallbacks.tsx** |
 
 ### State Layer — `features/`
@@ -117,6 +117,7 @@ components/shared/
 ```
 
 Placement in `App.tsx`:
+
 ```
 AppErrorBoundary (outermost — before QueryClientProvider)
   └─ QueryClientProvider
@@ -139,6 +140,7 @@ contexts/
 ```
 
 `AuthProvider` must be rendered **inside** `<BrowserRouter>` (it uses `useNavigate`). It:
+
 - Hydrates session from `localStorage` on mount (`isLoading` flag prevents flash redirects)
 - Exposes `user`, `login(email, password) → boolean`, `logout()`
 - Redirects authenticated users away from auth-only pages automatically
@@ -158,7 +160,9 @@ const HomePage = React.lazy(() =>
 ### Provider Stack
 
 ```tsx
-<QueryClientProvider client={queryClient}>   // ← TanStack React Query
+<QueryClientProvider client={queryClient}>
+  {' '}
+  // ← TanStack React Query
   <ApiKeyProvider>
     <GoogleMapsLoaderProvider>
       <LanguageProvider>
@@ -167,7 +171,9 @@ const HomePage = React.lazy(() =>
             <AssistenteProvider>
               <LayoutProvider>
                 <Router>
-                  <AuthProvider>             // ← must be inside Router
+                  <AuthProvider>
+                    {' '}
+                    // ← must be inside Router
                     <Suspense fallback={null}>
                       <AppRoutes />
                     </Suspense>

package/docs/components/card-patterns.md

@@ -362,14 +362,14 @@ import { Briefcase, Users, BarChart2 } from 'lucide-react';
 
 Every card pattern ships with a matching `*Skeleton` companion that mirrors its layout with pulsing placeholders. Use them while data is loading to avoid layout shift and provide visual feedback.
 
-| Card                | Skeleton companion         | Configurable props                       |
-| ------------------- | -------------------------- | ---------------------------------------- |
-| `ActivityCard`      | `ActivityCardSkeleton`     | `rows` (default `5`)                     |
-| `ProfileCard`       | `ProfileCardSkeleton`      | `showStats`, `showActions`               |
-| `ProjectCard`       | `ProjectCardSkeleton`      | `memberCount` (default `3`)              |
-| `NotificationCard`  | `NotificationCardSkeleton` | `rows` (default `4`), `showViewAll`      |
-| `QuickActionCard`   | `QuickActionCardSkeleton`  | —                                        |
-| `FeatureCard`       | `FeatureCardSkeleton`      | `showAction`                             |
+| Card               | Skeleton companion         | Configurable props                  |
+| ------------------ | -------------------------- | ----------------------------------- |
+| `ActivityCard`     | `ActivityCardSkeleton`     | `rows` (default `5`)                |
+| `ProfileCard`      | `ProfileCardSkeleton`      | `showStats`, `showActions`          |
+| `ProjectCard`      | `ProjectCardSkeleton`      | `memberCount` (default `3`)         |
+| `NotificationCard` | `NotificationCardSkeleton` | `rows` (default `4`), `showViewAll` |
+| `QuickActionCard`  | `QuickActionCardSkeleton`  | —                                   |
+| `FeatureCard`      | `FeatureCardSkeleton`      | `showAction`                        |
 
 > A matching `StatsCardSkeleton` is also available from `xertica-ui` (lives in `ui/stats-card/`, with props `showIcon` and `showTrend`).
 
@@ -390,15 +390,17 @@ function ActivityFeed() {
 For grids, render one skeleton per expected card:
 
 ```tsx
-{isLoading ? (
-  <>
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-  </>
-) : (
-  data.map(item => <FeatureCard key={item.id} {...item} />)
-)}
+{
+  isLoading ? (
+    <>
+      <FeatureCardSkeleton showAction />
+      <FeatureCardSkeleton showAction />
+      <FeatureCardSkeleton showAction />
+    </>
+  ) : (
+    data.map(item => <FeatureCard key={item.id} {...item} />)
+  );
+}
 ```
 
 ### Examples

package/docs/components/error-boundary.md

@@ -1,191 +1,201 @@
-# ErrorBoundary — Xertica UI
-
-React Error Boundaries catch JavaScript errors in the component tree, log them, and render a fallback UI instead of crashing the application. Xertica UI ships a single reusable `ErrorBoundary` class with **three pre-configured wrapper variants** covering every granularity of protection.
-
----
-
-## Import
-
-```tsx
-// Pre-configured wrappers (recommended)
-import {
-  AppErrorBoundary,
-  PageErrorBoundary,
-  SectionErrorBoundary,
-} from '@/components/shared/error-boundary';
-
-// Base class (for custom fallbacks)
-import { ErrorBoundary } from '@/components/shared/error-boundary';
-import type { FallbackProps } from '@/components/shared/error-boundary';
-```
-
----
-
-## The Three Variants
-
-| Variant | Fallback UI | Placement | Purpose |
-|---|---|---|---|
-| `AppErrorBoundary` | Full-screen, inline-styled | Outside `QueryClientProvider`, wraps entire `App` | Catches provider/context crashes; works even if Tailwind/CSS fails |
-| `PageErrorBoundary` | Half-height, Tailwind-styled | Wraps `<Routes>` / `<AuthGuard>` inside the router | Catches lazy-chunk load failures and page render errors; app chrome stays alive |
-| `SectionErrorBoundary` | Compact inline badge | Wraps individual sections (table, chart, assistant) | Catches isolated data-rendering errors; page layout stays intact |
-
----
-
-## Provider Stack Placement
-
-```tsx
-<AppErrorBoundary>                          {/* ← catches: provider init, context crashes */}
-  <QueryClientProvider client={queryClient}>
-    <XerticaProvider>
-      <Router>
-        <AuthProvider>
-          <PageErrorBoundary>              {/* ← catches: lazy chunk failures, route renders */}
-            <Suspense fallback={null}>
-              <Routes>
-                <Route path="/home" element={
-                  <ProtectedRoute>
-                    <HomePage />           {/* ← page internals */}
-                  </ProtectedRoute>
-                } />
-              </Routes>
-            </Suspense>
-          </PageErrorBoundary>
-        </AuthProvider>
-      </Router>
-    </XerticaProvider>
-  </QueryClientProvider>
-</AppErrorBoundary>
-```
-
----
-
-## Props
-
-### `AppErrorBoundary` / `PageErrorBoundary` / `SectionErrorBoundary`
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | **Required.** Content to protect |
-| `onError` | `(error: Error, info: React.ErrorInfo) => void` | — | Called when an error is caught. Wire to Sentry, Datadog, etc. |
-| `resetKeys` | `unknown[]` | — | When any value in this array changes, the boundary auto-resets. Pass `[location.pathname]` to reset on navigation |
-
-### Base `ErrorBoundary`
-
-Same props plus:
-
-| Prop | Type | Description |
-|---|---|---|
-| `fallback` | `React.ComponentType<FallbackProps>` | **Required.** The component to render when an error is caught |
-
-### `FallbackProps` interface
-
-```ts
-interface FallbackProps {
-  error: Error;   // The caught error
-  reset: () => void; // Call to clear the error and re-render children
-}
-```
-
----
-
-## Usage Examples
-
-### Protecting a data table section
-
-```tsx
-import { SectionErrorBoundary } from '@/components/shared/error-boundary';
-
-function TeamSection() {
-  return (
-    <SectionErrorBoundary>
-      <TeamDataTable />
-    </SectionErrorBoundary>
-  );
-}
-```
-
-### Resetting on route change
-
-```tsx
-import { PageErrorBoundary } from '@/components/shared/error-boundary';
-import { useLocation } from 'react-router-dom';
-
-function AppRoutes() {
-  const location = useLocation();
-  return (
-    <PageErrorBoundary resetKeys={[location.pathname]}>
-      <Suspense fallback={null}>
-        <Routes>{/* ... */}</Routes>
-      </Suspense>
-    </PageErrorBoundary>
-  );
-}
-```
-
-### Logging to an error monitoring service
-
-```tsx
-import { AppErrorBoundary } from '@/components/shared/error-boundary';
-import * as Sentry from '@sentry/react';
-
-<AppErrorBoundary onError={(error, info) => Sentry.captureException(error, { extra: info })}>
-  <App />
-</AppErrorBoundary>
-```
-
-### Custom fallback with base `ErrorBoundary`
-
-```tsx
-import { ErrorBoundary } from '@/components/shared/error-boundary';
-import type { FallbackProps } from '@/components/shared/error-boundary';
-
-function MyFallback({ error, reset }: FallbackProps) {
-  return (
-    <div role="alert">
-      <p>Erro: {error.message}</p>
-      <button onClick={reset}>Tentar novamente</button>
-    </div>
-  );
-}
-
-<ErrorBoundary fallback={MyFallback}>
-  <MyComponent />
-</ErrorBoundary>
-```
-
----
-
-## Fallback UIs
-
-### `AppErrorFallback`
-- Full-screen centered layout using **inline styles** (no Tailwind dependency)
-- Shows a destructive info icon, error title, and message
-- Two buttons: "Tentar novamente" (calls `reset()`) and "Ir para o início" (`window.location.assign('/')`)
-- In `DEV` mode: displays the full error stack trace in a `<pre>` block
-
-### `PageErrorFallback`
-- Uses Tailwind / xertica-ui token classes
-- Centered within the page content area (sidebar and header remain visible)
-- Triangle warning icon + descriptive message
-- Same two action buttons
-
-### `SectionErrorFallback`
-- Compact `rounded-lg` card with `destructive/30` border
-- Circle info icon + short message
-- Single "Tentar novamente" button
-- In `DEV` mode: shows `error.message` in a mono paragraph
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
->
-> - **ALWAYS** place `<AppErrorBoundary>` as the **outermost** element in `App.tsx`, before `QueryClientProvider`. If the query client itself crashes, the app must still show something.
-> - **ALWAYS** place `<PageErrorBoundary>` around `<Routes>` / `<AuthGuard>`. This is the primary protection against lazy-chunk load failures (network errors, chunk not found).
-> - **USE** `<SectionErrorBoundary>` around any section that fetches data or renders complex content (tables, charts, the assistant panel, embedded maps). An error in one section must not crash the page.
-> - **DO NOT** place `<AppErrorBoundary>` inside `<Router>` — it must be outside the router so `AppErrorFallback` can use `window.location.assign` (not `useNavigate`).
-> - **DO NOT** use `try/catch` as a substitute for `ErrorBoundary` — try/catch does not catch render-time errors in React component trees. Both are needed for different error classes.
-> - **Pass `onError`** to the `AppErrorBoundary` in production to send errors to Sentry, Datadog, or another observability service.
-> - **Pass `resetKeys={[location.pathname]}`** to `PageErrorBoundary` if you want errors to auto-clear when the user navigates to a different route.
-> - Error boundaries do **not** catch: errors in event handlers (use try/catch there), async errors outside render (use React Query's `onError`), errors in server-side rendering, and errors thrown in the boundary itself.
+# ErrorBoundary — Xertica UI
+
+React Error Boundaries catch JavaScript errors in the component tree, log them, and render a fallback UI instead of crashing the application. Xertica UI ships a single reusable `ErrorBoundary` class with **three pre-configured wrapper variants** covering every granularity of protection.
+
+---
+
+## Import
+
+```tsx
+// Pre-configured wrappers (recommended)
+import {
+  AppErrorBoundary,
+  PageErrorBoundary,
+  SectionErrorBoundary,
+} from '@/components/shared/error-boundary';
+
+// Base class (for custom fallbacks)
+import { ErrorBoundary } from '@/components/shared/error-boundary';
+import type { FallbackProps } from '@/components/shared/error-boundary';
+```
+
+---
+
+## The Three Variants
+
+| Variant                | Fallback UI                  | Placement                                           | Purpose                                                                         |
+| ---------------------- | ---------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `AppErrorBoundary`     | Full-screen, inline-styled   | Outside `QueryClientProvider`, wraps entire `App`   | Catches provider/context crashes; works even if Tailwind/CSS fails              |
+| `PageErrorBoundary`    | Half-height, Tailwind-styled | Wraps `<Routes>` / `<AuthGuard>` inside the router  | Catches lazy-chunk load failures and page render errors; app chrome stays alive |
+| `SectionErrorBoundary` | Compact inline badge         | Wraps individual sections (table, chart, assistant) | Catches isolated data-rendering errors; page layout stays intact                |
+
+---
+
+## Provider Stack Placement
+
+```tsx
+<AppErrorBoundary>
+  {' '}
+  {/* ← catches: provider init, context crashes */}
+  <QueryClientProvider client={queryClient}>
+    <XerticaProvider>
+      <Router>
+        <AuthProvider>
+          <PageErrorBoundary>
+            {' '}
+            {/* ← catches: lazy chunk failures, route renders */}
+            <Suspense fallback={null}>
+              <Routes>
+                <Route
+                  path="/home"
+                  element={
+                    <ProtectedRoute>
+                      <HomePage /> {/* ← page internals */}
+                    </ProtectedRoute>
+                  }
+                />
+              </Routes>
+            </Suspense>
+          </PageErrorBoundary>
+        </AuthProvider>
+      </Router>
+    </XerticaProvider>
+  </QueryClientProvider>
+</AppErrorBoundary>
+```
+
+---
+
+## Props
+
+### `AppErrorBoundary` / `PageErrorBoundary` / `SectionErrorBoundary`
+
+| Prop        | Type                                            | Default | Description                                                                                                       |
+| ----------- | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `children`  | `ReactNode`                                     | —       | **Required.** Content to protect                                                                                  |
+| `onError`   | `(error: Error, info: React.ErrorInfo) => void` | —       | Called when an error is caught. Wire to Sentry, Datadog, etc.                                                     |
+| `resetKeys` | `unknown[]`                                     | —       | When any value in this array changes, the boundary auto-resets. Pass `[location.pathname]` to reset on navigation |
+
+### Base `ErrorBoundary`
+
+Same props plus:
+
+| Prop       | Type                                 | Description                                                   |
+| ---------- | ------------------------------------ | ------------------------------------------------------------- |
+| `fallback` | `React.ComponentType<FallbackProps>` | **Required.** The component to render when an error is caught |
+
+### `FallbackProps` interface
+
+```ts
+interface FallbackProps {
+  error: Error; // The caught error
+  reset: () => void; // Call to clear the error and re-render children
+}
+```
+
+---
+
+## Usage Examples
+
+### Protecting a data table section
+
+```tsx
+import { SectionErrorBoundary } from '@/components/shared/error-boundary';
+
+function TeamSection() {
+  return (
+    <SectionErrorBoundary>
+      <TeamDataTable />
+    </SectionErrorBoundary>
+  );
+}
+```
+
+### Resetting on route change
+
+```tsx
+import { PageErrorBoundary } from '@/components/shared/error-boundary';
+import { useLocation } from 'react-router-dom';
+
+function AppRoutes() {
+  const location = useLocation();
+  return (
+    <PageErrorBoundary resetKeys={[location.pathname]}>
+      <Suspense fallback={null}>
+        <Routes>{/* ... */}</Routes>
+      </Suspense>
+    </PageErrorBoundary>
+  );
+}
+```
+
+### Logging to an error monitoring service
+
+```tsx
+import { AppErrorBoundary } from '@/components/shared/error-boundary';
+import * as Sentry from '@sentry/react';
+
+<AppErrorBoundary onError={(error, info) => Sentry.captureException(error, { extra: info })}>
+  <App />
+</AppErrorBoundary>;
+```
+
+### Custom fallback with base `ErrorBoundary`
+
+```tsx
+import { ErrorBoundary } from '@/components/shared/error-boundary';
+import type { FallbackProps } from '@/components/shared/error-boundary';
+
+function MyFallback({ error, reset }: FallbackProps) {
+  return (
+    <div role="alert">
+      <p>Erro: {error.message}</p>
+      <button onClick={reset}>Tentar novamente</button>
+    </div>
+  );
+}
+
+<ErrorBoundary fallback={MyFallback}>
+  <MyComponent />
+</ErrorBoundary>;
+```
+
+---
+
+## Fallback UIs
+
+### `AppErrorFallback`
+
+- Full-screen centered layout using **inline styles** (no Tailwind dependency)
+- Shows a destructive info icon, error title, and message
+- Two buttons: "Tentar novamente" (calls `reset()`) and "Ir para o início" (`window.location.assign('/')`)
+- In `DEV` mode: displays the full error stack trace in a `<pre>` block
+
+### `PageErrorFallback`
+
+- Uses Tailwind / xertica-ui token classes
+- Centered within the page content area (sidebar and header remain visible)
+- Triangle warning icon + descriptive message
+- Same two action buttons
+
+### `SectionErrorFallback`
+
+- Compact `rounded-lg` card with `destructive/30` border
+- Circle info icon + short message
+- Single "Tentar novamente" button
+- In `DEV` mode: shows `error.message` in a mono paragraph
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+>
+> - **ALWAYS** place `<AppErrorBoundary>` as the **outermost** element in `App.tsx`, before `QueryClientProvider`. If the query client itself crashes, the app must still show something.
+> - **ALWAYS** place `<PageErrorBoundary>` around `<Routes>` / `<AuthGuard>`. This is the primary protection against lazy-chunk load failures (network errors, chunk not found).
+> - **USE** `<SectionErrorBoundary>` around any section that fetches data or renders complex content (tables, charts, the assistant panel, embedded maps). An error in one section must not crash the page.
+> - **DO NOT** place `<AppErrorBoundary>` inside `<Router>` — it must be outside the router so `AppErrorFallback` can use `window.location.assign` (not `useNavigate`).
+> - **DO NOT** use `try/catch` as a substitute for `ErrorBoundary` — try/catch does not catch render-time errors in React component trees. Both are needed for different error classes.
+> - **Pass `onError`** to the `AppErrorBoundary` in production to send errors to Sentry, Datadog, or another observability service.
+> - **Pass `resetKeys={[location.pathname]}`** to `PageErrorBoundary` if you want errors to auto-clear when the user navigates to a different route.
+> - Error boundaries do **not** catch: errors in event handlers (use try/catch there), async errors outside render (use React Query's `onError`), errors in server-side rendering, and errors thrown in the boundary itself.

package/docs/components/hooks.md

@@ -65,12 +65,12 @@ Accesses and controls the current UI language preference, plus the list of avail
 
 ### Return Value
 
-| Property             | Type                          | Description                                                                          |
-| -------------------- | ----------------------------- | ------------------------------------------------------------------------------------ |
-| `language`           | `string`                      | Current language code (e.g. `'pt-BR'`, `'en'`, `'fr'`)                               |
+| Property             | Type                           | Description                                                                                                    |
+| -------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| `language`           | `string`                       | Current language code (e.g. `'pt-BR'`, `'en'`, `'fr'`)                                                         |
 | `setLanguage`        | `(language: Language) => void` | Changes the language: persists to localStorage, calls `i18n.changeLanguage`, and invalidates React Query cache |
-| `availableLanguages` | `LanguageDefinition[]`         | The full list of languages configured via `availableLanguages` prop on `<XerticaProvider>` |
-| `isMonolingual`      | `boolean`                      | `true` when only one language is configured. The `LanguageSelector` uses this to auto-hide |
+| `availableLanguages` | `LanguageDefinition[]`         | The full list of languages configured via `availableLanguages` prop on `<XerticaProvider>`                     |
+| `isMonolingual`      | `boolean`                      | `true` when only one language is configured. The `LanguageSelector` uses this to auto-hide                     |
 
 ### Usage
 
@@ -83,7 +83,9 @@ function LanguageDisplay() {
   return (
     <select value={language} onChange={e => setLanguage(e.target.value)}>
       {availableLanguages.map(lang => (
-        <option key={lang.code} value={lang.code}>{lang.label}</option>
+        <option key={lang.code} value={lang.code}>
+          {lang.label}
+        </option>
       ))}
     </select>
   );
@@ -139,13 +141,13 @@ Accesses the global AI Assistant context — conversation list, current conversa
 
 ### Return Value
 
-| Property           | Type                              | Description                                    |
-| ------------------ | --------------------------------- | ---------------------------------------------- |
-| `conversas`        | `Conversation[]`                  | List of all conversations                      |
-| `conversaAtual`    | `string \| null`                  | ID of the currently active conversation        |
-| `setConversaAtual` | `(id: string \| null) => void`    | Selects a conversation                         |
-| `sugestoes`        | `Suggestion[]`                    | Quick-reply suggestions for the welcome screen |
-| `setSugestoes`     | `(s: Suggestion[]) => void`       | Replaces the suggestion list                   |
+| Property           | Type                           | Description                                    |
+| ------------------ | ------------------------------ | ---------------------------------------------- |
+| `conversas`        | `Conversation[]`               | List of all conversations                      |
+| `conversaAtual`    | `string \| null`               | ID of the currently active conversation        |
+| `setConversaAtual` | `(id: string \| null) => void` | Selects a conversation                         |
+| `sugestoes`        | `Suggestion[]`                 | Quick-reply suggestions for the welcome screen |
+| `setSugestoes`     | `(s: Suggestion[]) => void`    | Replaces the suggestion list                   |
 
 ### Usage