vitral 0.0.0-stage → 0.2.0

package/dist/iframe.js

@@ -0,0 +1,236 @@
+import {
+  splitName
+} from "./chunk-HP6QWU6K.js";
+import {
+  verifyIntegrity
+} from "./chunk-S5MZT5IT.js";
+import {
+  events,
+  navigate,
+  setFrameMounter,
+  track
+} from "./chunk-NCONW6WS.js";
+import {
+  resolveEntry
+} from "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import {
+  RemoteError,
+  fetchBytes,
+  withRetry,
+  withTimeout
+} from "./chunk-PX7PBCCT.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
+
+// src/iframe-frame.ts
+var FRAME_RUNTIME = `function (w, load) {
+  var parent = w.parent, doc = w.document, handlers = {}, last = {}, channel = {}, mounted = null, stage = 'LOAD_FAILED'
+  function post(type, data) { parent.postMessage({ vitral: 1, type: type, data: data }, '*') }
+  function call(fn, arg) { try { fn(arg) } catch (e) { w.console.error(e) } }
+  var events = {
+    emit: function (type, payload) { post('emit', { type: type, payload: payload }) },
+    on: function (type, fn) {
+      if (!handlers[type]) { handlers[type] = []; post('on', { type: type }) }
+      handlers[type].push(fn)
+      return function () { handlers[type] = handlers[type].filter(function (h) { return h !== fn }) }
+    },
+    last: function (type) { return last[type] }
+  }
+  function start(d) {
+    var root = doc.createElement('div')
+    root.setAttribute('data-vitral-root', d.name)
+    if (d.scope) root.setAttribute('data-vitral-scope', d.scope)
+    doc.body.appendChild(root)
+    // Ponto de extens\xE3o: uma ponte nova registra handlers em channel[tipo] e
+    // acrescenta campos aqui (a Fase 2 acrescenta ctx.shared).
+    var ctx = {
+      name: d.name, baseUrl: d.baseUrl, events: events, shadowRoot: null, protocol: 1,
+      reportError: function (e) { post('report', { message: String((e && e.message) || e) }) },
+      navigate: function (url, o) { post('navigate', { url: String(url), replace: !!(o && o.replace) }) }
+    }
+    Promise.all(d.css.map(function (href) {
+      return new Promise(function (done) {
+        var link = doc.createElement('link')
+        link.rel = 'stylesheet'; link.href = href; link.crossOrigin = 'anonymous'
+        link.onload = link.onerror = done
+        doc.head.appendChild(link)
+      })
+    })).then(function () {
+      return load(d.code ? w.URL.createObjectURL(new w.Blob([d.code], { type: 'text/javascript' })) : d.url)
+    }).then(function (ns) {
+      if (!d.key) return ns
+      var table = ns.exposes, part = table && table[d.key]
+      if (!part) { stage = 'NOT_EXPOSED'; throw new Error(d.name + ' n\xE3o exp\xF5e ' + d.key) }
+      return typeof part === 'function' ? part() : part
+    }).then(function (ns) {
+      var mod = (ns && ns.default) || ns
+      if (!mod || typeof mod.mount !== 'function') { stage = 'INVALID_MODULE'; throw new Error('o m\xF3dulo n\xE3o exporta mount()') }
+      stage = 'MOUNT_FAILED'
+      return mod.mount(root, d.props, ctx)
+    }).then(function (handle) {
+      mounted = handle
+      post('mounted')
+      var size = function () { post('size', { height: Math.ceil(doc.body.getBoundingClientRect().height) }) }
+      size()
+      if (w.ResizeObserver) new w.ResizeObserver(size).observe(doc.body)
+    }, function (e) {
+      post('error', { code: stage, message: String((e && e.message) || e) })
+    })
+  }
+  w.addEventListener('message', function (e) {
+    var m = e.data
+    if (e.source !== parent || !m || m.vitral !== 1) return
+    var d = m.data
+    if (m.type === 'mount') start(d)
+    else if (m.type === 'update') { if (mounted && mounted.update) mounted.update(d) }
+    else if (m.type === 'unmount') { if (mounted) mounted.unmount(); mounted = null }
+    else if (m.type === 'last') last[d.type] = d.payload
+    else if (m.type === 'event') {
+      last[d.type] = d.payload
+      ;(handlers[d.type] || []).slice().forEach(function (h) { call(h, d.payload) })
+    } else (channel[m.type] || []).forEach(function (h) { call(h, d) })
+  })
+  post('ready')
+}`;
+var FRAME_SCRIPT = `(${FRAME_RUNTIME})(window, function (u) { return import(u) })`;
+var FRAME_HTML = `<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0}body{display:flow-root}</style></head><body><script>${FRAME_SCRIPT}</script></body></html>`;
+
+// src/iframe.ts
+var CODES = ["LOAD_FAILED", "NOT_EXPOSED", "INVALID_MODULE", "MOUNT_FAILED"];
+function enableIframe(options = {}) {
+  const sandbox = options.sandbox ?? "allow-scripts";
+  if (/\ballow-same-origin\b/.test(sandbox) && /\ballow-scripts\b/.test(sandbox)) {
+    console.warn("[vitral] sandbox com allow-scripts e allow-same-origin n\xE3o isola o remote da p\xE1gina.");
+  }
+  setFrameMounter((target, name, props, mountOptions) => mountFrame(target, name, props, mountOptions, sandbox, options.bridges ?? []));
+}
+async function mountFrame(target, name, props, options, sandbox, bridges) {
+  const p = protocol();
+  const { timeout, retries } = p.settings();
+  const [remote, key] = splitName(name);
+  const entry = p.entry(remote);
+  if (!entry) throw new RemoteError("NOT_REGISTERED", name, "remote n\xE3o registrado. Use configure({ remotes }).");
+  if (!entry.url) throw new RemoteError("MOUNT_FAILED", name, "remote local (module) n\xE3o roda em iframe: registre a URL dele");
+  const { integrity, ...resolved } = await resolveEntry(remote, entry);
+  const code = integrity ? await withRetry(retries, async () => {
+    const bytes = await fetchBytes(resolved.entry, timeout, name);
+    await verifyIntegrity(name, bytes, integrity);
+    return bytes;
+  }) : void 0;
+  track(name, resolved.entry);
+  const baseUrl = /^https?:/.test(resolved.entry) ? new URL(".", resolved.entry).href : resolved.entry;
+  const frame = document.createElement("iframe");
+  frame.setAttribute("sandbox", sandbox);
+  frame.setAttribute("data-vitral-root", name);
+  frame.title = name;
+  frame.style.cssText = "display:block;width:100%;height:0;border:0";
+  frame.srcdoc = FRAME_HTML;
+  let warned = false;
+  const post = (type, data) => {
+    const win = frame.contentWindow;
+    if (!win) return;
+    try {
+      win.postMessage({ vitral: 1, type, data }, "*");
+    } catch {
+      if (!warned) console.warn(`[vitral] ${name}: props e eventos no modo iframe precisam ser serializ\xE1veis; o que n\xE3o \xE9 foi descartado.`);
+      warned = true;
+      win.postMessage({ vitral: 1, type, data: JSON.parse(JSON.stringify(data ?? null)) }, "*");
+    }
+  };
+  const subs = /* @__PURE__ */ new Map();
+  const channel = /* @__PURE__ */ new Map();
+  const port = {
+    post,
+    on(type, handler) {
+      if (!channel.has(type)) channel.set(type, /* @__PURE__ */ new Set());
+      channel.get(type).add(handler);
+      return () => channel.get(type)?.delete(handler);
+    }
+  };
+  let settle = null;
+  const ready = new Promise((ok, fail) => settle = { ok, fail });
+  const onMessage = (e) => {
+    const m = e.data;
+    if (e.source !== frame.contentWindow || !m || m.vitral !== 1) return;
+    const d = m.data;
+    switch (m.type) {
+      case "ready":
+        if (settle) post("mount", { name, key, code, url: resolved.entry, css: resolved.css, scope: resolved.scope, baseUrl, props });
+        break;
+      case "mounted":
+        settle?.ok();
+        settle = null;
+        break;
+      case "error":
+        settle?.fail(new RemoteError(CODES.includes(d?.code) ? d.code : "MOUNT_FAILED", name, String(d?.message)));
+        settle = null;
+        break;
+      case "size":
+        frame.style.height = `${Math.max(0, Number(d?.height) || 0)}px`;
+        break;
+      case "emit":
+        events.emit(String(d?.type), d?.payload);
+        break;
+      case "on": {
+        const type = String(d?.type);
+        if (subs.has(type)) break;
+        subs.set(type, events.on(type, (payload) => post("event", { type, payload })));
+        const value = events.last(type);
+        if (value !== void 0) post("last", { type, payload: value });
+        break;
+      }
+      case "navigate": {
+        const url = new URL(String(d?.url), location.href);
+        if (url.origin === location.origin) navigate(url.href, { replace: !!d?.replace });
+        else console.warn(`[vitral] ${name}: navega\xE7\xE3o para outra origem bloqueada (${url.origin})`);
+        break;
+      }
+      case "report": {
+        const err = new RemoteError("RENDER_FAILED", name, String(d?.message));
+        if (options.onError) options.onError(err);
+        else console.error(err);
+        break;
+      }
+      default:
+        for (const h of [...channel.get(m.type) ?? []]) h(d);
+    }
+  };
+  const disposers = [];
+  const cleanup = () => {
+    removeEventListener("message", onMessage);
+    for (const off of subs.values()) off();
+    for (const off of disposers) off();
+    subs.clear();
+    frame.remove();
+  };
+  addEventListener("message", onMessage);
+  for (const bridge of bridges) {
+    const off = bridge(port, { name });
+    if (off) disposers.push(off);
+  }
+  target.appendChild(frame);
+  try {
+    await withTimeout(timeout, name, ready);
+  } catch (e) {
+    cleanup();
+    throw e;
+  }
+  let alive = true;
+  return {
+    update(next) {
+      if (alive) post("update", next);
+    },
+    unmount() {
+      if (!alive) return;
+      alive = false;
+      post("unmount");
+      cleanup();
+    }
+  };
+}
+export {
+  FRAME_SCRIPT,
+  enableIframe
+};

package/dist/index.d.ts

@@ -0,0 +1,186 @@
+import { V as VitralConfig, c as RemoteEntry, P as Props, a as RemoteModule, I as Isolation, b as StyleOptions, M as MountedRemote, E as EventBus, R as RemoteContext, d as SharedValue } from './types-BV-hUrms.js';
+export { C as CheckedProps, H as Handler, e as PropsOf, f as ProvideOptions, g as ProvidedValue, h as RemoteManifest, i as RemoteMetric, j as Remotes, S as Shared, k as SharedApi, l as SharedModules, m as SharedType, n as batch, p as provide, s as shared } from './types-BV-hUrms.js';
+import { R as RemoteError } from './errors-KKB8FGCz.js';
+export { a as RemoteErrorCode } from './errors-KKB8FGCz.js';
+export { R as RemoteSlot, a as SlotOptions, S as SlotStatus, c as createSlot } from './slot-pB276oPt.js';
+export { e as events } from './events-DUdjhfps.js';
+export { n as navigate } from './navigate-BRG1WJUM.js';
+export { r as __reset } from './state-BDdCwc21.js';
+
+/** Configura a lib. Pode ser chamada mais de uma vez; as opções são mescladas. */
+declare function configure(config: VitralConfig): void;
+/** Registra (ou substitui) um remote. */
+declare function register(name: string, entry: string | RemoteEntry): void;
+/**
+ * Registra a URL de um `src` e devolve o nome para montar. Sem `name`, o nome
+ * é a própria URL (e o nome do manifesto vira um apelido). Com `trusted`, a
+ * origem entra na allowlist mesmo com `allowedOrigins`: vale para URL escrita
+ * no código do host, nunca para URL vinda de dados.
+ */
+declare function registerSrc(src: string, name?: string, trusted?: boolean): string;
+
+/** Uma chave do store vista de fora (devtools, SSR, ponte do iframe). */
+interface SharedEntry {
+    key: string;
+    value: unknown;
+    /** `false` quando só o dono altera. */
+    writable: boolean;
+    /** Quem é o dono (nome do remote; vazio para o host ou sem nome). */
+    owner?: string;
+    /** Quem fez a última mudança. */
+    by?: string;
+    /** Quantas assinaturas ativas a chave tem. */
+    subscribers: number;
+}
+/**
+ * Store guardado no protocolo global (`globalThis[Symbol.for('vitral')].shared()`).
+ * Faz parte do protocolo v1: só cresce com métodos novos.
+ */
+interface SharedStore {
+    /** Valor atual; `undefined` se a chave ainda não tem valor. */
+    get(key: string): unknown;
+    /**
+     * Troca o valor. Passa se `token` é o do dono ou se a chave aceita escrita.
+     * Devolve `false` quando a escrita foi bloqueada (`writable: false`).
+     */
+    set(key: string, value: unknown, token?: object, by?: string): boolean;
+    /** Chama `fn(valor)` a cada mudança (não na hora). Devolve a função que cancela. */
+    subscribe(key: string, fn: (value: unknown) => void): () => void;
+    /**
+     * Torna-se dono de uma chave sem dono e grava `value` (um valor vindo do
+     * SSR ainda não reivindicado é mantido). Devolve o token do dono, ou
+     * `undefined` se a chave já tem dono.
+     */
+    own(key: string, value: unknown, writable: boolean, by?: string): object | undefined;
+    /** O dono larga a chave. O valor fica e a chave volta a aceitar escrita. */
+    release(key: string, token: object): void;
+    /** Roda `fn` e notifica cada chave alterada uma vez só, no fim. */
+    batch<R>(fn: () => R): R;
+    /** Chaves com valor e seus metadados. */
+    list(): SharedEntry[];
+}
+
+/** Baixa (uma vez só) e devolve o módulo de um remote. */
+declare function loadRemote<P extends Props = Props>(name: string): Promise<RemoteModule<P>>;
+/**
+ * Carrega um módulo sem UI que um remote expõe (funções, stores, constantes),
+ * com a mesma verificação de SRI e de origem dos componentes.
+ *
+ *   const api = await loadModule<typeof import('./tipos/carrinho-api')>('carrinho/api')
+ *
+ * Sem `/`, devolve os exports do arquivo principal do remote.
+ */
+declare function loadModule<T = Record<string, unknown>>(name: string): Promise<T>;
+/** Começa a baixar um remote (JS e CSS) sem montar (ex.: no hover de um link). */
+declare function preload(name: string): void;
+
+interface MountOptions {
+    isolate?: Isolation;
+    /** `'high'` para o remote que aparece logo ao abrir a página: vira `fetchpriority` nos downloads. */
+    priority?: RequestPriority;
+    /** Estilos do host no Shadow DOM (somados aos do `configure`). */
+    styles?: StyleOptions;
+    /** Chamado quando o remote quebra depois de montado (erro de render, handler etc.). */
+    onError?: (error: RemoteError) => void;
+}
+/**
+ * Monta um remote dentro de `target`. Devolve um handle com `update` e
+ * `unmount` que funciona igual para qualquer framework. Com `refresh(nome)`,
+ * o mesmo handle passa a apontar para a versão nova.
+ */
+declare function mountRemote<P extends Props = Props>(target: HTMLElement, name: string, props: P, options?: MountOptions): Promise<MountedRemote<P>>;
+
+/** Declara um remote. É só uma função identidade com tipos. */
+declare function defineRemote<P extends Props = Props>(remote: RemoteModule<P>): RemoteModule<P>;
+
+declare function createEventBus(): EventBus;
+
+/**
+ * Troca as montagens de `name` (e das partes, `name/…`) pela versão que o
+ * manifesto aponta agora, sem recarregar a página. Rejeita se a versão nova
+ * não carregar; nesse caso nada muda na tela.
+ */
+declare function refresh(name: string): Promise<void>;
+/**
+ * Revalida os manifestos dos remotes montados e emite
+ * `vitral:update-available` com `{ name, entry }` para cada deploy novo.
+ * Devolve os nomes com versão nova. Falhas de rede são ignoradas.
+ */
+declare function checkUpdates(): Promise<string[]>;
+/**
+ * Revalida os manifestos a cada navegação (`popstate`, que `navigate()` também
+ * dispara, e a Navigation API onde existe). Devolve a função que desliga.
+ */
+declare function watchUpdates(): () => void;
+
+declare const TEMPLATE: unique symbol;
+interface Template {
+    readonly [TEMPLATE]: true;
+    readonly strings: readonly string[];
+    readonly values: readonly unknown[];
+}
+/** Template HTML seguro: tudo que é interpolado é escapado, menos outro `html`. */
+declare function html(strings: TemplateStringsArray, ...values: unknown[]): Template;
+/** Marca uma string como HTML confiável (não é escapada). Use com cuidado. */
+declare function unsafeHTML(markup: string): Template;
+/** Renderiza `view` dentro de `el`, ligando os listeners declarados com `on<evento>=${fn}`. */
+declare function render(view: Template | string | Node, el: Element): void;
+type View = Template | string | Node | null | undefined;
+type RenderFn<P extends Props, S extends object> = (props: P, state: S, ctx: RemoteContext) => View;
+interface ComponentOptions<P extends Props, S extends object> {
+    /** Estado local. Alterar qualquer campo renderiza de novo. */
+    state?: S | (() => S);
+    render: RenderFn<P, S>;
+    /** Roda depois do primeiro render. Pode devolver uma função de limpeza. */
+    mounted?(el: HTMLElement, state: S, ctx: RemoteContext): void | (() => void);
+}
+/**
+ * Cria um remote a partir de uma função que devolve HTML. Aceita só a função
+ * (`component((props) => html\`...\`)`) ou `{ state, render, mounted }`.
+ */
+declare function component<P extends Props = Props, S extends object = Record<string, never>>(options: RenderFn<P, S> | ComponentOptions<P, S>): RemoteModule<P>;
+
+/**
+ * Extras opcionais do contexto compartilhado: guardar no storage, espelhar
+ * entre abas e levar os valores do SSR para o cliente. Ficam fora do store
+ * para só entrar no bundle de quem usa.
+ */
+
+interface PersistOptions {
+    /** `'local'` (padrão) ou `'session'`. */
+    storage?: 'local' | 'session';
+    /**
+     * Versão do formato do valor. Faz parte da chave do storage
+     * (`vitral:<chave>:<versão>`): ao mudar o formato, suba a versão e o valor
+     * antigo é ignorado. Padrão `1`.
+     */
+    version?: string | number;
+}
+/**
+ * Restaura o valor guardado (se houver) e guarda cada mudança. Valores que
+ * não viram JSON (funções, por exemplo) não são guardados. Sem storage
+ * (servidor, modo privado bloqueado), não faz nada.
+ *
+ *   const carrinho = persist(provide('carrinho', []), { version: 2 })
+ */
+declare function persist<V extends SharedValue<any>>(value: V, options?: PersistOptions): V;
+/**
+ * Espelha as mudanças entre abas da mesma origem (`BroadcastChannel`). Chame
+ * nas duas abas, de preferência no dono da chave: assim a mudança que chega
+ * passa mesmo com `writable: false`. Só dados que o `structuredClone` aceita
+ * atravessam. Junto com `persist`, uma aba nova começa com o último valor.
+ *
+ *   const carrinho = syncTabs(persist(provide('carrinho', [])))
+ */
+declare function syncTabs<V extends SharedValue<any>>(value: V): V;
+/**
+ * SSR: transforma os valores de uma requisição no conteúdo do
+ * `<script type="application/json" data-vitral-shared>`, que o store do
+ * cliente lê antes dos remotes montarem. Funções e `undefined` ficam de fora;
+ * `<` é escapado para o JSON não fechar o `<script>`.
+ *
+ *   `<script type="application/json" data-vitral-shared>${serializeShared({ usuario })}</script>`
+ */
+declare function serializeShared(values: Record<string, unknown>): string;
+
+export { type ComponentOptions, EventBus, Isolation, type MountOptions, MountedRemote, type PersistOptions, Props, RemoteContext, RemoteEntry, RemoteError, RemoteModule, type RenderFn, type SharedEntry, type SharedStore, SharedValue, StyleOptions, type Template, type View, VitralConfig, checkUpdates, component, configure, createEventBus, defineRemote, html, loadModule, loadRemote, mountRemote, persist, preload, refresh, register, registerSrc, render, serializeShared, syncTabs, unsafeHTML, watchUpdates };

package/dist/index.js

@@ -0,0 +1,65 @@
+import {
+  batch,
+  checkUpdates,
+  component,
+  createSlot,
+  defineRemote,
+  events,
+  html,
+  mountRemote,
+  navigate,
+  persist,
+  provide,
+  refresh,
+  render,
+  serializeShared,
+  shared,
+  syncTabs,
+  unsafeHTML,
+  watchUpdates
+} from "./chunk-NCONW6WS.js";
+import {
+  configure,
+  loadModule,
+  loadRemote,
+  preload,
+  register,
+  registerSrc
+} from "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import {
+  RemoteError
+} from "./chunk-PX7PBCCT.js";
+import {
+  createEventBus,
+  resetProtocol
+} from "./chunk-GNPFWISJ.js";
+export {
+  RemoteError,
+  resetProtocol as __reset,
+  batch,
+  checkUpdates,
+  component,
+  configure,
+  createEventBus,
+  createSlot,
+  defineRemote,
+  events,
+  html,
+  loadModule,
+  loadRemote,
+  mountRemote,
+  navigate,
+  persist,
+  preload,
+  provide,
+  refresh,
+  register,
+  registerSrc,
+  render,
+  serializeShared,
+  shared,
+  syncTabs,
+  unsafeHTML,
+  watchUpdates
+};

package/dist/navigate-BRG1WJUM.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Navega mantendo todos os roteadores em sincronia (React Router, Vue Router,
+ * Next, Nuxt…): atualiza o histórico e dispara `popstate`, que todos escutam.
+ */
+declare function navigate(url: string, options?: {
+    replace?: boolean;
+}): void;
+
+export { navigate as n };

package/dist/overrides-NZAIUGK5.js

@@ -0,0 +1,15 @@
+import {
+  OVERRIDES_KEY,
+  manifestUrl,
+  overrideFor,
+  overridesEnabled,
+  storedOverrides
+} from "./chunk-DXORSF4X.js";
+import "./chunk-GNPFWISJ.js";
+export {
+  OVERRIDES_KEY,
+  manifestUrl,
+  overrideFor,
+  overridesEnabled,
+  storedOverrides
+};

package/dist/preact.d.ts

@@ -0,0 +1,45 @@
+import * as preact from 'preact';
+import { VNode, ComponentType } from 'preact';
+import { P as Props, I as Isolation, C as CheckedProps, a as RemoteModule, S as Shared } from './types-BV-hUrms.js';
+export { R as RemoteContext } from './types-BV-hUrms.js';
+import { R as RemoteError } from './errors-KKB8FGCz.js';
+import { S as SlotStatus } from './slot-pB276oPt.js';
+export { e as events } from './events-DUdjhfps.js';
+export { n as navigate } from './navigate-BRG1WJUM.js';
+import { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
+
+/** Transforma um componente Preact em um remote. O contexto chega na prop `vitral`. */
+declare function preactRemote<P extends Props>(Component: ComponentType<any>): RemoteModule<P>;
+interface RemoteProps<P extends Props = Props> {
+    name?: string;
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src?: string;
+    props?: P;
+    isolate?: Isolation;
+    fallback?: VNode | string | null;
+    error?: VNode | string | ((error: RemoteError, retry: () => void) => VNode | string | null) | null;
+    class?: string;
+    /** `'lazy'`: monta perto de aparecer na tela; `'idle'`: com o navegador ocioso. */
+    loading?: Loading;
+    /** Baixa antes de montar: `'hover'`, `'visible'` ou `'idle'`. */
+    prefetch?: Prefetch;
+    /** `'high'` para o remote que aparece logo ao abrir a página. */
+    priority?: RequestPriority;
+    /** Ao sair da página, guarda o remote montado (LRU, padrão 5) e na volta só atualiza as props. */
+    keepAlive?: boolean | number;
+}
+declare function Remote<P extends Props = Props, N extends string = string>({ name, src, props, isolate, fallback, error, loading, prefetch, priority, keepAlive, ...rest }: RemoteProps<P> & CheckedProps<N>): VNode<preact.ClassAttributes<HTMLElement> & {
+    'data-vitral': string | undefined;
+    'data-vitral-status': SlotStatus;
+    class: (RemoteProps<P> & CheckedProps<N>)["class"] | undefined;
+}>;
+/**
+ * Lê uma chave compartilhada (`provide`/`shared`) e re-renderiza só quando
+ * ela muda. Com seletor, só quando o resultado do seletor muda (`Object.is`).
+ *
+ *   const nome = useShared('usuario', (u) => u?.nome)
+ */
+declare function useShared<K extends keyof Shared, S = Shared[K] | undefined>(key: K, select?: (value: Shared[K] | undefined) => S): S;
+declare function useShared<T = unknown, S = T | undefined>(key: string, select?: (value: T | undefined) => S): S;
+
+export { Remote, type RemoteProps, preactRemote, useShared };

package/dist/preact.js

@@ -0,0 +1,71 @@
+import {
+  hostSlot
+} from "./chunk-UTYAX6MU.js";
+import {
+  defineRemote,
+  events,
+  memoSelect,
+  navigate,
+  same,
+  shared
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/preact.ts
+import { h, render } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+function preactRemote(Component) {
+  return defineRemote({
+    mount(el, props, ctx) {
+      const draw = (p) => render(h(Component, { ...p, vitral: ctx }), el);
+      draw(props);
+      return { update: draw, unmount: () => render(null, el) };
+    }
+  });
+}
+function Remote({ name, src, props, isolate, fallback = null, error = null, loading, prefetch, priority, keepAlive, ...rest }) {
+  const ref = useRef(null);
+  const slot = useRef(null);
+  const [state, setState] = useState({ status: "loading", error: null });
+  useEffect(() => {
+    slot.current = hostSlot(ref.current, { name, src, props: props ?? {}, isolate, loading, prefetch, priority, keepAlive, onStatus: (status, error2) => setState({ status, error: error2 }) });
+    return () => slot.current?.destroy();
+  }, []);
+  useEffect(() => slot.current?.set({ name, src, isolate }), [name, src, isolate]);
+  useEffect(() => slot.current?.update(props ?? {}), [props]);
+  const retry = () => slot.current?.retry();
+  return h("div", { "data-vitral": name ?? src, "data-vitral-status": state.status, class: rest.class }, [
+    state.status === "loading" ? fallback : null,
+    state.status === "error" && state.error ? typeof error === "function" ? error(state.error, retry) : error : null,
+    // O Preact nunca coloca filhos neste div: ele pertence ao remote.
+    h("div", { ref })
+  ]);
+}
+function useShared(key, select = same) {
+  const handle = useMemo(() => shared(key), [key]);
+  const [pick] = useState(memoSelect);
+  const [, rerender] = useState(0);
+  const value = pick(handle.get(), select);
+  const latest = useRef({ value, select });
+  latest.current = { value, select };
+  useEffect(
+    () => (
+      // subscribe chama na hora: pega mudanças entre o render e o efeito.
+      handle.subscribe((v) => {
+        if (!Object.is(pick(v, latest.current.select), latest.current.value)) rerender((n) => n + 1);
+      })
+    ),
+    [handle]
+  );
+  return value;
+}
+export {
+  Remote,
+  events,
+  navigate,
+  preactRemote,
+  useShared
+};