@aurea-uds/react 0.33.0 → 0.35.0

package/dist/code-editor.js

@@ -37,18 +37,18 @@ import { cx, useAureaStrings } from "./internal.js";
 // (auditoria 18/07/2026, ALTO 5). Com a anotação + sideEffects:false, o tema e o
 // CodeEditor (e o CodeMirror) somem quando não usados. Split por subpath = decisão do Victor.
 export const aureaEditorTheme = /*@__PURE__*/ EditorView.theme({
-    "&": { backgroundColor: "var(--surface-inset)", color: "var(--foreground)", border: "var(--border-width) solid var(--border)", borderRadius: "var(--radius-lg)", fontSize: "var(--text-xs)" },
+    "&": { backgroundColor: "var(--surface-inset)", color: "var(--foreground)", border: "var(--border-width) solid transparent", borderRadius: "var(--radius-lg)", fontSize: "var(--text-xs)" },
     "&.cm-focused": { outline: "2px solid var(--focus-strong)", outlineOffset: "-2px" },
     ".cm-scroller": { fontFamily: "var(--font-code)", lineHeight: "var(--leading-relaxed)", borderRadius: "inherit" },
     ".cm-content": { caretColor: "var(--foreground)", padding: "var(--space-2) 0" },
     ".cm-line": { padding: "0 var(--space-3)" },
-    ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--foreground)" },
-    "&.cm-focused .cm-cursor": { borderLeftColor: "var(--foreground)" },
+    ".cm-cursor, .cm-dropCursor": { borderLeftColor: "transparent", width: "calc(2 * var(--border-width))", marginLeft: "calc(-1 * var(--border-width))", backgroundColor: "var(--foreground)" },
+    "&.cm-focused .cm-cursor": { borderLeftColor: "transparent", backgroundColor: "var(--foreground)" },
     ".cm-selectionBackground, ::selection": { backgroundColor: "var(--selection)" },
     "&.cm-focused .cm-selectionBackground": { backgroundColor: "var(--selection)" },
     ".cm-selectionMatch": { backgroundColor: "var(--selection)" },
     ".cm-activeLine": { backgroundColor: "color-mix(in srgb,var(--foreground) 5%,transparent)" },
-    ".cm-gutters": { backgroundColor: "var(--surface-inset)", color: "var(--muted-foreground)", border: "none", borderRight: "var(--border-width) solid var(--border)" },
+    ".cm-gutters": { backgroundColor: "var(--surface-inset)", color: "var(--muted-foreground)", border: "none", borderRight: "var(--border-width) solid transparent" },
     ".cm-gutterElement": { padding: "0 var(--space-2)" },
     ".cm-activeLineGutter": { backgroundColor: "color-mix(in srgb,var(--foreground) 5%,transparent)", color: "var(--foreground)" },
     ".cm-matchingBracket, &.cm-focused .cm-matchingBracket": { backgroundColor: "color-mix(in srgb,var(--foreground) 16%,transparent)", color: "var(--foreground)", outline: "none" },
@@ -56,9 +56,9 @@ export const aureaEditorTheme = /*@__PURE__*/ EditorView.theme({
     ".cm-searchMatch": { backgroundColor: "color-mix(in srgb,var(--warning-400) 30%,transparent)" },
     ".cm-searchMatch.cm-searchMatch-selected": { backgroundColor: "var(--selection)" },
     ".cm-panels": { backgroundColor: "var(--surface-2)", color: "var(--foreground)" },
-    ".cm-panels.cm-panels-top": { borderBottom: "var(--border-width) solid var(--border)" },
-    ".cm-panels.cm-panels-bottom": { borderTop: "var(--border-width) solid var(--border)" },
-    ".cm-tooltip": { backgroundColor: "var(--popover)", color: "var(--popover-foreground)", border: "var(--border-width) solid var(--border)", borderRadius: "var(--radius-md)" },
+    ".cm-panels.cm-panels-top": { borderBottom: "var(--border-width) solid transparent" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "var(--border-width) solid transparent" },
+    ".cm-tooltip": { backgroundColor: "var(--popover)", color: "var(--popover-foreground)", border: "var(--border-width) solid transparent", borderRadius: "var(--radius-md)" },
     ".cm-tooltip-autocomplete ul li[aria-selected]": { backgroundColor: "color-mix(in srgb,var(--primary) 14%,transparent)", color: "var(--foreground)" },
     ".cm-completionLabel": { color: "var(--foreground)" },
 });

package/dist/graph-geometria.d.ts

@@ -39,6 +39,30 @@ export declare function remapear<T extends {
     para: string;
     n: number;
 }[];
+export declare const naGrade: (v: number, passo: number) => number;
+export declare function rotaNaGrade(rota: readonly Ponto[], dDe: Ponto, dPara: Ponto): Ponto[];
+export type Guia = {
+    eixo: "x" | "y";
+    em: number;
+    de: number;
+    ate: number;
+};
+/**
+ * A ponta de uma linha ligada ao nó arrastado (o Victor, 17/10/2026: "todos consigo alinhar, menos esse — nunca fica
+ * reto"): a porta 1 fica a um terço do lado do Núcleo, e nem a borda nem o centro do outro nó caem embaixo dela. `meu` é
+ * onde a linha sai do nó arrastado, medido do canto dele; `outro`, onde ela chega no outro nó, no mapa. `eixo` é o que
+ * acerta para a linha ficar reta: `x` quando as duas pontas são de cima e de baixo; `y`, quando são dos lados.
+ */
+export type PontaDoArraste = {
+    meu: Ponto;
+    outro: Ponto;
+    eixo: "x" | "y";
+};
+export declare function guiasDoArraste(eu: Caixa, outros: readonly Caixa[], tolerancia: number, pontas?: readonly PontaDoArraste[]): {
+    x: number;
+    y: number;
+    guias: Guia[];
+};
 /** Tira os pontos repetidos e os do meio de um trecho reto: a ponte e o canto contam os trechos. */
 export declare function simplificar(pontos: readonly Ponto[]): Ponto[];
 /** O ponto no MEIO do comprimento — onde fica o rótulo e a pastilha da linha. */

package/dist/graph-geometria.js

@@ -204,6 +204,115 @@ export function remapear(arestas, rep) {
     }
     return saida;
 }
+// ── NA GRADE (MNT-28, 17/10/2026) ─────────────────────────────────────────────────────────────
+// O arranjo automático põe os nós onde o motor quer (0, 270, 540…), fora da grade de 16 do modo de
+// arrumar: o nó arrastado só voltava a 528 ou 544, e a linha ganhava um degrau (o Victor, comparando com
+// o draw.io). Com a grade ligada, cada nó vai para o ponto da grade mais perto, e a rota em ângulo reto
+// acompanha: a ponta anda com o nó, e a primeira e a última dobra corrigem só o eixo do trecho delas,
+// para o trecho continuar reto. A reta que sai do eixo vira um degrau no meio.
+export const naGrade = (v, passo) => Math.round(v / passo) * passo;
+export function rotaNaGrade(rota, dDe, dPara) {
+    if (rota.length < 2)
+        return rota.map(p => ({ x: p.x, y: p.y }));
+    const p = rota.map(q => ({ x: q.x, y: q.y })), n = p.length - 1;
+    const deitado = (a, b) => Math.abs(a.y - b.y) < 0.5;
+    const h0 = deitado(rota[0], rota[1]), hN = deitado(rota[n - 1], rota[n]);
+    p[0] = { x: p[0].x + dDe.x, y: p[0].y + dDe.y };
+    p[n] = { x: p[n].x + dPara.x, y: p[n].y + dPara.y };
+    if (n === 1) {
+        if (h0 && Math.abs(p[0].y - p[1].y) >= 0.5) {
+            const mx = (p[0].x + p[1].x) / 2;
+            return simplificar([p[0], { x: mx, y: p[0].y }, { x: mx, y: p[1].y }, p[1]]);
+        }
+        if (!h0 && Math.abs(p[0].x - p[1].x) >= 0.5) {
+            const my = (p[0].y + p[1].y) / 2;
+            return simplificar([p[0], { x: p[0].x, y: my }, { x: p[1].x, y: my }, p[1]]);
+        }
+        return p;
+    }
+    p[1] = h0 ? { x: p[1].x, y: p[0].y } : { x: p[0].x, y: p[1].y };
+    p[n - 1] = hN ? { x: p[n - 1].x, y: p[n].y } : { x: p[n].x, y: p[n - 1].y };
+    return simplificar(p);
+}
+export function guiasDoArraste(eu, outros, tolerancia, pontas = []) {
+    const marcasX = (c) => [c.x, c.x + c.larg / 2, c.x + c.larg], marcasY = (c) => [c.y, c.y + c.alt / 2, c.y + c.alt];
+    let dx = 0, dy = 0, melhorX = Infinity, melhorY = Infinity;
+    let retaX, retaY;
+    const mx = marcasX(eu), my = marcasY(eu);
+    for (const o of outros) {
+        const ox = marcasX(o), oy = marcasY(o);
+        for (let i = 0; i < 3; i++) {
+            const ex = ox[i] - mx[i], ey = oy[i] - my[i];
+            if (Math.abs(ex) <= tolerancia && Math.abs(ex) < melhorX) {
+                melhorX = Math.abs(ex);
+                dx = ex;
+            }
+            if (Math.abs(ey) <= tolerancia && Math.abs(ey) < melhorY) {
+                melhorY = Math.abs(ey);
+                dy = ey;
+            }
+        }
+    }
+    // A linha reta vem DEPOIS e ganha no empate: com a mesma distância, endireitar a linha vale mais que alinhar a caixa.
+    for (const p of pontas) {
+        if (p.eixo === "x") {
+            const e = p.outro.x - (eu.x + p.meu.x);
+            if (Math.abs(e) <= tolerancia && Math.abs(e) <= melhorX) {
+                melhorX = Math.abs(e);
+                dx = e;
+                retaX = p;
+            }
+        }
+        else {
+            const e = p.outro.y - (eu.y + p.meu.y);
+            if (Math.abs(e) <= tolerancia && Math.abs(e) <= melhorY) {
+                melhorY = Math.abs(e);
+                dy = e;
+                retaY = p;
+            }
+        }
+    }
+    const novo = { ...eu, x: eu.x + dx, y: eu.y + dy };
+    if (retaX || retaY) {
+        // A guia da linha reta corre por cima da própria linha, de uma ponta à outra.
+        const guias = [];
+        if (retaX) {
+            const y0 = novo.y + retaX.meu.y;
+            guias.push({ eixo: "x", em: retaX.outro.x, de: Math.min(y0, retaX.outro.y), ate: Math.max(y0, retaX.outro.y) });
+        }
+        if (retaY) {
+            const x0 = novo.x + retaY.meu.x;
+            guias.push({ eixo: "y", em: retaY.outro.y, de: Math.min(x0, retaY.outro.x), ate: Math.max(x0, retaY.outro.x) });
+        }
+        const resto = guiasDeAlinhamento(novo, outros, retaX ? Infinity : melhorX, retaY ? Infinity : melhorY);
+        return { x: novo.x, y: novo.y, guias: [...guias, ...resto] };
+    }
+    return { x: novo.x, y: novo.y, guias: guiasDeAlinhamento(novo, outros, melhorX, melhorY) };
+}
+function guiasDeAlinhamento(novo, outros, melhorX, melhorY) {
+    const marcasX = (c) => [c.x, c.x + c.larg / 2, c.x + c.larg], marcasY = (c) => [c.y, c.y + c.alt / 2, c.y + c.alt];
+    // UMA guia por eixo: com o mesmo tamanho, alinhar o topo alinha também o meio e a base, e três linhas juntas
+    // não dizem nada. Vale a do centro, se ele alinhou; senão, a da borda. Ela vai de ponta a ponta de quem alinhou.
+    const guias = [];
+    const umaGuia = (eixo, marcas) => {
+        const minhas = marcas(novo);
+        for (const i of [1, 0, 2]) {
+            const juntos = outros.filter(o => Math.abs(marcas(o)[i] - minhas[i]) < 0.5);
+            if (!juntos.length)
+                continue;
+            const todos = [novo, ...juntos];
+            guias.push(eixo === "x"
+                ? { eixo, em: minhas[i], de: Math.min(...todos.map(c => c.y)), ate: Math.max(...todos.map(c => c.y + c.alt)) }
+                : { eixo, em: minhas[i], de: Math.min(...todos.map(c => c.x)), ate: Math.max(...todos.map(c => c.x + c.larg)) });
+            return;
+        }
+    };
+    if (melhorX < Infinity)
+        umaGuia("x", marcasX);
+    if (melhorY < Infinity)
+        umaGuia("y", marcasY);
+    return guias;
+}
 // ── O TRAÇADO (MNT-12.1 e 12.3) ───────────────────────────────────────────────────────────────
 /** Tira os pontos repetidos e os do meio de um trecho reto: a ponte e o canto contam os trechos. */
 export function simplificar(pontos) {

package/dist/graph.js

@@ -39,12 +39,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Quem importa a folha é o CONSUMIDOR, uma vez, como já importa o `@aurea-uds/core/css`: um
 // `import "…css"` dentro deste módulo quebraria em Node puro e o build daqui é `tsc` só.
 import React from "react";
-import { ReactFlow, ReactFlowProvider, Background, BaseEdge, EdgeLabelRenderer, EdgeText, Handle, MiniMap, Panel, Position, SelectionMode, applyNodeChanges, getBezierPath, getSmoothStepPath, useNodesInitialized, useOnViewportChange, useReactFlow, useStore } from "@xyflow/react";
+import { ReactFlow, ReactFlowProvider, Background, BaseEdge, EdgeLabelRenderer, EdgeText, Handle, MiniMap, Panel, Position, SelectionMode, ViewportPortal, applyNodeChanges, getBezierPath, getSmoothStepPath, useNodesInitialized, useOnViewportChange, useReactFlow, useStore } from "@xyflow/react";
 import { cx, useAureaStrings } from "./internal.js";
 import { Icon } from "./system.js";
 import { Badge } from "./markup.js";
 import { IconButton, Toolbar, ToolbarButton, ToolbarSeparator } from "./actions.js";
-import { alinhar, distribuir, subarvores, recolher, remapear, simplificar, pontes, tracado, meioDoTracado, ladoDoTrecho, rotaCruza, bordaNaDirecao, rotulosQueSomem, contornoDeNuvem } from "./graph-geometria.js";
+import { alinhar, distribuir, subarvores, recolher, remapear, simplificar, pontes, tracado, meioDoTracado, ladoDoTrecho, rotaCruza, bordaNaDirecao, rotulosQueSomem, contornoDeNuvem, naGrade, rotaNaGrade, guiasDoArraste } from "./graph-geometria.js";
 // ── O layout ─────────────────────────────────────────────────────────────────────────────
 // O motor recebe `x`/`y` PRONTOS: ele não posiciona nada. Sem isto, um grafo sem coordenadas
 // empilha tudo em (0,0) — que foi a medição que quase derrubou a escolha do motor.
@@ -63,6 +63,8 @@ const LARGURA = 180, ALTURA = 52, VAO_X = 90, VAO_Y = 24;
 const CABECA_DO_GRUPO = 40, RECHEIO_DO_GRUPO = 16;
 // A grade do modo de arrumar: `--space-4` (16). As setas andam um passo dela; com Shift, quatro.
 const GRADE = 16;
+// As guias do arraste (MNT-28): o nó encaixa no vizinho a até `--space-2` (8) dele, em unidade do mapa.
+const TOLERANCIA_DA_GUIA = 8;
 // A ponte no cruzamento: meia elipse de raio `--radius-xs` (6) — o tamanho do salto do draw.io.
 const RAIO_DA_PONTE = 6;
 // O desvio de linhas (`@tisoap/react-flow-smart-edge`): folga em volta do nó e malha da busca, as duas
@@ -694,7 +696,33 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
         // `entradaElk` muda junto com a chave; a chave é o que diz se mudou DE VERDADE.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [chaveElk]);
-    const autoDe = React.useCallback((id) => elk?.posicoes.get(id) ?? automatico.posicoes.get(id) ?? { x: 0, y: 0 }, [elk, automatico]);
+    // MNT-28: com a grade ligada, o arranjo automático JÁ na grade — o motor e a arrumação simples —, e a rota do
+    // motor acompanha o nó (`rotaNaGrade`). Assim o nó arrastado volta exatamente à linha dos outros.
+    const naGradeLigada = editavel && grid;
+    const elkVisto = React.useMemo(() => {
+        if (!elk || !naGradeLigada)
+            return elk;
+        const posicoes = new Map(), delta = new Map();
+        for (const [id, p] of elk.posicoes) {
+            const q = { x: naGrade(p.x, GRADE), y: naGrade(p.y, GRADE) };
+            posicoes.set(id, q);
+            delta.set(id, { x: q.x - p.x, y: q.y - p.y });
+        }
+        const pontas = new Map((entradaElk?.arestas ?? []).map(a => [a.id, a])), zero = { x: 0, y: 0 };
+        const rotas = new Map();
+        for (const [id, r] of elk.rotas) {
+            const a = pontas.get(id);
+            rotas.set(id, a ? rotaNaGrade(r, delta.get(a.de) ?? zero, delta.get(a.para) ?? zero) : r);
+        }
+        return { posicoes, rotas };
+    }, [elk, naGradeLigada, entradaElk]);
+    const autoDe = React.useCallback((id) => {
+        const doMotor = elkVisto?.posicoes.get(id);
+        if (doMotor)
+            return doMotor;
+        const a = automatico.posicoes.get(id) ?? { x: 0, y: 0 };
+        return naGradeLigada ? { x: naGrade(a.x, GRADE), y: naGrade(a.y, GRADE) } : a;
+    }, [elkVisto, automatico, naGradeLigada]);
     // ── ONDE CADA UM ESTÁ (coordenada ABSOLUTA) ──────────────────────────────────────────────────
     const posFinal = React.useMemo(() => {
         const p = new Map();
@@ -821,7 +849,72 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
     const confirmar = React.useRef(() => { });
     const abertosAgora = React.useRef(abertos);
     abertosAgora.current = abertos;
-    const aoMudarNos = React.useCallback((mudancas) => {
+    // ── AS GUIAS DO ARRASTE (MNT-28) ───────────────────────────────────────────────────────────────
+    // Um nó só, arrastado no modo de arrumar: ele encaixa na borda ou no centro do vizinho mais perto
+    // (`guiasDoArraste`), e a guia aparece. A posição encaixada vale também ao soltar — no fim do arraste o
+    // motor manda a posição DELE, e a que fica é a nossa.
+    const [guias, setGuias] = React.useState([]);
+    const agora = React.useRef({ caixas, paiAberto, ocultos, editavel });
+    agora.current = { caixas, paiAberto, ocultos, editavel };
+    const encaixado = React.useRef(new Map());
+    // As pontas das linhas do nó arrastado, para ele encaixar onde a linha fica RETA (o Victor, 17/10/2026: a linha da
+    // porta 1 do Núcleo "nunca fica reta"). A mesma conta do traçado: a alça, a porta e o afastamento das paralelas.
+    const pontasDe = React.useRef(() => []);
+    pontasDe.current = id => {
+        const alca = (no, porta, tipo) => {
+            const n = porId.get(no), c = caixas.get(no);
+            if (!n || !c)
+                return undefined;
+            const lista = alcasDoNo(abertos.has(no) || contemFilhos.has(no) ? { ...n, ports: undefined } : n, orientation, { larg: c.larg, alt: c.alt });
+            return (porta && lista.find(a => a.id === porta && a.type === tipo)) || lista.find(a => !a.id && a.type === tipo);
+        };
+        const deitada = (a) => a.position === Position.Left || a.position === Position.Right;
+        const saida = [];
+        desenhadas.forEach(({ item: e }, i) => {
+            if ((e.from !== id && e.to !== id) || e.from === e.to || ocultos.has(e.from) || ocultos.has(e.to))
+                return;
+            const sou = e.from === id, outro = sou ? e.to : e.from, cm = caixas.get(id), co = caixas.get(outro);
+            const am = alca(id, sou ? e.fromPort : e.toPort, sou ? "source" : "target"), ao = alca(outro, sou ? e.toPort : e.fromPort, sou ? "target" : "source");
+            if (!cm || !co || !am || !ao || deitada(am) !== deitada(ao))
+                return;
+            const desl = ident[i].deslocamento, ddx = vertical ? desl : 0, ddy = vertical ? 0 : desl;
+            const pm = pontoDaAlca(cm, am), po = pontoDaAlca(co, ao);
+            saida.push({ meu: { x: pm.x - cm.x + ddx, y: pm.y - cm.y + ddy }, outro: { x: po.x + ddx, y: po.y + ddy }, eixo: deitada(am) ? "y" : "x" });
+        });
+        return saida;
+    };
+    const comGuias = React.useCallback((mudancas) => {
+        const { caixas: cx, paiAberto: paiDe, ocultos: oc, editavel: ed } = agora.current, grupos = abertosAgora.current;
+        const arrastes = mudancas.filter((c) => c.type === "position" && !!c.dragging && !!c.position);
+        let saida = mudancas;
+        const c = arrastes.length === 1 ? arrastes[0] : undefined, eu = c ? cx.get(c.id) : undefined;
+        if (ed && c && eu && !grupos.has(c.id)) {
+            const pai = paiDe(c.id), cp = pai ? cx.get(pai) : undefined, ox = cp?.x ?? 0, oy = cp?.y ?? 0;
+            const outros = [...cx].filter(([id]) => id !== c.id && !oc.has(id) && !grupos.has(id)).map(([, x]) => x);
+            const r = guiasDoArraste({ ...eu, x: c.position.x + ox, y: c.position.y + oy }, outros, TOLERANCIA_DA_GUIA, pontasDe.current(c.id));
+            const rel = { x: r.x - ox, y: r.y - oy };
+            encaixado.current.set(c.id, rel);
+            saida = saida.map(m => m === c ? { ...c, position: rel } : m);
+            setGuias(g => g.length === r.guias.length && g.every((x, i) => x.eixo === r.guias[i].eixo && x.em === r.guias[i].em && x.de === r.guias[i].de && x.ate === r.guias[i].ate) ? g : r.guias);
+        }
+        else if (arrastes.length)
+            setGuias(g => g.length ? [] : g);
+        if (mudancas.some(m => m.type === "position" && !m.dragging)) {
+            saida = saida.map(m => {
+                if (m.type !== "position" || m.dragging)
+                    return m;
+                const e = encaixado.current.get(m.id);
+                if (!e)
+                    return m;
+                encaixado.current.delete(m.id);
+                return { ...m, position: e };
+            });
+            setGuias(g => g.length ? [] : g);
+        }
+        return saida;
+    }, []);
+    const aoMudarNos = React.useCallback((mudancasDoMotor) => {
+        const mudancas = comGuias(mudancasDoMotor);
         setNosVivos(anteriores => applyNodeChanges(mudancas, anteriores).map(semAlcasDeclaradas));
         const dims = mudancas.filter(c => c.type === "dimensions" && !!c.dimensions && !abertosAgora.current.has(c.id));
         if (dims.length)
@@ -841,7 +934,7 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
         const soltos = mudancas.filter((c) => c.type === "position" && !c.dragging && !!c.position);
         if (soltos.length)
             confirmar.current(soltos);
-    }, []);
+    }, [comGuias]);
     // ── O DESFAZER (MNT-13.5) E O AVISO PARA O APP GUARDAR (MNT-13.6) ─────────────────────────────
     const pilha = React.useRef({ lista: [], ponteiro: 0 });
     const [, setVersaoDaPilha] = React.useState(0);
@@ -1008,8 +1101,8 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
             }
             if (edgeShape !== "step")
                 return;
-            const doElk = elk?.rotas.get(id);
-            const noLugar = (no) => { const a = elk?.posicoes.get(no), c = caixas.get(no); return !!a && !!c && Math.abs(a.x - c.x) < 0.5 && Math.abs(a.y - c.y) < 0.5; };
+            const doElk = elkVisto?.rotas.get(id);
+            const noLugar = (no) => { const a = elkVisto?.posicoes.get(no), c = caixas.get(no); return !!a && !!c && Math.abs(a.x - c.x) < 0.5 && Math.abs(a.y - c.y) < 0.5; };
             if (doElk && noLugar(e.from) && noLugar(e.to) && naBorda(doElk[0], cs) && naBorda(doElk[doElk.length - 1], ct) && !rotaCruza(doElk, menos(e.from, e.to))) {
                 mapa.set(id, doElk);
                 return;
@@ -1035,7 +1128,7 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
             pendentes.push({ id, de: e.from, para: e.to, s: sp, t: tp, ls: as.position, lt: at.position, chave });
         });
         return { mapa, pendentes, obstaculos };
-    }, [desenhadas, ident, caixas, abertos, ocultos, movendo, porId, contemFilhos, orientation, layout, edgeShape, elk, desvios, vertical]);
+    }, [desenhadas, ident, caixas, abertos, ocultos, movendo, porId, contemFilhos, orientation, layout, edgeShape, elkVisto, desvios, vertical]);
     const chavePendentes = tracados.pendentes.map(p => `${p.id}@${p.chave}`).join("|");
     React.useEffect(() => {
         if (!tracados.pendentes.length || movendo.size)
@@ -1257,7 +1350,7 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
     // a fluidez. O valor é a extensão do próprio layout, então no servidor o grafo cabe exato.
     const estilo = { ...style, ...(height ? { blockSize: height } : null), "--graph-node-w": `${m.larg}px` };
     return _jsx("div", { ref: raiz, className: cx("dependency-graph", className), style: estilo, "data-text": textSize === "md" ? undefined : textSize, "data-contrast": highContrast ? "high" : undefined, "data-editable": editavel || undefined, role: "group", "aria-label": label ?? s.graphLabel, ...props, children: _jsx(ReactFlowProvider, { initialNodes: nosDoMotor, initialEdges: arestasDoMotor, fitView: true, initialWidth: automatico.extensao.larg, initialHeight: automatico.extensao.alt, children: _jsxs(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, edgeTypes: TIPOS_DE_ARESTA, fitView: true, proOptions: { hideAttribution: false }, minZoom: ESCALA_MINIMA, nodesDraggable: editavel || !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: editavel, nodesFocusable: editavel, edgesFocusable: !!onEdgeSelect, disableKeyboardA11y: !editavel, selectionOnDrag: editavel, panOnDrag: editavel ? BOTOES_DE_ARRASTAR : true, selectionMode: SelectionMode.Partial, multiSelectionKeyCode: TECLAS_DE_SOMAR, deleteKeyCode: null, snapToGrid: editavel && grid, snapGrid: [GRADE, GRADE], onlyRenderVisibleElements: !!visibleOnly, ariaLabelConfig: rotulosDoMotor, onSelectionChange: editavel ? aoMudarEscolha : undefined, onNodeMouseEnter: onNodeHover ? (_, no) => onNodeHover(no.id) : undefined, onNodeMouseLeave: onNodeHover ? () => onNodeHover(null) : undefined, onNodeContextMenu: onNodeContextMenu ? (ev, no) => { ev.preventDefault(); onNodeContextMenu(no.id, { x: ev.clientX, y: ev.clientY }); } : undefined, onEdgeClick: onEdgeSelect ? (_, a) => onEdgeSelect(a.id) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
-                    onConnect({ from: c.source, to: c.target, fromPort: c.sourceHandle ?? undefined, toPort: c.targetHandle ?? undefined }); } : undefined, children: [_jsx(Background, { gap: editavel && grid ? GRADE : undefined }), _jsx(Comandos, { raiz: raiz, teclado: teclado, focusId: focusId, pedidoDeCaber: pedidoDeCaber, controls: !!controls, apiRef: apiRef, linhas: linhas, forma: edgeShape, titulo: label ?? s.graphLabel, desenho: tracados, editavel: editavel, barra: barra, acoes: acoes }), minimap && _jsx(MiniMap, { pannable: true, zoomable: true, ariaLabel: s.graphOverview, className: "graph-minimap" }), legend && (legenda.tipos.length > 0 || legenda.estados.length > 0) && _jsx(Panel, { position: "bottom-left", children: _jsxs("div", { className: "graph-legend", role: "group", "aria-label": s.graphLegend, children: [legenda.tipos.length > 0 && _jsxs(_Fragment, { children: [legenda.estados.length > 0 && _jsx("p", { className: "graph-legend-title", id: `${idDaLegenda}-tipo`, children: s.graphLegendKind }), _jsx("ul", { "aria-labelledby": legenda.estados.length > 0 ? `${idDaLegenda}-tipo` : undefined, children: legenda.tipos.map(t => _jsxs("li", { children: [_jsx(AmostraDaLinha, { padrao: t.padrao, peso: t.peso, marca: t.marca }), _jsx("span", { children: t.nome })] }, t.nome)) })] }), legenda.estados.length > 0 && _jsxs(_Fragment, { children: [legenda.tipos.length > 0 && _jsx("p", { className: "graph-legend-title", id: `${idDaLegenda}-estado`, children: s.graphLegendStatus }), _jsx("ul", { "aria-labelledby": legenda.tipos.length > 0 ? `${idDaLegenda}-estado` : undefined, children: legenda.estados.map(e => _jsxs("li", { children: [_jsx(AmostraDaLinha, { tom: e.tom, marca: e.marca }), _jsx("span", { children: e.nome })] }, e.nome)) })] })] }) })] }) }) });
+                    onConnect({ from: c.source, to: c.target, fromPort: c.sourceHandle ?? undefined, toPort: c.targetHandle ?? undefined }); } : undefined, children: [_jsx(Background, { gap: editavel && grid ? GRADE : undefined }), guias.length > 0 && _jsx(ViewportPortal, { children: guias.map(g => _jsx("div", { className: g.eixo === "x" ? "graph-guide graph-guide-x" : "graph-guide graph-guide-y", "aria-hidden": "true", style: g.eixo === "x" ? { transform: `translate(${g.em}px, ${g.de}px)`, blockSize: g.ate - g.de } : { transform: `translate(${g.de}px, ${g.em}px)`, inlineSize: g.ate - g.de } }, `${g.eixo}${g.em}`)) }), _jsx(Comandos, { raiz: raiz, teclado: teclado, focusId: focusId, pedidoDeCaber: pedidoDeCaber, controls: !!controls, apiRef: apiRef, linhas: linhas, forma: edgeShape, titulo: label ?? s.graphLabel, desenho: tracados, editavel: editavel, barra: barra, acoes: acoes }), minimap && _jsx(MiniMap, { pannable: true, zoomable: true, ariaLabel: s.graphOverview, className: "graph-minimap" }), legend && (legenda.tipos.length > 0 || legenda.estados.length > 0) && _jsx(Panel, { position: "bottom-left", children: _jsxs("div", { className: "graph-legend", role: "group", "aria-label": s.graphLegend, children: [legenda.tipos.length > 0 && _jsxs(_Fragment, { children: [legenda.estados.length > 0 && _jsx("p", { className: "graph-legend-title", id: `${idDaLegenda}-tipo`, children: s.graphLegendKind }), _jsx("ul", { "aria-labelledby": legenda.estados.length > 0 ? `${idDaLegenda}-tipo` : undefined, children: legenda.tipos.map(t => _jsxs("li", { children: [_jsx(AmostraDaLinha, { padrao: t.padrao, peso: t.peso, marca: t.marca }), _jsx("span", { children: t.nome })] }, t.nome)) })] }), legenda.estados.length > 0 && _jsxs(_Fragment, { children: [legenda.tipos.length > 0 && _jsx("p", { className: "graph-legend-title", id: `${idDaLegenda}-estado`, children: s.graphLegendStatus }), _jsx("ul", { "aria-labelledby": legenda.tipos.length > 0 ? `${idDaLegenda}-estado` : undefined, children: legenda.estados.map(e => _jsxs("li", { children: [_jsx(AmostraDaLinha, { tom: e.tom, marca: e.marca }), _jsx("span", { children: e.nome })] }, e.nome)) })] })] }) })] }) }) });
 }
 /** O primeiro alvo de Tab de um nó no mapa de leitura: o botão dele; sem ele, o de fechar. */
 function ancoraDoNo(raiz, id) {

package/dist/layout-client.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
 import { type Orientation, type Responsive } from "./pure.js";
-import { type HeaderVariant, type SidebarVariant, type SidebarScrollbar, type SidebarItem } from "./navigation.js";
-export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+import { type HeaderVariant, type HeaderTab, type SidebarVariant, type SidebarScrollbar, type SidebarItem } from "./navigation.js";
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, layout, sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation?: ReactNode;
     navItems?: SidebarItem[];
@@ -11,6 +11,16 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     topbarVariant?: Exclude<HeaderVariant, "pill">;
     topbarDivider?: boolean;
     sidebarVariant?: SidebarVariant;
+    /** O arranjo (lote T, 17/10/2026): `"app"` (o padrão, o de sempre) ou `"docs"`, o da documentação da referência — um
+     *  bloco CENTRALIZADO de 1400 com a lateral de 220, o texto e o índice de 268 (de 1280 para cima), a barra de cima de 56
+     *  com a linha das áreas (`topbarTabs`) embaixo. A lateral fica onde a variante dela mandar (`plain`: sem caixa). */
+    layout?: "app" | "docs";
+    /** A segunda linha da barra de cima: as áreas do site, com ícone (o `tabs` do `Header`). */
+    topbarTabs?: HeaderTab[];
+    /** O `id` da área atual da segunda linha. */
+    topbarCurrentTab?: string;
+    /** O nome da segunda linha para o leitor de tela. Padrão: `"Sections"`. */
+    topbarTabsLabel?: string;
     /** 0.32.0: a barra de rolagem da lateral da esquerda — o `scrollbar` da `Sidebar`. Padrão `hover` (clara, só com o
      *  ponteiro em cima); `visible` é a barra sempre à vista. */
     sidebarScrollbar?: SidebarScrollbar;

package/dist/layout-client.js

@@ -146,7 +146,7 @@ function useLargura(query) {
         return () => mq.removeEventListener?.("change", avisar);
     }, () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches, () => false);
 }
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, layout = "app", sidebarVariant, sidebarScrollbar, sidebarCollapsed, sidebarCollapsible, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
     const s = useAureaStrings();
     useGavetaFechaNoDesktop();
     const controlado = sidebarCollapsed !== undefined;
@@ -180,7 +180,7 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     // A condição vai escrita no `icon=` do botão, e não numa variável: é ali que o check 46 lê os
     // ícones que o shell desenha.
     const paraOComeco = !efetiva, direita = useDirection() === "rtl";
-    return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", sidebarCollapsible && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Header, { variant: topbarVariant, divider: topbarDivider, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), sidebarCollapsible && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children }), aside != null && _jsx(Sidebar, { placement: "right", variant: asideVariant ?? sidebarVariant, className: "app-shell-aside", "aria-label": asideLabel ?? s.tocLabel, children: aside })] });
+    return _jsxs("div", { className: cx("app-shell", layout === "docs" && "app-shell-docs", topbarVariant === "flush" && "app-shell-flush", sidebarCollapsible && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), _jsx(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, ...(layout === "docs" ? { maxWidth: "docs", size: "sm" } : {}), brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), sidebarCollapsible && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children }), aside != null && _jsx(Sidebar, { placement: "right", variant: asideVariant ?? sidebarVariant, className: "app-shell-aside", "aria-label": asideLabel ?? s.tocLabel, children: aside })] });
 }
 export function Separator({ orientation, spacing = "none", className, ...props }) {
     const ancora = useRef(null);

package/dist/markup.d.ts

@@ -101,7 +101,7 @@ export interface GridItemProps extends DivProps {
 /** O item da grade que sabe quantas colunas ocupa (GAR-03). Mora em `Grid.Item`, como `Card.Media`. */
 declare function GridItem({ span, className, ...props }: GridItemProps): React.JSX.Element;
 /** A largura máxima do `Container`, pelos nomes da escala de pontos. `xl` (1280) é o padrão. */
-export type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "docs" | "full";
 export interface ContainerProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     /** Até onde o conteúdo cresce: `sm` 640 · `md` 768 · `lg` 1024 · `xl` 1280 (padrão) · `2xl` 1536 · `full` sem teto. */
     size?: ContainerSize;
@@ -348,8 +348,25 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement>, RefAttributes<
     menuLabel?: string;
     /** O `id` do painel do celular. Padrão: `"aurea-header-menu"`. Troque só se a página tiver dois cabeçalhos de site. */
     menuId?: string;
+    /**
+     * A SEGUNDA LINHA (lote T, 17/10/2026): as áreas do site, cada uma com o ícone, como a linha das áreas da documentação da
+     * referência. A atual (`currentTab`) ganha `aria-current="page"` e o traço embaixo. Fica por último na ordem do Tab.
+     */
+    tabs?: HeaderTab[];
+    /** O `id` da área atual da segunda linha. */
+    currentTab?: string;
+    /** O nome da segunda linha para o leitor de tela. Padrão: `"Sections"`. */
+    tabsLabel?: string;
+}
+/** Uma área da segunda linha do `Header`: o nome, o endereço e, se quiser, o ícone (o desenho que o app passa). */
+export interface HeaderTab {
+    id: string;
+    label: ReactNode;
+    href?: string;
+    icon?: ReactNode;
+    render?: SidebarItem["render"];
 }
-export declare function Header({ variant, divider, brand, items, current, actions, maxWidth, itemsJustify, size, blurred, menuActions, navLabel, menuLabel, menuId, children, className, ...props }: HeaderProps): React.JSX.Element;
+export declare function Header({ variant, divider, brand, items, current, actions, maxWidth, itemsJustify, size, blurred, menuActions, navLabel, menuLabel, menuId, tabs, currentTab, tabsLabel, children, className, ...props }: HeaderProps): React.JSX.Element;
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). Continua funcionando, igual; use `Header`. */
 export declare function Topbar(props: HeaderProps): React.JSX.Element;
 export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;

package/dist/markup.js

@@ -196,10 +196,14 @@ function linksDoHeader(items, current) {
             return _jsx("li", { children: it.render ? fundirRender(it.render, p, "a") : _jsx("a", { href: it.href, ...p }) }, it.id);
         }) });
 }
-export function Header({ variant = "floating", divider, brand, items, current, actions, maxWidth, itemsJustify = "end", size = "md", blurred, menuActions, navLabel = "Main", menuLabel = "Menu", menuId = "aurea-header-menu", children, className, ...props }) {
-    const site = !!items && items.length > 0;
-    const miolo = _jsxs(_Fragment, { children: [brand != null && _jsx("div", { className: "brand", children: brand }), site && _jsx("nav", { className: "topbar-nav", "aria-label": navLabel, children: linksDoHeader(items, current) }), children, actions != null && _jsx("div", { className: "topbar-actions", children: actions }), site && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn btn-ghost btn-icon topbar-menu-toggle", popoverTarget: menuId, "aria-label": menuLabel, children: _jsx("span", { className: "topbar-menu-icon", "aria-hidden": "true" }) }), _jsxs("nav", { id: menuId, popover: "auto", className: "topbar-menu-panel", "aria-label": navLabel, children: [linksDoHeader(items, current), menuActions != null && _jsx("div", { className: "topbar-menu-actions", children: menuActions })] })] })] });
-    return _jsx("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", site && "topbar-site", site && itemsJustify === "start" && "topbar-items-start", size === "sm" && "topbar-sm", blurred && variant === "flush" && "topbar-blurred", maxWidth && "topbar-contained", className), ...props, children: maxWidth ? _jsx("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "topbar-inner"), children: miolo }) : miolo });
+export function Header({ variant = "floating", divider, brand, items, current, actions, maxWidth, itemsJustify = "end", size = "md", blurred, menuActions, navLabel = "Main", menuLabel = "Menu", menuId = "aurea-header-menu", tabs, currentTab, tabsLabel = "Sections", children, className, ...props }) {
+    const site = !!items && items.length > 0, comAbas = !!tabs && tabs.length > 0;
+    const miolo = _jsxs(_Fragment, { children: [brand != null && _jsx("div", { className: "brand", children: brand }), site && _jsx("nav", { className: "topbar-nav", "aria-label": navLabel, children: linksDoHeader(items, current) }), children, actions != null && _jsx("div", { className: "topbar-actions", children: actions }), site && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn btn-ghost btn-icon topbar-menu-toggle", popoverTarget: menuId, "aria-label": menuLabel, children: _jsx("span", { className: "topbar-menu-icon", "aria-hidden": "true" }) }), _jsxs("nav", { id: menuId, popover: "auto", className: "topbar-menu-panel", "aria-label": navLabel, children: [linksDoHeader(items, current), menuActions != null && _jsx("div", { className: "topbar-menu-actions", children: menuActions })] })] }), comAbas && _jsx("nav", { className: "topbar-tabs", "aria-label": tabsLabel, children: tabs.map(t => {
+                    const p = { className: "topbar-tab", "aria-current": t.id === currentTab ? "page" : undefined,
+                        children: _jsxs(_Fragment, { children: [t.icon != null && _jsx("span", { className: "topbar-tab-icon", "aria-hidden": "true", children: t.icon }), _jsx("span", { children: t.label })] }) };
+                    return _jsx(React.Fragment, { children: t.render ? fundirRender(t.render, p, "a") : _jsx("a", { href: t.href, ...p }) }, t.id);
+                }) })] });
+    return _jsx("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", site && "topbar-site", site && itemsJustify === "start" && "topbar-items-start", size === "sm" && "topbar-sm", blurred && variant === "flush" && "topbar-blurred", maxWidth && "topbar-contained", comAbas && "topbar-with-tabs", className), ...props, children: maxWidth ? _jsx("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "topbar-inner"), children: miolo }) : miolo });
 }
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). Continua funcionando, igual; use `Header`. */
 export function Topbar(props) { return _jsx(Header, { ...props }); }

package/dist/navigation.d.ts

@@ -1,2 +1,2 @@
 export * from "./navigation-client.js";
-export { Header, Topbar, type HeaderVariant, type HeaderProps, type TopbarVariant } from "./markup.js";
+export { Header, Topbar, type HeaderVariant, type HeaderProps, type HeaderTab, type TopbarVariant } from "./markup.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",