CDN

A entrada @neongate-ai/orbz/standalone é um módulo ES independente para páginas sem gerenciador de pacotes ou bundler. Ela registra <orb-z> como efeito colateral e oferece a mesma API nativa de /browser.

Estas URLs fixam a versão publicada 1.0.2, evitando que uma futura tag latest altere o contrato inesperadamente.

jsDelivr


<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

unpkg


<script
  type="module"
  src="https://unpkg.com/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
></script>

O manifesto do pacote expõe o mesmo arquivo nos metadados unpkg e jsdelivr. A URL explícita acima deixa claros o artefato e a versão.

Página completa

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Orbz voice assistant</title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@1.0.2/dist/standalone/orbz.js"
    ></script>
  </head>
  <body>
    <main>
      <div role="status" aria-live="polite">
        <orb-z
          state="idle"
          size="300px"
          speed="1"
          reduced-motion="system"
          elevated
        ></orb-z>
        <p id="assistant-status">Assistant is idle</p>
      </div>
 
      <button id="listen" type="button">Listen</button>
    </main>
 
    <script type="module">
      await customElements.whenDefined("orb-z");
 
      const orb = document.querySelector("orb-z");
      const status = document.querySelector("#assistant-status");
      const listen = document.querySelector("#listen");
 
      listen?.addEventListener("click", () => {
        if (orb) orb.state = "listening";
        if (status) status.textContent = "Assistant is listening";
      });
    </script>
  </body>
</html>

O navegador atualiza a tag existente ao concluir o carregamento. Aguardar customElements.whenDefined("orb-z") só é útil quando o código precisa acessar propriedades ou métodos imediatamente.

Fixe a versão

Use uma versão exata em produção:


@neongate-ai/orbz@1.0.2

Evite URLs sem versão ou a tag móvel latest. A versão fixa mantém o contrato e a aparência estáveis entre implantações. Atualize deliberadamente após ler o histórico de alterações.

Quando preferir npm

Use o CDN em páginas independentes, embeds, protótipos ou microfrontends que gerenciam sua dependência de navegador. Prefira npm quando o build deve deduplicar dependências, verificar tipos da configuração ou fixar todo o grafo de dependências.