three-cad-viewer 4.1.2 → 4.2.0

package/src/core/types.ts

@@ -28,7 +28,7 @@ export type UpDirection = "Z" | "Y" | "legacy";
 export type AnimationMode = "none" | "animation" | "explode";
 
 /** Active sidebar tab */
-export type ActiveTab = "tree" | "clip" | "material" | "zebra";
+export type ActiveTab = "tree" | "clip" | "material" | "zebra" | "studio";
 
 /** Zebra color scheme */
 export type ZebraColorScheme = "blackwhite" | "colorful" | "grayscale";
@@ -36,6 +36,23 @@ export type ZebraColorScheme = "blackwhite" | "colorful" | "grayscale";
 /** Zebra mapping mode */
 export type ZebraMappingMode = "reflection" | "normal";
 
+/**
+ * Studio environment preset name.
+ * - "studio": Built-in procedural RoomEnvironment (zero network)
+ * - "none": No environment map
+ * - Any other string: Poly Haven HDR preset slug or custom HDR URL
+ */
+export type StudioEnvironment = string;
+
+/** Studio tone mapping algorithm */
+export type StudioToneMapping = "neutral" | "ACES" | "none";
+
+/** Studio background mode */
+export type StudioBackground = "grey" | "darkgrey" | "white" | "gradient" | "gradient-dark" | "environment" | "transparent";
+
+/** Studio texture mapping mode */
+export type StudioTextureMapping = "triplanar" | "parametric";
+
 /** Shape type */
 export type ShapeType = "shapes" | "edges" | "vertices";
 
@@ -70,6 +87,9 @@ export type ColorValue = number | string;
 /** RGB color as tuple [r, g, b] with values 0-1 */
 export type RGBColor = [number, number, number];
 
+/** RGBA color as tuple [r, g, b, a] with values 0-1 */
+export type RGBAColor = [number, number, number, number];
+
 /** Axis colors per theme - array of RGB colors for X, Y, Z axes */
 export type AxisColors = Record<Theme, RGBColor[]>;
 
@@ -184,7 +204,7 @@ export type ActionShortcutName =
   | "reset" | "resize" | "iso" | "front" | "rear" | "top" | "bottom" | "left" | "right"
   | "explode" | "distance" | "properties" | "select" | "help"
   | "play" | "stop"
-  | "tree" | "clip" | "material" | "zebra";
+  | "tree" | "clip" | "material" | "zebra" | "studio";
 
 /** Action keymap: action name → key character */
 export type ActionKeymap = Partial<Record<ActionShortcutName, string>>;
@@ -224,21 +244,27 @@ export interface DisplayOptions {
   zscaleTool?: boolean;
   /** Show zebra tool (default: true) */
   zebraTool?: boolean;
+  /** Show studio tool (default: true) */
+  studioTool?: boolean;
   /** Enable measurement debug mode (default: false) */
   measurementDebug?: boolean;
+  /** External canvas element to use for the WebGL renderer, enabling shared WebGL context scenarios (default: undefined — renderer creates its own canvas) */
+  canvas?: HTMLCanvasElement;
+  /** External WebGL context to use for the renderer. When provided together with `canvas`, the renderer will use this context instead of creating a new one. Useful for sharing a context with other renderers like PixiJS. (default: undefined) */
+  gl?: WebGLRenderingContext | WebGL2RenderingContext;
 }
 
 /** Render options */
 export interface RenderOptions {
   /** Default edge color (default: 0x707070) */
   edgeColor?: number;
-  /** Ambient light intensity (default: 0.5) */
+  /** Ambient light intensity (default: 1) */
   ambientIntensity?: number;
-  /** Direct light intensity (default: 0.6) */
+  /** Direct light intensity (default: 1.1) */
   directIntensity?: number;
-  /** Metalness (default: 0.7) */
+  /** Metalness (default: 0.3) */
   metalness?: number;
-  /** Roughness (default: 0.7) */
+  /** Roughness (default: 0.65) */
   roughness?: number;
   /** Default opacity level for transparency (default: 0.5) */
   defaultOpacity?: number;
@@ -246,8 +272,8 @@ export interface RenderOptions {
   normalLen?: number;
 }
 
-/** Viewer options */
-export interface ViewerOptions {
+/** Viewer options (includes studio mode configuration) */
+export interface ViewerOptions extends StudioModeOptions {
   /** Use OrbitControls or TrackballControls (default: "orbit") */
   control?: ControlType;
   /** Show X-, Y-, Z-axes (default: false) */
@@ -324,8 +350,34 @@ export interface ZebraOptions {
   zebraMappingMode?: ZebraMappingMode;
 }
 
+/** Studio mode options (environment, tone mapping, edges) */
+export interface StudioModeOptions {
+  /** Environment preset or custom HDR URL (default: "studio") */
+  studioEnvironment?: string;
+  /** Environment map intensity, 0-1 (default: 0.5) */
+  studioEnvIntensity?: number;
+  /** Background mode (default: "environment") */
+  studioBackground?: StudioBackground;
+  /** Tone mapping algorithm (default: "neutral") */
+  studioToneMapping?: StudioToneMapping;
+  /** Tone mapping exposure, 0-2 (default: 1.0) */
+  studioExposure?: number;
+  /** Use 4K environment maps instead of 2K (default: false) */
+  studio4kEnvMaps?: boolean;
+  /** Texture mapping mode: triplanar projection or parametric UVs (default: "triplanar") */
+  studioTextureMapping?: StudioTextureMapping;
+  /** Environment map rotation in degrees, 0-360 (default: 0) */
+  studioEnvRotation?: number;
+  /** Shadow intensity, 0-1 (default: 0 = off) */
+  studioShadowIntensity?: number;
+  /** Shadow softness, 0-1 (default: 0.3) */
+  studioShadowSoftness?: number;
+  /** Ambient occlusion intensity, 0-3.0 (default: 0 = off) */
+  studioAOIntensity?: number;
+}
+
 /** Combined options for initialization */
-export type CombinedOptions = DisplayOptions & RenderOptions & ViewerOptions & ZebraOptions;
+export type CombinedOptions = DisplayOptions & RenderOptions & ViewerOptions & ZebraOptions & StudioModeOptions;
 
 // =============================================================================
 // Viewer State Shape
@@ -349,6 +401,7 @@ export interface ViewerStateShape {
   explodeTool: boolean;
   zscaleTool: boolean;
   zebraTool: boolean;
+  studioTool: boolean;
   measurementDebug: boolean;
 
   // Render
@@ -399,6 +452,19 @@ export interface ViewerStateShape {
   zebraColorScheme: ZebraColorScheme;
   zebraMappingMode: ZebraMappingMode;
 
+  // Studio
+  studioEnvironment: string;
+  studioEnvIntensity: number;
+  studioBackground: StudioBackground;
+  studioToneMapping: StudioToneMapping;
+  studioExposure: number;
+  studio4kEnvMaps: boolean;
+  studioTextureMapping: StudioTextureMapping;
+  studioEnvRotation: number;
+  studioShadowIntensity: number;
+  studioShadowSoftness: number;
+  studioAOIntensity: number;
+
   // Runtime
   activeTool: string | null;
   animationMode: AnimationMode;
@@ -411,6 +477,235 @@ export interface ViewerStateShape {
 /** Keys of ViewerStateShape */
 export type StateKey = keyof ViewerStateShape;
 
+// =============================================================================
+// Material Appearance (Studio Mode)
+// =============================================================================
+
+/**
+ * Material appearance definition for Studio mode.
+ *
+ * All fields are optional. Only provided fields override defaults.
+ * In Studio mode the viewer uses MeshPhysicalMaterial; properties left
+ * unset default to their "off" values (transmission=0, clearcoat=0, etc.)
+ * which the shader skips at near-zero cost.
+ *
+ * This is a data-format interface (describes JSON input), not a Three.js material.
+ * Texture string fields reference either a key in the root-level `textures` table,
+ * a data URI, or a URL resolved against the HTML page.
+ */
+export interface MaterialAppearance {
+  /** Display name */
+  name?: string;
+  /** Reference to a built-in preset (e.g., "stainless-steel", "car-paint") */
+  builtin?: string;
+
+  // -- Color --
+
+  /** sRGB base color. Accepts RGBA tuple [r,g,b,a] (0-1) or CSS hex string "#rrggbb". */
+  color?: RGBAColor | string;
+  /** Texture reference for base color */
+  map?: string;
+
+  // -- Metallic-Roughness PBR --
+
+  /** Metalness factor, 0-1 (default: 0.0) */
+  metalness?: number;
+  /** Roughness factor, 0-1 (default: 0.5) */
+  roughness?: number;
+
+  // -- Textures (Standard) --
+
+  /** Normal map texture reference */
+  normalMap?: string;
+  /** Ambient occlusion texture reference */
+  aoMap?: string;
+  /** Metalness map texture reference */
+  metalnessMap?: string;
+  /** Roughness map texture reference */
+  roughnessMap?: string;
+
+  // -- Emissive --
+
+  /** Emissive color, linear RGB */
+  emissive?: RGBColor;
+  /** Emissive map texture reference */
+  emissiveMap?: string;
+  /** Emissive intensity multiplier (default: 1.0) */
+  emissiveIntensity?: number;
+
+  // -- Alpha --
+
+  /** Alpha blending mode */
+  alphaMode?: "OPAQUE" | "MASK" | "BLEND";
+  /** Alpha cutoff threshold for MASK mode (default: 0.5) */
+  alphaCutoff?: number;
+
+  // -- Transmission (glass, water) --
+
+  /** Transmission factor, 0-1 */
+  transmission?: number;
+  /** Transmission map texture reference */
+  transmissionMap?: string;
+
+  // -- Clearcoat (car paint, varnish) --
+
+  /** Clearcoat intensity, 0-1 */
+  clearcoat?: number;
+  /** Clearcoat roughness */
+  clearcoatRoughness?: number;
+  /** Clearcoat intensity texture reference */
+  clearcoatMap?: string;
+  /** Clearcoat roughness texture reference */
+  clearcoatRoughnessMap?: string;
+  /** Clearcoat normal map texture reference */
+  clearcoatNormalMap?: string;
+
+  // -- Volume (subsurface: jade, wax, skin) --
+
+  /** Thickness for volume effects */
+  thickness?: number;
+  /** Thickness map texture reference */
+  thicknessMap?: string;
+  /** Attenuation distance for volume absorption */
+  attenuationDistance?: number;
+  /** Attenuation color, linear RGB */
+  attenuationColor?: RGBColor;
+
+  // -- IOR --
+
+  /** Index of refraction (default: 1.5) */
+  ior?: number;
+
+  // -- Specular --
+
+  /** Specular intensity, 0-1 */
+  specularIntensity?: number;
+  /** Specular tint color, linear RGB */
+  specularColor?: RGBColor;
+  /** Specular intensity texture reference */
+  specularIntensityMap?: string;
+  /** Specular color texture reference */
+  specularColorMap?: string;
+
+  // -- Sheen (fabric, velvet) --
+
+  /** Sheen intensity, 0-1 (required to enable sheen layer) */
+  sheen?: number;
+  /** Sheen tint color, linear RGB */
+  sheenColor?: RGBColor;
+  /** Sheen roughness */
+  sheenRoughness?: number;
+  /** Sheen color texture reference */
+  sheenColorMap?: string;
+  /** Sheen roughness texture reference */
+  sheenRoughnessMap?: string;
+
+  // -- Anisotropy (brushed metal) --
+
+  /** Anisotropy strength, 0-1 */
+  anisotropy?: number;
+  /** Anisotropy rotation in radians */
+  anisotropyRotation?: number;
+  /** Anisotropy direction texture reference */
+  anisotropyMap?: string;
+
+  // -- Misc --
+
+  /** Use MeshBasicMaterial (unlit, no shading) */
+  unlit?: boolean;
+  /** Render both sides of faces (THREE.DoubleSide) */
+  doubleSided?: boolean;
+}
+
+// =============================================================================
+// MaterialX Material (threejs-materials format)
+// =============================================================================
+
+/**
+ * Material definition from threejs-materials (Three.js MeshPhysicalMaterial-compatible).
+ *
+ * This format is produced by the threejs-materials Python library, which catalogs
+ * PBR materials from ambientCG, GPUOpen, PolyHaven, and PhysicallyBased.
+ * The `properties` dict uses simplified property names (e.g., "color", "roughness",
+ * "normal") where each entry has an optional `value` (scalar or color array in
+ * linear RGB) and/or `texture` (inline data URI).
+ *
+ * Detected by the presence of the `properties` key.
+ * Extra keys from threejs-materials (id, name, source, url, license) pass through
+ * harmlessly and are not part of this interface.
+ */
+export interface MaterialXMaterial {
+  /** Material properties from threejs-materials. Each key maps to { value?, texture? } */
+  properties: Record<string, { value?: unknown; texture?: string }>;
+  /** Optional texture tiling [u, v], default [1, 1]. Applied to all textures. */
+  textureRepeat?: [number, number];
+}
+
+/**
+ * Type guard to check if a material entry is a threejs-materials format dict.
+ * Detected by the presence of the `properties` key.
+ */
+export function isMaterialXMaterial(m: unknown): m is MaterialXMaterial {
+  return typeof m === "object" && m !== null && "properties" in m;
+}
+
+// =============================================================================
+// Texture Entry (Studio Mode)
+// =============================================================================
+
+/**
+ * Entry in the root-level `textures` table.
+ *
+ * Each entry is either embedded (base64-encoded image data) or a URL reference
+ * loaded on demand. At least one of `data`+`format` or `url` must be provided.
+ * An empty TextureEntry is invalid and will be ignored at runtime.
+ * Multiple builtin preset texture fields can reference the same key for
+ * deduplication. threejs-materials carry their own textures as inline data URIs.
+ */
+export interface TextureEntry {
+  /** Base64-encoded image data (for embedded textures) */
+  data?: string;
+  /** Image format, e.g., "png", "jpg", "webp" (required when data is provided) */
+  format?: string;
+  /** URL to load the texture from (for URL-referenced textures) */
+  url?: string;
+}
+
+// =============================================================================
+// Studio Options
+// =============================================================================
+
+/**
+ * Root-level Studio mode configuration.
+ *
+ * Optional configuration for the rendering environment, only used when
+ * the Studio tab is active. Fields map directly to ViewerState keys on load.
+ */
+export interface StudioOptions {
+  /** Environment preset slug, custom HDR URL, or "none" (default: "studio") */
+  environment?: StudioEnvironment;
+  /** Environment map intensity, 0-1 (default: 0.5) */
+  envIntensity?: number;
+  /** Background mode (default: "environment") */
+  background?: StudioBackground;
+  /** Tone mapping algorithm (default: "neutral") */
+  toneMapping?: StudioToneMapping;
+  /** Tone mapping exposure (default: 1.0) */
+  toneMappingExposure?: number;
+  /** Use 4K environment maps instead of 2K (default: false) */
+  use4kEnvMaps?: boolean;
+  /** Texture mapping mode (default: "triplanar") */
+  textureMapping?: StudioTextureMapping;
+  /** Environment map rotation in degrees (default: 0) */
+  envRotation?: number;
+  /** Shadow intensity, 0-1 (default: 0 = off) */
+  shadowIntensity?: number;
+  /** Shadow softness, 0-1 (default: 0.3) */
+  shadowSoftness?: number;
+  /** Ambient occlusion intensity, 0-3.0 (default: 0 = off) */
+  aoIntensity?: number;
+}
+
 // =============================================================================
 // Shape & Texture Types
 // =============================================================================
@@ -451,6 +746,8 @@ export interface Shape {
   triangles_per_face?: number[] | Uint32Array;
   /** Number of segments per edge (when edges is flat) */
   segments_per_edge?: number[] | Uint32Array;
+  /** UV coordinates (2 floats per vertex, same indexing as vertices) */
+  uvs?: number[] | Float32Array;
 }
 
 /**
@@ -481,6 +778,16 @@ export interface ShapeNested {
   face_types: number[];
 }
 
+/**
+ * Shape reference for the instanced/compressed format.
+ * Before decoding, a part's shape field may be `{ ref: N }` referencing
+ * the Nth entry in the instances array. After decoding, all ShapeRefs
+ * are replaced with full Shape objects.
+ */
+export interface ShapeRef {
+  ref: number;
+}
+
 /**
  * Check if shape uses binary format (has triangles_per_face).
  */
@@ -565,6 +872,18 @@ export interface Shapes {
   width?: number | undefined;
   /** Vertex size in pixels (added during decomposition for vertex shapes) */
   size?: number | undefined;
+  /** Material tag referencing materials table or built-in preset (leaf nodes) */
+  material?: string | undefined;
+  /** User-defined material library (root node).
+   *  Values can be:
+   *  - string: builtin preset reference (e.g., "builtin:car-paint")
+   *  - MaterialXMaterial: threejs-materials format (detected by `properties` key)
+   *  - MaterialAppearance: preset with overrides (e.g., { builtin: "acrylic-clear", color: "#55a0e3" })
+   */
+  materials?: Record<string, string | MaterialXMaterial | MaterialAppearance> | undefined;
+  /** Shared texture table for builtin preset materials (root node).
+   *  threejs-materials carry their own textures inline. */
+  textures?: Record<string, TextureEntry> | undefined;
 }
 
 // =============================================================================

package/src/core/viewer-state.ts

@@ -9,6 +9,9 @@ import {
   type ActiveTab,
   type ZebraColorScheme,
   type ZebraMappingMode,
+  type StudioBackground,
+  type StudioToneMapping,
+  type StudioTextureMapping,
   type Keymap,
   type StateChange,
   type StateSubscriber,
@@ -16,6 +19,7 @@ import {
   type SubscribeOptions,
   type RenderOptions,
   type ViewerOptions,
+  type StudioOptions,
 } from "./types";
 import { logger } from "../utils/logger.js";
 
@@ -38,6 +42,7 @@ interface DisplayDefaults {
   explodeTool: boolean;
   zscaleTool: boolean;
   zebraTool: boolean;
+  studioTool: boolean;
   measurementDebug: boolean;
 }
 
@@ -101,6 +106,23 @@ interface ZebraDefaults {
   zebraMappingMode: ZebraMappingMode;
 }
 
+/**
+ * Studio mode defaults
+ */
+interface StudioModeDefaults {
+  studioEnvironment: string;
+  studioEnvIntensity: number;
+  studioBackground: StudioBackground;
+  studioToneMapping: StudioToneMapping;
+  studioExposure: number;
+  studio4kEnvMaps: boolean;
+  studioTextureMapping: StudioTextureMapping;
+  studioEnvRotation: number;
+  studioShadowIntensity: number;
+  studioShadowSoftness: number;
+  studioAOIntensity: number;
+}
+
 /**
  * Runtime state defaults
  */
@@ -116,7 +138,7 @@ interface RuntimeDefaults {
 /**
  * Complete state shape
  */
-type StateShape = DisplayDefaults & RenderDefaults & ViewerDefaults & ZebraDefaults & RuntimeDefaults;
+type StateShape = DisplayDefaults & RenderDefaults & ViewerDefaults & ZebraDefaults & StudioModeDefaults & RuntimeDefaults;
 
 /**
  * Keys of the state shape
@@ -141,7 +163,7 @@ const STATE_KEYS: ReadonlySet<string> = new Set<StateKey>([
   // Display
   "theme", "cadWidth", "treeWidth", "treeHeight", "height", "pinning", "glass", "tools",
   "keymap", "newTreeBehavior", "measureTools", "selectTool", "explodeTool", "zscaleTool",
-  "zebraTool", "measurementDebug",
+  "zebraTool", "studioTool", "measurementDebug",
   // Render
   "ambientIntensity", "directIntensity", "metalness", "roughness", "defaultOpacity",
   "edgeColor", "normalLen",
@@ -153,6 +175,10 @@ const STATE_KEYS: ReadonlySet<string> = new Set<StateKey>([
   "panSpeed", "rotateSpeed", "zoomSpeed", "timeit",
   // Zebra
   "zebraCount", "zebraOpacity", "zebraDirection", "zebraColorScheme", "zebraMappingMode",
+  // Studio
+  "studioEnvironment", "studioEnvIntensity", "studioBackground",
+  "studioToneMapping", "studioExposure", "studio4kEnvMaps", "studioTextureMapping",
+  "studioEnvRotation", "studioShadowIntensity", "studioShadowSoftness", "studioAOIntensity",
   // Runtime
   "activeTool", "animationMode", "animationSliderValue", "zscaleActive", "highlightedButton",
   "activeTab",
@@ -211,6 +237,18 @@ const STATE_TO_NOTIFICATION_KEY: Partial<Record<StateKey, string>> = {
   zebraDirection: "zebra_direction",
   zebraColorScheme: "zebra_color_scheme",
   zebraMappingMode: "zebra_mapping_mode",
+  // Studio settings
+  studioEnvironment: "studio_environment",
+  studioEnvIntensity: "studio_env_intensity",
+  studioBackground: "studio_background",
+  studioToneMapping: "studio_tone_mapping",
+  studioExposure: "studio_exposure",
+  studio4kEnvMaps: "studio_4k_env_maps",
+  studioTextureMapping: "studio_texture_mapping",
+  studioEnvRotation: "studio_env_rotation",
+  studioShadowIntensity: "studio_shadow_intensity",
+  studioShadowSoftness: "studio_shadow_softness",
+  studioAOIntensity: "studio_ao_intensity",
   // Animation/Explode slider (shared state, mutually exclusive modes)
   animationSliderValue: "relative_time",
 };
@@ -288,7 +326,7 @@ class ViewerState {
   static DISPLAY_DEFAULTS: DisplayDefaults = {
     theme: "light",
     cadWidth: 800,
-    treeWidth: 250,
+    treeWidth: 260,
     treeHeight: 400,
     height: 600,
     pinning: false,
@@ -300,7 +338,7 @@ class ViewerState {
       reset: "R", resize: "r",
       iso: "5", front: "1", rear: "3", top: "8", bottom: "2", left: "4", right: "6",
       explode: "x", zscale: "L", distance: "D", properties: "P", select: "S", help: "h", play: " ", stop: "Escape",
-      tree: "T", clip: "C", material: "M", zebra: "Z",
+      tree: "T", clip: "C", material: "M", zebra: "Z", studio: "s",
     },
     newTreeBehavior: true,
     measureTools: true,
@@ -308,6 +346,7 @@ class ViewerState {
     explodeTool: true,
     zscaleTool: false,
     zebraTool: true,
+    studioTool: true,
     measurementDebug: false,
   };
 
@@ -371,6 +410,23 @@ class ViewerState {
     zebraMappingMode: "reflection",
   };
 
+  /**
+   * Studio mode settings
+   */
+  static STUDIO_MODE_DEFAULTS: StudioModeDefaults = {
+    studioEnvironment: "studio",
+    studioEnvIntensity: 1.0,
+    studioBackground: "environment",
+    studioToneMapping: "neutral",
+    studioExposure: 1.0,
+    studio4kEnvMaps: false,
+    studioTextureMapping: "triplanar",
+    studioEnvRotation: 0,
+    studioShadowIntensity: 0.5,
+    studioShadowSoftness: 0.2,
+    studioAOIntensity: 0.5,
+  };
+
   /**
    * Runtime state (not from options, changes during execution)
    */
@@ -400,6 +456,7 @@ class ViewerState {
       ...ViewerState.RENDER_DEFAULTS,
       ...ViewerState.VIEWER_DEFAULTS,
       ...ViewerState.ZEBRA_DEFAULTS,
+      ...ViewerState.STUDIO_MODE_DEFAULTS,
       ...ViewerState.RUNTIME_DEFAULTS,
     };
 
@@ -525,6 +582,26 @@ class ViewerState {
     this._update(converted, notify);
   }
 
+  /**
+   * Update studio state from StudioOptions (shapes.studioOptions).
+   * Maps short field names to prefixed state keys.
+   */
+  updateStudioState(options: StudioOptions): void {
+    const map: Partial<StateShape> = {};
+    if (options.environment !== undefined) map.studioEnvironment = options.environment;
+    if (options.envIntensity !== undefined) map.studioEnvIntensity = options.envIntensity;
+    if (options.background !== undefined) map.studioBackground = options.background;
+    if (options.toneMapping !== undefined) map.studioToneMapping = options.toneMapping;
+    if (options.toneMappingExposure !== undefined) map.studioExposure = options.toneMappingExposure;
+    if (options.use4kEnvMaps !== undefined) map.studio4kEnvMaps = options.use4kEnvMaps;
+    if (options.textureMapping !== undefined) map.studioTextureMapping = options.textureMapping;
+    if (options.envRotation !== undefined) map.studioEnvRotation = options.envRotation;
+    if (options.shadowIntensity !== undefined) map.studioShadowIntensity = options.shadowIntensity;
+    if (options.shadowSoftness !== undefined) map.studioShadowSoftness = options.shadowSoftness;
+    if (options.aoIntensity !== undefined) map.studioAOIntensity = options.aoIntensity;
+    this._update(map, false);
+  }
+
   /**
    * Get all state as a plain object (for serialization)
    */
@@ -647,6 +724,7 @@ class ViewerState {
       ...ViewerState.RENDER_DEFAULTS,
       ...ViewerState.VIEWER_DEFAULTS,
       ...ViewerState.ZEBRA_DEFAULTS,
+      ...ViewerState.STUDIO_MODE_DEFAULTS,
       ...ViewerState.RUNTIME_DEFAULTS,
     };
 
@@ -677,6 +755,7 @@ class ViewerState {
       ...ViewerState.RENDER_DEFAULTS,
       ...ViewerState.VIEWER_DEFAULTS,
       ...ViewerState.ZEBRA_DEFAULTS,
+      ...ViewerState.STUDIO_MODE_DEFAULTS,
       ...ViewerState.RUNTIME_DEFAULTS,
     };
   }
@@ -696,6 +775,7 @@ class ViewerState {
     logCategory("Render", ViewerState.RENDER_DEFAULTS);
     logCategory("View", ViewerState.VIEWER_DEFAULTS);
     logCategory("Zebra", ViewerState.ZEBRA_DEFAULTS);
+    logCategory("Studio", ViewerState.STUDIO_MODE_DEFAULTS);
     logCategory("Runtime", ViewerState.RUNTIME_DEFAULTS);
   }
 }