@thecodecodex/design-system 0.1.2 → 0.2.1

package/README.md

@@ -19,10 +19,26 @@ No CSS principal do app, depois do Tailwind:
 @source "../node_modules/@thecodecodex/design-system/dist";
 ```
 
-`styles.css` = `tokens.css` + `themes.css` + `base.css`. Para não aplicar os estilos base (títulos, foco, tabelas, barras de rolagem), importe só `tokens.css` e `themes.css`.
+`styles.css` = `tokens.css` + `themes.css` + `base.css` + `content.css`.
+
+- `base.css`: barras de rolagem, foco visível e seleção. Serve a sites e apps.
+- `content.css`: títulos com escala e margens de artigo e bordas em toda tabela (conteúdo editorial).
+
+Apps e painéis costumam dispensar o `content.css`:
+
+```css
+@import "tailwindcss";
+@import "@thecodecodex/design-system/tokens.css";
+@import "@thecodecodex/design-system/themes.css";
+@import "@thecodecodex/design-system/base.css";
+```
 
 Utilidades geradas: `bg-surface`, `bg-inset`, `bg-ground`, `text-text-primary`, `text-text-secondary`, `bg-btn-primary`, `text-on-accent`, `border-border`, `border-soft`, `text-contrast`, `bg-chart-1`, `bg-diff-add`, `bg-cat-*` etc.
 
+### Status
+
+`ok`, `warn`, `danger` e `info` (ligado/desligado, OK/atenção/erro), com valores próprios em cada tema e contraste ≥ 4.5:1 sobre a superfície: `text-ok`, `border-danger`, `bg-warn` (pontos e marcadores). Para avisos há o fundo suave `bg-ok-soft`, `bg-warn-soft`, `bg-danger-soft`, `bg-info-soft`. Use os tons como texto, contorno e ponto, nunca como único sinal: `StatusTag`, `StatusMark` e `StatusDot` mudam também a forma.
+
 ### Fontes
 
 Os tokens usam `--font-roboto` (display), `--font-poppins` (corpo) e `--font-jetbrains-mono` (mono). Cada app carrega as fontes e define essas variáveis (ex.: `next/font` com `variable: "--font-roboto"`, ou Astro Fonts).
@@ -56,7 +72,42 @@ No cliente: `watchTheme()` mantém o tema certo (virada de horário, mudança no
 import { Badge, NumberField, Segmented, ToolShell, ParamGroup } from "@thecodecodex/design-system"
 ```
 
-`Badge`, `Checkbox`, `DataTable`, `KeyValue`, `NumberField`, `OutputList`, `ParamGroup`, `Presets`, `RangeField`, `Segmented`, `Stepper`, `TextField`, `ToolShell`, as classes `panel`/`panelHeader` e os hooks `useCopy` e `useHydrated`.
+Formulários e ferramentas: `Badge`, `Checkbox`, `DataTable`, `KeyValue`, `NumberField`, `OutputList`, `ParamGroup`, `Presets`, `RangeField`, `Segmented`, `Stepper`, `TextField`, `ToolShell`, as classes `panel`/`panelHeader` e os hooks `useCopy` e `useHydrated`.
+
+Apps e painéis:
+
+| Componente | Para quê |
+|---|---|
+| `AppShell` (+ `navLinkClass`) | casca de app: topo com marca e ações, menu lateral recolhível com grupos numerados, rodapé; `renderLink` recebe o `Link` do roteador |
+| `PageHeader` | título da tela (Roboto 900, caixa alta), descrição e ações |
+| `Panel` / `panelRows` | painel com faixa de título, contagem e ações; `panelRows` divide linhas de lista |
+| `Button` / `buttonClass()` | variantes `ink` (principal), `outline`, `ghost` e `danger`, tamanhos `md` (44px) e `sm`; `buttonClass` serve para `<a>`/`<Link>` |
+| `CopyButton` | "Copiar" → "Copiado!" |
+| `Popover` / `MenuItem` | botão que abre painel ancorado (menu, seletor); fecha com Esc e clique fora |
+| `Tabs` | abas `buttons` (visões da tela) ou `underline` (arquivos, seções) |
+| `Segmented` | escolha única; opções aceitam `description` (cartões) e `tone: "danger"` (ex.: produção); `hideLabel`, `size`, `disabled` |
+| `ChipToggles` | escolha múltipla em chips |
+| `SearchField` | busca com ícone e rótulo acessível |
+| `StatusTag`, `StatusMark`, `StatusDot` | selo, marcador de forma e ponto ligado/desligado nos tons de status |
+| `Notice` | aviso com fundo suave, borda e ícone do tom |
+| `Toast` | aviso flutuante (quem usa decide quando some) |
+| `Stat` | número-resumo com rótulo, dica, tom e destaque |
+| `Meter` | barra 0–100 com marca de meta |
+| `Disclosure` | bloco recolhível (saída de comando, manutenção), neutro ou em tom ok/danger |
+| `Dialog` | modal nativo (`<dialog>` + `showModal`): foco preso, Esc fecha, título, rodapé de botões |
+| `ConfirmDialog` | confirmação com Cancelar e a ação (vermelha quando destrutiva) |
+| `LogView` | console de log: cabeçalho, barra com filtros, copiar/baixar, linhas destacadas por tom, rola até o fim |
+| `DataGrid` | resultado de consulta: filtro, paginação, CSV, JSON, NULL e booleanos destacados |
+| `Markdown` | markdown enxuto renderizado como elementos React (sem HTML cru) |
+| `ThemeMenu` | botão "Tema" com Auto, Sistema e os 5 temas (chama `watchTheme` uma vez por aba) |
+
+```tsx
+<PageHeader title="Dev Launcher" actions={<Button variant="ink">Subir todos</Button>} />
+<Panel title="Repositórios" count={2} bodyClass="px-6">
+  <div className={panelRows}>…</div>
+</Panel>
+<Dialog open={aberto} onClose={fechar} title="Excluir?" footer={<Button variant="danger">Excluir</Button>}>…</Dialog>
+```
 
 Textos fixos vêm em pt-BR; passe `labels` para traduzir (ex.: `<OutputList labels={{ copy: "Copy", copied: "Copied!" }} … />`).
 

package/dist/components/AppShell.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { type AppShellLabels } from "./labels.js";
+export interface NavItem {
+    href: string;
+    label: string;
+    icon?: ReactNode;
+}
+export interface NavGroup {
+    title: string;
+    items: NavItem[];
+}
+export interface LinkProps {
+    href: string;
+    className: string;
+    title?: string;
+    "aria-current"?: "page";
+    children: ReactNode;
+}
+export declare function navLinkClass(active: boolean, collapsed?: boolean): string;
+export default function AppShell({ brand, headerActions, nav, navTop, currentPath, renderLink, footer, numbered, defaultCollapsed, labels, children }: {
+    brand: ReactNode;
+    headerActions?: ReactNode;
+    nav: NavGroup[];
+    navTop?: (collapsed: boolean) => ReactNode;
+    currentPath: string;
+    renderLink?: (props: LinkProps) => ReactNode;
+    footer?: ReactNode;
+    numbered?: boolean;
+    defaultCollapsed?: boolean;
+    labels?: Partial<AppShellLabels>;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/AppShell.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Icon } from "./icons.js";
+import { appShellLabels } from "./labels.js";
+// <a> por padrão; apps com roteador passam o próprio Link (ex.: next/link)
+const anchor = (props) => _jsx("a", { ...props });
+// Classes de um link do menu lateral: use em itens extras (navTop) para casar com o resto
+export function navLinkClass(active, collapsed = false) {
+    return `flex min-h-10 items-center gap-2.5 rounded-[10px] px-3 text-sm font-semibold transition-colors ${active ? "bg-text-primary text-bg-primary hover:text-bg-primary" : "text-text-primary hover:bg-inset hover:text-text-primary"} ${collapsed ? "justify-center px-0" : ""}`;
+}
+// Casca de app: topo (marca + ações), menu lateral recolhível com grupos numerados, conteúdo e rodapé
+export default function AppShell({ brand, headerActions, nav, navTop, currentPath, renderLink = anchor, footer, numbered = true, defaultCollapsed = false, labels, children }) {
+    const text = { ...appShellLabels, ...labels };
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    return (_jsxs("div", { className: "flex h-screen w-full flex-col bg-ground text-text-primary", children: [_jsxs("header", { className: "flex w-full shrink-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b-2 border-border bg-surface px-4 py-2.5 md:px-6", children: [_jsx("div", { className: "min-w-0", children: brand }), headerActions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: headerActions })] }), _jsxs("div", { className: "flex flex-1 overflow-hidden", children: [_jsxs("aside", { className: `flex h-full shrink-0 flex-col border-r-[1.5px] border-soft bg-surface transition-[width] duration-300 ${collapsed ? "w-[68px]" : "w-64"}`, children: [_jsxs("nav", { "aria-label": text.nav, className: "flex-1 space-y-5 overflow-y-auto px-3 py-4", children: [navTop && _jsx("div", { className: "space-y-2", children: navTop(collapsed) }), nav.map((group, g) => (_jsxs("div", { className: "space-y-0.5", children: [collapsed
+                                                ? _jsx("div", { className: "my-2 h-[1.5px] bg-soft" })
+                                                : (_jsxs("div", { className: "px-3 pb-1.5 font-mono text-[13px] font-semibold lowercase text-btn-primary", children: [numbered && `${String(g + 1).padStart(2, "0")} / `, group.title] })), group.items.map((item) => {
+                                                const active = currentPath === item.href;
+                                                return (_jsx("div", { children: renderLink({
+                                                        href: item.href,
+                                                        title: collapsed ? item.label : undefined,
+                                                        "aria-current": active ? "page" : undefined,
+                                                        className: navLinkClass(active, collapsed),
+                                                        children: (_jsxs(_Fragment, { children: [item.icon, !collapsed && _jsx("span", { className: "truncate", children: item.label })] })),
+                                                    }) }, item.href));
+                                            })] }, group.title)))] }), _jsx("div", { className: "border-t-[1.5px] border-soft p-3", children: _jsxs("button", { type: "button", onClick: () => setCollapsed(!collapsed), "aria-label": collapsed ? text.expand : text.collapse, className: "flex min-h-10 w-full items-center gap-2 rounded-[10px] px-3 text-[13px] font-semibold text-text-secondary transition-colors hover:bg-inset hover:text-text-primary", children: [_jsx(Icon, { name: collapsed ? "arrowRight" : "arrowLeft", size: 14, className: collapsed ? "mx-auto" : "" }), !collapsed && _jsx("span", { children: text.collapse })] }) })] }), _jsx("main", { className: "w-full flex-1 overflow-y-auto bg-ground px-4 py-6 md:px-10 md:py-9", children: _jsx("div", { className: "flex min-h-full w-full flex-col", children: children }) })] }), footer && (_jsx("footer", { className: "flex w-full shrink-0 flex-wrap items-center justify-between gap-x-6 gap-y-1 border-t-[1.5px] border-soft bg-surface px-4 py-2 font-mono text-xs text-text-secondary md:px-6", children: footer }))] }));
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes } from "react";
+export type ButtonVariant = "ink" | "outline" | "ghost" | "danger";
+export type ButtonSize = "md" | "sm";
+export declare function buttonClass(variant?: ButtonVariant, size?: ButtonSize, extra?: string): string;
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+export default function Button({ variant, size, className, type, ...props }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Button.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const BASE = "inline-flex items-center justify-center gap-2 rounded-[10px] font-bold whitespace-nowrap transition-colors disabled:opacity-50 disabled:pointer-events-none";
+const VARIANTS = {
+    ink: "border-2 border-text-primary bg-text-primary text-bg-primary hover:bg-bg-tertiary-hover hover:border-bg-tertiary-hover",
+    outline: "border-2 border-border bg-surface text-text-primary hover:border-contrast",
+    ghost: "border-2 border-transparent text-text-primary hover:bg-inset",
+    danger: "border-2 border-danger bg-surface text-danger hover:bg-danger hover:text-bg-primary",
+};
+// alvo de toque ≥ 44px no md
+const SIZES = {
+    md: "min-h-11 px-4 text-sm",
+    sm: "min-h-9 px-3 text-[13px]",
+};
+// Classes do botão: use também em <a>/<Link> com cara de botão
+export function buttonClass(variant = "outline", size = "md", extra = "") {
+    return `${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${extra}`.trim();
+}
+export default function Button({ variant = "outline", size = "md", className = "", type = "button", ...props }) {
+    return _jsx("button", { type: type, className: buttonClass(variant, size, className), ...props });
+}

package/dist/components/ChipToggles.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export default function ChipToggles<T extends string>({ label, options, values, onValues, hideLabel }: {
+    label: ReactNode;
+    options: {
+        value: T;
+        label: ReactNode;
+    }[];
+    values: T[];
+    onValues: (values: NoInfer<T>[]) => void;
+    hideLabel?: boolean;
+}): import("react").JSX.Element;

package/dist/components/ChipToggles.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Escolha múltipla em chips (checkbox com cara de pílula)
+export default function ChipToggles({ label, options, values, onValues, hideLabel = false }) {
+    return (_jsxs("fieldset", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("legend", { className: hideLabel ? "sr-only" : "mb-1.5 text-sm font-semibold", children: label }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((option) => {
+                    const on = values.includes(option.value);
+                    return (_jsxs("label", { className: `inline-flex min-h-10 cursor-pointer items-center rounded-full border-2 border-border px-3.5 text-[13px] font-bold has-[:focus-visible]:outline-3 has-[:focus-visible]:outline-contrast ${on ? "bg-text-primary text-bg-primary" : "bg-surface hover:border-contrast"}`, children: [_jsx("input", { type: "checkbox", className: "sr-only", checked: on, onChange: () => onValues(on ? values.filter((v) => v !== option.value) : [...values, option.value]) }), option.label] }, option.value));
+                }) })] }));
+}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ConfirmDialogLabels } from "./labels.js";
+export default function ConfirmDialog({ open, title, children, confirmLabel, onConfirm, onClose, danger, busy, icon, labels }: {
+    open: boolean;
+    title: ReactNode;
+    children: ReactNode;
+    confirmLabel: ReactNode;
+    onConfirm: () => void;
+    onClose: () => void;
+    danger?: boolean;
+    busy?: boolean;
+    icon?: ReactNode;
+    labels?: Partial<ConfirmDialogLabels>;
+}): import("react").JSX.Element;

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "./Button.js";
+import Dialog from "./Dialog.js";
+import { confirmDialogLabels } from "./labels.js";
+// Confirmação de ação: texto, Cancelar e o botão da ação (vermelho quando destrutiva)
+export default function ConfirmDialog({ open, title, children, confirmLabel, onConfirm, onClose, danger = false, busy = false, icon, labels }) {
+    const text = { ...confirmDialogLabels, ...labels };
+    return (_jsx(Dialog, { open: open, onClose: onClose, locked: busy, width: "max-w-md", icon: icon, title: title, footer: _jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", onClick: onClose, disabled: busy, children: text.cancel }), _jsx(Button, { size: "sm", variant: danger ? "danger" : "ink", onClick: onConfirm, disabled: busy, children: confirmLabel })] }), children: _jsx("div", { className: "text-sm leading-relaxed text-text-secondary", children: children }) }));
+}

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonSize, type ButtonVariant } from "./Button.js";
+import { type CopyLabels } from "./labels.js";
+export default function CopyButton({ value, variant, size, labels, className, disabled }: {
+    value: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    labels?: Partial<CopyLabels>;
+    className?: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;

package/dist/components/CopyButton.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buttonClass } from "./Button.js";
+import { Icon } from "./icons.js";
+import { copyLabels } from "./labels.js";
+import { useCopy } from "./useCopy.js";
+// Botão "Copiar" que vira "Copiado!" por alguns segundos
+export default function CopyButton({ value, variant = "outline", size = "sm", labels, className = "", disabled = false }) {
+    const text = { ...copyLabels, ...labels };
+    const { copied, copy } = useCopy(2000);
+    return (_jsxs("button", { type: "button", className: buttonClass(variant, size, className), disabled: disabled, onClick: () => copy(value, "v"), "aria-live": "polite", children: [_jsx(Icon, { name: copied ? "check" : "copy", size: 14 }), copied ? text.copied : text.copy] }));
+}

package/dist/components/DataGrid.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type DataGridLabels } from "./labels.js";
+type Cell = string | number | boolean | null | undefined | object;
+interface Props {
+    columns: string[];
+    rows: Cell[][];
+    meta?: ReactNode;
+    truncated?: boolean;
+    onClose?: () => void;
+    fileName?: string;
+    pageSize?: number;
+    labels?: Partial<DataGridLabels>;
+}
+export default function DataGrid({ columns, rows, meta, truncated, onClose, fileName, pageSize, labels }: Props): import("react").JSX.Element;
+export {};

package/dist/components/DataGrid.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Icon } from "./icons.js";
+import { dataGridLabels } from "./labels.js";
+import SearchField from "./SearchField.js";
+import { useCopy } from "./useCopy.js";
+const toolButton = "inline-flex min-h-9 items-center gap-1.5 rounded-[10px] border-2 border-border bg-surface px-3 text-[13px] font-bold text-text-primary hover:border-contrast";
+const pageButton = "flex h-9 w-9 items-center justify-center rounded-[10px] border-2 border-border bg-surface text-text-primary hover:border-contrast disabled:pointer-events-none disabled:opacity-40";
+function texto(cell) {
+    if (cell === null || cell === undefined)
+        return "";
+    return typeof cell === "object" ? JSON.stringify(cell) : String(cell);
+}
+function csvCell(cell) {
+    const s = texto(cell);
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, "\"\"")}"` : s;
+}
+// Grade de resultado de consulta: filtro em memória, paginação, CSV e JSON, NULL e booleanos destacados
+export default function DataGrid({ columns, rows, meta, truncated = false, onClose, fileName = "resultado", pageSize = 50, labels }) {
+    const text = { ...dataGridLabels, ...labels };
+    const [filter, setFilter] = useState("");
+    const [page, setPage] = useState(1);
+    const { copied, copy } = useCopy(2000);
+    const filtered = useMemo(() => {
+        const term = filter.trim().toLowerCase();
+        return term ? rows.filter((row) => row.some((cell) => texto(cell).toLowerCase().includes(term))) : rows;
+    }, [rows, filter]);
+    const pages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    const visible = filtered.slice((page - 1) * pageSize, page * pageSize);
+    const exportCsv = () => {
+        const body = [columns.map(csvCell).join(","), ...rows.map((row) => row.map(csvCell).join(","))].join("\n");
+        const url = URL.createObjectURL(new Blob([body], { type: "text/csv;charset=utf-8" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `${fileName}.csv`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    const json = () => JSON.stringify(rows.map((row) => Object.fromEntries(columns.map((col, i) => [col, row[i] ?? null]))), null, 2);
+    return (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-[20px] border-[1.5px] border-soft bg-surface", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b-[1.5px] border-soft bg-inset px-4 py-3 text-[13px]", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-display text-xs font-extrabold uppercase tracking-[0.08em]", children: text.title }), meta, _jsx("span", { className: "font-semibold text-ok", children: rows.length === 1 ? text.oneRow : text.rows.replace("{n}", String(rows.length)) }), truncated && _jsx("span", { className: "rounded-md border-[1.5px] border-warn px-2 py-0.5 text-xs font-bold uppercase tracking-[0.06em] text-warn", children: text.truncated })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [rows.length > 5 && (_jsx(SearchField, { size: "sm", label: text.filter, value: filter, onValue: (v) => {
+                                    setFilter(v);
+                                    setPage(1);
+                                } })), _jsxs("button", { type: "button", className: toolButton, onClick: exportCsv, children: [_jsx(Icon, { name: "download", size: 13 }), text.csv] }), _jsxs("button", { type: "button", className: toolButton, onClick: () => copy(json(), "json"), "aria-live": "polite", children: [_jsx(Icon, { name: copied ? "check" : "copy", size: 13 }), copied ? text.copied : text.json] }), onClose && (_jsx("button", { type: "button", onClick: onClose, "aria-label": text.close, className: "flex h-9 w-9 items-center justify-center rounded-[10px] text-text-secondary hover:bg-surface hover:text-text-primary", children: _jsx(Icon, { name: "close" }) }))] })] }), _jsx("div", { className: "max-h-[460px] overflow-auto font-mono text-xs", children: columns.length === 0 ? (_jsx("p", { className: "m-0 p-8 text-center font-body text-sm text-text-secondary", children: text.noColumns })) : visible.length === 0 ? (_jsx("p", { className: "m-0 p-8 text-center font-body text-sm text-text-secondary", children: text.empty })) : (_jsxs("table", { className: "plain w-full border-collapse text-left", children: [_jsx("thead", { className: "sticky top-0 z-10 border-b-[1.5px] border-soft bg-surface text-text-secondary", children: _jsxs("tr", { children: [_jsx("th", { className: "w-12 border-r border-soft px-3 py-2.5 text-center", children: "#" }), columns.map((col) => (_jsx("th", { className: "whitespace-nowrap border-r border-soft px-3.5 py-2.5 font-bold text-btn-primary", children: col }, col)))] }) }), _jsx("tbody", { children: visible.map((row, r) => (_jsxs("tr", { className: "border-t border-soft even:bg-inset/50 hover:bg-inset", children: [_jsx("td", { className: "select-none border-r border-soft px-3 py-1.5 text-center text-text-secondary", children: (page - 1) * pageSize + r + 1 }), columns.map((_, c) => {
+                                        const cell = row[c];
+                                        if (cell === null || cell === undefined) {
+                                            return _jsx("td", { className: "border-r border-soft px-3.5 py-1.5 italic text-text-secondary", children: "<NULL>" }, c);
+                                        }
+                                        if (typeof cell === "boolean") {
+                                            return (_jsx("td", { className: "border-r border-soft px-3.5 py-1.5 font-bold", children: _jsx("span", { className: `rounded-md border-[1.5px] border-current px-1.5 py-0.5 ${cell ? "text-ok" : "text-danger"}`, children: cell ? "TRUE" : "FALSE" }) }, c));
+                                        }
+                                        return _jsx("td", { title: texto(cell), className: "max-w-xs truncate whitespace-pre border-r border-soft px-3.5 py-1.5", children: texto(cell) }, c);
+                                    })] }, r))) })] })) }), pages > 1 && (_jsxs("div", { className: "flex items-center justify-between border-t-[1.5px] border-soft bg-inset px-4 py-2 text-[13px] text-text-secondary", children: [_jsx("span", { children: text.page.replace("{page}", String(page)).replace("{pages}", String(pages)) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: pageButton, disabled: page === 1, onClick: () => setPage(page - 1), "aria-label": text.previous, children: _jsx(Icon, { name: "chevronLeft" }) }), _jsx("button", { type: "button", className: pageButton, disabled: page === pages, onClick: () => setPage(page + 1), "aria-label": text.next, children: _jsx(Icon, { name: "chevronRight" }) })] })] }))] }));
+}

package/dist/components/Dialog.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import { type DialogLabels } from "./labels.js";
+interface Props {
+    open: boolean;
+    onClose: () => void;
+    title: ReactNode;
+    icon?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    width?: string;
+    locked?: boolean;
+    labels?: Partial<DialogLabels>;
+}
+export default function Dialog({ open, onClose, title, icon, children, footer, width, locked, labels }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Dialog.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { dialogLabels } from "./labels.js";
+// Diálogo modal nativo (<dialog> + showModal): foco preso, Esc fecha, fundo escurecido
+export default function Dialog({ open, onClose, title, icon, children, footer, width = "max-w-lg", locked = false, labels }) {
+    const text = { ...dialogLabels, ...labels };
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (open && !el.open)
+            el.showModal();
+        if (!open && el.open)
+            el.close();
+    }, [open]);
+    return (_jsx("dialog", { ref: ref, onCancel: (e) => {
+            e.preventDefault();
+            if (!locked)
+                onClose();
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget && !locked)
+                onClose();
+        }, className: `m-auto w-[calc(100%-2rem)] ${width} max-h-[calc(100dvh-2rem)] overflow-hidden rounded-[20px] border-2 border-border bg-surface p-0 text-text-primary shadow-[6px_6px_0_var(--border)] backdrop:bg-black/60 backdrop:backdrop-blur-xs`, children: open && (_jsxs("div", { className: "flex max-h-[calc(100dvh-2rem)] flex-col", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b-[1.5px] border-soft bg-inset px-5 py-3.5", children: [_jsxs("h2", { className: "m-0 flex min-w-0 items-center gap-2.5 font-display text-sm font-extrabold uppercase tracking-[0.08em]", children: [icon, _jsx("span", { className: "truncate", children: title })] }), _jsx("button", { type: "button", onClick: onClose, disabled: locked, "aria-label": text.close, className: "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px] text-text-secondary hover:bg-surface hover:text-text-primary disabled:opacity-40", children: _jsx("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-5", children: children }), footer && _jsx("div", { className: "flex flex-wrap items-center justify-end gap-2 border-t-[1.5px] border-soft bg-inset px-5 py-3", children: footer })] })) }));
+}

package/dist/components/Disclosure.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+declare const TONE: {
+    readonly neutral: {
+        readonly box: "border-soft bg-surface";
+        readonly title: "";
+    };
+    readonly ok: {
+        readonly box: "border-ok bg-ok-soft";
+        readonly title: "text-ok";
+    };
+    readonly danger: {
+        readonly box: "border-danger bg-danger-soft";
+        readonly title: "text-danger";
+    };
+};
+export default function Disclosure({ title, hint, tone, open, heading, className, children }: {
+    title: ReactNode;
+    hint?: ReactNode;
+    tone?: keyof typeof TONE;
+    open?: boolean;
+    heading?: boolean;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Disclosure.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TONE = {
+    neutral: { box: "border-soft bg-surface", title: "" },
+    ok: { box: "border-ok bg-ok-soft", title: "text-ok" },
+    danger: { box: "border-danger bg-danger-soft", title: "text-danger" },
+};
+// Bloco recolhível (<details>): saída de comando, seção avançada, manutenção.
+// heading: faixa em caixa alta (seção) · plain: título em negrito (resultado)
+export default function Disclosure({ title, hint, tone = "neutral", open, heading = false, className = "", children }) {
+    const style = TONE[tone];
+    return (_jsxs("details", { open: open, className: `rounded-[20px] border-[1.5px] px-5 sm:px-6 ${style.box} ${className}`, children: [_jsxs("summary", { className: `flex min-h-[52px] cursor-pointer flex-wrap items-center gap-x-2 ${heading ? "font-display text-sm font-extrabold uppercase tracking-[0.08em]" : "text-sm font-bold"} ${style.title}`, children: [title, hint && _jsx("span", { className: "font-body text-[13px] font-normal normal-case tracking-normal text-text-secondary", children: hint })] }), _jsx("div", { className: "pb-5", children: children })] }));
+}

package/dist/components/LogView.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+import { type LogViewLabels } from "./labels.js";
+export type LogTone = "ok" | "warn" | "danger";
+export default function LogView({ lines, toneOf, header, toolbar, empty, downloadName, autoScroll, className, labels }: {
+    lines: string[];
+    toneOf?: (line: string) => LogTone | undefined;
+    header?: ReactNode;
+    toolbar?: ReactNode;
+    empty?: ReactNode;
+    downloadName?: string;
+    autoScroll?: boolean;
+    className?: string;
+    labels?: Partial<LogViewLabels>;
+}): import("react").JSX.Element;

package/dist/components/LogView.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Icon } from "./icons.js";
+import { logViewLabels } from "./labels.js";
+import { useCopy } from "./useCopy.js";
+const LINE = {
+    ok: "text-ok",
+    warn: "bg-warn-soft text-warn",
+    danger: "bg-danger-soft text-danger",
+};
+const toolButton = "inline-flex min-h-9 items-center gap-1.5 rounded-[8px] px-2.5 font-body text-[13px] font-bold text-text-primary hover:bg-inset disabled:opacity-50";
+// Console de log: cabeçalho opcional, barra (filtros/metadados + copiar/baixar) e linhas em mono que rolam até o fim
+export default function LogView({ lines, toneOf, header, toolbar, empty, downloadName, autoScroll = true, className = "min-h-[420px]", labels }) {
+    const text = { ...logViewLabels, ...labels };
+    const { copied, copy } = useCopy(2000);
+    const box = useRef(null);
+    useEffect(() => {
+        if (autoScroll && box.current)
+            box.current.scrollTop = box.current.scrollHeight;
+    }, [lines, autoScroll]);
+    const download = () => {
+        const url = URL.createObjectURL(new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = downloadName ?? "log.txt";
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+    return (_jsxs("div", { className: `flex flex-col overflow-hidden rounded-[20px] border-[1.5px] border-soft bg-surface ${className}`, children: [header && _jsx("div", { className: "border-b-[1.5px] border-soft px-5 py-4", children: header }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b-[1.5px] border-soft px-4 py-2 font-mono text-xs text-text-secondary", children: [_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: toolbar }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("button", { type: "button", className: toolButton, disabled: lines.length === 0, onClick: () => copy(lines.join("\n"), "log"), "aria-live": "polite", children: [_jsx(Icon, { name: copied ? "check" : "copy", size: 13 }), copied ? text.copied : text.copy] }), downloadName && (_jsx("button", { type: "button", className: toolButton, disabled: lines.length === 0, onClick: download, "aria-label": text.download, title: text.download, children: _jsx(Icon, { name: "download", size: 14 }) }))] })] }), _jsx("div", { ref: box, className: "min-h-0 flex-1 select-text overflow-y-auto bg-inset px-4 py-3 font-mono text-xs leading-relaxed", children: lines.length === 0
+                    ? _jsx("p", { className: "m-0 font-body text-sm text-text-secondary", children: empty })
+                    : lines.map((line, i) => {
+                        const tone = toneOf?.(line);
+                        return (_jsx("div", { className: `whitespace-pre-wrap rounded-sm px-1.5 ${tone ? LINE[tone] : ""}`, children: line || " " }, i));
+                    }) })] }));
+}

package/dist/components/Markdown.d.ts

@@ -0,0 +1,4 @@
+export default function Markdown({ source, className }: {
+    source: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Markdown.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Markdown enxuto (títulos, parágrafos, listas, citações, código, tabelas, `código`, **negrito**, *itálico*, [links](url)).
+// Monta elementos React, nunca HTML cru: o conteúdo não executa nada. Frontmatter (---) é ignorado.
+function inline(source, key) {
+    const parts = [];
+    const re = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*\s][^*]*\*|_[^_\s][^_]*_)|(\[[^\]]+\]\([^)\s]+\))/g;
+    let last = 0;
+    let i = 0;
+    let m;
+    while ((m = re.exec(source))) {
+        if (m.index > last)
+            parts.push(source.slice(last, m.index));
+        const t = m[0];
+        const k = `${key}-${i++}`;
+        if (m[1])
+            parts.push(_jsx("code", { className: "rounded bg-inset px-1.5 py-px font-mono text-[0.92em]", children: t.slice(1, -1) }, k));
+        else if (m[2])
+            parts.push(_jsx("strong", { children: t.slice(2, -2) }, k));
+        else if (m[3])
+            parts.push(_jsx("em", { children: t.slice(1, -1) }, k));
+        else {
+            const [, label = "", url = ""] = t.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/) ?? [];
+            parts.push(/^(https?:|\/|#|\.)/.test(url)
+                ? _jsx("a", { href: url, target: url.startsWith("http") ? "_blank" : undefined, rel: "noopener noreferrer", className: "font-semibold text-btn-primary underline underline-offset-2 hover:text-contrast", children: label }, k)
+                : _jsx("span", { children: label }, k));
+        }
+        last = m.index + t.length;
+    }
+    if (last < source.length)
+        parts.push(source.slice(last));
+    return parts;
+}
+const HEADING = [
+    "m-0 mt-2 font-display text-[22px] font-black uppercase leading-tight",
+    "m-0 mt-3 font-display text-lg font-extrabold leading-tight",
+    "m-0 mt-2 font-display text-[15px] font-bold",
+];
+export default function Markdown({ source, className = "" }) {
+    let body = source.replace(/\r\n/g, "\n");
+    if (body.startsWith("---\n")) {
+        const end = body.indexOf("\n---", 4);
+        if (end !== -1)
+            body = body.slice(end + 4);
+    }
+    const lines = body.split("\n");
+    const at = (n) => lines[n] ?? "";
+    const blocks = [];
+    let i = 0;
+    let n = 0;
+    while (i < lines.length) {
+        const line = at(i);
+        const k = `b${n++}`;
+        if (!line.trim()) {
+            i++;
+            continue;
+        }
+        if (line.trim().startsWith("```")) {
+            const code = [];
+            i++;
+            while (i < lines.length && !at(i).trim().startsWith("```"))
+                code.push(at(i++));
+            i++;
+            blocks.push(_jsx("pre", { className: "m-0 overflow-x-auto rounded-[10px] bg-inset p-3.5 font-mono text-xs leading-relaxed", children: code.join("\n") }, k));
+            continue;
+        }
+        const heading = line.match(/^(#{1,4})\s+(.*)$/);
+        if (heading) {
+            const level = (heading[1] ?? "#").length;
+            const Tag = `h${Math.min(level + 1, 6)}`;
+            blocks.push(_jsx(Tag, { className: HEADING[Math.min(level, 3) - 1], children: inline(heading[2] ?? "", k) }, k));
+            i++;
+            continue;
+        }
+        if (/^(-{3,}|\*{3,})$/.test(line.trim())) {
+            blocks.push(_jsx("hr", { className: "border-soft" }, k));
+            i++;
+            continue;
+        }
+        if (line.trim().startsWith("|") && /^\s*\|?\s*:?-{3,}/.test(at(i + 1))) {
+            const cells = (l) => l.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
+            const head = cells(line);
+            i += 2;
+            const rows = [];
+            while (i < lines.length && at(i).trim().startsWith("|"))
+                rows.push(cells(at(i++)));
+            blocks.push(_jsx("div", { className: "overflow-x-auto rounded-[14px] border-[1.5px] border-soft", children: _jsxs("table", { className: "plain w-full border-collapse text-[13px]", children: [_jsx("thead", { children: _jsx("tr", { className: "bg-inset text-left", children: head.map((c, j) => _jsx("th", { className: "px-3 py-2 font-bold", children: inline(c, `${k}h${j}`) }, j)) }) }), _jsx("tbody", { children: rows.map((row, r) => (_jsx("tr", { className: "border-t-[1.5px] border-soft", children: row.map((c, j) => _jsx("td", { className: "px-3 py-2 align-top", children: inline(c, `${k}${r}${j}`) }, j)) }, r))) })] }) }, k));
+            continue;
+        }
+        if (line.startsWith(">")) {
+            const quote = [];
+            while (i < lines.length && at(i).startsWith(">"))
+                quote.push(at(i++).replace(/^>\s?/, ""));
+            blocks.push(_jsx("blockquote", { className: "m-0 border-l-[3px] border-contrast pl-3.5 text-text-secondary", children: inline(quote.join(" "), k) }, k));
+            continue;
+        }
+        const item = /^(\s*)([-*]|\d+\.)\s+/;
+        if (item.test(line)) {
+            const ordered = /^\s*\d+\./.test(line);
+            const items = [];
+            while (i < lines.length && (item.test(at(i)) || (/^\s{2,}\S/.test(at(i)) && items.length))) {
+                if (item.test(at(i)))
+                    items.push(at(i).replace(item, ""));
+                else
+                    items[items.length - 1] += ` ${at(i).trim()}`;
+                i++;
+            }
+            const List = ordered ? "ol" : "ul";
+            blocks.push(_jsx(List, { className: `m-0 flex flex-col gap-1 pl-5 ${ordered ? "list-decimal" : "list-disc"}`, children: items.map((t, j) => _jsx("li", { children: inline(t.replace(/^\[( |x)\]\s*/, (_, x) => (x === "x" ? "☑ " : "☐ ")), `${k}${j}`) }, j)) }, k));
+            continue;
+        }
+        const para = [];
+        while (i < lines.length && at(i).trim() && !/^(#{1,4}\s|```|>|\s*([-*]|\d+\.)\s|\|)/.test(at(i)))
+            para.push(at(i++).trim());
+        if (para.length === 0)
+            para.push(at(i++).trim());
+        blocks.push(_jsx("p", { className: "m-0", children: inline(para.join(" "), k) }, k));
+    }
+    return _jsx("div", { className: `flex flex-col gap-3 text-sm leading-relaxed text-text-primary ${className}`, children: blocks });
+}

package/dist/components/Meter.d.ts

@@ -0,0 +1,7 @@
+import type { StatusTone } from "./StatusTag.js";
+export default function Meter({ value, target, tone, label }: {
+    value: number;
+    target?: number;
+    tone?: StatusTone;
+    label: string;
+}): import("react").JSX.Element;

package/dist/components/Meter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FILL = { ok: "bg-ok", warn: "bg-warn", danger: "bg-danger", info: "bg-info", neutral: "bg-text-secondary" };
+// Barra de progresso 0–100 com marca de meta opcional (ex.: cobertura de testes)
+export default function Meter({ value, target, tone = "neutral", label }) {
+    const pct = Math.min(100, Math.max(0, value));
+    return (_jsxs("span", { className: "relative block h-2.5 rounded-full bg-inset", role: "img", "aria-label": label, children: [_jsx("span", { className: `absolute inset-y-0 left-0 rounded-full ${FILL[tone]}`, style: { width: `${pct}%` } }), target !== undefined && _jsx("span", { className: "absolute -bottom-1 -top-1 w-0.5 bg-text-primary", style: { left: `${target}%` } })] }));
+}

package/dist/components/Notice.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+export type NoticeTone = "ok" | "warn" | "danger" | "info";
+export default function Notice({ tone, title, children, role, className }: {
+    tone?: NoticeTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    role?: "status" | "alert";
+    className?: string;
+}): import("react").JSX.Element;