@selectwin/kit 0.1.134 → 0.1.141

package/README.md

@@ -1,29 +1,29 @@
-# @selectwin/kit
-
-Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
-gráficos) e tokens CSS, theme-aware (light/dark).
-
-Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
-não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
-
-## Uso
-
-```bash
-npm i @selectwin/kit
-```
-
-```tsx
-import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
-import { SelectButton, SelectSection } from '@selectwin/kit';
-```
-
-Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
-**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
-
-## Build
-
-```bash
-npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
-```
-
-`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).
+# @selectwin/kit
+
+Design system da Selectwin — primitivos React, charts SVG (sem dependência de biblioteca de
+gráficos) e tokens CSS, theme-aware (light/dark).
+
+Uso interno da Selectwin. Publicado no npm para facilitar a distribuição entre os apps da casa;
+não há suporte, documentação pública nem garantia de estabilidade de API para terceiros.
+
+## Uso
+
+```bash
+npm i @selectwin/kit
+```
+
+```tsx
+import '@selectwin/kit/styles.css'; // tokens + estilos (uma vez, no root)
+import { SelectButton, SelectSection } from '@selectwin/kit';
+```
+
+Peer deps: **react**, **react-dom** (obrigatórios); **gsap** (opcional — só componentes animados),
+**react-router-dom** (opcional). Tematização = sobrescrever os tokens CSS `--select-*` / `--sw-*`.
+
+## Build
+
+```bash
+npm run build   # → dist/index.js (ESM) + dist/style.css + dist/index.d.ts
+```
+
+`npm publish` roda `prepublishOnly` (= build) e publica só `dist/` (sem sourcemaps).

package/dist/SelectAssistant.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+export interface SelectAssistantSuggestion {
+    id: string;
+    label: string;
+}
+export interface SelectAssistantProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** O glifo do botão e do cabeçalho. */
+    icon: ReactNode;
+    title: ReactNode;
+    /** Linha de apoio sob o título ("Atualizado hoje às 06:00"). */
+    subtitle?: ReactNode;
+    /** Nome acessível do botão ("Perguntar ao Lince"). */
+    launcherLabel: string;
+    /** Novidades à espera: o selo do botão. `0`/ausente = sem selo. */
+    badge?: number;
+    /** As falas — `SelectChatMessage`. */
+    children: ReactNode;
+    /** Muda quando chega fala nova (o número de falas): a conversa rola até o fim. */
+    scrollKey?: string | number;
+    /** Perguntas prontas, acima do campo. */
+    suggestions?: ReadonlyArray<SelectAssistantSuggestion>;
+    onSuggestion?: (id: string) => void;
+    /** O texto digitado, já sem as pontas. Sem ele, a janela não tem campo. */
+    onSend?: (text: string) => void;
+    placeholder?: string;
+    /** Campo e sugestões desligados (lendo, sem acesso). */
+    disabled?: boolean;
+    /** Ação no cabeçalho, antes do fechar (um link para a tela cheia). */
+    headerAction?: ReactNode;
+    /** `viewport` (padrão) prende à janela do navegador; `container`, ao ancestral posicionado. */
+    anchor?: 'viewport' | 'container';
+    /** Nomes acessíveis — o padrão é pt-BR. */
+    closeLabel?: string;
+    sendLabel?: string;
+    inputLabel?: string;
+    className?: string;
+}
+export declare function SelectAssistant({ open, onOpenChange, icon, title, subtitle, launcherLabel, badge, children, scrollKey, suggestions, onSuggestion, onSend, placeholder, disabled, headerAction, anchor, closeLabel, sendLabel, inputLabel, className, }: SelectAssistantProps): import("react").JSX.Element;
+export interface SelectChatMessageProps {
+    /** Quem fala: o assistente (à esquerda) ou a pessoa (à direita). */
+    from: 'assistant' | 'user';
+    /** Sem balão — a fala é um conteúdo rico que já tem a sua moldura (uma lista de achados, uma ficha). */
+    bare?: boolean;
+    children: ReactNode;
+}
+/** SelectChatMessage — uma fala. Texto simples vai num balão; `bare` entrega a largura toda a um conteúdo rico. */
+export declare function SelectChatMessage({ from, bare, children }: SelectChatMessageProps): import("react").JSX.Element;

package/dist/SelectAvatar.d.ts

@@ -11,6 +11,11 @@ type SelectAvatarOwnProps = {
     size?: 'md' | 'lg';
     /** How many letters stand for the name: 1 (default) or 2 (first + last word). */
     initials?: 1 | 2;
+    /**
+     * A sigla pronta, até 3 letras ("GTM", "TikTok" → "TT") — vence o `name`. Com 3 letras a fonte encolhe para
+     * caber no quadrado (0.1.141).
+     */
+    monogram?: string;
 };
 export type SelectAvatarProps = SelectAvatarOwnProps & Omit<ComponentPropsWithoutRef<'span'>, keyof SelectAvatarOwnProps>;
 export declare const SelectAvatar: import('react').ForwardRefExoticComponent<SelectAvatarOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof SelectAvatarOwnProps> & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/SelectBreadcrumb.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SelectBreadcrumbItem {
+    label: ReactNode;
+    /** Rota do nível (react-router). */
+    to?: string;
+    /** Alternativa ao `to` para quem navega por código. */
+    onAction?: () => void;
+}
+type SelectBreadcrumbOwnProps = {
+    items: SelectBreadcrumbItem[];
+    /** O último item é a página atual (padrão). `false` quando a trilha só tem os níveis de cima. */
+    lastIsCurrent?: boolean;
+};
+export type SelectBreadcrumbProps = SelectBreadcrumbOwnProps & Omit<ComponentPropsWithoutRef<'nav'>, keyof SelectBreadcrumbOwnProps>;
+export declare const SelectBreadcrumb: import('react').ForwardRefExoticComponent<SelectBreadcrumbOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, keyof SelectBreadcrumbOwnProps> & import('react').RefAttributes<HTMLElement>>;
+export {};

package/dist/SelectBuilderWorkspace.d.ts

@@ -17,6 +17,11 @@ export interface SelectBuilderSection {
      * `drill`, onde cada seção se apresenta antes de ser aberta.
      */
     summary?: ReactNode;
+    /**
+     * `critical` (0.1.135): a seção tem o que revisar — a linha da lista/trilha ganha o fundo de erro e o
+     * resumo a cor de erro, para achar de relance o que o salvar recusou.
+     */
+    tone?: 'critical';
     content: ReactNode;
 }
 export interface SelectBuilderWorkspaceProps {
@@ -64,12 +69,30 @@ export interface SelectBuilderWorkspaceProps {
     layout?: 'rail' | 'drill' | 'single';
     /** Conteúdo da coluna da esquerda no layout `single`. */
     panel?: ReactNode;
-    /** Largura da coluna da esquerda nos layouts `drill`/`single` (padrão 26rem). */
-    panelWidth?: string;
+    /**
+     * Largura da coluna da esquerda nos layouts `drill`/`single` (padrão 26rem). Por faixa de tela (0.1.141):
+     * `{ narrow, wide }` — `narrow` de 64em a 80em (o notebook de 1024–1280px, onde um painel largo espreme o
+     * palco), `wide` de 80em para cima.
+     */
+    panelWidth?: string | {
+        narrow: string;
+        wide: string;
+    };
     /**
      * No estreito (< 64em), duas abas no topo em vez da pilha (0.1.134): [ajustes, palco] — ex.:
      * `['Ajustes', 'Prévia']`. Sem isto, a prévia fica embaixo do formulário inteiro.
      */
     mobileTabs?: [string, string];
+    /**
+     * Aba aberta no estreito, controlada (0.1.135) — ex.: um salvar recusado com a prévia aberta volta
+     * a tela para os ajustes, onde está o campo com erro. Sem isto a aba é do próprio workspace.
+     */
+    mobileTab?: 'panel' | 'stage';
+    onMobileTabChange?: (tab: 'panel' | 'stage') => void;
+    /**
+     * Só leitura (0.1.135): sem Salvar, sem Descartar/Cancelar — um botão desabilitado que nunca
+     * acende só confunde. O status (salvo às…) continua.
+     */
+    readOnly?: boolean;
 }
-export declare function SelectBuilderWorkspace({ title, subtitle, backTo, onBack, onSave, saving, saveLabel, saveDisabled, cancelTo, onDiscard, discardLabel, error, sections, activeId, onActiveChange, searchable, searchPlaceholder, preview, previewLayout, toolbar, dirty, dirtyLabel, savedLabel, reviewLabel, layout, panel, panelWidth, mobileTabs, }: SelectBuilderWorkspaceProps): import("react").JSX.Element;
+export declare function SelectBuilderWorkspace({ title, subtitle, backTo, onBack, onSave, saving, saveLabel, saveDisabled, cancelTo, onDiscard, discardLabel, error, sections, activeId, onActiveChange, searchable, searchPlaceholder, preview, previewLayout, toolbar, dirty, dirtyLabel, savedLabel, reviewLabel, layout, panel, panelWidth, mobileTabs, mobileTab, onMobileTabChange, readOnly, }: SelectBuilderWorkspaceProps): import("react").JSX.Element;

package/dist/SelectCard.d.ts

@@ -4,6 +4,8 @@ type SelectCardOwnProps = {
     subtitle?: ReactNode;
     logo?: ReactNode;
     mark?: ReactNode;
+    /** Faixa acima do logo, no fundo do rodapé (o convite: empresa, papel, validade). */
+    banner?: ReactNode;
     children: ReactNode;
     footer?: ReactNode;
 };

package/dist/SelectChannelPreview.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+/** O centro do palco: a peça no meio, com a respiração de uma folha. */
+export declare function SelectPreviewStage({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** O celular: o cabeçalho do app (o do WhatsApp verde, o do SMS com o contato no meio) e a conversa. */
+export declare function SelectDeviceFrame({ variant, title, subtitle, children, }: {
+    variant: 'whatsapp' | 'sms';
+    /** Quem manda (o nome da loja; no SMS, o número ou o remetente). */
+    title?: string;
+    subtitle?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * O balão da mensagem. `media` é o rótulo do anexo ("Imagem", "nota.pdf"); `buttons`, os botões do modelo aprovado,
+ * colados embaixo como o WhatsApp desenha; `empty` mostra o texto apagado (a caixa ainda vazia). `backdrop` põe o fundo
+ * do chat em volta — para o balão solto, fora do `SelectDeviceFrame`.
+ */
+export declare function SelectMessageBubble({ variant, media, buttons, empty, backdrop, children, }: {
+    variant: 'whatsapp' | 'sms';
+    media?: ReactNode;
+    buttons?: string[];
+    empty?: boolean;
+    backdrop?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * O e-mail como chega na caixa de entrada: o remetente e o assunto em cima, o corpo (`srcDoc`) num iframe da altura
+ * do próprio conteúdo. `loading` segura o lugar do corpo; `srcDoc` nulo não desenha o corpo (o render ainda não veio).
+ */
+export declare function SelectMailPreview({ from, subject, emptySubject, device, srcDoc, loading, frameTitle, }: {
+    from?: {
+        name?: string;
+        email?: string;
+    };
+    /** O assunto — texto ou nós (o assunto com as fichas de dado). Vazio mostra `emptySubject`. */
+    subject?: ReactNode;
+    emptySubject?: string;
+    device?: 'desktop' | 'mobile';
+    srcDoc?: string | null;
+    loading?: boolean;
+    frameTitle?: string;
+}): import("react").JSX.Element;

package/dist/SelectChoiceCard.d.ts

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface SelectChoiceCardProps {
-    /** O glifo (um ícone do kit). */
-    icon: ReactNode;
+    /** O glifo (um ícone do kit). Opcional com `media`. */
+    icon?: ReactNode;
+    /** Miniatura larga no topo no lugar do quadrado do ícone (o desenho da opção). */
+    media?: ReactNode;
     /** Cor do quadrado do ícone (hex/var). Padrão: a primária da casa. */
     accent?: string;
     title: ReactNode;

package/dist/SelectCombobox.d.ts

@@ -17,7 +17,8 @@ type SelectComboboxOwnProps = {
     /** Ajuda contextual: vira o "!" (SelectInfoTip) ao lado do rotulo. Use para o que
      *  explica a plataforma; `hint` e so restricao/estado do proprio campo. */
     help?: ReactNode;
-    hint?: string;
+    /** Embaixo do campo. Aceita nós (um link). */
+    hint?: ReactNode;
     error?: string;
     emptyText?: string;
     /** Disables the trigger (e.g. a field that's immutable on edit). */

package/dist/SelectCopyRow.d.ts

@@ -8,6 +8,8 @@ type SelectCopyRowOwnProps = {
     /** Aviso ao consumidor DEPOIS da cópia (um toast, por exemplo) — a cópia em si é do
      *  componente; o handler não precisa (nem deve) escrever no clipboard. */
     onCopy?: (value: string) => void;
+    /** Texto corrido (uma mensagem): aparece inteiro, numa caixa, com o botão "Copiar". */
+    prose?: boolean;
 };
 export type SelectCopyRowProps = SelectCopyRowOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectCopyRowOwnProps>;
 export declare const SelectCopyRow: import('react').ForwardRefExoticComponent<SelectCopyRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectCopyRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectDataTable.d.ts

@@ -57,6 +57,8 @@ export interface SelectDataColumn<T> {
     /** Deixa o conteúdo QUEBRAR linha em vez de cortar com reticências — para um título com a
      *  descrição embaixo (uma matriz de preferências), não para ids e valores. */
     wrap?: boolean;
+    /** Destaca a coluna inteira — a que está em conflito (o GTM e o pixel direto contando duas vezes). */
+    tone?: 'critical' | 'caution' | 'info';
 }
 /**
  * Page size the user picked for a given table (pair with `pagination.pageSizeOptions`/
@@ -65,8 +67,9 @@ export interface SelectDataColumn<T> {
  * guards mirror SelectMoney — storage unavailable = in-memory only.
  */
 export declare function useSelectPageSize(key: string, fallback: number, options?: number[]): [number, (size: number) => void];
-export declare function SelectDataTable<T>({ columns, items, getId, loading, empty, pagination, onRowClick, title, help, description, action, filters, columnsKey, getChildren, defaultExpanded, compactRow, compactQuery, onCompactRowClick, }: {
-    columns: SelectDataColumn<T>[];
+export declare function SelectDataTable<T>({ columns, items, getId, loading, empty, pagination, onRowClick, title, help, description, action, filters, columnsKey, getChildren, defaultExpanded, compactRow, compactQuery, onCompactRowClick, listRow, footer, }: {
+    /** As colunas da grade. Dispensável com `listRow` (a lista não tem colunas). */
+    columns?: SelectDataColumn<T>[];
     items: T[];
     getId: (item: T) => string;
     loading?: boolean;
@@ -112,9 +115,8 @@ export declare function SelectDataTable<T>({ columns, items, getId, loading, emp
      * recuadas e num fundo afundado, na MESMA grade de colunas — o `nested` da SelectTable. As
      * linhas sem filhas reservam o espaço do chevron, para a primeira coluna seguir alinhada.
      *
-     * A linha-mãe é um <button>: as colunas não podem desenhar controle interativo nela — devolva
-     * `null` na coluna de ações para o item-grupo. `onRowClick` vale para as outras linhas; na mãe,
-     * o clique é o abrir/fechar. A ordenação reordena as mães entre si e as filhas dentro de cada
+     * Na linha-mãe o clique é o abrir/fechar (`onRowClick` vale para as outras linhas); um controle
+     * numa célula dela (o menu de ações) continua sendo só dele. A ordenação reordena as mães entre si e as filhas dentro de cada
      * mãe: uma filha nunca sai de baixo da sua. As filhas não têm filhas (um nível só).
      */
     getChildren?: (item: T) => T[] | null | undefined;
@@ -130,7 +132,14 @@ export declare function SelectDataTable<T>({ columns, items, getId, loading, emp
     compactRow?: (item: T) => ReactNode;
     /** Media query do modo compacto. Padrão `(max-width: 40rem)`. */
     compactQuery?: string;
-    /** Clique na linha COMPACTA (padrão: `onRowClick`). Existe porque a linha larga costuma ter
-     *  controles nas células (copiar id, menu) e por isso não é clicável — a compacta, sem eles, é. */
+    /** Clique na linha COMPACTA (padrão: `onRowClick`) — para quando só a compacta é clicável. */
     onCompactRowClick?: (item: T) => void;
+    /**
+     * Lista de LINHAS RICAS em toda largura (0.1.141): cada item é o bloco que esta função desenhar (o comentário com
+     * as ações embaixo), na MESMA casca — título, faixa de filtros, paginação —, sem cabeçalho de colunas. Dispensa
+     * `columns`; o texto quebra linha. É o "modo lista" da tabela: dado com um bloco por item, não uma grade.
+     */
+    listRow?: (item: T) => ReactNode;
+    /** Uma linha discreta embaixo das linhas, antes da paginação ("Os 20 mais recentes de 300"). */
+    footer?: ReactNode;
 }): import("react").JSX.Element;

package/dist/SelectDateField.d.ts

@@ -14,6 +14,8 @@ export interface SelectDateFieldProps {
     maxDate?: Date | null;
     /** Offer a "Limpar" action that empties the field (default true). */
     clearable?: boolean;
+    /** Em que grade o calendário abre quando o campo está vazio: `year` para data longe (nascimento). */
+    openTo?: 'day' | 'year';
     id?: string;
 }
 export declare const SelectDateField: import('react').ForwardRefExoticComponent<SelectDateFieldProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectDateFieldProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectDetail.d.ts

@@ -1,7 +1,13 @@
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
-export declare function SelectDetailList({ children, stacked, loading, }: {
+export declare function SelectDetailList({ children, stacked, compact, loading, }: {
     children: ReactNode;
     stacked?: boolean;
+    /**
+     * A tabelinha do CORPO de um card ("Pix 0,99% · Boleto R$ 2,89"): rótulo apagado à esquerda,
+     * valor à direita em números tabulares, linhas mais baixas — sem a coluna fixa de 9rem, que num
+     * card estreito espreme o valor.
+     */
+    compact?: boolean;
     /** Shimmer every row's value. The labels stay — only the values are unknown. */
     loading?: boolean;
 }): import("react").JSX.Element;

package/dist/SelectField.d.ts

@@ -31,7 +31,8 @@ export interface SelectFieldProps {
     /** Helper text shown under the label, ABOVE the input (Clerk "Key" pattern). */
     description?: ReactNode;
     /** Helper text below the field (hidden when `error` is set). */
-    hint?: string;
+    /** Restrição/estado do campo, embaixo dele. Aceita nós (um link: "abrir no fluxograma"). */
+    hint?: ReactNode;
     /** Validation message below the field; also flips the input to its error style. */
     error?: string;
     /** Static text/icon inside the field, left of the value (e.g. "R$", "https://"). */

package/dist/SelectFileDropzone.d.ts

@@ -9,5 +9,23 @@ export interface SelectFileDropzoneProps {
     /** Optional cap on the number of files; hides the add tile once reached. */
     maxFiles?: number;
     hint?: string;
+    /**
+     * Câmera direta num aparelho de toque: `user` (a da frente — a selfie) ou `environment` (a de trás —
+     * o documento). A zona vazia vira dois botões: a câmera e o seletor de arquivos. No computador, nada muda.
+     */
+    capture?: 'user' | 'environment';
+    /** O botão da câmera (padrão "Fotografar"). */
+    captureLabel?: string;
+    /** O botão do arquivo ao lado da câmera (padrão "Escolher arquivo"). */
+    pickLabel?: string;
+    /**
+     * Prepara cada arquivo ANTES do teto e do `accept` (reduzir a foto grande no navegador, converter o
+     * HEIC). Lançar um `Error` recusa o arquivo, e a mensagem dele é a frase que aparece.
+     */
+    prepare?: (file: File) => Promise<File>;
+    /** `vertical`: glifo em cima, texto embaixo, numa zona mais alta. Padrão `inline`. */
+    layout?: 'inline' | 'vertical';
+    /** Na zona vertical, a linha principal (padrão "Arraste o arquivo ou clique para escolher"); o `hint` vem embaixo. */
+    label?: string;
 }
 export declare const SelectFileDropzone: import('react').ForwardRefExoticComponent<SelectFileDropzoneProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectFileDropzoneProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectFilterChip.d.ts

@@ -3,6 +3,10 @@ type SelectFilterChipOwnProps = {
     children: ReactNode;
     onClick?: () => void;
     active?: boolean;
+    /** Chip de escolha: um filtro entre irmãos, sem o "+" de "adicionar filtro". */
+    toggle?: boolean;
+    /** Quantos itens o filtro tem — ao lado do rótulo, mais discreto. */
+    count?: number;
 };
 export type SelectFilterChipProps = SelectFilterChipOwnProps & Omit<ComponentPropsWithoutRef<'button'>, keyof SelectFilterChipOwnProps>;
 export declare const SelectFilterChip: import('react').ForwardRefExoticComponent<SelectFilterChipOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof SelectFilterChipOwnProps> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/SelectIconPicker.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface SelectIconOption {
+    value: string;
+    label: string;
+    /** O glifo, como elemento (`<TruckIcon />`). */
+    icon: ReactNode;
+}
+export declare function SelectIconPicker({ label, options, value, onChange, help, hint, error, disabled, unknownLabel, placeholder, columns, }: {
+    label?: string;
+    options: SelectIconOption[];
+    value: string;
+    onChange: (value: string) => void;
+    help?: ReactNode;
+    hint?: string;
+    error?: string;
+    disabled?: boolean;
+    /** O nome do valor gravado que não está nas opções. */
+    unknownLabel?: string;
+    placeholder?: string;
+    /** Ícones por linha na grade. Padrão 6. */
+    columns?: number;
+}): import("react").JSX.Element;

package/dist/SelectInsight.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-/** Um valor do achado: `display` para ler, `raw` para gráfico/ordenação (percentual em fração, dinheiro em centavos). */
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/** Um valor do ponto: `display` para ler, `raw` para desenhar/ordenar (percentual em fração, dinheiro em centavos). */
 export interface SelectInsightValue {
     type: string;
     raw: number | string | readonly string[];
@@ -26,6 +26,8 @@ export type SelectInsightBlock = {
     baseline: SelectInsightValue;
     baselineLabel: string;
     hint: string | null;
+    /** De quem é o `value` ("Sua empresa", "Este anúncio"). Sem ele, a linha do valor leva o próprio `label`. */
+    valueLabel?: string | null;
 } | {
     type: 'table';
     title: string;
@@ -47,13 +49,28 @@ export interface SelectInsightAction {
     /** Destino estável (`guide:utm`, `product:prd_…`) ou `null` — conselho sem tela. */
     target: string | null;
 }
-/** O achado como o node o entrega. Campos a mais (id, status, score…) passam sem atrapalhar. */
+/** Para onde uma ação leva: vira o botão da ação ("Ver o passo a passo ›", "Criar cupom ›"). */
+export interface SelectInsightActionLink {
+    /** O verbo do botão ("Ver o passo a passo", "Criar cupom"). */
+    label: string;
+    /** O que acontece ao seguir a ação — uma frase, sob o título dela em "O que fazer agora". */
+    description?: string;
+    href?: string;
+    /** Navegação do próprio app (router): o clique comum é interceptado; o do meio segue o `href`. */
+    onClick?: () => void;
+    /** Abre em outra aba (suporte, documentação). */
+    external?: boolean;
+}
+/** O ponto como o node o entrega. Campos a mais (id, status, score…) passam sem atrapalhar. */
 export interface SelectInsightData {
     title: string;
     summary: string;
     severity: string;
     confidence?: string | null;
     sampleSize?: number | null;
+    /** A amostra com o que ela conta, já traduzida pelo node ("136 compras no cartão analisadas"). Vence o
+     *  "amostra de N" montado aqui com o `sampleSize`. */
+    sampleLabel?: string | null;
     kind?: string | null;
     domain?: string | null;
     impact?: {
@@ -77,43 +94,155 @@ export interface SelectInsightLabels {
     severity: Record<string, string>;
     kind: Record<string, string>;
     domain: Record<string, string>;
+    /** A frase inteira ("Confiança alta") — a primeira parte da linha de "como o Lince chegou a esse número". */
     confidence: Record<string, string>;
     sample: (n: string) => string;
+    /** As duas pontas já formatadas ("12/09", "10/10") → "de 12/09 a 10/10". */
+    periodRange: (start: string, end: string) => string;
+    /** Período de horas dentro de um dia (um alerta: "as últimas 6 h") → "em 03/10, das 08:00 às 14:00". */
+    periodSameDay: (day: string, from: string, to: string) => string;
     /** A faixa já formatada ("R$ 2.038 a R$ 3.962") → a frase do impacto. */
     impact: (range: string) => string;
     /** Impacto com mínimo = máximo — ainda é estimativa, então nunca um número seco. */
     impactAbout: (value: string) => string;
+    /** O mesmo "cerca de", sem o resto da frase — o número do bloco de impacto. */
+    about: (value: string) => string;
     rangeJoin: string;
+    /** "até" — antes do teto da faixa, na linha da fila. */
+    upTo: string;
+    /** "para recuperar" — depois do teto, no card do celular. */
+    toRecover: string;
+    impactLabel: string;
+    impactNote: string;
+    /** O rótulo do destaque da primeira ação. */
+    actionsNow: string;
+    /** O título das outras ações, sob a primeira. */
+    actionsMore: string;
+    /** O título da evidência. */
+    evidence: string;
+    /** O título do histórico do número, em "Entenda os números". */
+    trend: string;
     methodology: string;
-    actions: string;
+    /** O selo do ponto travado ("Lince Pro" no painel; aqui, o genérico). */
     locked: string;
+    lockedImpactLabel: string;
+    lockedImpactNote: string;
+    unread: string;
 }
-/** "R$ 2.038 a R$ 3.962" — em reais inteiros: é estimativa, centavo seria falsa precisão. */
-export declare function formatInsightImpact(impact: {
+type Impact = {
     currency: string;
     minCents: number;
     maxCents: number;
-}, locale?: string, labels?: Pick<SelectInsightLabels, 'impact' | 'impactAbout' | 'rangeJoin'>): string;
+};
+type ImpactLabels = Pick<SelectInsightLabels, 'impact' | 'impactAbout' | 'rangeJoin'>;
+/** "R$ 2.038 a R$ 3.962 para recuperar" — a frase inteira do impacto, para quem a escreve num texto. */
+export declare function formatInsightImpact(impact: Impact, locale?: string, labels?: ImpactLabels): string;
+/**
+ * O retorno de quem marcou o ponto como feito (0.1.139): o antes e o depois que o Lince mede depois do "feito". O
+ * consumidor escreve as palavras (o veredito, a data); o card desenha o quadro no tom do veredito.
+ */
+export interface SelectInsightOutcome {
+    /** `success` melhorou · `warning` piorou · `neutral` sem conclusão, ou ainda a medir. */
+    tone: 'success' | 'warning' | 'neutral';
+    /** A linha de cima ("O resultado · Melhorou", "A medir em 29/09"). */
+    label: ReactNode;
+    /** A frase que resume ("Pix pagos: 58% antes, 72% depois."). */
+    summary?: ReactNode;
+    /** Os dois lados, já formatados. Sem `after`, ainda não há o depois. */
+    before?: {
+        label: ReactNode;
+        value: ReactNode;
+    } | null;
+    after?: {
+        label: ReactNode;
+        value: ReactNode;
+    } | null;
+    /** A ressalva ("Antes e depois não provam a causa…"). */
+    note?: ReactNode;
+}
 export interface SelectInsightProps {
     insight: SelectInsightData;
-    /** Os rótulos do card. O TEXTO do achado já vem traduzido pelo node — passe a mesma língua que pediu a ele. */
+    /** Os rótulos do card. O TEXTO do ponto já vem traduzido pelo node — passe a mesma língua que pediu a ele. */
     locale?: string;
     labels?: Partial<SelectInsightLabels>;
     /** Fuso do período (o calendário do Lince é o de São Paulo). */
     timeZone?: string;
-    /** A isca do plano: só título, resumo e impacto, esmaecidos, com o `lockedCta`. */
+    /** A isca do plano: título, resumo e o impacto em destaque, a evidência como silhueta, e o `lockedCta`. */
     locked?: boolean;
     lockedCta?: ReactNode;
-    /** Selos a mais no cabeçalho (no console: o estado do achado, o "o lojista vê travado"). */
+    /** Onde o ponto está na fila ("1 de 5") — uma pílula antes da severidade. */
+    position?: ReactNode;
+    /** O leitor ainda não abriu este ponto: o marcador "Novo" ao lado do domínio. */
+    unread?: boolean;
+    /** Selos a mais no cabeçalho (no console: o estado do ponto, o "o lojista vê travado"). */
     badges?: ReactNode;
+    /** Controles à direita do cabeçalho — "Anterior" e "Próximo", na ficha ao lado da fila. */
+    nav?: ReactNode;
+    /**
+     * O que o leitor faz com o ponto ("Já resolvi", "Agora não"). No largo mora ao lado do botão da ação, em "O que
+     * fazer agora"; no estreito desce para o pé do card, na largura toda.
+     */
+    triage?: ReactNode;
+    /** A frase que explica a triagem ("'Agora não' tira este ponto da lista por 30 dias."). */
+    triageNote?: ReactNode;
     /** Linha a mais no pé do card (no console: o `subjectKey`). */
     footer?: ReactNode;
+    /**
+     * Como o número principal evoluiu (o histórico do ponto): o gráfico desenhado pelo consumidor (`content`) e uma
+     * linha que o resume (`caption`: "De 58% em 01/10 para 62% em 03/10."). Vai em "Entenda os números", depois dos
+     * quadros. Sem ele, nada aparece.
+     */
+    trend?: {
+        content: ReactNode;
+        caption?: ReactNode;
+    };
+    /** O resultado do "feito" (o antes e o depois) — logo depois do resumo, porque é o retorno que o leitor esperava. */
+    outcome?: SelectInsightOutcome;
     /** O rótulo de um item virado link quando houver tela (`product` + `prd_…`). `undefined` = só o texto. */
     renderItem?: (item: SelectInsightItem) => ReactNode | undefined;
-    /** Uma ação virada link/botão pelo `target`. `undefined` = só o texto. */
+    /** O destino de uma ação: vira o botão dela. `undefined` = conselho, sem botão. */
+    actionLink?: (action: SelectInsightAction) => SelectInsightActionLink | undefined;
+    /** Uma ação desenhada pelo consumidor (anterior ao `actionLink`, que é o caminho da casa). */
     renderAction?: (action: SelectInsightAction) => ReactNode | undefined;
-    /** "Como calculamos" aberto de saída. */
+    /** "Como o Lince chegou a esse número" aberto de saída. */
     methodologyOpen?: boolean;
+    /** Sem a casca de card (borda, fundo, respiro) — o ponto dentro de outro card ou de uma conversa. */
+    bare?: boolean;
     className?: string;
 }
-export declare function SelectInsight({ insight, locale, labels: labelsOverride, timeZone, locked, lockedCta, badges, footer, renderItem, renderAction, methodologyOpen, className, }: SelectInsightProps): import("react").JSX.Element;
+export declare function SelectInsight({ insight, locale, labels: labelsOverride, timeZone, locked, lockedCta, position, unread, badges, nav, triage, triageNote, footer, trend, outcome, renderItem, actionLink, renderAction, methodologyOpen, bare, className, }: SelectInsightProps): import("react").JSX.Element;
+type SelectInsightListOwnProps = {
+    /** `rows` (padrão): as linhas da fila; `cards`: os cartões do celular, com mais ar entre eles. */
+    layout?: 'rows' | 'cards';
+    children: ReactNode;
+};
+export type SelectInsightListProps = SelectInsightListOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectInsightListOwnProps>;
+/** SelectInsightList — a fila de `SelectInsightRow`. Dentro de uma `SelectSection`, as linhas encostam na borda do corpo. */
+export declare function SelectInsightList({ layout, children, className, ...rest }: SelectInsightListProps): import("react").JSX.Element;
+type SelectInsightRowOwnProps = {
+    insight: Pick<SelectInsightData, 'title' | 'severity' | 'kind' | 'domain' | 'impact'>;
+    locale?: string;
+    labels?: Partial<SelectInsightLabels>;
+    /** A posição na fila (1, 2, 3…): o número que diz por onde começar. */
+    index?: number;
+    /** A isca do plano: cadeado no lugar do número. */
+    locked?: boolean;
+    /** O marcador "Novo" — o leitor ainda não abriu. */
+    unread?: boolean;
+    /** A linha aberta na ficha ao lado. */
+    selected?: boolean;
+    /** `row` (padrão) é a linha da fila; `card` é o cartão do celular, com o impacto e a chamada no pé. */
+    layout?: 'row' | 'card';
+    /** A chamada do cartão ("Resolver", "Ver o que fazer"). */
+    cta?: ReactNode;
+    /** Um selo a mais na linha de baixo (o veredito do "feito", na lista dos resolvidos). */
+    badge?: ReactNode;
+};
+export type SelectInsightRowProps = SelectInsightRowOwnProps & Omit<ComponentPropsWithoutRef<'a'>, keyof SelectInsightRowOwnProps | 'title'>;
+/**
+ * SelectInsightRow — um ponto numa linha: o número da fila, o título, a severidade com o domínio e o teto do
+ * impacto ("até R$ 4.360"). É um link (`href` + `onClick` do router de quem usa); sem os dois, é só a linha.
+ * `selected` marca a que está aberta ao lado.
+ */
+export declare function SelectInsightRow({ insight, locale, labels: labelsOverride, index, locked, unread, selected, layout, cta, badge, href, onClick, className, ...rest }: SelectInsightRowProps): import("react").JSX.Element;
+export {};