angular-three-theatre/fesm2022/angular-three-theatre.mjs.map

TheatreJS for Angular Three

{"version":3,"file":"angular-three-theatre.mjs","sources":["../../../../libs/theatre/src/lib/project.ts","../../../../libs/theatre/src/lib/sheet.ts","../../../../libs/theatre/src/lib/studio/studio-token.ts","../../../../libs/theatre/src/lib/sheet-object/sheet-object.ts","../../../../libs/theatre/src/lib/transformers/transformer.ts","../../../../libs/theatre/src/lib/transformers/color.ts","../../../../libs/theatre/src/lib/transformers/degrees.ts","../../../../libs/theatre/src/lib/transformers/euler.ts","../../../../libs/theatre/src/lib/transformers/generic.ts","../../../../libs/theatre/src/lib/transformers/normalized.ts","../../../../libs/theatre/src/lib/transformers/side.ts","../../../../libs/theatre/src/lib/transformers/default-transformer.ts","../../../../libs/theatre/src/lib/sheet-object/sync.ts","../../../../libs/theatre/src/lib/sheet-object/transform.ts","../../../../libs/theatre/src/lib/sheet-object/index.ts","../../../../libs/theatre/src/lib/studio/studio.ts","../../../../libs/theatre/src/lib/sequence.ts","../../../../libs/theatre/src/index.ts","../../../../libs/theatre/src/angular-three-theatre.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';\nimport { getProject, type IProjectConfig, type ISheet } from '@theatre/core';\n\n/**\n * Component that creates and manages a Theatre.js project.\n *\n * A Theatre.js project is the top-level container for all animation data.\n * It contains sheets, which in turn contain sheet objects that hold animatable properties.\n *\n * @example\n * ```html\n * <theatre-project name=\"my-animation\" [config]=\"{ state: savedState }\">\n *   <ng-container sheet=\"scene1\">\n *     <!-- sheet objects here -->\n *   </ng-container>\n * </theatre-project>\n * ```\n */\n@Component({\n\tselector: 'theatre-project',\n\ttemplate: `\n\t\t<ng-content />\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TheatreProject {\n\t/**\n\t * The name of the Theatre.js project.\n\t * This name is used to identify the project and must be unique.\n\t *\n\t * @default 'default-theatre-project'\n\t */\n\tname = input('default-theatre-project');\n\n\t/**\n\t * Configuration options for the Theatre.js project.\n\t * Can include saved state data for restoring animations.\n\t *\n\t * @default {}\n\t */\n\tconfig = input<IProjectConfig>({});\n\n\t/**\n\t * Computed signal containing the Theatre.js project instance.\n\t */\n\tproject = computed(() => getProject(this.name(), this.config()));\n\n\t/**\n\t * Internal registry of sheets created within this project.\n\t * Tracks sheet instances and their reference counts for cleanup.\n\t */\n\tsheets: Record<string, [sheet: ISheet, count: number]> = {};\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst project = this.project();\n\t\t\tproject.ready.then();\n\t\t});\n\t}\n}\n","import { computed, DestroyRef, Directive, inject, input } from '@angular/core';\nimport { TheatreProject } from './project';\n\n/**\n * Directive that creates and manages a Theatre.js sheet within a project.\n *\n * A sheet is a container for sheet objects and their animations. Multiple sheets\n * can exist within a project, allowing you to organize animations into logical groups.\n *\n * The directive automatically handles reference counting and cleanup when the\n * directive is destroyed.\n *\n * @example\n * ```html\n * <theatre-project>\n *   <ng-container sheet=\"mainScene\">\n *     <!-- sheet objects here -->\n *   </ng-container>\n * </theatre-project>\n * ```\n *\n * @example\n * ```html\n * <!-- Using with template reference -->\n * <ng-container sheet=\"mySheet\" #sheetRef=\"sheet\">\n *   {{ sheetRef.sheet().sequence.position }}\n * </ng-container>\n * ```\n */\n@Directive({ selector: '[sheet]', exportAs: 'sheet' })\nexport class TheatreSheet {\n\t/**\n\t * The name of the sheet within the project.\n\t * This name must be unique within the parent project.\n\t *\n\t * @default 'default-theatre-sheet'\n\t */\n\tname = input('default-theatre-sheet', {\n\t\ttransform: (value: string) => {\n\t\t\tif (value === '') return 'default-theatre-sheet';\n\t\t\treturn value;\n\t\t},\n\t\talias: 'sheet',\n\t});\n\n\tprivate project = inject(TheatreProject);\n\n\t/**\n\t * Computed signal containing the Theatre.js sheet instance.\n\t * Returns an existing sheet if one with the same name already exists,\n\t * otherwise creates a new sheet.\n\t */\n\tsheet = computed(() => {\n\t\tconst name = this.name();\n\t\tconst existing = this.project.sheets[name] || [];\n\n\t\tif (existing[0]) {\n\t\t\texisting[1]++;\n\t\t\treturn existing[0];\n\t\t}\n\n\t\tconst sheet = this.project.project().sheet(name);\n\t\tthis.project.sheets[name] = [sheet, 1];\n\t\treturn sheet;\n\t});\n\n\tconstructor() {\n\t\tinject(DestroyRef).onDestroy(() => {\n\t\t\tconst existing = this.project.sheets[this.name()];\n\t\t\tif (!existing) return;\n\n\t\t\tif (existing[1] >= 1) {\n\t\t\t\texisting[1]--;\n\t\t\t}\n\n\t\t\tif (existing[1] === 0) {\n\t\t\t\tdelete this.project.sheets[this.name()];\n\t\t\t}\n\t\t});\n\t}\n}\n","import { InjectionToken, Signal } from '@angular/core';\nimport type { IStudio } from '@theatre/studio';\n\n/**\n * Injection token for accessing the Theatre.js Studio instance.\n *\n * The studio provides a visual editor for creating and editing animations.\n * This token is provided by the TheatreStudio directive and can be injected\n * into child components.\n *\n * @example\n * ```typescript\n * import { THEATRE_STUDIO } from 'angular-three-theatre';\n *\n * @Component({...})\n * export class MyComponent {\n *   private studio = inject(THEATRE_STUDIO, { optional: true });\n *\n *   selectObject() {\n *     this.studio()?.setSelection([mySheetObject]);\n *   }\n * }\n * ```\n */\nexport const THEATRE_STUDIO = new InjectionToken<Signal<IStudio>>('Theatre Studio');\n","import {\n\tbooleanAttribute,\n\tcomputed,\n\tDestroyRef,\n\tDirective,\n\teffect,\n\tinject,\n\tinput,\n\tlinkedSignal,\n\tmodel,\n\tTemplateRef,\n\tuntracked,\n\tViewContainerRef,\n} from '@angular/core';\nimport { UnknownShorthandCompoundProps } from '@theatre/core';\nimport { injectStore } from 'angular-three';\nimport { TheatreSheet } from '../sheet';\nimport { THEATRE_STUDIO } from '../studio/studio-token';\n\n/**\n * Directive that creates a Theatre.js sheet object for animating properties.\n *\n * A sheet object is a container for animatable properties within a sheet.\n * This directive must be applied to an `ng-template` element and provides\n * a structural context with access to the sheet object and its values.\n *\n * The template context includes:\n * - `sheetObject`: The Theatre.js sheet object instance (read-only signal)\n * - `values`: Current values of all animated properties (read-only signal)\n * - `select()`: Method to select this object in Theatre.js Studio\n * - `deselect()`: Method to deselect this object in Theatre.js Studio\n *\n * @example\n * ```html\n * <ng-template sheetObject=\"cube\" [sheetObjectProps]=\"{ opacity: 1 }\" let-values=\"values\">\n *   <ngt-mesh>\n *     <ngt-mesh-standard-material [opacity]=\"values().opacity\" />\n *   </ngt-mesh>\n * </ng-template>\n * ```\n *\n * @example\n * ```html\n * <!-- With selection support -->\n * <ng-template\n *   sheetObject=\"cube\"\n *   [(sheetObjectSelected)]=\"isSelected\"\n *   let-select=\"select\"\n *   let-deselect=\"deselect\"\n * >\n *   <ngt-mesh (click)=\"select()\" />\n * </ng-template>\n * ```\n */\n@Directive({ selector: 'ng-template[sheetObject]', exportAs: 'sheetObject' })\nexport class TheatreSheetObject {\n\t/**\n\t * Unique key identifying this sheet object within its parent sheet.\n\t * This key is used by Theatre.js to track and persist animation data.\n\t */\n\tkey = input.required<string>({ alias: 'sheetObject' });\n\n\t/**\n\t * Initial properties and their default values for this sheet object.\n\t * These properties will be animatable in Theatre.js Studio.\n\t *\n\t * @default {}\n\t */\n\tprops = input<UnknownShorthandCompoundProps>({}, { alias: 'sheetObjectProps' });\n\n\t/**\n\t * Whether to detach (remove) the sheet object when this directive is destroyed.\n\t * When true, the animation data for this object will be removed from the sheet.\n\t *\n\t * @default false\n\t */\n\tdetach = input(false, { transform: booleanAttribute, alias: 'sheetObjectDetach' });\n\n\t/**\n\t * Two-way bindable signal indicating whether this object is selected in Theatre.js Studio.\n\t *\n\t * @default false\n\t */\n\tselected = model<boolean>(false, { alias: 'sheetObjectSelected' });\n\n\tprivate templateRef = inject(TemplateRef);\n\tprivate vcr = inject(ViewContainerRef);\n\tprivate sheet = inject(TheatreSheet);\n\tprivate studio = inject(THEATRE_STUDIO, { optional: true });\n\tprivate store = injectStore();\n\n\tprivate originalSheetObject = computed(() => {\n\t\tconst sheet = this.sheet.sheet();\n\t\treturn sheet.object(this.key(), untracked(this.props), { reconfigure: true });\n\t});\n\n\t/**\n\t * Signal containing the Theatre.js sheet object instance.\n\t * This is a linked signal that updates when the sheet or key changes.\n\t */\n\tsheetObject = linkedSignal(this.originalSheetObject);\n\n\t/**\n\t * Signal containing the current values of all animated properties.\n\t * Updates automatically when Theatre.js values change.\n\t */\n\tvalues = linkedSignal(() => this.sheetObject().value);\n\n\tprivate detached = false;\n\tprivate aggregatedProps: UnknownShorthandCompoundProps = {};\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tthis.aggregatedProps = { ...this.aggregatedProps, ...this.props() };\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst sheetObject = this.sheetObject();\n\t\t\tconst cleanup = sheetObject.onValuesChange((newValues) => {\n\t\t\t\tthis.values.set(newValues);\n\t\t\t\tthis.store.snapshot.invalidate();\n\t\t\t});\n\t\t\tonCleanup(cleanup);\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst studio = this.studio?.();\n\t\t\tif (!studio) return;\n\n\t\t\tconst sheetObject = this.sheetObject();\n\t\t\tconst cleanup = studio.onSelectionChange((selection) => {\n\t\t\t\tthis.selected.set(selection.includes(sheetObject));\n\t\t\t});\n\t\t\tonCleanup(cleanup);\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst view = this.vcr.createEmbeddedView(this.templateRef, {\n\t\t\t\tselect: this.select.bind(this),\n\t\t\t\tdeselect: this.deselect.bind(this),\n\t\t\t\tsheetObject: this.sheetObject.asReadonly(),\n\t\t\t\tvalues: this.values.asReadonly(),\n\t\t\t});\n\t\t\tview.detectChanges();\n\t\t\tonCleanup(() => {\n\t\t\t\tview.destroy();\n\t\t\t});\n\t\t});\n\n\t\tinject(DestroyRef).onDestroy(() => {\n\t\t\tif (this.detach()) {\n\t\t\t\tthis.detached = true;\n\t\t\t\tthis.sheet.sheet().detachObject(this.key());\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Updates the sheet object with the current aggregated props.\n\t * Detaches the existing object and creates a new one with reconfigured properties.\n\t */\n\tupdate() {\n\t\tif (this.detached) return;\n\n\t\tconst [sheet, key] = [untracked(this.sheet.sheet), untracked(this.key)];\n\t\tsheet.detachObject(key);\n\t\tthis.sheetObject.set(sheet.object(key, this.aggregatedProps, { reconfigure: true }));\n\t}\n\n\t/**\n\t * Adds new properties to the sheet object.\n\t * The properties are merged with existing properties and the object is reconfigured.\n\t *\n\t * @param props - Properties to add to the sheet object\n\t */\n\taddProps(props: UnknownShorthandCompoundProps) {\n\t\tthis.aggregatedProps = { ...this.aggregatedProps, ...props };\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Removes properties from the sheet object.\n\t * If all properties are removed and `detach` is true, the object is detached from the sheet.\n\t *\n\t * @param props - Array of property names to remove\n\t */\n\tremoveProps(props: string[]) {\n\t\tconst [detach, sheet, key] = [untracked(this.detach), untracked(this.sheet.sheet), untracked(this.key)];\n\n\t\t// remove props from sheet object\n\t\tprops.forEach((prop) => {\n\t\t\tdelete this.aggregatedProps[prop];\n\t\t});\n\n\t\t// if there are no more props, detach sheet object\n\t\tif (Object.keys(this.aggregatedProps).length === 0) {\n\t\t\t// detach sheet object\n\t\t\tif (detach) {\n\t\t\t\tsheet.detachObject(key);\n\t\t\t}\n\t\t} else {\n\t\t\t// update sheet object (reconfigure)\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/**\n\t * Selects this sheet object in Theatre.js Studio.\n\t * Only works when the studio is available.\n\t */\n\tselect() {\n\t\tconst studio = this.studio?.();\n\t\tif (!studio) return;\n\t\tstudio.setSelection([this.sheetObject()]);\n\t}\n\n\t/**\n\t * Deselects this sheet object in Theatre.js Studio.\n\t * Only deselects if this object is currently selected.\n\t */\n\tdeselect() {\n\t\tconst studio = this.studio?.();\n\t\tif (!studio) return;\n\n\t\tif (studio.selection.includes(this.sheetObject())) {\n\t\t\tstudio.setSelection([]);\n\t\t}\n\t}\n\n\t/**\n\t * Type guard for the template context.\n\t * Provides type safety for the template variables exposed by this directive.\n\t *\n\t * @param _ - The directive instance\n\t * @param ctx - The template context\n\t * @returns Type predicate for the template context\n\t */\n\tstatic ngTemplateContextGuard(\n\t\t_: TheatreSheetObject,\n\t\tctx: unknown,\n\t): ctx is {\n\t\tselect: TheatreSheetObject['select'];\n\t\tdeselect: TheatreSheetObject['deselect'];\n\t\tsheetObject: ReturnType<TheatreSheetObject['sheetObject']['asReadonly']>;\n\t\tvalues: ReturnType<TheatreSheetObject['values']['asReadonly']>;\n\t} {\n\t\treturn true;\n\t}\n}\n","import type { types } from '@theatre/core';\n\n/**\n * Type definition for a Theatre.js property transformer.\n *\n * Transformers are used to convert between Three.js property values and\n * Theatre.js animation values. This allows for proper representation\n * in the Theatre.js Studio UI (e.g., showing degrees instead of radians).\n *\n * Based on https://github.com/threlte/threlte/blob/main/packages/theatre/src/lib/sheetObject/transfomers/types.ts\n *\n * @typeParam Value - The type of the original Three.js property value\n * @typeParam TransformedValue - The type of the value used in Theatre.js\n *\n * @example\n * ```typescript\n * const myTransformer: TheatreTransformer<number, number> = {\n *   transform: (value) => types.number(value * 100),\n *   apply: (target, property, value) => { target[property] = value / 100; }\n * };\n * ```\n */\nexport type TheatreTransformer<Value = any, TransformedValue = any> = {\n\t/**\n\t * The `transform` function is used to transform the value of a certain\n\t * Three.js objects proerty to a property that Theatre.js can use in an\n\t * `ISheetObject`. To ensure compatibility with the rest of the package, the\n\t * return value must be any one of the functions available at Theatre.js'\n\t * `types`.\n\t */\n\ttransform: (value: Value) => ReturnType<(typeof types)[keyof typeof types]>;\n\t/**\n\t * The `apply` function is used to apply the value to the target. `target` is\n\t * the parent object of the property (usually a Three.js object), `path` is\n\t * the name of the property and `value` is the value to apply.\n\t */\n\tapply: (target: any, property: string, value: TransformedValue) => void;\n};\n\n/**\n * Factory function for creating a Theatre.js transformer.\n *\n * This is a convenience function that provides type inference for transformer creation.\n *\n * @param transformer - The transformer configuration object\n * @returns The same transformer object (identity function with type inference)\n *\n * @example\n * ```typescript\n * import { createTransformer } from 'angular-three-theatre';\n * import { types } from '@theatre/core';\n *\n * export const percentage = createTransformer({\n *   transform: (value) => types.number(value * 100, { range: [0, 100] }),\n *   apply: (target, property, value) => { target[property] = value / 100; }\n * });\n * ```\n */\nexport function createTransformer(transformer: TheatreTransformer) {\n\treturn transformer;\n}\n","import { types } from '@theatre/core';\nimport * as THREE from 'three';\nimport { createTransformer } from './transformer';\n\nconst _color = new THREE.Color();\n\n/**\n * Transformer for Three.js Color objects.\n *\n * Converts Three.js Color to Theatre.js RGBA format for the color picker UI.\n * Uses sRGB color space for accurate color representation.\n *\n * @example\n * ```typescript\n * import { color } from 'angular-three-theatre';\n *\n * // Used automatically for Color properties, or manually:\n * [sync]=\"material\"\n * [syncProps]=\"[['emissive', { transformer: color }]]\"\n * ```\n */\nexport const color = createTransformer({\n\ttransform(value) {\n\t\tvalue.getRGB(_color, THREE.SRGBColorSpace);\n\t\treturn types.rgba({ r: _color.r, g: _color.g, b: _color.b, a: 1 });\n\t},\n\tapply(target, path, value) {\n\t\ttarget[path].setRGB(value.r, value.g, value.b, THREE.SRGBColorSpace);\n\t},\n});\n","import { types } from '@theatre/core';\nimport * as THREE from 'three';\nimport { createTransformer } from './transformer';\n\n/**\n * Transformer for radian values that displays as degrees in the UI.\n *\n * Converts between radians (used by Three.js) and degrees (more intuitive for users).\n * Used automatically for rotation.x, rotation.y, and rotation.z properties.\n *\n * @example\n * ```typescript\n * import { degrees } from 'angular-three-theatre';\n *\n * // Used automatically for rotation components, or manually:\n * [sync]=\"camera\"\n * [syncProps]=\"[['fov', { transformer: degrees }]]\"\n * ```\n */\nexport const degrees = createTransformer({\n\ttransform(target) {\n\t\treturn types.number(target * THREE.MathUtils.RAD2DEG);\n\t},\n\tapply(target, path, value) {\n\t\ttarget[path] = value * THREE.MathUtils.DEG2RAD;\n\t},\n});\n","import { types } from '@theatre/core';\nimport * as THREE from 'three';\nimport { createTransformer } from './transformer';\n\n/**\n * Transformer for Three.js Euler rotation objects.\n *\n * Converts Euler angles from radians to degrees for display in Theatre.js Studio.\n * Creates a compound property with x, y, z components shown in degrees.\n *\n * Used automatically for properties where `isEuler` is true (e.g., Object3D.rotation).\n *\n * @example\n * ```typescript\n * import { euler } from 'angular-three-theatre';\n *\n * // Used automatically for Euler properties, or manually:\n * [sync]=\"mesh\"\n * [syncProps]=\"[['rotation', { transformer: euler }]]\"\n * ```\n */\nexport const euler = createTransformer({\n\ttransform(value) {\n\t\treturn types.compound({\n\t\t\tx: value.x * THREE.MathUtils.RAD2DEG,\n\t\t\ty: value.y * THREE.MathUtils.RAD2DEG,\n\t\t\tz: value.z * THREE.MathUtils.RAD2DEG,\n\t\t});\n\t},\n\tapply(target, path, value) {\n\t\ttarget[path].x = value.x * THREE.MathUtils.DEG2RAD;\n\t\ttarget[path].y = value.y * THREE.MathUtils.DEG2RAD;\n\t\ttarget[path].z = value.z * THREE.MathUtils.DEG2RAD;\n\t},\n});\n","import { types } from '@theatre/core';\nimport { createTransformer } from './transformer';\n\n/**\n * Generic fallback transformer that handles common JavaScript types.\n *\n * Automatically detects the value type and applies the appropriate Theatre.js type:\n * - Numbers → `types.number` (Infinity converted to MAX_VALUE)\n * - Strings → `types.string`\n * - Booleans → `types.boolean`\n * - Objects → `types.compound` (spreads properties)\n *\n * Used as the default transformer when no specific transformer matches.\n *\n * @example\n * ```typescript\n * import { generic } from 'angular-three-theatre';\n *\n * // Explicitly use generic transformer:\n * [sync]=\"mesh\"\n * [syncProps]=\"[['customProperty', { transformer: generic }]]\"\n * ```\n */\nexport const generic = createTransformer({\n\ttransform(value) {\n\t\tif (typeof value === 'number') {\n\t\t\treturn types.number(value === Infinity ? Number.MAX_VALUE : value);\n\t\t} else if (typeof value === 'string') {\n\t\t\treturn types.string(value);\n\t\t} else if (typeof value === 'boolean') {\n\t\t\treturn types.boolean(value);\n\t\t}\n\t\treturn types.compound({ ...value });\n\t},\n\tapply(target, path, value) {\n\t\tif (target[path] !== null && typeof target[path] === 'object') {\n\t\t\tObject.assign(target[path], value);\n\t\t} else {\n\t\t\ttarget[path] = value;\n\t\t}\n\t},\n});\n","import { types } from '@theatre/core';\nimport { createTransformer } from './transformer';\n\n/**\n * Transformer for normalized values in the 0-1 range.\n *\n * Creates a number input with a slider constrained to the 0-1 range.\n * Used automatically for material properties like opacity, roughness,\n * metalness, transmission, and color components (r, g, b).\n *\n * @example\n * ```typescript\n * import { normalized } from 'angular-three-theatre';\n *\n * // Used automatically for common properties, or manually:\n * [sync]=\"material\"\n * [syncProps]=\"[['customNormalizedValue', { transformer: normalized }]]\"\n * ```\n */\nexport const normalized = createTransformer({\n\ttransform(value) {\n\t\treturn types.number(value, { range: [0, 1] });\n\t},\n\tapply(target, path, value) {\n\t\ttarget[path] = value;\n\t},\n});\n","import { types } from '@theatre/core';\nimport * as THREE from 'three';\nimport { createTransformer } from './transformer';\n\n/**\n * Transformer for Three.js material side property.\n *\n * Converts between Three.js side constants (FrontSide, BackSide, DoubleSide)\n * and a switch UI in Theatre.js Studio with human-readable labels.\n *\n * Used automatically for the `side` property on materials.\n *\n * @example\n * ```typescript\n * import { side } from 'angular-three-theatre';\n *\n * // Used automatically for material.side, or manually:\n * [sync]=\"material\"\n * [syncProps]=\"[['side', { transformer: side }]]\"\n * ```\n */\nexport const side = createTransformer({\n\ttransform(value) {\n\t\t// TODO: fix this type\n\t\treturn types.stringLiteral(\n\t\t\tvalue === THREE.FrontSide ? 'f' : value === THREE.BackSide ? 'b' : 'd',\n\t\t\t{ f: 'Front', b: 'Back', d: 'Double' },\n\t\t\t{ as: 'switch' },\n\t\t) as any;\n\t},\n\tapply(target, path, value) {\n\t\ttarget[path] = value === 'f' ? THREE.FrontSide : value === 'b' ? THREE.BackSide : THREE.DoubleSide;\n\t},\n});\n","import { color } from './color';\nimport { degrees } from './degrees';\nimport { euler } from './euler';\nimport { generic } from './generic';\nimport { normalized } from './normalized';\nimport { side } from './side';\n\n/**\n * Checks if a property path matches a pattern exactly or ends with the pattern.\n *\n * @param fullPropertyPath - The full property path (e.g., 'material.opacity')\n * @param pattern - The pattern to match (e.g., 'opacity')\n * @returns True if the path matches or ends with the pattern\n */\nfunction isFullOrEndingPattern(fullPropertyPath: string, pattern: string) {\n\treturn fullPropertyPath.endsWith(`.${pattern}`) || fullPropertyPath === pattern;\n}\n\n/**\n * Determines the appropriate transformer for a Three.js property based on its type and path.\n *\n * This function automatically selects the best transformer for common Three.js properties:\n * - Euler rotations → `euler` transformer (degrees display)\n * - Color values → `color` transformer (RGBA picker)\n * - Rotation components (x, y, z) → `degrees` transformer\n * - Color components (r, g, b) → `normalized` transformer (0-1 range)\n * - Material properties (opacity, roughness, metalness, transmission) → `normalized` transformer\n * - Side property → `side` transformer (Front/Back/Double switch)\n * - All others → `generic` transformer\n *\n * @param target - The parent object containing the property\n * @param path - The property name on the target\n * @param fullPropertyPath - The full dot-notation path to the property\n * @returns The appropriate transformer for the property\n *\n * @example\n * ```typescript\n * import { getDefaultTransformer } from 'angular-three-theatre';\n *\n * const mesh = new THREE.Mesh();\n * const transformer = getDefaultTransformer(mesh, 'rotation', 'rotation');\n * // Returns the euler transformer\n * ```\n */\nexport function getDefaultTransformer(target: any, path: string, fullPropertyPath: string) {\n\tconst property = target[path];\n\n\tif (property.isEuler) return euler;\n\tif (property.isColor) return color;\n\n\tif (\n\t\tisFullOrEndingPattern(fullPropertyPath, 'rotation.x') ||\n\t\tisFullOrEndingPattern(fullPropertyPath, 'rotation.y') ||\n\t\tisFullOrEndingPattern(fullPropertyPath, 'rotation.z') ||\n\t\t(target.isEuler && (fullPropertyPath === 'x' || fullPropertyPath === 'y' || fullPropertyPath === 'z'))\n\t) {\n\t\treturn degrees;\n\t}\n\n\tif (isFullOrEndingPattern(fullPropertyPath, 'r')) return normalized;\n\tif (isFullOrEndingPattern(fullPropertyPath, 'g')) return normalized;\n\tif (isFullOrEndingPattern(fullPropertyPath, 'b')) return normalized;\n\n\tif (isFullOrEndingPattern(fullPropertyPath, 'opacity')) return normalized;\n\tif (isFullOrEndingPattern(fullPropertyPath, 'roughness')) return normalized;\n\tif (isFullOrEndingPattern(fullPropertyPath, 'metalness')) return normalized;\n\tif (isFullOrEndingPattern(fullPropertyPath, 'transmission')) return normalized;\n\n\tif (isFullOrEndingPattern(fullPropertyPath, 'side')) return side;\n\n\treturn generic;\n}\n","import { computed, DestroyRef, Directive, effect, ElementRef, inject, input } from '@angular/core';\nimport { NgtAnyRecord, resolveInstanceKey, resolveRef } from 'angular-three';\nimport { THEATRE_STUDIO } from '../studio/studio-token';\nimport { getDefaultTransformer } from '../transformers/default-transformer';\nimport { TheatreTransformer } from '../transformers/transformer';\nimport { TheatreSheetObject } from './sheet-object';\n\nconst updateProjectionMatrixKeys = ['fov', 'near', 'far', 'zoom', 'left', 'right', 'top', 'bottom', 'aspect'];\n\n/**\n * Directive that synchronizes Three.js object properties with Theatre.js animations.\n *\n * This directive allows you to expose specific properties of a Three.js object\n * to Theatre.js for animation. It automatically handles property transformation\n * (e.g., converting Euler angles to degrees for the UI).\n *\n * Must be used within a `TheatreSheetObject` context.\n *\n * @example\n * ```html\n * <ng-template sheetObject=\"myMaterial\">\n *   <ngt-mesh-standard-material\n *     [sync]=\"material\"\n *     [syncProps]=\"['opacity', 'roughness', 'metalness']\"\n *     #material\n *   />\n * </ng-template>\n * ```\n *\n * @example\n * ```html\n * <!-- With custom property mapping -->\n * <ng-template sheetObject=\"myLight\">\n *   <ngt-point-light\n *     [sync]=\"light\"\n *     [syncProps]=\"[\n *       ['intensity', { label: 'Light Intensity', key: 'lightIntensity' }],\n *       'color'\n *     ]\"\n *     #light\n *   />\n * </ng-template>\n * ```\n *\n * @typeParam TObject - The type of the Three.js object being synchronized\n */\n@Directive({ selector: '[sync]', exportAs: 'sync' })\nexport class TheatreSheetObjectSync<TObject extends object> {\n\t/**\n\t * The Three.js object to synchronize with Theatre.js.\n\t * Can be an object reference, ElementRef, or a Signal of either.\n\t */\n\tparent = input.required<TObject | ElementRef<TObject> | (() => TObject | ElementRef<TObject> | undefined | null)>({\n\t\talias: 'sync',\n\t});\n\n\t/**\n\t * Array of property paths to synchronize with Theatre.js.\n\t *\n\t * Each item can be:\n\t * - A string property path (e.g., 'opacity', 'position.x')\n\t * - A tuple of [propertyPath, keyOrOptions] where options can include:\n\t *   - `label`: Display label in Theatre.js Studio\n\t *   - `key`: Unique key for the property in Theatre.js\n\t *   - `transformer`: Custom transformer for the property value\n\t *\n\t * @default []\n\t */\n\tprops = input<\n\t\tArray<string | [string, string | { label?: string; key?: string; transformer?: TheatreTransformer }]>\n\t>([], { alias: 'syncProps' });\n\n\tprivate theatreSheetObject = inject(TheatreSheetObject);\n\n\t/**\n\t * Computed signal containing the Theatre.js sheet object instance.\n\t */\n\tsheetObject = computed(() => this.theatreSheetObject.sheetObject());\n\tprivate studio = inject(THEATRE_STUDIO, { optional: true });\n\n\tprivate parentRef = computed(() => {\n\t\tconst parent = this.parent();\n\t\tif (typeof parent === 'function') return resolveRef(parent());\n\t\treturn resolveRef(parent);\n\t});\n\tprivate resolvedProps = computed(() => {\n\t\tconst props = this.props();\n\t\treturn props.reduce(\n\t\t\t(resolved, prop) => {\n\t\t\t\tif (typeof prop === 'string') {\n\t\t\t\t\tresolved.push([prop, { key: this.resolvePropertyPath(prop) }]);\n\t\t\t\t} else {\n\t\t\t\t\tif (typeof prop[1] === 'string') {\n\t\t\t\t\t\tresolved.push([prop[0], { key: prop[1] }]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresolved.push(\n\t\t\t\t\t\t\tprop as [string, { label?: string; key: string; transformer?: TheatreTransformer }],\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn resolved;\n\t\t\t},\n\t\t\t[] as Array<[string, { label?: string; key: string; transformer?: TheatreTransformer }]>,\n\t\t);\n\t});\n\n\tprivate propsToAdd = computed(() => {\n\t\tconst parent = this.parentRef();\n\t\tif (!parent) return null;\n\n\t\tconst propsToAdd: NgtAnyRecord = {};\n\t\tconst resolvedProps = this.resolvedProps();\n\t\tresolvedProps.forEach(([propName, { key, label, transformer }]) => {\n\t\t\tconst { root, targetKey } = resolveInstanceKey(parent, propName);\n\t\t\tconst rawValue = root[targetKey];\n\t\t\tconst valueTransformer = transformer ?? getDefaultTransformer(root, targetKey, propName);\n\t\t\tconst value = valueTransformer.transform(rawValue);\n\n\t\t\tvalue.label = label ?? key;\n\n\t\t\tthis.propsMapping[key] = { path: propName, transformer: valueTransformer };\n\t\t\tpropsToAdd[key] = value;\n\t\t});\n\n\t\treturn propsToAdd;\n\t});\n\n\tprivate propsMapping: Record<string, { path: string; transformer: TheatreTransformer }> = {};\n\n\tconstructor() {\n\t\teffect(() => {\n\t\t\tconst propsToAdd = this.propsToAdd();\n\t\t\tif (!propsToAdd) return;\n\t\t\tthis.theatreSheetObject.addProps(propsToAdd);\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst parent = this.parentRef();\n\t\t\tif (!parent) return;\n\n\t\t\tconst propsToAdd = this.propsToAdd();\n\t\t\tif (!propsToAdd) return;\n\n\t\t\tconst sheetObject = this.sheetObject();\n\t\t\tconst cleanup = sheetObject.onValuesChange((newValues) => {\n\t\t\t\tObject.keys(newValues).forEach((key) => {\n\t\t\t\t\t// first, check if the prop is mapped in this component\n\t\t\t\t\tconst propMapping = this.propsMapping[key];\n\t\t\t\t\tif (!propMapping) return;\n\n\t\t\t\t\t// we're using the addedProps map to infer the target property name from the property name on values\n\t\t\t\t\tconst { root, targetKey } = resolveInstanceKey(parent, propMapping.path);\n\n\t\t\t\t\t// use a transformer to apply value\n\t\t\t\t\tconst transformer = propMapping.transformer;\n\t\t\t\t\ttransformer.apply(root, targetKey, newValues[key]);\n\n\t\t\t\t\tif (updateProjectionMatrixKeys.includes(targetKey)) {\n\t\t\t\t\t\troot.updateProjectionMatrix?.();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\n\t\t\tonCleanup(cleanup);\n\t\t});\n\n\t\tinject(DestroyRef).onDestroy(() => {\n\t\t\tthis.theatreSheetObject.removeProps(Object.keys(this.propsMapping));\n\t\t});\n\t}\n\n\t/**\n\t * Captures the current values of all synchronized properties from the Three.js object\n\t * and commits them to Theatre.js.\n\t *\n\t * This is useful for \"baking\" the current state of the Three.js object into the\n\t * Theatre.js animation. Requires Theatre.js Studio to be available.\n\t */\n\tcapture() {\n\t\tconst studio = this.studio?.();\n\t\tif (!studio) return;\n\n\t\tconst parent = this.parentRef();\n\t\tif (!parent) return;\n\n\t\tconst sheetObject = this.sheetObject();\n\t\tif (!sheetObject) return;\n\n\t\tconst scrub = studio.scrub();\n\n\t\tObject.keys(sheetObject.value).forEach((key) => {\n\t\t\t// first, check if the prop is mapped in this component\n\t\t\tconst propMapping = this.propsMapping[key];\n\t\t\tif (!propMapping) return;\n\n\t\t\t// we're using the addedProps map to infer the target property name from the property name on values\n\t\t\tconst { targetProp } = resolveInstanceKey(parent, propMapping.path);\n\t\t\tconst value = propMapping.transformer.transform(targetProp).default;\n\n\t\t\tscrub.capture(({ set }) => {\n\t\t\t\tset(sheetObject.props[key], value);\n\t\t\t});\n\t\t});\n\n\t\tscrub.commit();\n\t}\n\n\t/**\n\t * Converts a property path (e.g., 'position.x') to a safe alphanumeric key.\n\t *\n\t * @param propPath - The property path to convert\n\t * @returns A safe alphanumeric key string\n\t */\n\tprivate resolvePropertyPath(propPath: string) {\n\t\treturn (\n\t\t\tpropPath\n\t\t\t\t// make the label alphanumeric by first removing dots (fundamental feature for pierced props)\n\t\t\t\t.replace(/\\./g, '-')\n\t\t\t\t// make the following characters uppercase\n\t\t\t\t.replace(/-([a-z])/g, (g) => g[1].toUpperCase())\n\t\t\t\t// convert to safe alphanumeric characters without dashes\n\t\t\t\t.replace(/[^a-zA-Z0-9]/g, '')\n\t\t);\n\t}\n}\n","import {\n\tafterNextRender,\n\tChangeDetectionStrategy,\n\tComponent,\n\tcomputed,\n\tCUSTOM_ELEMENTS_SCHEMA,\n\tDestroyRef,\n\teffect,\n\tElementRef,\n\tinject,\n\tinput,\n\tuntracked,\n\tviewChild,\n} from '@angular/core';\nimport { types } from '@theatre/core';\nimport { IScrub } from '@theatre/studio';\nimport { extend } from 'angular-three';\nimport { NgtsTransformControls, NgtsTransformControlsOptions } from 'angular-three-soba/gizmos';\nimport * as THREE from 'three';\nimport { Group } from 'three';\nimport { THEATRE_STUDIO } from '../studio/studio-token';\nimport { getDefaultTransformer } from '../transformers/default-transformer';\nimport { TheatreSheetObject } from './sheet-object';\n\n/**\n * Component that provides transform controls for animating position, rotation, and scale\n * of child Three.js objects via Theatre.js.\n *\n * When the sheet object is selected in Theatre.js Studio, transform controls appear\n * allowing direct manipulation of the object's transform. Changes are captured and\n * committed to Theatre.js.\n *\n * Must be used within a `TheatreSheetObject` context.\n *\n * @example\n * ```html\n * <ng-template sheetObject=\"myCube\">\n *   <theatre-transform>\n *     <ngt-mesh>\n *       <ngt-box-geometry />\n *       <ngt-mesh-standard-material />\n *     </ngt-mesh>\n *   </theatre-transform>\n * </ng-template>\n * ```\n *\n * @example\n * ```html\n * <!-- With custom key and options -->\n * <ng-template sheetObject=\"scene\">\n *   <theatre-transform key=\"cubeTransform\" label=\"Cube\" [options]=\"{ mode: 'rotate' }\">\n *     <ngt-mesh />\n *   </theatre-transform>\n * </ng-template>\n * ```\n *\n * @typeParam TLabel - The type of the label string\n */\n@Component({\n\tselector: 'theatre-transform',\n\ttemplate: `\n\t\t@if (selected()) {\n\t\t\t<ngts-transform-controls [object]=\"$any(group)\" [options]=\"options()\" />\n\t\t}\n\n\t\t<ngt-group #group>\n\t\t\t<ng-content />\n\t\t</ngt-group>\n\t`,\n\timports: [NgtsTransformControls],\n\tschemas: [CUSTOM_ELEMENTS_SCHEMA],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TheatreSheetObjectTransform<TLabel extends string | undefined> {\n\t/**\n\t * Display label for the transform properties in Theatre.js Studio.\n\t */\n\tlabel = input<TLabel>();\n\n\t/**\n\t * Unique key for grouping the transform properties in Theatre.js.\n\t * If provided, position/rotation/scale will be nested under this key.\n\t */\n\tkey = input<string>();\n\n\t/**\n\t * Options for the transform controls gizmo.\n\t * Allows configuring the transform mode, snap values, and coordinate space.\n\t *\n\t * @default {}\n\t */\n\toptions = input(\n\t\t{} as Pick<NgtsTransformControlsOptions, 'mode' | 'translationSnap' | 'scaleSnap' | 'rotationSnap' | 'space'>,\n\t);\n\n\t/**\n\t * Reference to the Three.js Group element that wraps the transformed content.\n\t */\n\tgroupRef = viewChild.required<ElementRef<THREE.Group>>('group');\n\tprivate controlsRef = viewChild(NgtsTransformControls);\n\n\tprivate theatreSheetObject = inject(TheatreSheetObject);\n\n\t/**\n\t * Computed signal containing the Theatre.js sheet object instance.\n\t */\n\tsheetObject = computed(() => this.theatreSheetObject.sheetObject());\n\tprivate studio = inject(THEATRE_STUDIO, { optional: true });\n\n\tprotected selected = this.theatreSheetObject.selected.asReadonly();\n\tprivate scrub?: IScrub;\n\n\tprivate positionTransformer = computed(() =>\n\t\tgetDefaultTransformer(this.groupRef().nativeElement, 'position', 'position'),\n\t);\n\tprivate rotationTransformer = computed(() =>\n\t\tgetDefaultTransformer(this.groupRef().nativeElement, 'rotation', 'rotation'),\n\t);\n\tprivate scaleTransformer = computed(() => getDefaultTransformer(this.groupRef().nativeElement, 'scale', 'scale'));\n\n\tprotected onMouseDown() {\n\t\tif (!this.studio) return;\n\t\tif (this.scrub) return;\n\t\tthis.scrub = this.studio().scrub();\n\t}\n\n\tprotected onMouseUp() {\n\t\tif (!this.scrub) return;\n\t\tthis.scrub.commit();\n\t\tthis.scrub = undefined;\n\t}\n\n\tprotected onChange() {\n\t\tif (!this.scrub) return;\n\n\t\tthis.scrub.capture((api) => {\n\t\t\tconst sheetObject = this.sheetObject();\n\t\t\tif (!sheetObject) return;\n\n\t\t\tconst group = this.groupRef().nativeElement;\n\n\t\t\tconst key = this.key();\n\t\t\tconst baseTarget = key ? sheetObject.props[key] : sheetObject.props;\n\n\t\t\tapi.set(baseTarget['position'], { ...group.position });\n\t\t\tapi.set(baseTarget['rotation'], {\n\t\t\t\tx: group.rotation.x * THREE.MathUtils.RAD2DEG,\n\t\t\t\ty: group.rotation.y * THREE.MathUtils.RAD2DEG,\n\t\t\t\tz: group.rotation.z * THREE.MathUtils.RAD2DEG,\n\t\t\t});\n\t\t\tapi.set(baseTarget['scale'], { ...group.scale });\n\t\t});\n\t}\n\n\tconstructor() {\n\t\textend({ Group });\n\n\t\tafterNextRender(() => {\n\t\t\tthis.init();\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst [sheetObject, key, positionTransformer, rotationTransformer, scaleTransformer, group] = [\n\t\t\t\tthis.sheetObject(),\n\t\t\t\tuntracked(this.key),\n\t\t\t\tuntracked(this.positionTransformer),\n\t\t\t\tuntracked(this.rotationTransformer),\n\t\t\t\tuntracked(this.scaleTransformer),\n\t\t\t\tuntracked(this.groupRef).nativeElement,\n\t\t\t];\n\n\t\t\tconst cleanup = sheetObject.onValuesChange((newValues) => {\n\t\t\t\tlet object = newValues;\n\n\t\t\t\tif (key) {\n\t\t\t\t\tif (!newValues[key]) return;\n\t\t\t\t\tobject = newValues[key];\n\t\t\t\t} else {\n\t\t\t\t\tif (!newValues['position'] || !newValues['rotation'] || !newValues['scale']) return;\n\t\t\t\t}\n\n\t\t\t\t// sanity check\n\t\t\t\tif (!object) return;\n\n\t\t\t\tpositionTransformer.apply(group, 'position', object['position']);\n\t\t\t\trotationTransformer.apply(group, 'rotation', object['rotation']);\n\t\t\t\tscaleTransformer.apply(group, 'scale', object['scale']);\n\t\t\t});\n\n\t\t\tonCleanup(cleanup);\n\t\t});\n\n\t\t// TODO: (chau) use event binding when they no longer trigger change detection\n\t\teffect((onCleanup) => {\n\t\t\tconst controls = this.controlsRef();\n\t\t\tif (!controls) return;\n\n\t\t\tconst subs = [\n\t\t\t\tcontrols.change.subscribe(this.onChange.bind(this)),\n\t\t\t\tcontrols.mouseDown.subscribe(this.onMouseDown.bind(this)),\n\t\t\t\tcontrols.mouseUp.subscribe(this.onMouseUp.bind(this)),\n\t\t\t];\n\n\t\t\tonCleanup(() => {\n\t\t\t\tsubs.forEach((sub) => sub.unsubscribe());\n\t\t\t});\n\t\t});\n\n\t\tinject(DestroyRef).onDestroy(() => {\n\t\t\tconst key = this.key();\n\t\t\tthis.theatreSheetObject.removeProps(key ? [key] : ['position', 'rotation', 'scale']);\n\t\t});\n\t}\n\n\tprivate init() {\n\t\tconst [group, key, label, positionTransformer, rotationTransformer, scaleTransformer] = [\n\t\t\tthis.groupRef().nativeElement,\n\t\t\tthis.key(),\n\t\t\tthis.label(),\n\t\t\tthis.positionTransformer(),\n\t\t\tthis.rotationTransformer(),\n\t\t\tthis.scaleTransformer(),\n\t\t];\n\n\t\tconst position = positionTransformer.transform(group.position);\n\t\tconst rotation = rotationTransformer.transform(group.rotation);\n\t\tconst scale = scaleTransformer.transform(group.scale);\n\n\t\tif (key) {\n\t\t\tthis.theatreSheetObject.addProps({\n\t\t\t\t[key]: types.compound({ position, rotation, scale }, { label: label ?? key }),\n\t\t\t});\n\t\t} else {\n\t\t\tthis.theatreSheetObject.addProps({ position, rotation, scale });\n\t\t}\n\t}\n}\n","import { TheatreSheetObject as Impl } from './sheet-object';\nimport { TheatreSheetObjectSync } from './sync';\nimport { TheatreSheetObjectTransform } from './transform';\n\nexport { TheatreSheetObject as TheatreSheetObjectImpl } from './sheet-object';\nexport * from './sync';\nexport * from './transform';\n\n/**\n * Combined array of sheet object directives for convenient importing.\n *\n * Includes:\n * - `TheatreSheetObject` - Base directive for creating sheet objects\n * - `TheatreSheetObjectTransform` - Component for animating transform properties\n * - `TheatreSheetObjectSync` - Directive for syncing arbitrary object properties\n *\n * @example\n * ```typescript\n * import { TheatreSheetObject } from 'angular-three-theatre';\n *\n * @Component({\n *   imports: [TheatreSheetObject],\n *   template: `\n *     <ng-template sheetObject=\"myObject\">\n *       <theatre-transform>\n *         <ngt-mesh />\n *       </theatre-transform>\n *     </ng-template>\n *   `\n * })\n * export class MyComponent {}\n * ```\n */\nexport const TheatreSheetObject = [Impl, TheatreSheetObjectTransform, TheatreSheetObjectSync];\n","import { booleanAttribute, Directive, effect, input, signal } from '@angular/core';\nimport { type IStudio } from '@theatre/studio';\nimport { THEATRE_STUDIO } from './studio-token';\n\n/**\n * Directive that initializes and manages the Theatre.js Studio.\n *\n * Theatre.js Studio is a visual editor that allows you to create and edit\n * animations directly in the browser. The studio UI is dynamically imported\n * to avoid including it in production builds.\n *\n * This directive must be applied to a `theatre-project` element and provides\n * the studio instance via the `THEATRE_STUDIO` injection token.\n *\n * @example\n * ```html\n * <!-- Enable studio (default) -->\n * <theatre-project studio>\n *   <ng-container sheet=\"scene\">...</ng-container>\n * </theatre-project>\n *\n * <!-- Conditionally enable/disable studio -->\n * <theatre-project [studio]=\"isDevelopment\">\n *   <ng-container sheet=\"scene\">...</ng-container>\n * </theatre-project>\n *\n * <!-- Disable studio -->\n * <theatre-project [studio]=\"false\">\n *   <ng-container sheet=\"scene\">...</ng-container>\n * </theatre-project>\n * ```\n */\n@Directive({\n\tselector: 'theatre-project[studio]',\n\texportAs: 'studio',\n\tproviders: [\n\t\t{ provide: THEATRE_STUDIO, useFactory: (studio: TheatreStudio) => studio.studio, deps: [TheatreStudio] },\n\t],\n})\nexport class TheatreStudio {\n\t/**\n\t * Whether the studio UI should be visible.\n\t * When false, the studio UI is hidden but the studio instance remains active.\n\t *\n\t * @default true\n\t */\n\tenabled = input(true, { alias: 'studio', transform: booleanAttribute });\n\n\tprivate Studio = signal<IStudio | null>(null);\n\n\t/**\n\t * Read-only signal containing the Theatre.js Studio instance.\n\t * May be null while the studio is being loaded.\n\t */\n\tstudio = this.Studio.asReadonly();\n\n\tconstructor() {\n\t\timport('@theatre/studio').then((m) => {\n\t\t\tconst Studio = 'default' in m.default ? (m.default as unknown as { default: IStudio }).default : m.default;\n\t\t\tStudio.initialize();\n\t\t\tthis.Studio.set(Studio);\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst studio = this.Studio();\n\t\t\tif (!studio) return;\n\n\t\t\tconst enabled = this.enabled();\n\n\t\t\tif (enabled) {\n\t\t\t\tstudio.ui.restore();\n\t\t\t} else {\n\t\t\t\tstudio.ui.hide();\n\t\t\t}\n\n\t\t\tonCleanup(() => {\n\t\t\t\tstudio.ui.hide();\n\t\t\t});\n\t\t});\n\t}\n}\n","import { computed, Directive, effect, inject, input, model, untracked } from '@angular/core';\nimport { type ISequence, onChange, val } from '@theatre/core';\nimport { omit, pick } from 'angular-three';\nimport { mergeInputs } from 'ngxtension/inject-inputs';\nimport { TheatreProject } from './project';\nimport { TheatreSheet } from './sheet';\n\n/**\n * Options for attaching audio to a Theatre.js sequence.\n *\n * When audio is attached, the sequence playback will be synchronized\n * with the audio playback.\n */\nexport interface AttachAudioOptions {\n\t/**\n\t * Either a URL to the audio file (eg \"http://localhost:3000/audio.mp3\") or an instance of AudioBuffer\n\t */\n\tsource: string | AudioBuffer;\n\t/**\n\t * An optional AudioContext. If not provided, one will be created.\n\t */\n\taudioContext?: AudioContext;\n\t/**\n\t * An AudioNode to feed the audio into. Will use audioContext.destination if not provided.\n\t */\n\tdestinationNode?: AudioNode;\n}\n\n/**\n * Configuration options for the TheatreSequence directive.\n *\n * Extends Theatre.js sequence play options with additional Angular-specific options\n * for automatic playback control.\n */\nexport type TheatreSequenceOptions = Parameters<ISequence['play']>[0] & {\n\t/**\n\t * Whether to automatically start playback when the sequence is initialized.\n\t * @default false\n\t */\n\tautoplay: boolean;\n\t/**\n\t * Whether to automatically pause playback when the directive is destroyed.\n\t * @default false\n\t */\n\tautopause: boolean;\n\t/**\n\t * Delay in milliseconds before autoplay starts.\n\t * @default 0\n\t */\n\tdelay: number;\n\t/**\n\t * When to reset the sequence position to 0.\n\t * - 'init': Reset when the directive is initialized\n\t * - 'destroy': Reset when the directive is destroyed\n\t * - 'always': Reset on both init and destroy\n\t */\n\tautoreset?: 'init' | 'destroy' | 'always';\n};\n\nconst defaultOptions: TheatreSequenceOptions = {\n\trate: 1,\n\tautoplay: false,\n\tautopause: false,\n\tdelay: 0,\n};\n\n/**\n * Directive that provides control over a Theatre.js sequence.\n *\n * A sequence controls the playback of animations within a sheet. This directive\n * provides methods to play, pause, and reset the sequence, as well as reactive\n * signals for the current position, playing state, and length.\n *\n * Must be used on an element that also has the `sheet` directive.\n *\n * @example\n * ```html\n * <ng-container sheet=\"scene\" [sequence]=\"{ autoplay: true, rate: 1 }\" #seq=\"sequence\">\n *   <p>Position: {{ seq.position() }}</p>\n *   <button (click)=\"seq.play()\">Play</button>\n *   <button (click)=\"seq.pause()\">Pause</button>\n * </ng-container>\n * ```\n *\n * @example\n * ```html\n * <!-- With audio synchronization -->\n * <ng-container\n *   sheet=\"scene\"\n *   [sequence]=\"{ autoplay: true }\"\n *   [sequenceAudio]=\"{ source: '/audio/soundtrack.mp3' }\"\n * />\n * ```\n */\n@Directive({ selector: '[sheet][sequence]', exportAs: 'sequence' })\nexport class TheatreSequence {\n\t/**\n\t * Sequence configuration options.\n\t * Merged with default options using ngxtension's mergeInputs.\n\t *\n\t * @default { rate: 1, autoplay: false, autopause: false, delay: 0 }\n\t */\n\toptions = input(defaultOptions, { alias: 'sequence', transform: mergeInputs(defaultOptions) });\n\n\t/**\n\t * Audio options for synchronizing playback with an audio file.\n\t * When provided, the sequence will be synchronized with the audio.\n\t */\n\taudioOptions = input<AttachAudioOptions | undefined>(undefined, { alias: 'sequenceAudio' });\n\n\t/**\n\t * Two-way bindable signal for the current playback position in seconds.\n\t *\n\t * @default 0\n\t */\n\tposition = model<number>(0);\n\n\t/**\n\t * Two-way bindable signal indicating whether the sequence is currently playing.\n\t *\n\t * @default false\n\t */\n\tplaying = model<boolean>(false);\n\n\t/**\n\t * Two-way bindable signal for the total length of the sequence in seconds.\n\t *\n\t * @default 0\n\t */\n\tlength = model<number>(0);\n\n\tprivate playOptions = omit(this.options, ['autoplay', 'autopause', 'delay', 'autoreset']);\n\tprivate autoplay = pick(this.options, 'autoplay');\n\tprivate autopause = pick(this.options, 'autopause');\n\tprivate autoreset = pick(this.options, 'autoreset');\n\tprivate delay = pick(this.options, 'delay');\n\n\tprivate project = inject(TheatreProject);\n\tprivate sheet = inject(TheatreSheet, { host: true });\n\n\t/**\n\t * Computed signal containing the Theatre.js sequence instance.\n\t */\n\tsequence = computed(() => this.sheet.sheet().sequence);\n\n\tconstructor() {\n\t\teffect((onCleanup) => {\n\t\t\tconst autoplay = untracked(this.autoplay);\n\t\t\tif (!autoplay) return;\n\n\t\t\tconst delay = untracked(this.delay);\n\t\t\tconst id = setTimeout(() => {\n\t\t\t\tuntracked(() => this.play());\n\t\t\t}, delay);\n\n\t\t\tonCleanup(() => {\n\t\t\t\tclearTimeout(id);\n\t\t\t});\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst autopause = untracked(this.autopause);\n\t\t\tonCleanup(() => {\n\t\t\t\tif (autopause) {\n\t\t\t\t\tthis.pause();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst autoreset = untracked(this.autoreset);\n\t\t\tif (autoreset === 'init' || autoreset === 'always') {\n\t\t\t\tuntracked(() => this.reset());\n\t\t\t}\n\n\t\t\tonCleanup(() => {\n\t\t\t\tif (autoreset === 'destroy' || autoreset === 'always') {\n\t\t\t\t\tuntracked(() => this.reset());\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\teffect(() => {\n\t\t\tconst [audioOptions, sequence] = [this.audioOptions(), untracked(this.sequence)];\n\t\t\tif (audioOptions) sequence.attachAudio(audioOptions);\n\t\t});\n\n\t\teffect(() => {\n\t\t\tconst [playOptions, sequence] = [this.playOptions(), untracked(this.sequence)];\n\t\t\tconst isPlaying = val(sequence.pointer.playing);\n\t\t\tif (isPlaying) {\n\t\t\t\tthis.pause();\n\t\t\t\tthis.play(playOptions);\n\t\t\t}\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst sequence = this.sequence();\n\n\