@threlte/theatre 3.0.6 → 3.1.0

package/dist/sheetObject/transfomers/defaults/generic.js

@@ -1,6 +1,6 @@
-import { types } from '../../../theatre';
-import { isPrimitive } from '../../sync/utils/isPrimitive';
-import { createTransformer } from '../createTransformer';
+import { types } from '../../../theatre.js';
+import { isPrimitive } from '../../sync/utils/isPrimitive.js';
+import { createTransformer } from '../createTransformer.js';
 export const generic = createTransformer({
     transform(value) {
         if (isPrimitive(value)) {

package/dist/sheetObject/transfomers/defaults/normalized.d.ts

@@ -1 +1 @@
-export declare const normalized: import("../types").Transformer;
+export declare const normalized: import("../types.js").Transformer;

package/dist/sheetObject/transfomers/defaults/normalized.js

@@ -1,5 +1,5 @@
-import { types } from '../../../theatre';
-import { createTransformer } from '../createTransformer';
+import { types } from '../../../theatre.js';
+import { createTransformer } from '../createTransformer.js';
 export const normalized = createTransformer({
     transform(value) {
         return types.number(value, {

package/dist/sheetObject/transfomers/defaults/side.d.ts

@@ -1 +1 @@
-export declare const side: import("../types").Transformer;
+export declare const side: import("../types.js").Transformer;

package/dist/sheetObject/transfomers/defaults/side.js

@@ -1,5 +1,5 @@
-import { types } from '../../../theatre';
-import { createTransformer } from '../createTransformer';
+import { types } from '../../../theatre.js';
+import { createTransformer } from '../createTransformer.js';
 import { BackSide, DoubleSide, FrontSide } from 'three';
 export const side = createTransformer({
     transform(value) {

package/dist/sheetObject/transfomers/getDefaultTransformer.d.ts

@@ -1 +1 @@
-export declare const getDefaultTransformer: (target: any, path: string, fullPropertyPath: string) => import("./types").Transformer;
+export declare const getDefaultTransformer: (target: any, path: string, fullPropertyPath: string) => import("./types.js").Transformer;

package/dist/sheetObject/transfomers/getDefaultTransformer.js

@@ -1,9 +1,9 @@
-import { color } from './defaults/color';
-import { degrees } from './defaults/degrees';
-import { euler } from './defaults/euler';
-import { generic } from './defaults/generic';
-import { normalized } from './defaults/normalized';
-import { side } from './defaults/side';
+import { color } from './defaults/color.js';
+import { degrees } from './defaults/degrees.js';
+import { euler } from './defaults/euler.js';
+import { generic } from './defaults/generic.js';
+import { normalized } from './defaults/normalized.js';
+import { side } from './defaults/side.js';
 const isFullOrEndingPattern = (fullPropertyPath, pattern) => {
     return fullPropertyPath.endsWith(`.${pattern}`) || fullPropertyPath === pattern;
 };

package/dist/sheetObject/transform/Transform.svelte

@@ -1,137 +1,162 @@
 <script
   lang="ts"
   generics="Label extends string | undefined"
->import { T, watch } from '@threlte/core';
-import { TransformControls } from '@threlte/extras';
-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';
-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(() => {
+>
+  import type { IScrub } from '@theatre/studio'
+  import { T, watch } from '@threlte/core'
+  import { TransformControls } from '@threlte/extras'
+  import { onMount } from 'svelte'
+  import { Group } from 'three'
+  import type { TransformControls as TC } from 'three/examples/jsm/controls/TransformControls.js'
+  import { RAD2DEG } from 'three/src/math/MathUtils.js'
+  import { useStudio } from '../../studio/useStudio.js'
+  import { types } from '../../theatre.js'
+  import { getDefaultTransformer } from '../transfomers/getDefaultTransformer.js'
+  import { useSheet } from '../useSheet.js'
+  import type { TransformProps } from './types.js'
+
+  let {
+    label,
+    key,
+    mode = 'translate',
+    space,
+    translationSnap,
+    rotationSnap,
+    scaleSnap,
+    children
+  }: TransformProps<Label> = $props()
+
+  const { sheetObject, addProps, removeProps } = useSheet<any>()
+
+  let controls = $state<TC | undefined>(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);
-        }
+      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');
-const scaleTransformer = getDefaultTransformer(group, 'scale', 'scale');
-const initTransform = () => {
-    const positionProp = positionTransformer.transform(group.position);
-    const rotationProp = rotationTransformer.transform(group.rotation);
-    const scaleProp = scaleTransformer.transform(group.scale);
+  })
+
+  const group = new Group()
+
+  const positionTransformer = getDefaultTransformer(group, 'position', 'position')
+  const rotationTransformer = getDefaultTransformer(group, 'rotation', 'rotation')
+  const scaleTransformer = getDefaultTransformer(group, 'scale', 'scale')
+
+  const initTransform = () => {
+    const positionProp = positionTransformer.transform(group.position)
+    const rotationProp = rotationTransformer.transform(group.rotation)
+    const scaleProp = scaleTransformer.transform(group.scale)
+
     if (key) {
-        addProps({
-            [key]: types.compound({
-                position: positionProp,
-                rotation: rotationProp,
-                scale: scaleProp
-            }, {
-                label: label ?? key
-            })
-        });
-    }
-    else {
-        addProps({
+      addProps({
+        [key]: types.compound(
+          {
             position: positionProp,
             rotation: rotationProp,
             scale: scaleProp
-        });
+          },
+          {
+            label: label ?? key
+          }
+        )
+      })
+    } else {
+      addProps({
+        position: positionProp,
+        rotation: rotationProp,
+        scale: scaleProp
+      })
     }
-};
-watch([sheetObject], ([sheetObject]) => {
+  }
+
+  watch([sheetObject], ([sheetObject]) => {
     return sheetObject?.onValuesChange((values) => {
-        let object = values;
-        if (key) {
-            if (!values[key])
-                return;
-            object = values[key];
-        }
-        else {
-            if (!values.position || !values.rotation || !values.scale)
-                return;
-        }
-        // sanity check
-        if (!object)
-            return;
-        positionTransformer.apply(group, 'position', object.position);
-        rotationTransformer.apply(group, 'rotation', object.rotation);
-        scaleTransformer.apply(group, 'scale', object.scale);
-    });
-});
-onMount(() => {
-    initTransform();
+      let object = values
+
+      if (key) {
+        if (!values[key]) return
+        object = values[key]
+      } else {
+        if (!values.position || !values.rotation || !values.scale) return
+      }
+
+      // sanity check
+      if (!object) return
+
+      positionTransformer.apply(group, 'position', object.position)
+      rotationTransformer.apply(group, 'rotation', object.rotation)
+      scaleTransformer.apply(group, 'scale', object.scale)
+    })
+  })
+
+  onMount(() => {
+    initTransform()
     return () => {
-        removeProps(key ? [key] : ['position', 'rotation', 'scale']);
-    };
-});
-const studio = useStudio();
-let scrub;
-let isSelected = $state(false);
-watch([studio], ([studio]) => {
+      removeProps(key ? [key] : ['position', 'rotation', 'scale'])
+    }
+  })
+
+  const studio = useStudio()
+  let scrub: IScrub | undefined
+  let isSelected = $state(false)
+
+  watch([studio], ([studio]) => {
     return studio?.onSelectionChange((selection) => {
-        if (!$sheetObject)
-            return;
-        isSelected = selection.includes($sheetObject);
-    });
-});
-const onMouseDown = () => {
-    if (!studio.current)
-        return;
-    if (scrub)
-        return;
-    scrub = $studio?.scrub();
-};
-const onChange = () => {
-    if (!scrub)
-        return;
+      if (!$sheetObject) return
+      isSelected = selection.includes($sheetObject)
+    })
+  })
+
+  const onMouseDown = () => {
+    if (!studio.current) return
+    if (scrub) return
+    scrub = $studio?.scrub()
+  }
+
+  const onChange = () => {
+    if (!scrub) return
     scrub.capture((api) => {
-        if (!$sheetObject)
-            return;
-        const baseTarget = key ? $sheetObject.props[key] : $sheetObject.props;
-        api.set(baseTarget.position, {
-            ...group.position
-        });
-        api.set(baseTarget.rotation, {
-            x: group.rotation.x * RAD2DEG,
-            y: group.rotation.y * RAD2DEG,
-            z: group.rotation.z * RAD2DEG
-        });
-        api.set(baseTarget.scale, {
-            ...group.scale
-        });
-    });
-};
-const onMouseUp = () => {
-    if (!scrub)
-        return;
-    scrub.commit();
-    scrub = undefined;
-};
-const groupRef = group;
+      if (!$sheetObject) return
+
+      const baseTarget = key ? $sheetObject.props[key] : $sheetObject.props
+
+      api.set(baseTarget.position as any, {
+        ...group.position
+      })
+
+      api.set(baseTarget.rotation as any, {
+        x: group.rotation.x * RAD2DEG,
+        y: group.rotation.y * RAD2DEG,
+        z: group.rotation.z * RAD2DEG
+      })
+
+      api.set(baseTarget.scale as any, {
+        ...group.scale
+      })
+    })
+  }
+
+  const onMouseUp = () => {
+    if (!scrub) return
+    scrub.commit()
+    scrub = undefined
+  }
+
+  const groupRef = group as any
 </script>
 
 <T is={groupRef}>

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

@@ -1,8 +1,15 @@
-import type { TransformProps } from './types';
+import type { TransformProps } from './types.js';
+declare function $$render<Label extends string | undefined>(): {
+    props: TransformProps<Label>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<Label extends string | undefined> {
-    props(): TransformProps<Label>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<Label>>['props'];
+    events(): ReturnType<typeof $$render<Label>>['events'];
+    slots(): ReturnType<typeof $$render<Label>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/sheetObject/types.d.ts

@@ -1,5 +1,5 @@
 import type { ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
-import { type Snippet } from 'svelte';
+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';

package/dist/sheetObject/types.js

@@ -1 +1 @@
-import {} from 'svelte';
+export {};

package/dist/studio/InnerStudio.svelte

@@ -1,30 +1,42 @@
 <script
   lang="ts"
   module
->import Studio from '@theatre/studio';
-import { studio } from '../consts';
-Studio.initialize();
-studio.set(Studio);
+>
+  const studioModule = await import('@theatre/studio')
+  const Studio = studioModule as unknown as typeof import('@theatre/studio').default
+  import { studio } from '../consts.js'
+
+  Studio.initialize()
+  studio.set(Studio)
 </script>
 
-<script lang="ts">import { watch } from '@threlte/core';
-import { writable } from 'svelte/store';
-let { hide, children } = $props();
-const hideStore = writable(hide);
-$effect(() => {
-    hideStore.set(hide);
-});
-watch([studio, hideStore], ([studio, hide]) => {
+<script lang="ts">
+  import { watch } from '@threlte/core'
+  import { writable } from 'svelte/store'
+
+  interface Props {
+    hide: boolean
+    children?: import('svelte').Snippet
+  }
+
+  let { hide, children }: Props = $props()
+
+  const hideStore = writable(hide)
+  $effect(() => {
+    hideStore.set(hide)
+  })
+
+  watch([studio, hideStore], ([studio, hide]) => {
     if (hide) {
-        studio?.ui.hide();
-    }
-    else {
-        studio?.ui.restore();
+      studio?.ui.hide()
+    } else {
+      studio?.ui.restore()
     }
+
     return () => {
-        studio?.ui.hide();
-    };
-});
+      studio?.ui.hide()
+    }
+  })
 </script>
 
 {@render children?.()}

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

@@ -1,5 +1,7 @@
-declare const InnerStudio: import("svelte").Component<{
+interface Props {
     hide: boolean;
-    children?: import("svelte").Snippet;
-}, {}, "">;
+    children?: import('svelte').Snippet;
+}
+declare const InnerStudio: import("svelte").Component<Props, {}, "">;
+type InnerStudio = ReturnType<typeof InnerStudio>;
 export default InnerStudio;

package/dist/studio/Studio.svelte

@@ -1,6 +1,15 @@
-<script lang="ts">let { enabled = true, hide = false, children } = $props();
-const browser = typeof window !== 'undefined';
-export {};
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    enabled?: boolean
+    hide?: boolean
+    children?: Snippet
+  }
+
+  let { enabled = true, hide = false, children }: Props = $props()
+
+  const browser = typeof window !== 'undefined'
 </script>
 
 {#if browser && enabled}

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

@@ -1,7 +1,9 @@
 import type { Snippet } from 'svelte';
-declare const Studio: import("svelte").Component<{
+interface Props {
     enabled?: boolean;
     hide?: boolean;
     children?: Snippet;
-}, {}, "">;
+}
+declare const Studio: import("svelte").Component<Props, {}, "">;
+type Studio = ReturnType<typeof Studio>;
 export default Studio;

package/dist/studio/useStudio.js

@@ -1,4 +1,4 @@
-import { studio } from '../consts';
+import { studio } from '../consts.js';
 /**
  * ### `useStudio`
  *

package/dist/theatre/Theatre.svelte

@@ -1,5 +1,18 @@
-<script lang="ts">import { Project, Sheet, Studio } from '..';
-let { studio = {}, config = undefined, children } = $props();
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { IProjectConfig } from '@theatre/core'
+  import { Project, Sheet, Studio } from '../index.js'
+
+  interface Props {
+    studio?: {
+      enabled?: boolean
+      hide?: boolean
+    }
+    config?: IProjectConfig | undefined
+    children?: Snippet
+  }
+
+  let { studio = {}, config = undefined, children }: Props = $props()
 </script>
 
 <Studio {...studio}>

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

@@ -1,11 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { IProjectConfig } from '@theatre/core';
-declare const Theatre: import("svelte").Component<{
+interface Props {
     studio?: {
         enabled?: boolean;
         hide?: boolean;
     };
     config?: IProjectConfig | undefined;
     children?: Snippet;
-}, {}, "">;
+}
+declare const Theatre: import("svelte").Component<Props, {}, "">;
+type Theatre = ReturnType<typeof Theatre>;
 export default Theatre;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@threlte/theatre",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "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": {
     "@eslint/js": "^9.26.0",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.7.7",
+    "@sveltejs/adapter-auto": "^6.1.0",
+    "@sveltejs/kit": "^2.37.0",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@types/node": "^20.12.7",
+    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@types/node": "^20.19.4",
     "@types/three": "^0.175.0",
     "@yushijinhun/three-minifier-rollup": "^0.4.0",
     "eslint": "^9.26.0",
@@ -19,19 +19,18 @@
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
     "publint": "^0.2.7",
-    "rimraf": "^5.0.5",
+    "rimraf": "^6.0.1",
     "svelte": "5.26.2",
-    "svelte-check": "^4.1.7",
-    "svelte-preprocess": "^5.1.3",
+    "svelte-check": "^4.3.1",
     "svelte2tsx": "^0.7.6",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
     "type-fest": "^4.15.0",
-    "typescript": "^5.6.3",
+    "typescript": "5.9.2",
     "typescript-eslint": "^8.32.0",
-    "vite": "^5.2.8",
-    "@threlte/extras": "9.4.2",
-    "@threlte/core": "8.1.3"
+    "vite": "^7.1.4",
+    "@threlte/core": "8.3.0",
+    "@threlte/extras": "9.7.0"
   },
   "peerDependencies": {
     "@theatre/core": ">=0.6",