@threlte/theatre 3.0.0-next.1 → 3.0.0-next.3

package/dist/project/Project.svelte

@@ -1,13 +1,9 @@
 <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,30 +1,24 @@
 import { SvelteComponent } from "svelte";
-import type { IProjectConfig } from '@theatre/core';
+import { type Snippet } from 'svelte';
+import type { IProject, IProjectConfig } from '@theatre/core';
 declare const __propDef: {
     props: {
-        name?: string | undefined;
+        name: string;
         config?: IProjectConfig | undefined;
-        project?: import("@theatre/core").IProject | undefined;
+        project?: IProject | undefined;
         isReady?: boolean | undefined;
-        children?: ((this: void, args_0: {
-            project: import("@theatre/core").IProject;
-        }) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: Snippet<[{
+            project: IProject;
+        }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            project: import("@theatre/core").IProject;
-        };
-    };
+    slots: {};
 };
 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 {};

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

@@ -25,7 +25,7 @@ declare const __propDef: {
             rafDriver?: IRafDriver | undefined;
         } | undefined) => Promise<boolean>) | undefined;
         pause?: (() => void) | undefined;
-        children?: ((this: void, args_0: {
+        children?: import("svelte").Snippet<[{
             sequence: import("./SequenceController").SequenceController;
             position: number;
             playing: boolean;
@@ -37,9 +37,7 @@ declare const __propDef: {
                 rafDriver?: IRafDriver | undefined;
             } | undefined) => Promise<boolean>;
             pause: () => void;
-        }) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/sequence/SequenceController.d.ts

@@ -1,5 +1,4 @@
 /// <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.d.ts

@@ -8,11 +8,9 @@ declare const __propDef: {
         instance?: string | undefined;
         sheet?: import("@theatre/core").ISheet | undefined;
         sequence?: SequenceController | undefined;
-        children?: ((this: void, args_0: {
+        children?: import("svelte").Snippet<[{
             sheet: import("@theatre/core").ISheet;
-        }) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        }]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/sheetObject/SheetObject.svelte

@@ -9,7 +9,8 @@ import { getContext, onDestroy, onMount, setContext } 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 +22,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 +70,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 +105,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,32 @@
 import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core'
-import { SvelteComponent } from 'svelte'
+import { SvelteComponent, 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> = {
+  key: string
+  detach?: boolean
+  selected?: boolean
+  props?: T
+
+  children?: Snippet<
+    [
+      {
+        values: ISheetObject['value']
+        selected: boolean
+        select: () => void
+        deselect: () => void
+        sheetObject: ISheetObject
+        Sync: typeof Sync
+        Transform: typeof Transform
+        Declare: typeof Declare
+      }
+    ]
+  >
+
+  onchange?: (sheet: ISheetObject['value']) => void
+}
 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
-    }
-  }
+  SheetObjectProps<T>
 > {}

package/dist/sheetObject/declare/Declare.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">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">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 +15,4 @@ watch(sheetObject, (sheetObject) => {
 });
 </script>
 
-<slot {values} />
+{@render children?.({ values })}

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

@@ -1,14 +1,12 @@
 import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core'
-import type { SvelteComponent } from 'svelte'
+import type { Snippet, SvelteComponent } from 'svelte'
+
+export type DeclareProps<T extends UnknownShorthandCompoundProps> = {
+  props: T
+
+  children?: Snippet<[{ values: ISheetObject<T>['value'] }]>
+}
 
 export default class Declare<T extends UnknownShorthandCompoundProps> extends SvelteComponent<
-  {
-    props: T
-  },
-  Record<string, unknown>,
-  {
-    default: {
-      values: ISheetObject<T>['value']
-    }
-  }
+  DeclareProps<T>
 > {}

package/dist/sheetObject/sync/Sync.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">import { resolvePropertyPath, useParent, watch } from '@threlte/core';
-import { onDestroy, getContext } from 'svelte';
+import { onDestroy } from 'svelte';
 import { getInitialValue } from './utils/getInitialValue';
 import { isComplexProp } from './utils/isComplexProp';
 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');
+import { useSheet } from '../useSheet';
+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
@@ -96,4 +96,4 @@ onDestroy(() => {
 });
 </script>
 
-<slot {capture} />
+{@render children?.({ capture })}

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

@@ -1,4 +1,4 @@
-import type { SvelteComponent } from 'svelte'
+import type { Snippet, SvelteComponent } from 'svelte'
 import type { Transformer } from '../transfomers/types'
 import type { ConditionalKeys, Primitive } from 'type-fest'
 
@@ -54,18 +54,12 @@ type AnyProps<T> = {
   [P in keyof InstanceProps<T>]?: AnyProp
 }
 
-type AllProps<T> = AnyProps<T> &
+export type SyncProps<T> = AnyProps<T> &
   ObjectProp<T> &
   Record<string, AnyProp | T> & {
     capture?: () => void
+  } & {
+    children?: Snippet<[{ capture: () => void }]>
   }
 
-export default class Sync<T> extends SvelteComponent<
-  AllProps<T>,
-  Record<string, any>,
-  {
-    default: {
-      capture: () => void
-    }
-  }
-> {}
+export default class Sync<T> extends SvelteComponent<SyncProps<T>> {}

package/dist/sheetObject/transform/Transform.svelte

@@ -1,40 +1,37 @@
 <script lang="ts">import { types } from '../../theatre';
-import { T, watch, currentWritable } from '@threlte/core';
+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 { 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 +87,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 +138,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,22 @@
-import type { SvelteComponent } from 'svelte'
+import type { Snippet, SvelteComponent } 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
+    })
 
 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>
+  TransformProps<Label>
 > {}

package/dist/sheetObject/useSheet.d.ts

@@ -0,0 +1,10 @@
+import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
+import type { CurrentWritable } from '@threlte/core';
+interface Context {
+    sheetObject: CurrentWritable<ISheetObject<any>>;
+    addProps: (props: UnknownShorthandCompoundProps) => void;
+    removeProps: (names: string[]) => void;
+}
+export declare const createSheetContext: (context: Context) => void;
+export declare const useSheet: () => Context;
+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.d.ts

@@ -2,9 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         hide: boolean;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         enabled?: boolean | undefined;
         hide?: boolean | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -7,9 +7,7 @@ declare const __propDef: {
             hide?: boolean | undefined;
         } | undefined;
         config?: IProjectConfig | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@threlte/theatre",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.3",
   "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.2.0",
     "@sveltejs/kit": "^2.5.5",
     "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@types/node": "^20.12.7",
-    "@types/three": "^0.163.0",
+    "@types/three": "^0.165.0",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
@@ -20,27 +21,46 @@
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
     "rimraf": "^5.0.5",
-    "svelte": "^5.0.0-next.95",
+    "svelte": "^5.0.0-next.181",
     "svelte-check": "^3.6.9",
     "svelte-preprocess": "^5.1.3",
     "svelte2tsx": "^0.7.6",
-    "three": "^0.163.0",
+    "three": "^0.165.0",
     "tslib": "^2.6.2",
     "type-fest": "^4.15.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.8",
-    "@threlte/core": "8.0.0-next.2",
-    "@threlte/extras": "9.0.0-next.2"
+    "@threlte/core": "8.0.0-next.10",
+    "@threlte/extras": "9.0.0-next.15"
   },
   "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"
   }
 }