open-index/open-npm huggingface dataset:
npm package: @nvoi/console
Description: Embedded AI console widget for nvoi sandboxes. Injects into arbitrary host apps via CF Worker — CSS fully isolated from the host.
Latest version: 1.0.4

# @nvoi/console

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

## Install
```bash
npm install @nvoi/console
```

## Usage (esm.sh — production)
```html
<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)
```html
<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
```bash
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
```bash
npm run release
npm publish --access public
```
npm package: @nvoi/ui
Description: This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Latest version: 0.0.6

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from "eslint-plugin-react";

export default tseslint.config({
  // Set the react version
  settings: { react: { version: "18.3" } },
  plugins: {
    // Add the react plugin
    react,
  },
  rules: {
    // other rules...
    // Enable its recommended rules
    ...react.configs.recommended.rules,
    ...react.configs["jsx-runtime"].rules,
  },
});
```