@threlte/flex 0.0.2

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,67 @@
+<div align="right">
+ <a href="https://www.npmjs.com/package/@threlte/flex">
+  <img alt="npm" src="https://img.shields.io/npm/v/@threlte/flex?color=fe4100&labelColor=171d27&logo=npm&logoColor=white"/>
+ </a>
+ <a href="https://github.com/threlte/threlte/blob/main/LICENSE.md">
+  <img alt="license" src="https://img.shields.io/npm/l/@threlte/core?color=fe4100&labelColor=171d27&logo=git&logoColor=white"/>
+ </a>
+ <a href="https://discord.com/channels/985983540804091964">
+  <img alt="discord" src="https://img.shields.io/discord/985983540804091964?label=discord&color=fe4100&labelColor=171d27&logo=discord&logoColor=white"/>
+ </a>
+ <a href="https://threlte.xyz">
+  <img alt="docs" src="https://img.shields.io/website?down_color=red&down_message=offline&label=docs&color=fe4100&labelColor=171d27&up_message=online&url=https%3A%2F%2Fthrelte.xyz&logo=svelte&logoColor=white"/>
+ </a>
+</div>
+
+<a href="https://threlte.xyz">
+ <img src="https://threlte.xyz/logo/threlte-banner.jpg"/>
+</a>
+
+## Rapidly Build Interactive 3D Apps for the Web
+
+Threlte is a [Svelte](https://svelte.dev/) library that simplifies creating 3D apps for the web. It provides a **declarative**, **type-safe**, **reactive** and **interactive** API out-of-the-box.
+
+Threlte's **3D rendering** is powered by [Three.js](https://threejs.org/), and it also provides a **physics engine** through [Rapier](https://rapier.rs/) and an **animation studio** via [Theatre.js](https://www.theatrejs.com/); see [packages](#packages) for details.
+
+Check out our **[documentation](https://threlte.xyz)** and our **[Discord community](https://discord.gg/EqUBCfCaGm)**.
+
+## @threlte/flex
+
+[@threlte/flex](https://threlte.xyz/docs/reference/flex/getting-started) makes placing 3D content based on flexbox principles a breeze.
+
+## Quickstart
+
+### Installation
+
+For a quick interactive setup of a fresh Threlte project, run:
+
+```sh
+npm create threlte my-project
+```
+
+Alternatively you can check out the full [installation instructions](https://threlte.xyz/docs/learn/getting-started/installation).
+
+### Tutorial
+
+To get a hang of the basics, we recommend following our [introductory tutorial](https://threlte.xyz/docs/learn/getting-started/your-first-scene).
+
+### Support
+
+Have questions? Feel free to ask in our [Discord support forum](https://discord.com/channels/985983540804091964/1031843197963477002).
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- **Filing Issues** - if you have feature requestions or you think you spotted a bug, [submit an issue](https://github.com/threlte/threlte/issues/new).
+- **Contributing Code** - if you would like to drop us a PR, read the [contribution guide](https://github.com/threlte/threlte/blob/main/CONTRIBUTING.md) first.
+
+## Sponsors
+
+[![Powered by Vercel](./assets/vercel/powered-by-vercel.svg)](https://vercel.com/?utm_source=threlte&utm_campaign=oss)
+
+---
+
+### License
+
+The MIT License (MIT). Please see the [License File](LICENSE.md) for more information.

package/dist/Box/Box.svelte

@@ -0,0 +1,62 @@
+<script>import { HierarchicalObject, T } from '@threlte/core';
+import { onDestroy } from 'svelte';
+import { Group } from 'three';
+import { useFlex } from '../Flex/context';
+import { createNodeContext } from '../nodes/context';
+export let order = undefined;
+let _class = '';
+export { _class as class };
+const { scaleFactor, onEvent, addNode, removeNode, updateNodeProps, mainAxis, crossAxis, depthAxis, classParser } = useFlex();
+export const group = new Group();
+export const contentGroup = new Group();
+group.userData.isNode = true;
+export const { node } = createNodeContext(order);
+addNode(node, group, $$restProps);
+updateNodeProps(node, { ...classParser?.(_class), ...$$restProps }, true);
+$: updateNodeProps(node, { ...classParser?.(_class), ...$$restProps });
+onDestroy(() => {
+    removeNode(node);
+});
+let computedWidth = 1;
+let computedHeight = 1;
+// after the parent has been reflowed, we can use the calculated layout to set the properties of the box
+onEvent('reflow:after', () => {
+    computedWidth =
+        typeof $$restProps.width === 'number'
+            ? $$restProps.width
+            : node.getComputedWidth() / $scaleFactor;
+    computedHeight =
+        typeof $$restProps.height === 'number'
+            ? $$restProps.height
+            : node.getComputedHeight() / $scaleFactor;
+    contentGroup.position[$mainAxis] = computedWidth / 2;
+    contentGroup.position[$crossAxis] = -computedHeight / 2;
+    contentGroup.position[$depthAxis] = 0;
+});
+</script>
+
+<T is={group}>
+  <T is={contentGroup} />
+</T>
+
+<HierarchicalObject
+  onChildMount={(child) => {
+    if (child.userData.isNode) {
+      group.add(child)
+    } else {
+      contentGroup.add(child)
+    }
+  }}
+  onChildDestroy={(child) => {
+    if (child.userData.isNode) {
+      group.remove(child)
+    } else {
+      contentGroup.remove(child)
+    }
+  }}
+>
+  <slot
+    width={computedWidth}
+    height={computedHeight}
+  />
+</HierarchicalObject>

package/dist/Box/Box.svelte.d.ts

@@ -0,0 +1,62 @@
+import { SvelteComponentTyped } from "svelte";
+import { Group } from 'three';
+declare const __propDef: {
+    props: {
+        group?: Group | undefined;
+        contentGroup?: Group | undefined;
+        node?: any;
+        alignItems?: string | number | symbol | undefined;
+        alignSelf?: string | number | symbol | undefined;
+        alignContent?: string | number | symbol | undefined;
+        justifyContent?: string | number | symbol | undefined;
+        flexDirection?: string | number | symbol | undefined;
+        flexWrap?: string | number | symbol | undefined;
+        flex?: unknown;
+        flexBasis?: unknown;
+        flexGrow?: unknown;
+        flexShrink?: unknown;
+        height?: unknown;
+        width?: unknown;
+        maxHeight?: unknown;
+        maxWidth?: unknown;
+        minHeight?: unknown;
+        minWidth?: unknown;
+        top?: unknown;
+        right?: unknown;
+        bottom?: unknown;
+        left?: unknown;
+        padding?: unknown;
+        paddingTop?: unknown;
+        paddingRight?: unknown;
+        paddingBottom?: unknown;
+        paddingLeft?: unknown;
+        margin?: unknown;
+        marginTop?: unknown;
+        marginRight?: unknown;
+        marginBottom?: unknown;
+        marginLeft?: unknown;
+        gap?: unknown;
+        gapColumn?: unknown;
+        gapRow?: unknown;
+        aspectRatio?: unknown;
+        order?: number | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export type BoxProps = typeof __propDef.props;
+export type BoxEvents = typeof __propDef.events;
+export type BoxSlots = typeof __propDef.slots;
+export default class Box extends SvelteComponentTyped<BoxProps, BoxEvents, BoxSlots> {
+    get group(): Group;
+    get contentGroup(): Group;
+}
+export {};

package/dist/Flex/Flex.svelte

@@ -0,0 +1,21 @@
+<script>import { forwardEventHandlers } from '@threlte/core';
+import { loadYoga } from 'yoga-layout';
+import InnerFlex from './InnerFlex.svelte';
+let yoga;
+const initialize = async () => {
+    yoga = await loadYoga();
+};
+initialize();
+const component = forwardEventHandlers();
+</script>
+
+{#if yoga}
+  <InnerFlex
+    {yoga}
+    {...$$restProps}
+    bind:this={$component}
+    let:reflow
+  >
+    <slot {reflow} />
+  </InnerFlex>
+{/if}

package/dist/Flex/Flex.svelte.d.ts

@@ -0,0 +1,61 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        flex?: unknown;
+        height?: number | undefined;
+        width?: number | undefined;
+        left?: unknown;
+        top?: unknown;
+        alignContent?: string | number | symbol | undefined;
+        alignItems?: string | number | symbol | undefined;
+        alignSelf?: string | number | symbol | undefined;
+        aspectRatio?: unknown;
+        bottom?: unknown;
+        direction?: string | number | symbol | undefined;
+        flexBasis?: unknown;
+        flexDirection?: string | number | symbol | undefined;
+        flexGrow?: unknown;
+        flexShrink?: unknown;
+        flexWrap?: string | number | symbol | undefined;
+        gap?: unknown;
+        justifyContent?: string | number | symbol | undefined;
+        margin?: unknown;
+        marginBottom?: unknown;
+        marginLeft?: unknown;
+        marginRight?: unknown;
+        marginTop?: unknown;
+        maxHeight?: unknown;
+        maxWidth?: unknown;
+        minHeight?: unknown;
+        minWidth?: unknown;
+        padding?: unknown;
+        paddingBottom?: unknown;
+        paddingLeft?: unknown;
+        paddingRight?: unknown;
+        paddingTop?: unknown;
+        right?: unknown;
+        class?: string | undefined;
+        plane?: import("../lib/props").FlexPlane | undefined;
+        gapColumn?: unknown;
+        gapRow?: unknown;
+        scaleFactor?: number | undefined;
+        classParser?: import("../lib/props").ClassParser | undefined;
+    };
+    slots: {
+        default: {
+            reflow: () => void;
+        };
+    };
+    events: {
+        reflow: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export type FlexProps = typeof __propDef.props;
+export type FlexEvents = typeof __propDef.events;
+export type FlexSlots = typeof __propDef.slots;
+export default class Flex extends SvelteComponentTyped<FlexProps, FlexEvents, FlexSlots> {
+}
+export {};

package/dist/Flex/InnerFlex.svelte

@@ -0,0 +1,137 @@
+<script>import { T, createRawEventDispatcher, currentWritable, useFrame } from '@threlte/core';
+import { onDestroy } from 'svelte';
+import { Box3, Group, Vector3 } from 'three';
+import { Direction } from 'yoga-layout';
+import { getDepthAxis } from '../lib/getDepthAxis';
+import { getOrientedBoundingBoxSize } from '../lib/getOrientedBoundingBoxSize';
+import { getRootShift } from '../lib/getRootShift';
+import { applyNodeProps } from '../lib/props';
+import { createNodeContext } from '../nodes/context';
+import { createFlexContext } from './context';
+export let yoga;
+export let width = 1;
+export let height = 1;
+export let plane = 'xy';
+export let direction = 'LTR';
+export let scaleFactor = 1000;
+export let classParser = undefined;
+let _class = '';
+export { _class as class };
+const dispatch = createRawEventDispatcher();
+const rootGroup = new Group();
+rootGroup.userData.isNode = true;
+const boundingBox = new Box3();
+const vec3 = new Vector3();
+/**
+ * Reflowing inside useFrame automatically batches reflows to 1 per frame.
+ */
+const { start: reflow, stop } = useFrame(() => {
+    flexContext.emit('reflow:before');
+    for (const { node, group, props } of flexContext.nodes.values()) {
+        const scaledWidth = typeof props.width === 'number' ? props.width * scaleFactor : props.width;
+        const scaledHeight = typeof props.height === 'number' ? props.height * scaleFactor : props.height;
+        if (scaledWidth !== undefined && scaledHeight !== undefined) {
+            // Forced size, no need to calculate bounding box
+            node.setWidth(scaledWidth);
+            node.setHeight(scaledHeight);
+        }
+        else if (node.getChildCount() === 0) {
+            // No size specified, calculate size
+            if (rootGroup) {
+                getOrientedBoundingBoxSize(group, rootGroup, boundingBox, vec3);
+            }
+            else {
+                // rootGroup ref is missing for some reason, let's just use usual bounding box
+                boundingBox.setFromObject(group).getSize(vec3);
+            }
+            node.setWidth(scaledWidth || vec3[$mainAxis] * scaleFactor);
+            node.setHeight(scaledHeight || vec3[$crossAxis] * scaleFactor);
+        }
+    }
+    rootNode.calculateLayout(width * scaleFactor, height * scaleFactor, Direction[direction]);
+    const rootWidth = rootNode.getComputedWidth();
+    const rootHeight = rootNode.getComputedHeight();
+    let minX = 0;
+    let maxX = 0;
+    let minY = 0;
+    let maxY = 0;
+    // Reposition after recalculation
+    for (const { node, group } of flexContext.nodes.values()) {
+        const { left, top, width, height } = node.getComputedLayout();
+        const [mainAxisShift, crossAxisShift] = getRootShift(rootWidth, rootHeight, node);
+        group.position[$mainAxis] = (mainAxisShift + left) / scaleFactor;
+        group.position[$crossAxis] = -(crossAxisShift + top) / scaleFactor;
+        group.position[$depthAxis] = 0;
+        minX = Math.min(minX, left);
+        minY = Math.min(minY, top);
+        maxX = Math.max(maxX, left + width);
+        maxY = Math.max(maxY, top + height);
+    }
+    flexContext.emit('reflow:after');
+    dispatch('reflow', {
+        width: (maxX - minX) / scaleFactor,
+        height: (maxY - minY) / scaleFactor
+    });
+    stop();
+}, { autostart: false });
+const flexContext = createFlexContext({
+    yoga,
+    nodes: new Map(),
+    addNode(node, group, props) {
+        flexContext.nodes.set(node, { node, group, props });
+        reflow();
+    },
+    updateNodeProps(node, props, force = false) {
+        const nodeData = flexContext.nodes.get(node);
+        if (!nodeData)
+            return;
+        // Updating the props can be forced and is done so on the initial call.
+        if (!force) {
+            // Because all NodeProps are primitive types, we can make a simple
+            // comparison and only request a reflow when necessary. We do that by
+            // checking the length of the props object and then checking if all keys
+            // are the same and all values are the same.
+            const previousKeys = Object.keys(nodeData.props);
+            const currentKeys = Object.keys(props);
+            if (previousKeys.length === currentKeys.length &&
+                currentKeys.every((key) => previousKeys.includes(key)) &&
+                previousKeys.every((key) => nodeData.props[key] === props[key])) {
+                return;
+            }
+        }
+        applyNodeProps(node, props, scaleFactor);
+        nodeData.props = props;
+        reflow();
+    },
+    removeNode(node) {
+        flexContext.nodes.delete(node);
+        reflow();
+    },
+    rootWidth: currentWritable(width),
+    rootHeight: currentWritable(height),
+    scaleFactor: currentWritable(scaleFactor ?? 1000),
+    mainAxis: currentWritable(plane[0]),
+    crossAxis: currentWritable(plane[1]),
+    depthAxis: currentWritable(getDepthAxis(plane)),
+    rootGroup: rootGroup,
+    reflow,
+    classParser
+});
+const { mainAxis, crossAxis, depthAxis } = flexContext;
+const { node: rootNode } = createNodeContext();
+$: rootNode.setWidth(width * scaleFactor), rootNode.setHeight(height * scaleFactor);
+$: applyNodeProps(rootNode, { ...classParser?.(_class), ...$$restProps }, scaleFactor), reflow();
+$: flexContext.rootWidth.set(width), flexContext.reflow('Updated root width');
+$: flexContext.rootHeight.set(height), flexContext.reflow('Updated root height');
+$: flexContext.mainAxis.set(plane[0]), flexContext.reflow('Updated main axis');
+$: flexContext.crossAxis.set(plane[1]), flexContext.reflow('Updated cross axis');
+$: flexContext.depthAxis.set(getDepthAxis(plane)), flexContext.reflow('Updated depth axis');
+$: flexContext.scaleFactor.set(scaleFactor), flexContext.reflow('Updated scale factor');
+onDestroy(() => {
+    rootNode.free();
+});
+</script>
+
+<T is={rootGroup}>
+  <slot {reflow} />
+</T>

package/dist/Flex/InnerFlex.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponentTyped } from "svelte";
+import { type ClassParser, type FlexPlane } from '../lib/props';
+declare const __propDef: {
+    props: {
+        alignItems?: string | number | symbol | undefined;
+        alignSelf?: string | number | symbol | undefined;
+        alignContent?: string | number | symbol | undefined;
+        justifyContent?: string | number | symbol | undefined;
+        flexDirection?: string | number | symbol | undefined;
+        flexWrap?: string | number | symbol | undefined;
+        flex?: unknown;
+        flexBasis?: unknown;
+        flexGrow?: unknown;
+        flexShrink?: unknown;
+        height?: number | undefined;
+        width?: number | undefined;
+        maxHeight?: unknown;
+        maxWidth?: unknown;
+        minHeight?: unknown;
+        minWidth?: unknown;
+        top?: unknown;
+        right?: unknown;
+        bottom?: unknown;
+        left?: unknown;
+        padding?: unknown;
+        paddingTop?: unknown;
+        paddingRight?: unknown;
+        paddingBottom?: unknown;
+        paddingLeft?: unknown;
+        margin?: unknown;
+        marginTop?: unknown;
+        marginRight?: unknown;
+        marginBottom?: unknown;
+        marginLeft?: unknown;
+        gap?: unknown;
+        gapColumn?: unknown;
+        gapRow?: unknown;
+        aspectRatio?: unknown;
+        yoga: Yoga;
+        plane?: FlexPlane | undefined;
+        direction?: string | number | symbol | undefined;
+        scaleFactor?: number | undefined;
+        class?: string | undefined;
+        classParser?: ClassParser | undefined;
+    };
+    slots: {
+        default: {
+            reflow: () => void;
+        };
+    };
+    events: {
+        reflow: {
+            width: number;
+            height: number;
+        };
+    };
+};
+export type InnerFlexProps = typeof __propDef.props;
+export type InnerFlexEvents = typeof __propDef.events;
+export type InnerFlexSlots = typeof __propDef.slots;
+export default class InnerFlex extends SvelteComponentTyped<InnerFlexProps, InnerFlexEvents, InnerFlexSlots> {
+}
+export {};

package/dist/Flex/context.d.ts

@@ -0,0 +1,39 @@
+import type { CurrentWritable } from '@threlte/core';
+import { type Emitter } from 'mitt';
+import type { Group } from 'three';
+import type { Node, Yoga } from 'yoga-layout';
+import type { Axis, ClassParser, NodeProps } from '../lib/props';
+type FlexContextEvents = {
+    'reflow:before': void;
+    'reflow:after': void;
+};
+type FlexContextNode = {
+    node: Node;
+    group: THREE.Group;
+    props: NodeProps;
+};
+export type FlexContextData = {
+    yoga: Yoga;
+    nodes: Map<Node, FlexContextNode>;
+    addNode: (node: Node, group: Group, props: NodeProps) => void;
+    updateNodeProps: (node: Node, props: NodeProps, force?: boolean) => void;
+    removeNode: (node: Node) => void;
+    scaleFactor: CurrentWritable<number>;
+    mainAxis: CurrentWritable<Axis>;
+    crossAxis: CurrentWritable<Axis>;
+    depthAxis: CurrentWritable<Axis>;
+    rootGroup: Group;
+    rootWidth: CurrentWritable<number>;
+    rootHeight: CurrentWritable<number>;
+    reflow: (msg?: string) => void;
+    classParser?: ClassParser;
+};
+export type FlexContext = FlexContextData & Emitter<FlexContextEvents> & {
+    onEvent: <Type extends keyof FlexContextEvents>(type: Type, callback: (payload: FlexContextEvents[Type]) => void) => void;
+};
+export declare const flexContextName = "__threlte-flex";
+export declare const createFlexContext: (data: FlexContextData) => FlexContextData & Emitter<FlexContextEvents> & {
+    onEvent: <Type extends keyof FlexContextEvents>(type: Type, callback: (payload: FlexContextEvents[Type]) => void) => void;
+};
+export declare const useFlex: () => FlexContext;
+export {};

package/dist/Flex/context.js

@@ -0,0 +1,18 @@
+import mitt, {} from 'mitt';
+import { getContext, onDestroy, setContext } from 'svelte';
+export const flexContextName = '__threlte-flex';
+export const createFlexContext = (data) => {
+    const emitter = mitt();
+    const eventCallback = {
+        onEvent: (type, callback) => {
+            emitter.on(type, callback);
+            onDestroy(() => emitter.off(type, callback));
+        }
+    };
+    const context = Object.assign(data, emitter, eventCallback);
+    setContext(flexContextName, context);
+    return context;
+};
+export const useFlex = () => {
+    return getContext(flexContextName);
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Box } from './Box/Box.svelte';
+export { default as Flex } from './Flex/Flex.svelte';
+export type { NodeProps } from './lib/props';
+export { createClassParser } from './parsers/createClassParser';
+export { tailwindParser } from './parsers/tailwindParser';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as Box } from './Box/Box.svelte';
+export { default as Flex } from './Flex/Flex.svelte';
+// parsers
+export { createClassParser } from './parsers/createClassParser';
+export { tailwindParser } from './parsers/tailwindParser';

package/dist/lib/alignFlexProps.d.ts

@@ -0,0 +1,9 @@
+import type { NodeProps } from './props';
+/**
+ * This function will align the flex props to the web-standard.
+ *
+ * yoga-layout uses `Column` as the default flex direction, but we
+ * want to use `Row` as the default (web-standard). This function will return
+ * the props with the default flex direction applied if it is not already set.
+ */
+export declare const alignFlexProps: (props: NodeProps) => NodeProps;

package/dist/lib/alignFlexProps.js

@@ -0,0 +1,10 @@
+/**
+ * This function will align the flex props to the web-standard.
+ *
+ * yoga-layout uses `Column` as the default flex direction, but we
+ * want to use `Row` as the default (web-standard). This function will return
+ * the props with the default flex direction applied if it is not already set.
+ */
+export const alignFlexProps = (props) => {
+    return { flexDirection: 'Row', ...props };
+};

package/dist/lib/getDepthAxis.d.ts

@@ -0,0 +1,2 @@
+import type { FlexPlane } from './props';
+export declare function getDepthAxis(plane: FlexPlane): "x" | "y" | "z";

package/dist/lib/getDepthAxis.js

@@ -0,0 +1,10 @@
+export function getDepthAxis(plane) {
+    switch (plane) {
+        case 'xy':
+            return 'z';
+        case 'yz':
+            return 'x';
+        case 'xz':
+            return 'y';
+    }
+}

package/dist/lib/getFlex2DSize.d.ts

@@ -0,0 +1,2 @@
+import type { FlexPlane } from './props';
+export declare function getFlex2DSize(sizes: [number, number, number], plane: FlexPlane): number[];

package/dist/lib/getFlex2DSize.js

@@ -0,0 +1,10 @@
+export function getFlex2DSize(sizes, plane) {
+    switch (plane) {
+        case 'xy':
+            return [sizes[0], sizes[1]];
+        case 'yz':
+            return [sizes[1], sizes[2]];
+        case 'xz':
+            return [sizes[0], sizes[2]];
+    }
+}

package/dist/lib/getOrientedBoundingBoxSize.d.ts

@@ -0,0 +1,11 @@
+import { type Box3, type Object3D, type Vector3 } from 'three';
+/**
+ * Adapted code from https://github.com/mrdoob/three.js/issues/11967
+ * Calculates oriented bounding box size
+ * Essentially it negates flex root rotation to provide proper number
+ * E.g. if root flex group rotatet 45 degress, a cube box of size 1 will report sizes of sqrt(2)
+ * but it should still be 1
+ *
+ * NB: This doesn't work when object itself is rotated (well, for now)
+ */
+export declare const getOrientedBoundingBoxSize: (object: Object3D, root: Object3D, bb: Box3, size: Vector3) => void;

package/dist/lib/getOrientedBoundingBoxSize.js

@@ -0,0 +1,25 @@
+import { Matrix4 } from 'three';
+/**
+ * Adapted code from https://github.com/mrdoob/three.js/issues/11967
+ * Calculates oriented bounding box size
+ * Essentially it negates flex root rotation to provide proper number
+ * E.g. if root flex group rotatet 45 degress, a cube box of size 1 will report sizes of sqrt(2)
+ * but it should still be 1
+ *
+ * NB: This doesn't work when object itself is rotated (well, for now)
+ */
+export const getOrientedBoundingBoxSize = (object, root, bb, size) => {
+    object.updateMatrix();
+    const oldMatrix = object.matrix;
+    const oldMatrixAutoUpdate = object.matrixAutoUpdate;
+    root.updateMatrixWorld();
+    const m = new Matrix4().copy(root.matrixWorld).invert();
+    object.matrix = m;
+    // to prevent matrix being reassigned
+    object.matrixAutoUpdate = false;
+    root.updateMatrixWorld();
+    bb.setFromObject(object).getSize(size);
+    object.matrix = oldMatrix;
+    object.matrixAutoUpdate = oldMatrixAutoUpdate;
+    root.updateMatrixWorld();
+};

package/dist/lib/getRootShift.d.ts

@@ -0,0 +1,2 @@
+/** @returns [mainAxisShift, crossAxisShift] */
+export declare const getRootShift: (rootWidth: number, rootHeight: number, node: Node) => number[] | readonly [number, number];

package/dist/lib/getRootShift.js

@@ -0,0 +1,10 @@
+import { isTopLevelChildNode } from './isTopLevelChildNode';
+/** @returns [mainAxisShift, crossAxisShift] */
+export const getRootShift = (rootWidth, rootHeight, node) => {
+    if (!isTopLevelChildNode(node)) {
+        return [0, 0];
+    }
+    const mainAxisShift = -rootWidth / 2;
+    const crossAxisShift = -rootHeight / 2;
+    return [mainAxisShift, crossAxisShift];
+};

package/dist/lib/isTopLevelChildNode.d.ts

@@ -0,0 +1 @@
+export declare const isTopLevelChildNode: (node: Node) => boolean;

package/dist/lib/isTopLevelChildNode.js

@@ -0,0 +1 @@
+export const isTopLevelChildNode = (node) => !node.getParent()?.getParent();

package/dist/lib/props.d.ts

@@ -0,0 +1,52 @@
+import type { Align, FlexDirection, Justify, Node, Wrap } from 'yoga-layout';
+export type FlexPlane = 'xy' | 'yz' | 'xz';
+export type ClassParser = (className: string) => NodeProps;
+export type Axis = 'x' | 'y' | 'z';
+/**
+ * This map provides the prop setters as well as the types for the props. The
+ * first input of a setter is used as the prop value. The second input is the
+ * node to apply the prop to. The value of a prop needs to be a primitive type,
+ * so that it can be trivially compared to the previous value. This is used to
+ * prevent unnecessary reflows.
+ */
+export declare const propSetter: {
+    alignItems: (align: keyof typeof Align, node: Node) => any;
+    alignSelf: (align: keyof typeof Align, node: Node) => any;
+    alignContent: (align: keyof typeof Align, node: Node) => any;
+    justifyContent: (justify: keyof typeof Justify, node: Node) => any;
+    flexDirection: (dir: keyof typeof FlexDirection, node: Node) => any;
+    flexWrap: (wrap: keyof typeof Wrap, node: Node) => any;
+    flex: (flex: Parameters<Node['setFlex']>[0], node: Node) => any;
+    flexBasis: (basis: Parameters<Node['setFlexBasis']>[0], node: Node) => any;
+    flexGrow: (grow: Parameters<Node['setFlexGrow']>[0], node: Node) => any;
+    flexShrink: (shrink: Parameters<Node['setFlexShrink']>[0], node: Node) => any;
+    height: (height: Parameters<Node['setHeight']>[0], node: Node) => any;
+    width: (width: Parameters<Node['setWidth']>[0], node: Node) => any;
+    maxHeight: (maxHeight: Parameters<Node['setMaxHeight']>[0], node: Node) => any;
+    maxWidth: (maxWidth: Parameters<Node['setMaxWidth']>[0], node: Node) => any;
+    minHeight: (minHeight: Parameters<Node['setMinHeight']>[0], node: Node) => any;
+    minWidth: (minWidth: Parameters<Node['setMinWidth']>[0], node: Node) => any;
+    /** As of now, this won't work since the bounding box is still computed by nodes marked as absolutely positioned  */
+    top: (top: Parameters<Node['setPosition']>[1], node: Node) => any;
+    right: (right: Parameters<Node['setPosition']>[1], node: Node) => any;
+    bottom: (bottom: Parameters<Node['setPosition']>[1], node: Node) => any;
+    left: (left: Parameters<Node['setPosition']>[1], node: Node) => any;
+    padding: (padding: Parameters<Node['setPadding']>[1], node: Node) => any;
+    paddingTop: (paddingTop: Parameters<Node['setPadding']>[1], node: Node) => any;
+    paddingRight: (paddingRight: Parameters<Node['setPadding']>[1], node: Node) => any;
+    paddingBottom: (paddingBottom: Parameters<Node['setPadding']>[1], node: Node) => any;
+    paddingLeft: (paddingLeft: Parameters<Node['setPadding']>[1], node: Node) => any;
+    margin: (margin: Parameters<Node['setMargin']>[1], node: Node) => any;
+    marginTop: (marginTop: Parameters<Node['setMargin']>[1], node: Node) => any;
+    marginRight: (marginRight: Parameters<Node['setMargin']>[1], node: Node) => any;
+    marginBottom: (marginBottom: Parameters<Node['setMargin']>[1], node: Node) => any;
+    marginLeft: (marginLeft: Parameters<Node['setMargin']>[1], node: Node) => any;
+    gap: (gap: Parameters<Node['setGap']>[1], node: Node) => any;
+    gapColumn: (gapColumn: Parameters<Node['setGap']>[1], node: Node) => any;
+    gapRow: (gapRow: Parameters<Node['setGap']>[1], node: Node) => any;
+    aspectRatio: (aspectRatio: Parameters<Node['setAspectRatio']>[0], node: Node) => any;
+};
+export type NodeProps = {
+    [Key in keyof typeof propSetter]?: Parameters<(typeof propSetter)[Key]>[0];
+};
+export declare const applyNodeProps: (node: Node, props: NodeProps, scaleFactor: number) => void;

package/dist/lib/props.js

@@ -0,0 +1,65 @@
+import * as Yoga from 'yoga-layout';
+import { alignFlexProps } from './alignFlexProps';
+// prettier-ignore
+/**
+ * This map provides the prop setters as well as the types for the props. The
+ * first input of a setter is used as the prop value. The second input is the
+ * node to apply the prop to. The value of a prop needs to be a primitive type,
+ * so that it can be trivially compared to the previous value. This is used to
+ * prevent unnecessary reflows.
+ */
+export const propSetter = {
+    alignItems: (align, node) => node.setAlignItems(Yoga.Align[align]),
+    alignSelf: (align, node) => node.setAlignSelf(Yoga.Align[align]),
+    alignContent: (align, node) => node.setAlignContent(Yoga.Align[align]),
+    justifyContent: (justify, node) => node.setJustifyContent(Yoga.Justify[justify]),
+    flexDirection: (dir, node) => node.setFlexDirection(Yoga.FlexDirection[dir]),
+    flexWrap: (wrap, node) => node.setFlexWrap(Yoga.Wrap[wrap]),
+    flex: (flex, node) => node.setFlex(flex),
+    flexBasis: (basis, node) => node.setFlexBasis(basis),
+    flexGrow: (grow, node) => node.setFlexGrow(grow),
+    flexShrink: (shrink, node) => node.setFlexShrink(shrink),
+    height: (height, node) => node.setHeight(height),
+    width: (width, node) => node.setWidth(width),
+    maxHeight: (maxHeight, node) => node.setMaxHeight(maxHeight),
+    maxWidth: (maxWidth, node) => node.setMaxWidth(maxWidth),
+    minHeight: (minHeight, node) => node.setMinHeight(minHeight),
+    minWidth: (minWidth, node) => node.setMinWidth(minWidth),
+    /** As of now, this won't work since the bounding box is still computed by nodes marked as absolutely positioned  */
+    // position: (positionType: keyof typeof PositionType, node: Node) => node.setPositionType(Yoga.PositionType[positionType]),
+    top: (top, node) => node.setPosition(Yoga.Edge.Top, top),
+    right: (right, node) => node.setPosition(Yoga.Edge.Right, right),
+    bottom: (bottom, node) => node.setPosition(Yoga.Edge.Bottom, bottom),
+    left: (left, node) => node.setPosition(Yoga.Edge.Left, left),
+    padding: (padding, node) => node.setPadding(Yoga.Edge.All, padding),
+    paddingTop: (paddingTop, node) => node.setPadding(Yoga.Edge.Top, paddingTop),
+    paddingRight: (paddingRight, node) => node.setPadding(Yoga.Edge.Right, paddingRight),
+    paddingBottom: (paddingBottom, node) => node.setPadding(Yoga.Edge.Bottom, paddingBottom),
+    paddingLeft: (paddingLeft, node) => node.setPadding(Yoga.Edge.Left, paddingLeft),
+    margin: (margin, node) => node.setMargin(Yoga.Edge.All, margin),
+    marginTop: (marginTop, node) => node.setMargin(Yoga.Edge.Top, marginTop),
+    marginRight: (marginRight, node) => node.setMargin(Yoga.Edge.Right, marginRight),
+    marginBottom: (marginBottom, node) => node.setMargin(Yoga.Edge.Bottom, marginBottom),
+    marginLeft: (marginLeft, node) => node.setMargin(Yoga.Edge.Left, marginLeft),
+    gap: (gap, node) => node.setGap(Yoga.Gutter.All, gap),
+    gapColumn: (gapColumn, node) => node.setGap(Yoga.Gutter.Column, gapColumn),
+    gapRow: (gapRow, node) => node.setGap(Yoga.Gutter.Row, gapRow),
+    aspectRatio: (aspectRatio, node) => node.setAspectRatio(aspectRatio),
+};
+/**
+ * Applies scale factor to props that are numbers. This is used to scale the
+ * props to the current scale factor of the root node because yoga-layout
+ * is made to work with integer values.
+ */
+const applyScaleFactor = (prop, scaleFactor) => {
+    if (typeof prop === 'number') {
+        return prop * scaleFactor;
+    }
+    return prop;
+};
+export const applyNodeProps = (node, props, scaleFactor) => {
+    return Object.entries(alignFlexProps(props)).forEach(([key, value]) => {
+        const scaledValue = applyScaleFactor(value, scaleFactor);
+        propSetter[key](scaledValue, node);
+    });
+};

package/dist/nodes/context.d.ts

@@ -0,0 +1,9 @@
+import type { Node } from 'yoga-layout';
+export type NodeContext = {
+    node: Node;
+    insertChild: (child: Node, order?: number) => void;
+    removeChild: (child: Node) => void;
+};
+export declare const nodeContextName = "__threlte-node";
+export declare const useNode: () => NodeContext;
+export declare const createNodeContext: (order?: number) => NodeContext;

package/dist/nodes/context.js

@@ -0,0 +1,31 @@
+import { getContext, onDestroy, setContext } from 'svelte';
+import { useFlex } from '../Flex/context';
+export const nodeContextName = '__threlte-node';
+export const useNode = () => {
+    return getContext(nodeContextName);
+};
+export const createNodeContext = (order) => {
+    const { yoga } = useFlex();
+    const node = yoga.Node.create();
+    const parentNodeContext = useNode();
+    parentNodeContext?.insertChild(node, order);
+    onDestroy(() => {
+        parentNodeContext?.removeChild(node);
+    });
+    const data = {
+        node,
+        insertChild(child, order) {
+            if (order !== undefined) {
+                data.node.insertChild(child, order);
+            }
+            else {
+                data.node.insertChild(child, data.node.getChildCount());
+            }
+        },
+        removeChild(child) {
+            data.node.removeChild(child);
+        }
+    };
+    setContext(nodeContextName, data);
+    return data;
+};

package/dist/parsers/createClassParser.d.ts

@@ -0,0 +1,8 @@
+import type { NodeProps } from '../lib/props';
+/**
+ * This function is a type helper for creating a class parser. A class parser is
+ * a function that takes a class name and returns a NodeProps object. This can
+ * be used to create Tailwind-like class names that resolve to yoga-layout
+ * props.
+ */
+export declare const createClassParser: (callback: (className: string) => NodeProps) => (className: string) => NodeProps;

package/dist/parsers/createClassParser.js

@@ -0,0 +1,9 @@
+/**
+ * This function is a type helper for creating a class parser. A class parser is
+ * a function that takes a class name and returns a NodeProps object. This can
+ * be used to create Tailwind-like class names that resolve to yoga-layout
+ * props.
+ */
+export const createClassParser = (callback) => {
+    return callback;
+};

package/dist/parsers/tailwindParser.d.ts

@@ -0,0 +1,2 @@
+import type { NodeProps } from '../lib/props';
+export declare const tailwindParser: (className: string) => NodeProps;

package/dist/parsers/tailwindParser.js

@@ -0,0 +1,266 @@
+import { createClassParser } from './createClassParser';
+export const tailwindParser = createClassParser((string) => {
+    const styles = {};
+    const classes = string.split(' ').map((className) => className.trim());
+    const parseNumericOrAutoOrPercentageValue = (value) => {
+        if (value === 'auto') {
+            return value;
+        }
+        else if (value.endsWith('%')) {
+            return value;
+        }
+        else if (value === 'full') {
+            return '100%';
+        }
+        else if (value.match(/^\d+\/\d+$/)) {
+            const [width, height] = value.split('/');
+            const percentage = Math.round((Number(width) / Number(height)) * 100);
+            return `${percentage}%`;
+        }
+        return Number(value);
+    };
+    const parseNumericOrPercentageValue = (value) => {
+        if (value.endsWith('%')) {
+            return value;
+        }
+        else if (value === 'full') {
+            return '100%';
+        }
+        else if (value.match(/^\d+\/\d+$/)) {
+            const [width, height] = value.split('/');
+            const percentage = Math.round((Number(width) / Number(height)) * 100);
+            return `${percentage}%`;
+        }
+        return Number(value);
+    };
+    classes.forEach((className) => {
+        // padding
+        if (className.startsWith('p-')) {
+            const [, value] = className.split('-');
+            styles.padding = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('px-')) {
+            const [, value] = className.split('-');
+            styles.paddingLeft = parseNumericOrPercentageValue(value);
+            styles.paddingRight = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('py-')) {
+            const [, value] = className.split('-');
+            styles.paddingTop = parseNumericOrPercentageValue(value);
+            styles.paddingBottom = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('pt-')) {
+            const [, value] = className.split('-');
+            styles.paddingTop = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('pr-')) {
+            const [, value] = className.split('-');
+            styles.paddingRight = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('pb-')) {
+            const [, value] = className.split('-');
+            styles.paddingBottom = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('pl-')) {
+            const [, value] = className.split('-');
+            styles.paddingLeft = parseNumericOrPercentageValue(value);
+        }
+        // margin
+        if (className.startsWith('m-')) {
+            const [, value] = className.split('-');
+            styles.margin = parseNumericOrAutoOrPercentageValue(value);
+        }
+        if (className.startsWith('mx-')) {
+            const [, value] = className.split('-');
+            styles.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+            styles.marginRight = parseNumericOrAutoOrPercentageValue(value);
+        }
+        if (className.startsWith('my-')) {
+            const [, value] = className.split('-');
+            styles.marginTop = parseNumericOrAutoOrPercentageValue(value);
+            styles.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+        }
+        if (className.startsWith('mt-')) {
+            const [, value] = className.split('-');
+            styles.marginTop = parseNumericOrAutoOrPercentageValue(value);
+        }
+        if (className.startsWith('mr-')) {
+            const [, value] = className.split('-');
+            styles.marginRight = parseNumericOrAutoOrPercentageValue(value);
+        }
+        if (className.startsWith('mb-')) {
+            const [, value] = className.split('-');
+            styles.marginBottom = parseNumericOrAutoOrPercentageValue(value);
+        }
+        if (className.startsWith('ml-')) {
+            const [, value] = className.split('-');
+            styles.marginLeft = parseNumericOrAutoOrPercentageValue(value);
+        }
+        // width
+        if (className.startsWith('w-')) {
+            const [, value] = className.split('-');
+            styles.width = parseNumericOrAutoOrPercentageValue(value);
+        }
+        // height
+        if (className.startsWith('h-')) {
+            const [, value] = className.split('-');
+            styles.height = parseNumericOrAutoOrPercentageValue(value);
+        }
+        // flex-basis
+        if (className.startsWith('basis-')) {
+            const [, value] = className.split('-');
+            styles.flexBasis = parseNumericOrAutoOrPercentageValue(value);
+        }
+        // flex-grow
+        if (className.startsWith('grow-')) {
+            const [, value] = className.split('-');
+            styles.flexGrow = Number(value);
+        }
+        // flex-shrink
+        if (className.startsWith('shrink-')) {
+            const [, value] = className.split('-');
+            styles.flexShrink = Number(value);
+        }
+        // flex-direction
+        if (className.startsWith('flex-')) {
+            // first the flex direction
+            switch (className) {
+                case 'flex-row':
+                    styles.flexDirection = 'Row';
+                case 'flex-row-reverse':
+                    styles.flexDirection = 'RowReverse';
+                case 'flex-col':
+                    styles.flexDirection = 'Column';
+                case 'flex-col-reverse':
+                    styles.flexDirection = 'ColumnReverse';
+                // flex-wrap
+                case 'flex-wrap':
+                    styles.flexWrap = 'Wrap';
+                case 'flex-wrap-reverse':
+                    styles.flexWrap = 'WrapReverse';
+                case 'flex-nowrap':
+                    styles.flexWrap = 'NoWrap';
+                default:
+                    // flex shorthand
+                    const [, value] = className.split('-');
+                    styles.flex = Number(value);
+            }
+        }
+        // justify-content
+        if (className.startsWith('justify-')) {
+            switch (className) {
+                case 'justify-start':
+                    styles.justifyContent = 'FlexStart';
+                case 'justify-end':
+                    styles.justifyContent = 'FlexEnd';
+                case 'justify-center':
+                    styles.justifyContent = 'Center';
+                case 'justify-between':
+                    styles.justifyContent = 'SpaceBetween';
+                case 'justify-around':
+                    styles.justifyContent = 'SpaceAround';
+                case 'justify-evenly':
+                    styles.justifyContent = 'SpaceEvenly';
+            }
+        }
+        // align-items
+        if (className.startsWith('items-')) {
+            switch (className) {
+                case 'items-start':
+                    styles.alignItems = 'FlexStart';
+                case 'items-end':
+                    styles.alignItems = 'FlexEnd';
+                case 'items-center':
+                    styles.alignItems = 'Center';
+                case 'items-baseline':
+                    styles.alignItems = 'Baseline';
+                case 'items-stretch':
+                    styles.alignItems = 'Stretch';
+            }
+        }
+        // align-content
+        if (className.startsWith('content-')) {
+            switch (className) {
+                case 'content-normal':
+                    styles.alignContent = 'Auto';
+                case 'content-start':
+                    styles.alignContent = 'FlexStart';
+                case 'content-end':
+                    styles.alignContent = 'FlexEnd';
+                case 'content-center':
+                    styles.alignContent = 'Center';
+                case 'content-between':
+                    styles.alignContent = 'SpaceBetween';
+                case 'content-around':
+                    styles.alignContent = 'SpaceAround';
+                case 'content-stretch':
+                    styles.alignContent = 'Stretch';
+                case 'content-baseline':
+                    styles.alignContent = 'Baseline';
+            }
+        }
+        // align-self
+        if (className.startsWith('self-')) {
+            switch (className) {
+                case 'self-auto':
+                    styles.alignSelf = 'Auto';
+                case 'self-start':
+                    styles.alignSelf = 'FlexStart';
+                case 'self-end':
+                    styles.alignSelf = 'FlexEnd';
+                case 'self-center':
+                    styles.alignSelf = 'Center';
+                case 'self-stretch':
+                    styles.alignSelf = 'Stretch';
+                case 'self-baseline':
+                    styles.alignSelf = 'Baseline';
+            }
+        }
+        // Gaps
+        if (className.startsWith('gap-x-')) {
+            const [, value] = className.split('-');
+            styles.gapColumn = Number(value);
+        }
+        else if (className.startsWith('gap-y-')) {
+            const [, value] = className.split('-');
+            styles.gapRow = Number(value);
+        }
+        else if (className.startsWith('gap-')) {
+            const [, value] = className.split('-');
+            styles.gap = Number(value);
+        }
+        // Position
+        if (className.startsWith('top-')) {
+            const [, value] = className.split('-');
+            styles.top = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('right-')) {
+            const [, value] = className.split('-');
+            styles.right = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('bottom-')) {
+            const [, value] = className.split('-');
+            styles.bottom = parseNumericOrPercentageValue(value);
+        }
+        if (className.startsWith('left-')) {
+            const [, value] = className.split('-');
+            styles.left = parseNumericOrPercentageValue(value);
+        }
+        // aspect ratio
+        if (className.startsWith('aspect-')) {
+            switch (className) {
+                case 'aspect-square':
+                    styles.aspectRatio = 1;
+                case 'aspect-landscape':
+                    styles.aspectRatio = 16 / 9;
+                case 'aspect-portrait':
+                    styles.aspectRatio = 9 / 16;
+                default:
+                    const [, value] = className.split('-');
+                    const [width, height] = value.split('/');
+                    styles.aspectRatio = Number(width) / Number(height);
+            }
+        }
+    });
+    return styles;
+});

package/dist/stores/yoga.d.ts

@@ -0,0 +1 @@
+export declare const yoga: import("@threlte/core").CurrentWritable<any>;

package/dist/stores/yoga.js

@@ -0,0 +1,12 @@
+import { currentWritable } from '@threlte/core';
+import { loadYoga } from 'yoga-layout';
+let loading = false;
+let loaded = false;
+export const yoga = currentWritable(undefined);
+const load = async () => {
+    if (loading || loaded)
+        return;
+    const yogaInstance = await loadYoga();
+    yoga.set(yogaInstance);
+};
+load();

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@threlte/flex",
+  "version": "0.0.2",
+  "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/package": "^2.1.0",
+    "@types/node": "^18.0.3",
+    "@types/three": "^0.155.1",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "@yushijinhun/three-minifier-rollup": "^0.3.1",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.1",
+    "publint": "^0.1.12",
+    "rimraf": "^5.0.1",
+    "svelte": "^4.1.1",
+    "svelte-check": "^3.4.3",
+    "svelte-preprocess": "^5.0.4",
+    "svelte2tsx": "^0.6.19",
+    "three": "^0.155.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.6",
+    "@threlte/core": "6.0.8",
+    "@threlte/extras": "5.6.4"
+  },
+  "dependencies": {
+    "mitt": "^3.0.1",
+    "yoga-layout": "^2.0.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=4",
+    "three": ">=0.133"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "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=. .",
+    "cleanup": "rimraf node_modules .svelte-kit dist"
+  }
+}