vitral 0.1.0 → 0.2.0

package/dist/preact.d.ts

@@ -1,22 +1,45 @@
 import * as preact from 'preact';
 import { VNode, ComponentType } from 'preact';
-import { Props, Isolation, RemoteError, SlotStatus, RemoteModule } from './index.js';
-export { RemoteContext, events, navigate } from './index.js';
+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;
+    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>({ name, props, isolate, fallback, error, ...rest }: RemoteProps<P>): VNode<preact.ClassAttributes<HTMLElement> & {
-    'data-vitral': string;
+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: string | undefined;
+    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 };
+export { Remote, type RemoteProps, preactRemote, useShared };

package/dist/preact.js

@@ -1,13 +1,22 @@
 import {
-  createSlot,
+  hostSlot
+} from "./chunk-UTYAX6MU.js";
+import {
   defineRemote,
   events,
-  navigate
-} from "./chunk-TTL52BF2.js";
+  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, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 function preactRemote(Component) {
   return defineRemote({
     mount(el, props, ctx) {
@@ -17,27 +26,46 @@ function preactRemote(Component) {
     }
   });
 }
-function Remote({ name, props, isolate, fallback = null, error = null, ...rest }) {
+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 = createSlot(ref.current, { name, props: props ?? {}, isolate, onStatus: (status, error2) => setState({ status, error: error2 }) });
+    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, isolate }), [name, isolate]);
+  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, "data-vitral-status": state.status, class: rest.class }, [
+  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
+  preactRemote,
+  useShared
 };

package/dist/react.d.ts

@@ -1,7 +1,17 @@
-import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
-import { Props, Isolation, RemoteModule, RemoteContext } from './index.js';
-export { EventBus, events } from './index.js';
+import { L as Loading, P as Prefetch } from './host-slot-Cz6EiGsB.js';
+import * as JSXRuntime from 'react/jsx-runtime';
+import { P as Props, I as Isolation, C as CheckedProps, a as RemoteModule, S as Shared, R as RemoteContext } from './types-BV-hUrms.js';
+export { E as EventBus } from './types-BV-hUrms.js';
+export { e as events } from './events-DUdjhfps.js';
+
+/**
+ * Adaptador React (funciona em Vite, CRA e Next.js App/Pages Router).
+ *
+ * Host:   <Remote name="carrinho" props={{ userId }} />
+ *         <Remote src="https://cdn.exemplo.com/carrinho/vitral.json" props={{ userId }} />
+ * Remote: export default reactRemote(App)
+ */
 
 /** Transforma um componente React em um remote. */
 declare function reactRemote<P extends Props>(Component: ComponentType<P>): RemoteModule<P>;
@@ -11,9 +21,21 @@ declare function useVitral(): RemoteContext | null;
 declare function useEvent<T = unknown>(type: string, handler: (payload: T) => void): void;
 /** Estado derivado do último valor emitido em `type`. */
 declare function useEventValue<T = unknown>(type: string): T | 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`).
+ * No servidor e na hidratação o valor é `undefined`.
+ *
+ *   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;
 
 interface RemoteProps<P extends Props = Props> {
-    name: string;
+    /** Nome registrado com `configure()`. Com `src`, o nome sob o qual a URL é registrada. */
+    name?: string;
+    /** URL do `vitral.json`. Dispensa `configure()`. */
+    src?: string;
     props?: P;
     isolate?: Isolation;
     /** Mostrado enquanto o remote baixa. */
@@ -22,11 +44,20 @@ interface RemoteProps<P extends Props = Props> {
     error?: ReactNode | ((error: Error, retry: () => void) => ReactNode);
     onError?: (error: Error) => void;
     className?: 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;
 }
 /**
  * Renderiza um remote. No servidor (Next SSR) renderiza só o fallback; o
- * remote monta no cliente, então não há erro de hidratação.
+ * remote monta no cliente, então não há erro de hidratação. Com o nome em
+ * `Remotes` (`npx vitral types`), as props são checadas.
  */
-declare function Remote<P extends Props = Props>({ name, props, isolate, fallback, error, onError, className, }: RemoteProps<P>): react.JSX.Element;
+declare function Remote<P extends Props = Props, N extends string = string>({ name, src, props, isolate, fallback, error, onError, className, loading, prefetch, priority, keepAlive, }: RemoteProps<P> & CheckedProps<N>): JSXRuntime.JSX.Element;
 
-export { Remote, type RemoteProps, reactRemote, useEvent, useEventValue, useVitral };
+export { Remote, type RemoteProps, reactRemote, useEvent, useEventValue, useShared, useVitral };

package/dist/react.js

@@ -1,13 +1,38 @@
 "use client";
+import {
+  hostSlot
+} from "./chunk-UTYAX6MU.js";
 import {
   defineRemote,
   events,
-  mountRemote
-} from "./chunk-TTL52BF2.js";
+  memoSelect,
+  same,
+  shared
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import {
+  protocol
+} from "./chunk-GNPFWISJ.js";
 
 // src/react.tsx
-import { Component as ReactComponent, createContext, useContext, useEffect, useRef, useState } from "react";
+import {
+  Component as ReactComponent,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
 import { createRoot } from "react-dom/client";
+import * as ReactAll from "react";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+import * as JSXRuntime from "react/jsx-runtime";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 var VitralContext = createContext(null);
 var Boundary = class extends ReactComponent {
@@ -50,61 +75,85 @@ function useEventValue(type) {
   useEvent(type, setValue);
   return value;
 }
+function useShared(key, select = same) {
+  const handle = useMemo(() => shared(key), [key]);
+  const [pick] = useState(memoSelect);
+  return useSyncExternalStore(
+    handle.subscribe,
+    () => pick(handle.get(), select),
+    () => pick(void 0, select)
+  );
+}
+var offeredTo;
+function offerReact() {
+  const p = protocol();
+  if (offeredTo === p) return;
+  offeredTo = p;
+  const compiler = ReactAll.__COMPILER_RUNTIME;
+  const modules = {
+    react: ReactAll,
+    "react-dom": ReactDOM,
+    "react-dom/client": ReactDOMClient,
+    "react/jsx-runtime": JSXRuntime,
+    "react/jsx-dev-runtime": JSXDevRuntime,
+    // O React 19 expõe o react/compiler-runtime pelo próprio react.
+    ...compiler && { "react/compiler-runtime": compiler }
+  };
+  p.pending(import("./dedupe-IWFIXRWG.js").then((m) => m.offer(p, { react: { version: ReactAll.version, modules } })).catch(() => {
+  }));
+}
 function Remote({
   name,
+  src,
   props,
   isolate,
   fallback = null,
   error,
   onError,
-  className
+  className,
+  loading,
+  prefetch,
+  priority,
+  keepAlive
 }) {
+  const target = useRef(null);
   const slot = useRef(null);
-  const handle = useRef(null);
-  const latestProps = useRef(props ?? {});
-  latestProps.current = props ?? {};
-  const [status, setStatus] = useState("loading");
-  const [err, setErr] = useState(null);
-  const [attempt, setAttempt] = useState(0);
+  const [state, setState] = useState({ status: "loading", error: null });
   const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
   useEffect(() => {
-    const el = slot.current;
-    if (!el) return;
-    let cancelled = false;
-    setStatus("loading");
-    const fail = (e) => {
-      if (cancelled) return;
-      setErr(e);
-      setStatus("error");
-      if (onErrorRef.current) onErrorRef.current(e);
-      else console.error(e);
-    };
-    const initial = latestProps.current;
-    mountRemote(el, name, initial, { isolate, onError: fail }).then(
-      (h) => {
-        if (cancelled) return h.unmount();
-        handle.current = h;
-        if (latestProps.current !== initial) h.update?.(latestProps.current);
-        setStatus("ready");
-      },
-      fail
-    );
+    offerReact();
+    const s = hostSlot(target.current, {
+      name,
+      src,
+      props: props ?? {},
+      isolate,
+      loading,
+      prefetch,
+      priority,
+      keepAlive,
+      onStatus(status2, e) {
+        setState({ status: status2, error: e });
+        if (e) {
+          if (onErrorRef.current) onErrorRef.current(e);
+          else console.error(e);
+        }
+      }
+    });
+    slot.current = s;
     return () => {
-      cancelled = true;
-      const h = handle.current;
-      handle.current = null;
-      if (h) queueMicrotask(() => h.unmount());
+      slot.current = null;
+      queueMicrotask(() => s.destroy());
     };
-  }, [name, isolate, attempt]);
-  useEffect(() => {
-    handle.current?.update?.(latestProps.current);
-  }, [props]);
-  const retry = () => setAttempt((a) => a + 1);
-  return /* @__PURE__ */ jsxs("div", { className, "data-vitral": name, "data-vitral-status": status, children: [
+  }, []);
+  useEffect(() => slot.current?.set({ name, src, isolate }), [name, src, isolate]);
+  useEffect(() => slot.current?.update(props ?? {}), [props]);
+  const retry = () => slot.current?.retry();
+  const { status, error: err } = state;
+  return /* @__PURE__ */ jsxs("div", { className, "data-vitral": name ?? src, "data-vitral-status": status, children: [
     status === "loading" && fallback,
     status === "error" && err && (typeof error === "function" ? error(err, retry) : error ?? null),
-    /* @__PURE__ */ jsx("div", { ref: slot, style: status === "error" ? { display: "none" } : void 0 }, `${name}:${isolate}:${attempt}`)
+    /* @__PURE__ */ jsx("div", { ref: target })
   ] });
 }
 export {
@@ -113,5 +162,6 @@ export {
   reactRemote,
   useEvent,
   useEventValue,
+  useShared,
   useVitral
 };

package/dist/routes.d.ts

@@ -0,0 +1,56 @@
+import { P as Props } from './types-BV-hUrms.js';
+import { S as SlotStatus } from './slot-pB276oPt.js';
+import './errors-KKB8FGCz.js';
+
+/** Padrão de URL → nome do remote. A primeira rota que bate vence. */
+type Routes = Record<string, string>;
+interface RoutesOptions {
+    /**
+     * Links `<a href>` da mesma origem que batem com uma rota navegam sem
+     * recarregar a página (via `navigate()`). Padrão: true.
+     */
+    links?: boolean;
+}
+interface RouteMatch {
+    /** Nome do remote. */
+    name: string;
+    /** Padrão que bateu. */
+    pattern: string;
+    /** Segmentos `:nome` do padrão. */
+    params: Record<string, string>;
+}
+/**
+ * Remote da rota que bate com `path`, ou `null`. Padrões: `/conta` (exato),
+ * `/checkout/*` (o prefixo e tudo abaixo dele), `/produto/:id` e `*` (qualquer).
+ */
+declare function matchRoute(path: string, routes?: Routes): RouteMatch | null;
+/**
+ * Define as rotas, registra `<vitral-outlet>` e, com `links` (padrão), faz os
+ * links internos navegarem sem recarregar. Devolve a função que desfaz tudo.
+ */
+declare function routes(map: Routes, options?: RoutesOptions): () => void;
+declare const Base: typeof HTMLElement;
+declare class VitralOutletElement extends Base {
+    #private;
+    static observedAttributes: string[];
+    get props(): Props;
+    set props(value: Props);
+    /** Remote montado agora, ou `null`. */
+    get route(): string | null;
+    get status(): SlotStatus | "empty";
+    retry(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attr: string, _old: string | null, value: string | null): void;
+    /** Confere a URL atual e troca de remote se a rota mudou. */
+    sync(): void;
+}
+/** Registra `<vitral-outlet>` (ou outro nome). `routes()` já chama. */
+declare function defineVitralOutlet(tag?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'vitral-outlet': VitralOutletElement;
+    }
+}
+
+export { type RouteMatch, type Routes, type RoutesOptions, VitralOutletElement, defineVitralOutlet, matchRoute, routes };

package/dist/routes.js

@@ -0,0 +1,143 @@
+import {
+  createSlot,
+  navigate
+} from "./chunk-NCONW6WS.js";
+import "./chunk-2XF5BKV3.js";
+import "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/routes.ts
+var table = {};
+var outlets = /* @__PURE__ */ new Set();
+var compiled = /* @__PURE__ */ new Map();
+function compile(pattern) {
+  let re = compiled.get(pattern);
+  if (!re) {
+    const body = pattern.replace(/\/\*$|^\*$/, "\0").replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/:(\w+)/g, "(?<$1>[^/]+)").replace(/\/$/, "").replace("\0", "(?:/.*)?");
+    compiled.set(pattern, re = new RegExp(`^${body}/?$`));
+  }
+  return re;
+}
+function matchRoute(path, routes2 = table) {
+  for (const [pattern, name] of Object.entries(routes2)) {
+    const m = compile(pattern).exec(path);
+    if (m) return { name, pattern, params: { ...m.groups } };
+  }
+  return null;
+}
+function routes(map, options = {}) {
+  table = map;
+  defineVitralOutlet();
+  for (const o of outlets) o.sync();
+  const intercept = options.links !== false && typeof document !== "undefined";
+  if (intercept) document.addEventListener("click", onClick);
+  return () => {
+    if (intercept) document.removeEventListener("click", onClick);
+    if (table === map) table = {};
+    for (const o of outlets) o.sync();
+  };
+}
+function onClick(e) {
+  if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+  const a = e.composedPath().find((n) => n.localName === "a" && !!n.href);
+  if (!a || a.target && a.target !== "_self" || a.hasAttribute("download")) return;
+  const url = new URL(a.href);
+  if (url.origin !== location.origin || !matchRoute(url.pathname)) return;
+  e.preventDefault();
+  navigate(url.href);
+}
+var Base = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var VitralOutletElement = class extends Base {
+  static {
+    this.observedAttributes = ["props", "isolate"];
+  }
+  #slot = null;
+  #props = {};
+  // `undefined` até a primeira checagem, para o estado `empty` aparecer já de início.
+  #route;
+  get props() {
+    return this.#props;
+  }
+  set props(value) {
+    this.#props = value ?? {};
+    this.#slot?.update(this.#props);
+  }
+  /** Remote montado agora, ou `null`. */
+  get route() {
+    return this.#route ?? null;
+  }
+  get status() {
+    return this.#slot?.status ?? (this.#route ? "loading" : "empty");
+  }
+  retry() {
+    this.#slot?.retry();
+  }
+  #onNavigate = () => this.sync();
+  connectedCallback() {
+    outlets.add(this);
+    addEventListener("popstate", this.#onNavigate);
+    globalThis.navigation?.addEventListener("navigatesuccess", this.#onNavigate);
+    this.sync();
+  }
+  disconnectedCallback() {
+    outlets.delete(this);
+    removeEventListener("popstate", this.#onNavigate);
+    globalThis.navigation?.removeEventListener("navigatesuccess", this.#onNavigate);
+    queueMicrotask(() => !this.isConnected && this.#show(null));
+  }
+  attributeChangedCallback(attr, _old, value) {
+    if (attr === "props") {
+      try {
+        this.props = value ? JSON.parse(value) : {};
+      } catch {
+        console.error("[vitral] atributo props n\xE3o \xE9 JSON v\xE1lido:", value);
+      }
+    } else this.#slot?.set({ isolate: value || void 0 });
+  }
+  /** Confere a URL atual e troca de remote se a rota mudou. */
+  sync() {
+    if (this.isConnected) this.#show(matchRoute(location.pathname)?.name ?? null);
+  }
+  #show(name) {
+    if (name === this.#route) return;
+    this.#route = name;
+    if (name) this.setAttribute("data-vitral-route", name);
+    else this.removeAttribute("data-vitral-route");
+    if (!name) {
+      this.#slot?.destroy();
+      this.#slot = null;
+      this.#status("empty", null);
+    } else if (this.#slot) {
+      this.#slot.set({ name });
+    } else {
+      this.#slot = createSlot(this, {
+        name,
+        props: this.#props,
+        isolate: this.getAttribute("isolate") || void 0,
+        onStatus: (s, e) => this.#status(s, e)
+      });
+    }
+  }
+  #status(status, error) {
+    this.setAttribute("data-vitral-status", status);
+    for (const [slot, on] of [["fallback", "loading"], ["error", "error"], ["empty", "empty"]]) {
+      for (const el of this.querySelectorAll(`:scope > [slot="${slot}"]`)) el.hidden = status !== on;
+    }
+    if (status === "ready") this.dispatchEvent(new CustomEvent("vitral-ready", { bubbles: true, detail: { route: this.#route } }));
+    if (status === "error") this.dispatchEvent(new CustomEvent("vitral-error", { bubbles: true, detail: { error } }));
+  }
+};
+function defineVitralOutlet(tag = "vitral-outlet") {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) {
+    customElements.define(tag, class extends VitralOutletElement {
+    });
+  }
+}
+export {
+  VitralOutletElement,
+  defineVitralOutlet,
+  matchRoute,
+  routes
+};

package/dist/shadow-MYRJQLLY.js

@@ -0,0 +1,72 @@
+import {
+  fetchCssText,
+  injectCss
+} from "./chunk-SFL6LTP3.js";
+import "./chunk-PX7PBCCT.js";
+import "./chunk-GNPFWISJ.js";
+
+// src/core/shadow.ts
+var sheets = /* @__PURE__ */ new Map();
+var hoisted = /* @__PURE__ */ new Set();
+var RELATIVE_URL = /url\(\s*(['"]?)(?![a-z]+:|\/\/|#)([^'")]+)\1\s*\)/gi;
+var GLOBAL_RULES = /@property\s+(--[\w-]+)\s*\{[^}]*\}|@font-face\s*\{[^}]*\}|@import\s+(?:url\(\s*)?(?:(['"])(.*?)\2|([^'"\s);]+))\s*\)?[^;]*;/gi;
+async function attachStyles(root, el, css, global = {}, local = {}, sri = {}) {
+  const urls = [...global.inherit ?? [], ...local.inherit ?? []].map((u) => new URL(u, document.baseURI).href).concat(css);
+  if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype) {
+    const loaded = await Promise.all(urls.map((u) => loadSheet(u, [], sri[u])));
+    root.adoptedStyleSheets = [.../* @__PURE__ */ new Set([...root.adoptedStyleSheets, ...loaded.flat()])];
+  } else {
+    await injectCss(urls, root, sri);
+  }
+  return (local.mirrorTheme ?? global.mirrorTheme) === false ? () => {
+  } : mirrorTheme(el);
+}
+function loadSheet(href, chain, integrity) {
+  let p = sheets.get(href);
+  if (!p) {
+    p = fetchCssText(href, integrity).then((text) => {
+      const up = [];
+      const imports = [];
+      const rest = text.replace(RELATIVE_URL, (_, q, u) => `url(${q}${new URL(u, href).href}${q})`).replace(GLOBAL_RULES, (rule, prop, _q, quoted, bare) => {
+        const url = quoted ?? bare;
+        if (url) imports.push(new URL(url, href).href);
+        else if (!hoisted.has(prop ?? rule)) {
+          hoisted.add(prop ?? rule);
+          up.push(rule);
+        }
+        return "";
+      });
+      if (up.length) {
+        const style = document.createElement("style");
+        style.setAttribute("data-vitral-properties", "");
+        style.textContent = up.join("\n");
+        document.head.appendChild(style);
+      }
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(rest);
+      const next = [...chain, href];
+      return Promise.all(imports.filter((u) => !next.includes(u)).map((u) => loadSheet(u, next))).then((found) => [...found.flat(), sheet]);
+    }).catch(() => []);
+    sheets.set(href, p);
+  }
+  return p;
+}
+function mirrorTheme(el) {
+  const html = document.documentElement;
+  let added = [];
+  const sync = () => {
+    el.classList.remove(...added);
+    added = [...html.classList].filter((c) => !el.classList.contains(c));
+    el.classList.add(...added);
+    const theme = html.getAttribute("data-theme");
+    if (theme === null) el.removeAttribute("data-theme");
+    else el.setAttribute("data-theme", theme);
+  };
+  sync();
+  const observer = new MutationObserver(sync);
+  observer.observe(html, { attributeFilter: ["class", "data-theme"] });
+  return () => observer.disconnect();
+}
+export {
+  attachStyles
+};