@aurea-uds/react 0.1.0 → 0.2.0

package/dist/file-input.d.ts

@@ -6,13 +6,27 @@ export interface FileRejection {
 export interface UploadContext {
     signal: AbortSignal;
     onProgress: (fraction: number) => void;
+    resumeFrom: number;
+}
+export type UploadFn = (file: File, ctx: UploadContext) => Promise<void | {
+    checksum?: string;
+}>;
+type UploadStatus = "pending" | "uploading" | "paused" | "done" | "error" | "canceled";
+export interface FileQueueItem {
+    id: string;
+    name: string;
+    bytes: number;
+    status: UploadStatus;
+    progress: number;
+    restored?: boolean;
+    checksum?: string;
+    finishedAt?: string;
 }
-export type UploadFn = (file: File, ctx: UploadContext) => Promise<void>;
 export declare function matchesAccept(file: {
     name: string;
     type: string;
 }, accept?: string): boolean;
-export declare function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className }: {
+export declare function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className, initialQueue, onQueueChange, preview, checksum }: {
     accept?: string;
     maxSize?: number;
     multiple?: boolean;
@@ -22,4 +36,9 @@ export declare function FileInput({ accept, maxSize, multiple, onFilesChange, up
     hint?: ReactNode;
     id?: string;
     className?: string;
+    initialQueue?: FileQueueItem[];
+    onQueueChange?: (queue: FileQueueItem[]) => void;
+    preview?: boolean;
+    checksum?: boolean;
 }): React.JSX.Element;
+export {};

package/dist/file-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
@@ -5,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { cx, useAureaStrings } from "./internal.js";
 import { Icon } from "./system.js";
-import { IconButton } from "./actions.js";
+import { Button, IconButton } from "./actions.js";
 // matchesAccept espelha o algoritmo do atributo accept do HTML: extensão (.json),
 // grupo de tipo (image/*) ou MIME exato (application/json). accept vazio = tudo.
 export function matchesAccept(file, accept) {
@@ -15,6 +16,32 @@ export function matchesAccept(file, accept) {
     const name = file.name.toLowerCase(), type = file.type.toLowerCase();
     return tokens.some(t => t.startsWith(".") ? name.endsWith(t) : t.endsWith("/*") ? type.startsWith(t.slice(0, -1)) : type === t);
 }
+// G3: a miniatura é uma URL de objeto, e ela VAZA se ninguém revogar — o navegador
+// segura o blob até a página morrer. Só imagem ganha prévia; para o resto o ícone de
+// documento já diz o que é, e gerar URL para um PDF de 40 MB não mostra nada.
+const ehImagem = (f) => f.type.startsWith("image/");
+// G6: o "quando" do recibo. Fora do render de propósito — dentro dele o HTML mudaria
+// sozinho a cada segundo, que é o defeito que o check 25 pega no catálogo.
+const agora = () => new Date().toISOString();
+// O recibo é colado num chamado, num e-mail ou num bloco de notas — nenhum dos três
+// lê marcação, então o formato é TSV puro. Os separadores vêm por código porque
+// escapes literais neste arquivo já se perderam uma vez em edição por script.
+const TAB = String.fromCharCode(9), NL = String.fromCharCode(10);
+// G4: SHA-256 pelo Web Crypto — nada de dependência, é API de plataforma.
+// LIMITE, e ele é declarado: `crypto.subtle` só existe em contexto seguro (https ou
+// localhost), e o digest precisa do arquivo INTEIRO em memória, porque o Web Crypto
+// não tem hash em fluxo. Por isso é opcional, e não o default.
+async function somaSha256(file) {
+    if (typeof crypto === "undefined" || !crypto.subtle)
+        return undefined;
+    try {
+        const buf = await crypto.subtle.digest("SHA-256", await file.arrayBuffer());
+        return [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, "0")).join("");
+    }
+    catch {
+        return undefined;
+    }
+}
 function formatSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -26,43 +53,81 @@ function formatSize(bytes) {
     }
     return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
 }
-export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className }) {
+export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className, initialQueue, onQueueChange, preview, checksum }) {
     const s = useAureaStrings();
     const autoId = React.useId();
     const inputId = id ?? autoId;
+    // G1: a fila restaurada entra como estado INICIAL, não como prop controlada — e a
+    // palavra "inicial" é literal: um item restaurado não tem `File`, então controlá-lo
+    // de fora seria prometer um round-trip que a plataforma não faz.
     const nextId = React.useRef(0);
-    const [files, setFiles] = React.useState([]);
+    const [files, setFiles] = React.useState(() => (initialQueue ?? []).map(q => ({ ...q, restored: true })));
     const [rejected, setRejected] = React.useState([]);
+    // a soma chega DEPOIS do envio começar (é assíncrona), então a comparação lê a
+    // lista atual por ref em vez da closure do início do upload.
+    const filesRef = React.useRef([]);
+    // E guarda a PROMESSA, não só o valor: um arquivo pequeno com envio rápido termina
+    // antes de o hash sair, e comparar contra `undefined` pularia a conferência em
+    // silêncio — que é pior que não conferir, porque parece que conferiu. Quem achou
+    // isso foi o teste, não a leitura.
+    const somas = React.useRef(new Map());
     const [announce, setAnnounce] = React.useState("");
+    // G5: conflito NÃO é rejeição — o arquivo é válido, só o nome já está na fila.
+    // Fica em espera com a escolha na tela, porque sobrescrever em silêncio é o
+    // comportamento que o item existe para proibir.
+    const [conflitos, setConflitos] = React.useState([]);
     const [dragging, setDragging] = React.useState(false);
     const controllers = React.useRef(new Map());
     // Desmontar aborta tudo em voo — sem isso requisições e closures sobrevivem à
     // tela (auditoria 18/07/2026, MÉDIO 5). Concorrência/agenda é do consumidor: o
     // transporte é dele (UploadFn); o componente dispara um upload() por arquivo aceito.
     React.useEffect(() => { const map = controllers.current; return () => map.forEach(c => c.abort()); }, []);
-    const emit = (next) => { setFiles(next); onFilesChange?.(next.map(f => f.file)); };
-    const patch = (fid, p) => setFiles(prev => prev.map(e => e.id === fid ? { ...e, ...p } : e));
+    // As URLs de objeto vivas moram numa ref para poderem ser revogadas no desmonte —
+    // ler `files` de dentro do cleanup pegaria a lista do primeiro render.
+    const previas = React.useRef(new Set());
+    React.useEffect(() => { const set = previas.current; return () => set.forEach(u => URL.revokeObjectURL(u)); }, []);
+    // G1: toda mudança da fila avisa por fora, em forma serializável. É o que o
+    // consumidor guarda; onde ele guarda — armazenamento local, servidor, nada — é
+    // decisão dele, a mesma linha do estado da grade na URL (PLANO-1.0 F4).
+    const paraFila = (l) => l.map(({ id, name, bytes, status, progress, restored, checksum: soma, finishedAt }) => ({ id, name, bytes, status, progress, ...(soma ? { checksum: soma } : {}), ...(finishedAt ? { finishedAt } : {}), ...(restored ? { restored: true } : {}) }));
+    const emit = (next) => { filesRef.current = next; setFiles(next); onFilesChange?.(next.flatMap(f => f.file ? [f.file] : [])); onQueueChange?.(paraFila(next)); };
+    const patch = (fid, p) => setFiles(prev => { const next = prev.map(e => e.id === fid ? { ...e, ...p } : e); filesRef.current = next; onQueueChange?.(paraFila(next)); return next; });
     const abortId = (fid) => controllers.current.get(fid)?.abort();
     // Cada arquivo envia por conta própria (promessa independente + catch por arquivo):
     // erro ou cancelamento de um não derruba a fila. Cancelar = abort() no controller;
     // no catch, signal.aborted distingue "cancelado" de "falhou" seja qual for o erro
     // que o consumidor lançou. patch é setState funcional → seguro sob closures velhas.
-    const startUpload = (fid, file) => {
+    // G2: pausar HTTP não é pausar — é abortar. Então `pausando` marca a INTENÇÃO antes
+    // do abort, e o catch a lê para separar "pausei" de "cancelei": os dois chegam como
+    // `signal.aborted`, e tratá-los igual perderia o progresso e o direito de retomar.
+    const pausando = React.useRef(new Set());
+    const startUpload = (fid, file, resumeFrom = 0) => {
         if (!upload)
             return;
         const c = new AbortController();
         controllers.current.set(fid, c);
-        patch(fid, { status: "uploading", progress: 0 });
+        patch(fid, { status: "uploading", progress: resumeFrom });
         (async () => {
             try {
-                await upload(file, { signal: c.signal, onProgress: f => patch(fid, { progress: Math.max(0, Math.min(1, f)) }) });
-                patch(fid, { status: "done", progress: 1 });
+                const devolvido = await upload(file, { signal: c.signal, resumeFrom, onProgress: f => patch(fid, { progress: Math.max(0, Math.min(1, f)) }) });
+                // G4: conferir é comparar. Se o servidor devolveu uma soma e ela difere da
+                // nossa, o arquivo que chegou lá NÃO é o que saiu daqui — e isso é erro, não
+                // detalhe. Sem soma devolvida não há o que conferir, e o envio segue válido.
+                const local = await (somas.current.get(fid) ?? Promise.resolve(filesRef.current.find(e => e.id === fid)?.checksum));
+                const doServidor = devolvido && typeof devolvido === "object" ? devolvido.checksum : undefined;
+                if (doServidor && local && doServidor.toLowerCase() !== local.toLowerCase()) {
+                    patch(fid, { status: "error", erro: s.uploadChecksumBad, finishedAt: agora() });
+                    setAnnounce(`${s.uploadChecksumBad}: ${file.name}`);
+                    return;
+                }
+                patch(fid, { status: "done", progress: 1, finishedAt: agora() });
                 setAnnounce(`${s.uploadComplete}: ${file.name}`);
             }
             catch {
-                const st = c.signal.aborted ? "canceled" : "error";
-                patch(fid, { status: st });
-                setAnnounce(`${st === "canceled" ? s.uploadCanceled : s.uploadError}: ${file.name}`);
+                const foiPausa = pausando.current.delete(fid);
+                const st = foiPausa ? "paused" : c.signal.aborted ? "canceled" : "error";
+                patch(fid, { status: st, ...(st === "paused" ? {} : { finishedAt: agora() }) });
+                setAnnounce(`${st === "paused" ? s.uploadPaused : st === "canceled" ? s.uploadCanceled : s.uploadError}: ${file.name}`);
             }
             finally {
                 controllers.current.delete(fid);
@@ -72,14 +137,22 @@ export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, la
     const add = (list) => {
         if (!list || !list.length)
             return;
-        const ok = [], bad = [];
+        const ok = [], bad = [], novosConflitos = [];
         for (const file of Array.from(list)) {
             const reason = !matchesAccept(file, accept) ? s.fileWrongType : (maxSize != null && file.size > maxSize) ? s.fileTooLarge : null;
-            if (reason)
+            if (reason) {
                 bad.push({ file, reason });
-            else
-                ok.push({ id: nextId.current++, file });
+                continue;
+            }
+            const jaTem = multiple ? files.find(e => e.name === file.name) : undefined;
+            if (jaTem) {
+                novosConflitos.push({ file, existente: jaTem.id });
+                continue;
+            }
+            ok.push({ id: `f${nextId.current++}`, file, name: file.name, bytes: file.size, status: "pending", progress: 0 });
         }
+        if (novosConflitos.length)
+            setConflitos(c => [...c, ...novosConflitos]);
         // multiple acumula; single substitui (input nativo já entrega 1 arquivo).
         // só emite se algo passou — drop 100% rejeitado não mexe na lista atual.
         const added = multiple ? ok : ok.slice(-1);
@@ -87,20 +160,80 @@ export function FileInput({ accept, maxSize, multiple, onFilesChange, upload, la
             if (!multiple)
                 files.forEach(f => abortId(f.id)); // single troca o arquivo: aborta o envio anterior
             emit(multiple ? [...files, ...added] : added);
+            if (preview)
+                added.forEach(e => { if (e.file && ehImagem(e.file)) {
+                    const u = URL.createObjectURL(e.file);
+                    previas.current.add(u);
+                    patch(e.id, { preview: u });
+                } });
+            if (checksum)
+                added.forEach(e => { if (e.file)
+                    somas.current.set(e.id, somaSha256(e.file).then(h => { if (h)
+                        patch(e.id, { checksum: h }); return h; })); });
             added.forEach(e => startUpload(e.id, e.file));
         }
         setRejected(bad);
-        setAnnounce([ok.length && `${s.fileAdded}: ${ok.map(f => f.file.name).join(", ")}`, ...bad.map(b => `${b.reason}: ${b.file.name}`)].filter(Boolean).join(". "));
+        setAnnounce([ok.length && `${s.fileAdded}: ${ok.map(f => f.name).join(", ")}`, ...bad.map(b => `${b.reason}: ${b.file.name}`)].filter(Boolean).join(". "));
+    };
+    // G2: pausar é abortar com intenção declarada; retomar é chamar de novo, passando
+    // o quanto já subiu. Por ITEM e no CONJUNTO — e o conjunto é só o laço, porque a
+    // regra tem de ser a mesma nos dois: senão "pausar tudo" e "pausar cada um" acabam
+    // em estados diferentes, que é o defeito clássico deste tipo de barra.
+    const pausar = (fid) => { pausando.current.add(fid); abortId(fid); };
+    const retomar = (e) => { if (e.file)
+        startUpload(e.id, e.file, e.progress); };
+    const pausarTudo = () => files.filter(f => f.status === "uploading").forEach(f => pausar(f.id));
+    const retomarTudo = () => files.filter(f => f.status === "paused").forEach(retomar);
+    const enviando = files.some(f => f.status === "uploading"), pausados = files.some(f => f.status === "paused");
+    // As três saídas do conflito, e nenhuma é silenciosa. "Manter os dois" não renomeia
+    // nada: os ids é que distinguem, e inventar "arquivo (1).txt" seria decidir pelo
+    // consumidor um nome que o servidor dele talvez não aceite.
+    // A lista base vem por ARGUMENTO, não da closure: em "substituir" o item removido
+    // ainda está em `files` quando esta função roda — o React não re-renderizou — e ler
+    // a closure deixava os DOIS na fila. Foi o teste que achou.
+    const aceitarConflito = (file, base = files) => {
+        const e = { id: `f${nextId.current++}`, file, name: file.name, bytes: file.size, status: "pending", progress: 0 };
+        emit([...base, e]);
+        if (preview && ehImagem(file)) {
+            const u = URL.createObjectURL(file);
+            previas.current.add(u);
+            patch(e.id, { preview: u });
+        }
+        if (checksum)
+            somas.current.set(e.id, somaSha256(file).then(h => { if (h)
+                patch(e.id, { checksum: h }); return h; }));
+        startUpload(e.id, file);
+    };
+    const resolverConflito = (i, escolha) => {
+        const c = conflitos[i];
+        setConflitos(l => l.filter((_, n) => n !== i));
+        if (escolha === "skip")
+            return;
+        if (escolha === "replace") {
+            abortId(c.existente);
+            aceitarConflito(c.file, files.filter(x => x.id !== c.existente));
+            return;
+        }
+        aceitarConflito(c.file);
     };
-    const remove = (rid) => { const f = files.find(x => x.id === rid); abortId(rid); emit(files.filter(x => x.id !== rid)); setAnnounce(f ? `${s.fileRemoved}: ${f.file.name}` : ""); };
+    const remove = (rid) => { const f = files.find(x => x.id === rid); if (f?.preview) {
+        URL.revokeObjectURL(f.preview);
+        previas.current.delete(f.preview);
+    } abortId(rid); emit(files.filter(x => x.id !== rid)); setAnnounce(f ? `${s.fileRemoved}: ${f.name}` : ""); };
+    // G6: "terminou" é não haver mais nada em voo nem esperando — pausado conta como em
+    // voo, porque a pessoa ainda vai retomar.
+    const emVoo = files.some(f => f.status === "uploading" || f.status === "paused" || f.status === "pending");
+    const recibo = files.filter(f => f.status === "done" || f.status === "error" || f.status === "canceled");
+    const reciboTexto = recibo.map(r => [r.name, r.status, r.finishedAt ?? ""].join(TAB)).join(NL);
     return _jsxs("div", { className: cx("field", className), children: [label && _jsx("label", { className: "label", htmlFor: inputId, children: label }), _jsxs("label", { className: "dropzone", "data-dragging": dragging || undefined, onDragOver: e => { e.preventDefault(); setDragging(true); }, onDragLeave: e => { if (!e.currentTarget.contains(e.relatedTarget))
-                    setDragging(false); }, onDrop: e => { e.preventDefault(); setDragging(false); add(e.dataTransfer.files); }, children: [_jsx("input", { id: inputId, type: "file", className: "sr-only", accept: accept, multiple: multiple, onChange: e => { add(e.target.files); e.target.value = ""; } }), _jsx(Icon, { name: "cloud--upload", size: "xl", className: "dropzone-icon" }), _jsx("strong", { children: s.fileDropPrompt }), hint && _jsx("span", { className: "dropzone-hint", children: hint })] }), files.length > 0 && _jsx("ul", { className: "file-list", children: files.map(({ id, file, status, progress = 0 }) => {
+                    setDragging(false); }, onDrop: e => { e.preventDefault(); setDragging(false); add(e.dataTransfer.files); }, children: [_jsx("input", { id: inputId, type: "file", className: "sr-only", accept: accept, multiple: multiple, onChange: e => { add(e.target.files); e.target.value = ""; } }), _jsx(Icon, { name: "cloud--upload", size: "xl", className: "dropzone-icon" }), _jsx("strong", { children: s.fileDropPrompt }), hint && _jsx("span", { className: "dropzone-hint", children: hint })] }), upload && (enviando || pausados) && _jsx("div", { className: "file-queue-actions", children: enviando ? _jsx(Button, { variant: "secondary", size: "sm", leadingIcon: "pause", onClick: pausarTudo, children: s.uploadPause })
+                    : _jsx(Button, { variant: "secondary", size: "sm", leadingIcon: "play", onClick: retomarTudo, children: s.uploadResume }) }), files.length > 0 && _jsx("ul", { className: "file-list", children: files.map(({ id, file, name, bytes, status, progress = 0, restored, checksum: soma, preview: previa, erro }) => {
                     // A barra reusa .progress + .file-progress (largura fixa em classe); só o
                     // preenchimento (width %) fica inline, por ser data-driven. Erro reusa
                     // .field-error. Como .file-progress não é usada nos docs, adicioná-la ao core
                     // não muda pixel de screenshot nenhum (auditoria 18/07, M14: CSS não usado
                     // pelos docs não altera baseline — a justificativa antiga estava invertida).
                     const pct = Math.round(progress * 100);
-                    return _jsxs("li", { className: "file-item", children: [_jsx(Icon, { name: "document" }), _jsx("span", { className: "file-name", children: file.name }), status === "uploading" ? _jsxs(_Fragment, { children: [_jsx("div", { className: "progress file-progress", role: "progressbar", "aria-label": `${s.uploadSending} ${file.name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: _jsx("span", { style: { width: `${pct}%` } }) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.uploadCancel} ${file.name}`, onClick: () => abortId(id) })] }) : (status === "error" || status === "canceled") ? _jsxs(_Fragment, { children: [_jsx("span", { className: "field-error", children: status === "error" ? s.uploadError : s.uploadCanceled }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "restart", label: `${s.uploadRetry} ${file.name}`, onClick: () => startUpload(id, file) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${file.name}`, onClick: () => remove(id) })] }) : _jsxs(_Fragment, { children: [status === "done" && _jsx(Icon, { name: "checkmark--filled" }), _jsx("span", { className: "file-size", children: formatSize(file.size) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${file.name}`, onClick: () => remove(id) })] })] }, id);
-                }) }), rejected.map((r, n) => _jsxs("span", { className: "field-error", children: [r.reason, ": ", r.file.name] }, n)), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
+                    return _jsxs("li", { className: "file-item", children: [previa ? _jsx("img", { className: "file-thumb", src: previa, alt: "" }) : _jsx(Icon, { name: "document" }), _jsx("span", { className: "file-name", children: name }), status === "uploading" ? _jsxs(_Fragment, { children: [_jsx("div", { className: "progress file-progress", role: "progressbar", "aria-label": `${s.uploadSending} ${name}`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: _jsx("span", { style: { width: `${pct}%` } }) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "pause", label: `${s.uploadPause} ${name}`, onClick: () => pausar(id) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.uploadCancel} ${name}`, onClick: () => abortId(id) })] }) : status === "paused" ? _jsxs(_Fragment, { children: [_jsxs("span", { className: "file-size", children: [s.uploadPaused, " \u00B7 ", Math.round(progress * 100), "%"] }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "play", label: `${s.uploadResume} ${name}`, onClick: () => retomar({ id, file, name, bytes, status, progress, restored }) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${name}`, onClick: () => remove(id) })] }) : (status === "error" || status === "canceled") ? _jsxs(_Fragment, { children: [_jsx("span", { className: "field-error", children: erro ?? (status === "error" ? s.uploadError : s.uploadCanceled) }), file && _jsx(IconButton, { variant: "ghost", size: "sm", icon: "restart", label: `${s.uploadRetry} ${name}`, onClick: () => startUpload(id, file) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${name}`, onClick: () => remove(id) })] }) : _jsxs(_Fragment, { children: [status === "done" && _jsx(Icon, { name: "checkmark--filled" }), _jsx("span", { className: "file-size", children: formatSize(bytes) }), soma && _jsx("span", { className: "file-checksum", title: `${s.uploadChecksum}: ${soma}`, children: soma.slice(0, 8) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: `${s.fileRemove} ${name}`, onClick: () => remove(id) })] })] }, id);
+                }) }), conflitos.map((c, i) => _jsxs("div", { className: "file-conflict", role: "alert", children: [_jsxs("span", { children: [s.fileConflict, ": ", _jsx("strong", { children: c.file.name })] }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => resolverConflito(i, "replace"), children: s.fileReplace }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => resolverConflito(i, "both"), children: s.fileKeepBoth }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => resolverConflito(i, "skip"), children: s.fileSkip })] }, `c${i}`)), recibo.length > 0 && !emVoo && _jsxs("div", { className: "file-receipt", children: [_jsxs("div", { className: "file-receipt-head", children: [_jsx("strong", { children: s.uploadReceipt }), _jsx(Button, { size: "sm", variant: "ghost", leadingIcon: "copy", onClick: () => void navigator.clipboard?.writeText(reciboTexto), children: s.uploadReceiptCopy })] }), _jsx("ul", { children: recibo.map(r => _jsxs("li", { children: [r.name, " \u00B7 ", r.status === "done" ? s.uploadComplete : r.status === "canceled" ? s.uploadCanceled : s.uploadError, r.finishedAt ? ` · ${r.finishedAt}` : ""] }, r.id)) })] }), rejected.map((r, n) => _jsxs("span", { className: "field-error", children: [r.reason, ": ", r.file.name] }, n)), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
 }

package/dist/graph.d.ts

@@ -0,0 +1,33 @@
+import React, { type ReactNode } from "react";
+export interface GraphNodeItem {
+    id: string;
+    label: string;
+    kind?: string;
+    detail?: ReactNode;
+    x?: number;
+    y?: number;
+}
+export interface GraphEdgeItem {
+    from: string;
+    to: string;
+    label?: string;
+    animated?: boolean;
+}
+export declare function DependencyGraph({ nodes, edges, label, selectedId, onSelect, connectable, onConnect, onNodeMove, height, className, ...props }: {
+    nodes: GraphNodeItem[];
+    edges: GraphEdgeItem[];
+    label?: string;
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    connectable?: boolean;
+    onConnect?: (edge: {
+        from: string;
+        to: string;
+    }) => void;
+    onNodeMove?: (id: string, pos: {
+        x: number;
+        y: number;
+    }) => void;
+    height?: string;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">): React.JSX.Element;

package/dist/graph.js

@@ -0,0 +1,178 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DependencyGraph — PLANO-1.0, Parte H, item H14 (09/08/2026).
+//
+// SUBPATH PRÓPRIO (`@aurea-uds/react/graph`), como ./chart, ./data-grid, ./calendar e ./qrcode:
+// é o único componente que precisa do `@xyflow/react`, que entra como peer OPCIONAL. Quem
+// instala a biblioteca pelo Button não paga por ele — e o check 19 reprova se este import
+// aparecer em qualquer outro módulo.
+//
+// A diretiva NÃO vem de um hook nosso: vem do motor, que usa `zustand` e não publica
+// `"use client"` no dist — o mesmo caso do `recharts`, do `@tanstack/react-table` e do
+// `react-day-picker`, medido em 06/08/2026 e cobrado pelo check 26.
+//
+// ── O MOTOR, e por que este ──────────────────────────────────────────────────────────────
+// Autorizado pelo Victor em 09/08/2026, e a autorização foi RECONFIRMADA por medição depois de
+// eu mesmo levantar dúvida. A dúvida era boa e a resposta desfez: o `trace-graph-view/` do
+// langfuse — a referência mais próxima do domínio — desenha `<div>` posicionados por ELK e NÃO
+// usa React Flow, e o React Flow não faz layout nenhum, então adotá-lo não entrega um grafo
+// pronto. O que decidiu foi o ALVO, que o Victor nomeou: uma aplicação tipo n8n. Aí a conta
+// vira outra, e ela é medida:
+//   • a `activepieces-main`, que já está em `Referencia/` e é concorrente direta do n8n, usa
+//     `@xyflow/react` 12.3.5 — está no `package.json` dela;
+//   • o próprio n8n usa **Vue Flow**, o irmão Vue do React Flow, da mesma equipe xyflow.
+// Grafo de LEITURA não precisa de motor. EDITOR precisa, e o padrão de mercado para este
+// editor é o xyflow. Registro completo no `REFERENCES.md`.
+//
+// Segurança e saúde, conferidas em 09/08/2026 antes de instalar: `@xyflow/react` 12.11.2,
+// **MIT**, publicado há ~1 mês, mantido em tempo integral; **zero** avisos no GitHub Advisory
+// Database para `xyflow`. Traz `@xyflow/system`, `classcat` e `zustand@4` — e só para quem
+// instalar o peer.
+//
+// ── A PELE, e a linha que não se cruza ───────────────────────────────────────────────────
+// O motor publica DUAS folhas, e só uma pode entrar:
+//   • `dist/style.css` é a IDENTIDADE deles — `--xy-node-border-radius-default: 3px`, `#1a192b`,
+//     sombras, nó branco. É exatamente o que o `BUILDING.md` proíbe extrair. **Não entra.**
+//   • `dist/base.css` é ESTRUTURA — posição, `z-index`, `transform-origin`, `pointer-events` —
+//     e todo valor visível está atrás de `var(--xy-algo, --xy-algo-default)`. Sobrescritível
+//     por token, no idioma que o `--qr-size` e o `--datagrid-max-h` já usam.
+// 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, Handle, Position, applyNodeChanges } from "@xyflow/react";
+import { cx, useAureaStrings } from "./internal.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.
+//
+// Camadas por caminho mais longo: a profundidade de um nó é a maior profundidade entre os que
+// apontam para ele, mais um. É o esqueleto do Sugiyama sem a parte cara.
+//
+// ponytail: sem minimização de cruzamento de arestas — grafo denso vai desenhar linhas se
+// cruzando, e isso é aceitável para dependência (dezenas de nós), não para mil. O caminho de
+// subida é o `elkjs`, que é o que o langfuse usa, e ele é DEPENDÊNCIA NOVA: entra com
+// autorização, não de contrabando.
+const LARGURA = 180, ALTURA = 52, VAO_X = 90, VAO_Y = 24;
+function dispor(nodes, edges) {
+    const entram = new Map();
+    for (const n of nodes)
+        entram.set(n.id, []);
+    for (const e of edges)
+        if (entram.has(e.to) && entram.has(e.from))
+            entram.get(e.to).push(e.from);
+    const profundidade = new Map();
+    // `visitando` corta CICLO. Um grafo de dependências com ciclo é um defeito do dado, não
+    // deste componente — mas travar o navegador por causa dele seria defeito nosso.
+    const visitando = new Set();
+    const calcular = (id) => {
+        const pronto = profundidade.get(id);
+        if (pronto != null)
+            return pronto;
+        if (visitando.has(id))
+            return 0;
+        visitando.add(id);
+        const pais = entram.get(id) ?? [];
+        const d = pais.length ? Math.max(...pais.map(calcular)) + 1 : 0;
+        visitando.delete(id);
+        profundidade.set(id, d);
+        return d;
+    };
+    for (const n of nodes)
+        calcular(n.id);
+    const ocupacao = new Map();
+    const posicoes = new Map();
+    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 + VAO_X), y: linha * (ALTURA + 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
+    // fora da caixa. É a diferença entre a prévia do catálogo existir e não existir.
+    //
+    // Os campos se chamam `larg`/`alt` e não `width`/`height` por dois motivos: é o vocabulário
+    // interno deste arquivo (`posicoes`, `ocupacao`, `profundidade`), e o check 23 lê o fonte
+    // INTEIRO — ele existe para impedir prop de dimensão em número, e um par de pixels de layout
+    // 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) * VAO_X, alt: linhas * ALTURA + (linhas - 1) * VAO_Y } };
+}
+// O nó é NOSSO, e é o ponto em que este componente deixa de ser "React Flow com outra cor".
+// O `GraphNode.tsx` do langfuse declara o motivo em uma linha — *"Real-HTML accessibility (the
+// win over the old canvas renderer)"* —: 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 (`AGENT` roxo, `TOOL` laranja,
+// `GENERATION` 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.
+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: [_jsx(Handle, { type: "target", position: Position.Left, isConnectable: !!d.conectavel, 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 }), _jsx(Handle, { type: "source", position: Position.Right, isConnectable: !!d.conectavel, className: "graph-handle" })] });
+}
+const TIPOS = { aurea: NoAurea };
+// 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 }) {
+    const s = useAureaStrings();
+    // 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 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 },
+        draggable: !!onNodeMove,
+        // ── 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
+        // e um nó de três linhas deixa de ser aproximado. E sem `handles` declarados a aresta não
+        // sabe de onde sai nem onde chega, então ela some.
+        //
+        // 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]);
+    const arestasDoMotor = React.useMemo(() => edges.map(e => ({
+        id: `${e.from}->${e.to}`, source: e.from, target: e.to, label: e.label, animated: e.animated,
+    })), [edges]);
+    // ── 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
+    // a medida dele de volta na lista, e sem o retorno não tem onde gravar. Medido em
+    // 09/08/2026 num navegador de verdade — os cinco nós saíam `visibility: hidden`, com ZERO
+    // aresta e o `fitView` parado em `scale(1)`. Nenhum teste de jsdom pega isso, porque lá
+    // não há layout para medir.
+    //
+    // A lista interna preserva `measured` quando os dados de fora mudam: sem isso, trocar a
+    // seleção jogaria a medida fora e o grafo piscaria a cada clique.
+    const [nosVivos, setNosVivos] = React.useState(nosDoMotor);
+    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) }));
+        });
+    }, [nosDoMotor]);
+    const aoMudarNos = React.useCallback((mudancas) => {
+        setNosVivos(anteriores => applyNodeChanges(mudancas, anteriores));
+    }, []);
+    // `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, fitView: true, proOptions: { hideAttribution: false }, nodesDraggable: !!onNodeMove, nodesConnectable: !!connectable, elementsSelectable: !!onSelect, 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, {}) }) }) });
+}

package/dist/identity.d.ts

@@ -1,8 +1,17 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
+export type AvatarSize = "sm" | "md" | "lg";
 export declare function Avatar({ src, alt, fallback, size, className }: {
     src?: string;
     alt?: string;
     fallback?: ReactNode;
-    size?: number;
+    size?: AvatarSize;
     className?: string;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
+export declare function AvatarGroup({ children, max, total, label, size, className }: {
+    children: ReactNode;
+    max?: number;
+    total?: number;
+    label?: string;
+    size?: AvatarSize;
+    className?: string;
+}): React.JSX.Element;

package/dist/identity.js

@@ -1,3 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import React from "react";
 import { cx } from "./internal.js";
-export function Avatar({ src, alt = "", fallback, size = 40, className }) { return _jsx("span", { className: cx("avatar", className), style: { width: size, height: size }, children: src ? _jsx("img", { src: src, alt: alt }) : fallback }); }
+export function Avatar({ src, alt = "", fallback, size = "md", className }) {
+    const [falhou, setFalhou] = React.useState(false);
+    React.useEffect(() => { setFalhou(false); }, [src]);
+    return _jsx("span", { className: cx("avatar", size !== "md" && `avatar-${size}`, className), children: src && !falhou ? _jsx("img", { src: src, alt: alt, onError: () => setFalhou(true) }) : fallback });
+}
+// AvatarGroup: a pilha sobreposta com o "+N" no fim. A sobreposição já existia no core desde
+// sempre (`.avatar-group .avatar`), e o container nunca teve regra — a peça filha ficou, a mãe
+// não, exatamente como no Stepper.
+// `max` corta a lista e o excedente vira UM avatar de contagem, que é onde as referências
+// convergem. Fora de propósito: o `renderSurplus` de uma delas (callback para desenhar o "+N"),
+// que é configuração para um problema que ninguém teve ainda.
+// `role="group"` + nome: uma fila de retratos sem nome não diz de quem é.
+export function AvatarGroup({ children, max, total, label, size = "md", className }) {
+    const itens = React.Children.toArray(children);
+    const mostra = max ? itens.slice(0, max) : itens;
+    const resto = (total ?? itens.length) - mostra.length;
+    return _jsxs("div", { role: "group", "aria-label": label, className: cx("avatar-group", className), children: [mostra, resto > 0 && _jsxs("span", { className: cx("avatar", "avatar-count", size !== "md" && `avatar-${size}`), "aria-hidden": "true", children: ["+", resto] })] });
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export { cx, defaultStrings, ptBR, useAureaStrings, defaultSpriteUrl, useSpriteUrl, type AureaStrings } from "./internal.js";
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, universalStates, stateSeverity, type AureaStrings, type GridState, type UniversalState } from "./pure.js";
+export { useAureaStrings, useSpriteUrl } from "./internal.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";
@@ -12,3 +13,4 @@ export * from "./overlays.js";
 export * from "./media.js";
 export * from "./communication.js";
 export * from "./code.js";
+export * from "./agents.js";

package/dist/index.js

@@ -14,7 +14,19 @@
 //   QRCode      → "@aurea-uds/react/qrcode"       (qr)
 // Se estivessem neste barril, importar um Button carregaria os três — e a dependência opcional
 // que não estivesse instalada quebraria a importação. O peso é real, então a fronteira é real.
-export { cx, defaultStrings, ptBR, useAureaStrings, defaultSpriteUrl, useSpriteUrl } from "./internal.js";
+// SEM `"use client"`, e é o ponto da Parte A: este barril é um módulo de SERVIDOR. Reexportar
+// componente de um módulo com a diretiva é o caminho suportado — quem importa daqui de um
+// componente de servidor recebe uma referência de cliente e a renderiza normalmente.
+//
+// `cx` e os dicionários vêm do `pure.js`, não do `internal.js`: os dois exportam os mesmos
+// nomes, mas o `internal` tem a diretiva, e dali `cx` viraria referência de cliente — chamável
+// só no navegador. Um helper de classe tem de funcionar nos dois lados.
+// `gridStateToParams`/`gridStateFromParams` saem por AQUI, e não pelo subpath do
+// DataGrid, de propósito: quem lê a URL num framework de RSC é o SERVIDOR, e o
+// subpath tem a diretiva. Vindo daqui — via `pure.js`, que não tem — a função é
+// chamável dos dois lados. É a mesma razão do `cx`, uma camada acima.
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStateFromParams, universalStates, stateSeverity } from "./pure.js";
+export { useAureaStrings, useSpriteUrl } from "./internal.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";
@@ -28,3 +40,5 @@ export * from "./overlays.js";
 export * from "./media.js";
 export * from "./communication.js";
 export * from "./code.js";
+// A camada operacional (Parte H). Sem dependência nova, então entra no barril.
+export * from "./agents.js";