@aurea-uds/react 0.28.0 → 0.30.0

package/dist/graph.d.ts

@@ -1,4 +1,16 @@
 import React, { type ReactNode } from "react";
+import { type AureaIcon } from "./system.js";
+export type GraphOrientation = "horizontal" | "vertical";
+export type GraphLayout = "simple" | "layered";
+export type GraphEdgeShape = "curve" | "step";
+export type GraphPortSide = "top" | "right" | "bottom" | "left";
+/** Uma porta do nó: uma alça com nome e lado (MNT-14). A aresta liga nela por `fromPort`/`toPort`. */
+export interface GraphPort {
+    id: string;
+    side: GraphPortSide;
+    label?: string;
+}
+export type GraphTone = "neutral" | "info" | "success" | "warning" | "danger";
 export interface GraphNodeItem {
     id: string;
     label: string;
@@ -6,15 +18,57 @@ export interface GraphNodeItem {
     detail?: ReactNode;
     x?: number;
     y?: number;
+    /** O ícone do tipo, JUNTO do texto do tipo, nunca no lugar dele (MNT-07). Nome do sprite ou desenho do app. */
+    icon?: AureaIcon;
+    /** O selo de quantidade no canto (MNT-09): "20". `countLabel` é o que o leitor de tela ouve ("20 estações"). */
+    count?: number;
+    countLabel?: string;
+    /** O selo de estado, no outro canto (MNT-16): a palavra, e o tom só reforça. */
+    status?: {
+        label: string;
+        tone?: GraphTone;
+    };
+    ports?: GraphPort[];
+    /** A camada sugerida pelo app, contada de 0 (só na arrumação `layered`). */
+    layer?: number;
 }
+export type GraphEdgePattern = "solid" | "dashed" | "dotted" | "double";
+export type GraphEdgeWeight = "regular" | "thick" | "heavy";
+export type GraphEdgeMark = "cross" | "dot" | "lock";
 export interface GraphEdgeItem {
     id?: string;
     from: string;
     to: string;
     label?: string;
     animated?: boolean;
+    /** A porta de cada ponta (MNT-14); sem ela, o lado de sempre. */
+    fromPort?: string;
+    toPort?: string;
+    /** O nome da porta escrito na PONTA da linha, perto do nó (MNT-14.3). */
+    sourceLabel?: string;
+    targetLabel?: string;
+    /** O desenho do traço, que diz o que a linha é SEM depender de cor (MNT-08 e MNT-15). */
+    pattern?: GraphEdgePattern;
+    weight?: GraphEdgeWeight;
+    mark?: GraphEdgeMark;
+    /** Um número no meio da linha: os membros de uma agregação (LAG). */
+    count?: number;
+    /** O nome desta espécie de linha na legenda automática (`legend`). */
+    legend?: string;
+}
+/** O que o app pede ao mapa pelo `apiRef` (MNT-18 e MNT-19). */
+export interface DependencyGraphApi {
+    fitView(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    focus(id: string): void;
+    /** O mapa como arquivo do draw.io (`.drawio`), com as posições de agora. */
+    toDrawio(): string;
+    /** A foto do mapa inteiro, como `data:` URL. Pede o peer opcional `modern-screenshot`. */
+    toPng(): Promise<string>;
+    toSvg(): Promise<string>;
 }
-export declare function DependencyGraph({ nodes, edges, label, selectedId, onSelect, connectable, onConnect, onNodeMove, height, className, ...props }: {
+export interface DependencyGraphProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     nodes: GraphNodeItem[];
     edges: GraphEdgeItem[];
     label?: string;
@@ -24,6 +78,8 @@ export declare function DependencyGraph({ nodes, edges, label, selectedId, onSel
     onConnect?: (edge: {
         from: string;
         to: string;
+        fromPort?: string;
+        toPort?: string;
     }) => void;
     onNodeMove?: (id: string, pos: {
         x: number;
@@ -31,4 +87,44 @@ export declare function DependencyGraph({ nodes, edges, label, selectedId, onSel
     }) => void;
     height?: string;
     className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">): React.JSX.Element;
+    /** `vertical` desenha de cima para baixo: a linha entra por cima e sai por baixo (MNT-06). */
+    orientation?: GraphOrientation;
+    /** `layered` arruma em camadas com o `elkjs` (peer opcional): menos cruzamento, raiz no topo (MNT-11). */
+    layout?: GraphLayout;
+    /** O nó do topo, na arrumação `layered`. */
+    rootId?: string;
+    /** `step` desenha a linha em ângulo reto, com o canto arredondado (MNT-10). */
+    edgeShape?: GraphEdgeShape;
+    /** As linhas entre o mesmo par viram uma só, com o número; o número abre e junta (MNT-12.4). */
+    groupParallel?: boolean;
+    /** A visão geral no canto, com o retângulo da parte que está na tela (MNT-18.1). */
+    minimap?: boolean;
+    /** Os botões de aproximar, afastar e caber na tela (MNT-18.1). */
+    controls?: boolean;
+    /** A legenda das espécies de linha, montada sozinha pelo `legend` de cada aresta (MNT-15). */
+    legend?: boolean;
+    /** Centraliza e marca este nó — o "ir até" de uma busca (MNT-18.2). */
+    focusId?: string | null;
+    /** Destaca um caminho (nós e arestas) e apaga o resto (MNT-18.3). */
+    highlight?: {
+        nodes?: string[];
+        edges?: string[];
+    } | null;
+    /** Com um nó escolhido, destaca ele e os vizinhos e apaga o resto (MNT-18.6). */
+    highlightNeighbors?: boolean;
+    /** Some com estes nós SEM refazer a arrumação: o resto fica onde estava (MNT-18.5). */
+    hiddenIds?: string[];
+    onNodeHover?: (id: string | null) => void;
+    onNodeContextMenu?: (id: string, point: {
+        x: number;
+        y: number;
+    }) => void;
+    onEdgeSelect?: (id: string) => void;
+    /** O texto do nó, independente do zoom (MNT-19.3). */
+    textSize?: "md" | "lg";
+    /** Linhas e bordas no tom da letra, e mais grossas (MNT-19.3). */
+    highContrast?: boolean;
+    /** Os comandos do mapa para o app: caber, aproximar, ir até, e exportar (MNT-18 e MNT-19). */
+    apiRef?: React.Ref<DependencyGraphApi>;
+}
+export declare function DependencyGraph({ nodes, edges, label, selectedId, onSelect, connectable, onConnect, onNodeMove, height, className, orientation, layout, rootId, edgeShape, groupParallel, minimap, controls, legend, focusId, highlight, highlightNeighbors, hiddenIds, onNodeHover, onNodeContextMenu, onEdgeSelect, textSize, highContrast, apiRef, style, ...props }: DependencyGraphProps): React.JSX.Element;

package/dist/graph.js

@@ -39,8 +39,11 @@ 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, Handle, Position, applyNodeChanges, getBezierPath } from "@xyflow/react";
+import { ReactFlow, ReactFlowProvider, Background, BaseEdge, EdgeLabelRenderer, Handle, MiniMap, Panel, Position, applyNodeChanges, getBezierPath, getSmoothStepPath, useReactFlow } from "@xyflow/react";
 import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+import { Badge } from "./markup.js";
+import { IconButton } from "./actions.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.
@@ -64,7 +67,9 @@ const LARGURA = 180, ALTURA = 52, VAO_X = 90, VAO_Y = 24;
 // `VAO_X`: grafo sem rótulo sai idêntico ao de antes.
 const FONTE_DO_ROTULO = 13, GLIFO_DO_ROTULO = 0.6, FUNDO_X = 8, FOLGA_X = 32;
 const vaoEntreColunas = (edges) => Math.max(VAO_X, ...edges.map(e => e.label ? Math.ceil(e.label.length * FONTE_DO_ROTULO * GLIFO_DO_ROTULO) + FUNDO_X + FOLGA_X : 0));
-function dispor(nodes, edges) {
+const medidasDoNo = (texto) => texto === "lg"
+    ? { larg: Math.round(LARGURA * 16 / 14), alt: Math.round(ALTURA * 16 / 14) } : { larg: LARGURA, alt: ALTURA };
+function dispor(nodes, edges, orientacao = "horizontal", m = { larg: LARGURA, alt: ALTURA }) {
     const entram = new Map();
     for (const n of nodes)
         entram.set(n.id, []);
@@ -90,14 +95,33 @@ function dispor(nodes, edges) {
     };
     for (const n of nodes)
         calcular(n.id);
-    const vaoX = vaoEntreColunas(edges);
     const ocupacao = new Map();
     const posicoes = new Map();
+    // DE CIMA PARA BAIXO (MNT-06): a profundidade vira a LINHA, e os irmãos ficam lado a lado. Cada
+    // camada se centra na mais larga — a raiz no meio e os filhos equilibrados, como pede a MNT-11.4.
+    // O vão entre camadas é o `VAO_X` de sempre: o rótulo da linha fica deitado no meio dela, e a
+    // largura dele não pede mais altura. Esquerda→direita continua EXATAMENTE como era.
+    if (orientacao === "vertical") {
+        const porCamada = new Map();
+        for (const n of nodes) {
+            const d = profundidade.get(n.id) ?? 0;
+            porCamada.set(d, [...(porCamada.get(d) ?? []), n.id]);
+        }
+        const maior = Math.max(...[...porCamada.values()].map(l => l.length), 1);
+        const passo = m.larg + VAO_Y;
+        for (const [d, ids] of porCamada) {
+            const recuo = (maior - ids.length) * passo / 2;
+            ids.forEach((id, i) => posicoes.set(id, { x: recuo + i * passo, y: d * (m.alt + VAO_X) }));
+        }
+        const camadas = Math.max(...[...porCamada.keys()], 0) + 1;
+        return { posicoes, extensao: { larg: maior * m.larg + (maior - 1) * VAO_Y, alt: camadas * m.alt + (camadas - 1) * VAO_X } };
+    }
+    const vaoX = vaoEntreColunas(edges);
     for (const n of nodes) {
         const d = profundidade.get(n.id) ?? 0;
         const linha = ocupacao.get(d) ?? 0;
         ocupacao.set(d, linha + 1);
-        posicoes.set(n.id, { x: d * (LARGURA + vaoX), y: linha * (ALTURA + VAO_Y) });
+        posicoes.set(n.id, { x: d * (m.larg + vaoX), y: linha * (m.alt + VAO_Y) });
     }
     // A EXTENSÃO existe para o SERVIDOR: sem ela o `fitView` não tem viewport para caber, e o
     // grafo renderizado fora do navegador sai ancorado no canto, com metade dos nós do lado de
@@ -109,22 +133,104 @@ function dispor(nodes, edges) {
     // interno o acionava sem ser prop de ninguém.
     const colunas = Math.max(...[...ocupacao.keys()], 0) + 1;
     const linhas = Math.max(...[...ocupacao.values()], 1);
-    return { posicoes, extensao: { larg: colunas * LARGURA + (colunas - 1) * vaoX, alt: linhas * ALTURA + (linhas - 1) * VAO_Y } };
+    return { posicoes, extensao: { larg: colunas * m.larg + (colunas - 1) * vaoX, alt: linhas * m.alt + (linhas - 1) * VAO_Y } };
 }
-// O nó é NOSSO, e é o ponto em que este componente deixa de ser "React Flow com outra cor".
-// O componente de nó da referência declara o motivo em uma linha — a acessibilidade de HTML de
-// verdade, que é a vantagem sobre o antigo desenho em canvas —: nó desenhado em canvas não existe para o teclado nem
-// para o leitor de tela. Aqui ele é `<button>` de verdade quando dá para selecionar.
-//
-// O que NÃO entrou: as DEZ cores por tipo de nó da referência (agente roxo, ferramenta laranja,
-// geração magenta…). É a quarta vez que esta parte recusa a mesma coisa. `kind` sai como
-// TEXTO, que é legível também por quem não separa as cores.
+// ── A ARRUMAÇÃO EM CAMADAS (MNT-06 e MNT-11, ADR-0064) ──────────────────────────────────────
+// `layout="layered"` chama o `elkjs` (peer OPCIONAL, EPL-2.0): camadas, MENOS cruzamento de linha,
+// a raiz no topo (`rootId`, restrição FIRST), a camada que o app sugere (`layer`) e as portas no
+// lado declarado. Ele entra por `import()` só quando pedido — quem não usa não baixa os ~465 KB — e
+// roda depois do primeiro desenho: até a resposta, e no servidor, vale a arrumação simples acima.
+// Sem o pacote instalado, o mapa avisa uma vez no console e fica na simples: não quebra a tela.
+const LADO_ELK = { top: "NORTH", right: "EAST", bottom: "SOUTH", left: "WEST" };
+// O índice da porta no arrumador anda no sentido do RELÓGIO, a partir do canto de cima à esquerda:
+// em cima da esquerda para a direita, à direita de cima para baixo, embaixo da DIREITA para a
+// esquerda, e à esquerda de BAIXO para cima. O desenho reparte cada lado na ordem declarada (da
+// esquerda para a direita, de cima para baixo), então embaixo e à esquerda a ordem se inverte.
+function portasEmOrdem(n) {
+    const do_ = (lado) => (n.ports ?? []).filter(p => p.side === lado);
+    const volta = [...do_("top"), ...do_("right"), ...do_("bottom").reverse(), ...do_("left").reverse()];
+    return volta.map((p, i) => [p, i]);
+}
+let avisouSemElk = false;
+async function disporEmCamadas(nodes, edges, orientacao, m, rootId) {
+    let ELK;
+    try {
+        ELK = (await import("elkjs/lib/elk.bundled.js")).default;
+    }
+    catch {
+        if (!avisouSemElk) {
+            avisouSemElk = true;
+            console.warn("DependencyGraph: layout=\"layered\" precisa do pacote `elkjs` (peer opcional). Ficou a arrumação simples.");
+        }
+        return null;
+    }
+    const ids = new Set(nodes.map(n => n.id));
+    const portas = new Set(nodes.flatMap(n => (n.ports ?? []).map(p => `${n.id}::${p.id}`)));
+    const ponta = (no, porta) => porta && portas.has(`${no}::${porta}`) ? `${no}::${porta}` : no;
+    const resultado = await new ELK().layout({
+        id: "raiz",
+        layoutOptions: {
+            "elk.algorithm": "layered",
+            "elk.direction": orientacao === "vertical" ? "DOWN" : "RIGHT",
+            "elk.layered.spacing.nodeNodeBetweenLayers": String(VAO_X),
+            "elk.spacing.nodeNode": String(VAO_Y),
+            "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+            "elk.layered.nodePlacement.bk.fixedAlignment": "BALANCED",
+        },
+        children: nodes.map(n => ({ id: n.id, width: m.larg, height: m.alt,
+            // ORDEM FIXA, e não só o lado: o desenho põe as portas na ordem em que o app as declarou, e
+            // o arrumador livre as reordenava por dentro — a "porta 1" à esquerda ia ao vizinho da direita
+            // e as linhas se cruzavam (medido na bancada). Com a ordem fixa, quem se move são os nós.
+            layoutOptions: { ...(n.ports?.length ? { "elk.portConstraints": "FIXED_ORDER" } : {}),
+                ...(n.id === rootId ? { "elk.layered.layering.layerConstraint": "FIRST" } : {}),
+                ...(n.layer != null ? { "elk.layered.layering.layerChoiceConstraint": String(n.layer) } : {}) },
+            ports: portasEmOrdem(n).map(([p, i]) => ({ id: `${n.id}::${p.id}`, width: 0, height: 0,
+                layoutOptions: { "elk.port.side": LADO_ELK[p.side], "elk.port.index": String(i) } })) })),
+        edges: edges.filter(e => ids.has(e.from) && ids.has(e.to)).map((e, i) => ({ id: `e${i}`, sources: [ponta(e.from, e.fromPort)], targets: [ponta(e.to, e.toPort)] })),
+    });
+    return new Map((resultado.children ?? []).map(c => [c.id, { x: c.x ?? 0, y: c.y ?? 0 }]));
+}
+// ── AS ALÇAS: o lado de sempre, e as portas (MNT-06 e MNT-14) ─────────────────────────────────
+// Sem porta, a linha entra por um lado e sai pelo oposto: esquerda→direita no horizontal, cima→
+// baixo no vertical. Com porta, cada uma fica no lado dela, repartindo o lado em partes iguais. As
+// alças entram também na lista do nó (`handles`) para a linha existir sem medir — no servidor e no
+// modo de leitura, em que a alça não é desenhada (ver o nó, abaixo).
+const LADO = { top: Position.Top, right: Position.Right, bottom: Position.Bottom, left: Position.Left };
+function alcasDoNo(n, orientacao, m) {
+    const entra = orientacao === "vertical" ? Position.Top : Position.Left;
+    const sai = orientacao === "vertical" ? Position.Bottom : Position.Right;
+    const ponto = (pos, frac) => ({ frac, ...(pos === Position.Left ? { x: 0, y: m.alt * frac } : pos === Position.Right ? { x: m.larg, y: m.alt * frac }
+            : pos === Position.Top ? { x: m.larg * frac, y: 0 } : { x: m.larg * frac, y: m.alt }) });
+    const base = [{ type: "target", position: entra, ...ponto(entra, 1 / 2) }, { type: "source", position: sai, ...ponto(sai, 1 / 2) }];
+    const porLado = new Map();
+    for (const p of n.ports ?? [])
+        porLado.set(p.side, [...(porLado.get(p.side) ?? []), p]);
+    const portas = [];
+    for (const [lado, lista] of porLado)
+        lista.forEach((p, k) => {
+            const pos = LADO[lado], xy = ponto(pos, (k + 1) / (lista.length + 1));
+            // A porta é as duas coisas: o cabo de rede não tem sentido, e a linha pode sair ou chegar nela.
+            portas.push({ id: p.id, type: "source", position: pos, ...xy, rotulo: p.label }, { id: p.id, type: "target", position: pos, ...xy, rotulo: p.label });
+        });
+    return [...base, ...portas];
+}
+const SETAS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
 function NoAurea({ data }) {
     const d = data;
-    const corpo = _jsxs(_Fragment, { children: [_jsx("span", { className: "graph-node-label", children: d.label }), d.kind && _jsx("span", { className: "graph-node-kind", children: d.kind }), d.detail && _jsx("span", { className: "hint", children: d.detail })] });
-    return _jsxs("div", { className: "graph-node", "data-selected": d.selecionado || undefined, children: [d.conectavel && _jsx(Handle, { type: "target", position: Position.Left, isConnectable: true, className: "graph-handle" }), d.aoSelecionar
-                ? _jsx("button", { type: "button", className: "graph-node-body", "aria-pressed": !!d.selecionado, onClick: d.aoSelecionar, children: corpo })
-                : _jsx("span", { className: "graph-node-body", children: corpo }), d.conectavel && _jsx(Handle, { type: "source", position: Position.Right, isConnectable: true, className: "graph-handle" })] });
+    const corpo = _jsxs(_Fragment, { children: [d.icone && _jsx(Icon, { name: d.icone, size: "md", className: "graph-node-icon" }), _jsxs("span", { className: "graph-node-text", children: [_jsx("span", { className: "graph-node-label", children: d.label }), d.kind && _jsx("span", { className: "graph-node-kind", children: d.kind }), d.detail && _jsx("span", { className: "hint", children: d.detail })] })] });
+    // As SETAS andam de nó em nó (MNT-19.4) — o mais perto na direção da seta. Só no nó que é botão:
+    // nó de leitura não recebe foco, e dar foco a um `<span>` sem papel seria pior que não dar.
+    const teclar = (e) => { if (d.aoTeclar && SETAS.has(e.key)) {
+        e.preventDefault();
+        d.aoTeclar(e.key);
+    } };
+    return _jsxs("div", { className: "graph-node", "data-selected": d.selecionado || undefined, "data-focused": d.focado || undefined, "data-dimmed": d.apagado || undefined, children: [d.alcas.map(a => {
+                // A alça de porta fica no ponto dela ao longo do lado, em porcentagem: o nó pode crescer.
+                const lugar = a.position === Position.Left || a.position === Position.Right ? { top: `${a.frac * 100}%` } : { left: `${a.frac * 100}%` };
+                return _jsx(Handle, { id: a.id, type: a.type, position: a.position, isConnectable: !!d.conectavel, className: cx("graph-handle", !d.conectavel && "graph-handle-oculta"), style: a.id ? lugar : undefined, title: d.conectavel ? a.rotulo : undefined }, `${a.type}:${a.id ?? "lado"}`);
+            }), d.aoSelecionar
+                ? _jsx("button", { type: "button", className: cx("graph-node-body", d.icone && "graph-node-has-icon"), "aria-pressed": !!d.selecionado, onClick: d.aoSelecionar, onKeyDown: teclar, children: corpo })
+                : _jsx("span", { className: cx("graph-node-body", d.icone && "graph-node-has-icon"), children: corpo }), d.contagem != null && _jsxs("span", { className: "graph-node-count", children: [_jsx(Badge, { size: "xs", variant: "neutral", emphasis: "solid", "aria-hidden": d.nomeDaContagem ? true : undefined, children: d.contagem }), d.nomeDaContagem && _jsx("span", { className: "sr-only", children: d.nomeDaContagem })] }), d.estado && _jsx("span", { className: "graph-node-status", children: _jsx(Badge, { size: "xs", variant: d.estado.tone ?? "neutral", children: d.estado.label }) })] });
 }
 const TIPOS = { aurea: NoAurea };
 // ── A ARESTA, e por que ela também é nossa (A-09 e A-10, 23/09/2026) ─────────────────────────
@@ -138,16 +244,71 @@ const TIPOS = { aurea: NoAurea };
 // MESMO caminho e os rótulos se sobrepõem. Cada uma sai de uma altura própria do nó: as `n`
 // paralelas dividem a altura do nó em `n + 1` partes iguais. Uma aresta só fica no meio, que é o
 // desenho de antes. O número vem de `ALTURA`, a do próprio nó — não há distância inventada aqui.
-const ROTULO = { fill: "var(--xy-edge-label-color)", fontSize: "var(--text-xs)" };
+const ROTULO = { fill: "var(--xy-edge-label-color)", fontSize: "var(--graph-edge-label-size,var(--text-xs))" };
 const FUNDO_DO_ROTULO = { fill: "var(--xy-edge-label-background-color)" };
+// O canto do DEGRAU (MNT-10) é o `--radius-sm` (8): o traçado em ângulo reto dobra arredondado,
+// como o resto da casa, e não em quina viva.
+const CANTO_DO_DEGRAU = 8;
+// O rótulo da PONTA fica a um `--space-1` (4) da alça, do lado de fora da linha.
+const FOLGA_DA_PONTA = 4;
+const pontaDoRotulo = (x, y, pos) => {
+    const f = FOLGA_DA_PONTA;
+    if (pos === Position.Bottom)
+        return `translate(${x + f}px,${y + f}px)`;
+    if (pos === Position.Top)
+        return `translate(${x + f}px,${y - f}px) translateY(-100%)`;
+    if (pos === Position.Right)
+        return `translate(${x + f}px,${y - f}px) translateY(-100%)`;
+    return `translate(${x - f}px,${y - f}px) translate(-100%,-100%)`;
+};
 function ArestaAurea({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, data, markerEnd, style }) {
-    const dy = data?.deslocamento ?? 0;
-    const [caminho, lx, ly] = getBezierPath({ sourceX, sourceY: sourceY + dy, sourcePosition, targetX, targetY: targetY + dy, targetPosition });
-    return _jsx(BaseEdge, { id: id, path: caminho, labelX: lx, labelY: ly, label: label, markerEnd: markerEnd, style: style, labelStyle: ROTULO, labelShowBg: true, labelBgStyle: FUNDO_DO_ROTULO });
+    const d = (data ?? { deslocamento: 0, vertical: false, forma: "curve" });
+    // A-10 · as paralelas se afastam na direção ATRAVESSADA à linha: na vertical, para os lados.
+    const dx = d.vertical ? d.deslocamento : 0, dy = d.vertical ? 0 : d.deslocamento;
+    const pontos = { sourceX: sourceX + dx, sourceY: sourceY + dy, sourcePosition, targetX: targetX + dx, targetY: targetY + dy, targetPosition };
+    const [caminho, lx, ly] = d.forma === "step" ? getSmoothStepPath({ ...pontos, borderRadius: CANTO_DO_DEGRAU }) : getBezierPath(pontos);
+    // O rótulo de texto é SVG (sai também no servidor). Quando a linha tem marca, número ou grupo, o
+    // rótulo vai para a pastilha de HTML do meio, junto deles — dois desenhos no mesmo ponto se cobririam.
+    // O traço DUPLO desenha o miolo por cima da linha — e por cima do rótulo SVG, que sairia riscado
+    // (medido na bancada). Com rótulo, ele também vai para a pastilha.
+    const pastilha = !!(d.marca || d.contagem || d.grupo || (d.padrao === "double" && label != null));
+    const cls = cx("graph-edge", d.padrao && d.padrao !== "solid" && `graph-edge-${d.padrao}`, d.peso && d.peso !== "regular" && `graph-edge-${d.peso}`, d.apagada && "is-dimmed");
+    return _jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: caminho, className: cls, labelX: lx, labelY: ly, label: pastilha ? undefined : label, markerEnd: markerEnd, style: style, labelStyle: ROTULO, labelShowBg: true, labelBgStyle: FUNDO_DO_ROTULO }), d.padrao === "double" && _jsx("path", { d: caminho, fill: "none", className: cx("graph-edge-double-core", d.peso && d.peso !== "regular" && `graph-edge-${d.peso}`, d.apagada && "is-dimmed") }), (pastilha || d.origem || d.destino) && _jsxs(EdgeLabelRenderer, { children: [pastilha && _jsxs("div", { className: cx("graph-edge-chip nodrag nopan", d.apagada && "is-dimmed"), style: { transform: `translate(-50%,-50%) translate(${lx}px,${ly}px)` }, children: [d.marca && _jsx("span", { className: `graph-edge-mark graph-edge-mark-${d.marca}`, "aria-hidden": "true", children: d.marca === "lock" && _jsx(Icon, { name: "lock-key", size: "sm" }) }), label != null && _jsx("span", { children: label }), d.contagem != null && _jsxs("span", { className: "graph-edge-count", children: ["\u00D7", d.contagem] }), d.grupo && _jsxs("button", { type: "button", className: "graph-edge-group", "aria-expanded": d.grupo.aberto, "aria-label": `${d.grupo.aberto ? d.grupo.juntar : d.grupo.mostrar} ${d.grupo.n} ${d.grupo.conexoes}`, onClick: d.grupo.alternar, children: ["\u00D7", d.grupo.n] })] }), d.origem && _jsx("div", { className: cx("graph-edge-end", d.apagada && "is-dimmed"), style: { transform: pontaDoRotulo(sourceX + dx, sourceY + dy, sourcePosition) }, children: d.origem }), d.destino && _jsx("div", { className: cx("graph-edge-end", d.apagada && "is-dimmed"), style: { transform: pontaDoRotulo(targetX + dx, targetY + dy, targetPosition) }, children: d.destino })] })] });
 }
 const TIPOS_DE_ARESTA = { aurea: ArestaAurea };
+/** A chave de um PAR sem sentido: o cabo entre A e B é o mesmo que entre B e A. */
+const parSemSentido = (e) => e.from < e.to ? `${e.from}|${e.to}` : `${e.to}|${e.from}`;
+/**
+ * O que se desenha com `groupParallel` (MNT-12.4): de cada par com duas ou mais linhas, fechado,
+ * só a PRIMEIRA, com o número do grupo; aberto, todas, e a primeira leva o botão de juntar.
+ */
+function agruparParalelas(edges, ligado, abertos) {
+    if (!ligado)
+        return edges.map(item => ({ item }));
+    const total = new Map();
+    for (const e of edges) {
+        const k = parSemSentido(e);
+        total.set(k, (total.get(k) ?? 0) + 1);
+    }
+    const visto = new Set();
+    const saida = [];
+    for (const e of edges) {
+        const k = parSemSentido(e), n = total.get(k);
+        if (n < 2) {
+            saida.push({ item: e });
+            continue;
+        }
+        const aberto = abertos.has(k), primeira = !visto.has(k);
+        visto.add(k);
+        if (primeira)
+            saida.push({ item: e, grupo: { chave: k, n, aberto } });
+        else if (aberto)
+            saida.push({ item: e });
+    }
+    return saida;
+}
 /** Identidade e deslocamento de cada aresta — interno; o teste lê o resultado no DOM. */
-function arestasParalelas(edges) {
+function arestasParalelas(edges, alt = ALTURA) {
     const total = new Map();
     for (const e of edges) {
         const k = `${e.from}->${e.to}`;
@@ -165,25 +326,99 @@ function arestasParalelas(edges) {
         while (usados.has(id))
             id = `${id}#`;
         usados.add(id);
-        return { id, deslocamento: n > 1 ? ALTURA * ((k + 1) / (n + 1) - 1 / 2) : 0 };
+        return { id, deslocamento: n > 1 ? alt * ((k + 1) / (n + 1) - 1 / 2) : 0 };
     });
 }
-// DependencyGraph — quem depende de quem.
-//
-// O vocabulário da API é NOSSO — `{from,to}`, não `{source,target}`. Não é preciosismo: é o que
-// permite trocar o motor sem quebrar quem usa, e é a mesma razão pela qual o `Chart` não expõe
-// os tipos do Recharts. O escopo também é menor que o do motor: nada de minimapa, de painéis,
-// de nó redimensionável nem de seleção por retângulo — isso é superfície de EDITOR, e o editor
-// é a Parte I (`VisualBuilder`, item I8), que compõe este componente em vez de reescrevê-lo.
-export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, connectable, onConnect, onNodeMove, height, className, ...props }) {
+// ── AS ALÇAS DECLARADAS SÓ VALEM ATÉ A MEDIDA (achado na bancada da rodada 1, 10/10/2026) ──────
+// O motor, quando o nó traz `handles`, usa SEMPRE a lista declarada — mesmo depois de medir a tela
+// (`parseHandles`, no `@xyflow/system`). A lista é o que faz o grafo existir no servidor, mas ela
+// foi calculada para o nó de 52 de altura: num nó com endereço, mais alto, a linha nascia DENTRO
+// dele, e o nome da porta na ponta ficava escondido atrás do texto. Medido: os seis nomes de porta
+// cobertos pelo endereço do nó. Depois da primeira medida, a lista sai e vale a borda real.
+const semAlcasDeclaradas = (n) => { if (!n.measured?.width)
+    return n; const { handles: _, ...resto } = n; return resto; };
+const EM_PAR = (a) => a ? new Set(a) : null;
+/** O arquivo do draw.io, escrito à mão como o formato documenta (`mxfile > diagram > mxGraphModel`). */
+// As aspas vão por código (\x22, \x27): o leitor de declarações do check 46 não casa aspa solta.
+const XML = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\x22/g, "&quot;").replace(/\x27/g, "&apos;");
+const TRACO_DRAWIO = { solid: "", dashed: "dashed=1;dashPattern=8 4;", dotted: "dashed=1;dashPattern=1 4;", double: "shape=link;" };
+const PESO_DRAWIO = { regular: 1, thick: 2, heavy: 3 };
+function paraDrawio(nos, itens, forma, titulo) {
+    const visiveis = nos.filter(n => !n.hidden);
+    const ids = new Set(visiveis.map(n => n.id));
+    const celulas = ['<mxCell id="0"/>', '<mxCell id="1" parent="0"/>'];
+    for (const n of visiveis) {
+        const d = n.data;
+        const texto = [d.label, d.kind, typeof d.detail === "string" ? d.detail : undefined].filter(Boolean).join("\n");
+        const w = n.measured?.width ?? n.initialWidth ?? LARGURA, h = n.measured?.height ?? n.initialHeight ?? ALTURA;
+        celulas.push(`<mxCell id="${XML(`n-${n.id}`)}" value="${XML(texto)}" style="rounded=1;arcSize=20;whiteSpace=wrap;html=0;" vertex="1" parent="1"><mxGeometry x="${Math.round(n.position.x)}" y="${Math.round(n.position.y)}" width="${Math.round(w)}" height="${Math.round(h)}" as="geometry"/></mxCell>`);
+    }
+    itens.forEach((e, i) => {
+        if (!ids.has(e.from) || !ids.has(e.to))
+            return;
+        const id = `e-${i}`;
+        const estilo = `endArrow=none;html=0;${forma === "step" ? "edgeStyle=orthogonalEdgeStyle;rounded=1;" : "curved=1;"}${TRACO_DRAWIO[e.pattern ?? "solid"]}strokeWidth=${PESO_DRAWIO[e.weight ?? "regular"]};`;
+        celulas.push(`<mxCell id="${id}" value="${XML(e.label ?? "")}" style="${estilo}" edge="1" parent="1" source="${XML(`n-${e.from}`)}" target="${XML(`n-${e.to}`)}"><mxGeometry relative="1" as="geometry"/></mxCell>`);
+        // O nome da porta na ponta: o rótulo-filho da linha, a 80% do caminho para cada lado (o idioma do draw.io).
+        for (const [txt, x, suf] of [[e.sourceLabel, -0.8, "s"], [e.targetLabel, 0.8, "t"]])
+            if (txt)
+                celulas.push(`<mxCell id="${id}-${suf}" value="${XML(txt)}" style="edgeLabel;html=0;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="${id}"><mxGeometry x="${x}" relative="1" as="geometry"><mxPoint as="offset"/></mxGeometry></mxCell>`);
+    });
+    return `<mxfile host="Aurea"><diagram name="${XML(titulo)}" id="aurea"><mxGraphModel><root>${celulas.join("")}</root></mxGraphModel></diagram></mxfile>`;
+}
+export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, connectable, onConnect, onNodeMove, height, className, orientation = "horizontal", layout = "simple", rootId, edgeShape = "curve", groupParallel, minimap, controls, legend, focusId, highlight, highlightNeighbors, hiddenIds, onNodeHover, onNodeContextMenu, onEdgeSelect, textSize = "md", highContrast, apiRef, style, ...props }) {
     const s = useAureaStrings();
+    const m = React.useMemo(() => medidasDoNo(textSize), [textSize]);
+    const vertical = orientation === "vertical";
     // O layout só roda para quem não trouxe coordenada. Quem traz manda — é o que deixa a Parte I
     // guardar a posição que a pessoa arrastou sem brigar com a disposição automática.
-    const automatico = React.useMemo(() => dispor(nodes, edges), [nodes, edges]);
+    const automatico = React.useMemo(() => dispor(nodes, edges, orientation, m), [nodes, edges, orientation, m]);
+    // A arrumação em camadas chega DEPOIS (é assíncrona e o pacote é opcional); até lá, a simples.
+    const [emCamadas, setEmCamadas] = React.useState(null);
+    React.useEffect(() => {
+        if (layout !== "layered") {
+            setEmCamadas(null);
+            return;
+        }
+        let vivo = true;
+        disporEmCamadas(nodes, edges, orientation, m, rootId).then(r => { if (vivo)
+            setEmCamadas(r); });
+        return () => { vivo = false; };
+    }, [layout, nodes, edges, orientation, m, rootId]);
+    const posicao = React.useCallback((n) => ({
+        x: n.x ?? emCamadas?.get(n.id)?.x ?? automatico.posicoes.get(n.id)?.x ?? 0,
+        y: n.y ?? emCamadas?.get(n.id)?.y ?? automatico.posicoes.get(n.id)?.y ?? 0,
+    }), [emCamadas, automatico]);
+    // ── O que fica aceso: o caminho pedido, ou o nó escolhido e os vizinhos ────────────────────
+    const ocultos = React.useMemo(() => new Set(hiddenIds ?? []), [hiddenIds]);
+    const aceso = React.useMemo(() => {
+        if (highlight)
+            return { nos: EM_PAR(highlight.nodes), arestas: EM_PAR(highlight.edges) };
+        if (highlightNeighbors && selectedId) {
+            const nos = new Set([selectedId]), arestas = new Set();
+            const ident = arestasParalelas(edges, vertical ? m.larg : m.alt);
+            edges.forEach((e, i) => { if (e.from === selectedId || e.to === selectedId) {
+                nos.add(e.from);
+                nos.add(e.to);
+                arestas.add(ident[i].id);
+            } });
+            return { nos, arestas };
+        }
+        return null;
+    }, [highlight, highlightNeighbors, selectedId, edges, vertical, m]);
+    // As setas e o "ir até" moram no lado de DENTRO do provedor (eles precisam do motor); o nó chama
+    // por esta referência estável, sem refazer a lista de nós a cada render.
+    const teclado = React.useRef(undefined);
     const nosDoMotor = React.useMemo(() => nodes.map(n => ({
         id: n.id, type: "aurea",
-        position: { x: n.x ?? automatico.posicoes.get(n.id)?.x ?? 0, y: n.y ?? automatico.posicoes.get(n.id)?.y ?? 0 },
+        position: posicao(n),
         draggable: !!onNodeMove,
+        // `selectable:false` no PRÓPRIO nó, como na aresta: no servidor (a prévia do catálogo) o motor ainda
+        // não recebeu o `elementsSelectable={false}` do fluxo, e o nó saía com a classe `.selectable` e a
+        // mão de ponteiro — num mapa sem `onSelect`, uma promessa de clique sem teclado. O gate
+        // `alvo-clicavel` pegou na página do padrão de rede (10/10/2026).
+        selectable: false,
+        hidden: ocultos.has(n.id),
         // ── O QUE FAZ ESTE GRAFO EXISTIR FORA DO NAVEGADOR ─────────────────────────────────
         // O motor só desenha nó que tem tamanho, e no servidor não há o que medir. `initialWidth`
         // e `initialHeight` valem SÓ até a primeira medição — no navegador o tamanho real assume
@@ -193,23 +428,38 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
         // Eu tinha concluído que grafo não cabia em HTML estático e escrevi isso como limite do
         // componente. Era conclusão minha, não medição: o motor tem caminho de SSR documentado, e
         // são estas três coisas. A prévia do catálogo existe por causa deste bloco.
-        initialWidth: LARGURA, initialHeight: ALTURA,
-        handles: [{ type: "target", position: Position.Left, x: 0, y: ALTURA / 2 },
-            { type: "source", position: Position.Right, x: LARGURA, y: ALTURA / 2 }],
-        data: { label: n.label, kind: n.kind, detail: n.detail, selecionado: selectedId === n.id,
-            conectavel: !!connectable, aoSelecionar: onSelect ? () => onSelect(n.id) : undefined },
-    })), [nodes, automatico, selectedId, onSelect, connectable, onNodeMove]);
+        initialWidth: m.larg, initialHeight: m.alt,
+        handles: alcasDoNo(n, orientation, m).map(({ rotulo: _r, frac: _f, ...a }) => a),
+        data: { label: n.label, kind: n.kind, detail: n.detail, icone: n.icon, contagem: n.count, nomeDaContagem: n.countLabel, estado: n.status,
+            alcas: alcasDoNo(n, orientation, m), selecionado: selectedId === n.id, focado: focusId === n.id,
+            apagado: aceso?.nos ? !aceso.nos.has(n.id) : false,
+            conectavel: !!connectable, aoSelecionar: onSelect ? () => onSelect(n.id) : undefined,
+            aoTeclar: onSelect ? (tecla) => teclado.current?.(n.id, tecla) : undefined },
+    })), [nodes, posicao, selectedId, focusId, onSelect, connectable, onNodeMove, ocultos, aceso, orientation, m]);
     // `selectable:false` na PRÓPRIA aresta, e não só no `elementsSelectable` do `<ReactFlow>`:
     // medido em 29/08/2026, a prop do fluxo não tira a classe `.selectable` da aresta, que é onde
     // o `base.css` do motor põe `cursor:pointer`. A mão de ponteiro prometia um clique que a API
     // da Aurea não atende — `onSelect` é do NÓ, e quem o atende é o <button> do corpo dele.
+    // (10/10/2026) Com `onEdgeSelect` a aresta passa a ser alvo de verdade, e aí a mão é honesta.
+    const [abertos, setAbertos] = React.useState(() => new Set());
+    const alternarGrupo = React.useCallback((k) => setAbertos(a => { const b = new Set(a); if (b.has(k))
+        b.delete(k);
+    else
+        b.add(k); return b; }), []);
+    const desenhadas = React.useMemo(() => agruparParalelas(edges, !!groupParallel, abertos), [edges, groupParallel, abertos]);
     const arestasDoMotor = React.useMemo(() => {
-        const ident = arestasParalelas(edges);
-        return edges.map((e, i) => ({
-            id: ident[i].id, type: "aurea", source: e.from, target: e.to, label: e.label, animated: e.animated,
-            data: { deslocamento: ident[i].deslocamento }, selectable: false,
+        const itens = desenhadas.map(x => x.item);
+        const ident = arestasParalelas(itens, vertical ? m.larg : m.alt);
+        return desenhadas.map(({ item: e, grupo }, i) => ({
+            id: ident[i].id, type: "aurea", source: e.from, target: e.to, sourceHandle: e.fromPort, targetHandle: e.toPort,
+            // O grupo FECHADO é a linha de todos: o nome da primeira enganaria ("WAN 1" valendo pelas 10).
+            label: grupo && !grupo.aberto ? undefined : e.label, animated: e.animated, selectable: !!onEdgeSelect,
+            hidden: ocultos.has(e.from) || ocultos.has(e.to),
+            data: { deslocamento: ident[i].deslocamento, vertical, forma: edgeShape, padrao: e.pattern, peso: e.weight, marca: e.mark, contagem: e.count,
+                origem: e.sourceLabel, destino: e.targetLabel, apagada: aceso?.arestas ? !aceso.arestas.has(e.id ?? ident[i].id) : aceso?.nos ? !(aceso.nos.has(e.from) && aceso.nos.has(e.to)) : false,
+                grupo: grupo ? { n: grupo.n, aberto: grupo.aberto, alternar: () => alternarGrupo(grupo.chave), mostrar: s.graphShow, juntar: s.graphJoin, conexoes: s.graphConnections } : undefined },
         }));
-    }, [edges]);
+    }, [desenhadas, vertical, m, edgeShape, onEdgeSelect, ocultos, aceso, alternarGrupo, s]);
     // ── A MEDIDA TEM DE PODER VOLTAR, e isto foi achado NO NAVEGADOR ───────────────────────
     // A primeira versão passava `nodes` e nenhum `onNodesChange`. O motor aceita calado e o
     // resultado é um grafo INVISÍVEL: ele só tira o `visibility:hidden` do nó depois de gravar
@@ -224,16 +474,112 @@ export function DependencyGraph({ nodes, edges, label, selectedId, onSelect, con
     React.useEffect(() => {
         setNosVivos(anteriores => {
             const medidos = new Map(anteriores.map(n => [n.id, n.measured]));
-            return nosDoMotor.map(n => ({ ...n, measured: medidos.get(n.id) }));
+            return nosDoMotor.map(n => semAlcasDeclaradas({ ...n, measured: medidos.get(n.id) }));
         });
     }, [nosDoMotor]);
     const aoMudarNos = React.useCallback((mudancas) => {
-        setNosVivos(anteriores => applyNodeChanges(mudancas, anteriores));
+        setNosVivos(anteriores => applyNodeChanges(mudancas, anteriores).map(semAlcasDeclaradas));
     }, []);
+    // A LEGENDA se monta com o que está na tela: uma linha por nome de `legend`, com o desenho dela.
+    const legenda = React.useMemo(() => {
+        const vistas = new Map();
+        for (const e of edges)
+            if (e.legend && !vistas.has(e.legend))
+                vistas.set(e.legend, e);
+        return [...vistas.entries()];
+    }, [edges]);
+    const raiz = React.useRef(null);
     // `initialWidth`/`initialHeight` no provider é o par do de cima, um nível acima: é o viewport
     // que o `fitView` usa ENQUANTO ninguém mediu. Com o prefixo `initial`, o navegador sobrescreve
     // na primeira medição — passar `width`/`height` direto no ReactFlow fixaria o tamanho e mataria
     // a fluidez. O valor é a extensão do próprio layout, então no servidor o grafo cabe exato.
-    return _jsx("div", { className: cx("dependency-graph", className), style: height ? { blockSize: height } : 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: _jsx(ReactFlow, { nodes: nosVivos, onNodesChange: aoMudarNos, edges: arestasDoMotor, nodeTypes: TIPOS, edgeTypes: TIPOS_DE_ARESTA, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: false, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : undefined, onConnect: onConnect ? c => { if (c.source && c.target)
-                    onConnect({ from: c.source, to: c.target }); } : undefined, children: _jsx(Background, {}) }) }) });
+    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, 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 }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: false, onNodeDragStop: onNodeMove ? (_, no) => onNodeMove(no.id, no.position) : 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, {}), _jsx(Comandos, { raiz: raiz, teclado: teclado, focusId: focusId, posicoesProntas: emCamadas, controls: !!controls, apiRef: apiRef, itens: desenhadas.map(x => x.item), forma: edgeShape, titulo: label ?? s.graphLabel }), minimap && _jsx(MiniMap, { pannable: true, zoomable: true, ariaLabel: s.graphOverview, className: "graph-minimap" }), legend && legenda.length > 0 && _jsx(Panel, { position: "bottom-left", children: _jsx("ul", { className: "graph-legend", "aria-label": s.graphLegend, children: legenda.map(([nome, e]) => _jsxs("li", { children: [_jsxs("svg", { className: "graph-legend-sample", "aria-hidden": "true", viewBox: "0 0 32 8", children: [_jsx("path", { d: "M0 4H32", className: cx("graph-edge", e.pattern && e.pattern !== "solid" && `graph-edge-${e.pattern}`, e.weight && e.weight !== "regular" && `graph-edge-${e.weight}`) }), e.pattern === "double" && _jsx("path", { d: "M0 4H32", className: cx("graph-edge-double-core", e.weight && e.weight !== "regular" && `graph-edge-${e.weight}`) })] }), e.mark && _jsx("span", { className: `graph-edge-mark graph-edge-mark-${e.mark}`, "aria-hidden": "true", children: e.mark === "lock" && _jsx(Icon, { name: "lock-key", size: "sm" }) }), _jsx("span", { children: nome })] }, nome)) }) })] }) }) });
+}
+// `CSS.escape` existe no navegador; fora dele (o teste em jsdom), as aspas bastam.
+const escapar = (id) => typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(id) : id.replace(/[\x22\\]/g, "\\$&");
+/**
+ * O lado de DENTRO do provedor: o que precisa do motor — caber na tela depois da arrumação em
+ * camadas, o "ir até", as setas de nó em nó, os botões de zoom e o `apiRef`.
+ */
+function Comandos({ raiz, teclado, focusId, posicoesProntas, controls, apiRef, itens, forma, titulo }) {
+    const rf = useReactFlow();
+    const s = useAureaStrings();
+    // Quem pediu menos movimento não vê a tela deslizar: o "ir até" e o caber na tela pulam direto.
+    const duracao = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+    const centralizar = React.useCallback((id) => {
+        const no = rf.getNode(id);
+        if (!no)
+            return;
+        const w = no.measured?.width ?? no.initialWidth ?? LARGURA, h = no.measured?.height ?? no.initialHeight ?? ALTURA;
+        rf.setCenter(no.position.x + w / 2, no.position.y + h / 2, { zoom: Math.max(rf.getZoom(), 1), duration: duracao() });
+    }, [rf]);
+    // A arrumação em camadas chegou: o mapa cabe de novo na tela.
+    React.useEffect(() => { if (posicoesProntas)
+        requestAnimationFrame(() => rf.fitView({ duration: duracao() })); }, [posicoesProntas, rf]);
+    React.useEffect(() => { if (focusId)
+        centralizar(focusId); }, [focusId, centralizar]);
+    // AS SETAS (MNT-19.4): o nó mais perto na direção da seta, dentro de um cone de 45°. O foco vai
+    // para o botão dele; se ele estiver fora da tela, a tela vai até ele.
+    React.useEffect(() => {
+        teclado.current = (id, tecla) => {
+            const centro = (n) => ({ x: n.position.x + (n.measured?.width ?? LARGURA) / 2, y: n.position.y + (n.measured?.height ?? ALTURA) / 2 });
+            const atual = rf.getNode(id);
+            if (!atual)
+                return;
+            const a = centro(atual);
+            let melhor = null;
+            for (const n of rf.getNodes()) {
+                if (n.id === id || n.hidden)
+                    continue;
+                const b = centro(n), dx = b.x - a.x, dy = b.y - a.y;
+                const naDirecao = tecla === "ArrowRight" ? dx > 0 && Math.abs(dy) <= dx : tecla === "ArrowLeft" ? dx < 0 && Math.abs(dy) <= -dx
+                    : tecla === "ArrowDown" ? dy > 0 && Math.abs(dx) <= dy : dy < 0 && Math.abs(dx) <= -dy;
+                if (!naDirecao)
+                    continue;
+                const d = dx * dx + dy * dy;
+                if (!melhor || d < melhor.d)
+                    melhor = { id: n.id, d };
+            }
+            if (!melhor)
+                return;
+            const alvo = raiz.current?.querySelector(`.react-flow__node[data-id="${escapar(melhor.id)}"] button.graph-node-body`);
+            alvo?.focus({ preventScroll: true });
+            const caixa = raiz.current?.getBoundingClientRect(), noCaixa = alvo?.getBoundingClientRect();
+            if (caixa && noCaixa && (noCaixa.left < caixa.left || noCaixa.right > caixa.right || noCaixa.top < caixa.top || noCaixa.bottom > caixa.bottom))
+                centralizar(melhor.id);
+        };
+    }, [rf, raiz, teclado, centralizar]);
+    React.useImperativeHandle(apiRef, () => ({
+        fitView: () => { void rf.fitView({ duration: duracao() }); },
+        zoomIn: () => { void rf.zoomIn({ duration: duracao() }); },
+        zoomOut: () => { void rf.zoomOut({ duration: duracao() }); },
+        focus: centralizar,
+        toDrawio: () => paraDrawio(rf.getNodes(), itens, forma, titulo),
+        toPng: () => foto(raiz.current, "png"),
+        toSvg: () => foto(raiz.current, "svg"),
+    }), [rf, centralizar, itens, forma, titulo]);
+    if (!controls)
+        return null;
+    return _jsxs(Panel, { position: "top-right", className: "graph-controls", children: [_jsx(IconButton, { icon: "magnifying-glass-plus", label: s.graphZoomIn, onClick: () => void rf.zoomIn({ duration: duracao() }) }), _jsx(IconButton, { icon: "magnifying-glass-minus", label: s.graphZoomOut, onClick: () => void rf.zoomOut({ duration: duracao() }) }), _jsx(IconButton, { icon: "corners-out", label: s.graphFit, onClick: () => void rf.fitView({ duration: duracao() }) })] });
+}
+/**
+ * A FOTO do mapa (MNT-19.2), pelo `modern-screenshot` (peer OPCIONAL, MIT), carregado só aqui. Sai
+ * o desenho, sem os botões, o minimapa e a legenda flutuante — que são da tela, não do mapa —, no
+ * fundo do próprio cartão.
+ */
+async function foto(el, tipo) {
+    if (!el)
+        throw new Error("DependencyGraph: o mapa ainda não está na tela.");
+    let ms;
+    try {
+        ms = await import("modern-screenshot");
+    }
+    catch {
+        throw new Error("DependencyGraph: toPng/toSvg precisam do pacote `modern-screenshot` (peer opcional).");
+    }
+    const opcoes = { backgroundColor: getComputedStyle(el).backgroundColor, scale: tipo === "png" ? 2 : 1,
+        filter: (n) => !(n instanceof HTMLElement && n.classList.contains("react-flow__panel")) };
+    return tipo === "png" ? ms.domToPng(el, opcoes) : ms.domToSvg(el, opcoes);
 }

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStat
 export { useAureaStrings, useSpriteUrl, useTheme, useDensity } from "./internal.js";
 export { type Responsive, type Breakpoint, type ContainerBreakpoint, type Orientation, ESCALA, ESCALA_CONTAINER } from "./pure.js";
 export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
-export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, Container, Section, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Header, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeCategory, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type KPIProps, type KPIDirection, type KPITone, type KPIVariant, type ProgressProps, type ProgressTone, type AvatarSize, type HeaderVariant, type HeaderProps, type TopbarVariant, type SectionVariant, type SectionFooterGroup, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, Container, Section, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Header, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeCategory, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type KPIProps, type KPIDirection, type KPITone, type KPIVariant, type ProgressProps, type ProgressTone, type AvatarSize, type HeaderVariant, type HeaderProps, type TopbarVariant, type SectionVariant, type SectionFooterGroup, type CardProps, type CardAccent, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/markup.d.ts

@@ -8,18 +8,20 @@ export type AvatarSize = "sm" | "md" | "lg";
 export type HeaderVariant = "floating" | "flush" | "pill";
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). O tipo continua valendo; use `HeaderVariant`. */
 export type TopbarVariant = HeaderVariant;
+export type CardAccent = "brand" | "success" | "info" | "warning" | "danger";
 type CardBase = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     padding?: "normal" | "none";
     orientation?: "vertical" | "horizontal";
+    accent?: CardAccent;
 };
 export type CardProps = CardBase & ({
-    variant?: "base" | "raised" | "inset" | "selected" | "danger";
+    variant?: "base" | "raised" | "inset" | "selected" | "danger" | "contrast";
     render?: ReactElement;
 } | {
     variant: "interactive";
     render: ReactElement;
 });
-export declare function Card({ variant, padding, orientation, className, render, ...props }: CardProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function Card({ variant, padding, orientation, accent, className, render, ...props }: CardProps): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace Card {
     export { CardMedia as Media };
 }

package/dist/markup.js

@@ -37,8 +37,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // tocar motor. Na dúvida, ele NÃO entra — cliente a mais é lento, servidor a mais é quebrado.
 import React, { forwardRef } from "react";
 import { cx, fundirRender, peleDoEixo } from "./pure.js";
-export function Card({ variant = "base", padding = "normal", orientation = "vertical", className, render, ...props }) {
-    return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, padding === "none" && "card-flush", orientation === "horizontal" && "card-horizontal", className), ...props });
+export function Card({ variant = "base", padding = "normal", orientation = "vertical", accent, className, render, ...props }) {
+    return fundirRender(render, { className: cx("card", variant !== "base" && `card-${variant}`, accent && `card-accent card-accent-${accent}`, padding === "none" && "card-flush", orientation === "horizontal" && "card-horizontal", className), ...(variant === "contrast" ? { "data-theme": "dark" } : null), ...props });
 }
 /** A mídia do cartão — a primeira das partes da especificação do `Card` (A-14). No vertical,
  *  primeira filha, ela SANGRA até a borda de cima e dos lados; no horizontal, fica à esquerda com a

package/dist/pure.d.ts

@@ -162,6 +162,14 @@ export interface AureaStrings {
     automationLastRun: string;
     automationResult: Record<"success" | "failure", string>;
     graphLabel: string;
+    graphZoomIn: string;
+    graphZoomOut: string;
+    graphFit: string;
+    graphLegend: string;
+    graphOverview: string;
+    graphConnections: string;
+    graphShow: string;
+    graphJoin: string;
     agentState: Record<"idle" | "thinking" | "running" | "paused" | "error" | "completed", string>;
     codeEditor: string;
     chatLabel: string;

package/dist/pure.js

@@ -53,10 +53,10 @@ export const universalStates = ["waiting_user", "waiting_approval", "waiting_dep
 // perdeu qualidade é avisado. Um `role="alert"` aqui interromperia o leitor de tela por uma
 // condição que não pede ação imediata, que é o oposto do que o papel serve.
 export const stateSeverity = (state) => state.startsWith("waiting_") ? "info" : "warning";
-export const defaultStrings = { passwordShow: "Show password", passwordHide: "Hide password", skipToContent: "Skip to content", close: "Close", confirmCancel: "Cancel", dataError: "This could not be loaded.", dataEmpty: "Nothing here yet", confirmProceed: "Continue", paginationLabel: "Pagination", previous: "Previous", next: "Next", breadcrumbLabel: "Breadcrumb", tabsLabel: "Tabs", optionsLabel: "Options", tableLabel: "Table", commandLabel: "Command palette", commandPlaceholder: "Type a command…", dismissNotification: "Dismiss notification", toolbarLabel: "Toolbar", loading: "Loading", otpDigit: "Digit", stepperLabel: "Steps", increment: "Increase", decrement: "Decrease", comboboxEmpty: "No results", comboboxClear: "Clear selection", comboboxOpen: "Open list", comboboxRemove: "Remove", comboboxLoading: "Loading…", fileDropPrompt: "Drag files here or click to select", fileAdded: "File added", fileRemoved: "File removed", fileRemove: "Remove", fileTooLarge: "File exceeds the size limit", fileWrongType: "File type not allowed", treeLabel: "Tree", notificationsLabel: "Notifications", notificationMarkAll: "Mark all as read", notificationEmpty: "No notifications", notificationUnread: "Unread", notificationNew: "new notifications", dataGridFilter: "Filter", dataGridEmpty: "No results", dataGridSelectAll: "Select all rows", dataGridSelectRow: "Select row", dataGridSelected: "selected", dataGridClearSelection: "Clear selection", dataGridBulkLabel: "Bulk actions", dataGridColumns: "Columns", dataGridResize: "Resize column", dataGridStale: "Showing data that may be out of date.", dataGridPartial: "Some rows could not be loaded. What you see is incomplete.", dataGridError: "The rows could not be loaded.", dataGridDetails: "Details", dataGridDetailPanel: "Row detail", dataGridExport: "Export", dataGridExportRows: "rows", dataGridExportFiltered: "filtered rows", dataGridExportSelected: "selected rows", mediaPlayer: "Media player", mediaPlay: "Play", mediaPause: "Pause", mediaMute: "Mute", mediaUnmute: "Unmute", mediaSeek: "Seek", mediaVolume: "Volume", mediaCaptionsShow: "Show captions", mediaCaptionsHide: "Hide captions", mediaSkipBack: "Skip back 10 seconds", mediaSkipForward: "Skip forward 10 seconds", mediaFullscreenEnter: "Enter full screen", mediaFullscreenExit: "Exit full screen", mediaEmbedOpen: "Open the video on its own site", carouselLabel: "Carousel", carouselSlide: "Slide", positionOf: "of", carouselPrev: "Previous slide", carouselNext: "Next slide", galleryLabel: "Gallery", galleryVideo: "Video", sortableLabel: "Sortable list", sortableHandle: "Reorder", sortableHelp: "Press Space to pick this up, then Arrow Up and Arrow Down to move it. Space drops it, Escape puts it back.", sortableGrabbed: "Picked up", sortableDropped: "Dropped", sortableMoved: "Moved", sortableCanceled: "Put back", blockEditorLabel: "Content blocks", blockLabel: "Block", blockRemove: "Remove block", uploadSending: "Uploading", uploadCancel: "Cancel upload", uploadRetry: "Retry upload", uploadError: "Upload failed", uploadCanceled: "Upload canceled", uploadComplete: "Upload complete", uploadPause: "Pause upload", uploadResume: "Resume upload", uploadPaused: "Paused", uploadPending: "Waiting", uploadChecksum: "Checksum", uploadChecksumBad: "The server received different bytes than the ones sent.", fileConflict: "A file with this name is already in the queue", fileReplace: "Replace", fileKeepBoth: "Keep both", fileSkip: "Skip", uploadReceipt: "Receipt", uploadReceiptCopy: "Copy receipt", agentInspector: "Agent inspector", invocationLabel: "Invocation", invocationInput: "Input", invocationOutput: "Output", taskQueueLabel: "Task queue", taskState: { queued: "Queued", running: "Running", completed: "Completed", failed: "Failed", blocked: "Blocked", paused: "Paused" }, taskPriority: { low: "Low", medium: "Medium", high: "High" }, approvalLabel: "Approval", approvalApprove: "Approve", approvalDeny: "Deny", approvalApproved: "Approved", approvalDenied: "Denied", approvalDeadline: "Decide by", approvalRisk: { low: "Low risk", medium: "Medium risk", high: "High risk" }, permissionLabel: "Tool permissions", permissionAsk: "Ask", permissionAlways: "Always", permissionNever: "Never", eventStreamLabel: "Events", traceLabel: "Trace", healthLabel: "Health", healthState: { operational: "Operational", degraded: "Degraded", down: "Down", maintenance: "Maintenance", unknown: "Unknown" }, modelUsageLabel: "Model usage", usageMetric: { tokens: "Tokens", cost: "Cost", requests: "Requests" }, costMeterLabel: "Cost", costMeterSpent: "Spent", costMeterRemaining: "left", costMeterExceeded: "Over the limit", costMeterNear: "Spending is past the soft limit.", costMeterOver: "The limit has been reached. Further calls are blocked.", memoryLabel: "Memory ledger", memoryProvenance: "Where this came from", memoryOperation: { added: "Added", updated: "Updated", recalled: "Recalled", forgotten: "Forgotten" }, memoryScope: { episodic: "Episodic", semantic: "Semantic", procedural: "Procedural" }, agentMessageLabel: "Agent messages", agentMessageTo: "to", agentMessageBroadcast: "all agents", agentMessageReason: "Why it went this way", agentMessageKind: { request: "Request", response: "Response", handoff: "Handoff", broadcast: "Broadcast", error: "Error" }, automationWhen: "When", automationThen: "Then", automationEnabled: "Enabled", automationLastRun: "Last run", automationResult: { success: "Succeeded", failure: "Failed" }, graphLabel: "Dependency graph", agentState: { idle: "Idle", thinking: "Thinking", running: "Running", paused: "Paused", error: "Error", completed: "Completed" }, codeEditor: "Code editor", chatLabel: "Conversation", chatMessage: "Message", chatSend: "Send", chatAttach: "Attach file", chatAttachments: "Attachments", chatReplyTo: "Replying to", chatReplyCancel: "Cancel reply", chatEditing: "Editing message", chatEditCancel: "Cancel editing", chatSave: "Save", chatEdited: "edited", chatForwardedFrom: "Forwarded from", qrCode: "QR code", chartLabel: "Chart", copyCode: "Copy code", copied: "Copied", linkCopied: "Link copied", linkCopyFailed: "Could not copy. Copy the link below.", tocLabel: "On this page", navigationToggle: "Navigation", sidebarLabel: "Sidebar", sidebarCollapse: "Collapse sidebar", sidebarExpand: "Expand sidebar", bottomNavLabel: "Main", themeToDark: "Switch to dark theme", themeToLight: "Switch to light theme", universalState: { waiting_user: "Waiting for someone to act.", waiting_approval: "Waiting for approval.", waiting_dependency: "Waiting for something else to finish.", offline: "No connection. This was loaded earlier.", stale: "This may be out of date.", partial: "Some of this could not be loaded.", degraded: "Working with reduced capability." } };
+export const defaultStrings = { passwordShow: "Show password", passwordHide: "Hide password", skipToContent: "Skip to content", close: "Close", confirmCancel: "Cancel", dataError: "This could not be loaded.", dataEmpty: "Nothing here yet", confirmProceed: "Continue", paginationLabel: "Pagination", previous: "Previous", next: "Next", breadcrumbLabel: "Breadcrumb", tabsLabel: "Tabs", optionsLabel: "Options", tableLabel: "Table", commandLabel: "Command palette", commandPlaceholder: "Type a command…", dismissNotification: "Dismiss notification", toolbarLabel: "Toolbar", loading: "Loading", otpDigit: "Digit", stepperLabel: "Steps", increment: "Increase", decrement: "Decrease", comboboxEmpty: "No results", comboboxClear: "Clear selection", comboboxOpen: "Open list", comboboxRemove: "Remove", comboboxLoading: "Loading…", fileDropPrompt: "Drag files here or click to select", fileAdded: "File added", fileRemoved: "File removed", fileRemove: "Remove", fileTooLarge: "File exceeds the size limit", fileWrongType: "File type not allowed", treeLabel: "Tree", notificationsLabel: "Notifications", notificationMarkAll: "Mark all as read", notificationEmpty: "No notifications", notificationUnread: "Unread", notificationNew: "new notifications", dataGridFilter: "Filter", dataGridEmpty: "No results", dataGridSelectAll: "Select all rows", dataGridSelectRow: "Select row", dataGridSelected: "selected", dataGridClearSelection: "Clear selection", dataGridBulkLabel: "Bulk actions", dataGridColumns: "Columns", dataGridResize: "Resize column", dataGridStale: "Showing data that may be out of date.", dataGridPartial: "Some rows could not be loaded. What you see is incomplete.", dataGridError: "The rows could not be loaded.", dataGridDetails: "Details", dataGridDetailPanel: "Row detail", dataGridExport: "Export", dataGridExportRows: "rows", dataGridExportFiltered: "filtered rows", dataGridExportSelected: "selected rows", mediaPlayer: "Media player", mediaPlay: "Play", mediaPause: "Pause", mediaMute: "Mute", mediaUnmute: "Unmute", mediaSeek: "Seek", mediaVolume: "Volume", mediaCaptionsShow: "Show captions", mediaCaptionsHide: "Hide captions", mediaSkipBack: "Skip back 10 seconds", mediaSkipForward: "Skip forward 10 seconds", mediaFullscreenEnter: "Enter full screen", mediaFullscreenExit: "Exit full screen", mediaEmbedOpen: "Open the video on its own site", carouselLabel: "Carousel", carouselSlide: "Slide", positionOf: "of", carouselPrev: "Previous slide", carouselNext: "Next slide", galleryLabel: "Gallery", galleryVideo: "Video", sortableLabel: "Sortable list", sortableHandle: "Reorder", sortableHelp: "Press Space to pick this up, then Arrow Up and Arrow Down to move it. Space drops it, Escape puts it back.", sortableGrabbed: "Picked up", sortableDropped: "Dropped", sortableMoved: "Moved", sortableCanceled: "Put back", blockEditorLabel: "Content blocks", blockLabel: "Block", blockRemove: "Remove block", uploadSending: "Uploading", uploadCancel: "Cancel upload", uploadRetry: "Retry upload", uploadError: "Upload failed", uploadCanceled: "Upload canceled", uploadComplete: "Upload complete", uploadPause: "Pause upload", uploadResume: "Resume upload", uploadPaused: "Paused", uploadPending: "Waiting", uploadChecksum: "Checksum", uploadChecksumBad: "The server received different bytes than the ones sent.", fileConflict: "A file with this name is already in the queue", fileReplace: "Replace", fileKeepBoth: "Keep both", fileSkip: "Skip", uploadReceipt: "Receipt", uploadReceiptCopy: "Copy receipt", agentInspector: "Agent inspector", invocationLabel: "Invocation", invocationInput: "Input", invocationOutput: "Output", taskQueueLabel: "Task queue", taskState: { queued: "Queued", running: "Running", completed: "Completed", failed: "Failed", blocked: "Blocked", paused: "Paused" }, taskPriority: { low: "Low", medium: "Medium", high: "High" }, approvalLabel: "Approval", approvalApprove: "Approve", approvalDeny: "Deny", approvalApproved: "Approved", approvalDenied: "Denied", approvalDeadline: "Decide by", approvalRisk: { low: "Low risk", medium: "Medium risk", high: "High risk" }, permissionLabel: "Tool permissions", permissionAsk: "Ask", permissionAlways: "Always", permissionNever: "Never", eventStreamLabel: "Events", traceLabel: "Trace", healthLabel: "Health", healthState: { operational: "Operational", degraded: "Degraded", down: "Down", maintenance: "Maintenance", unknown: "Unknown" }, modelUsageLabel: "Model usage", usageMetric: { tokens: "Tokens", cost: "Cost", requests: "Requests" }, costMeterLabel: "Cost", costMeterSpent: "Spent", costMeterRemaining: "left", costMeterExceeded: "Over the limit", costMeterNear: "Spending is past the soft limit.", costMeterOver: "The limit has been reached. Further calls are blocked.", memoryLabel: "Memory ledger", memoryProvenance: "Where this came from", memoryOperation: { added: "Added", updated: "Updated", recalled: "Recalled", forgotten: "Forgotten" }, memoryScope: { episodic: "Episodic", semantic: "Semantic", procedural: "Procedural" }, agentMessageLabel: "Agent messages", agentMessageTo: "to", agentMessageBroadcast: "all agents", agentMessageReason: "Why it went this way", agentMessageKind: { request: "Request", response: "Response", handoff: "Handoff", broadcast: "Broadcast", error: "Error" }, automationWhen: "When", automationThen: "Then", automationEnabled: "Enabled", automationLastRun: "Last run", automationResult: { success: "Succeeded", failure: "Failed" }, graphLabel: "Dependency graph", graphZoomIn: "Zoom in", graphZoomOut: "Zoom out", graphFit: "Fit to screen", graphLegend: "Legend", graphOverview: "Overview", graphConnections: "connections", graphShow: "Show", graphJoin: "Join", agentState: { idle: "Idle", thinking: "Thinking", running: "Running", paused: "Paused", error: "Error", completed: "Completed" }, codeEditor: "Code editor", chatLabel: "Conversation", chatMessage: "Message", chatSend: "Send", chatAttach: "Attach file", chatAttachments: "Attachments", chatReplyTo: "Replying to", chatReplyCancel: "Cancel reply", chatEditing: "Editing message", chatEditCancel: "Cancel editing", chatSave: "Save", chatEdited: "edited", chatForwardedFrom: "Forwarded from", qrCode: "QR code", chartLabel: "Chart", copyCode: "Copy code", copied: "Copied", linkCopied: "Link copied", linkCopyFailed: "Could not copy. Copy the link below.", tocLabel: "On this page", navigationToggle: "Navigation", sidebarLabel: "Sidebar", sidebarCollapse: "Collapse sidebar", sidebarExpand: "Expand sidebar", bottomNavLabel: "Main", themeToDark: "Switch to dark theme", themeToLight: "Switch to light theme", universalState: { waiting_user: "Waiting for someone to act.", waiting_approval: "Waiting for approval.", waiting_dependency: "Waiting for something else to finish.", offline: "No connection. This was loaded earlier.", stale: "This may be out of date.", partial: "Some of this could not be loaded.", degraded: "Working with reduced capability." } };
 // pt-BR preservado como locale (mesmos valores que já eram o default): passe
 // <AureaProvider strings={ptBR}> para restaurar português.
-export const ptBR = { passwordShow: "Mostrar senha", passwordHide: "Ocultar senha", skipToContent: "Pular para o conteúdo", close: "Fechar", confirmCancel: "Cancelar", dataError: "Não foi possível carregar.", dataEmpty: "Ainda não há nada aqui", confirmProceed: "Continuar", paginationLabel: "Paginação", previous: "Anterior", next: "Próxima", breadcrumbLabel: "Breadcrumb", tabsLabel: "Abas", optionsLabel: "Opções", tableLabel: "Tabela", commandLabel: "Paleta de comandos", commandPlaceholder: "Digite um comando…", dismissNotification: "Dispensar notificação", toolbarLabel: "Barra de ferramentas", loading: "Carregando", otpDigit: "Dígito", stepperLabel: "Etapas", increment: "Aumentar", decrement: "Diminuir", comboboxEmpty: "Nenhum resultado", comboboxClear: "Limpar seleção", comboboxOpen: "Abrir lista", comboboxRemove: "Remover", comboboxLoading: "Carregando…", fileDropPrompt: "Arraste arquivos aqui ou clique para selecionar", fileAdded: "Arquivo adicionado", fileRemoved: "Arquivo removido", fileRemove: "Remover", fileTooLarge: "Arquivo maior que o limite", fileWrongType: "Tipo de arquivo não aceito", treeLabel: "Árvore", notificationsLabel: "Notificações", notificationMarkAll: "Marcar todas como lidas", notificationEmpty: "Nenhuma notificação", notificationUnread: "Não lida", notificationNew: "novas notificações", dataGridFilter: "Filtrar", dataGridEmpty: "Nenhum resultado", dataGridSelectAll: "Selecionar todas as linhas", dataGridSelectRow: "Selecionar linha", dataGridSelected: "selecionadas", dataGridClearSelection: "Limpar seleção", dataGridBulkLabel: "Ações em lote", dataGridColumns: "Colunas", dataGridResize: "Redimensionar coluna", dataGridStale: "Mostrando dados que podem estar desatualizados.", dataGridPartial: "Algumas linhas não puderam ser carregadas. O que aparece está incompleto.", dataGridError: "Não foi possível carregar as linhas.", dataGridDetails: "Detalhes", dataGridDetailPanel: "Detalhe da linha", dataGridExport: "Exportar", dataGridExportRows: "linhas", dataGridExportFiltered: "linhas filtradas", dataGridExportSelected: "linhas selecionadas", mediaPlayer: "Reprodutor de mídia", mediaPlay: "Reproduzir", mediaPause: "Pausar", mediaMute: "Silenciar", mediaUnmute: "Ativar som", mediaSeek: "Posição da reprodução", mediaVolume: "Volume", mediaCaptionsShow: "Ativar legendas", mediaCaptionsHide: "Desativar legendas", mediaSkipBack: "Voltar 10 segundos", mediaSkipForward: "Avançar 10 segundos", mediaFullscreenEnter: "Tela cheia", mediaFullscreenExit: "Sair da tela cheia", mediaEmbedOpen: "Abrir o vídeo no site de origem", carouselLabel: "Carrossel", carouselSlide: "Slide", positionOf: "de", carouselPrev: "Slide anterior", carouselNext: "Próximo slide", galleryLabel: "Galeria", galleryVideo: "Vídeo", sortableLabel: "Lista ordenável", sortableHandle: "Reordenar", sortableHelp: "Aperte Espaço para pegar, e as setas para cima e para baixo para mover. Espaço solta, Esc devolve ao lugar.", sortableGrabbed: "Pego", sortableDropped: "Solto", sortableMoved: "Movido", sortableCanceled: "Devolvido", blockEditorLabel: "Blocos de conteúdo", blockLabel: "Bloco", blockRemove: "Remover bloco", uploadSending: "Enviando", uploadCancel: "Cancelar envio", uploadRetry: "Tentar envio novamente", uploadError: "Falha no envio", uploadCanceled: "Envio cancelado", uploadComplete: "Envio concluído", uploadPause: "Pausar envio", uploadResume: "Retomar envio", uploadPaused: "Pausado", uploadPending: "Aguardando", uploadChecksum: "Soma de verificação", uploadChecksumBad: "O servidor recebeu bytes diferentes dos enviados.", fileConflict: "Já existe um arquivo com este nome na fila", fileReplace: "Substituir", fileKeepBoth: "Manter os dois", fileSkip: "Pular", uploadReceipt: "Recibo", uploadReceiptCopy: "Copiar recibo", agentInspector: "Inspetor do agente", invocationLabel: "Invocação", invocationInput: "Entrada", invocationOutput: "Saída", taskQueueLabel: "Fila de tarefas", taskState: { queued: "Na fila", running: "Executando", completed: "Concluída", failed: "Falhou", blocked: "Bloqueada", paused: "Pausada" }, taskPriority: { low: "Baixa", medium: "Média", high: "Alta" }, approvalLabel: "Aprovação", approvalApprove: "Aprovar", approvalDeny: "Negar", approvalApproved: "Aprovado", approvalDenied: "Negado", approvalDeadline: "Decidir até", approvalRisk: { low: "Risco baixo", medium: "Risco médio", high: "Risco alto" }, permissionLabel: "Permissões de ferramenta", permissionAsk: "Perguntar", permissionAlways: "Sempre", permissionNever: "Nunca", eventStreamLabel: "Eventos", traceLabel: "Rastro", healthLabel: "Saúde", healthState: { operational: "Operando", degraded: "Degradado", down: "Fora do ar", maintenance: "Em manutenção", unknown: "Desconhecido" }, modelUsageLabel: "Consumo por modelo", usageMetric: { tokens: "Tokens", cost: "Custo", requests: "Chamadas" }, costMeterLabel: "Custo", costMeterSpent: "Gasto", costMeterRemaining: "restantes", costMeterExceeded: "Acima do limite", costMeterNear: "O gasto passou do limite brando.", costMeterOver: "O limite foi atingido. As próximas chamadas estão bloqueadas.", memoryLabel: "Livro-razão de memória", memoryProvenance: "De onde isto veio", memoryOperation: { added: "Guardada", updated: "Atualizada", recalled: "Lembrada", forgotten: "Esquecida" }, memoryScope: { episodic: "Episódica", semantic: "Semântica", procedural: "Procedural" }, agentMessageLabel: "Recados entre agentes", agentMessageTo: "para", agentMessageBroadcast: "todos os agentes", agentMessageReason: "Por que foi por aqui", agentMessageKind: { request: "Pedido", response: "Resposta", handoff: "Passagem", broadcast: "Difusão", error: "Erro" }, automationWhen: "Quando", automationThen: "Então", automationEnabled: "Ativa", automationLastRun: "Última execução", automationResult: { success: "Concluiu", failure: "Falhou" }, graphLabel: "Grafo de dependências", agentState: { idle: "Ocioso", thinking: "Pensando", running: "Executando", paused: "Pausado", error: "Erro", completed: "Concluído" }, codeEditor: "Editor de código", chatLabel: "Conversa", chatMessage: "Mensagem", chatSend: "Enviar", chatAttach: "Anexar arquivo", chatAttachments: "Anexos", chatReplyTo: "Respondendo a", chatReplyCancel: "Cancelar resposta", chatEditing: "Editando mensagem", chatEditCancel: "Cancelar edição", chatSave: "Salvar", chatEdited: "editada", chatForwardedFrom: "Encaminhada de", qrCode: "Código QR", chartLabel: "Gráfico", copyCode: "Copiar código", copied: "Copiado", linkCopied: "Link copiado", linkCopyFailed: "Não deu para copiar. Copie o link abaixo.", tocLabel: "Nesta página", navigationToggle: "Navegação", sidebarLabel: "Lateral", sidebarCollapse: "Recolher o menu", sidebarExpand: "Abrir o menu", bottomNavLabel: "Principal", themeToDark: "Mudar para o tema escuro", themeToLight: "Mudar para o tema claro", universalState: { waiting_user: "Esperando alguém agir.", waiting_approval: "Esperando aprovação.", waiting_dependency: "Esperando outra coisa terminar.", offline: "Sem conexão. Isto foi carregado antes.", stale: "Isto pode estar desatualizado.", partial: "Parte disto não pôde ser carregada.", degraded: "Funcionando com capacidade reduzida." } };
+export const ptBR = { passwordShow: "Mostrar senha", passwordHide: "Ocultar senha", skipToContent: "Pular para o conteúdo", close: "Fechar", confirmCancel: "Cancelar", dataError: "Não foi possível carregar.", dataEmpty: "Ainda não há nada aqui", confirmProceed: "Continuar", paginationLabel: "Paginação", previous: "Anterior", next: "Próxima", breadcrumbLabel: "Breadcrumb", tabsLabel: "Abas", optionsLabel: "Opções", tableLabel: "Tabela", commandLabel: "Paleta de comandos", commandPlaceholder: "Digite um comando…", dismissNotification: "Dispensar notificação", toolbarLabel: "Barra de ferramentas", loading: "Carregando", otpDigit: "Dígito", stepperLabel: "Etapas", increment: "Aumentar", decrement: "Diminuir", comboboxEmpty: "Nenhum resultado", comboboxClear: "Limpar seleção", comboboxOpen: "Abrir lista", comboboxRemove: "Remover", comboboxLoading: "Carregando…", fileDropPrompt: "Arraste arquivos aqui ou clique para selecionar", fileAdded: "Arquivo adicionado", fileRemoved: "Arquivo removido", fileRemove: "Remover", fileTooLarge: "Arquivo maior que o limite", fileWrongType: "Tipo de arquivo não aceito", treeLabel: "Árvore", notificationsLabel: "Notificações", notificationMarkAll: "Marcar todas como lidas", notificationEmpty: "Nenhuma notificação", notificationUnread: "Não lida", notificationNew: "novas notificações", dataGridFilter: "Filtrar", dataGridEmpty: "Nenhum resultado", dataGridSelectAll: "Selecionar todas as linhas", dataGridSelectRow: "Selecionar linha", dataGridSelected: "selecionadas", dataGridClearSelection: "Limpar seleção", dataGridBulkLabel: "Ações em lote", dataGridColumns: "Colunas", dataGridResize: "Redimensionar coluna", dataGridStale: "Mostrando dados que podem estar desatualizados.", dataGridPartial: "Algumas linhas não puderam ser carregadas. O que aparece está incompleto.", dataGridError: "Não foi possível carregar as linhas.", dataGridDetails: "Detalhes", dataGridDetailPanel: "Detalhe da linha", dataGridExport: "Exportar", dataGridExportRows: "linhas", dataGridExportFiltered: "linhas filtradas", dataGridExportSelected: "linhas selecionadas", mediaPlayer: "Reprodutor de mídia", mediaPlay: "Reproduzir", mediaPause: "Pausar", mediaMute: "Silenciar", mediaUnmute: "Ativar som", mediaSeek: "Posição da reprodução", mediaVolume: "Volume", mediaCaptionsShow: "Ativar legendas", mediaCaptionsHide: "Desativar legendas", mediaSkipBack: "Voltar 10 segundos", mediaSkipForward: "Avançar 10 segundos", mediaFullscreenEnter: "Tela cheia", mediaFullscreenExit: "Sair da tela cheia", mediaEmbedOpen: "Abrir o vídeo no site de origem", carouselLabel: "Carrossel", carouselSlide: "Slide", positionOf: "de", carouselPrev: "Slide anterior", carouselNext: "Próximo slide", galleryLabel: "Galeria", galleryVideo: "Vídeo", sortableLabel: "Lista ordenável", sortableHandle: "Reordenar", sortableHelp: "Aperte Espaço para pegar, e as setas para cima e para baixo para mover. Espaço solta, Esc devolve ao lugar.", sortableGrabbed: "Pego", sortableDropped: "Solto", sortableMoved: "Movido", sortableCanceled: "Devolvido", blockEditorLabel: "Blocos de conteúdo", blockLabel: "Bloco", blockRemove: "Remover bloco", uploadSending: "Enviando", uploadCancel: "Cancelar envio", uploadRetry: "Tentar envio novamente", uploadError: "Falha no envio", uploadCanceled: "Envio cancelado", uploadComplete: "Envio concluído", uploadPause: "Pausar envio", uploadResume: "Retomar envio", uploadPaused: "Pausado", uploadPending: "Aguardando", uploadChecksum: "Soma de verificação", uploadChecksumBad: "O servidor recebeu bytes diferentes dos enviados.", fileConflict: "Já existe um arquivo com este nome na fila", fileReplace: "Substituir", fileKeepBoth: "Manter os dois", fileSkip: "Pular", uploadReceipt: "Recibo", uploadReceiptCopy: "Copiar recibo", agentInspector: "Inspetor do agente", invocationLabel: "Invocação", invocationInput: "Entrada", invocationOutput: "Saída", taskQueueLabel: "Fila de tarefas", taskState: { queued: "Na fila", running: "Executando", completed: "Concluída", failed: "Falhou", blocked: "Bloqueada", paused: "Pausada" }, taskPriority: { low: "Baixa", medium: "Média", high: "Alta" }, approvalLabel: "Aprovação", approvalApprove: "Aprovar", approvalDeny: "Negar", approvalApproved: "Aprovado", approvalDenied: "Negado", approvalDeadline: "Decidir até", approvalRisk: { low: "Risco baixo", medium: "Risco médio", high: "Risco alto" }, permissionLabel: "Permissões de ferramenta", permissionAsk: "Perguntar", permissionAlways: "Sempre", permissionNever: "Nunca", eventStreamLabel: "Eventos", traceLabel: "Rastro", healthLabel: "Saúde", healthState: { operational: "Operando", degraded: "Degradado", down: "Fora do ar", maintenance: "Em manutenção", unknown: "Desconhecido" }, modelUsageLabel: "Consumo por modelo", usageMetric: { tokens: "Tokens", cost: "Custo", requests: "Chamadas" }, costMeterLabel: "Custo", costMeterSpent: "Gasto", costMeterRemaining: "restantes", costMeterExceeded: "Acima do limite", costMeterNear: "O gasto passou do limite brando.", costMeterOver: "O limite foi atingido. As próximas chamadas estão bloqueadas.", memoryLabel: "Livro-razão de memória", memoryProvenance: "De onde isto veio", memoryOperation: { added: "Guardada", updated: "Atualizada", recalled: "Lembrada", forgotten: "Esquecida" }, memoryScope: { episodic: "Episódica", semantic: "Semântica", procedural: "Procedural" }, agentMessageLabel: "Recados entre agentes", agentMessageTo: "para", agentMessageBroadcast: "todos os agentes", agentMessageReason: "Por que foi por aqui", agentMessageKind: { request: "Pedido", response: "Resposta", handoff: "Passagem", broadcast: "Difusão", error: "Erro" }, automationWhen: "Quando", automationThen: "Então", automationEnabled: "Ativa", automationLastRun: "Última execução", automationResult: { success: "Concluiu", failure: "Falhou" }, graphLabel: "Grafo de dependências", graphZoomIn: "Aproximar", graphZoomOut: "Afastar", graphFit: "Caber na tela", graphLegend: "Legenda", graphOverview: "Visão geral", graphConnections: "conexões", graphShow: "Mostrar", graphJoin: "Juntar", agentState: { idle: "Ocioso", thinking: "Pensando", running: "Executando", paused: "Pausado", error: "Erro", completed: "Concluído" }, codeEditor: "Editor de código", chatLabel: "Conversa", chatMessage: "Mensagem", chatSend: "Enviar", chatAttach: "Anexar arquivo", chatAttachments: "Anexos", chatReplyTo: "Respondendo a", chatReplyCancel: "Cancelar resposta", chatEditing: "Editando mensagem", chatEditCancel: "Cancelar edição", chatSave: "Salvar", chatEdited: "editada", chatForwardedFrom: "Encaminhada de", qrCode: "Código QR", chartLabel: "Gráfico", copyCode: "Copiar código", copied: "Copiado", linkCopied: "Link copiado", linkCopyFailed: "Não deu para copiar. Copie o link abaixo.", tocLabel: "Nesta página", navigationToggle: "Navegação", sidebarLabel: "Lateral", sidebarCollapse: "Recolher o menu", sidebarExpand: "Abrir o menu", bottomNavLabel: "Principal", themeToDark: "Mudar para o tema escuro", themeToLight: "Mudar para o tema claro", universalState: { waiting_user: "Esperando alguém agir.", waiting_approval: "Esperando aprovação.", waiting_dependency: "Esperando outra coisa terminar.", offline: "Sem conexão. Isto foi carregado antes.", stale: "Isto pode estar desatualizado.", partial: "Parte disto não pôde ser carregada.", degraded: "Funcionando com capacidade reduzida." } };
 // Sprite de ícones: CONFIGURAÇÃO DE APLICAÇÃO, então entra pelo provider, uma vez.
 // Antes o default absoluto "/aurea-icons.svg" vivia no Icon e 15 componentes declaravam
 // e repassavam `spriteUrl` à mão — 52 sítios de código. Consequência: aplicação servida

package/dist/system.d.ts

@@ -28,8 +28,17 @@ export declare function useAureaTheme(): {
 export type { IconName, PhosphorIconName, AureaIconNames, IconWeight } from "./icon-names.js";
 import { type IconName, type IconWeight } from "./icon-names.js";
 export type IconSize = "sm" | "md" | "lg" | "xl";
-export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
-    name: IconName;
+/**
+ * O DESENHO do próprio app, como no nativo (`AureaIcon`, R-11) — MNT-02, ADR-0064, 10/10/2026. Um
+ * componente que devolve o `<svg>` dele; recebe a classe e o tamanho da Aurea, e herda a cor
+ * (`currentColor`). Serve ao glifo que o Phosphor não tem (o roteador de um mapa de rede) e ao
+ * logotipo do app, sem sprite próprio nem `declare module`. Não tem forma cheia.
+ */
+export type AureaIconComponent = (props: React.SVGAttributes<SVGSVGElement>) => React.ReactElement;
+/** Um ícone: o NOME de um glifo do sprite, ou o DESENHO do app. */
+export type AureaIcon = IconName | AureaIconComponent;
+export interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, "name"> {
+    name: AureaIcon;
     spriteUrl?: string;
     size?: Responsive<IconSize>;
     /** `fill` desenha a forma cheia — a do item escolhido (ADR-0053). Nome próprio do app fica no `regular`. */

package/dist/system.js

@@ -196,4 +196,11 @@ import { NOMES_PHOSPHOR } from "./icon-names.js";
 // A forma cheia é o símbolo `i-<nome>-fill` do sprite. Só os nomes do Phosphor a têm: um nome
 // próprio do app pedido em `fill` desenha o regular, em vez de um `<use>` vazio.
 const idDoIcone = (name, weight = "regular") => weight === "fill" && NOMES_PHOSPHOR.has(name) ? `i-${name}-fill` : `i-${name}`;
-export function Icon({ name, spriteUrl, size, weight, className, ...props }) { const base = useSpriteUrl(); return _jsx("svg", { "aria-hidden": "true", className: cx("icon", peleDoEixo("icon", size), className), ...props, children: _jsx("use", { href: `${spriteUrl ?? base}#${idDoIcone(name, weight)}` }) }); }
+export function Icon({ name, spriteUrl, size, weight, className, ...props }) {
+    const base = useSpriteUrl();
+    if (typeof name === "function") {
+        const Desenho = name;
+        return _jsx(Desenho, { "aria-hidden": "true", className: cx("icon", peleDoEixo("icon", size), className), ...props });
+    }
+    return _jsx("svg", { "aria-hidden": "true", className: cx("icon", peleDoEixo("icon", size), className), ...props, children: _jsx("use", { href: `${spriteUrl ?? base}#${idDoIcone(name, weight)}` }) });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",
@@ -127,6 +127,8 @@
     "@tanstack/react-table": "^8.21.3",
     "@xyflow/react": "^12.11.2",
     "codemirror": "^6.0.2",
+    "elkjs": "^0.12.0",
+    "modern-screenshot": "^4.7.0",
     "qr": "^0.6.0",
     "react": ">=19",
     "react-day-picker": "^10.0.1",
@@ -163,6 +165,12 @@
     },
     "@xyflow/react": {
       "optional": true
+    },
+    "elkjs": {
+      "optional": true
+    },
+    "modern-screenshot": {
+      "optional": true
     }
   },
   "devDependencies": {