@threlte/theatre 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Grischa Erbe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+![Threlte Logo](https://user-images.githubusercontent.com/46897060/178455971-434f4c5d-6c26-4d34-acdc-b4b50e2a8a2c.png)
+
+<h1 align="center">@threlte/theatre</h1>
+
+Provides easy to use components and hooks to use [Theatre.js](https://www.theatrejs.com/) in threlte.
+
+## Official Documentation
+
+Visit [threlte.xyz](https://threlte.xyz)
+
+## Support
+
+Join the [Discord server](https://discord.gg/EqUBCfCaGm)
+
+---
+
+### License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

package/dist/CHANGELOG.md

@@ -0,0 +1,165 @@
+# @threlte/extras
+
+## 0.5.0
+
+### Minor Changes
+
+- d69391a: Add Attractor component and documentation
+
+## 0.4.0
+
+### Minor Changes
+
+- 4b4d7be: Added rapiers damping properties to the component <RigidBody>
+
+## 0.3.2
+
+### Patch Changes
+
+- c7e226f: useJoint is now exported and its types are fixed
+
+## 0.3.1
+
+### Patch Changes
+
+- 9d29fc0: removed unused variable
+
+## 0.3.0
+
+### Minor Changes
+
+- 1a0f305: removed properties "manifold" and "flipped" from contact force event
+
+### Patch Changes
+
+- 291af9b: Exporting rapier event types for easier method typing
+
+## 0.2.0
+
+### Minor Changes
+
+- 73b533d: Added contact force events and streamlined event management
+
+### Patch Changes
+
+- 7d46de2: sensors need events too!
+
+## 0.1.0
+
+### Minor Changes
+
+- c272617: Hooks added to add Joints, Collider and AutoColliders now accepts density, mass or massProperties, documentation for joints hooks added, "Basic Vehicle Controller" Recipe added.
+
+## 0.0.3
+
+### Patch Changes
+
+- cd6dac6: cleaned up dead code in RigidBody component
+
+## 0.0.2
+
+### Patch Changes
+
+- 62d2c5c: fixed `<RigidBody>` initial transforms
+
+## 0.0.1
+
+### Patch Changes
+
+- 7a3fa6b: # NEW PACKAGE: @threlte/rapier
+
+  This package provides easy to use components and hooks to use the [rapier](https://rapier.rs/) physics engine in threlte.
+
+  It comes with several components to get you started: [`<World>`](https://threlte.xyz/rapier/world), [`<RigidBody>`](https://threlte.xyz/rapier/rigid-body), [`<Collider>`](https://threlte.xyz/rapier/collider), [`<AutoColliders>`](https://threlte.xyz/rapier/auto-colliders), [`<CollisionGroups>`](https://threlte.xyz/rapier/collision-groups) and [`<Debug>`](https://threlte.xyz/rapier/debug).
+
+  It also features several handy hooks: [`<useRapier>`](https://threlte.xyz/rapier/use-rapier), [`<useCollisionGroups>`](https://threlte.xyz/rapier/use-collision-groups) and [`<useRigidBody>`](https://threlte.xyz/rapier/use-rigid-body).
+
+## 4.0.0
+
+### Major Changes
+
+- 52e021c: # Breaking Change
+
+  The threlte repository has been moved to its own GitHub Organization: [https://github.com/threlte/threlte](https://github.com/threlte/threlte).
+  threlte consists now of two npm packages: `@threlte/core` and `@threlte/extras`, managed in a mono repository:
+
+  `@threlte/core` consists of components, hooks and other utilites that follow three.js principles, nomenclature and inheritance as closely as useful and possible. Therefore components that have been part of the package `threlte` have been moved to the new home of all kinds of useful abstractons: `@threlte/extras`.
+
+  `@threlte/extras` consists of useful abstractions and helpers that you may find yourself use all the time. These components do not need to follow three.js principles as strict as exports from `@threlte/core`, but they do where it makes sense.
+
+  ## The breaking changes in detail:
+
+  - Moved `<GLTF>` component as well as `useGltf` hook to `@threlte/extras`.
+  - Moved `<Text>` component to `@threlte/extras`.
+
+  ## How to update
+
+  Replace imports from `threlte` and `threlte/extras`:
+
+  1. `npm rm threlte`
+  2. `npm i -D @threlte/core @threlte/extras`
+  3. Replace `import {…} from 'threlte'` with `import {…} from '@threlte/core'`
+  4. Replace `import {…} from 'threlte/extras'` with `import {…} from '@threlte/extras'`
+
+  Specifically replace imports of `<GLTF>`, `useGltf` or `<Text>`:
+
+  3. Replace `import { GLTF, useGltf, Text } from 'threlte'` with `import { GLTF, useGltf, Text } from '@threlte/extras'`
+
+  # Other changes
+
+  - The documentation is now hosted on Vercel and as such we are hoping for a Vercel Sponsorship for OSS. There have also been some style fixes and overhauls.
+
+## 3.13.10
+
+### Patch Changes
+
+- 4de7371: added svelte identifier
+
+## 3.13.9
+
+### Patch Changes
+
+- 41cc5a1: test
+
+## 3.13.8
+
+### Patch Changes
+
+- 79a64f5: test
+
+## 3.13.7
+
+### Patch Changes
+
+- test
+
+## 3.13.6
+
+### Patch Changes
+
+- trying to delete
+
+## 3.13.5
+
+### Patch Changes
+
+- 11aa5eb: yes
+
+## 3.13.4
+
+### Patch Changes
+
+- 0c40456: added scripts to clean up packages
+- 7cc4e5d: added node types
+
+## 3.13.3
+
+### Patch Changes
+
+- a2a6d93: test
+
+## 3.13.2
+
+### Patch Changes
+
+- 8dbf8cd: Test

package/dist/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Grischa Erbe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,19 @@
+![Threlte Logo](https://user-images.githubusercontent.com/46897060/178455971-434f4c5d-6c26-4d34-acdc-b4b50e2a8a2c.png)
+
+<h1 align="center">@threlte/theatre</h1>
+
+Provides easy to use components and hooks to use [Theatre.js](https://www.theatrejs.com/) in threlte.
+
+## Official Documentation
+
+Visit [threlte.xyz](https://threlte.xyz)
+
+## Support
+
+Join the [Discord server](https://discord.gg/EqUBCfCaGm)
+
+---
+
+### License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

package/dist/components/Editable/Editable.svelte

@@ -0,0 +1,301 @@
+<script>import { TransformControls, useParent, useThrelte } from '@threlte/core';
+import { getContext } from 'svelte';
+import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils';
+import { globalObjects, globalStudio } from '../consts';
+import { createRawEventDispatcher } from './createRawEventDispatcher';
+import { isObject3D, isOrthographicOrPerspectiveCamera, isPrimitive } from './typeGuards';
+import { getAutoPropValue, parseAutoPropKeyByPath, resolve } from './utils';
+export let name;
+export let transform = false;
+export let props = undefined;
+export let controls = undefined;
+export let snap = undefined;
+const parent = useParent();
+const { invalidate } = useThrelte();
+/**
+ * Automatic Props that are defined via boolean or string values can't use the
+ * component prop name as the theatre prop name because component prop names
+ * do not need to be alphanumeric whereas theatre prop names do. Thats why we
+ * need to define a mapping of theatre prop names to component prop names in
+ * order to resolve the target of the prop. Also, some props get a special
+ * treatment in terms of UI presentation or data transformation. That is
+ * represented by the `type` property.
+ */
+const autoProps = new Map();
+/**
+ * Transform props are props that are added via the component prop
+ * "transform".
+ */
+const transformProps = (transform &&
+    $parent &&
+    $parent.isObject3D &&
+    $parent.position &&
+    $parent.rotation &&
+    $parent.scale && {
+    Position: { ...$parent.position },
+    Rotation: {
+        x: $parent.rotation.x * RAD2DEG,
+        y: $parent.rotation.y * RAD2DEG,
+        z: $parent.rotation.z * RAD2DEG
+    },
+    Scale: { ...$parent.scale }
+}) ||
+    undefined;
+/**
+ * If transform props are defined, we need to add them to the list of auto
+ * props.
+ */
+if (transformProps) {
+    autoProps.set('Position', {
+        path: 'position',
+        transform: 'none'
+    });
+    autoProps.set('Rotation', {
+        path: 'rotation',
+        transform: 'euler'
+    });
+    autoProps.set('Scale', {
+        path: 'scale',
+        transform: 'none'
+    });
+}
+const parseAutoProp = {
+    boolean: (propName, _) => {
+        /**
+         * If the prop value is a boolean, we need to infer some things based on the name of the prop:
+         * - initial value
+         * - target object
+         * - target key
+         * - prop key (because these need to be alphanumeric)
+         * This also means handling special cases like euler angles and colors
+         */
+        const key = parseAutoPropKeyByPath(propName);
+        const { transform, value } = getAutoPropValue($parent, propName);
+        const prop = { [key]: value };
+        autoProps.set(key, {
+            path: propName,
+            transform
+        });
+        return prop;
+    },
+    string: (propName, propValue) => {
+        /**
+         * If the prop value is a string, we need to infer some things based on the name of the prop:
+         * - initial value
+         * - target object
+         * - target key
+         * This also means handling special cases like euler angles and colors
+         * The prop value is used as the prop key
+         */
+        const { transform, value } = getAutoPropValue($parent, propName);
+        const prop = { [propName]: value };
+        autoProps.set(name, {
+            path: propName,
+            transform
+        });
+        return prop;
+    }
+};
+const parsedProps = Object.entries($$restProps)
+    .filter(Boolean)
+    .map(([key, value]) => {
+    if (typeof value === 'boolean') {
+        return parseAutoProp.boolean(key, value);
+    }
+    else if (typeof value === 'string') {
+        return parseAutoProp.string(key, value);
+    }
+    throw new Error(`Invalid prop type for auto prop ${key}: ` + typeof value + '. Expected boolean or string.');
+})
+    .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+const sheet = getContext('theatre-sheet');
+const projectId = sheet.address.projectId;
+const sheetId = sheet.address.sheetId;
+const instanceId = sheet.address.sheetInstanceId;
+const object = globalObjects.get(`${projectId}-${sheetId}-${instanceId}-${name}`) ??
+    sheet.object(name, {
+        ...parsedProps,
+        ...props,
+        ...transformProps
+    });
+globalObjects.set(`${projectId}-${sheetId}-${instanceId}-${name}`, object);
+let values = object.value;
+const dispatchRaw = createRawEventDispatcher();
+let selected = false;
+let isMouseDown = false;
+/**
+ * The values behind properties with these keys make updating the projection
+ * matrix necessary.
+ */
+const updateProjectionMatrixKeys = [
+    'fov',
+    'near',
+    'far',
+    'zoom',
+    'left',
+    'right',
+    'top',
+    'bottom',
+    'aspect'
+];
+object.onValuesChange((newValues) => {
+    // assign new values to slot prop
+    values = newValues;
+    // dispatch events to parent component callbacks
+    dispatchRaw('change', newValues);
+    // update auto props
+    Object.entries(newValues).forEach((prop) => {
+        // do not apply values while the transformControls are on
+        if (isMouseDown && selected && transform && controls)
+            return;
+        if (!prop)
+            return;
+        const [key, value] = prop;
+        const autoProp = autoProps.get(key);
+        if (!autoProp)
+            return;
+        const { path, transform: type } = autoProp;
+        const { key: targetKey, target } = resolve($parent, path);
+        if (isPrimitive(value)) {
+            target[targetKey] = value;
+        }
+        else if (type === 'euler') {
+            Object.entries(value).forEach(([k, v]) => {
+                target[targetKey][k] = v * DEG2RAD;
+            });
+        }
+        else {
+            Object.entries(value).forEach(([k, v]) => {
+                target[targetKey][k] = v;
+            });
+        }
+        if (updateProjectionMatrixKeys.includes(targetKey) &&
+            isOrthographicOrPerspectiveCamera($parent)) {
+            $parent.updateProjectionMatrix();
+        }
+        invalidate();
+    });
+});
+export const read = () => {
+    if (!$globalStudio)
+        return;
+    let props = {};
+    for (const [key, value] of autoProps.entries()) {
+        const prop = {
+            [key]: getAutoPropValue($parent, value.path).value
+        };
+        props = {
+            ...props,
+            ...prop
+        };
+    }
+    $globalStudio.transaction(({ set }) => {
+        set(object.props, props);
+    });
+};
+let scrub = undefined;
+const onMouseDown = () => {
+    scrub = $globalStudio?.scrub();
+    isMouseDown = true;
+};
+const onMouseUp = async () => {
+    isMouseDown = false;
+    scrub?.commit();
+    scrub = undefined;
+};
+const onChange = () => {
+    if (!isMouseDown)
+        return;
+    if (!transform)
+        return;
+    if (!selected)
+        return;
+    scrub?.capture(({ set }) => {
+        if (!$parent)
+            return;
+        const { position, rotation, scale } = $parent;
+        if (mode === 'translate') {
+            set(object.props.Position, {
+                x: position.x,
+                y: position.y,
+                z: position.z
+            });
+        }
+        else if (mode === 'rotate') {
+            set(object.props.Rotation, {
+                x: rotation.x * RAD2DEG,
+                y: rotation.y * RAD2DEG,
+                z: rotation.z * RAD2DEG
+            });
+        }
+        else if (mode === 'scale') {
+            set(object.props.Scale, {
+                x: scale.x,
+                y: scale.y,
+                z: scale.z
+            });
+        }
+    });
+};
+$globalStudio?.onSelectionChange((newSelection) => {
+    if (newSelection.includes(object)) {
+        selected = true;
+    }
+    else {
+        selected = false;
+    }
+});
+let mode = 'translate';
+let snapActive = false;
+$: snapValues = {
+    translate: snap?.translate ?? 1,
+    rotate: (snap?.rotate ?? 45) * DEG2RAD,
+    scale: snap?.scale ?? 0.1
+};
+const onKeyPress = (e) => {
+    if (e.key === 't') {
+        mode = 'translate';
+    }
+    if (e.key === 'r') {
+        mode = 'rotate';
+    }
+    if (e.key === 's') {
+        mode = 'scale';
+    }
+};
+const onKeyDown = (e) => {
+    if (e.key === 'Shift') {
+        snapActive = true;
+    }
+};
+const onKeyUp = (e) => {
+    if (e.key === 'Shift') {
+        snapActive = false;
+    }
+};
+</script>
+
+<svelte:window
+  on:keypress={onKeyPress}
+  on:keydown={onKeyDown}
+  on:keyup={onKeyUp}
+/>
+
+{#if selected && isObject3D($parent) && transform && controls}
+  <TransformControls
+    {mode}
+    translationSnap={snapActive ? snapValues.translate : null}
+    rotationSnap={snapActive ? snapValues.rotate : null}
+    scaleSnap={snapActive ? snapValues.scale : null}
+    on:change={onChange}
+    on:mouseDown={onMouseDown}
+    on:mouseUp={onMouseUp}
+  />
+{/if}
+
+<slot
+  {values}
+  {read}
+  {sheet}
+  {object}
+/>

package/dist/components/Editable/Editable.svelte.d.ts

@@ -0,0 +1,7 @@
+import { SvelteComponentTyped } from 'svelte'
+
+export default class Editable<T> extends SvelteComponentTyped<
+  import('./types').Props<T>,
+  import('./types').Events<T>,
+  import('./types').Slots<T>
+> {}

package/dist/components/Editable/createRawEventDispatcher.d.ts

@@ -0,0 +1,7 @@
+/**
+ * This event dispatcher creates Raw Events unline sveltes own event dispatcher
+ * which nests the data in a detail object. This is not nesessary for our use
+ * case and makes it harder to work with the data.
+ * @returns
+ */
+export declare function createRawEventDispatcher<EventMap extends Record<string, unknown> = any>(): <EventKey extends Extract<keyof EventMap, string>>(type: EventKey, value?: EventMap[EventKey]) => void;

package/dist/components/Editable/createRawEventDispatcher.js

@@ -0,0 +1,19 @@
+import { get_current_component } from 'svelte/internal';
+/**
+ * This event dispatcher creates Raw Events unline sveltes own event dispatcher
+ * which nests the data in a detail object. This is not nesessary for our use
+ * case and makes it harder to work with the data.
+ * @returns
+ */
+export function createRawEventDispatcher() {
+    const component = get_current_component();
+    const dispatchRawEvent = (type, value) => {
+        const callbacks = component.$$.callbacks[type];
+        if (callbacks) {
+            callbacks.forEach((fn) => {
+                fn(value);
+            });
+        }
+    };
+    return dispatchRawEvent;
+}

package/dist/components/Editable/typeGuards.d.ts

@@ -0,0 +1,5 @@
+import type { Object3D, OrthographicCamera, PerspectiveCamera } from 'three';
+import type { Primitive } from 'type-fest';
+export declare const isObject3D: (value: any) => value is Object3D<import("three").Event>;
+export declare const isPrimitive: (value: any) => value is Primitive;
+export declare const isOrthographicOrPerspectiveCamera: (value: any) => value is PerspectiveCamera | OrthographicCamera;

package/dist/components/Editable/typeGuards.js

@@ -0,0 +1,12 @@
+export const isObject3D = (value) => {
+    return value && value.isObject3D;
+};
+export const isPrimitive = (value) => {
+    return (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean');
+};
+export const isOrthographicOrPerspectiveCamera = (value) => {
+    return (value && value.isOrthographicCamera) || value.isPerspectiveCamera;
+};

package/dist/components/Editable/types.d.ts

@@ -0,0 +1,28 @@
+import type { ISheet, ISheetObject, UnknownShorthandCompoundProps } from '@theatre/core';
+export declare type StringProp = string;
+export declare type BooleanProp = boolean;
+export declare type AutoProp = StringProp | BooleanProp;
+export declare type Props<T extends UnknownShorthandCompoundProps> = {
+    name: string;
+    props?: T;
+    transform?: boolean;
+    controls?: boolean;
+    snap?: {
+        translate?: number;
+        rotate?: number;
+        scale?: number;
+    };
+    read?: () => void;
+} & Record<string, AutoProp | any>;
+export declare type Slots<T extends UnknownShorthandCompoundProps> = {
+    default: {
+        sheet: ISheet;
+        object: ISheetObject<T>;
+        values: ISheetObject<T>['value'];
+        read: () => void;
+    };
+};
+export declare type Events<T extends UnknownShorthandCompoundProps> = {
+    change: ISheetObject<T>['value'];
+};
+export declare type PropTransform = 'none' | 'euler';

package/dist/components/Editable/types.js

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

package/dist/components/Editable/utils.d.ts

@@ -0,0 +1,25 @@
+import type { PropTransform } from './types';
+/**
+ * Resolves a property path to the target and the key.
+ * @param target
+ * @param propertyPath
+ * @returns
+ */
+export declare const resolve: (target: any, propertyPath: string) => {
+    target: any;
+    key: string;
+};
+export declare const parseAutoPropKeyByPath: (path: string) => string;
+/**
+ * Auto props need an initial value to be initialized correctly. This value has
+ * to be retrieved from the target and in some special cases the value needs to
+ * be parsed differently.
+ * @param target
+ * @param key
+ * @returns
+ */
+export declare const getAutoPropValue: (parent: any, path: string) => {
+    transform: PropTransform;
+    value: any;
+};
+export declare const wait: (ms: number) => Promise<unknown>;

package/dist/components/Editable/utils.js

@@ -0,0 +1,86 @@
+import { Color, Euler } from 'three';
+import { RAD2DEG } from 'three/src/math/MathUtils';
+import { types } from '../theatre';
+import { isPrimitive } from './typeGuards';
+/**
+ * Resolves a property path to the target and the key.
+ * @param target
+ * @param propertyPath
+ * @returns
+ */
+export const resolve = (target, propertyPath) => {
+    if (propertyPath.includes('.')) {
+        const path = propertyPath.split('.');
+        const key = path.pop();
+        for (let i = 0; i < path.length; i += 1) {
+            target = target[path[i]];
+        }
+        return {
+            target,
+            key
+        };
+    }
+    else {
+        return {
+            target,
+            key: propertyPath
+        };
+    }
+};
+export const parseAutoPropKeyByPath = (path) => {
+    return path
+        .split('.')
+        .map((k) => k.charAt(0).toUpperCase() + k.slice(1))
+        .join('');
+};
+/**
+ * The values behind properties with these keys are assumed to be normalized, so
+ * in the range [0, 1].
+ */
+const normalizedValueKeys = ['opacity', 'metalness', 'roughness'];
+/**
+ * Auto props need an initial value to be initialized correctly. This value has
+ * to be retrieved from the target and in some special cases the value needs to
+ * be parsed differently.
+ * @param target
+ * @param key
+ * @returns
+ */
+export const getAutoPropValue = (parent, path) => {
+    const { key, target } = resolve(parent, path);
+    // Throw error when key is not found in target
+    if (!(key in target)) {
+        throw new Error(`Key ${key} not found in target`);
+    }
+    let type = 'none';
+    let value = target[key];
+    if (normalizedValueKeys.includes(key)) {
+        value = types.number(value, { range: [0, 1] });
+    }
+    else if (value instanceof Color) {
+        // Colors get an RGBA interface
+        value = types.rgba({
+            r: value.r,
+            g: value.g,
+            b: value.b,
+            a: 1
+        });
+    }
+    else if (value instanceof Euler) {
+        // Euler angles will be displayed in degrees
+        type = 'euler';
+        value = {
+            x: value.x * RAD2DEG,
+            y: value.y * RAD2DEG,
+            z: value.z * RAD2DEG
+        };
+    }
+    else if (!isPrimitive(value)) {
+        value = { ...value };
+    }
+    return {
+        transform: type,
+        value
+    };
+};
+export const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

package/dist/components/Project/Project.svelte

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

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

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

package/dist/components/Sheet/Sheet.svelte

@@ -0,0 +1,70 @@
+<script>import { globalSheets } from '../consts';
+import { getContext, onDestroy, setContext } from 'svelte';
+import { onChange, val } from '../theatre';
+export let name = 'default';
+export let instance = undefined;
+/**
+ * If a number is passed, it will be used as the delay to start autoplaying
+ */
+export let autoPlay = false;
+/**
+ * Resets the playhead to 0 when the sheet is unmounted or mounted or both
+ */
+export let autoReset = false;
+export let autoPause = false;
+export let isPlaying = false;
+const project = getContext(`theatre-project`);
+const projectName = project.address.projectId;
+export const sheet = globalSheets.get(`${projectName}-${name}-${instance}`) ?? project.sheet(name, instance);
+globalSheets.set(`${projectName}-${name}-${instance}`, sheet);
+export const sequence = sheet.sequence;
+setContext(`theatre-sheet`, sheet);
+export const play = (...args) => {
+    return sequence.play(...args);
+};
+export const pause = (...args) => {
+    return sequence.pause(...args);
+};
+const unsubscribe = onChange(sequence.pointer.playing, (playing) => {
+    isPlaying = playing;
+});
+onDestroy(unsubscribe);
+export let position = undefined;
+$: if (position !== undefined) {
+    sequence.position = position;
+}
+let timeoutHandler = undefined;
+if (autoPlay) {
+    const options = typeof autoPlay === 'boolean' ? {} : autoPlay;
+    if (options.delay) {
+        timeoutHandler = setTimeout(() => {
+            sequence.play(options);
+        }, options.delay);
+    }
+    else {
+        sequence.play(options);
+    }
+}
+if (autoReset && (typeof autoReset === 'boolean' || autoReset === 'onMount')) {
+    sequence.position = 0;
+}
+onDestroy(() => {
+    if (timeoutHandler) {
+        clearTimeout(timeoutHandler);
+    }
+    if (autoPause) {
+        sequence.pause();
+    }
+    if (autoReset && (typeof autoReset === 'boolean' || autoReset === 'onDestroy')) {
+        sequence.position = 0;
+    }
+});
+</script>
+
+<slot
+  {sheet}
+  {sequence}
+  {isPlaying}
+  {play}
+  {pause}
+/>

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

@@ -0,0 +1,65 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ISequence } from '@theatre/core';
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        instance?: string | undefined;
+        /**
+           * If a number is passed, it will be used as the delay to start autoplaying
+           */ autoPlay?: boolean | ({
+            iterationCount?: number | undefined;
+            range?: [from: number, to: number] | undefined;
+            rate?: number | undefined;
+            direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+        } & {
+            delay?: number | undefined;
+        }) | undefined;
+        /**
+           * Resets the playhead to 0 when the sheet is unmounted or mounted or both
+           */ autoReset?: boolean | "onMount" | "onDestroy" | undefined;
+        autoPause?: boolean | undefined;
+        isPlaying?: boolean | undefined;
+        sheet?: import("@theatre/core").ISheet | undefined;
+        sequence?: ISequence | undefined;
+        play?: ((conf?: {
+            iterationCount?: number | undefined;
+            range?: [from: number, to: number] | undefined;
+            rate?: number | undefined;
+            direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+        } | undefined) => Promise<boolean>) | undefined;
+        pause?: (() => void) | undefined;
+        position?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            sheet: import("@theatre/core").ISheet;
+            sequence: ISequence;
+            isPlaying: boolean;
+            play: (conf?: {
+                iterationCount?: number | undefined;
+                range?: [from: number, to: number] | undefined;
+                rate?: number | undefined;
+                direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+            } | undefined) => Promise<boolean>;
+            pause: () => void;
+        };
+    };
+};
+export declare type SheetProps = typeof __propDef.props;
+export declare type SheetEvents = typeof __propDef.events;
+export declare type SheetSlots = typeof __propDef.slots;
+export default class Sheet extends SvelteComponentTyped<SheetProps, SheetEvents, SheetSlots> {
+    get sheet(): import("@theatre/core").ISheet;
+    get sequence(): ISequence;
+    get play(): (conf?: {
+        iterationCount?: number | undefined;
+        range?: [from: number, to: number] | undefined;
+        rate?: number | undefined;
+        direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+    } | undefined) => Promise<boolean>;
+    get pause(): () => void;
+}
+export {};

package/dist/components/Studio/InnerStudio.svelte

@@ -0,0 +1,16 @@
+<script>import { globalStudio } from '../consts';
+import { onDestroy, onMount } from 'svelte';
+onMount(async () => {
+    if ($globalStudio) {
+        $globalStudio.ui.restore();
+        return;
+    }
+    const studioPkg = await import('@theatre/studio');
+    const studio = studioPkg.default;
+    studio.initialize();
+    globalStudio.set(studio);
+});
+onDestroy(() => {
+    $globalStudio?.ui.hide();
+});
+</script>

package/dist/components/Studio/InnerStudio.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InnerStudioProps = typeof __propDef.props;
+export declare type InnerStudioEvents = typeof __propDef.events;
+export declare type InnerStudioSlots = typeof __propDef.slots;
+export default class InnerStudio extends SvelteComponentTyped<InnerStudioProps, InnerStudioEvents, InnerStudioSlots> {
+}
+export {};

package/dist/components/Studio/Studio.svelte

@@ -0,0 +1,10 @@
+<script>import InnerStudio from './InnerStudio.svelte';
+export let enabled = true;
+const browser = typeof window !== 'undefined';
+</script>
+
+{#if browser && enabled}
+  <InnerStudio />
+{/if}
+
+<slot />

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        enabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type StudioProps = typeof __propDef.props;
+export declare type StudioEvents = typeof __propDef.events;
+export declare type StudioSlots = typeof __propDef.slots;
+export default class Studio extends SvelteComponentTyped<StudioProps, StudioEvents, StudioSlots> {
+}
+export {};

package/dist/components/Theatre/Theatre.svelte

@@ -0,0 +1,16 @@
+<script>import Project from '../Project/Project.svelte';
+import Sheet from '../Sheet/Sheet.svelte';
+import Studio from '../Studio/Studio.svelte';
+export let studio = true;
+export let config = undefined;
+</script>
+
+{#if studio}
+  <Studio />
+{/if}
+
+<Project {config}>
+  <Sheet>
+    <slot />
+  </Sheet>
+</Project>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { IProjectConfig } from '@theatre/core';
+declare const __propDef: {
+    props: {
+        studio?: boolean | undefined;
+        config?: IProjectConfig | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TheatreProps = typeof __propDef.props;
+export declare type TheatreEvents = typeof __propDef.events;
+export declare type TheatreSlots = typeof __propDef.slots;
+export default class Theatre extends SvelteComponentTyped<TheatreProps, TheatreEvents, TheatreSlots> {
+}
+export {};

package/dist/components/consts.d.ts

@@ -0,0 +1,6 @@
+import type { IProject, ISheet, ISheetObject } from '@theatre/core';
+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("svelte/store").Writable<IStudio | undefined>;

package/dist/components/consts.js

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+export const globalProjects = new Map();
+export const globalSheets = new Map();
+export const globalObjects = new Map();
+export const globalStudio = writable(undefined);

package/dist/components/theatre.d.ts

@@ -0,0 +1,2 @@
+import * as theatreCore from '@theatre/core';
+export declare const getProject: typeof theatreCore.getProject, types: typeof theatreCore.types, onChange: typeof theatreCore.onChange, val: typeof theatreCore.val;

package/dist/components/theatre.js

@@ -0,0 +1,2 @@
+import * as theatreCore from '@theatre/core';
+export const { getProject, types, onChange, val } = theatreCore;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+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';

package/dist/index.js

@@ -0,0 +1,6 @@
+// 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';

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@threlte/theatre",
+  "version": "0.0.1",
+  "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "1.0.0-next.61",
+    "@sveltejs/adapter-static": "1.0.0-next.35",
+    "@sveltejs/kit": "1.0.0-next.377",
+    "@theatre/core": "0.5.1-rc.1",
+    "@theatre/studio": "0.5.1-rc.1",
+    "@threlte/core": "5.0.7",
+    "@types/node": "^18.0.3",
+    "@types/three": "^0.144.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
+    "@yushijinhun/three-minifier-rollup": "^0.3.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^3.2.1",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.4.0",
+    "svelte": "^3.47.0",
+    "svelte-check": "^2.7.0",
+    "svelte-preprocess": "^4.10.5",
+    "svelte2tsx": "^0.5.9",
+    "three": "^0.145.0",
+    "ts-node": "^10.8.2",
+    "tsafe": "^0.9.0",
+    "tslib": "^2.3.1",
+    "type-fest": "^2.13.0",
+    "typescript": "^4.6.3"
+  },
+  "type": "module",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./dist/index.js"
+  },
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "package": "svelte-kit package && ts-node --esm ./scripts/cleanupPackage.ts && rm ./dist/package.json",
+    "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=. .",
+    "cleanup": "rm -rf node_modules && rm -rf .svelte-kit"
+  }
+}