@threlte/theatre 0.1.0-next.2 → 1.0.0-next.3

package/README.md

@@ -1,19 +1,66 @@
-![Threlte Logo](https://user-images.githubusercontent.com/46897060/178455971-434f4c5d-6c26-4d34-acdc-b4b50e2a8a2c.png)
+<div align="right">
+ <a href="https://www.npmjs.com/package/@threlte/theatre">
+  <img alt="npm" src="https://img.shields.io/npm/v/@threlte/theatre?color=fe4100&labelColor=171d27&logo=npm&logoColor=white"/>
+ </a>
+ <a href="https://github.com/threlte/threlte/blob/main/LICENSE.md">
+  <img alt="license" src="https://img.shields.io/npm/l/@threlte/core?color=fe4100&labelColor=171d27&logo=git&logoColor=white"/>
+ </a>
+ <a href="https://discord.com/channels/985983540804091964">
+  <img alt="discord" src="https://img.shields.io/discord/985983540804091964?label=discord&color=fe4100&labelColor=171d27&logo=discord&logoColor=white"/>
+ </a>
+ <a href="https://next.threlte.xyz">
+  <img alt="docs" src="https://img.shields.io/website?down_color=red&down_message=offline&label=docs&color=fe4100&labelColor=171d27&up_message=online&url=https%3A%2F%2Fthrelte.xyz&logo=svelte&logoColor=white"/>
+ </a>
+</div>
 
-<h1 align="center">@threlte/theatre</h1>
+<a href="https://next.threlte.xyz">
+ <img src="./threlte-banner.jpg"/>
+</a>
 
-Provides easy to use components and hooks to use [Theatre.js](https://www.theatrejs.com/) in threlte.
+## Rapidly Build Interactive 3D Apps for the Web
 
-## Official Documentation
+Threlte is a [Svelte](https://svelte.dev/) library that simplifies creating 3D apps for the web. It provides a **declarative**, **type-safe**, **reactive** and **interactive** API out-of-the-box.
 
-Visit [threlte.xyz](https://threlte.xyz)
+Threlte's **3D rendering** is powered by [Three.js](https://threejs.org/), and it also provides a **physics engine** through [Rapier](https://rapier.rs/) and an **animation studio** via [Theatre.js](https://www.theatrejs.com/); see [packages](#packages) for details.
 
-## Support
+Check out our **[documentation](https://next.threlte.xyz)** and our **[Discord community](https://discord.gg/EqUBCfCaGm)**.
 
-Join the [Discord server](https://discord.gg/EqUBCfCaGm)
+## @threlte/theatre
+
+[@threlte/theatre](https://next.threlte.xyz/docs/reference/theatre/getting-started) lets you animate in your Threlte app through the [Theatre.js studio](https://www.theatrejs.com/)
+
+The package allows you to use an interactive GUI in the browser during development and visually configure your animations. It supports both Three.js and HTML DOM animations.
+
+## Quickstart
+
+### Installation
+
+For a quick interactive setup of a fresh Threlte project, run:
+
+```sh
+npm create threlte my-project
+```
+and select the `@threlte/theatre` option.
+
+Alternatively you can check out the full [installation instructions](https://next.threlte.xyz/docs/learn/getting-started/installation).
+
+### Support
+
+Have questions? Feel free to ask in our [Discord support forum](https://discord.com/channels/985983540804091964/1031843197963477002).
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- **Filing Issues** - if you have feature requestions or you think you spotted a bug, [submit an issue](https://github.com/threlte/threlte/issues/new).
+- **Contributing Code** - if you would like to drop us a PR, read the [contribution guide](https://github.com/threlte/threlte/blob/main/CONTRIBUTING.md) first.
+
+## Sponsors
+
+[![Powered by Vercel](./assets/vercel/powered-by-vercel.svg)](https://vercel.com/?utm_source=threlte&utm_campaign=oss)
 
 ---
 
 ### License
 
-The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
+The MIT License (MIT). Please see the [License File](LICENSE.md) for more information.

package/dist/{components/consts.d.ts → consts.d.ts}

@@ -3,4 +3,4 @@ import type { IStudio } from '@theatre/studio';
 export declare const globalProjects: Map<string, IProject>;
 export declare const globalSheets: Map<string, ISheet>;
 export declare const globalObjects: Map<string, ISheetObject<import("@theatre/core").UnknownShorthandCompoundProps>>;
-export declare const globalStudio: import("@threlte/core").CurrentWritable<IStudio | undefined>;
+export declare const studio: import("@threlte/core").CurrentWritable<IStudio | undefined>;

package/dist/{components/consts.js → consts.js}

@@ -2,4 +2,4 @@ import { currentWritable } from '@threlte/core';
 export const globalProjects = new Map();
 export const globalSheets = new Map();
 export const globalObjects = new Map();
-export const globalStudio = currentWritable(undefined);
+export const studio = currentWritable(undefined);

package/dist/index.d.ts

@@ -1,6 +1,12 @@
-export { default as Studio } from './components/Studio/Studio.svelte';
-export { default as Project } from './components/Project/Project.svelte';
-export { default as Sheet } from './components/Sheet/Sheet.svelte';
-export { default as Editable } from './components/Editable/Editable.svelte';
-export { default as Theatre } from './components/Theatre/Theatre.svelte';
-export { useStudio } from './components/Studio/useStudio';
+export { default as Studio } from './studio/Studio.svelte';
+export { default as Project } from './project/Project.svelte';
+export { default as Sequence } from './sequence/Sequence.svelte';
+export { default as Sheet } from './sheet/Sheet.svelte';
+export { default as Theatre } from './theatre/Theatre.svelte';
+export { default as SheetObject } from './sheetObject/SheetObject.svelte';
+export { createTransformer } from './sheetObject/transfomers/createTransformer';
+export type { Transformer } from './sheetObject/transfomers/types';
+export { useStudio } from './studio/useStudio';
+export { useSequence } from './sequence/useSequence';
+export { createSheetObjectAction } from './sheet/createSheetObjectAction';
+export type { SequenceController } from './sequence/SequenceController';

package/dist/index.js

@@ -1,8 +1,14 @@
 // components
-export { default as Studio } from './components/Studio/Studio.svelte';
-export { default as Project } from './components/Project/Project.svelte';
-export { default as Sheet } from './components/Sheet/Sheet.svelte';
-export { default as Editable } from './components/Editable/Editable.svelte';
-export { default as Theatre } from './components/Theatre/Theatre.svelte';
+export { default as Studio } from './studio/Studio.svelte';
+export { default as Project } from './project/Project.svelte';
+export { default as Sequence } from './sequence/Sequence.svelte';
+export { default as Sheet } from './sheet/Sheet.svelte';
+export { default as Theatre } from './theatre/Theatre.svelte';
+// SheetObject related things
+export { default as SheetObject } from './sheetObject/SheetObject.svelte';
+export { createTransformer } from './sheetObject/transfomers/createTransformer';
 // hooks
-export { useStudio } from './components/Studio/useStudio';
+export { useStudio } from './studio/useStudio';
+export { useSequence } from './sequence/useSequence';
+// actions
+export { createSheetObjectAction } from './sheet/createSheetObjectAction';

package/dist/{components/Project → project}/Project.svelte

@@ -1,19 +1,22 @@
 <script>import { globalProjects } from '../consts';
 import { getProject } from '../theatre';
 import { setContext } from 'svelte';
+// PROPS
 export let name = 'default';
 export let config = undefined;
+// BINDINGS
 export const project = globalProjects.get(name) ?? getProject(name, config);
 globalProjects.set(name, project);
-let isReady = false;
-const init = async () => {
+export let isReady = false;
+const syncReady = async () => {
     await project.ready;
     isReady = true;
 };
-init();
+syncReady();
+// CHILD CONTEXT
 setContext(`theatre-project`, project);
 </script>
 
-{#if isReady}
+{#await project.ready then}
   <slot {project} />
-{/if}
+{/await}

package/dist/{components/Project → project}/Project.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         name?: string | undefined;
         config?: IProjectConfig | undefined;
         project?: import("@theatre/core").IProject | undefined;
+        isReady?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,9 +16,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type ProjectProps = typeof __propDef.props;
-export declare type ProjectEvents = typeof __propDef.events;
-export declare type ProjectSlots = typeof __propDef.slots;
+export type ProjectProps = typeof __propDef.props;
+export type ProjectEvents = typeof __propDef.events;
+export type ProjectSlots = typeof __propDef.slots;
 export default class Project extends SvelteComponentTyped<ProjectProps, ProjectEvents, ProjectSlots> {
     get project(): import("@theatre/core").IProject;
 }

package/dist/sequence/Sequence.svelte

@@ -0,0 +1,92 @@
+<script>import { getContext, onDestroy, onMount, setContext } from 'svelte';
+// Parent context
+const { sequences } = getContext('theatre-sheet');
+// Props
+let key = 'default'; // not exposed yet, will be a prop in the future
+// Theatre's native playback options
+export let rate = 1;
+export let range = undefined;
+export let iterationCount = undefined;
+export let direction = undefined;
+export let rafDriver = undefined;
+export let audio = undefined;
+// Threlte's custom playback options
+export let autoplay = false;
+export let autoreset = undefined;
+export let autopause = false;
+export let delay = 0;
+// Get the Sequence instance
+export const sequence = sequences[key];
+// autoplay logic
+if (!autoplay && delay > 0) {
+    console.warn('Sequence: delay has no effect unless the option autoplay is enabled.', {
+        sequence
+    });
+}
+let delayTimer;
+if (autoplay) {
+    delayTimer = setTimeout(() => sequence.play(), delay);
+}
+onDestroy(() => {
+    clearTimeout(delayTimer);
+});
+// autopause logic
+onDestroy(() => {
+    if (autopause) {
+        sequence.pause();
+    }
+});
+// autoreset logic
+if (autoreset === 'onMount' || autoreset === 'always') {
+    sequence.reset();
+}
+onDestroy(() => {
+    if (autoreset === 'onDestroy' || autoreset === 'always') {
+        sequence.reset();
+    }
+});
+// config reactivity
+$: sequence.config({
+    audio,
+    rate,
+    range,
+    iterationCount,
+    direction,
+    rafDriver
+});
+// Bindings
+const { position: positionStore, playing: playingStore, length: lengthStore } = sequence;
+export let position = $positionStore;
+export let playing = $playingStore;
+export const length = $lengthStore;
+export const play = (opts) => sequence.play(opts);
+export const pause = () => sequence.pause();
+// position
+let positionChangedBy = 'user';
+positionStore.subscribe((value) => {
+    positionChangedBy = 'code';
+    position = value;
+});
+$: position,
+    positionChangedBy === 'user' && ($positionStore = position),
+    (positionChangedBy = 'user');
+// playing
+let playingChangedBy = 'user';
+playingStore.subscribe((value) => {
+    playingChangedBy = 'code';
+    playing = value;
+});
+$: playing, playingChangedBy === 'user' && ($playingStore = playing), (playingChangedBy = 'user');
+// pass sequence to children via context
+setContext('theatre-sequence', sequence);
+// pass to parent
+sequences[key] = sequence;
+</script>
+
+<slot
+  {sequence}
+  {position}
+  {playing}
+  {play}
+  {pause}
+/>

package/dist/sequence/Sequence.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IRafDriver } from '@theatre/core';
+import type { Autoreset, IterationCount, PlaybackDirection, PlaybackRange, SequenceAudioOptions } from './types';
+declare const __propDef: {
+    props: {
+        rate?: number | undefined;
+        range?: PlaybackRange;
+        iterationCount?: IterationCount;
+        direction?: PlaybackDirection;
+        rafDriver?: IRafDriver | undefined;
+        audio?: SequenceAudioOptions | undefined;
+        autoplay?: boolean | undefined;
+        autoreset?: Autoreset;
+        autopause?: boolean | undefined;
+        delay?: number | undefined;
+        sequence?: import("./SequenceController").SequenceController | undefined;
+        position?: number | undefined;
+        playing?: boolean | undefined;
+        length?: number | undefined;
+        play?: ((conf?: {
+            iterationCount?: number | undefined;
+            range?: [from: number, to: number] | undefined;
+            rate?: number | undefined;
+            direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+            rafDriver?: IRafDriver | undefined;
+        } | undefined) => Promise<boolean>) | undefined;
+        pause?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            sequence: import("./SequenceController").SequenceController;
+            position: number;
+            playing: boolean;
+            play: (conf?: {
+                iterationCount?: number | undefined;
+                range?: [from: number, to: number] | undefined;
+                rate?: number | undefined;
+                direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+                rafDriver?: IRafDriver | undefined;
+            } | undefined) => Promise<boolean>;
+            pause: () => void;
+        };
+    };
+};
+export type SequenceProps = typeof __propDef.props;
+export type SequenceEvents = typeof __propDef.events;
+export type SequenceSlots = typeof __propDef.slots;
+export default class Sequence extends SvelteComponentTyped<SequenceProps, SequenceEvents, SequenceSlots> {
+    get sequence(): import("./SequenceController").SequenceController;
+    get length(): number;
+    get play(): (conf?: {
+        iterationCount?: number | undefined;
+        range?: [from: number, to: number] | undefined;
+        rate?: number | undefined;
+        direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+        rafDriver?: IRafDriver | undefined;
+    } | undefined) => Promise<boolean>;
+    get pause(): () => void;
+}
+export {};

package/dist/sequence/SequenceController.d.ts

@@ -0,0 +1,48 @@
+import { onChange, type ISequence } from '@theatre/core';
+import type { Readable, Subscriber, Writable } from 'svelte/store';
+import type { SequenceOptions } from './types';
+/**
+ * ### `SequenceController`
+ *
+ * This class is a wrapper around the native `ISequence` object. It provides
+ * reactive stores for the sequence's position, playing state, and length.
+ */
+export declare class SequenceController {
+    key: string;
+    position: SequencePosition;
+    playing: SequencePlaying;
+    length: SequenceLength;
+    private options;
+    private sequence;
+    constructor(sequence: ISequence, options?: SequenceOptions);
+    config(options: SequenceOptions): void;
+    play(opts?: Parameters<ISequence['play']>[0]): ReturnType<ISequence['play']>;
+    pause(): ReturnType<ISequence['pause']>;
+    reset(): void;
+}
+export declare class SequencePosition implements Writable<number> {
+    sequence: ISequence;
+    play: () => void;
+    subscribers: Set<Subscriber<number>>;
+    unsubscribe: ReturnType<typeof onChange>;
+    constructor(sequence: ISequence, play: () => void);
+    subscribe(subscription: Subscriber<number>): () => void;
+    update(callback: (prev: number) => number): void;
+    set(value: number): void;
+}
+export declare class SequencePlaying implements Writable<boolean> {
+    sequence: ISequence;
+    play: () => void;
+    subscribers: Set<Subscriber<boolean>>;
+    constructor(sequence: ISequence, play: () => void);
+    subscribe(subscription: Subscriber<boolean>): () => void;
+    update(callback: (prev: boolean) => boolean): void;
+    set(value: boolean): void;
+}
+export declare class SequenceLength implements Readable<number> {
+    sequence: ISequence;
+    subscribers: Set<Subscriber<number>>;
+    unsubscribe: ReturnType<typeof onChange>;
+    constructor(sequence: ISequence);
+    subscribe(subscription: Subscriber<number>): () => void;
+}

package/dist/sequence/SequenceController.js

@@ -0,0 +1,159 @@
+import { onChange, val } from '@theatre/core';
+import { get } from 'svelte/store';
+/**
+ * ### `SequenceController`
+ *
+ * This class is a wrapper around the native `ISequence` object. It provides
+ * reactive stores for the sequence's position, playing state, and length.
+ */
+export class SequenceController {
+    key;
+    position;
+    playing;
+    length;
+    options;
+    sequence;
+    constructor(sequence, options = {}) {
+        // api
+        this.key = options?.key ?? 'default'; // not in use - for future proofing
+        this.sequence = sequence; // theatre native object
+        this.options = options; // to be set via config method
+        // stores
+        this.position = new SequencePosition(sequence, () => this.play());
+        this.playing = new SequencePlaying(sequence, () => this.play());
+        this.length = new SequenceLength(sequence);
+        // methods
+        this.config = this.config.bind(this);
+        this.play = this.play.bind(this);
+        this.pause = this.pause.bind(this);
+        this.reset = this.reset.bind(this);
+    }
+    config(options) {
+        // update options
+        const updatedOptions = { ...this.options, ...options };
+        // ensure no unnecessary updates happen
+        const noChange = Object.keys(updatedOptions).every((key) => this.options[key] == updatedOptions[key]);
+        if (noChange) {
+            return;
+        }
+        else {
+            this.options = updatedOptions;
+        }
+        // update audio options
+        if (options.audio)
+            this.sequence.attachAudio(options.audio);
+        // get replay conditions
+        const replay = options.rate ||
+            options.range ||
+            options.iterationCount ||
+            options.direction ||
+            options.rafDriver;
+        // and also check if playing
+        const playing = get(this.playing);
+        // trigger replay if needed
+        if (playing && replay) {
+            this.pause();
+            this.play();
+        }
+    }
+    play(opts = {}) {
+        return this.sequence.play({ ...this.options, ...opts });
+    }
+    pause() {
+        return this.sequence.pause();
+    }
+    reset() {
+        this.position.set(0);
+    }
+}
+// stores
+export class SequencePosition {
+    sequence;
+    play;
+    subscribers;
+    unsubscribe;
+    constructor(sequence, play) {
+        this.sequence = sequence;
+        this.play = play;
+        this.subscribers = new Set();
+        // TODO: this is a potential memory leak, when is unsubscribe called?
+        this.unsubscribe = onChange(this.sequence.pointer.position, (position) => {
+            this.subscribers.forEach((subscription) => subscription(position));
+        });
+    }
+    subscribe(subscription) {
+        this.subscribers.add(subscription);
+        subscription(this.sequence.position);
+        return () => {
+            this.subscribers.delete(subscription);
+            // TODO: run this.unsubscribe after the last delete?
+        };
+    }
+    update(callback) {
+        this.set(callback(this.sequence.position));
+    }
+    set(value) {
+        const isPlaying = val(this.sequence.pointer.playing);
+        this.sequence.position = value;
+        if (isPlaying)
+            this.play();
+    }
+}
+export class SequencePlaying {
+    sequence;
+    play;
+    subscribers;
+    constructor(sequence, play) {
+        this.sequence = sequence;
+        this.play = play;
+        // subs
+        this.subscribers = new Set();
+        // TODO: this is missing an unsubscribe!!
+        onChange(this.sequence.pointer.playing, (playing) => {
+            this.subscribers.forEach((subscription) => subscription(playing));
+        });
+    }
+    subscribe(subscription) {
+        this.subscribers.add(subscription);
+        subscription(val(this.sequence.pointer.playing));
+        return () => {
+            this.subscribers.delete(subscription);
+        };
+    }
+    update(callback) {
+        const isPlaying = val(this.sequence.pointer.playing);
+        const shouldBePlaying = callback(isPlaying);
+        if (isPlaying && !shouldBePlaying)
+            this.sequence.pause();
+        if (!isPlaying && shouldBePlaying)
+            this.play();
+    }
+    set(value) {
+        const isPlaying = val(this.sequence.pointer.playing);
+        const shouldBePlaying = value;
+        if (isPlaying && !shouldBePlaying)
+            this.sequence.pause();
+        if (!isPlaying && shouldBePlaying)
+            this.play();
+    }
+}
+export class SequenceLength {
+    sequence;
+    subscribers;
+    unsubscribe;
+    constructor(sequence) {
+        this.sequence = sequence;
+        this.subscribers = new Set();
+        // TODO: this is a potential memory leak, when is unsubscribe called?
+        this.unsubscribe = onChange(this.sequence.pointer.length, (length) => {
+            this.subscribers.forEach((run) => run(length));
+        });
+    }
+    subscribe(subscription) {
+        this.subscribers.add(subscription);
+        subscription(val(this.sequence.pointer.length));
+        return () => {
+            this.subscribers.delete(subscription);
+        };
+    }
+}

package/dist/sequence/types.d.ts

@@ -0,0 +1,16 @@
+import type { ISequence, IRafDriver } from '@theatre/core';
+export type TheatreSequenceOptions = Required<NonNullable<Parameters<ISequence['play']>[0]>>;
+export type PlaybackRange = TheatreSequenceOptions['range'] | undefined;
+export type IterationCount = TheatreSequenceOptions['iterationCount'] | undefined;
+export type PlaybackDirection = TheatreSequenceOptions['direction'] | undefined;
+export type SequenceAudioOptions = Parameters<ISequence['attachAudio']>[0];
+export type Autoreset = undefined | 'always' | 'onMount' | 'onDestroy';
+export interface SequenceOptions {
+    key?: string;
+    rate?: number;
+    range?: PlaybackRange;
+    iterationCount?: IterationCount;
+    direction?: PlaybackDirection;
+    rafDriver?: IRafDriver;
+    audio?: SequenceAudioOptions;
+}

package/dist/sequence/useSequence.d.ts

@@ -0,0 +1,9 @@
+import type { SequenceController } from './SequenceController';
+/**
+ * ### `useSequence`
+ *
+ * A hook to get the current sequence controller. If a key is provided, it will
+ * get the sequence controller with that key. Otherwise, it will get the
+ * "nearest" default sequence controller.
+ */
+export declare const useSequence: (key?: undefined) => SequenceController;

package/dist/sequence/useSequence.js

@@ -0,0 +1,20 @@
+import { getContext } from 'svelte';
+/**
+ * ### `useSequence`
+ *
+ * A hook to get the current sequence controller. If a key is provided, it will
+ * get the sequence controller with that key. Otherwise, it will get the
+ * "nearest" default sequence controller.
+ */
+export const useSequence = (key = undefined) => {
+    let sequence;
+    if (key) {
+        sequence = getContext('theatre-sheet').sequences[key];
+    }
+    else {
+        sequence =
+            getContext('theatre-sequence') ??
+                getContext('theatre-sheet').sequences['default'];
+    }
+    return sequence;
+};

package/dist/sheet/Sheet.svelte

@@ -0,0 +1,21 @@
+<script>import { getContext, setContext } from 'svelte';
+import { SequenceController } from '../sequence/SequenceController';
+import { globalSheets } from '../consts';
+// parent context
+export const project = getContext('theatre-project');
+const projectName = project.address.projectId;
+// props
+export let name = 'default';
+export let instance = undefined;
+// bindings
+export const sheet = globalSheets.get(`${projectName}-${name}-${instance}`) ?? project.sheet(name, instance);
+// register instance logic
+globalSheets.set(`${projectName}-${name}-${instance}`, sheet);
+// init sequence store
+export const sequence = new SequenceController(sheet.sequence);
+// child context
+const sequences = { default: sequence };
+setContext('theatre-sheet', { sheet, sequences });
+</script>
+
+<slot {sheet} />

package/dist/sheet/Sheet.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IProject } from '@theatre/core';
+import { SequenceController } from '../sequence/SequenceController';
+declare const __propDef: {
+    props: {
+        project?: IProject | undefined;
+        name?: string | undefined;
+        instance?: string | undefined;
+        sheet?: import("@theatre/core").ISheet | undefined;
+        sequence?: SequenceController | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            sheet: import("@theatre/core").ISheet;
+        };
+    };
+};
+export type SheetProps = typeof __propDef.props;
+export type SheetEvents = typeof __propDef.events;
+export type SheetSlots = typeof __propDef.slots;
+export default class Sheet extends SvelteComponentTyped<SheetProps, SheetEvents, SheetSlots> {
+    get project(): IProject;
+    get sheet(): import("@theatre/core").ISheet;
+    get sequence(): SequenceController;
+}
+export {};

package/dist/sheet/createSheetObjectAction.d.ts

@@ -0,0 +1,13 @@
+import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
+type PropsValue<Props extends UnknownShorthandCompoundProps> = Parameters<Parameters<ISheetObject<Props>['onValuesChange']>[0]>[0];
+export declare function createSheetObjectAction<Props extends UnknownShorthandCompoundProps>(): <T extends HTMLElement>(node: T, { key, props, callback, options }: {
+    key: string;
+    props: Props;
+    callback: (node: T, props: PropsValue<Props>) => void;
+    options?: {
+        reconfigure?: boolean | undefined;
+    } | undefined;
+}) => {
+    destroy(): void;
+};
+export {};