@aurea-uds/react 0.61.0 → 0.62.1

package/README.md

@@ -1,68 +1,68 @@
 # @aurea-uds/react
 
-Os componentes React do **Aurea Universal Design System**.
+The React components of the **Aurea Universal Design System**.
 
 ```bash
 pnpm add @aurea-uds/react @aurea-uds/core @aurea-uds/fonts @aurea-uds/icons
 ```
 
-## Uso
+## Usage
 
-Carregue as fontes **antes** da folha de estilo — o core não embute fonte nenhuma.
+Load the fonts **before** the stylesheet — the core does not embed any font.
 
 ```js
 import "@aurea-uds/fonts/css";
 import "@aurea-uds/core/css";
-import {AureaProvider, Button, ptBR} from "@aurea-uds/react";
+import {AureaProvider, Button} from "@aurea-uds/react";
 
 export default () => (
-  <AureaProvider spriteUrl="/aurea-icons.svg" strings={ptBR}>
-    <Button variant="primary">Enviar</Button>
+  <AureaProvider spriteUrl="/aurea-icons.svg">
+    <Button variant="primary">Send</Button>
   </AureaProvider>
 );
 ```
 
-`spriteUrl` aponta para o arquivo do `@aurea-uds/icons` — copie-o para onde o seu app serve
-arquivos estáticos. É configuração, então mora no provider, e não em cada componente que desenha
-um ícone. As frases padrão são em inglês; `strings={ptBR}` as troca pelas em português.
+`spriteUrl` points to the file from `@aurea-uds/icons` — copy it to where your app serves static files.
+It is configuration, so it lives on the provider, not on each component that draws an icon. The default
+strings are in English; `strings={ptBR}` swaps them for the Portuguese ones.
 
-## Importar por categoria
+## Import by category
 
-O entry point principal funciona, mas cada categoria é também um entry point próprio, para você levar uma
-parte do sistema sem o resto:
+The main entry point works, but each category is also an entry point of its own, so you can take one
+part of the system without the rest:
 
 ```js
 import {Button} from "@aurea-uds/react/actions";
 ```
 
-Seis módulos trazem uma engine opcional e por isso ficam **fora do entry point principal** — importar um
-`Button` nunca pode puxar uma dependência que você não instalou:
+Six modules bring an optional engine and therefore stay **out of the main entry point** — importing a
+`Button` must never pull in a dependency you did not install:
 
-| Importe | Exige que você instale |
+| Import | Requires you to install |
 |---|---|
-| `@aurea-uds/react/code-editor` | `codemirror` e os pacotes `@codemirror/*` |
+| `@aurea-uds/react/code-editor` | `codemirror` and the `@codemirror/*` packages |
 | `@aurea-uds/react/data-grid` | `@tanstack/react-table` |
 | `@aurea-uds/react/qrcode` | `qr` |
 | `@aurea-uds/react/calendar` | `react-day-picker` |
 | `@aurea-uds/react/chart` | `recharts` |
 | `@aurea-uds/react/graph` | `@xyflow/react` |
 
-### O mapa (`DependencyGraph`) e as três peças opcionais dele
+### The graph (`DependencyGraph`) and its three optional pieces
 
-Cada uma só é carregada quando a função dela é pedida. Sem ela, o mapa avisa uma vez no console e
-segue sem a função — não quebra a tela.
+Each one is loaded only when its feature is requested. Without it, the graph warns once in the console
+and carries on without the feature — it does not break the screen.
 
-| Para | Instale |
+| For | Install |
 |---|---|
-| arrumar em camadas, em árvore ou em círculo (`layout="layered"`, `"tree"`, `"radial"`) | `elkjs` |
-| a linha que desvia de um nó depois de arrumar à mão | `@tisoap/react-flow-smart-edge` |
-| a foto do mapa (`toPng()`, `toSvg()`) | `modern-screenshot` |
+| layered, tree or circular layout (`layout="layered"`, `"tree"`, `"radial"`) | `elkjs` |
+| the edge that routes around a node after manual arranging | `@tisoap/react-flow-smart-edge` |
+| an image of the graph (`toPng()`, `toSvg()`) | `modern-screenshot` |
 
-**O arrumador fora da tela principal (`layoutWorker`).** Num mapa grande, a arrumação pode prender a
-tela por alguns segundos. O mapa aceita um trabalhador (Web Worker) que o app cria — cada empacotador
-cria trabalhador do seu jeito, e por isso quem entrega é o app. A Aurea publica o trabalhador por um
-caminho dela, `@aurea-uds/react/graph-worker`, que traz o do `elkjs` (o peer opcional) junto — o app
-não importa o motor por fora. No Vite:
+**Layout off the main thread (`layoutWorker`).** On a large graph, the layout can freeze the screen for a
+few seconds. The graph accepts a Web Worker that the app creates — every bundler creates workers its own
+way, so the app is the one that supplies it. Aurea publishes the worker on its own entry point,
+`@aurea-uds/react/graph-worker`, which brings the `elkjs` worker (the optional peer) along — the app does
+not import the engine separately. In Vite:
 
 ```js
 import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
@@ -70,42 +70,42 @@ import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
 <DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />
 ```
 
-Em qualquer outro empacotador, o jeito que sempre funciona: copie `node_modules/elkjs/lib/elk-worker.min.js`
-para a pasta pública do app e passe `layoutWorker={() => new Worker("/elk-worker.min.js")}`.
+In any other bundler, the way that always works: copy `node_modules/elkjs/lib/elk-worker.min.js` to the
+app's public folder and pass `layoutWorker={() => new Worker("/elk-worker.min.js")}`.
 
 ## Hooks
 
-Quatro são públicos, e eles são a parte da API que **não tem página no catálogo** — o catálogo
-documenta componentes, e hook não é componente. Enquanto isso não mudar, é aqui que eles estão
-escritos.
+Four are public, and they are the part of the API that **has no page in the catalog** — the catalog
+documents components, and a hook is not a component. Until that changes, this is where they are written
+down.
 
 ```js
 import {AureaProvider, useToast} from "@aurea-uds/react";
 
 function BotaoSalvar() {
-  const toast = useToast();                                  // dentro do AureaProvider
+  const toast = useToast();                                  // inside AureaProvider
   return <Button onClick={() => toast.add({
-    title: "Salvo",
-    description: "Dois arquivos enviados.",
+    title: "Saved",
+    description: "Two files uploaded.",
     type: "success",                                         // info | success | warning | danger
-  })}>Salvar</Button>;
+  })}>Save</Button>;
 }
 ```
 
-A pilha se desenha sozinha: o `AureaProvider` já monta o viewport dos toasts, então não há
-`<Toaster/>` para posicionar nem um segundo provider para instalar.
+The stack draws itself: `AureaProvider` already mounts the toast viewport, so there is no `<Toaster/>` to
+place and no second provider to install.
 
-| Hook | O que entrega |
+| Hook | What it returns |
 |---|---|
-| `useToast()` | `add({title, description, type})`, mais `close(id)` e a lista viva. A fila é a do Base UI |
-| `useAureaTheme()` | lê e muda **os dois** eixos no `<html>`: `theme` (`dark`/`light`) e `density`. `theme` é `null` no servidor — não desenhe o que depende do tema até ele deixar de ser |
-| `useAureaStrings()` | o dicionário de frases, somado ao que você passou ao provider |
-| `useSpriteUrl()` | de onde o sprite de ícones está sendo carregado |
+| `useToast()` | `add({title, description, type})`, plus `close(id)` and the live list. The queue is Base UI's |
+| `useAureaTheme()` | reads and changes **both** axes on `<html>`: `theme` (`dark`/`light`) and `density`. `theme` is `null` on the server — do not render what depends on the theme until it stops being `null` |
+| `useAureaStrings()` | the string dictionary, merged with what you passed to the provider |
+| `useSpriteUrl()` | where the icon sprite is being loaded from |
 
-## Requisitos
+## Requirements
 
-React 19 ou mais novo. No React 19 `ref` é prop comum, e os tipos dependem disso.
+React 19 or newer. In React 19 `ref` is a regular prop, and the types depend on that.
 
-## Licença
+## License
 
 Apache-2.0.

package/dist/disclosure.js

@@ -17,7 +17,12 @@ import { Icon } from "./system.js";
 export function Accordion({ items, variant = "default", multiple = false, defaultValue, indicator = "chevron", size = "md", orientation = "vertical", className }) {
     const grupo = React.useId();
     const deLado = orientation === "horizontal";
-    const lista = _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", indicator === "plus" && "accordion-plus", size === "lg" && "accordion-lg", deLado && "accordion-horizontal", !deLado && className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple && !deLado ? undefined : grupo, open: defaultValue?.includes(i.id) || undefined, children: [_jsxs("summary", { "aria-disabled": i.disabled || undefined, tabIndex: i.disabled ? -1 : undefined, onClick: i.disabled ? (e) => e.preventDefault()
+    // DE LADO, SEMPRE HÁ UM À VISTA também na abertura (06/11/2026, a D4 da auditoria externa — decisão do Victor, "Abrir o
+    // primeiro"): sem `defaultValue`, o horizontal nascia com tudo fechado, só as tiras em pé e nenhuma área de conteúdo. Agora
+    // nasce com o primeiro item que não está desligado. A referência não tem o horizontal; o de pé continua como o dela,
+    // fechado.
+    const abertos = defaultValue ?? (deLado ? [items.find(i => !i.disabled)?.id].filter(Boolean) : undefined);
+    const lista = _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", indicator === "plus" && "accordion-plus", size === "lg" && "accordion-lg", deLado && "accordion-horizontal", !deLado && className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple && !deLado ? undefined : grupo, open: abertos?.includes(i.id) || undefined, children: [_jsxs("summary", { "aria-disabled": i.disabled || undefined, tabIndex: i.disabled ? -1 : undefined, onClick: i.disabled ? (e) => e.preventDefault()
                         : deLado ? (e) => { if (e.currentTarget.parentElement.open)
                             e.preventDefault(); } : undefined, children: [_jsx("span", { className: "accordion-title", children: i.title }), _jsx("span", { className: "accordion-chevron", "aria-hidden": "true" })] }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) });
     return deLado ? _jsx("div", { className: cx("accordion-horizontal-frame", className), children: lista }) : lista;

package/dist/media-client.js

@@ -103,6 +103,10 @@ export function MediaPlayer({ kind = "video", src, poster, title, subtitle, clas
                             setCurrent(el.currentTime); onTimeUpdate?.(e); }, onLoadedMetadata: (e) => { onMeta(); onLoadedMetadata?.(e); }, onDurationChange: (e) => { const el = m(); if (el)
                             setDuration(el.duration); onDurationChange?.(e); }, onProgress: (e) => { syncBuf(); onProgress?.(e); }, onVolumeChange: (e) => { syncVol(); onVolumeChange?.(e); }, children: children })] }), kind === "video" && title && _jsx("div", { className: "media-overlay-title", children: _jsxs("div", { children: [_jsx("strong", { children: title }), subtitle && _jsx("span", { children: subtitle })] }) }), _jsxs("div", { className: "media-controls", children: [_jsxs("div", { className: "media-seek", style: { "--media-played": `${playedPct}%` }, children: [_jsxs("div", { className: "media-seek-track", children: [_jsx("span", { className: "media-seek-buffered", style: { width: `${bufferedPct}%` } }), _jsx("span", { className: "media-seek-played" })] }), _jsx("input", { type: "range", min: 0, max: duration > 0 ? duration : 0, step: "any", value: Math.min(current, duration || 0), "aria-label": s.mediaSeek, "aria-valuetext": valueText, onChange: e => seek(Number(e.target.value)) })] }), _jsxs("div", { className: "media-control-row", children: [_jsxs("div", { className: "media-control-group", children: [_jsx("button", { className: "media-control", type: "button", "aria-label": playing ? s.mediaPause : s.mediaPlay, onClick: togglePlay, children: _jsx(Icon, { name: playing ? "pause" : "play" }) }), _jsx("button", { className: "media-control", type: "button", "aria-label": s.mediaSkipBack, onClick: () => skip(-10), children: _jsx(Icon, { name: "clock-counter-clockwise" }) }), _jsx("button", { className: "media-control", type: "button", "aria-label": s.mediaSkipForward, onClick: () => skip(10), children: _jsx(Icon, { name: "clock-clockwise" }) }), _jsxs("span", { className: "media-time", children: [clockTime(current), " / ", clockTime(duration)] })] }), _jsxs("div", { className: "media-control-group", children: [_jsx("button", { className: "media-control", type: "button", "aria-label": muted ? s.mediaUnmute : s.mediaMute, onClick: toggleMute, children: _jsx(Icon, { name: muted || volume === 0 ? "speaker-slash" : "speaker-high" }) }), _jsx("input", { className: "media-volume", type: "range", min: 0, max: 100, value: volPct, "aria-label": s.mediaVolume, "aria-valuetext": `${volPct}%`, onChange: e => setVol(Number(e.target.value) / 100) }), hasCaptions && _jsx("button", { className: cx("media-control", captionsOn && "active"), type: "button", "aria-label": captionsOn ? s.mediaCaptionsHide : s.mediaCaptionsShow, "aria-pressed": captionsOn, onClick: toggleCaptions, children: _jsx(Icon, { name: "closed-captioning" }) }), kind === "video" && _jsx("button", { className: "media-control", type: "button", "aria-label": fullscreen ? s.mediaFullscreenExit : s.mediaFullscreenEnter, onClick: toggleFullscreen, children: _jsx(Icon, { name: fullscreen ? "arrows-in" : "arrows-out" }) })] })] })] })] });
 }
+// SÓ `https:` (06/11/2026, a D5 da auditoria externa — decisão do Victor): a moldura aceitava qualquer endereço, sem
+// `sandbox` — não rouba nada da página (medido: o `data:` roda isolado), mas pode mostrar conteúdo falso. Sem `https:`, a
+// moldura fica vazia e o link de origem não aparece.
+const soHttps = (u) => !!u && /^https:\/\//i.test(u.trim());
 function comAutoplay(src) { try {
     const u = new URL(src);
     u.searchParams.set("autoplay", "1");
@@ -119,9 +123,9 @@ export function MediaEmbed({ src, title, poster, ratio = "16/9", href, autoplay
     React.useEffect(() => { if (clicou)
         frameRef.current?.focus(); }, [clicou]);
     const endereco = clicou && autoplay ? comAutoplay(src) : src;
-    return _jsxs("div", { className: cx("media-embed", className), style: style, children: [_jsx("div", { className: "media-embed-frame", style: { aspectRatio: ratio }, children: ativo
+    return _jsxs("div", { className: cx("media-embed", className), style: style, children: [_jsx("div", { className: "media-embed-frame", style: { aspectRatio: ratio }, children: !soHttps(src) ? null : ativo
                     ? _jsx("iframe", { ref: frameRef, src: endereco, title: title, loading: "lazy", referrerPolicy: "strict-origin-when-cross-origin", allow: "autoplay; encrypted-media; fullscreen; picture-in-picture", allowFullScreen: true, ...rest })
-                    : _jsxs("button", { type: "button", className: "media-embed-facade", "aria-label": `${s.mediaPlay}: ${title}`, onClick: () => { setAtivo(true); setClicou(true); }, children: [_jsx("img", { src: poster, alt: "", loading: "lazy", decoding: "async" }), _jsx("span", { className: "media-embed-play", "aria-hidden": "true", children: _jsx(Icon, { name: "play-circle", weight: "fill" }) })] }) }), href && _jsxs("a", { className: "media-embed-link", href: href, target: "_blank", rel: "noopener", children: [_jsx(Icon, { name: "arrow-square-out" }), s.mediaEmbedOpen] })] });
+                    : _jsxs("button", { type: "button", className: "media-embed-facade", "aria-label": `${s.mediaPlay}: ${title}`, onClick: () => { setAtivo(true); setClicou(true); }, children: [_jsx("img", { src: poster, alt: "", loading: "lazy", decoding: "async" }), _jsx("span", { className: "media-embed-play", "aria-hidden": "true", children: _jsx(Icon, { name: "play-circle", weight: "fill" }) })] }) }), soHttps(href) && _jsxs("a", { className: "media-embed-link", href: href, target: "_blank", rel: "noopener", children: [_jsx(Icon, { name: "arrow-square-out" }), s.mediaEmbedOpen] })] });
 }
 export function Image({ ratio, fit, alt, className, style, render, onError, frame, srcDark, ...props }) {
     const [quebrou, setQuebrou] = React.useState(false);

package/package.json

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