# Deployment and assets

Keep local engine assets, separate server-side models from browser rendering and verify production policies.

## Browser and SSR

The root `@quirekit/text-diagram` entry contains pure models and templates. SVG / PNG rendering, CodeMirror and dialogs require a browser. Do not run them in Nuxt server setup. Mount the workbench within `ClientOnly` or a `.client.vue` boundary; SSR can display an already saved PNG. Nuxt's [ClientOnly documentation](https://nuxt.com/docs/4.x/api/components/client-only) describes the client boundary.

This site uses docs-kit's client-only example boundary. Static output still contains the tutorials and API text rather than an empty SPA shell.

## Ship the engine assets

Mermaid loads on demand. The official PlantUML JavaScript core and Graphviz WASM are bundled in `@quirekit/text-diagram`'s `dist/diagram-frame.iife.js`, referenced through `new URL(..., import.meta.url)` inside the package.

Let the bundler process and publish this file. Copying only `browser.mjs` loses the engine asset. Do not replace the asset path with a remote rendering service. After a Vite / Nuxt build, check for the asset in static output and actually render a PlantUML and DOT diagram from that output. Initial use still loads site scripts: local rendering does not imply automatic offline caching.

## CSP and images

PlantUML / DOT run in a `srcdoc` sandbox frame with script permission and no `allow-same-origin`. The frame policy permits the bundled engine's origin, WASM execution and required inline styles, while denying network connections. A stricter parent policy can still block execution.

Verify the host's frame, script origin, WASM and style policies in production. SVG previews use Blob images; PNG uses `data:image/png`. Do not copy a broad policy that relaxes the entire application. If deployment policy prevents editing, retain source or an existing preview and explain that editing is unavailable.

## License artifacts

Both QuireKit packages are MIT. Preserve their `LICENSE.md`, `THIRD_PARTY_NOTICES.md` and the renderer's `ENGINE_LICENSES.txt` when distributing bundled assets. Third-party engines retain their own licenses. This site generates `/licenses/engines.txt`, `/licenses/text-diagram.txt` and `/licenses/third-party-notices.txt` from the original package texts and includes them in static output.

## Develop and preview this site

Use Node 22 and pnpm from the repository root:

```sh
pnpm --filter @quirekit/text-diagram-docs dev
pnpm --filter @quirekit/text-diagram-docs typecheck
pnpm --filter @quirekit/text-diagram-docs build
pnpm --filter @quirekit/text-diagram-docs test:browser
```

The fixed preview is `http://127.0.0.1:3260/`; startup fails if the port is occupied. `build` writes `apps/text-diagram-docs/.output/public`, including bilingual pages, raw Markdown, `llms.txt`, complete example sources and engine assets. The planned domain is `text-diagram.quirekit.com`; this delivery does not publish the domain or npm packages.