@aurea-uds/native 0.8.6 → 0.8.8

package/dist/navigation.d.ts

@@ -33,31 +33,66 @@ export interface BottomNavProps extends ViewProps {
  *   ]} />
  * ```
  *
- * ⚠ **Ela respeita a barra de gestos sozinha.** Na web isso é
- * `padding-bottom: max(--space-1, env(safe-area-inset-bottom))` (`aurea.css:270`); aqui é o
- * `useSafeAreaInsets().bottom`, pela mesma conta de máximo. Sem isso, num aparelho com barra de
- * gestos, a última linha de rótulo fica embaixo dela.
+ * ⚠ **Ela respeita a área do sistema sozinha, e desde 19/09/2026 POR FORA da pílula.** No
+ * `floating` a folga vira `marginBottom`: a borda de baixo fica exatamente `space4` acima do topo
+ * da área do sistema, seja ela a faixa dos três botões do Android (≈48), a linha de gesto (≈16)
+ * ou o indicador do iPhone. No `edge`, que encosta na borda, ela continua sendo recheio por
+ * dentro — igual à web, onde `.bottom-nav-edge` faz exatamente isso.
  *
  * ⚠ **Não é `Tabs`, e isso é decisão registrada**, não esquecimento — ver o bloco acima.
  *
- * 🔴 **E VOCÊ FICA DONO DO FUNDO ATRÁS DELA — leia isto antes de montar a primeira tela.** Esta
- * barra é IRMÃ da tela, não filha: é assim que se põe uma barra fixa no RN. Só que o `Screen`
- * pinta o tema **na própria raiz**, então o que aparece atrás desta barra é a raiz do SEU app —
- * e raiz sem cor, no Android, é **BRANCA**. Num app de tema escuro isso é uma faixa branca no pé
- * da tela. Envolva os dois num `View` com `flex: 1` e `backgroundColor: tokens.color.background`:
+ * ── COMO MONTAR AS ABAS, com `expo-router` ou `react-navigation` ─────────────────────────────
  *
  * ```tsx
- * const t = useAureaTokens();
- * <View style={{flex: 1, backgroundColor: t.color.background}}>
- *   <Screen scroll>{…}</Screen>
- *   <BottomNav items={…} current={…} />
- * </View>
+ * import {Tabs} from "expo-router";
+ * import {BottomNav, BottomNavProvider} from "@aurea-uds/native";
+ *
+ * const ROTAS = [
+ *   {name: "index",  titulo: "Início", icone: "home"},
+ *   {name: "perfil", titulo: "Perfil", icone: "user"},
+ * ];
+ *
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={ROTAS.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
  * ```
  *
+ * E as telas, sem conta nenhuma de respiro: `<Screen scroll edges={["top"]}>`.
+ *
+ * 🔴 **O `BottomNav` VAI SOLTO NO `tabBar`, SEM `View` EM VOLTA — e esta linha já mandou o
+ * contrário.** Até a `0.8.7` a documentação aqui mandava embrulhar a barra num `View` pintado com
+ * o fundo do tema, porque a barra ficava no FLUXO e o que aparecia atrás dela era a raiz do app,
+ * que no Android é branca. O consumidor seguiu, e o resultado em aparelho foi uma **caixa cinza
+ * em volta da pílula**: ela não flutuava, e a tela terminava acima dela.
+ *
+ * ✅ **Hoje o `floating` é `position: absolute`** — ele sai do fluxo e passa por cima da tela,
+ * que volta a ocupar a altura inteira. Não há nada atrás da pílula para pintar, então **o
+ * embrulho não é mais necessário e atrapalha**: ele é quem desenha a faixa.
+ *
+ * ⚠ **O `edge` continua no fluxo**, e para ELE o conselho antigo continua valendo: embrulhe os
+ * dois num `View` com `flex: 1` e `backgroundColor: t.color.background`, senão sobra a faixa
+ * branca do Android no pé da tela.
+ *
  * ⚠ **E o sintoma engana.** Visto em foto no aparelho em 10/09/2026: com a faixa branca a barra
  * *parece* flutuando longe do pé, que é exatamente o sinal de que o respiro virou SOMA em vez de
  * `Math.max`. A conta estava certa; o branco é que empurrava a leitura. **Antes de acusar a
  * aritmética, pinte o fundo.**
+ *
+ * 🔴 **FLUTUAR TEM UM PREÇO, E A BIBLIOTECA É QUEM PAGA:** o fim da rolagem fica atrás da pílula.
+ * É para isso que o `BottomNavProvider` existe — a barra mede a própria altura e conta para ele,
+ * e o `Screen scroll` reserva o espaço sozinho. **O app não calcula nada.** Para uma tela que não
+ * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
+ * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
 export declare function BottomNav({ items, current, variant, indicator, label, style, ...rest }: BottomNavProps): React.JSX.Element;
 export type AureaTopbarVariant = "floating" | "flush" | "pill";

package/dist/navigation.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAnotarBottomNav } from "./barranav.js";
 import { Badge } from "./display.js";
 import { comOpacidade, criarFolha } from "./estilos.js";
 import { Icon } from "./icon.js";
@@ -32,14 +33,28 @@ const folha = criarFolha((t) => ({
         borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
     },
     // ── BottomNav ──────────────────────────────────────────────────────────────────────────────
+    // 🔴 `floating` FLUTUA POR CIMA DA TELA, e isto é conserto de 19/09/2026 — a variante prometia
+    // isso no nome e não fazia. `position: absolute` a tira do fluxo: a tela passa a ocupar a altura
+    // inteira e rola POR BAIXO da pílula. É o mesmo que a web faz desde sempre com
+    // `position: sticky; bottom: 0` (`aurea.css:270`) — a divergência era só deste lado.
+    //
+    // ⚠ **As margens são o que deixa o toque passar.** Com `left/right/bottom: 0` e `margin`, a
+    // caixa deste `View` É a pílula: o que sobra em volta não pertence a ela, e o dedo encontra a
+    // tela de baixo. Se a barra fosse uma faixa de largura cheia com a pílula centralizada dentro,
+    // a faixa comeria o toque em silêncio.
+    //
+    // `zSticky` é token (20), o mesmo `--z-sticky` que a web usa na mesma peça.
     barra: {
+        position: "absolute", left: 0, right: 0, bottom: 0, zIndex: t.size.zSticky,
         flexDirection: "row", gap: t.size.space1, margin: t.size.space4, padding: t.size.space1,
         borderWidth: t.size.borderWidth, borderColor: t.color.border,
         borderRadius: t.size.radiusControl, backgroundColor: t.color.card,
         boxShadow: [t.shadow.shadowMd],
     },
-    // `edge` encosta na borda: sem margem, sem raio, só a linha de cima.
+    // `edge` encosta na borda: sem margem, sem raio, só a linha de cima — e continua NO FLUXO,
+    // porque uma barra encostada que flutuasse esconderia o fim da tela sem nada reservar.
     barra_edge: {
+        position: "relative", left: undefined, right: undefined, bottom: undefined, zIndex: undefined,
         margin: 0, paddingHorizontal: 0, borderRadius: 0, backgroundColor: t.color.background,
         borderWidth: 0, borderTopWidth: t.size.borderWidth, boxShadow: undefined,
     },
@@ -112,31 +127,66 @@ const folha = criarFolha((t) => ({
  *   ]} />
  * ```
  *
- * ⚠ **Ela respeita a barra de gestos sozinha.** Na web isso é
- * `padding-bottom: max(--space-1, env(safe-area-inset-bottom))` (`aurea.css:270`); aqui é o
- * `useSafeAreaInsets().bottom`, pela mesma conta de máximo. Sem isso, num aparelho com barra de
- * gestos, a última linha de rótulo fica embaixo dela.
+ * ⚠ **Ela respeita a área do sistema sozinha, e desde 19/09/2026 POR FORA da pílula.** No
+ * `floating` a folga vira `marginBottom`: a borda de baixo fica exatamente `space4` acima do topo
+ * da área do sistema, seja ela a faixa dos três botões do Android (≈48), a linha de gesto (≈16)
+ * ou o indicador do iPhone. No `edge`, que encosta na borda, ela continua sendo recheio por
+ * dentro — igual à web, onde `.bottom-nav-edge` faz exatamente isso.
  *
  * ⚠ **Não é `Tabs`, e isso é decisão registrada**, não esquecimento — ver o bloco acima.
  *
- * 🔴 **E VOCÊ FICA DONO DO FUNDO ATRÁS DELA — leia isto antes de montar a primeira tela.** Esta
- * barra é IRMÃ da tela, não filha: é assim que se põe uma barra fixa no RN. Só que o `Screen`
- * pinta o tema **na própria raiz**, então o que aparece atrás desta barra é a raiz do SEU app —
- * e raiz sem cor, no Android, é **BRANCA**. Num app de tema escuro isso é uma faixa branca no pé
- * da tela. Envolva os dois num `View` com `flex: 1` e `backgroundColor: tokens.color.background`:
+ * ── COMO MONTAR AS ABAS, com `expo-router` ou `react-navigation` ─────────────────────────────
  *
  * ```tsx
- * const t = useAureaTokens();
- * <View style={{flex: 1, backgroundColor: t.color.background}}>
- *   <Screen scroll>{…}</Screen>
- *   <BottomNav items={…} current={…} />
- * </View>
+ * import {Tabs} from "expo-router";
+ * import {BottomNav, BottomNavProvider} from "@aurea-uds/native";
+ *
+ * const ROTAS = [
+ *   {name: "index",  titulo: "Início", icone: "home"},
+ *   {name: "perfil", titulo: "Perfil", icone: "user"},
+ * ];
+ *
+ * <BottomNavProvider>
+ *   <Tabs
+ *     screenOptions={{headerShown: false}}
+ *     tabBar={({state, navigation}) => (
+ *       <BottomNav
+ *         label="Menu principal"
+ *         current={state.routes[state.index].name}
+ *         items={ROTAS.map((r) => ({
+ *           id: r.name, label: r.titulo, icon: r.icone,
+ *           onPress: () => navigation.navigate(r.name),
+ *         }))} />
+ *     )} />
+ * </BottomNavProvider>
  * ```
  *
+ * E as telas, sem conta nenhuma de respiro: `<Screen scroll edges={["top"]}>`.
+ *
+ * 🔴 **O `BottomNav` VAI SOLTO NO `tabBar`, SEM `View` EM VOLTA — e esta linha já mandou o
+ * contrário.** Até a `0.8.7` a documentação aqui mandava embrulhar a barra num `View` pintado com
+ * o fundo do tema, porque a barra ficava no FLUXO e o que aparecia atrás dela era a raiz do app,
+ * que no Android é branca. O consumidor seguiu, e o resultado em aparelho foi uma **caixa cinza
+ * em volta da pílula**: ela não flutuava, e a tela terminava acima dela.
+ *
+ * ✅ **Hoje o `floating` é `position: absolute`** — ele sai do fluxo e passa por cima da tela,
+ * que volta a ocupar a altura inteira. Não há nada atrás da pílula para pintar, então **o
+ * embrulho não é mais necessário e atrapalha**: ele é quem desenha a faixa.
+ *
+ * ⚠ **O `edge` continua no fluxo**, e para ELE o conselho antigo continua valendo: embrulhe os
+ * dois num `View` com `flex: 1` e `backgroundColor: t.color.background`, senão sobra a faixa
+ * branca do Android no pé da tela.
+ *
  * ⚠ **E o sintoma engana.** Visto em foto no aparelho em 10/09/2026: com a faixa branca a barra
  * *parece* flutuando longe do pé, que é exatamente o sinal de que o respiro virou SOMA em vez de
  * `Math.max`. A conta estava certa; o branco é que empurrava a leitura. **Antes de acusar a
  * aritmética, pinte o fundo.**
+ *
+ * 🔴 **FLUTUAR TEM UM PREÇO, E A BIBLIOTECA É QUEM PAGA:** o fim da rolagem fica atrás da pílula.
+ * É para isso que o `BottomNavProvider` existe — a barra mede a própria altura e conta para ele,
+ * e o `Screen scroll` reserva o espaço sozinho. **O app não calcula nada.** Para uma tela que não
+ * usa `Screen` (uma fileira de botões presa no pé, por exemplo), o número está em
+ * `useBottomNavSpace()`. Fora de um provedor os dois valem zero, e nada muda.
  */
 export function BottomNav({ items, current, variant = "floating", indicator = "none", label, style, ...rest }) {
     const t = useAureaTokens();
@@ -144,11 +194,29 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
     const strings = useAureaStrings();
     const inset = useSafeAreaInsets();
     const redondo = indicator.startsWith("circle");
-    return (_jsx(View, { accessibilityLabel: label ?? strings.bottomNavLabel, style: [
+    const anotar = useAnotarBottomNav();
+    const flutua = variant !== "edge";
+    return (_jsx(View, { accessibilityLabel: label ?? strings.bottomNavLabel, 
+        // 🔴 A BARRA CONTA A PRÓPRIA ALTURA — é o que permite o `Screen` reservar o fim da rolagem
+        // sem o app calcular nada. A conta é a pílula (o que o layout mede) mais as DUAS margens
+        // mais a folga do sistema; `edge` conta zero, porque ela fica no fluxo e já encurta a tela.
+        onLayout: anotar == null ? undefined : (e) => anotar(flutua ? e.nativeEvent.layout.height + t.size.space4 * 2 + inset.bottom : 0), style: [
             s.barra, variant === "edge" && s.barra_edge,
-            // `max`, e não soma: com barra de gestos o respiro dela substitui o nosso; sem ela, o
-            // nosso vale. Somar daria duas vezes o espaço num aparelho e o certo no outro.
-            { paddingBottom: Math.max(t.size.space1, inset.bottom) },
+            // 🔴 NO `floating` A FOLGA DO SISTEMA VAI POR FORA — conserto de 19/09/2026, visto em
+            // aparelho Samsung com os três botões (|||, ○, <).
+            //
+            // Antes, os ≈48 pontos da faixa do sistema entravam como RECHEIO dentro da pílula: ela
+            // crescia para baixo e a barriga dela ficava atrás dos botões. A `margin: space4` não
+            // compensava, porque o que cresceu foi o miolo.
+            //
+            // Agora: recheio de baixo igual aos outros lados, e a folga empurra a pílula para cima.
+            // A borda de baixo fica exatamente `space4` acima do topo da área do sistema, em aparelho
+            // de botões, de gesto ou com o indicador do iPhone — os três caem na mesma conta.
+            flutua
+                ? { paddingBottom: t.size.space1, marginBottom: t.size.space4 + inset.bottom }
+                // `edge` NÃO MUDA: encostada na borda, a folga é recheio mesmo, senão sobraria uma
+                // faixa de fundo entre a barra e o pé da tela. `max` e não soma, como sempre foi.
+                : { paddingBottom: Math.max(t.size.space1, inset.bottom) },
             style,
         ], ...rest, children: items.map((it) => {
             const ativo = it.id === current;

package/dist/numero.d.ts

@@ -103,6 +103,17 @@ type IconNameLocal = string;
  *
  * ⚠ **Formata no blur, e só no blur.** Enquanto o campo tem foco, ele mostra exatamente o que foi
  * digitado — essa é a decisão inteira da ADR-0024, e o teste que a cobra está no lote.
+ *
+ * ⚠ **`onValueChange` dispara a CADA TECLA**, com o número lido pelas regras do `locale` — "12,"
+ * em pt-BR entrega `12`, "1.234,5" entrega `1234.5`, apagar tudo entrega `null`. Texto que ainda
+ * não é número (só "," ou só "-") não dispara nada. **`min`/`max` NÃO prendem durante a
+ * digitação**, só no blur — e se prender mudar o número, ele é emitido de novo.
+ *
+ * ⚠ **Com FOCO, quem manda é quem digita.** Se o pai trocar o `value` por outro número enquanto o
+ * campo está sendo editado, o texto na tela **não muda** — inclusive quando o pai só devolve o
+ * mesmo número que acabou de receber, que é o caso comum de um `useState` controlado. Sem foco, o
+ * campo obedece ao `value` e mostra o número novo formatado, que é o que faz um campo calculado a
+ * partir de outros dois funcionar.
  */
 export declare function NumberField({ value, defaultValue, onValueChange, min, max, step, format, locale, disabled, readOnly, size, fullWidth, label, placeholder, keyboardType, icons, style, testID, }: NumberFieldProps): React.JSX.Element;
 export {};

package/dist/numero.js

@@ -49,7 +49,7 @@ import { Platform, TextInput, View } from "react-native";
 import { IconButton } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { useCampo } from "./inputs.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { useAureaStrings, useAureaTokens, usePeleSobreAMarca } from "./theme.js";
 const alturaDoTamanho = (t, s) => s === "sm" ? t.size.controlHSm : s === "lg" ? t.size.controlHLg : t.size.controlHMd;
 const fonteDoTamanho = (t, s) => s === "sm" ? t.size.textXs : s === "lg" ? t.size.textBase : t.size.textMd;
 const folha = criarFolha((t) => ({
@@ -231,10 +231,22 @@ const paraEdicao = (n, locale) => {
  *
  * ⚠ **Formata no blur, e só no blur.** Enquanto o campo tem foco, ele mostra exatamente o que foi
  * digitado — essa é a decisão inteira da ADR-0024, e o teste que a cobra está no lote.
+ *
+ * ⚠ **`onValueChange` dispara a CADA TECLA**, com o número lido pelas regras do `locale` — "12,"
+ * em pt-BR entrega `12`, "1.234,5" entrega `1234.5`, apagar tudo entrega `null`. Texto que ainda
+ * não é número (só "," ou só "-") não dispara nada. **`min`/`max` NÃO prendem durante a
+ * digitação**, só no blur — e se prender mudar o número, ele é emitido de novo.
+ *
+ * ⚠ **Com FOCO, quem manda é quem digita.** Se o pai trocar o `value` por outro número enquanto o
+ * campo está sendo editado, o texto na tela **não muda** — inclusive quando o pai só devolve o
+ * mesmo número que acabou de receber, que é o caso comum de um `useState` controlado. Sem foco, o
+ * campo obedece ao `value` e mostra o número novo formatado, que é o que faz um campo calculado a
+ * partir de outros dois funcionar.
  */
 export function NumberField({ value, defaultValue, onValueChange, min, max, step = 1, format, locale, disabled, readOnly, size, fullWidth = false, label, placeholder, keyboardType, icons = { increment: "add", decrement: "subtract" }, style, testID, }) {
     const t = useAureaTokens();
     const s = folha(t);
+    const peleDaMarca = usePeleSobreAMarca();
     const strings = useAureaStrings();
     const campo = useCampo();
     const tam = size ?? campo?.size ?? "md";
@@ -276,8 +288,41 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
                 emitir(null);
             return;
         }
+        // ⚠ **Só aqui é que `min`/`max` prendem**, e é no blur de propósito — ver `digitar` abaixo.
+        // Se prender mudou o número, o pai recebe o preso: quem ouviu "1" durante a digitação precisa
+        // ouvir o "10" final, senão fica com um valor que o campo não mostra mais.
         emitir(prender(lido, min, max));
     }, [emEdicao, locale, emitir, min, max]);
+    // 🔴 CADA TECLA ENTREGA O NÚMERO — e isto é conserto de defeito que GRAVA DADO ERRADO, não
+    // refinamento. Achado pelo consumidor em aparelho, 19/09/2026.
+    //
+    // Antes, `onChangeText` só guardava o texto aqui dentro e o pai só era avisado no blur. Num
+    // cartão com o campo e o botão de confirmar lado a lado, o `Screen` tem
+    // `keyboardShouldPersistTaps="handled"` (`screen.tsx:154`) — então o toque no botão CHEGA ao
+    // botão sem passar pelo blur. O `onPress` roda com o valor ANTIGO.
+    //
+    // ⚠ **A cara disso na tela é "o campo está vazio"**, e o dano real é maior e mudo: num
+    // formulário que corrige um número já salvo, tocar em Salvar com o teclado aberto regrava o
+    // número velho, sem erro e sem aviso.
+    //
+    // O que NÃO muda com isto, e é a ADR-0024 inteira: o campo continua mostrando o que foi
+    // digitado enquanto tem foco (`emEdicao` é quem manda em `mostrar`), e continua formatando só
+    // no blur. **Digitar nunca é interrompido** — nem pelo formato, nem pelo eco do pai: enquanto
+    // `emEdicao` não é `null`, nada que venha por `value` reescreve o texto.
+    const digitar = React.useCallback((texto) => {
+        setEmEdicao(texto);
+        const lido = lerNumero(texto, locale);
+        // Apagar tudo é VAZIO, que é diferente de ilegível: o vazio é uma intenção e vira `null`.
+        if (lido == null) {
+            if (texto.trim() === "")
+                emitir(null);
+            return;
+        }
+        // ⚠ **NÃO prende aqui.** Com `min={10}`, prender durante a digitação faria o "1" virar 10 na
+        // cara de quem ainda ia digitar o "5" de 15 — o campo escreveria por cima da pessoa. Prender
+        // é do blur, e só.
+        emitir(lido);
+    }, [locale, emitir]);
     const empurrar = React.useCallback((direcao) => {
         // Se o campo está sendo editado, o que vale é o que está escrito — empurrar por cima do valor
         // antigo descartaria a digitação em silêncio.
@@ -310,7 +355,7 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
     // (`aurea.css:685`), com os dois botões FORA dela. O estado que faltava é o deles; a geometria
     // continua sendo a nossa.
     const [focado, setFocado] = React.useState(false);
-    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: setEmEdicao, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
+    return (_jsxs(View, { testID: testID, style: [s.grupo, fullWidth && s.grupoLargo, inativo && s.desabilitado, style], children: [mostrarBotoes && (_jsx(IconButton, { name: icons.decrement, label: strings.decrement, appearance: "ghost", size: tam, disabled: inativo || noLimite(-1), onPress: () => empurrar(-1), testID: testID ? `${testID}-menos` : undefined })), _jsx(TextInput, { testID: testID ? `${testID}-campo` : undefined, value: mostrar, onChangeText: digitar, onFocus: () => { setFocado(true); setEmEdicao(paraEdicao(numero, locale)); }, onBlur: () => { setFocado(false); confirmar(); }, editable: !inativo && !readOnly, placeholder: placeholder, placeholderTextColor: peleDaMarca?.color ?? t.color.subtleForeground, keyboardType: keyboardType ?? tecladoPadrao, 
                 // O nome vem do `Field`, como em todo controle deste pacote — e `label` cobre quem usa o
                 // campo solto. Sem um dos dois, é um nó anônimo para o leitor de tela.
                 accessibilityLabel: label ?? campo?.label, accessibilityHint: campo?.hint, accessibilityState: { disabled: !!inativo }, "aria-invalid": campo?.invalido, style: [
@@ -323,5 +368,10 @@ export function NumberField({ value, defaultValue, onValueChange, min, max, step
                     // depois. Um campo inválido que está sendo corrigido tem de mostrar que está ativo —
                     // invertendo, a pessoa digita sem pista nenhuma de onde o teclado está batendo.
                     focado && { borderColor: t.color.focusStrong },
+                    // 🔴 E DENTRO DO CARTÃO DA MARCA A TINTA VENCE OS DOIS — `usePeleSobreAMarca` tem os
+                    // números: sobre o amarelo o inválido mede 1,86 e o foco do tema escuro mede 1,00.
+                    // O foco continua existindo, por espessura.
+                    peleDaMarca,
+                    peleDaMarca && focado && { borderWidth: t.size.borderWidth * 2 },
                 ] }), mostrarBotoes && (_jsx(IconButton, { name: icons.increment, label: strings.increment, appearance: "ghost", size: tam, disabled: inativo || noLimite(1), onPress: () => empurrar(1), testID: testID ? `${testID}-mais` : undefined }))] }));
 }

package/dist/overlays.js

@@ -61,7 +61,7 @@ import { Button } from "./actions.js";
 import { criarFolha } from "./estilos.js";
 import { IconButton } from "./actions.js";
 import { Text } from "./text.js";
-import { useAureaStrings, useAureaTokens } from "./theme.js";
+import { useAureaStrings, useAureaTokens, ForaDaMarca } from "./theme.js";
 import { useReduceMotion } from "./movimento.js";
 const folha = criarFolha((t) => ({
     fundo: { flex: 1, backgroundColor: t.color.overlay },
@@ -157,7 +157,7 @@ export function Dialog({ open, title, children, footer, onClose, scroll = true,
     const s = folha(t);
     const strings = useAureaStrings();
     const Corpo = scroll ? ScrollView : View;
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: [s.fundo, s.centro], children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { ...naoAtravessa, style: [s.superficie, style], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), footer ? _jsx(View, { style: s.rodape, children: footer }) : null] })] }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: [s.fundo, s.centro], children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(View, { ...naoAtravessa, style: [s.superficie, style], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children }), footer ? _jsx(View, { style: s.rodape, children: footer }) : null] })] }) }) }));
 }
 /**
  * A decisão que não se desfaz.
@@ -185,9 +185,9 @@ export function ConfirmDialog({ open, title, description, confirmLabel, cancelLa
     const t = useAureaTokens();
     const s = folha(t);
     const strings = useAureaStrings();
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onCancel, testID: testID, children: _jsx(View, { style: [s.fundo, s.centro], children: _jsxs(View, { ...naoAtravessa, style: [s.superficie, s.confirmar], children: [_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) }), _jsx(View, { style: s.corpo, children: typeof description === "string"
-                            ? _jsx(Text, { size: "md", tone: "muted", children: description })
-                            : description }), _jsxs(View, { style: s.rodape, children: [_jsx(Button, { appearance: "outline", onPress: onCancel, testID: testID ? `${testID}-cancelar` : undefined, children: cancelLabel ?? strings.confirmCancel }), _jsx(Button, { appearance: "solid", tone: destructive ? "danger" : "brand", onPress: onConfirm, testID: testID ? `${testID}-confirmar` : undefined, children: confirmLabel ?? strings.confirmProceed })] })] }) }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onCancel, testID: testID, children: _jsx(View, { style: [s.fundo, s.centro], children: _jsxs(View, { ...naoAtravessa, style: [s.superficie, s.confirmar], children: [_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) }), _jsx(View, { style: s.corpo, children: typeof description === "string"
+                                ? _jsx(Text, { size: "md", tone: "muted", children: description })
+                                : description }), _jsxs(View, { style: s.rodape, children: [_jsx(Button, { appearance: "outline", onPress: onCancel, testID: testID ? `${testID}-cancelar` : undefined, children: cancelLabel ?? strings.confirmCancel }), _jsx(Button, { appearance: "solid", tone: destructive ? "danger" : "brand", onPress: onConfirm, testID: testID ? `${testID}-confirmar` : undefined, children: confirmLabel ?? strings.confirmProceed })] })] }) }) }) }));
 }
 /**
  * O painel que entra pela borda.
@@ -229,10 +229,10 @@ export function Drawer({ open, title, children, onClose, side = "right", scroll
         inputRange: [0, 1],
         outputRange: [side === "right" ? 480 : -480, 0],
     });
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, style: [
-                        s.gaveta, side === "right" ? s.gavetaDireita : s.gavetaEsquerda,
-                        { transform: [{ translateX: desloca }] }, style,
-                    ], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: "none", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, style: [
+                            s.gaveta, side === "right" ? s.gavetaDireita : s.gavetaEsquerda,
+                            { transform: [{ translateX: desloca }] }, style,
+                        ], children: [_jsxs(View, { style: s.cabecalho, children: [_jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }), _jsx(IconButton, { name: "close", label: strings.close, appearance: "ghost", size: "sm", onPress: onClose })] }), _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }) }));
 }
 /**
  * A folha que sobe de baixo. **NÃO existe na web** — é o único componente deste lote sem ficha.
@@ -287,5 +287,5 @@ export function BottomSheet({ open, title, children, onClose, grabber = true, dr
             }).start();
         },
     }), [draggable, onClose, arrasto, reduzir, t.easing.easeEmphasized]);
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, ...gestos.panHandlers, onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, style: [s.folhaBaixo, { transform: [{ translateY: arrasto }] }, style], children: [grabber ? (_jsx(View, { style: s.puxadorArea, accessible: false, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) })) : null, title ? (_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) })) : null, _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }));
+    return (_jsx(ForaDaMarca, { children: _jsx(Modal, { visible: open, transparent: true, animationType: reduzir !== false ? "none" : "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: onClose, testID: testID, children: _jsxs(View, { style: s.fundo, children: [_jsx(Pressable, { style: s.fundoDeToque, onPress: onClose, accessible: false, testID: testID ? `${testID}-fundo` : undefined }), _jsxs(Animated.View, { ...naoAtravessa, ...gestos.panHandlers, onLayout: (e) => { altura.current = e.nativeEvent.layout.height; }, style: [s.folhaBaixo, { transform: [{ translateY: arrasto }] }, style], children: [grabber ? (_jsx(View, { style: s.puxadorArea, accessible: false, importantForAccessibility: "no-hide-descendants", children: _jsx(View, { style: s.puxador }) })) : null, title ? (_jsx(View, { style: s.cabecalho, children: _jsx(Text, { size: "lg", weight: 600, accessibilityRole: "header", style: s.titulo, children: title }) })) : null, _jsx(Corpo, { ...(scroll ? { contentContainerStyle: s.corpo } : { style: s.corpo }), children: children })] })] }) }) }));
 }

package/dist/screen.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RefreshControl, ScrollView } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { useBottomNavSpace } from "./barranav.js";
 import { criarFolha } from "./estilos.js";
 import { useAureaTokens } from "./theme.js";
 const folha = criarFolha((t) => ({
@@ -43,7 +44,18 @@ export function Screen({ edges = TODAS_AS_BORDAS, padded = true, scroll = false,
     const t = useAureaTokens();
     const s = folha(t);
     const fundo = s[`fundo_${background}`];
-    return (_jsx(SafeAreaView, { style: [s.raiz, fundo, !scroll && padded && s.respiro, style], edges: edges, ...rest, children: scroll ? (_jsx(ScrollView, { style: s.raiz, contentContainerStyle: [s.conteudo, padded && s.respiro], 
+    // 🔴 O ESPAÇO DA BARRA DE ABAS, quando ela flutua por cima desta tela — ver `barranav.tsx`.
+    // **Zero** fora de um `BottomNavProvider`, que é o caso de toda tela cheia: sem abas, nada muda.
+    const respiroDaBarra = useBottomNavSpace();
+    return (_jsx(SafeAreaView, { style: [s.raiz, fundo, !scroll && padded && s.respiro, style], edges: edges, ...rest, children: scroll ? (_jsx(ScrollView, { style: s.raiz, 
+            // ⚠ O respiro da barra SOMA ao do tema em vez de substituí-lo: escrever
+            // `paddingBottom` depois de `s.respiro` apagaria os 16 do tema e colaria o último
+            // item na pílula. A conta é explícita porque a folha não soma sozinha.
+            contentContainerStyle: [
+                s.conteudo, padded && s.respiro,
+                respiroDaBarra > 0
+                    && { paddingBottom: (padded ? t.size.space4 : 0) + respiroDaBarra },
+            ], 
             // A rosca do sistema é a única aparência da plataforma que a Aurea aceita aqui, e a
             // razão é que ela NÃO É desenho nosso: é o gesto do sistema operacional, com a física
             // que a pessoa já conhece. O que dá para pintar, pintamos — a cor é do tema.

package/dist/text.js

@@ -23,6 +23,36 @@ import * as React from "react";
 import { Text as TextRN } from "react-native";
 import { criarFolha } from "./estilos.js";
 import { useAureaTokens, useSobreAMarca } from "./theme.js";
+// 🔴 A ESCALA TEM CINCO DEGRAUS QUE SE ENXERGAM, E DEZ NOMES — ordem do Victor, 19/09/2026,
+// olhando o app no aparelho: *"o tamanho das fontes: existem variações demais, fica muito
+// estranho"*.
+//
+// Medido no token antes de mexer: **12 · 13 · 14 · 16** eram quatro degraus em quatro pontos.
+// Lado a lado, isso não lê como hierarquia — lê como erro. Uma tela só (a de Início) mostrava de
+// 12 a 36 em SETE tamanhos.
+//
+// A escala nova sobe 25% por degrau, que é o mínimo para dois vizinhos serem distinguíveis a olho
+// nu, e **nada encolhe** — o que importa, porque o Victor tem baixa visão:
+//
+//     legenda, apoio .............. 13   (era 12)
+//     texto corrido, controle ..... 16   (era 13 e 14)
+//     nome de cartão .............. 20   (era 16 e 18)
+//     título de tela .............. 25   (era 20 e 24)
+//     número em destaque .......... 31   (era 30)
+//
+// ⚠ **Os DEZ nomes continuam existindo, e alguns apontam para o mesmo número** — `sm`, `md` e
+// `base` são 16; `lg` e `xl` são 20. Isso é de propósito: `size` é API pública dos dois alvos, e
+// apagar nome quebraria consumidor sem ganhar nada. O que encolheu foi a lista de VALORES, que é
+// o que a pessoa vê. Por isso nenhum componente do pacote precisou trocar de degrau: os degraus é
+// que se juntaram.
+//
+// ⚠ **O topo (36 e 48) não foi tocado.** A queixa é do pé da escala, e ali as razões já eram boas
+// (1,2 e 1,33). Mexer sem queixa é inventar trabalho.
+//
+// ⚠ **O limite, medido e declarado:** com a letra do sistema em 1,3× o corpo de 16 vira ~21 e a
+// linha ~29. Isso cabe em toda cápsula, MENOS o controle `sm` na densidade compacta (28 de
+// altura), que estoura por 1 ponto. Em 1,5× vários estouram — e isso já era verdade na escala
+// antiga.
 const TAMANHO = {
     xs: "textXs", sm: "textSm", md: "textMd", base: "textBase", lg: "textLg",
     xl: "textXl", "2xl": "text2xl", "3xl": "text3xl", "4xl": "text4xl", "5xl": "text5xl",
@@ -88,5 +118,5 @@ export function Text({ size = "md", weight = 400, font = "ui", tone = "default",
     // ⚠ **A consequência está declarada e não é neutra:** dentro de um cartão da marca não existe
     // texto esmaecido. A hierarquia sai de PESO e TAMANHO.
     // ⚠ E `style` continua por último de propósito: quem passa cor à mão assume a conta.
-    return _jsx(TextRN, { style: [s[tone], sobreAMarca && { color: sobreAMarca }, proprio, style], ...rest });
+    return _jsx(TextRN, { style: [s[tone], sobreAMarca && { color: sobreAMarca.tinta }, proprio, style], ...rest });
 }

package/dist/theme.d.ts

@@ -73,13 +73,66 @@ export declare function useAureaTokens(): AureaTokens;
  * `strings.ts`.
  */
 export declare function useAureaStrings(): AureaStrings;
+export interface SobreAMarcaValor {
+    /** A única cor que se pode desenhar sobre a marca: letra, contorno e glifo. 4,54 nos dois temas. */
+    tinta: string;
+    /** A cor do cartão por baixo. Serve de letra para quem se pinta com a tinta INTEIRA. */
+    fundo: string;
+}
 /** O provedor. Quem usa é o `Card variant="brand"`. */
-export declare const SobreAMarca: React.Context<string | null>;
+export declare const SobreAMarca: React.Context<SobreAMarcaValor | null>;
 /**
- * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ * O par de cores obrigatório quando se está sobre a marca, ou `null` quando não se está.
  *
- * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * ⚠ **Ele vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
  * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
- * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ * obediência. **Sobre o amarelo existe UMA tinta** — a hierarquia sai de peso e tamanho.
+ *
+ * ⚠ **E o alcance dele é DECLARADO, não completo.** Leem o contexto: `Text`, a família de campo,
+ * o `Button` e o `IconButton`. **Componente fora dessa lista continua quebrado dentro do cartão
+ * amarelo**, e gate estático nenhum vê isso — o que o consumidor encaixa não está no nosso
+ * código, exatamente o ponto cego que o `check 43` já declara.
+ */
+export declare function useSobreAMarca(): SobreAMarcaValor | null;
+/**
+ * Corta a marca para dentro.
+ *
+ * 🔴 **Existe por uma armadilha do React Native que é invisível na tela e óbvia no código:** o
+ * `Modal` desenha numa camada POR CIMA de tudo, mas em React ele continua sendo FILHO de quem o
+ * escreveu. Um `Select` dentro de um `Card variant="brand"` abre a folha dele **fora** do cartão
+ * amarelo — e a folha herdaria a tinta do amarelo mesmo assim, pintando texto marrom sobre fundo
+ * normal.
+ *
+ * ⚠ **Camada visual e árvore de contexto são coisas diferentes**, e é só o segundo que manda na
+ * cor. Toda superfície que sai do fluxo — as duas folhas de escolha e os quatro sobrepostos —
+ * passa por aqui.
+ */
+export declare function ForaDaMarca({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * A pele que um CAMPO tem de vestir quando está dentro de um `Card variant="brand"`, ou `null`
+ * quando não está.
+ *
+ * O campo perde o fundo e passa a ser um contorno da tinta: **4,54 contra o amarelo nos dois
+ * temas**, contra os 2,43/2,24 do `borderStrong` e os 1,61 do `fieldBg` no tema claro. A norma
+ * 1.4.11 pede 3:1 para o contorno que identifica um campo, e só a tinta chega lá.
+ *
+ * ⚠ **O fundo some porque NÃO HÁ fundo possível** — medidas as três superfícies neutras do
+ * sistema contra o amarelo no tema claro: `card` 1,91 · `background` 1,73 · `secondary` 1,61.
+ * Nenhuma separa. Um contorno forte separa.
+ *
+ * 🔴 **E a tinta vence o estado de INVÁLIDO, que é o contrário do que a intuição manda.** Medido:
+ * a borda de inválido (`danger-400`, `#9f2330`) mede **1,86** contra o amarelo — ela é MENOS
+ * visível que a tinta. Pintar de vermelho ali deixaria o campo errado mais difícil de achar que o
+ * campo certo. Dentro deste cartão o erro é dito pela MENSAGEM do `Field` e pelo estado que o
+ * leitor de tela anuncia, não pela cor — que é o que a norma 1.4.1 já exige de qualquer forma.
+ *
+ * ⚠ **O texto digitado e o marcador de dica ficam da MESMA cor**, porque só existe uma tinta. É
+ * perda real de hierarquia, declarada e não escondida: sobre o amarelo não há segunda cor.
  */
-export declare function useSobreAMarca(): string | null;
+export declare function usePeleSobreAMarca(): {
+    borderColor: string;
+    backgroundColor: string;
+    color: string;
+} | null;