npm - @pixelume/sdk - Versions diffs - 0.2.0 → 0.3.0 - Mend

@pixelume/sdk 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,24 @@ conter mudanças incompatíveis, sempre listadas em **Changed/Removed**.
 ## [Unreleased]
+## [0.3.0] - 2026-10-13
+### Added
+- Entry point opt-in `@pixelume/sdk/ui` com `mountPixelumeWidget()`, Shadow DOM aberto e controlador
+  `hide()`, `show()` e `destroy()`.
+- Widget oficial responsivo com estados de visitante, carregamento, autenticado e erro; login/logout
+  reutilizam exclusivamente `client.auth`.
+- Posição, distância das bordas, container e `z-index` configuráveis, incluindo safe areas mobile.
+- Navegação por teclado, Escape com devolução de foco, foco visível, região de status e isolamento de
+  eventos pointer/touch/teclado do jogo.
+- Testes DOM do widget e validação dos dois entrypoints no consumidor empacotado.
+### Changed
+- O exemplo Vite agora monta também o widget oficial, mantendo os controles headless para demonstrar os
+  dois modos de consumo.
 ## [0.2.0] - 2026-10-13
 ### Added
@@ -47,7 +65,8 @@ conter mudanças incompatíveis, sempre listadas em **Changed/Removed**.
   `invalid_response`) e `isPixelumeError()`.
 - Build ESM + `.d.ts`, CI e workflow de publicação via npm Trusted Publishing.
-[Unreleased]: https://github.com/ericksonnascimento/pixelume-sdk/compare/v0.2.0...HEAD
+[Unreleased]: https://github.com/ericksonnascimento/pixelume-sdk/compare/v0.3.0...HEAD
+[0.3.0]: https://github.com/ericksonnascimento/pixelume-sdk/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/ericksonnascimento/pixelume-sdk/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/ericksonnascimento/pixelume-sdk/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/ericksonnascimento/pixelume-sdk/releases/tag/v0.1.0

package/README.md CHANGED Viewed

@@ -1,8 +1,9 @@
 # @pixelume/sdk
-SDK TypeScript headless para jogos web da Pixelume. A versão 0.2 adiciona autenticação centralizada
-com OAuth 2.0 Authorization Code + PKCE S256, além do cliente HTTP e health check da Fase 1. Não há
-dependências de runtime, componentes visuais, senha no jogo nem `client_secret`.
+SDK TypeScript para jogos web da Pixelume. O core headless continua sendo o padrão; a versão 0.3 adiciona
+um widget oficial opt-in em `@pixelume/sdk/ui`. Os dois modos usam a mesma autenticação centralizada com
+OAuth 2.0 Authorization Code + PKCE S256. Não há dependências de runtime, senha no jogo nem
+`client_secret`.
 ## Instalação
@@ -25,7 +26,7 @@ Não são aceitos curingas, prefixos ou callbacks enviados dinamicamente. O clie
 `pixelume-local-dev`, exclusivamente com `http://localhost:4173/oauth/callback` e
 `http://127.0.0.1:4173/oauth/callback`. Jogos publicados exigem migration/configuração revisada na API.
-## Uso
+## Uso headless
 ```ts
 import { Pixelume, isPixelumeError } from '@pixelume/sdk';
@@ -64,6 +65,41 @@ logoutButton.addEventListener('click', async () => {
 unsubscribe();
 ```
+Importar ou instanciar o core não cria elementos, não injeta estilos e não ativa UI. O health check
+também é totalmente independente: chamar `/health` nunca monta o widget.
+## Widget opcional
+```ts
+import { Pixelume } from '@pixelume/sdk';
+import { mountPixelumeWidget } from '@pixelume/sdk/ui';
+const pixelume = new Pixelume({
+  gameId: 'rail-puzzle',
+  redirectUri: 'https://rail-puzzle.pixelume.com.br/oauth/callback',
+});
+await pixelume.initialize();
+const widget = mountPixelumeWidget(pixelume, {
+  position: 'bottom-right',
+  offset: 16,
+  theme: 'pixel',
+});
+// Ao esconder controles, pausar ou trocar de tela:
+widget.hide();
+widget.show();
+// Ao encerrar a tela/jogo:
+widget.destroy();
+```
+O painel usa Shadow DOM aberto, não aplica CSS global e chama somente `pixelume.auth.login()` e
+`pixelume.auth.logout()`. Entrar sempre redireciona ao portal Pixelume Auth; o widget não exibe campos de
+e-mail ou senha. Para overlays próprios ou canvas fullscreen, passe `container`, ajuste `position`,
+`offset` e `zIndex`. Veja o [guia completo do widget](docs/phase-03-widget.md).
 `pixelume.auth.state.status` é `uninitialized`, `redirecting`, `exchanging`, `anonymous` ou
 `authenticated`. O estado anônimo informa `reason` (`visitor`, `cancelled`, `expired`, `logged_out` ou
 `error`) e, em falha, um `PixelumeError`. Cancelar no portal resulta em visitante, não em exceção.
@@ -146,10 +182,11 @@ local, mas não diretamente de outro domínio no browser.
 ## Compatibilidade
-| SDK     | Pixelume API                                         | Pixelume Auth                  | Recursos                         |
-| ------- | ---------------------------------------------------- | ------------------------------ | -------------------------------- |
-| `0.2.x` | OpenAPI `0.4.0`, release SSO `3846479` ou compatível | Fase 2 `dd5a8e5` ou compatível | SSO PKCE, perfil, logout, health |
-| `0.1.x` | API anterior/atual para `/health`                    | não consumido                  | fundação e health apenas         |
+| SDK     | Pixelume API                                         | Pixelume Auth                  | Recursos                                        |
+| ------- | ---------------------------------------------------- | ------------------------------ | ----------------------------------------------- |
+| `0.3.x` | OpenAPI `0.4.0`, release SSO `3846479` ou compatível | Fase 2 `3a1ded4` ou compatível | Widget opt-in, SSO PKCE, perfil, logout, health |
+| `0.2.x` | OpenAPI `0.4.0`, release SSO `3846479` ou compatível | Fase 2 `3a1ded4` ou compatível | SSO PKCE, perfil, logout, health                |
+| `0.1.x` | API anterior/atual para `/health`                    | não consumido                  | fundação e health apenas                        |
 Como o pacote ainda está em `0.x`, mudanças incompatíveis usam incremento _minor_ e são listadas no
 [CHANGELOG](CHANGELOG.md).
@@ -164,7 +201,7 @@ npm run verify
 npm run example:smoke # leitura opcional da API real
 ```
-Mais detalhes: [integração SSO](docs/SSO_INTEGRATION.md),
+Mais detalhes: [widget oficial](docs/phase-03-widget.md), [integração SSO](docs/SSO_INTEGRATION.md),
 [auditoria do contrato](docs/SSO_CONTRACT_AUDIT.md), [arquitetura](docs/architecture.md) e
 [publicação](docs/publishing.md).

package/dist/ui/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { mountPixelumeWidget } from './widget.js';
2	+ export type { PixelumeWidgetController, PixelumeWidgetOptions, PixelumeWidgetPosition, } from './widget.js';

package/dist/ui/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { mountPixelumeWidget } from './widget.js';
2	+ //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { mountPixelumeWidget } from './widget.js';\nexport type {\n PixelumeWidgetController,\n PixelumeWidgetOptions,\n PixelumeWidgetPosition,\n} from './widget.js';\n"]}

package/dist/ui/styles.d.ts ADDED Viewed

@@ -0,0 +1 @@

+ export declare const WIDGET_STYLES = "\n:host {\n all: initial;\n position: fixed;\n z-index: var(--pixelume-z-index, 2147483000);\n display: block;\n color-scheme: dark;\n contain: layout style;\n pointer-events: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([data-contained]) {\n position: absolute;\n}\n\n:host([data-position=\"top-left\"]) {\n inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));\n inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));\n}\n\n:host([data-position=\"top-right\"]) {\n inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));\n inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));\n}\n\n:host([data-position=\"bottom-left\"]) {\n inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));\n inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));\n}\n\n:host([data-position=\"bottom-right\"]) {\n inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));\n inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbutton {\n font: inherit;\n}\n\n.root {\n --night: oklch(25% 0.035 263);\n --night-deep: oklch(18% 0.03 263);\n --surface: oklch(30% 0.04 263);\n --surface-raised: oklch(35% 0.045 263);\n --lume: oklch(79% 0.13 67);\n --lume-bright: oklch(88% 0.1 76);\n --lume-deep: oklch(63% 0.13 48);\n --mint: oklch(81% 0.08 171);\n --text: oklch(94% 0.02 78);\n --muted: oklch(80% 0.02 78);\n --danger: oklch(78% 0.12 24);\n --line: oklch(92% 0.02 78 / 0.24);\n --pixel: 3px;\n display: flex;\n gap: 0.75rem;\n align-items: flex-end;\n inline-size: max-content;\n max-inline-size: calc(100vw - 2rem);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n font-size: 1rem;\n line-height: 1.45;\n color: var(--text);\n pointer-events: auto;\n -webkit-font-smoothing: antialiased;\n}\n\n:host([data-position^=\"bottom\"]) .root {\n flex-direction: column-reverse;\n}\n\n:host([data-position^=\"top\"]) .root {\n flex-direction: column;\n}\n\n:host([data-position$=\"left\"]) .root {\n align-items: flex-start;\n}\n\n.trigger,\n.panel,\n.action,\n.close {\n border: 0;\n border-radius: 0;\n}\n\n.trigger,\n.action {\n box-shadow:\n 0 calc(-1 * var(--pixel)) 0 var(--edge),\n 0 var(--pixel) 0 var(--edge-bottom),\n calc(-1 * var(--pixel)) 0 var(--edge),\n var(--pixel) 0 var(--edge);\n}\n\n.trigger {\n --edge: var(--lume);\n --edge-bottom: var(--lume-deep);\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-block-size: 2.75rem;\n margin: var(--pixel);\n padding: 0.625rem 0.875rem;\n color: var(--night-deep);\n background: var(--lume);\n font-weight: 750;\n cursor: pointer;\n touch-action: manipulation;\n transition:\n transform 160ms cubic-bezier(0.16, 1, 0.3, 1),\n background-color 160ms linear;\n}\n\n.trigger:hover {\n background: var(--lume-bright);\n}\n\n.trigger:active {\n transform: translateY(2px);\n}\n\n.trigger:focus-visible,\n.action:focus-visible,\n.close:focus-visible {\n outline: 3px solid var(--mint);\n outline-offset: 4px;\n}\n\n.mark {\n position: relative;\n flex: none;\n inline-size: 1rem;\n block-size: 1rem;\n color: currentColor;\n}\n\n.mark::before,\n.mark::after {\n content: \"\";\n position: absolute;\n background: currentColor;\n}\n\n.mark::before {\n inset: 0.25rem;\n}\n\n.mark::after {\n inset: 0;\n clip-path: polygon(37.5% 0, 62.5% 0, 62.5% 37.5%, 100% 37.5%, 100% 62.5%, 62.5% 62.5%, 62.5% 100%, 37.5% 100%, 37.5% 62.5%, 0 62.5%, 0 37.5%, 37.5% 37.5%);\n opacity: 0.72;\n}\n\n.presence {\n inline-size: 0.5rem;\n block-size: 0.5rem;\n background: var(--night-deep);\n opacity: 0.5;\n}\n\n.trigger[data-authenticated] .presence {\n background: oklch(48% 0.12 168);\n opacity: 1;\n}\n\n.panel {\n inline-size: min(21.5rem, calc(100vw - 2rem));\n margin: var(--pixel);\n color: var(--text);\n background: var(--night);\n box-shadow:\n 0 calc(-1 * var(--pixel)) 0 var(--line),\n 0 var(--pixel) 0 var(--surface-raised),\n calc(-1 * var(--pixel)) 0 var(--line),\n var(--pixel) 0 var(--line),\n 0 1rem 2.5rem oklch(8% 0.03 263 / 0.42);\n overflow: hidden;\n}\n\n.panel[hidden] {\n display: none;\n}\n\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n min-block-size: 3rem;\n padding: 0.625rem 0.75rem 0.625rem 1rem;\n border-block-end: 1px solid var(--line);\n}\n\n.brand {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n color: var(--lume-bright);\n font-family: ui-monospace, \"SFMono-Regular\", Consolas, monospace;\n font-size: 0.8125rem;\n font-weight: 750;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.brand .mark {\n inline-size: 0.75rem;\n block-size: 0.75rem;\n}\n\n.close {\n display: grid;\n place-items: center;\n inline-size: 2.5rem;\n block-size: 2.5rem;\n padding: 0;\n color: var(--muted);\n background: transparent;\n font-size: 1.5rem;\n line-height: 1;\n cursor: pointer;\n touch-action: manipulation;\n}\n\n.close:hover {\n color: var(--text);\n background: var(--surface);\n}\n\n.content {\n display: grid;\n gap: 1rem;\n padding: 1.25rem;\n}\n\n.identity {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: 0.875rem;\n}\n\n.avatar {\n display: grid;\n place-items: center;\n inline-size: 2.75rem;\n block-size: 2.75rem;\n color: var(--night-deep);\n background: var(--mint);\n box-shadow:\n 0 -3px 0 var(--mint),\n 0 3px 0 oklch(62% 0.08 171),\n -3px 0 0 var(--mint),\n 3px 0 0 var(--mint);\n font-family: ui-monospace, \"SFMono-Regular\", Consolas, monospace;\n font-weight: 800;\n}\n\n.title,\n.message {\n margin: 0;\n}\n\n.title {\n color: var(--text);\n font-size: 1.125rem;\n font-weight: 760;\n line-height: 1.25;\n overflow-wrap: anywhere;\n}\n\n.message {\n max-inline-size: 34ch;\n color: var(--muted);\n font-size: 0.875rem;\n}\n\n.state-copy {\n display: grid;\n gap: 0.375rem;\n}\n\n.notice {\n margin: 0;\n padding: 0.75rem;\n color: var(--danger);\n background: oklch(25% 0.055 24);\n border: 1px solid oklch(78% 0.12 24 / 0.35);\n font-size: 0.8125rem;\n}\n\n.action {\n --edge: var(--lume);\n --edge-bottom: var(--lume-deep);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-block-size: 2.75rem;\n inline-size: calc(100% - 2 * var(--pixel));\n margin: var(--pixel);\n padding: 0.6875rem 1rem;\n color: var(--night-deep);\n background: var(--lume);\n font-weight: 750;\n cursor: pointer;\n touch-action: manipulation;\n transition:\n transform 160ms cubic-bezier(0.16, 1, 0.3, 1),\n background-color 160ms linear;\n}\n\n.action:hover:not(:disabled) {\n background: var(--lume-bright);\n}\n\n.action:active:not(:disabled) {\n transform: translateY(2px);\n}\n\n.action.secondary {\n --edge: var(--line);\n --edge-bottom: var(--surface-raised);\n color: var(--text);\n background: var(--surface);\n}\n\n.action.secondary:hover:not(:disabled) {\n --edge: var(--mint);\n color: var(--mint);\n background: var(--surface-raised);\n}\n\n.action:disabled {\n cursor: wait;\n opacity: 0.68;\n}\n\n.loading {\n display: grid;\n gap: 0.625rem;\n padding-block: 0.25rem;\n}\n\n.loading-line {\n block-size: 0.75rem;\n background: var(--surface-raised);\n animation: pixel-pulse 1.2s steps(4, end) infinite;\n}\n\n.loading-line:first-child {\n inline-size: 62%;\n}\n\n.loading-line:last-child {\n inline-size: 88%;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n@keyframes pixel-pulse {\n 0%, 100% { opacity: 0.45; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 30rem) {\n .trigger {\n padding-inline: 0.75rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n";

package/dist/ui/styles.js ADDED Viewed

@@ -0,0 +1,402 @@
+export const WIDGET_STYLES = `
+:host {
+  all: initial;
+  position: fixed;
+  z-index: var(--pixelume-z-index, 2147483000);
+  display: block;
+  color-scheme: dark;
+  contain: layout style;
+  pointer-events: none;
+}
+:host([hidden]) {
+  display: none;
+}
+:host([data-contained]) {
+  position: absolute;
+}
+:host([data-position="top-left"]) {
+  inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));
+  inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));
+}
+:host([data-position="top-right"]) {
+  inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));
+  inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));
+}
+:host([data-position="bottom-left"]) {
+  inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));
+  inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));
+}
+:host([data-position="bottom-right"]) {
+  inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));
+  inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+button {
+  font: inherit;
+}
+.root {
+  --night: oklch(25% 0.035 263);
+  --night-deep: oklch(18% 0.03 263);
+  --surface: oklch(30% 0.04 263);
+  --surface-raised: oklch(35% 0.045 263);
+  --lume: oklch(79% 0.13 67);
+  --lume-bright: oklch(88% 0.1 76);
+  --lume-deep: oklch(63% 0.13 48);
+  --mint: oklch(81% 0.08 171);
+  --text: oklch(94% 0.02 78);
+  --muted: oklch(80% 0.02 78);
+  --danger: oklch(78% 0.12 24);
+  --line: oklch(92% 0.02 78 / 0.24);
+  --pixel: 3px;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+  inline-size: max-content;
+  max-inline-size: calc(100vw - 2rem);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1.45;
+  color: var(--text);
+  pointer-events: auto;
+  -webkit-font-smoothing: antialiased;
+}
+:host([data-position^="bottom"]) .root {
+  flex-direction: column-reverse;
+}
+:host([data-position^="top"]) .root {
+  flex-direction: column;
+}
+:host([data-position$="left"]) .root {
+  align-items: flex-start;
+}
+.trigger,
+.panel,
+.action,
+.close {
+  border: 0;
+  border-radius: 0;
+}
+.trigger,
+.action {
+  box-shadow:
+    0 calc(-1 * var(--pixel)) 0 var(--edge),
+    0 var(--pixel) 0 var(--edge-bottom),
+    calc(-1 * var(--pixel)) 0 var(--edge),
+    var(--pixel) 0 var(--edge);
+}
+.trigger {
+  --edge: var(--lume);
+  --edge-bottom: var(--lume-deep);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-block-size: 2.75rem;
+  margin: var(--pixel);
+  padding: 0.625rem 0.875rem;
+  color: var(--night-deep);
+  background: var(--lume);
+  font-weight: 750;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition:
+    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 160ms linear;
+}
+.trigger:hover {
+  background: var(--lume-bright);
+}
+.trigger:active {
+  transform: translateY(2px);
+}
+.trigger:focus-visible,
+.action:focus-visible,
+.close:focus-visible {
+  outline: 3px solid var(--mint);
+  outline-offset: 4px;
+}
+.mark {
+  position: relative;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: currentColor;
+}
+.mark::before,
+.mark::after {
+  content: "";
+  position: absolute;
+  background: currentColor;
+}
+.mark::before {
+  inset: 0.25rem;
+}
+.mark::after {
+  inset: 0;
+  clip-path: polygon(37.5% 0, 62.5% 0, 62.5% 37.5%, 100% 37.5%, 100% 62.5%, 62.5% 62.5%, 62.5% 100%, 37.5% 100%, 37.5% 62.5%, 0 62.5%, 0 37.5%, 37.5% 37.5%);
+  opacity: 0.72;
+}
+.presence {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  background: var(--night-deep);
+  opacity: 0.5;
+}
+.trigger[data-authenticated] .presence {
+  background: oklch(48% 0.12 168);
+  opacity: 1;
+}
+.panel {
+  inline-size: min(21.5rem, calc(100vw - 2rem));
+  margin: var(--pixel);
+  color: var(--text);
+  background: var(--night);
+  box-shadow:
+    0 calc(-1 * var(--pixel)) 0 var(--line),
+    0 var(--pixel) 0 var(--surface-raised),
+    calc(-1 * var(--pixel)) 0 var(--line),
+    var(--pixel) 0 var(--line),
+    0 1rem 2.5rem oklch(8% 0.03 263 / 0.42);
+  overflow: hidden;
+}
+.panel[hidden] {
+  display: none;
+}
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-block-size: 3rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+  border-block-end: 1px solid var(--line);
+}
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--lume-bright);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  font-size: 0.8125rem;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.brand .mark {
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+}
+.close {
+  display: grid;
+  place-items: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  padding: 0;
+  color: var(--muted);
+  background: transparent;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.close:hover {
+  color: var(--text);
+  background: var(--surface);
+}
+.content {
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+}
+.identity {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.875rem;
+}
+.avatar {
+  display: grid;
+  place-items: center;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  color: var(--night-deep);
+  background: var(--mint);
+  box-shadow:
+    0 -3px 0 var(--mint),
+    0 3px 0 oklch(62% 0.08 171),
+    -3px 0 0 var(--mint),
+    3px 0 0 var(--mint);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  font-weight: 800;
+}
+.title,
+.message {
+  margin: 0;
+}
+.title {
+  color: var(--text);
+  font-size: 1.125rem;
+  font-weight: 760;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+.message {
+  max-inline-size: 34ch;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+.state-copy {
+  display: grid;
+  gap: 0.375rem;
+}
+.notice {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--danger);
+  background: oklch(25% 0.055 24);
+  border: 1px solid oklch(78% 0.12 24 / 0.35);
+  font-size: 0.8125rem;
+}
+.action {
+  --edge: var(--lume);
+  --edge-bottom: var(--lume-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 2.75rem;
+  inline-size: calc(100% - 2 * var(--pixel));
+  margin: var(--pixel);
+  padding: 0.6875rem 1rem;
+  color: var(--night-deep);
+  background: var(--lume);
+  font-weight: 750;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition:
+    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 160ms linear;
+}
+.action:hover:not(:disabled) {
+  background: var(--lume-bright);
+}
+.action:active:not(:disabled) {
+  transform: translateY(2px);
+}
+.action.secondary {
+  --edge: var(--line);
+  --edge-bottom: var(--surface-raised);
+  color: var(--text);
+  background: var(--surface);
+}
+.action.secondary:hover:not(:disabled) {
+  --edge: var(--mint);
+  color: var(--mint);
+  background: var(--surface-raised);
+}
+.action:disabled {
+  cursor: wait;
+  opacity: 0.68;
+}
+.loading {
+  display: grid;
+  gap: 0.625rem;
+  padding-block: 0.25rem;
+}
+.loading-line {
+  block-size: 0.75rem;
+  background: var(--surface-raised);
+  animation: pixel-pulse 1.2s steps(4, end) infinite;
+}
+.loading-line:first-child {
+  inline-size: 62%;
+}
+.loading-line:last-child {
+  inline-size: 88%;
+}
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@keyframes pixel-pulse {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 1; }
+}
+@media (max-width: 30rem) {
+  .trigger {
+    padding-inline: 0.75rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/ui/styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgZ5B,CAAC","sourcesContent":["export const WIDGET_STYLES = `\n:host {\n all: initial;\n position: fixed;\n z-index: var(--pixelume-z-index, 2147483000);\n display: block;\n color-scheme: dark;\n contain: layout style;\n pointer-events: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([data-contained]) {\n position: absolute;\n}\n\n:host([data-position=\"top-left\"]) {\n inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));\n inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));\n}\n\n:host([data-position=\"top-right\"]) {\n inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));\n inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));\n}\n\n:host([data-position=\"bottom-left\"]) {\n inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));\n inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));\n}\n\n:host([data-position=\"bottom-right\"]) {\n inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));\n inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbutton {\n font: inherit;\n}\n\n.root {\n --night: oklch(25% 0.035 263);\n --night-deep: oklch(18% 0.03 263);\n --surface: oklch(30% 0.04 263);\n --surface-raised: oklch(35% 0.045 263);\n --lume: oklch(79% 0.13 67);\n --lume-bright: oklch(88% 0.1 76);\n --lume-deep: oklch(63% 0.13 48);\n --mint: oklch(81% 0.08 171);\n --text: oklch(94% 0.02 78);\n --muted: oklch(80% 0.02 78);\n --danger: oklch(78% 0.12 24);\n --line: oklch(92% 0.02 78 / 0.24);\n --pixel: 3px;\n display: flex;\n gap: 0.75rem;\n align-items: flex-end;\n inline-size: max-content;\n max-inline-size: calc(100vw - 2rem);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n font-size: 1rem;\n line-height: 1.45;\n color: var(--text);\n pointer-events: auto;\n -webkit-font-smoothing: antialiased;\n}\n\n:host([data-position^=\"bottom\"]) .root {\n flex-direction: column-reverse;\n}\n\n:host([data-position^=\"top\"]) .root {\n flex-direction: column;\n}\n\n:host([data-position$=\"left\"]) .root {\n align-items: flex-start;\n}\n\n.trigger,\n.panel,\n.action,\n.close {\n border: 0;\n border-radius: 0;\n}\n\n.trigger,\n.action {\n box-shadow:\n 0 calc(-1 * var(--pixel)) 0 var(--edge),\n 0 var(--pixel) 0 var(--edge-bottom),\n calc(-1 * var(--pixel)) 0 var(--edge),\n var(--pixel) 0 var(--edge);\n}\n\n.trigger {\n --edge: var(--lume);\n --edge-bottom: var(--lume-deep);\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-block-size: 2.75rem;\n margin: var(--pixel);\n padding: 0.625rem 0.875rem;\n color: var(--night-deep);\n background: var(--lume);\n font-weight: 750;\n cursor: pointer;\n touch-action: manipulation;\n transition:\n transform 160ms cubic-bezier(0.16, 1, 0.3, 1),\n background-color 160ms linear;\n}\n\n.trigger:hover {\n background: var(--lume-bright);\n}\n\n.trigger:active {\n transform: translateY(2px);\n}\n\n.trigger:focus-visible,\n.action:focus-visible,\n.close:focus-visible {\n outline: 3px solid var(--mint);\n outline-offset: 4px;\n}\n\n.mark {\n position: relative;\n flex: none;\n inline-size: 1rem;\n block-size: 1rem;\n color: currentColor;\n}\n\n.mark::before,\n.mark::after {\n content: \"\";\n position: absolute;\n background: currentColor;\n}\n\n.mark::before {\n inset: 0.25rem;\n}\n\n.mark::after {\n inset: 0;\n clip-path: polygon(37.5% 0, 62.5% 0, 62.5% 37.5%, 100% 37.5%, 100% 62.5%, 62.5% 62.5%, 62.5% 100%, 37.5% 100%, 37.5% 62.5%, 0 62.5%, 0 37.5%, 37.5% 37.5%);\n opacity: 0.72;\n}\n\n.presence {\n inline-size: 0.5rem;\n block-size: 0.5rem;\n background: var(--night-deep);\n opacity: 0.5;\n}\n\n.trigger[data-authenticated] .presence {\n background: oklch(48% 0.12 168);\n opacity: 1;\n}\n\n.panel {\n inline-size: min(21.5rem, calc(100vw - 2rem));\n margin: var(--pixel);\n color: var(--text);\n background: var(--night);\n box-shadow:\n 0 calc(-1 * var(--pixel)) 0 var(--line),\n 0 var(--pixel) 0 var(--surface-raised),\n calc(-1 * var(--pixel)) 0 var(--line),\n var(--pixel) 0 var(--line),\n 0 1rem 2.5rem oklch(8% 0.03 263 / 0.42);\n overflow: hidden;\n}\n\n.panel[hidden] {\n display: none;\n}\n\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n min-block-size: 3rem;\n padding: 0.625rem 0.75rem 0.625rem 1rem;\n border-block-end: 1px solid var(--line);\n}\n\n.brand {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n color: var(--lume-bright);\n font-family: ui-monospace, \"SFMono-Regular\", Consolas, monospace;\n font-size: 0.8125rem;\n font-weight: 750;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.brand .mark {\n inline-size: 0.75rem;\n block-size: 0.75rem;\n}\n\n.close {\n display: grid;\n place-items: center;\n inline-size: 2.5rem;\n block-size: 2.5rem;\n padding: 0;\n color: var(--muted);\n background: transparent;\n font-size: 1.5rem;\n line-height: 1;\n cursor: pointer;\n touch-action: manipulation;\n}\n\n.close:hover {\n color: var(--text);\n background: var(--surface);\n}\n\n.content {\n display: grid;\n gap: 1rem;\n padding: 1.25rem;\n}\n\n.identity {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: 0.875rem;\n}\n\n.avatar {\n display: grid;\n place-items: center;\n inline-size: 2.75rem;\n block-size: 2.75rem;\n color: var(--night-deep);\n background: var(--mint);\n box-shadow:\n 0 -3px 0 var(--mint),\n 0 3px 0 oklch(62% 0.08 171),\n -3px 0 0 var(--mint),\n 3px 0 0 var(--mint);\n font-family: ui-monospace, \"SFMono-Regular\", Consolas, monospace;\n font-weight: 800;\n}\n\n.title,\n.message {\n margin: 0;\n}\n\n.title {\n color: var(--text);\n font-size: 1.125rem;\n font-weight: 760;\n line-height: 1.25;\n overflow-wrap: anywhere;\n}\n\n.message {\n max-inline-size: 34ch;\n color: var(--muted);\n font-size: 0.875rem;\n}\n\n.state-copy {\n display: grid;\n gap: 0.375rem;\n}\n\n.notice {\n margin: 0;\n padding: 0.75rem;\n color: var(--danger);\n background: oklch(25% 0.055 24);\n border: 1px solid oklch(78% 0.12 24 / 0.35);\n font-size: 0.8125rem;\n}\n\n.action {\n --edge: var(--lume);\n --edge-bottom: var(--lume-deep);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-block-size: 2.75rem;\n inline-size: calc(100% - 2 * var(--pixel));\n margin: var(--pixel);\n padding: 0.6875rem 1rem;\n color: var(--night-deep);\n background: var(--lume);\n font-weight: 750;\n cursor: pointer;\n touch-action: manipulation;\n transition:\n transform 160ms cubic-bezier(0.16, 1, 0.3, 1),\n background-color 160ms linear;\n}\n\n.action:hover:not(:disabled) {\n background: var(--lume-bright);\n}\n\n.action:active:not(:disabled) {\n transform: translateY(2px);\n}\n\n.action.secondary {\n --edge: var(--line);\n --edge-bottom: var(--surface-raised);\n color: var(--text);\n background: var(--surface);\n}\n\n.action.secondary:hover:not(:disabled) {\n --edge: var(--mint);\n color: var(--mint);\n background: var(--surface-raised);\n}\n\n.action:disabled {\n cursor: wait;\n opacity: 0.68;\n}\n\n.loading {\n display: grid;\n gap: 0.625rem;\n padding-block: 0.25rem;\n}\n\n.loading-line {\n block-size: 0.75rem;\n background: var(--surface-raised);\n animation: pixel-pulse 1.2s steps(4, end) infinite;\n}\n\n.loading-line:first-child {\n inline-size: 62%;\n}\n\n.loading-line:last-child {\n inline-size: 88%;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n@keyframes pixel-pulse {\n 0%, 100% { opacity: 0.45; }\n 50% { opacity: 1; }\n}\n\n@media (max-width: 30rem) {\n .trigger {\n padding-inline: 0.75rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n`;\n"]}

package/dist/ui/widget.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import type { PixelumeClient } from '../core/PixelumeClient.js';
+export type PixelumeWidgetPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface PixelumeWidgetOptions {
+    /** Corner used by the widget. Defaults to `bottom-right`. */
+    readonly position?: PixelumeWidgetPosition;
+    /** Distance from the selected edges in CSS pixels. Defaults to `16`. */
+    readonly offset?: number;
+    /** Mount target. Defaults to `document.body`; custom targets should establish a containing block. */
+    readonly container?: HTMLElement;
+    /** Visual treatment. `pixel` is currently the only supported theme. */
+    readonly theme?: 'pixel';
+    /** Stacking order for the host. Defaults to `2147483000`. */
+    readonly zIndex?: number;
+}
+export interface PixelumeWidgetController {
+    /** The Shadow DOM host created by the widget. */
+    readonly element: HTMLElement;
+    /** Hides the widget and closes its panel without changing authentication state. */
+    hide(): void;
+    /** Shows a previously hidden widget. */
+    show(): void;
+    /** Removes DOM/listeners/subscriptions. Safe to call more than once. */
+    destroy(): void;
+}
+/**
+ * Mounts the optional Pixelume account widget. Importing this module alone has no DOM side effects.
+ * Repeating the call with the same client and container returns the existing controller.
+ */
+export declare function mountPixelumeWidget(pixelume: PixelumeClient, options?: PixelumeWidgetOptions): PixelumeWidgetController;

package/dist/ui/widget.js ADDED Viewed

@@ -0,0 +1,378 @@
+import { WIDGET_STYLES } from './styles.js';
+const DEFAULT_POSITION = 'bottom-right';
+const DEFAULT_OFFSET = 16;
+const DEFAULT_Z_INDEX = 2_147_483_000;
+const POSITIONS = [
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+];
+const widgetsByClient = new WeakMap();
+const widgetsByContainer = new WeakMap();
+let nextWidgetId = 1;
+/**
+ * Mounts the optional Pixelume account widget. Importing this module alone has no DOM side effects.
+ * Repeating the call with the same client and container returns the existing controller.
+ */
+export function mountPixelumeWidget(pixelume, options = {}) {
+    assertClient(pixelume);
+    const document = resolveDocument(options.container);
+    const container = options.container ?? document.body;
+    const mounted = widgetsByClient.get(pixelume);
+    if (mounted) {
+        if (mounted.container === container)
+            return mounted.controller;
+        throw new Error('This Pixelume client already has a widget mounted in another container');
+    }
+    const containerOwner = widgetsByContainer.get(container);
+    if (containerOwner) {
+        throw new Error('This container already has a Pixelume widget mounted');
+    }
+    const position = resolvePosition(options.position);
+    const offset = resolveNumber('offset', options.offset, DEFAULT_OFFSET, 0, 256);
+    const zIndex = resolveNumber('zIndex', options.zIndex, DEFAULT_Z_INDEX, 0, 2_147_483_647);
+    const theme = options.theme;
+    if (theme !== undefined && theme !== 'pixel') {
+        throw new Error('Pixelume widget theme must be "pixel"');
+    }
+    const host = document.createElement('div');
+    host.dataset.pixelumeWidget = '';
+    host.dataset.position = position;
+    host.style.setProperty('--pixelume-offset', `${offset}px`);
+    host.style.setProperty('--pixelume-z-index', String(zIndex));
+    if (options.container)
+        host.dataset.contained = '';
+    const shadow = host.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = WIDGET_STYLES;
+    const root = document.createElement('div');
+    root.className = 'root';
+    const panelId = `pixelume-widget-panel-${nextWidgetId++}`;
+    const trigger = button(document, 'trigger', 'Abrir conta Pixelume');
+    trigger.type = 'button';
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-controls', panelId);
+    const triggerMark = document.createElement('span');
+    triggerMark.className = 'mark';
+    triggerMark.setAttribute('aria-hidden', 'true');
+    const triggerLabel = document.createElement('span');
+    triggerLabel.className = 'trigger-label';
+    triggerLabel.textContent = 'Pixelume';
+    const presence = document.createElement('span');
+    presence.className = 'presence';
+    presence.setAttribute('aria-hidden', 'true');
+    trigger.append(triggerMark, triggerLabel, presence);
+    const panel = document.createElement('section');
+    panel.className = 'panel';
+    panel.id = panelId;
+    panel.hidden = true;
+    panel.setAttribute('aria-label', 'Conta Pixelume');
+    panel.setAttribute('aria-live', 'polite');
+    const header = document.createElement('div');
+    header.className = 'panel-header';
+    const brand = document.createElement('span');
+    brand.className = 'brand';
+    const brandMark = document.createElement('span');
+    brandMark.className = 'mark';
+    brandMark.setAttribute('aria-hidden', 'true');
+    const brandText = document.createElement('span');
+    brandText.textContent = 'Pixelume';
+    brand.append(brandMark, brandText);
+    const close = button(document, 'close', 'Fechar painel da conta');
+    close.type = 'button';
+    close.textContent = '×';
+    close.setAttribute('aria-hidden', 'false');
+    header.append(brand, close);
+    const content = document.createElement('div');
+    content.className = 'content';
+    panel.append(header, content);
+    root.append(trigger, panel);
+    shadow.append(style, root);
+    let destroyed = false;
+    let panelOpen = false;
+    let pendingAction = null;
+    let localError = null;
+    let removeDocumentKeydown = null;
+    const onDocumentKeydown = (event) => {
+        if (event.key !== 'Escape' || !panelOpen)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        closePanel(true);
+    };
+    const openPanel = () => {
+        if (destroyed || panelOpen)
+            return;
+        panelOpen = true;
+        panel.hidden = false;
+        trigger.setAttribute('aria-expanded', 'true');
+        document.addEventListener('keydown', onDocumentKeydown, true);
+        removeDocumentKeydown = () => {
+            document.removeEventListener('keydown', onDocumentKeydown, true);
+        };
+        close.focus();
+    };
+    function closePanel(restoreFocus) {
+        if (!panelOpen)
+            return;
+        panelOpen = false;
+        panel.hidden = true;
+        trigger.setAttribute('aria-expanded', 'false');
+        removeDocumentKeydown?.();
+        removeDocumentKeydown = null;
+        if (restoreFocus && !host.hidden)
+            trigger.focus();
+    }
+    const togglePanel = () => {
+        if (panelOpen)
+            closePanel(true);
+        else
+            openPanel();
+    };
+    const runLogin = async () => {
+        if (destroyed || pendingAction)
+            return;
+        pendingAction = 'login';
+        localError = null;
+        render(pixelume.auth.state);
+        try {
+            await pixelume.auth.login();
+        }
+        catch {
+            localError =
+                'Não foi possível abrir a entrada agora. Você pode continuar jogando e tentar novamente.';
+        }
+        finally {
+            pendingAction = null;
+            render(pixelume.auth.state);
+        }
+    };
+    const runLogout = async () => {
+        if (destroyed || pendingAction)
+            return;
+        pendingAction = 'logout';
+        localError = null;
+        render(pixelume.auth.state);
+        try {
+            await pixelume.auth.logout();
+        }
+        catch {
+            localError =
+                'Você saiu deste jogo, mas não foi possível confirmar a revogação no servidor. Tente novamente mais tarde.';
+        }
+        finally {
+            pendingAction = null;
+            render(pixelume.auth.state);
+        }
+    };
+    const render = (state) => {
+        if (destroyed)
+            return;
+        content.replaceChildren();
+        content.removeAttribute('aria-busy');
+        const authenticated = state.status === 'authenticated';
+        trigger.toggleAttribute('data-authenticated', authenticated);
+        trigger.setAttribute('aria-label', authenticated
+            ? `Abrir conta Pixelume. Conectado como ${state.player.displayName}`
+            : 'Abrir conta Pixelume');
+        if (state.status === 'uninitialized' ||
+            state.status === 'redirecting' ||
+            state.status === 'exchanging') {
+            renderLoading(document, content, state.status);
+            return;
+        }
+        if (state.status === 'authenticated') {
+            const identity = document.createElement('div');
+            identity.className = 'identity';
+            const avatar = document.createElement('span');
+            avatar.className = 'avatar';
+            avatar.setAttribute('aria-hidden', 'true');
+            avatar.textContent = playerInitial(state.player.displayName);
+            const copy = document.createElement('div');
+            copy.className = 'state-copy';
+            copy.append(textElement(document, 'p', 'title', `Olá, ${state.player.displayName}!`), textElement(document, 'p', 'message', 'Sua conta está conectada a este jogo.'));
+            identity.append(avatar, copy);
+            content.append(identity);
+            if (localError)
+                content.append(notice(document, localError));
+            const logout = button(document, 'action secondary', 'Sair da conta Pixelume neste jogo');
+            logout.type = 'button';
+            logout.textContent = pendingAction === 'logout' ? 'Saindo…' : 'Sair deste jogo';
+            logout.disabled = pendingAction !== null;
+            logout.addEventListener('click', () => void runLogout());
+            content.append(logout);
+            return;
+        }
+        const copy = document.createElement('div');
+        copy.className = 'state-copy';
+        copy.append(textElement(document, 'p', 'title', anonymousTitle(state)), textElement(document, 'p', 'message', anonymousMessage(state)));
+        content.append(copy);
+        if (state.error || localError) {
+            content.append(notice(document, localError ??
+                'Não foi possível verificar sua conta. Você pode continuar jogando e tentar novamente.'));
+        }
+        const login = button(document, 'action', 'Entrar com Pixelume');
+        login.type = 'button';
+        login.textContent = pendingAction === 'login' ? 'Abrindo Pixelume…' : 'Entrar com Pixelume';
+        login.disabled = pendingAction !== null;
+        login.addEventListener('click', () => void runLogin());
+        content.append(login);
+    };
+    const unsubscribe = pixelume.auth.subscribe((state) => {
+        localError = null;
+        render(state);
+    });
+    const stopInputPropagation = (event) => {
+        event.stopPropagation();
+    };
+    const closeFromButton = () => {
+        closePanel(true);
+    };
+    const isolatedEvents = [
+        'click',
+        'pointerdown',
+        'pointerup',
+        'touchstart',
+        'touchend',
+        'keydown',
+        'keyup',
+    ];
+    for (const eventName of isolatedEvents)
+        host.addEventListener(eventName, stopInputPropagation);
+    trigger.addEventListener('click', togglePanel);
+    close.addEventListener('click', closeFromButton);
+    const controller = Object.freeze({
+        element: host,
+        hide() {
+            if (destroyed)
+                return;
+            closePanel(false);
+            host.hidden = true;
+        },
+        show() {
+            if (destroyed)
+                return;
+            host.hidden = false;
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            closePanel(false);
+            removeDocumentKeydown?.();
+            removeDocumentKeydown = null;
+            unsubscribe();
+            trigger.removeEventListener('click', togglePanel);
+            close.removeEventListener('click', closeFromButton);
+            for (const eventName of isolatedEvents)
+                host.removeEventListener(eventName, stopInputPropagation);
+            host.remove();
+            widgetsByClient.delete(pixelume);
+            widgetsByContainer.delete(container);
+        },
+    });
+    render(pixelume.auth.state);
+    container.append(host);
+    widgetsByClient.set(pixelume, { container, controller });
+    widgetsByContainer.set(container, pixelume);
+    return controller;
+}
+function assertClient(value) {
+    if (typeof value !== 'object' || value === null)
+        throw new TypeError('Pixelume widget requires a client');
+    const auth = Reflect.get(value, 'auth');
+    if (typeof auth !== 'object' || auth === null)
+        throw new TypeError('Pixelume widget requires client.auth');
+    for (const method of ['login', 'logout', 'subscribe']) {
+        if (typeof Reflect.get(auth, method) !== 'function') {
+            throw new TypeError(`Pixelume widget requires client.auth.${method}()`);
+        }
+    }
+}
+function resolveDocument(container) {
+    if (container) {
+        if (typeof container.attachShadow !== 'function') {
+            throw new TypeError('Pixelume widget container must be an HTMLElement');
+        }
+        return container.ownerDocument;
+    }
+    const candidate = Reflect.get(globalThis, 'document');
+    if (typeof candidate !== 'object' || candidate === null || !('createElement' in candidate)) {
+        throw new Error('Pixelume widget can only be mounted in a browser document');
+    }
+    return candidate;
+}
+function resolvePosition(value) {
+    if (value === undefined)
+        return DEFAULT_POSITION;
+    if (!POSITIONS.includes(value)) {
+        throw new Error(`Pixelume widget position must be one of: ${POSITIONS.join(', ')}`);
+    }
+    return value;
+}
+function resolveNumber(name, value, fallback, minimum, maximum) {
+    if (value === undefined)
+        return fallback;
+    if (!Number.isInteger(value) || value < minimum || value > maximum) {
+        throw new Error(`Pixelume widget ${name} must be an integer from ${minimum} to ${maximum}`);
+    }
+    return value;
+}
+function button(document, className, label) {
+    const element = document.createElement('button');
+    element.className = className;
+    element.setAttribute('aria-label', label);
+    return element;
+}
+function textElement(document, tag, className, text) {
+    const element = document.createElement(tag);
+    element.className = className;
+    element.textContent = text;
+    return element;
+}
+function notice(document, text) {
+    const element = textElement(document, 'p', 'notice', text);
+    element.setAttribute('role', 'alert');
+    return element;
+}
+function renderLoading(document, content, status) {
+    const labels = {
+        uninitialized: 'Preparando sua conta…',
+        redirecting: 'Abrindo o Pixelume Auth…',
+        exchanging: 'Concluindo a entrada…',
+    };
+    content.setAttribute('aria-busy', 'true');
+    const visual = document.createElement('div');
+    visual.className = 'loading';
+    visual.setAttribute('aria-hidden', 'true');
+    for (let index = 0; index < 2; index += 1) {
+        const line = document.createElement('span');
+        line.className = 'loading-line';
+        visual.append(line);
+    }
+    const label = textElement(document, 'p', 'sr-only', labels[status]);
+    content.append(visual, label);
+}
+function playerInitial(displayName) {
+    return Array.from(displayName.trim())[0]?.toLocaleUpperCase('pt-BR') ?? 'P';
+}
+function anonymousTitle(state) {
+    if (state.reason === 'logged_out')
+        return 'Você saiu deste jogo';
+    if (state.reason === 'expired')
+        return 'Sua sessão expirou';
+    if (state.reason === 'cancelled')
+        return 'Entrada cancelada';
+    return 'Sua conta Pixelume';
+}
+function anonymousMessage(state) {
+    if (state.reason === 'logged_out')
+        return 'Entre novamente quando quiser.';
+    if (state.reason === 'expired')
+        return 'Entre novamente para continuar com sua conta.';
+    if (state.reason === 'cancelled')
+        return 'Você pode continuar como visitante ou tentar novamente.';
+    return 'Entre pelo portal seguro da Pixelume. Sua senha nunca passa pelo jogo.';
+}
+//# sourceMappingURL=widget.js.map

package/dist/ui/widget.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"widget.js","sourceRoot":"","sources":["../../src/ui/widget.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PixelumeClient } from '../core/PixelumeClient.js';\nimport type { PixelumeAuthState } from '../modules/auth/AuthModule.js';\nimport { WIDGET_STYLES } from './styles.js';\n\nexport type PixelumeWidgetPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport interface PixelumeWidgetOptions {\n /** Corner used by the widget. Defaults to `bottom-right`. */\n readonly position?: PixelumeWidgetPosition;\n /** Distance from the selected edges in CSS pixels. Defaults to `16`. */\n readonly offset?: number;\n /** Mount target. Defaults to `document.body`; custom targets should establish a containing block. */\n readonly container?: HTMLElement;\n /** Visual treatment. `pixel` is currently the only supported theme. */\n readonly theme?: 'pixel';\n /** Stacking order for the host. Defaults to `2147483000`. */\n readonly zIndex?: number;\n}\n\nexport interface PixelumeWidgetController {\n /** The Shadow DOM host created by the widget. */\n readonly element: HTMLElement;\n /** Hides the widget and closes its panel without changing authentication state. */\n hide(): void;\n /** Shows a previously hidden widget. */\n show(): void;\n /** Removes DOM/listeners/subscriptions. Safe to call more than once. */\n destroy(): void;\n}\n\nconst DEFAULT_POSITION: PixelumeWidgetPosition = 'bottom-right';\nconst DEFAULT_OFFSET = 16;\nconst DEFAULT_Z_INDEX = 2_147_483_000;\nconst POSITIONS: readonly PixelumeWidgetPosition[] = [\n 'top-left',\n 'top-right',\n 'bottom-left',\n 'bottom-right',\n];\n\ninterface MountedWidget {\n readonly container: HTMLElement;\n readonly controller: PixelumeWidgetController;\n}\n\nconst widgetsByClient = new WeakMap<object, MountedWidget>();\nconst widgetsByContainer = new WeakMap<HTMLElement, object>();\nlet nextWidgetId = 1;\n\n/**\n * Mounts the optional Pixelume account widget. Importing this module alone has no DOM side effects.\n * Repeating the call with the same client and container returns the existing controller.\n */\nexport function mountPixelumeWidget(\n pixelume: PixelumeClient,\n options: PixelumeWidgetOptions = {},\n): PixelumeWidgetController {\n assertClient(pixelume);\n const document = resolveDocument(options.container);\n const container = options.container ?? document.body;\n\n const mounted = widgetsByClient.get(pixelume);\n if (mounted) {\n if (mounted.container === container) return mounted.controller;\n throw new Error('This Pixelume client already has a widget mounted in another container');\n }\n const containerOwner = widgetsByContainer.get(container);\n if (containerOwner) {\n throw new Error('This container already has a Pixelume widget mounted');\n }\n\n const position = resolvePosition(options.position);\n const offset = resolveNumber('offset', options.offset, DEFAULT_OFFSET, 0, 256);\n const zIndex = resolveNumber('zIndex', options.zIndex, DEFAULT_Z_INDEX, 0, 2_147_483_647);\n const theme: unknown = options.theme;\n if (theme !== undefined && theme !== 'pixel') {\n throw new Error('Pixelume widget theme must be \"pixel\"');\n }\n\n const host = document.createElement('div');\n host.dataset.pixelumeWidget = '';\n host.dataset.position = position;\n host.style.setProperty('--pixelume-offset', `${offset}px`);\n host.style.setProperty('--pixelume-z-index', String(zIndex));\n if (options.container) host.dataset.contained = '';\n\n const shadow = host.attachShadow({ mode: 'open' });\n const style = document.createElement('style');\n style.textContent = WIDGET_STYLES;\n\n const root = document.createElement('div');\n root.className = 'root';\n\n const panelId = `pixelume-widget-panel-${nextWidgetId++}`;\n const trigger = button(document, 'trigger', 'Abrir conta Pixelume');\n trigger.type = 'button';\n trigger.setAttribute('aria-expanded', 'false');\n trigger.setAttribute('aria-controls', panelId);\n const triggerMark = document.createElement('span');\n triggerMark.className = 'mark';\n triggerMark.setAttribute('aria-hidden', 'true');\n const triggerLabel = document.createElement('span');\n triggerLabel.className = 'trigger-label';\n triggerLabel.textContent = 'Pixelume';\n const presence = document.createElement('span');\n presence.className = 'presence';\n presence.setAttribute('aria-hidden', 'true');\n trigger.append(triggerMark, triggerLabel, presence);\n\n const panel = document.createElement('section');\n panel.className = 'panel';\n panel.id = panelId;\n panel.hidden = true;\n panel.setAttribute('aria-label', 'Conta Pixelume');\n panel.setAttribute('aria-live', 'polite');\n\n const header = document.createElement('div');\n header.className = 'panel-header';\n const brand = document.createElement('span');\n brand.className = 'brand';\n const brandMark = document.createElement('span');\n brandMark.className = 'mark';\n brandMark.setAttribute('aria-hidden', 'true');\n const brandText = document.createElement('span');\n brandText.textContent = 'Pixelume';\n brand.append(brandMark, brandText);\n const close = button(document, 'close', 'Fechar painel da conta');\n close.type = 'button';\n close.textContent = '×';\n close.setAttribute('aria-hidden', 'false');\n header.append(brand, close);\n\n const content = document.createElement('div');\n content.className = 'content';\n panel.append(header, content);\n root.append(trigger, panel);\n shadow.append(style, root);\n\n let destroyed = false;\n let panelOpen = false;\n let pendingAction: 'login' | 'logout' | null = null;\n let localError: string | null = null;\n let removeDocumentKeydown: (() => void) | null = null;\n\n const onDocumentKeydown = (event: KeyboardEvent): void => {\n if (event.key !== 'Escape' || !panelOpen) return;\n event.preventDefault();\n event.stopPropagation();\n closePanel(true);\n };\n\n const openPanel = (): void => {\n if (destroyed || panelOpen) return;\n panelOpen = true;\n panel.hidden = false;\n trigger.setAttribute('aria-expanded', 'true');\n document.addEventListener('keydown', onDocumentKeydown, true);\n removeDocumentKeydown = () => {\n document.removeEventListener('keydown', onDocumentKeydown, true);\n };\n close.focus();\n };\n\n function closePanel(restoreFocus: boolean): void {\n if (!panelOpen) return;\n panelOpen = false;\n panel.hidden = true;\n trigger.setAttribute('aria-expanded', 'false');\n removeDocumentKeydown?.();\n removeDocumentKeydown = null;\n if (restoreFocus && !host.hidden) trigger.focus();\n }\n\n const togglePanel = (): void => {\n if (panelOpen) closePanel(true);\n else openPanel();\n };\n\n const runLogin = async (): Promise<void> => {\n if (destroyed || pendingAction) return;\n pendingAction = 'login';\n localError = null;\n render(pixelume.auth.state);\n try {\n await pixelume.auth.login();\n } catch {\n localError =\n 'Não foi possível abrir a entrada agora. Você pode continuar jogando e tentar novamente.';\n } finally {\n pendingAction = null;\n render(pixelume.auth.state);\n }\n };\n\n const runLogout = async (): Promise<void> => {\n if (destroyed || pendingAction) return;\n pendingAction = 'logout';\n localError = null;\n render(pixelume.auth.state);\n try {\n await pixelume.auth.logout();\n } catch {\n localError =\n 'Você saiu deste jogo, mas não foi possível confirmar a revogação no servidor. Tente novamente mais tarde.';\n } finally {\n pendingAction = null;\n render(pixelume.auth.state);\n }\n };\n\n const render = (state: PixelumeAuthState): void => {\n if (destroyed) return;\n content.replaceChildren();\n content.removeAttribute('aria-busy');\n const authenticated = state.status === 'authenticated';\n trigger.toggleAttribute('data-authenticated', authenticated);\n trigger.setAttribute(\n 'aria-label',\n authenticated\n ? `Abrir conta Pixelume. Conectado como ${state.player.displayName}`\n : 'Abrir conta Pixelume',\n );\n\n if (\n state.status === 'uninitialized' ||\n state.status === 'redirecting' ||\n state.status === 'exchanging'\n ) {\n renderLoading(document, content, state.status);\n return;\n }\n\n if (state.status === 'authenticated') {\n const identity = document.createElement('div');\n identity.className = 'identity';\n const avatar = document.createElement('span');\n avatar.className = 'avatar';\n avatar.setAttribute('aria-hidden', 'true');\n avatar.textContent = playerInitial(state.player.displayName);\n const copy = document.createElement('div');\n copy.className = 'state-copy';\n copy.append(\n textElement(document, 'p', 'title', `Olá, ${state.player.displayName}!`),\n textElement(document, 'p', 'message', 'Sua conta está conectada a este jogo.'),\n );\n identity.append(avatar, copy);\n content.append(identity);\n if (localError) content.append(notice(document, localError));\n const logout = button(document, 'action secondary', 'Sair da conta Pixelume neste jogo');\n logout.type = 'button';\n logout.textContent = pendingAction === 'logout' ? 'Saindo…' : 'Sair deste jogo';\n logout.disabled = pendingAction !== null;\n logout.addEventListener('click', () => void runLogout());\n content.append(logout);\n return;\n }\n\n const copy = document.createElement('div');\n copy.className = 'state-copy';\n copy.append(\n textElement(document, 'p', 'title', anonymousTitle(state)),\n textElement(document, 'p', 'message', anonymousMessage(state)),\n );\n content.append(copy);\n if (state.error || localError) {\n content.append(\n notice(\n document,\n localError ??\n 'Não foi possível verificar sua conta. Você pode continuar jogando e tentar novamente.',\n ),\n );\n }\n const login = button(document, 'action', 'Entrar com Pixelume');\n login.type = 'button';\n login.textContent = pendingAction === 'login' ? 'Abrindo Pixelume…' : 'Entrar com Pixelume';\n login.disabled = pendingAction !== null;\n login.addEventListener('click', () => void runLogin());\n content.append(login);\n };\n\n const unsubscribe = pixelume.auth.subscribe((state) => {\n localError = null;\n render(state);\n });\n\n const stopInputPropagation = (event: Event): void => {\n event.stopPropagation();\n };\n const closeFromButton = (): void => {\n closePanel(true);\n };\n const isolatedEvents = [\n 'click',\n 'pointerdown',\n 'pointerup',\n 'touchstart',\n 'touchend',\n 'keydown',\n 'keyup',\n ] as const;\n for (const eventName of isolatedEvents) host.addEventListener(eventName, stopInputPropagation);\n trigger.addEventListener('click', togglePanel);\n close.addEventListener('click', closeFromButton);\n\n const controller: PixelumeWidgetController = Object.freeze({\n element: host,\n hide(): void {\n if (destroyed) return;\n closePanel(false);\n host.hidden = true;\n },\n show(): void {\n if (destroyed) return;\n host.hidden = false;\n },\n destroy(): void {\n if (destroyed) return;\n destroyed = true;\n closePanel(false);\n removeDocumentKeydown?.();\n removeDocumentKeydown = null;\n unsubscribe();\n trigger.removeEventListener('click', togglePanel);\n close.removeEventListener('click', closeFromButton);\n for (const eventName of isolatedEvents)\n host.removeEventListener(eventName, stopInputPropagation);\n host.remove();\n widgetsByClient.delete(pixelume);\n widgetsByContainer.delete(container);\n },\n });\n\n render(pixelume.auth.state);\n container.append(host);\n widgetsByClient.set(pixelume, { container, controller });\n widgetsByContainer.set(container, pixelume);\n return controller;\n}\n\nfunction assertClient(value: unknown): asserts value is PixelumeClient {\n if (typeof value !== 'object' || value === null)\n throw new TypeError('Pixelume widget requires a client');\n const auth = Reflect.get(value, 'auth') as unknown;\n if (typeof auth !== 'object' || auth === null)\n throw new TypeError('Pixelume widget requires client.auth');\n for (const method of ['login', 'logout', 'subscribe'] as const) {\n if (typeof Reflect.get(auth, method) !== 'function') {\n throw new TypeError(`Pixelume widget requires client.auth.${method}()`);\n }\n }\n}\n\nfunction resolveDocument(container: HTMLElement | undefined): Document {\n if (container) {\n if (typeof container.attachShadow !== 'function') {\n throw new TypeError('Pixelume widget container must be an HTMLElement');\n }\n return container.ownerDocument;\n }\n const candidate = Reflect.get(globalThis, 'document') as unknown;\n if (typeof candidate !== 'object' || candidate === null || !('createElement' in candidate)) {\n throw new Error('Pixelume widget can only be mounted in a browser document');\n }\n return candidate as Document;\n}\n\nfunction resolvePosition(value: PixelumeWidgetPosition | undefined): PixelumeWidgetPosition {\n if (value === undefined) return DEFAULT_POSITION;\n if (!POSITIONS.includes(value)) {\n throw new Error(`Pixelume widget position must be one of: ${POSITIONS.join(', ')}`);\n }\n return value;\n}\n\nfunction resolveNumber(\n name: string,\n value: number | undefined,\n fallback: number,\n minimum: number,\n maximum: number,\n): number {\n if (value === undefined) return fallback;\n if (!Number.isInteger(value) || value < minimum || value > maximum) {\n throw new Error(`Pixelume widget ${name} must be an integer from ${minimum} to ${maximum}`);\n }\n return value;\n}\n\nfunction button(document: Document, className: string, label: string): HTMLButtonElement {\n const element = document.createElement('button');\n element.className = className;\n element.setAttribute('aria-label', label);\n return element;\n}\n\nfunction textElement(\n document: Document,\n tag: 'p',\n className: string,\n text: string,\n): HTMLParagraphElement {\n const element = document.createElement(tag);\n element.className = className;\n element.textContent = text;\n return element;\n}\n\nfunction notice(document: Document, text: string): HTMLParagraphElement {\n const element = textElement(document, 'p', 'notice', text);\n element.setAttribute('role', 'alert');\n return element;\n}\n\nfunction renderLoading(\n document: Document,\n content: HTMLElement,\n status: 'uninitialized' | 'redirecting' | 'exchanging',\n): void {\n const labels = {\n uninitialized: 'Preparando sua conta…',\n redirecting: 'Abrindo o Pixelume Auth…',\n exchanging: 'Concluindo a entrada…',\n } as const;\n content.setAttribute('aria-busy', 'true');\n const visual = document.createElement('div');\n visual.className = 'loading';\n visual.setAttribute('aria-hidden', 'true');\n for (let index = 0; index < 2; index += 1) {\n const line = document.createElement('span');\n line.className = 'loading-line';\n visual.append(line);\n }\n const label = textElement(document, 'p', 'sr-only', labels[status]);\n content.append(visual, label);\n}\n\nfunction playerInitial(displayName: string): string {\n return Array.from(displayName.trim())[0]?.toLocaleUpperCase('pt-BR') ?? 'P';\n}\n\nfunction anonymousTitle(state: Extract<PixelumeAuthState, { status: 'anonymous' }>): string {\n if (state.reason === 'logged_out') return 'Você saiu deste jogo';\n if (state.reason === 'expired') return 'Sua sessão expirou';\n if (state.reason === 'cancelled') return 'Entrada cancelada';\n return 'Sua conta Pixelume';\n}\n\nfunction anonymousMessage(state: Extract<PixelumeAuthState, { status: 'anonymous' }>): string {\n if (state.reason === 'logged_out') return 'Entre novamente quando quiser.';\n if (state.reason === 'expired') return 'Entre novamente para continuar com sua conta.';\n if (state.reason === 'cancelled')\n return 'Você pode continuar como visitante ou tentar novamente.';\n return 'Entre pelo portal seguro da Pixelume. Sua senha nunca passa pelo jogo.';\n}\n"]}

package/dist/version.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 /** Version of the SDK package. Kept in sync with `package.json` (checked by tests and by the release workflow). */
-export declare const SDK_VERSION = "0.2.0";
+export declare const SDK_VERSION = "0.3.0";

package/dist/version.js CHANGED Viewed

@@ -1,3 +1,3 @@
 /** Version of the SDK package. Kept in sync with `package.json` (checked by tests and by the release workflow). */
-export const SDK_VERSION = '0.2.0';
+export const SDK_VERSION = '0.3.0';
 //# sourceMappingURL=version.js.map

package/dist/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC","sourcesContent":["/** Version of the SDK package. Kept in sync with `package.json` (checked by tests and by the release workflow). */\nexport const SDK_VERSION = '0.2.0';\n"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,MAAM,CAAC,MAAM,WAAW,GAAG,OAAO,CAAC","sourcesContent":["/** Version of the SDK package. Kept in sync with `package.json` (checked by tests and by the release workflow). */\nexport const SDK_VERSION = '0.3.0';\n"]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pixelume/sdk",
-  "version": "0.2.0",
-  "description": "SDK TypeScript da Pixelume para jogos web: SSO com PKCE e cliente seguro para a Pixelume API.",
+  "version": "0.3.0",
+  "description": "SDK TypeScript da Pixelume para jogos web: core headless, SSO com PKCE e widget oficial opcional.",
   "license": "UNLICENSED",
   "author": "Erickson Nascimento",
   "repository": {
@@ -25,6 +25,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
@@ -61,6 +65,7 @@
     "@eslint/js": "10.0.1",
     "@types/node": "^24.10.1",
     "eslint": "10.12.0",
+    "happy-dom": "21.0.1",
     "prettier": "3.9.10",
     "publint": "0.3.25",
     "typescript": "6.0.3",