Build

The widget is built with Vite 6 into a single minified bundle.min.js with inlined CSS. The configuration lives in vite.config.js.

Commands

npm start            # = vite (dev server, port 3000)
npm run dev          # same
npm run build        # vite build → bundle.min.js
npm run preview      # preview the production build

The output bundle

• Entry: index.html → entrypoint src/index.js.
• File name: bundle.min.js (entryFileNames), all assets inlined (assetFileNames: '[name][extname]', inlineDynamicImports: true).
• CSS is inlined into the JS via vite-plugin-css-injected-by-js: the style code is placed in window.__mzCss, and if window.__mzCssReinject() is defined it is called (to re-inject into the shadow root). cssCodeSplit: false — no separate CSS files.
• Minification: esbuild.

Where the build lands

Condition	Directory
Regular build	build/static/js
Per-client (BUILD_MASTER=bundler CLIENT_UUID=<uuid>)	../../build/<CLIENT_UUID>

Build parameterization (argv)

vite.config.js parses CLI arguments via the getArgh function:

# per-client bundle into ../../build/<uuid>
npm run build -- BUILD_MASTER=bundler CLIENT_UUID=e38997d0-f29c-4127-9f15-6b22df37ff10

# build-time style options (compiled into process.env.STYLE_CONFIG)
npm run build -- BUILD_OPTS='{"msg-animation":"unfurl"}'

Argument	Default	Description
BUILD_MASTER	local	bundler + CLIENT_UUID → per-client build directory.
CLIENT_UUID	—	Client UUID for the build path.
BUILD_OPTS	{"msg-animation":"bubble"}	JSON of build-time style options → process.env.STYLE_CONFIG.

Sass theming layer (themeVars)

A layer separate from the runtime theme: the themeVars object in vite.config.js is exposed to Sass as $G-* variables (via additionalData). This is a build-time palette (header colors, blob button, contrast, etc.) baked into the bundle. The runtime theme (accent, pattern, mode) lives on top of it and changes without a rebuild — see Theming.

Embedding the built bundle

<!-- production -->
<script src="./build/static/js/bundle.min.js" defer></script>

For dev, index.html loads src/index.js as an ES module directly. Embedding examples for the different modes are in index.html and embed-test.html at the repo root.

Per-client builds

To ship a bundle with defaults baked in for a specific client, edit widget.config.js (or pass VITE_*/BUILD_OPTS) and build with BUILD_MASTER=bundler CLIENT_UUID=<uuid>. The result lands in ../../build/<uuid> — a standalone bundle ready to serve.