retiam 1.0.1 → 1.0.2

package/dist/src/engine/_core/Material.d.ts

@@ -1,6 +1,6 @@
 import { Color } from '../math/Color';
 import { SubTexture } from '../loader/SubTexture';
-import { ShadingStyle } from '../render/RenderConfig';
+import { Shading, ShadingStyle } from '../material/shading';
 export type TextureSource = string | ImageBitmap | HTMLCanvasElement | OffscreenCanvas | HTMLImageElement | HTMLVideoElement | HTMLElement | SubTexture;
 /**
  * Bitmask flags to track which material properties were explicitly set by the user.
@@ -21,8 +21,7 @@ export declare enum MaterialFlags {
     ALBEDO_IDX = 2048,
     NORMAL_IDX = 4096,
     NORMAL_SCALE = 8192,
-    SHADING_STYLE = 16384,
-    STYLE_PARAMS = 32768
+    SHADING_STYLE = 16384
 }
 /**
  * Manages rendering material parameters (reflectance, roughness, metallic, normal scaling) for an [[Entity]],
@@ -52,6 +51,7 @@ export declare class Material {
     readonly _emColor: Float32Array;
     private _albedoMap?;
     private _normalMap?;
+    private _shading;
     /**
      * Creates a new Material instance.
      *
@@ -151,22 +151,17 @@ export declare class Material {
     setSpecular(v: number): Material;
     /** Sets the normal map scale strength. */
     setNormalScale(v: number): Material;
-    /** Shading style override for this material (-1: inherit from RenderConfig, 0: PBR, 1: Gooch, 2: Cel, 3: Clay). */
+    /** Surface lighting override. Null inherits the parent material or scene default. */
+    get shading(): Shading | null;
+    set shading(value: Shading | null);
+    /** Selects a shading model using its name, or -1 to inherit. */
     get shadingStyle(): ShadingStyle | number;
-    set shadingStyle(v: ShadingStyle | number);
-    get goochWarm(): number;
-    set goochWarm(v: number);
-    get goochCool(): number;
-    set goochCool(v: number);
-    get celBands(): number;
-    set celBands(v: number);
-    get rimStrength(): number;
-    set rimStrength(v: number);
-    get rimPower(): number;
-    set rimPower(v: number);
-    setShadingStyle(v: ShadingStyle | number): Material;
-    setGooch(warm?: number, cool?: number): Material;
-    setCel(bands?: number, rimStrength?: number): Material;
+    set shadingStyle(value: ShadingStyle | number);
+    setShadingStyle(value: ShadingStyle | number): this;
+    setGooch(warm?: number, cool?: number): this;
+    setCel(bands?: number, rimStrength?: number, rimPower?: number): this;
+    /** Numeric settings interpolate within a model; model changes happen at the endpoint. */
+    interpolateShading(start: Material, target: Material, t: number): void;
     /** Clones this material instance. */
     copy(): Material;
     clone(): Material;

package/dist/src/engine/_core/Scene.d.ts

@@ -11,6 +11,7 @@ import { Entity } from './Entity';
 import { Compute, ComputeCommand } from '../compute/Compute';
 import { RenderCommand } from './SceneInterface';
 import { RenderConfig } from '../render/RenderConfig';
+import { Shading } from '../material/shading';
 import { Pass } from '../render/frame_graph/Pass';
 import { GroupAnimator } from '../animation/GroupAnimator';
 import { SnapshotManager } from './SnapshotManager';
@@ -386,6 +387,8 @@ export declare class Scene {
      */
     onAfterReset(): void;
     enableFrameFeedback(): FrameFeedbackFeature;
+    /** Default surface lighting for this scene; individual materials can override it. */
+    shading: Shading;
     _renderConfig: RenderConfig;
     get renderConfig(): RenderConfig;
     addCompute(...compute_commands: ComputeCommand[]): void;

package/dist/src/engine/_core/SnapshotManager.d.ts

@@ -1,8 +1,10 @@
 import { Scene } from './Scene';
+import { Shading } from '../material/shading';
 export interface EntitySnapshot {
     id: number;
     visibility: boolean;
     stateData: Float32Array;
+    shading?: Shading | null;
 }
 export interface AnimationSnapshot {
     type: string;
@@ -30,6 +32,7 @@ export interface SceneSnapshot {
     entities: EntitySnapshot[];
     animations: AnimationSnapshot[];
     isPaused: boolean;
+    shading?: Shading;
 }
 /**
  * Manages deterministic scene state checkpoints and snapshots.

package/dist/src/engine/components/fragment/ModelFragment.d.ts

@@ -6,13 +6,8 @@ export declare class ModelFragment extends FragmentComponent {
     private _lastShadowState;
     private _lastShadowMethod;
     private _lastLightSize;
-    private _lastShadingStyle;
+    private _shading;
     private _lastIsTransparent;
-    private _lastGoochWarm;
-    private _lastGoochCool;
-    private _lastCelBands;
-    private _lastCelRimStrength;
-    private _lastCelRimPower;
     prepare(scene: Scene, state?: State): void;
     setup(builder: ShaderBuilder, passName: string): void;
     isPassActive(passName: string, state: State): boolean;

package/dist/src/engine/material/shading/CelShading.d.ts

@@ -0,0 +1,16 @@
+import { Shading } from './Shading';
+export interface CelShadingOptions {
+    bands?: number;
+    rimStrength?: number;
+    rimPower?: number;
+}
+/** Cartoon lighting bands with an optional silhouette highlight. */
+export declare class CelShading extends Shading {
+    bands: number;
+    rimStrength: number;
+    rimPower: number;
+    constructor({ bands, rimStrength, rimPower }?: CelShadingOptions);
+    writeParameters(target: Float32Array, offset: number): void;
+    interpolate(start: CelShading, target: CelShading, t: number): void;
+    clone(): CelShading;
+}

package/dist/src/engine/material/shading/ClayShading.d.ts

@@ -0,0 +1,6 @@
+import { Shading } from './Shading';
+/** Matte studio lighting for inspecting shapes. */
+export declare class ClayShading extends Shading {
+    constructor();
+    clone(): ClayShading;
+}

package/dist/src/engine/material/shading/GoochShading.d.ts

@@ -0,0 +1,14 @@
+import { Shading } from './Shading';
+export interface GoochShadingOptions {
+    warm?: number;
+    cool?: number;
+}
+/** Warm/cool lighting for technical illustrations. */
+export declare class GoochShading extends Shading {
+    warm: number;
+    cool: number;
+    constructor({ warm, cool }?: GoochShadingOptions);
+    writeParameters(target: Float32Array, offset: number): void;
+    interpolate(start: GoochShading, target: GoochShading, t: number): void;
+    clone(): GoochShading;
+}

package/dist/src/engine/material/shading/PBRShading.d.ts

@@ -0,0 +1,6 @@
+import { Shading } from './Shading';
+/** Physically based surface lighting using the material's roughness and metallic values. */
+export declare class PBRShading extends Shading {
+    constructor();
+    clone(): PBRShading;
+}

package/dist/src/engine/material/shading/Shading.d.ts

@@ -0,0 +1,17 @@
+export declare enum ShadingStyle {
+    PBR = "pbr",
+    GOOCH = "gooch",
+    CEL = "cel",
+    CLAY = "clay"
+}
+/** A surface lighting model. Numeric parameters are written to the material GPU buffer. */
+export declare abstract class Shading {
+    readonly style: ShadingStyle;
+    readonly chunk: string;
+    readonly fragment: string;
+    protected constructor(style: ShadingStyle, chunk: string, fragment: string);
+    writeParameters(target: Float32Array, offset: number): void;
+    /** Interpolate numeric settings between two instances of this lighting model. */
+    interpolate(start: Shading, target: Shading, t: number): void;
+    abstract clone(): Shading;
+}

package/dist/src/engine/material/shading/index.d.ts

@@ -0,0 +1,5 @@
+export { Shading, ShadingStyle } from './Shading';
+export { PBRShading } from './PBRShading';
+export { CelShading, type CelShadingOptions } from './CelShading';
+export { GoochShading, type GoochShadingOptions } from './GoochShading';
+export { ClayShading } from './ClayShading';

package/dist/src/engine/render/RenderConfig.d.ts

@@ -17,12 +17,7 @@ export declare enum DenoiserType {
     OIDN = "oidn",
     NATIVE = "native"
 }
-export declare enum ShadingStyle {
-    PBR = "pbr",
-    GOOCH = "gooch",
-    CEL = "cel",
-    CLAY = "clay"
-}
+export { ShadingStyle } from '../material/shading/Shading';
 export declare enum ShadowMethod {
     PCF = "pcf",
     PCSS = "pcss"
@@ -37,12 +32,6 @@ export declare class RenderConfig {
     shadowMethod: ShadowMethod;
     lightSize: number;
     frustumCulling: boolean;
-    shadingStyle: ShadingStyle;
-    celBands: number;
-    celRimStrength: number;
-    celRimPower: number;
-    goochWarm: number;
-    goochCool: number;
     raytraceEnabled: boolean;
     rtSamples: number;
     rtMaxAccumulation: number;
@@ -51,15 +40,4 @@ export declare class RenderConfig {
     bounce_count: number;
     denoiser: DenoiserType;
     oidnModel: string;
-    /** Apply Cel/Toon shading with optional parameters. Chainable. */
-    setCel(options?: {
-        bands?: number;
-        rimStrength?: number;
-        rimPower?: number;
-    }): this;
-    /** Apply Gooch technical illustration shading. Chainable. */
-    setGooch(options?: {
-        warm?: number;
-        cool?: number;
-    }): this;
 }

package/dist/src/index.d.ts

@@ -436,3 +436,4 @@ export * from './engine/utils/SubdivisionEngine';
 export * from './engine/utils/Utility';
 export * from './engine/utils/gpu_utils';
 export * from './plugins/OutlinePlugin';
+export * from './engine/material/shading';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retiam",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "WebGPU powered animation engine",
   "type": "module",
   "main": "./dist/retiam.es.js",
@@ -45,6 +45,7 @@
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "test:distribution": "node --import tsx --test test/library_portability_test.ts test/package_contents_test.mjs test/render_config_test.mjs",
     "test:create": "node --test test/create_retiam_test.mjs",
+    "test:shading": "npm run build && node --test test/shading_test.mjs test/shading_browser.test.mjs",
     "test:studio-layout": "node --test test/studio_layout.test.mjs",
     "unit-test": "ts-node-esm test/test.ts",
     "gen-context": "ts-node tools/context_gen/context_generator.ts ./src",
@@ -104,4 +105,4 @@
     "woff2-encoder": "^2.0.0",
     "ws": "^8.16.0"
   }
-}
+}

package/readme.md

@@ -12,20 +12,60 @@ Retiam is a TypeScript animation engine built on WebGPU. Write scenes for mathem
 - **Rendering:** combine 2D paths, 3D meshes, lighting, shadows, compute effects, and post-processing.
 - **Specialized libraries:** add charts, graphs, physics, procedural shapes, sketch styling, and emphasis animations through separate imports.
 - **Audio and output:** work with audio, narration, and subtitles; inspect snapshots, render video, or share scenes as web components.
+- **Retiam Studio:** edit scenes alongside a live preview, tune supported values with inspectors, and control playback from your generated project.
 
 ## Getting started
 
-The project generator creates a TypeScript application, installs its dependencies,
-and opens Retiam Studio with a **Write** animation of “Retiam”:
+| Method | Use it for | Result |
+| --- | --- | --- |
+| [npm project and Studio](#create-a-project-with-studio) | Author and preview TypeScript scenes, then render video | Source project, MP4 and snapshots |
+| [CDN modules](#use-retiam-from-a-cdn) | Add a live scene directly to a browser page | Interactive WebGPU canvas |
+| [Embedded export](#export-an-independent-web-embed) | Share a finished animation on another website | Hosted web component and bundled assets |
+
+### Create a project with Studio
+
+Use Node.js 20.19 or newer and a WebGPU-capable browser. The project generator
+creates a TypeScript application, installs its dependencies, and opens Retiam
+Studio with a **Write** animation of “Retiam”:
 
 ```bash
-npx create-retiam my-animation
+npx create-retiam@latest my-animation
+```
+
+The generated project declares
+`"retiam": "latest"`. Its initial install uses npm's `latest` engine release;
+the package manager's lockfile records the resolved version for later installs.
+
+The editor opens below the preview. Drag the divider to resize it, or use the
+layout control to dock it on the left or right. Studio remembers your choice.
+Single-scene projects show the preview and editor; scene navigation and search
+appear when more scenes are added and the page reloads.
+
+Press Ctrl+C to stop the server. To reopen Studio:
+
+```bash
+cd my-animation
+npm run dev
 ```
 
-Run `npm run dev` inside the generated project to reopen Studio. Use `--no-start`
-to install without launching or `--no-install` to generate files only. The
-[`create-retiam` package](packages/create-retiam/README.md) is released separately
-from the engine; see its maintainer instructions for packaging and publication.
+Edit `src/scenes/Retiam.ts` in your editor or Studio. The generated project also
+includes `config.js` for CLI rendering, `studio/` for the local editor, and the
+Vite and TypeScript configuration. In Studio, **Run** or **Ctrl/Command+Enter**
+applies and saves edits. Add default-exported Scene classes under `src/scenes/`
+to make them available in the scene browser after reloading.
+
+| Generator option | Behavior |
+| --- | --- |
+| `--no-start` | Install dependencies without starting Studio |
+| `--no-install` | Generate files without installing or starting |
+| `--no-open` | Start the server without opening a browser |
+| `--title "Hello"` | Change the starter animation text |
+| `--pm npm\|pnpm\|yarn\|bun` | Choose the package manager |
+
+The [`create-retiam` package](packages/create-retiam/README.md)
+is released separately from the engine. Publish the engine version required by
+its starter before publishing the generator. Generator updates apply to new
+projects; existing projects keep their own Studio and configuration files.
 
 ### Manual setup
 
@@ -33,7 +73,7 @@ Install Retiam in your own TypeScript application:
 
 ```bash
 npm install retiam
-npm install --save-dev typescript vite @webgpu/types
+npm install --save-dev typescript "vite@^6.1.1" @webgpu/types
 ```
 
 Follow the [installation guide](https://abhilasbiswas.github.io/retiam-docs/installation/) for the complete project structure, TypeScript configuration, and browser entry point. To use an unpublished checkout, run `npm pack` in this repository and install the generated `.tgz` file in your application.
@@ -93,21 +133,259 @@ window.addEventListener("pagehide", () => scene.destroy(), { once: true });
 
 The host page needs a `<canvas id="canvas"></canvas>` with an explicit CSS display size. Continue with [your first scene](https://abhilasbiswas.github.io/retiam-docs/first-scene/) for animation, camera, and lifecycle guidance.
 
+## Use Retiam from a CDN
+
+Import Retiam directly in a browser page. The published module is available at
+**[jsDelivr](https://cdn.jsdelivr.net/npm/retiam@latest/dist/retiam.es.min.js)**.
+This example loads the core and charts entries through the latest release tag:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Retiam CDN animation</title>
+    <style>
+      html, body { margin: 0; width: 100%; height: 100%; }
+      canvas { display: block; width: 100%; height: 100%; }
+    </style>
+    <script type="importmap">
+      {
+        "imports": {
+          "retiam": "https://cdn.jsdelivr.net/npm/retiam@latest/dist/retiam.es.min.js",
+          "retiam/charts": "https://cdn.jsdelivr.net/npm/retiam@latest/dist/libs/charts/index.js"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <script type="module">
+      import { Scene, Circle, Create, CameraModel, hex } from 'retiam';
+
+      class BrowserScene extends Scene {
+        async run() {
+          this.clearColor(hex('#080C14'));
+          this.camera.model = CameraModel.ORTHOGRAPHIC;
+          this.camera.orthoScale = 12;
+          this.camera.position.set([0, 0, 20]);
+          this.camera.lookAt([0, 0, 0]);
+          const circle = new Circle(1, { fill: hex('#38BDF8') });
+          this.add(circle);
+          await this.play(new Create(circle, { duration: 1200 }));
+          await this.wait(1000);
+        }
+      }
+
+      const scene = new BrowserScene();
+      scene.start(document.querySelector('#canvas')).catch(console.error);
+      window.addEventListener('pagehide', () => scene.destroy(), { once: true });
+    </script>
+  </body>
+</html>
+```
+
+Serve the page over HTTPS or localhost, with a WebGPU-capable browser. No Retiam
+npm installation is needed for this page. Add import-map entries for any other
+sublibraries you use, such as `retiam/shapes`, with the same release tag. jsDelivr
+serves the module's related chunks, fonts, workers and WASM assets. A CDN page
+runs the animation live; the [npm CLI workflow](#cli-and-video-rendering) produces
+video and snapshots.
+
+## Export an independent web embed
+
+Bundle a finished scene into a custom element for a blog, documentation page or
+another application. The exported files include the engine code and emitted
+assets needed by that scene. The receiving site needs WebGPU and those files.
+
+This recipe uses Vite 6, matching the generated project's toolchain. For a
+generated npm project, save the following as `src/embed.ts`. Each element
+owns its canvas and Scene, handles resizing, and cleans up when removed.
+
+<details>
+<summary>src/embed.ts</summary>
+
+```typescript
+import MyScene from './scenes/Retiam';
+
+// A separate name lets this bundle coexist with other scene components.
+class MyRetiamSceneElement extends HTMLElement {
+  private cleanup?: () => void;
+
+  connectedCallback() {
+    this.cleanup?.();
+    const canvas = document.createElement('canvas');
+    canvas.style.cssText = 'display:block;width:100%;height:100%';
+    this.replaceChildren(canvas);
+    const scene = new MyScene();
+    let cancelled = false, started = false, resizeFrame = 0;
+    let observer: ResizeObserver | undefined;
+
+    this.cleanup = () => {
+      cancelled = true;
+      observer?.disconnect();
+      cancelAnimationFrame(resizeFrame);
+      if (started) scene.destroy();
+      // A pending initialization cleans up in its continuation below.
+    };
+    void scene.start(canvas).then(() => {
+      started = true;
+      if (cancelled) { scene.destroy(); return; }
+      observer = new ResizeObserver(() => {
+        cancelAnimationFrame(resizeFrame);
+        resizeFrame = requestAnimationFrame(() => {
+          // Current composer resizing listens to the window resize event.
+          window.dispatchEvent(new Event('resize'));
+        });
+      });
+      observer.observe(this);
+      this.dispatchEvent(new CustomEvent('scene-ready', { bubbles: true }));
+    }).catch(error => {
+      scene.destroy();
+      if (!cancelled) {
+        const message = document.createElement('p');
+        message.setAttribute('role', 'alert');
+        message.textContent = String(error);
+        this.replaceChildren(message);
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    this.cleanup?.();
+    this.cleanup = undefined;
+  }
+}
+
+if (!customElements.get('my-retiam-scene')) {
+  customElements.define('my-retiam-scene', MyRetiamSceneElement);
+}
+```
+
+</details>
+
+For a manual project, change the scene import to your scene module. The
+[npm embed recipe](https://abhilasbiswas.github.io/retiam-docs/export/#embed-from-npm)
+explains lifecycle handling, multiple instances and hosting.
+
+Save this as `vite.embed.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: './',
+  build: {
+    target: 'es2022',
+    outDir: 'outputs/embed',
+    lib: {
+      entry: 'src/embed.ts',
+      formats: ['es'],
+      fileName: 'my-scene',
+    },
+  },
+});
+```
+
+Build the component:
+
+```bash
+npx vite build --config vite.embed.config.ts
+```
+
+Copy the **whole** `outputs/embed` folder to your website, for example under
+`/embeds/my-scene/`, then mount the custom element:
+
+```html
+<script type="module" src="/embeds/my-scene/my-scene.js"></script>
+<my-retiam-scene style="display:block;width:100%;height:540px"></my-retiam-scene>
+```
+
+The receiving site needs no npm installation or separate Retiam CDN import.
+Preserve emitted files and their relative paths. Assets or services explicitly
+referenced by remote URLs still need hosting. Use a distinct custom-element name
+for each different scene bundle. An MP4 is the alternative when the receiving
+page only needs video playback.
+
+The engine repository also provides an export CLI:
+
+```bash
+npx retiam export scenes/MyScene.ts outputs/embed
+```
+
+Its current implementation expects the engine repository's `src/engine` layout.
+Use the package-based Vite recipe above for generated and other external npm
+projects. See [repository export](https://abhilasbiswas.github.io/retiam-docs/export/#standalone-embeds)
+for the CLI's script and `<retiam-scene>` usage.
+
 ## CLI and video rendering
 
-Use the CLI to analyze scenes, capture PNG snapshots, and render video:
+Run these commands from the generated project folder containing `package.json`
+and `config.js`:
 
 ```bash
-npx retiam lint scenes/FirstScene.ts --json
-npx retiam snapshot scenes/FirstScene.ts --times 1.0,2.5,4.0 --json
-npx retiam render scenes/FirstScene.ts -w 1920 -h 1080 -f 60 -d 4000 -o outputs/video
+npx retiam lint src/scenes/Retiam.ts --json
+npx retiam snapshot src/scenes/Retiam.ts --times 1.0,2.5,4.0 --json
+npx retiam render src/scenes/Retiam.ts
 ```
 
-Puppeteer is a required production dependency of Retiam starting with version 1.0.1 and is installed automatically with the package. Render and snapshot commands need a working Chrome/WebGPU setup. Video rendering also requires FFmpeg on your `PATH`.
+Puppeteer is a required production dependency of Retiam and is installed automatically with the package. Render and snapshot commands need a working Chrome/WebGPU setup. Video rendering also requires FFmpeg on your `PATH`.
 
-Projects made with `create-retiam` include a commented `config.js` containing all CLI and engine render defaults. `npx retiam render` reads it from the calling project; `retiam.config.js` takes priority when present, and CLI flags override file settings. Settings include video output, anti-aliasing, transparency, shadows, shading, raytracing, and denoising.
+### Render configuration
 
-For rendering and snapshots, your project must include an `index.html` host that loads the scene selected by the CLI's `file` query parameter. Use the host from the [installation guide](https://abhilasbiswas.github.io/retiam-docs/installation/#create-a-consumer-application). Render duration (`-d`) is in milliseconds; output (`-o`) is a directory.
+The generated [config.js](packages/create-retiam/starter/config.js) contains CLI
+output and renderer quality settings with their defaults and comments. The default output
+is 1920×1080 at 60 fps, MP4 at `20M`, in `outputs/video`. `maxDuration: 0` renders
+until the scene finishes; set a limit for scenes that loop indefinitely.
+
+For a smaller draft, edit the output fields in `config.js`:
+
+```javascript
+export default {
+  width: 1280,
+  height: 720,
+  fps: 30,
+  videoBitrate: '8M',
+  outputFormat: 'mp4',
+  outputDir: './outputs/video',
+  maxDuration: 4000, // milliseconds
+};
+```
+
+The renderer starts with built-in defaults, loads `config.js` from the calling
+project, then applies CLI flags. If `retiam.config.js` exists, it is used instead
+of `config.js`. For example, this renders at 60 fps while retaining the other
+file settings:
+
+```bash
+npx retiam render src/scenes/Retiam.ts -f 60
+```
+
+The complete file also covers anti-aliasing, transparency layers, shadows,
+culling, raytracing, denoising, local server ports, and input replay.
+See the [configuration reference](https://abhilasbiswas.github.io/retiam-docs/export/#render-configuration).
+
+Choose surface appearance in scene code and materials:
+
+```typescript
+import { CelShading, GoochShading } from 'retiam';
+
+this.shading = new CelShading({ bands: 3 }); // Scene default
+sphere.material.shading = new GoochShading({ warm: 0.6, cool: 0.4 });
+```
+
+Each shading model supplies its own WGSL. Numeric parameters update through the
+material buffer without recompiling shaders. These styles apply to rasterized
+3D models; raytracing uses its own physically based lighting.
+
+For the manual setup above, use `scenes/FirstScene.ts` as the scene path. Rendering
+and snapshots serve the project's `index.html`; a host that supports selecting
+different scenes must load the CLI's `file` query parameter. The
+[manual installation guide](https://abhilasbiswas.github.io/retiam-docs/installation/#create-a-consumer-application)
+includes that bootstrap. Render duration (`-d`) is in milliseconds, snapshot
+times are in seconds, and output (`-o`) is a directory. Render filenames include
+a timestamp.
 
 See [rendering and export](https://abhilasbiswas.github.io/retiam-docs/export/) for project setup and encoding options, or follow [package-based embeds](https://abhilasbiswas.github.io/retiam-docs/export/#embed-from-npm) to bundle a scene for another website. Run `npx retiam help` for the command reference.
 
@@ -126,10 +404,14 @@ Import shared scene primitives from `retiam` and specialized functionality from
 | `retiam/rough` | RoughJS styling integration |
 | `retiam/tts` | Microsoft Edge speech synthesis, narration, and subtitles |
 
-See the [library guide](https://abhilasbiswas.github.io/retiam-docs/libraries/) for import boundaries and examples. Starting with Retiam 1.0.1, `roughjs` is a required production dependency and is installed automatically.
+See the [library guide](https://abhilasbiswas.github.io/retiam-docs/libraries/) for import boundaries and examples. `roughjs` is a required production dependency and is installed automatically.
 
 Built-in fonts and imported engine assets are included in the library package. Application media is managed separately. Edge speech synthesis in the browser requires a compatible service. See [asset workflows](https://abhilasbiswas.github.io/retiam-docs/asset-workflows/) and [speech and subtitles](https://abhilasbiswas.github.io/retiam-docs/speech-subtitles/) for setup.
 
+MSDF font generation runs in a browser worker using the WASM supplied by
+`@zappar/msdf-generator`, a production dependency. The repository's font-baking
+tools, including `msdf-bmfont-xml` and `msdf-atlas-gen`, remain development tools.
+
 ## Repository development
 
 Use Node.js 24, matching the documentation CI configuration.