@revideo/2d 0.4.6 → 0.4.7-alpha.1022

package/editor/index.js

@@ -1,11 +1,11 @@
-import './index.css';
 import { useApplication, useCurrentScene, Pane, Separator, Group, Label, Button, findAndOpenFirstUserFile, UnknownField, AutoField, useViewportContext, useViewportMatrix, OverlayWrapper, MouseButton, Toggle, Collapse, usePanels, useReducedMotion, emphasize, Tab, AccountTree, makeEditorPlugin } from '@revideo/ui';
-import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { signal, computed, useSignalEffect, useComputed, useSignal } from '@preact/signals';
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { SceneRenderEvent, Vector2 } from '@revideo/core';
 import { createContext } from 'preact';
 import { useMemo, useContext, useRef, useEffect } from 'preact/hooks';
 import { NODE_NAME } from '@revideo/2d';
+import './index.css';
 
 const PluginContext = createContext(null);
 const NodeInspectorKey = '@revideo/2d/node-inspector';
@@ -69,32 +69,73 @@ function Provider({ children }) {
 }
 
 function Component$1() {
-    const { inspection } = useApplication();
-    const { scene, afterRender } = usePluginState();
-    const node = useComputed(() => {
-        afterRender.value;
-        const { payload } = inspection.value;
-        return scene.value?.getNode(payload);
-    });
-    const attributes = useComputed(() => {
-        afterRender.value;
-        const currentNode = node.value;
-        const attributes = [];
-        if (currentNode) {
-            for (const { key, meta, signal } of currentNode) {
-                if (!meta.inspectable)
-                    continue;
-                attributes.push([key, signal()]);
-            }
-        }
-        return attributes;
-    });
-    const stack = node.value?.creationStack;
-    return (jsxs(Pane, { title: "Node Inspector", id: "node-inspector-pane", children: [jsx(Separator, { size: 1 }), stack && (jsxs(Group, { children: [jsx(Label, {}), jsx(Button, { onClick: () => findAndOpenFirstUserFile(stack), main: true, children: "GO TO SOURCE" })] })), jsxs(Group, { children: [jsx(Label, { children: "key" }), jsx(UnknownField, { value: inspection.value.payload })] }), !node.value && (jsxs(Group, { children: [jsx(Label, {}), "Couldn't find the node. It may have been deleted or doesn't exist yet."] })), attributes.value.map(([key, value]) => (jsxs(Group, { children: [jsx(Label, { children: key }), jsx(AutoField, { value: value })] }, key)))] }));
+  const {inspection} = useApplication();
+  const {scene, afterRender} = usePluginState();
+  const node = useComputed(() => {
+    afterRender.value;
+    const {payload} = inspection.value;
+    return scene.value?.getNode(payload);
+  });
+  const attributes = useComputed(() => {
+    afterRender.value;
+    const currentNode = node.value;
+    const attributes = [];
+    if (currentNode) {
+      for (const {key, meta, signal} of currentNode) {
+        if (!meta.inspectable) continue;
+        attributes.push([key, signal()]);
+      }
+    }
+    return attributes;
+  });
+  const stack = node.value?.creationStack;
+  return jsxs(Pane, {
+    title: 'Node Inspector',
+    id: 'node-inspector-pane',
+    children: [
+      jsx(Separator, {size: 1}),
+      stack &&
+        jsxs(Group, {
+          children: [
+            jsx(Label, {}),
+            jsx(Button, {
+              onClick: () => findAndOpenFirstUserFile(stack),
+              main: true,
+              children: 'GO TO SOURCE',
+            }),
+          ],
+        }),
+      jsxs(Group, {
+        children: [
+          jsx(Label, {children: 'key'}),
+          jsx(UnknownField, {value: inspection.value.payload}),
+        ],
+      }),
+      !node.value &&
+        jsxs(Group, {
+          children: [
+            jsx(Label, {}),
+            "Couldn't find the node. It may have been deleted or doesn't exist yet.",
+          ],
+        }),
+      attributes.value.map(([key, value]) =>
+        jsxs(
+          Group,
+          {
+            children: [
+              jsx(Label, {children: key}),
+              jsx(AutoField, {value: value}),
+            ],
+          },
+          key,
+        ),
+      ),
+    ],
+  });
 }
 const NodeInspectorConfig = {
-    key: NodeInspectorKey,
-    component: Component$1,
+  key: NodeInspectorKey,
+  component: Component$1,
 };
 
 function Component({ children }) {
@@ -137,78 +178,184 @@ const PreviewOverlayConfig = {
 };
 
 function CircleIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M10,5C12.76,5 15,7.24 15,10C15,12.76 12.76,15 10,15C7.24,15 5,12.76 5,10C5,7.24 7.24,5 10,5ZM10,7C8.344,7 7,8.344 7,10C7,11.656 8.344,13 10,13C11.656,13 13,11.656 13,10C13,8.344 11.656,7 10,7Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M10,5C12.76,5 15,7.24 15,10C15,12.76 12.76,15 10,15C7.24,15 5,12.76 5,10C5,7.24 7.24,5 10,5ZM10,7C8.344,7 7,8.344 7,10C7,11.656 8.344,13 10,13C11.656,13 13,11.656 13,10C13,8.344 11.656,7 10,7Z',
+    }),
+  });
 }
 
 function CodeBlockIcon() {
-    return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M5,9L5,6.999C5,6.469 5.211,5.96 5.585,5.586C5.96,5.211 6.469,5 6.999,5L9,5L9,7L6.999,7L7,9L7,11L7,13L8.985,13L9,15L7,15C5.895,15 5,14.105 5,13L5,11L4,11L4,9L5,9Z" }), jsx("path", { d: "M15,11L15,13.001C15,13.531 14.789,14.04 14.415,14.414C14.04,14.789 13.531,15 13.001,15L11,15L11,13L13,13L13,11L13,9L13,7L11.015,7L11,5L13,5C14.105,5 15,5.895 15,7L15,9L16,9L16,11L15,11Z" })] }));
+  return jsxs('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: [
+      jsx('path', {
+        d: 'M5,9L5,6.999C5,6.469 5.211,5.96 5.585,5.586C5.96,5.211 6.469,5 6.999,5L9,5L9,7L6.999,7L7,9L7,11L7,13L8.985,13L9,15L7,15C5.895,15 5,14.105 5,13L5,11L4,11L4,9L5,9Z',
+      }),
+      jsx('path', {
+        d: 'M15,11L15,13.001C15,13.531 14.789,14.04 14.415,14.414C14.04,14.789 13.531,15 13.001,15L11,15L11,13L13,13L13,11L13,9L13,7L11.015,7L11,5L13,5C14.105,5 15,5.895 15,7L15,9L16,9L16,11L15,11Z',
+      }),
+    ],
+  });
 }
 
 function CurveIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M12.19,6.47L13.595,5.047C15.519,6.947 15.187,8.932 14.229,9.951C13.675,10.541 12.879,10.861 12.016,10.767C11.261,10.685 10.426,10.278 9.708,9.348C9.292,8.809 8.878,8.441 8.471,8.249C8.217,8.13 7.979,8.084 7.77,8.154C7.565,8.222 7.409,8.394 7.287,8.621C7.097,8.975 7.001,9.444 7,10.003C6.996,11.584 7.848,12.746 8.91,12.946C9.535,13.064 10.185,12.783 10.687,12.082L12.313,13.247C11,15.079 9.118,15.344 7.581,14.591C6.161,13.896 4.994,12.246 5,9.997C5.005,7.945 5.963,6.649 7.136,6.257C8.281,5.874 9.866,6.278 11.292,8.126C11.81,8.799 12.421,8.954 12.772,8.581C13.196,8.13 13.042,7.312 12.19,6.47Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M12.19,6.47L13.595,5.047C15.519,6.947 15.187,8.932 14.229,9.951C13.675,10.541 12.879,10.861 12.016,10.767C11.261,10.685 10.426,10.278 9.708,9.348C9.292,8.809 8.878,8.441 8.471,8.249C8.217,8.13 7.979,8.084 7.77,8.154C7.565,8.222 7.409,8.394 7.287,8.621C7.097,8.975 7.001,9.444 7,10.003C6.996,11.584 7.848,12.746 8.91,12.946C9.535,13.064 10.185,12.783 10.687,12.082L12.313,13.247C11,15.079 9.118,15.344 7.581,14.591C6.161,13.896 4.994,12.246 5,9.997C5.005,7.945 5.963,6.649 7.136,6.257C8.281,5.874 9.866,6.278 11.292,8.126C11.81,8.799 12.421,8.954 12.772,8.581C13.196,8.13 13.042,7.312 12.19,6.47Z',
+    }),
+  });
 }
 
 function GridIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M6,8L4,8L4,6L6,6L6,4L8,4L8,6L12,6L12,4L14,4L14,6L16,6L16,8L14,8L14,12L16,12L16,14L14,14L14,16L12,16L12,14L8,14L8,16L6,16L6,14L4,14L4,12L6,12L6,8ZM8,12L12,12L12,8L8,8L8,12Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M6,8L4,8L4,6L6,6L6,4L8,4L8,6L12,6L12,4L14,4L14,6L16,6L16,8L14,8L14,12L16,12L16,14L14,14L14,16L12,16L12,14L8,14L8,16L6,16L6,14L4,14L4,12L6,12L6,8ZM8,12L12,12L12,8L8,8L8,12Z',
+    }),
+  });
 }
 
 function ImgIcon() {
-    return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M5,15L15,15L15,10L13,8L8,13L5,10L5,15Z" }), jsx("circle", { cx: "8", cy: "7", r: "2" })] }));
+  return jsxs('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: [
+      jsx('path', {d: 'M5,15L15,15L15,10L13,8L8,13L5,10L5,15Z'}),
+      jsx('circle', {cx: '8', cy: '7', r: '2'}),
+    ],
+  });
 }
 
 function LayoutIcon() {
-    return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M14,5C14.552,5 15,5.448 15,6C15,7.916 15,12.084 15,14C15,14.552 14.552,15 14,15C12.815,15 11,15 11,15L11,5L14,5Z" }), jsx("path", { d: "M9,5L9,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" }), jsx("path", { d: "M9,11L9,15L6,15C5.448,15 5,14.552 5,14L5,11L9,11Z" })] }));
+  return jsxs('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: [
+      jsx('path', {
+        d: 'M14,5C14.552,5 15,5.448 15,6C15,7.916 15,12.084 15,14C15,14.552 14.552,15 14,15C12.815,15 11,15 11,15L11,5L14,5Z',
+      }),
+      jsx('path', {d: 'M9,5L9,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z'}),
+      jsx('path', {d: 'M9,11L9,15L6,15C5.448,15 5,14.552 5,14L5,11L9,11Z'}),
+    ],
+  });
 }
 
 function LineIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M9.906,4.589L11.411,5.906L8.529,9.2L13.859,8.439C14.273,8.379 14.68,8.584 14.879,8.952C15.078,9.319 15.028,9.772 14.753,10.087L10.094,15.411L8.589,14.094L11.471,10.8L6.141,11.561C5.727,11.621 5.32,11.416 5.121,11.048C4.922,10.681 4.972,10.228 5.247,9.913L9.906,4.589Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M9.906,4.589L11.411,5.906L8.529,9.2L13.859,8.439C14.273,8.379 14.68,8.584 14.879,8.952C15.078,9.319 15.028,9.772 14.753,10.087L10.094,15.411L8.589,14.094L11.471,10.8L6.141,11.561C5.727,11.621 5.32,11.416 5.121,11.048C4.922,10.681 4.972,10.228 5.247,9.913L9.906,4.589Z',
+    }),
+  });
 }
 
 function NodeIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M7,9L5,9L5,7L7,7L7,5L9,5L9,7L12,7L12,5L15,8L12,11L12,9L9,9L9,12L11,12L8,15L5,12L7,12L7,9Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M7,9L5,9L5,7L7,7L7,5L9,5L9,7L12,7L12,5L15,8L12,11L12,9L9,9L9,12L11,12L8,15L5,12L7,12L7,9Z',
+    }),
+  });
 }
 
 function RayIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M12,9.414L6.707,14.707L5.293,13.293L10.586,8L8,8L8,6L13,6C13.552,6 14,6.448 14,7L14,12L12,12L12,9.414Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M12,9.414L6.707,14.707L5.293,13.293L10.586,8L8,8L8,6L13,6C13.552,6 14,6.448 14,7L14,12L12,12L12,9.414Z',
+    }),
+  });
 }
 
 function RectIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M15,6L15,14C15,14.552 14.552,15 14,15L6,15C5.448,15 5,14.552 5,14L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6ZM13,7L7,7L7,13L13,13L13,7Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M15,6L15,14C15,14.552 14.552,15 14,15L6,15C5.448,15 5,14.552 5,14L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6ZM13,7L7,7L7,13L13,13L13,7Z',
+    }),
+  });
 }
 
 function ShapeIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M11.746,10.93C12.637,12.664 11.973,14.504 10.611,15.244C9.692,15.743 8.385,15.804 6.94,14.829C5.555,13.893 4.689,12.16 4.544,10.388C4.395,8.572 5,6.752 6.399,5.701C8.069,4.445 10.793,4.271 12.765,4.921C14.324,5.436 15.374,6.473 15.495,7.691C15.651,9.262 14.613,10.061 13.26,10.5C12.847,10.634 12.41,10.735 12.02,10.841C11.936,10.864 11.838,10.897 11.746,10.93ZM7.601,7.299C6.737,7.949 6.445,9.103 6.537,10.224C6.633,11.389 7.149,12.556 8.06,13.171C8.696,13.601 9.251,13.706 9.656,13.486C10.207,13.187 10.315,12.395 9.886,11.701C9.48,11.044 9.513,10.523 9.68,10.122C9.835,9.75 10.164,9.417 10.678,9.187C11.243,8.935 12.157,8.8 12.908,8.503C13.216,8.381 13.542,8.264 13.505,7.888C13.485,7.691 13.359,7.53 13.197,7.384C12.928,7.143 12.558,6.959 12.138,6.821C10.736,6.358 8.789,6.406 7.601,7.299Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M11.746,10.93C12.637,12.664 11.973,14.504 10.611,15.244C9.692,15.743 8.385,15.804 6.94,14.829C5.555,13.893 4.689,12.16 4.544,10.388C4.395,8.572 5,6.752 6.399,5.701C8.069,4.445 10.793,4.271 12.765,4.921C14.324,5.436 15.374,6.473 15.495,7.691C15.651,9.262 14.613,10.061 13.26,10.5C12.847,10.634 12.41,10.735 12.02,10.841C11.936,10.864 11.838,10.897 11.746,10.93ZM7.601,7.299C6.737,7.949 6.445,9.103 6.537,10.224C6.633,11.389 7.149,12.556 8.06,13.171C8.696,13.601 9.251,13.706 9.656,13.486C10.207,13.187 10.315,12.395 9.886,11.701C9.48,11.044 9.513,10.523 9.68,10.122C9.835,9.75 10.164,9.417 10.678,9.187C11.243,8.935 12.157,8.8 12.908,8.503C13.216,8.381 13.542,8.264 13.505,7.888C13.485,7.691 13.359,7.53 13.197,7.384C12.928,7.143 12.558,6.959 12.138,6.821C10.736,6.358 8.789,6.406 7.601,7.299Z',
+    }),
+  });
 }
 
 function TxtIcon() {
-    return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M9,13L9,6L11,6L11,13L12,13L12,15L8,15L8,13L9,13Z" }), jsx("path", { d: "M7,8L5,8L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6L15,8L13,8L13,7L7,7L7,8Z" })] }));
+  return jsxs('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: [
+      jsx('path', {d: 'M9,13L9,6L11,6L11,13L12,13L12,15L8,15L8,13L9,13Z'}),
+      jsx('path', {
+        d: 'M7,8L5,8L5,6C5,5.448 5.448,5 6,5L14,5C14.552,5 15,5.448 15,6L15,8L13,8L13,7L7,7L7,8Z',
+      }),
+    ],
+  });
 }
 
 function VideoIcon() {
-    return (jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { d: "M14,10.866L7.25,14.763C6.941,14.942 6.559,14.942 6.25,14.763C5.941,14.585 5.75,14.254 5.75,13.897L5.75,6.103C5.75,5.746 5.941,5.415 6.25,5.237C6.559,5.058 6.941,5.058 7.25,5.237L14,9.134C14.309,9.313 14.5,9.643 14.5,10C14.5,10.357 14.309,10.687 14,10.866ZM11.5,10L7.75,7.835L7.75,12.165L11.5,10Z" }) }));
+  return jsx('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: jsx('path', {
+      d: 'M14,10.866L7.25,14.763C6.941,14.942 6.559,14.942 6.25,14.763C5.941,14.585 5.75,14.254 5.75,13.897L5.75,6.103C5.75,5.746 5.941,5.415 6.25,5.237C6.559,5.058 6.941,5.058 7.25,5.237L14,9.134C14.309,9.313 14.5,9.643 14.5,10C14.5,10.357 14.309,10.687 14,10.866ZM11.5,10L7.75,7.835L7.75,12.165L11.5,10Z',
+    }),
+  });
 }
 
 function View2DIcon() {
-    return (jsxs("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: [jsx("path", { d: "M9,5L9,7L7,7L7,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" }), jsx("path", { d: "M5,11L7,11L7,13L9,13L9,15L6,15C5.448,15 5,14.552 5,14L5,11Z" }), jsx("path", { d: "M11,15L11,13L13,13L13,11L15,11L15,14C15,14.552 14.552,15 14,15L11,15Z" }), jsx("path", { d: "M15,9L13,9L13,7L11,7L11,5L14,5C14.552,5 15,5.448 15,6L15,9Z" })] }));
+  return jsxs('svg', {
+    viewBox: '0 0 20 20',
+    fill: 'currentColor',
+    children: [
+      jsx('path', {d: 'M9,5L9,7L7,7L7,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z'}),
+      jsx('path', {
+        d: 'M5,11L7,11L7,13L9,13L9,15L6,15C5.448,15 5,14.552 5,14L5,11Z',
+      }),
+      jsx('path', {
+        d: 'M11,15L11,13L13,13L13,11L15,11L15,14C15,14.552 14.552,15 14,15L11,15Z',
+      }),
+      jsx('path', {
+        d: 'M15,9L13,9L13,7L11,7L11,5L14,5C14.552,5 15,5.448 15,6L15,9Z',
+      }),
+    ],
+  });
 }
 
 /* eslint-disable @typescript-eslint/naming-convention */
 const IconMap = {
-    Circle: CircleIcon,
-    CodeBlock: CodeBlockIcon,
-    Curve: CurveIcon,
-    Grid: GridIcon,
-    Img: ImgIcon,
-    Layout: LayoutIcon,
-    Line: LineIcon,
-    Node: NodeIcon,
-    Ray: RayIcon,
-    Rect: RectIcon,
-    Shape: ShapeIcon,
-    Txt: TxtIcon,
-    TxtLeaf: TxtIcon,
-    Video: VideoIcon,
-    View2D: View2DIcon,
+  Circle: CircleIcon,
+  CodeBlock: CodeBlockIcon,
+  Curve: CurveIcon,
+  Grid: GridIcon,
+  Img: ImgIcon,
+  Layout: LayoutIcon,
+  Line: LineIcon,
+  Node: NodeIcon,
+  Ray: RayIcon,
+  Rect: RectIcon,
+  Shape: ShapeIcon,
+  Txt: TxtIcon,
+  TxtLeaf: TxtIcon,
+  Video: VideoIcon,
+  View2D: View2DIcon,
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -216,124 +363,206 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
 var styles = {"root":"index-module_root__omEd0","label":"index-module_label__9BJvW","active":"index-module_active__KevXv","parent":"index-module_parent__5nc9I"};
 
 const DEPTH_VAR = '--depth';
-function TreeElement({ label, children, selected, depth = 0, open, icon, forwardRef, ...props }) {
-    const hasChildren = !!children;
-    return (jsxs(Fragment, { children: [jsxs("div", { ref: forwardRef, className: clsx(styles.label, selected && styles.active, hasChildren && styles.parent), onDblClick: () => {
-                    if (hasChildren) {
-                        open.value = !open.value;
-                    }
-                }, ...props, style: { [DEPTH_VAR]: `${depth}` }, children: [hasChildren && (jsx(Toggle, { animated: false, open: open.value, onToggle: value => {
-                            open.value = value;
-                        }, onDblClick: e => {
-                            e.stopPropagation();
-                        } })), icon, label] }), hasChildren && (jsx(Collapse, { open: open.value, animated: false, children: children }))] }));
+function TreeElement({
+  label,
+  children,
+  selected,
+  depth = 0,
+  open,
+  icon,
+  forwardRef,
+  ...props
+}) {
+  const hasChildren = !!children;
+  return jsxs(Fragment, {
+    children: [
+      jsxs('div', {
+        ref: forwardRef,
+        className: clsx(
+          styles.label,
+          selected && styles.active,
+          hasChildren && styles.parent,
+        ),
+        onDblClick: () => {
+          if (hasChildren) {
+            open.value = !open.value;
+          }
+        },
+        ...props,
+        style: {[DEPTH_VAR]: `${depth}`},
+        children: [
+          hasChildren &&
+            jsx(Toggle, {
+              animated: false,
+              open: open.value,
+              onToggle: value => {
+                open.value = value;
+              },
+              onDblClick: e => {
+                e.stopPropagation();
+              },
+            }),
+          icon,
+          label,
+        ],
+      }),
+      hasChildren &&
+        jsx(Collapse, {open: open.value, animated: false, children: children}),
+    ],
+  });
 }
 
-function NodeElement({ node, depth = 0 }) {
-    const { selectedKey, hoveredKey, openNodes, selectedChain, afterRender } = usePluginState();
-    const ref = useRef(null);
-    const open = useSignal(selectedChain.peek().has(node.key) || (openNodes.get(node.key) ?? false));
-    const nodeSignal = useSignal(node);
-    nodeSignal.value = node;
-    const children = useComputed(() => {
-        afterRender.value;
-        return nodeSignal.value.peekChildren();
-    });
-    useSignalEffect(() => {
-        open.value = openNodes.get(nodeSignal.value.key) ?? false;
-    });
-    useSignalEffect(() => {
-        const chain = selectedChain.value;
-        if (chain.has(nodeSignal.value.key)) {
-            open.value = true;
-        }
-    });
-    useSignalEffect(() => {
-        openNodes.set(nodeSignal.value.key, open.value);
-    });
-    useSignalEffect(() => {
-        const key = selectedKey.value;
-        if (node.key === key) {
-            ref.current?.scrollIntoView({ block: 'nearest', behavior: 'instant' });
-        }
-    });
-    const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
-    return (jsx(TreeElement, { forwardRef: ref, open: open, depth: depth, icon: jsx(Icon, {}), label: node.key, selected: selectedKey.value === node.key, onClick: event => {
-            selectedKey.value = node.key;
-            event.stopPropagation();
-        }, onPointerEnter: () => (hoveredKey.value = node.key), onPointerLeave: () => (hoveredKey.value = null), children: children.value.length > 0 &&
-            children.value.map(child => (jsx(NodeElement, { node: child, depth: depth + 1 }))) }));
+function NodeElement({node, depth = 0}) {
+  const {selectedKey, hoveredKey, openNodes, selectedChain, afterRender} =
+    usePluginState();
+  const ref = useRef(null);
+  const open = useSignal(
+    selectedChain.peek().has(node.key) || (openNodes.get(node.key) ?? false),
+  );
+  const nodeSignal = useSignal(node);
+  nodeSignal.value = node;
+  const children = useComputed(() => {
+    afterRender.value;
+    return nodeSignal.value.peekChildren();
+  });
+  useSignalEffect(() => {
+    open.value = openNodes.get(nodeSignal.value.key) ?? false;
+  });
+  useSignalEffect(() => {
+    const chain = selectedChain.value;
+    if (chain.has(nodeSignal.value.key)) {
+      open.value = true;
+    }
+  });
+  useSignalEffect(() => {
+    openNodes.set(nodeSignal.value.key, open.value);
+  });
+  useSignalEffect(() => {
+    const key = selectedKey.value;
+    if (node.key === key) {
+      ref.current?.scrollIntoView({block: 'nearest', behavior: 'instant'});
+    }
+  });
+  const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
+  return jsx(TreeElement, {
+    forwardRef: ref,
+    open: open,
+    depth: depth,
+    icon: jsx(Icon, {}),
+    label: node.key,
+    selected: selectedKey.value === node.key,
+    onClick: event => {
+      selectedKey.value = node.key;
+      event.stopPropagation();
+    },
+    onPointerEnter: () => (hoveredKey.value = node.key),
+    onPointerLeave: () => (hoveredKey.value = null),
+    children:
+      children.value.length > 0 &&
+      children.value.map(child =>
+        jsx(NodeElement, {node: child, depth: depth + 1}),
+      ),
+  });
 }
 
-function TreeRoot({ className, ...props }) {
-    return jsx("div", { className: clsx(styles.root, className), ...props });
+function TreeRoot({className, ...props}) {
+  return jsx('div', {className: clsx(styles.root, className), ...props});
 }
 
 function DetachedRoot() {
-    const { afterRender, scene } = usePluginState();
-    const open = useSignal(false);
-    const currentScene = scene.value;
-    const children = currentScene ? [...currentScene.getDetachedNodes()] : [];
-    afterRender.value;
-    return children.length > 0 ? (jsx(TreeRoot, { children: jsx(TreeElement, { open: open, label: "Detached nodes", children: children.map(child => (jsx(NodeElement, { node: child, depth: 1 }))) }) })) : null;
+  const {afterRender, scene} = usePluginState();
+  const open = useSignal(false);
+  const currentScene = scene.value;
+  const children = currentScene ? [...currentScene.getDetachedNodes()] : [];
+  afterRender.value;
+  return children.length > 0
+    ? jsx(TreeRoot, {
+        children: jsx(TreeElement, {
+          open: open,
+          label: 'Detached nodes',
+          children: children.map(child =>
+            jsx(NodeElement, {node: child, depth: 1}),
+          ),
+        }),
+      })
+    : null;
 }
 
 function ViewRoot() {
-    const { scene } = usePluginState();
-    const view = useSignal(scene.value?.getView());
-    useSignalEffect(() => {
-        view.value = scene.value?.getView();
-        return scene.value?.onReset.subscribe(() => {
-            view.value = scene.value?.getView();
-        });
+  const {scene} = usePluginState();
+  const view = useSignal(scene.value?.getView());
+  useSignalEffect(() => {
+    view.value = scene.value?.getView();
+    return scene.value?.onReset.subscribe(() => {
+      view.value = scene.value?.getView();
     });
-    return view.value ? (jsx(TreeRoot, { children: jsx(NodeElement, { node: view.value }) })) : null;
+  });
+  return view.value
+    ? jsx(TreeRoot, {children: jsx(NodeElement, {node: view.value})})
+    : null;
 }
 
-function TabComponent({ tab }) {
-    const { sidebar } = usePanels();
-    const inspectorTab = useRef(null);
-    const reducedMotion = useReducedMotion();
-    const { selectedKey } = usePluginState();
-    const { logger } = useApplication();
-    useEffect(() => logger.onInspected.subscribe(key => {
+function TabComponent({tab}) {
+  const {sidebar} = usePanels();
+  const inspectorTab = useRef(null);
+  const reducedMotion = useReducedMotion();
+  const {selectedKey} = usePluginState();
+  const {logger} = useApplication();
+  useEffect(
+    () =>
+      logger.onInspected.subscribe(key => {
         sidebar.set(tab);
         selectedKey.value = key;
-    }), [tab]);
-    useSignalEffect(() => {
-        if (selectedKey.value &&
-            sidebar.current.peek() !== tab &&
-            !reducedMotion &&
-            inspectorTab.current &&
-            inspectorTab.current.getAnimations().length < 2) {
-            inspectorTab.current.animate(emphasize(), { duration: 400 });
-            inspectorTab.current.animate([{ color: 'white' }, { color: '' }], {
-                duration: 800,
-            });
-        }
-    });
-    return (jsx(Tab, { forwardRef: inspectorTab, title: "Scene Graph", id: "scene-graph-tab", tab: tab, children: jsx(AccountTree, {}) }));
+      }),
+    [tab],
+  );
+  useSignalEffect(() => {
+    if (
+      selectedKey.value &&
+      sidebar.current.peek() !== tab &&
+      !reducedMotion &&
+      inspectorTab.current &&
+      inspectorTab.current.getAnimations().length < 2
+    ) {
+      inspectorTab.current.animate(emphasize(), {duration: 400});
+      inspectorTab.current.animate([{color: 'white'}, {color: ''}], {
+        duration: 800,
+      });
+    }
+  });
+  return jsx(Tab, {
+    forwardRef: inspectorTab,
+    title: 'Scene Graph',
+    id: 'scene-graph-tab',
+    tab: tab,
+    children: jsx(AccountTree, {}),
+  });
 }
 function PaneComponent() {
-    const { selectedKey } = usePluginState();
-    return (jsxs(Pane, { title: "Scene Graph", id: "scene-graph-pane", onClick: () => {
-            selectedKey.value = null;
-        }, children: [jsx(ViewRoot, {}), jsx(DetachedRoot, {})] }));
+  const {selectedKey} = usePluginState();
+  return jsxs(Pane, {
+    title: 'Scene Graph',
+    id: 'scene-graph-pane',
+    onClick: () => {
+      selectedKey.value = null;
+    },
+    children: [jsx(ViewRoot, {}), jsx(DetachedRoot, {})],
+  });
 }
 const SceneGraphTabConfig = {
-    name: 'scene-graph',
-    tabComponent: TabComponent,
-    paneComponent: PaneComponent,
+  name: 'scene-graph',
+  tabComponent: TabComponent,
+  paneComponent: PaneComponent,
 };
 
 var index = makeEditorPlugin(() => {
-    return {
-        name: '@revideo/2d',
-        provider: Provider,
-        previewOverlay: PreviewOverlayConfig,
-        tabs: [SceneGraphTabConfig],
-        inspectors: [NodeInspectorConfig],
-    };
+  return {
+    name: '@revideo/2d',
+    provider: Provider,
+    previewOverlay: PreviewOverlayConfig,
+    tabs: [SceneGraphTabConfig],
+    inspectors: [NodeInspectorConfig],
+  };
 });
 
 export { index as default };