@threlte/theatre 3.0.0-next.0 → 3.0.0-next.10

package/dist/project/Project.svelte

@@ -1,13 +1,9 @@
-<script>import { globalProjects } from '../consts';
+<script lang="ts">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);
+let { name = 'default', config, project = $bindable(), isReady = $bindable(), children } = $props();
+project = globalProjects.get(name) ?? getProject(name, config);
 globalProjects.set(name, project);
-export let isReady = false;
 const syncReady = async () => {
     await project.ready;
     isReady = true;
@@ -18,5 +14,5 @@ setContext(`theatre-project`, project);
 </script>
 
 {#await project.ready then}
-  <slot {project} />
+  {@render children?.({ project })}
 {/await}

package/dist/project/Project.svelte.d.ts

@@ -1,25 +1,12 @@
-import { SvelteComponent } from "svelte";
-import type { IProjectConfig } from '@theatre/core';
-declare const __propDef: {
-    props: {
-        name?: string | undefined;
-        config?: IProjectConfig | undefined;
-        project?: import("@theatre/core").IProject | undefined;
-        isReady?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            project: import("@theatre/core").IProject;
-        };
-    };
-};
-export type ProjectProps = typeof __propDef.props;
-export type ProjectEvents = typeof __propDef.events;
-export type ProjectSlots = typeof __propDef.slots;
-export default class Project extends SvelteComponent<ProjectProps, ProjectEvents, ProjectSlots> {
-    get project(): import("@theatre/core").IProject;
-}
-export {};
+import { type Snippet } from 'svelte';
+import type { IProject, IProjectConfig } from '@theatre/core';
+declare const Project: import("svelte").Component<{
+    name: string;
+    config?: IProjectConfig | undefined;
+    project?: IProject;
+    isReady?: boolean;
+    children?: Snippet<[{
+        project: IProject;
+    }]>;
+}, {}, "project" | "isReady">;
+export default Project;

package/dist/sequence/Sequence.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, onDestroy, setContext } from 'svelte';
+<script lang="ts">import { getContext, onDestroy, setContext } from 'svelte';
 // Parent context
 const { sequences } = getContext('theatre-sheet');
 // Props

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

@@ -1,63 +1,75 @@
-import { SvelteComponent } from "svelte";
-import type { IRafDriver } from '@theatre/core';
+import type { IRafDriver, ISequence } 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;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Sequence: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    rate?: number;
+    range?: PlaybackRange;
+    iterationCount?: IterationCount;
+    direction?: PlaybackDirection;
+    rafDriver?: IRafDriver | undefined;
+    audio?: SequenceAudioOptions | undefined;
+    autoplay?: boolean;
+    autoreset?: Autoreset;
+    autopause?: boolean;
+    delay?: number;
+    sequence?: import("./SequenceController").SequenceController;
+    position?: number;
+    playing?: boolean;
+    length?: number;
+    play?: ISequence["play"];
+    pause?: ISequence["pause"];
+}, {
+    default: {
+        sequence: import("./SequenceController").SequenceController;
+        position: number;
+        playing: boolean;
+        play: (conf?: {
+            iterationCount?: number;
+            range?: [from: number, to: number];
+            rate?: number;
+            direction?: "reverse" | "alternate" | "normal" | "alternateReverse";
+            rafDriver?: IRafDriver;
+        }) => Promise<boolean>;
+        pause: () => void;
     };
-    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;
-        };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        sequence: import("./SequenceController").SequenceController;
+        position: number;
+        playing: boolean;
+        play: (conf?: {
+            iterationCount?: number;
+            range?: [from: number, to: number];
+            rate?: number;
+            direction?: "reverse" | "alternate" | "normal" | "alternateReverse";
+            rafDriver?: IRafDriver;
+        }) => 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 SvelteComponent<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 {};
+}, {
+    sequence: import("./SequenceController").SequenceController;
+    length: number;
+    play: ISequence["play"];
+    pause: ISequence["pause"];
+}, string>;
+type Sequence = InstanceType<typeof Sequence>;
+export default Sequence;

package/dist/sequence/SequenceController.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="svelte" />
-/// <reference types="svelte" />
 import type { ISequence } from '@theatre/core';
 import type { Readable, Subscriber, Writable } from 'svelte/store';
 import { onChange } from '../theatre';

package/dist/sheet/Sheet.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext, setContext } from 'svelte';
+<script lang="ts">import { getContext, setContext } from 'svelte';
 import { SequenceController } from '../sequence/SequenceController';
 import { globalSheets } from '../consts';
 // parent context

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

@@ -1,29 +1,43 @@
-import { SvelteComponent } 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;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Sheet: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    project?: IProject;
+    name?: string;
+    instance?: string | undefined;
+    sheet?: import("@theatre/core").ISheet;
+    sequence?: SequenceController;
+}, {
+    default: {
+        sheet: import("@theatre/core").ISheet;
     };
-    slots: {
-        default: {
-            sheet: import("@theatre/core").ISheet;
-        };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    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 SvelteComponent<SheetProps, SheetEvents, SheetSlots> {
-    get project(): IProject;
-    get sheet(): import("@theatre/core").ISheet;
-    get sequence(): SequenceController;
-}
-export {};
+}, {
+    project: IProject;
+    sheet: import("@theatre/core").ISheet;
+    sequence: SequenceController;
+}, string>;
+type Sheet = InstanceType<typeof Sheet>;
+export default Sheet;

package/dist/sheet/createSheetObjectAction.d.ts

@@ -5,8 +5,8 @@ export declare function createSheetObjectAction<Props extends UnknownShorthandCo
     props: Props;
     callback: (node: T, props: PropsValue<Props>) => void;
     options?: {
-        reconfigure?: boolean | undefined;
-    } | undefined;
+        reconfigure?: boolean;
+    };
 }) => {
     destroy(): void;
 };

package/dist/sheetObject/SheetObject.svelte

@@ -3,13 +3,17 @@
 	- Creating namespaces
 	- Potentially Providing a sheet object
 -->
-<script>import { useStudio } from '../studio/useStudio';
-import { currentWritable, watch, useThrelte } from '@threlte/core';
-import { getContext, onDestroy, onMount, setContext } from 'svelte';
+<script
+  lang="ts"
+  generics="Props extends UnknownShorthandCompoundProps"
+>import { useStudio } from '../studio/useStudio';
+import { currentWritable, useThrelte, watch } from '@threlte/core';
+import { getContext, onDestroy, onMount } from 'svelte';
 import Declare from './declare/Declare.svelte';
 import Sync from './sync/Sync.svelte';
 import Transform from './transform/Transform.svelte';
-let { key, detach = false, props, selected = $bindable(false), ...restProps } = $props();
+import { createSheetContext } from './useSheet';
+let { key, detach = false, props, selected = $bindable(false), onchange, children } = $props();
 const { invalidate } = useThrelte();
 let aggregatedProps = { ...props };
 const { sheet } = getContext('theatre-sheet');
@@ -21,7 +25,7 @@ onMount(() => {
     // values change, we're emitting the initial value here. Doing this in
     // onMount also means that child components which might add props to the
     // sheet object have already been mounted.
-    restProps.$$events?.change?.(sheetObject.current.value);
+    onchange?.(sheetObject.current.value);
 });
 // This flag is used to prevent the sheet object from being created after it
 // has been detached.
@@ -69,15 +73,15 @@ const removeProps = (propNames) => {
         updateSheetObject();
     }
 };
-setContext('threlte-theater-sheet-context', {
+createSheetContext({
     sheetObject,
     addProps,
     removeProps
 });
-let values = $sheetObject?.value;
+let values = $state($sheetObject?.value);
 watch(sheetObject, (sheetObject) => {
     return sheetObject.onValuesChange((newValues) => {
-        restProps.$$events?.change?.(newValues);
+        onchange?.(newValues);
         values = newValues;
         // this invalidation also invalidates changes catched by slotted
         // components such as <Sync> or <Declare>.
@@ -104,13 +108,13 @@ const deselect = () => {
 };
 </script>
 
-<slot
-  {values}
-  {selected}
-  {select}
-  {deselect}
-  sheetObject={$sheetObject}
-  {Sync}
-  {Transform}
-  {Declare}
-/>
+{@render children?.({
+  values,
+  selected,
+  select,
+  deselect,
+  sheetObject: $sheetObject,
+  Sync,
+  Transform,
+  Declare
+})}

package/dist/sheetObject/SheetObject.svelte.d.ts

@@ -1,29 +1,19 @@
-import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core'
-import { SvelteComponent } from 'svelte'
-import type Declare from './declare/Declare.svelte'
-import type Sync from './sync/Sync.svelte'
-import type Transform from './transform/Transform.svelte'
-
-export default class SheetObject<T extends UnknownShorthandCompoundProps> extends SvelteComponent<
-  {
-    key: string
-    detach?: boolean
-    selected?: boolean
-    props?: T
-  },
-  {
-    change: ISheetObject<T>['value']
-  },
-  {
-    default: {
-      values: ISheetObject<T>['value']
-      selected: boolean
-      select: () => void
-      deselect: () => void
-      sheetObject: ISheetObject<T>
-      Sync: typeof Sync
-      Transform: typeof Transform
-      Declare: typeof Declare
-    }
-  }
-> {}
+import type { UnknownShorthandCompoundProps } from '@theatre/core';
+import type { SheetObjectProps } from './types';
+declare class __sveltets_Render<Props extends UnknownShorthandCompoundProps> {
+    props(): SheetObjectProps<Props>;
+    events(): {};
+    slots(): {};
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Props extends UnknownShorthandCompoundProps>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Props>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Props>['props']>, ReturnType<__sveltets_Render<Props>['events']>, ReturnType<__sveltets_Render<Props>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Props>['bindings']>;
+    } & ReturnType<__sveltets_Render<Props>['exports']>;
+    <Props extends UnknownShorthandCompoundProps>(internal: unknown, props: ReturnType<__sveltets_Render<Props>['props']> & {}): ReturnType<__sveltets_Render<Props>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SheetObject: $$IsomorphicComponent;
+type SheetObject<Props extends UnknownShorthandCompoundProps> = InstanceType<typeof SheetObject<Props>>;
+export default SheetObject;

package/dist/sheetObject/declare/Declare.svelte

@@ -1,8 +1,12 @@
-<script>import { watch, currentWritable } from '@threlte/core';
-import { onDestroy, getContext } from 'svelte';
-export let props;
-const { sheetObject, addProps, removeProps } = getContext('threlte-theater-sheet-context');
-let values = $sheetObject?.value;
+<script
+  lang="ts"
+  generics="P extends UnknownShorthandCompoundProps"
+>import { watch } from '@threlte/core';
+import { onDestroy } from 'svelte';
+import { useSheet } from '../useSheet';
+let { props, children } = $props();
+const { sheetObject, addProps, removeProps } = useSheet();
+let values = $state($sheetObject?.value);
 addProps(props);
 onDestroy(() => {
     removeProps(Object.keys(props));
@@ -14,4 +18,4 @@ watch(sheetObject, (sheetObject) => {
 });
 </script>
 
-<slot {values} />
+{@render children?.({ values })}

package/dist/sheetObject/declare/Declare.svelte.d.ts

@@ -1,14 +1,19 @@
-import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core'
-import type { SvelteComponent } from 'svelte'
-
-export default class Declare<T extends UnknownShorthandCompoundProps> extends SvelteComponent<
-  {
-    props: T
-  },
-  Record<string, unknown>,
-  {
-    default: {
-      values: ISheetObject<T>['value']
-    }
-  }
-> {}
+import type { UnknownShorthandCompoundProps } from '@theatre/core';
+import type { DeclareProps } from './types';
+declare class __sveltets_Render<P extends UnknownShorthandCompoundProps> {
+    props(): DeclareProps<P>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <P extends UnknownShorthandCompoundProps>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<P>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<P>['props']>, ReturnType<__sveltets_Render<P>['events']>, ReturnType<__sveltets_Render<P>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<P>['bindings']>;
+    } & ReturnType<__sveltets_Render<P>['exports']>;
+    <P extends UnknownShorthandCompoundProps>(internal: unknown, props: ReturnType<__sveltets_Render<P>['props']> & {}): ReturnType<__sveltets_Render<P>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Declare: $$IsomorphicComponent;
+type Declare<P extends UnknownShorthandCompoundProps> = InstanceType<typeof Declare<P>>;
+export default Declare;

package/dist/sheetObject/declare/types.d.ts

@@ -0,0 +1,9 @@
+import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
+import type { Snippet } from 'svelte';
+export type DeclareProps<T extends UnknownShorthandCompoundProps> = {
+    props: T;
+    children?: Snippet<[{
+        values: ISheetObject<T>['value'];
+    }]>;
+};
+export type Values<T> = T extends UnknownShorthandCompoundProps ? ISheetObject<T>['value'] : never;

package/dist/sheetObject/declare/types.js

@@ -0,0 +1 @@
+export {};

package/dist/sheetObject/sync/Sync.svelte

@@ -1,21 +1,24 @@
-<script>import { resolvePropertyPath, useParent, watch } from '@threlte/core';
-import { onDestroy, getContext } from 'svelte';
+<script
+  lang="ts"
+  generics="Type"
+>import { resolvePropertyPath, useParent, watch } from '@threlte/core';
+import { onDestroy } from 'svelte';
+import { useStudio } from '../../studio/useStudio';
+import { useSheet } from '../useSheet';
 import { getInitialValue } from './utils/getInitialValue';
 import { isComplexProp } from './utils/isComplexProp';
+import { isStringProp } from './utils/isStringProp';
 import { makeAlphanumeric } from './utils/makeAlphanumeric';
 import { parsePropLabel } from './utils/parsePropLabel';
-import { isStringProp } from './utils/isStringProp';
-import { useStudio } from '../../studio/useStudio';
-// used for type hinting auto props
-export let type = undefined;
-const { sheetObject, addProps, removeProps } = getContext('threlte-theater-sheet-context');
+let { type, children, ...rest } = $props();
+const { sheetObject, addProps, removeProps } = useSheet();
 const parent = useParent();
 // serves as a map to map (custom) prop names to object target properties
 let propMappings = {};
 const initProps = () => {
     const props = {};
     // propertyPath is for example "position.x" or "intensity", so a property path on the parent object
-    Object.entries($$restProps).forEach(([propertyPath, propertyValue]) => {
+    Object.entries(rest).forEach(([propertyPath, propertyValue]) => {
         // The prop might have a custom name, for example "intensity" might be mapped to "light-intensity"
         const customKey = isComplexProp(propertyValue)
             ? propertyValue.key
@@ -73,6 +76,9 @@ watch([parent, sheetObject], ([parent, sheetObject]) => {
 });
 initProps();
 const studio = useStudio();
+/**
+ * Capture the current values of the props
+ */
 export const capture = () => {
     if (!$studio)
         return;
@@ -96,4 +102,4 @@ onDestroy(() => {
 });
 </script>
 
-<slot {capture} />
+{@render children?.({ capture })}

package/dist/sheetObject/sync/Sync.svelte.d.ts

@@ -1,71 +1,22 @@
-import type { SvelteComponent } from 'svelte'
-import type { Transformer } from '../transfomers/types'
-import type { ConditionalKeys, Primitive } from 'type-fest'
-
-/* COPIED FROM @threlte/core START */
-type OmittedPropKeys =
-  | 'type'
-  | 'args'
-  | 'attach'
-  | 'manual'
-  | 'makeDefault'
-  | 'id'
-  | 'children'
-  | `is${string}` // isMesh, isObject3D, etc
-  | 'parent'
-  | 'uuid'
-  | 'name'
-type AnyClass = new (...args: any) => any
-type AnyFn = (...args: any) => any
-type MaybeInstance<Type extends any> = Type extends AnyClass ? InstanceType<Type> : Type
-type InstanceProps<Type extends any> = Partial<
-  Omit<
-    MaybeInstance<Type> extends Primitive
-      ? Record<string, unknown>
-      : {
-          [K in keyof MaybeInstance<Type>]?: MaybeInstance<Type>[K] extends {
-            set: (...args: any[]) => any
-          }
-            ?
-                | Parameters<MaybeInstance<Type>[K]['set']>
-                | Parameters<MaybeInstance<Type>[K]['set']>[0]
-            : MaybeInstance<Type>[K] extends AnyFn
-              ? never
-              : MaybeInstance<Type>[K]
-        },
-    ConditionalKeys<MaybeInstance<Type>, AnyFn> | OmittedPropKeys
-  >
->
-/* COPIED FROM @threlte/core END */
-
-type ObjectProp<T> = {
-  type?: T
+import type { SyncProps } from './types';
+declare class __sveltets_Render<Type> {
+    props(): SyncProps<Type>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {
+        /**
+           * Capture the current values of the props
+           */ capture: () => void;
+    };
 }
-
-export type ComplexProp = {
-  transformer?: Transformer
-  label?: string
-  key?: string
+interface $$IsomorphicComponent {
+    new <Type>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Type>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Type>['props']>, ReturnType<__sveltets_Render<Type>['events']>, ReturnType<__sveltets_Render<Type>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Type>['bindings']>;
+    } & ReturnType<__sveltets_Render<Type>['exports']>;
+    <Type>(internal: unknown, props: ReturnType<__sveltets_Render<Type>['props']> & {}): ReturnType<__sveltets_Render<Type>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-
-export type AnyProp = string | boolean | ComplexProp
-
-type AnyProps<T> = {
-  [P in keyof InstanceProps<T>]?: AnyProp
-}
-
-type AllProps<T> = AnyProps<T> &
-  ObjectProp<T> &
-  Record<string, AnyProp | T> & {
-    capture?: () => void
-  }
-
-export default class Sync<T> extends SvelteComponent<
-  AllProps<T>,
-  Record<string, any>,
-  {
-    default: {
-      capture: () => void
-    }
-  }
-> {}
+declare const Sync: $$IsomorphicComponent;
+type Sync<Type> = InstanceType<typeof Sync<Type>>;
+export default Sync;

package/dist/sheetObject/sync/types.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { ConditionalKeys, Primitive } from 'type-fest';
+import type { Transformer } from '../transfomers/types';
+type OmittedPropKeys = 'type' | 'args' | 'attach' | 'manual' | 'makeDefault' | 'id' | 'children' | `is${string}` | 'parent' | 'uuid' | 'name';
+type AnyClass = new (...args: any) => any;
+type AnyFn = (...args: any) => any;
+type MaybeInstance<Type extends any> = Type extends AnyClass ? InstanceType<Type> : Type;
+type InstanceProps<Type extends any> = Partial<Omit<MaybeInstance<Type> extends Primitive ? Record<string, unknown> : {
+    [K in keyof MaybeInstance<Type>]?: MaybeInstance<Type>[K] extends {
+        set: (...args: any[]) => any;
+    } ? Parameters<MaybeInstance<Type>[K]['set']> | Parameters<MaybeInstance<Type>[K]['set']>[0] : MaybeInstance<Type>[K] extends AnyFn ? never : MaybeInstance<Type>[K];
+}, ConditionalKeys<MaybeInstance<Type>, AnyFn> | OmittedPropKeys>>;
+type ObjectProp<T> = {
+    type?: T;
+};
+export type ComplexProp = {
+    transformer?: Transformer;
+    label?: string;
+    key?: string;
+};
+export type AnyProp = string | boolean | ComplexProp;
+type AnyProps<T> = {
+    [P in keyof InstanceProps<T>]?: AnyProp;
+};
+export type SyncProps<T> = AnyProps<T> & ObjectProp<T> & Record<string, AnyProp | T> & {
+    children?: Snippet<[{
+        capture: () => void;
+    }]>;
+};
+export {};

package/dist/sheetObject/sync/types.js

@@ -0,0 +1 @@
+export {};

package/dist/sheetObject/sync/utils/isComplexProp.d.ts

@@ -1,2 +1,2 @@
-import type { AnyProp, ComplexProp } from '../Sync.svelte';
+import type { AnyProp, ComplexProp } from '../types';
 export declare const isComplexProp: (prop: AnyProp) => prop is ComplexProp;

package/dist/sheetObject/sync/utils/isStringProp.d.ts

@@ -1,2 +1,2 @@
-import type { AnyProp } from '../Sync.svelte';
+import type { AnyProp } from '../types';
 export declare const isStringProp: (prop: AnyProp) => prop is string;

package/dist/sheetObject/sync/utils/parsePropLabel.d.ts

@@ -1,2 +1,2 @@
-import type { AnyProp } from '../Sync.svelte';
+import type { AnyProp } from '../types';
 export declare const parsePropLabel: (alphaNumericKey: string, propValue: AnyProp) => string;

package/dist/sheetObject/transform/Transform.svelte

@@ -1,40 +1,40 @@
-<script>import { types } from '../../theatre';
-import { T, watch, currentWritable } from '@threlte/core';
+<script
+  lang="ts"
+  generics="Label extends string | undefined"
+>import { T, watch } from '@threlte/core';
 import { TransformControls } from '@threlte/extras';
-import { onMount, getContext } from 'svelte';
+import { onMount } from 'svelte';
 import { Group } from 'three';
 import { RAD2DEG } from 'three/src/math/MathUtils.js';
 import { useStudio } from '../../studio/useStudio';
+import { types } from '../../theatre';
 import { getDefaultTransformer } from '../transfomers/getDefaultTransformer';
-export let label = undefined;
-export let key = undefined;
-export let mode = 'translate';
-export let space = undefined;
-export let translationSnap = undefined;
-export let rotationSnap = undefined;
-export let scaleSnap = undefined;
-const { sheetObject, addProps, removeProps } = getContext('threlte-theater-sheet-context');
-let controls;
-$: if (controls) {
-    if (translationSnap) {
-        controls.setTranslationSnap(translationSnap);
-    }
-    else {
-        controls.setTranslationSnap(null);
-    }
-    if (rotationSnap) {
-        controls.setRotationSnap(rotationSnap);
-    }
-    else {
-        controls.setRotationSnap(null);
-    }
-    if (scaleSnap) {
-        controls.setScaleSnap(scaleSnap);
-    }
-    else {
-        controls.setScaleSnap(null);
+import { useSheet } from '../useSheet';
+let { label, key, mode = 'translate', space, translationSnap, rotationSnap, scaleSnap, children } = $props();
+const { sheetObject, addProps, removeProps } = useSheet();
+let controls = $state(undefined);
+$effect.pre(() => {
+    if (controls) {
+        if (translationSnap) {
+            controls.setTranslationSnap(translationSnap);
+        }
+        else {
+            controls.setTranslationSnap(null);
+        }
+        if (rotationSnap) {
+            controls.setRotationSnap(rotationSnap);
+        }
+        else {
+            controls.setRotationSnap(null);
+        }
+        if (scaleSnap) {
+            controls.setScaleSnap(scaleSnap);
+        }
+        else {
+            controls.setScaleSnap(null);
+        }
     }
-}
+});
 const group = new Group();
 const positionTransformer = getDefaultTransformer(group, 'position', 'position');
 const rotationTransformer = getDefaultTransformer(group, 'rotation', 'rotation');
@@ -90,7 +90,7 @@ onMount(() => {
 });
 const studio = useStudio();
 let scrub;
-let isSelected = false;
+let isSelected = $state(false);
 watch([studio], ([studio]) => {
     return studio?.onSelectionChange((selection) => {
         if (!$sheetObject)
@@ -141,11 +141,11 @@ const groupRef = group;
       {mode}
       {space}
       bind:controls
-      on:mouseDown={onMouseDown}
-      on:objectChange={onChange}
-      on:mouseUp={onMouseUp}
+      onmouseDown={onMouseDown}
+      onobjectChange={onChange}
+      onmouseUp={onMouseUp}
     />
   {/if}
 
-  <slot />
+  {@render children?.()}
 </T>

package/dist/sheetObject/transform/Transform.svelte.d.ts

@@ -1,20 +1,18 @@
-import type { SvelteComponent } from 'svelte'
-
-export default class Transform<Label extends string | undefined> extends SvelteComponent<
-  {
-    label?: Label
-    mode?: 'translate' | 'rotate' | 'scale'
-    translationSnap?: number
-    rotationSnap?: number
-    scaleSnap?: number
-    space?: 'world' | 'local'
-  } & (Label extends string
-    ? {
-        key: string
-      }
-    : {
-        key?: string
-      }),
-  Record<string, unknown>,
-  Record<string, unknown>
-> {}
+import type { TransformProps } from './types';
+declare class __sveltets_Render<Label extends string | undefined> {
+    props(): TransformProps<Label>;
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Label extends string | undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Label>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Label>['props']>, ReturnType<__sveltets_Render<Label>['events']>, ReturnType<__sveltets_Render<Label>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Label>['bindings']>;
+    } & ReturnType<__sveltets_Render<Label>['exports']>;
+    <Label extends string | undefined>(internal: unknown, props: ReturnType<__sveltets_Render<Label>['props']> & {}): ReturnType<__sveltets_Render<Label>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Transform: $$IsomorphicComponent;
+type Transform<Label extends string | undefined> = InstanceType<typeof Transform<Label>>;
+export default Transform;

package/dist/sheetObject/transform/types.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+export type TransformProps<T extends string | undefined> = {
+    label?: T;
+    mode?: 'translate' | 'rotate' | 'scale';
+    translationSnap?: number;
+    rotationSnap?: number;
+    scaleSnap?: number;
+    space?: 'world' | 'local';
+    children?: Snippet;
+} & (T extends string ? {
+    key: string;
+} : {
+    key?: string;
+});

package/dist/sheetObject/transform/types.js

@@ -0,0 +1 @@
+export {};

package/dist/sheetObject/types.d.ts

@@ -0,0 +1,24 @@
+import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
+import { type Snippet } from 'svelte';
+import type Declare from './declare/Declare.svelte';
+import type Sync from './sync/Sync.svelte';
+import type Transform from './transform/Transform.svelte';
+export type SheetObjectProps<T extends UnknownShorthandCompoundProps> = {
+    key: string;
+    detach?: boolean;
+    selected?: boolean;
+    props?: T;
+    children?: Snippet<[
+        {
+            values: ISheetObject['value'];
+            selected: boolean;
+            select: () => void;
+            deselect: () => void;
+            sheetObject: ISheetObject<T>;
+            Sync: typeof Sync;
+            Transform: typeof Transform;
+            Declare: typeof Declare;
+        }
+    ]>;
+    onchange?: (sheet: ISheetObject<T>['value']) => void;
+};

package/dist/sheetObject/types.js

@@ -0,0 +1 @@
+export {};

package/dist/sheetObject/useSheet.d.ts

@@ -0,0 +1,10 @@
+import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
+import type { CurrentWritable } from '@threlte/core';
+type Context<T extends UnknownShorthandCompoundProps = {}> = {
+    sheetObject: CurrentWritable<ISheetObject<T>>;
+    addProps: (props: UnknownShorthandCompoundProps) => void;
+    removeProps: (names: string[]) => void;
+};
+export declare const createSheetContext: (context: Context) => void;
+export declare const useSheet: <T extends UnknownShorthandCompoundProps = {}>() => Context<T>;
+export {};

package/dist/sheetObject/useSheet.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const key = 'threlte-theater-sheet-context';
+export const createSheetContext = (context) => {
+    setContext(key, context);
+};
+export const useSheet = () => {
+    return getContext(key);
+};

package/dist/studio/InnerStudio.svelte

@@ -1,5 +1,5 @@
 <script
- 
+  lang="ts"
   context="module"
 >import Studio from '@theatre/studio';
 import { studio } from '../consts';
@@ -7,7 +7,7 @@ Studio.initialize();
 studio.set(Studio);
 </script>
 
-<script>import { watch } from '@threlte/core';
+<script lang="ts">import { watch } from '@threlte/core';
 import { writable } from 'svelte/store';
 export let hide;
 const hideStore = writable(hide);

package/dist/studio/InnerStudio.svelte.d.ts

@@ -1,18 +1,29 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        hide: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type InnerStudioProps = typeof __propDef.props;
-export type InnerStudioEvents = typeof __propDef.events;
-export type InnerStudioSlots = typeof __propDef.slots;
-export default class InnerStudio extends SvelteComponent<InnerStudioProps, InnerStudioEvents, InnerStudioSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const InnerStudio: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    hide: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type InnerStudio = InstanceType<typeof InnerStudio>;
+export default InnerStudio;

package/dist/studio/Studio.svelte

@@ -1,4 +1,4 @@
-<script>export let enabled = true;
+<script lang="ts">export let enabled = true;
 export let hide = false;
 const browser = typeof window !== 'undefined';
 </script>

package/dist/studio/Studio.svelte.d.ts

@@ -1,19 +1,30 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        enabled?: boolean | undefined;
-        hide?: boolean | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type StudioProps = typeof __propDef.props;
-export type StudioEvents = typeof __propDef.events;
-export type StudioSlots = typeof __propDef.slots;
-export default class Studio extends SvelteComponent<StudioProps, StudioEvents, StudioSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Studio: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    enabled?: boolean;
+    hide?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Studio = InstanceType<typeof Studio>;
+export default Studio;

package/dist/theatre/Theatre.svelte

@@ -1,4 +1,4 @@
-<script>import { Project, Sheet, Studio } from '..';
+<script lang="ts">import { Project, Sheet, Studio } from '..';
 export let studio = {};
 export let config = undefined;
 </script>

package/dist/theatre/Theatre.svelte.d.ts

@@ -1,23 +1,34 @@
-import { SvelteComponent } from "svelte";
 import type { IProjectConfig } from '@theatre/core';
-declare const __propDef: {
-    props: {
-        studio?: {
-            enabled?: boolean | undefined;
-            hide?: boolean | undefined;
-        } | undefined;
-        config?: IProjectConfig | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TheatreProps = typeof __propDef.props;
-export type TheatreEvents = typeof __propDef.events;
-export type TheatreSlots = typeof __propDef.slots;
-export default class Theatre extends SvelteComponent<TheatreProps, TheatreEvents, TheatreSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Theatre: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    studio?: {
+        enabled?: boolean;
+        hide?: boolean;
+    };
+    config?: IProjectConfig | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Theatre = InstanceType<typeof Theatre>;
+export default Theatre;

package/package.json

@@ -1,46 +1,66 @@
 {
   "name": "@threlte/theatre",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0-next.10",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
+  "description": "Threlte Components for Theatre, an animation library with a professional motion design toolset",
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.4.3",
-    "@sveltejs/package": "^2.2.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/node": "^20.11.6",
-    "@types/three": "^0.160.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.7.7",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@types/node": "^20.12.7",
+    "@types/three": "^0.169.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
-    "eslint": "^8.56.0",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
-    "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
+    "eslint-plugin-svelte": "^2.36.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
     "rimraf": "^5.0.5",
-    "svelte": "^4.2.9",
-    "svelte-check": "^3.6.3",
+    "svelte": "^5.1.10",
+    "svelte-check": "^3.6.9",
     "svelte-preprocess": "^5.1.3",
-    "svelte2tsx": "^0.7.0",
-    "three": "^0.160.1",
+    "svelte2tsx": "^0.7.6",
+    "three": "^0.170.0",
     "tslib": "^2.6.2",
-    "type-fest": "^4.10.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "@threlte/core": "8.0.0-next.0",
-    "@threlte/extras": "9.0.0-next.0"
+    "type-fest": "^4.15.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.2.8",
+    "@threlte/core": "8.0.0-next.33",
+    "@threlte/extras": "9.0.0-next.44"
   },
   "peerDependencies": {
     "svelte": ">=4",
-    "three": ">=0.152",
+    "three": ">=0.155",
     "@threlte/core": ">=8.0.0-next.0",
     "@threlte/extras": ">=9.0.0-next.0",
     "@theatre/core": ">=0.6",
     "@theatre/studio": ">=0.6"
   },
   "type": "module",
+  "keywords": [
+    "theatre",
+    "threlte",
+    "svelte",
+    "three",
+    "three.js",
+    "3d",
+    "animation",
+    "motion"
+  ],
+  "homepage": "https://threlte.xyz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/threlte/threlte.git",
+    "directory": "packages/theatre"
+  },
+  "bugs": {
+    "url": "https://github.com/threlte/threlte/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -57,8 +77,8 @@
     "package": "svelte-kit sync && svelte-package && node ./scripts/cleanupPackage.js && publint",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
+    "lint": "prettier --check .",
+    "format": "prettier --write .",
     "cleanup": "rimraf node_modules .svelte-kit dist"
   }
 }