@nvoi/console

Embedded AI console widget for nvoi sandboxes. Injects into arbitrary host apps via CF Worker — CSS fully isolated from the host.

Install

npm install @nvoi/console

Usage (esm.sh — production)

<script type="module">
  import "https://esm.sh/@nvoi/console/browser";

  window.NVOI_CONSOLE_CONFIG = {
    sandboxId: "123",
    apiUrl: "https://example.com/api",
    transport: {
      type: "phoenix",
      url: "wss://example.com/socket",
      token: "JWT_TOKEN"
    }
  };
</script>

Usage (script tag drop-in)

<script>
  window.NVOI_CONSOLE_CONFIG = {
    sandboxId: "123",
    apiUrl: "https://example.com/api",
    transport: {
      type: "phoenix",
      url: "wss://example.com/socket",
      token: "JWT_TOKEN"
    }
  };
</script>
<script src="https://esm.sh/@nvoi/console/browser"></script>

CSS Isolation

The console injects into host apps that have their own CSS (including Tailwind). Three-layer isolation prevents bleed in either direction:

Layer 1 — Cascade reset (@layer nvoi-isolation) Declared as the lowest-priority cascade layer. all: revert-layer on #nvoi-console-root * wipes any host styles that would bleed in via element/universal selectors.

Layer 2 — Prefixed utilities (nc: prefix) All console component classes use Tailwind with prefix(nc). The host's unprefixed .flex and our nc:flex never collide.

Layer 3 — Streamdown scoped rules (unlayered + !important) Streamdown (markdown renderer) uses hardcoded Tailwind classes internally. We provide matching CSS rules scoped to #nvoi-console-root .{class} { ... !important } — they only match inside our root and can't leak out. CSS variables (--color-background, --color-border, etc.) map Streamdown's theme tokens to our dark palette.

Cascade priority (high → low)

!important unlayered     → Streamdown scoped rules
@layer utilities         → nc: prefixed Tailwind (our components)
@layer base              → Tailwind normalize
@layer nvoi-isolation    → all: revert-layer (wipes host bleed)

Build

npm run build:pkg    # ESM + CJS + browser IIFE
npm run build:types  # TypeScript declarations
npm run release      # lint + test + typecheck + build:pkg + build:types

Publish

npm run release
npm publish --access public