<p align="center">
  <a href="https://miris.com">
    <img src="https://cdn.jsdelivr.net/npm/@miris-inc/components/banner.svg" alt="Miris" width="100%" />
  </a>
</p>

# @miris-inc/components

Web Components for the Miris 3D streaming SDK. Drop `<miris-scene>`, `<miris-stream>`, `<miris-camera>`, and `<miris-group>` custom elements into any HTML page to stream 3D Gaussian Splat assets.

## Install

```bash
npm install @miris-inc/components three
```

## Usage

### From a CDN

```html
<script type="module" src="https://unpkg.com/@miris-inc/components"></script>

<miris-scene viewer-key="VIEWER_KEY">
  <miris-camera></miris-camera>
  <miris-stream src="ASSET_ID"></miris-stream>
</miris-scene>
```

CDNs serve the **standalone build** which bundles `@miris-inc/core`, `@miris-inc/three`, and Three.js (with WASM inlined). No additional dependencies required.

### With a bundler

```js
import "@miris-inc/components";
```

```html
<miris-scene viewer-key="VIEWER_KEY">
  <miris-camera></miris-camera>
  <miris-stream src="ASSET_ID"></miris-stream>
</miris-scene>
```

Importing the package registers all custom elements. The default import resolves to the **chunked build** — peer dependencies are resolved by your bundler.

## Builds

| Build | File | Bundles | Externalizes |
|-------|------|---------|-------------|
| Chunked | `components.js` | Unminified. Own code | `three`, `@miris-inc/core`, `@miris-inc/three` |
| Chunked prod | `components.prod.js` | Minified. Own code | `three`, `@miris-inc/core`, `@miris-inc/three` |
| Standalone | `components.standalone.js` | Unminified. Own code + core + three layer + WASM | `three` |
| Standalone prod | `components.standalone.prod.js` | Minified. Same as above | `three` |

## Custom Elements

| Element | Description |
|---------|-------------|
| `<miris-scene>` | Root container for a Miris streaming scene. Accepts a `viewer-key` attribute for authentication. |
| `<miris-camera>` | Camera element. Controls the viewpoint and pushes transforms to the streaming engine. |
| `<miris-stream>` | Connects to a streamed 3D asset via the `src` attribute (asset ID or URL). |
| `<miris-group>` | Groups child elements under a shared transform. |

## Peer Dependencies

- `three` >= 0.182.0
- `@miris-inc/core` (same version)
- `@miris-inc/three` (same version)

## License

Apache-2.0
