@twick/2d 0.13.0 → 0.14.2

package/src/editor/icons/CurveIcon.tsx

@@ -1,7 +1,7 @@
-export function CurveIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function CurveIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/GridIcon.tsx

@@ -1,7 +1,7 @@
-export function GridIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function GridIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/IconMap.ts

@@ -1,35 +1,35 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-
-import type {FunctionComponent} from 'preact';
-import {CircleIcon} from './CircleIcon';
-import {CodeBlockIcon} from './CodeBlockIcon';
-import {CurveIcon} from './CurveIcon';
-import {GridIcon} from './GridIcon';
-import {ImgIcon} from './ImgIcon';
-import {LayoutIcon} from './LayoutIcon';
-import {LineIcon} from './LineIcon';
-import {NodeIcon} from './NodeIcon';
-import {RayIcon} from './RayIcon';
-import {RectIcon} from './RectIcon';
-import {ShapeIcon} from './ShapeIcon';
-import {TxtIcon} from './TxtIcon';
-import {VideoIcon} from './VideoIcon';
-import {View2DIcon} from './View2DIcon';
-
-export const IconMap: Record<string, FunctionComponent> = {
-  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,
-};
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import type {FunctionComponent} from 'preact';
+import {CircleIcon} from './CircleIcon';
+import {CodeBlockIcon} from './CodeBlockIcon';
+import {CurveIcon} from './CurveIcon';
+import {GridIcon} from './GridIcon';
+import {ImgIcon} from './ImgIcon';
+import {LayoutIcon} from './LayoutIcon';
+import {LineIcon} from './LineIcon';
+import {NodeIcon} from './NodeIcon';
+import {RayIcon} from './RayIcon';
+import {RectIcon} from './RectIcon';
+import {ShapeIcon} from './ShapeIcon';
+import {TxtIcon} from './TxtIcon';
+import {VideoIcon} from './VideoIcon';
+import {View2DIcon} from './View2DIcon';
+
+export const IconMap: Record<string, FunctionComponent> = {
+  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,
+};

package/src/editor/icons/ImgIcon.tsx

@@ -1,8 +1,8 @@
-export function ImgIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <path d="M5,15L15,15L15,10L13,8L8,13L5,10L5,15Z" />
-      <circle cx="8" cy="7" r="2" />
-    </svg>
-  );
-}
+export function ImgIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <path d="M5,15L15,15L15,10L13,8L8,13L5,10L5,15Z" />
+      <circle cx="8" cy="7" r="2" />
+    </svg>
+  );
+}

package/src/editor/icons/LayoutIcon.tsx

@@ -1,9 +1,9 @@
-export function LayoutIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-      <path d="M9,5L9,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" />
-      <path d="M9,11L9,15L6,15C5.448,15 5,14.552 5,14L5,11L9,11Z" />
-    </svg>
-  );
-}
+export function LayoutIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+      <path d="M9,5L9,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" />
+      <path d="M9,11L9,15L6,15C5.448,15 5,14.552 5,14L5,11L9,11Z" />
+    </svg>
+  );
+}

package/src/editor/icons/LineIcon.tsx

@@ -1,7 +1,7 @@
-export function LineIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function LineIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/NodeIcon.tsx

@@ -1,7 +1,7 @@
-export function NodeIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <path d="M7,9L5,9L5,7L7,7L7,5L9,5L9,7L12,7L12,5L15,8L12,11L12,9L9,9L9,12L11,12L8,15L5,12L7,12L7,9Z" />
-    </svg>
-  );
-}
+export function NodeIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <path d="M7,9L5,9L5,7L7,7L7,5L9,5L9,7L12,7L12,5L15,8L12,11L12,9L9,9L9,12L11,12L8,15L5,12L7,12L7,9Z" />
+    </svg>
+  );
+}

package/src/editor/icons/RayIcon.tsx

@@ -1,7 +1,7 @@
-export function RayIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function RayIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/RectIcon.tsx

@@ -1,7 +1,7 @@
-export function RectIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function RectIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/ShapeIcon.tsx

@@ -1,7 +1,7 @@
-export function ShapeIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function ShapeIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/TxtIcon.tsx

@@ -1,8 +1,8 @@
-export function TxtIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <path d="M9,13L9,6L11,6L11,13L12,13L12,15L8,15L8,13L9,13Z" />
-      <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" />
-    </svg>
-  );
-}
+export function TxtIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <path d="M9,13L9,6L11,6L11,13L12,13L12,15L8,15L8,13L9,13Z" />
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/VideoIcon.tsx

@@ -1,7 +1,7 @@
-export function VideoIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <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" />
-    </svg>
-  );
-}
+export function VideoIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <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" />
+    </svg>
+  );
+}

package/src/editor/icons/View2DIcon.tsx

@@ -1,10 +1,10 @@
-export function View2DIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor">
-      <path d="M9,5L9,7L7,7L7,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" />
-      <path d="M5,11L7,11L7,13L9,13L9,15L6,15C5.448,15 5,14.552 5,14L5,11Z" />
-      <path d="M11,15L11,13L13,13L13,11L15,11L15,14C15,14.552 14.552,15 14,15L11,15Z" />
-      <path d="M15,9L13,9L13,7L11,7L11,5L14,5C14.552,5 15,5.448 15,6L15,9Z" />
-    </svg>
-  );
-}
+export function View2DIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor">
+      <path d="M9,5L9,7L7,7L7,9L5,9L5,6C5,5.448 5.448,5 6,5L9,5Z" />
+      <path d="M5,11L7,11L7,13L9,13L9,15L6,15C5.448,15 5,14.552 5,14L5,11Z" />
+      <path d="M11,15L11,13L13,13L13,11L15,11L15,14C15,14.552 14.552,15 14,15L11,15Z" />
+      <path d="M15,9L13,9L13,7L11,7L11,5L14,5C14.552,5 15,5.448 15,6L15,9Z" />
+    </svg>
+  );
+}

package/src/editor/index.ts

@@ -1,17 +1,17 @@
-import './index.css';
-
-import {makeEditorPlugin} from '@twick/ui';
-import {NodeInspectorConfig} from './NodeInspectorConfig';
-import {PreviewOverlayConfig} from './PreviewOverlayConfig';
-import {Provider} from './Provider';
-import {SceneGraphTabConfig} from './SceneGraphTabConfig';
-
-export default makeEditorPlugin(() => {
-  return {
-    name: '@twick/2d',
-    provider: Provider,
-    previewOverlay: PreviewOverlayConfig,
-    tabs: [SceneGraphTabConfig],
-    inspectors: [NodeInspectorConfig],
-  };
-});
+import './index.css';
+
+import {makeEditorPlugin} from '@twick/ui';
+import {NodeInspectorConfig} from './NodeInspectorConfig';
+import {PreviewOverlayConfig} from './PreviewOverlayConfig';
+import {Provider} from './Provider';
+import {SceneGraphTabConfig} from './SceneGraphTabConfig';
+
+export default makeEditorPlugin(() => {
+  return {
+    name: '@twick/2d',
+    provider: Provider,
+    previewOverlay: PreviewOverlayConfig,
+    tabs: [SceneGraphTabConfig],
+    inspectors: [NodeInspectorConfig],
+  };
+});

package/src/editor/tree/DetachedRoot.tsx

@@ -1,23 +1,23 @@
-import {useSignal} from '@preact/signals';
-import {usePluginState} from '../Provider';
-import {NodeElement} from './NodeElement';
-import {TreeElement} from './TreeElement';
-import {TreeRoot} from './TreeRoot';
-
-export 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 ? (
-    <TreeRoot>
-      <TreeElement open={open} label="Detached nodes">
-        {children.map(child => (
-          <NodeElement node={child} depth={1} />
-        ))}
-      </TreeElement>
-    </TreeRoot>
-  ) : null;
-}
+import {useSignal} from '@preact/signals';
+import {usePluginState} from '../Provider';
+import {NodeElement} from './NodeElement';
+import {TreeElement} from './TreeElement';
+import {TreeRoot} from './TreeRoot';
+
+export 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 ? (
+    <TreeRoot>
+      <TreeElement open={open} label="Detached nodes">
+        {children.map(child => (
+          <NodeElement node={child} depth={1} />
+        ))}
+      </TreeElement>
+    </TreeRoot>
+  ) : null;
+}

package/src/editor/tree/NodeElement.tsx

@@ -1,74 +1,74 @@
-import {useComputed, useSignal, useSignalEffect} from '@preact/signals';
-import type {Node} from '@twick/2d';
-import {NODE_NAME} from '@twick/2d';
-import {useRef} from 'preact/hooks';
-import {usePluginState} from '../Provider';
-import {IconMap} from '../icons/IconMap';
-import {TreeElement} from './TreeElement';
-
-interface NodeElementProps {
-  node: Node;
-  depth?: number;
-}
-
-export function NodeElement({node, depth = 0}: NodeElementProps) {
-  const {selectedKey, hoveredKey, openNodes, selectedChain, afterRender} =
-    usePluginState();
-  const ref = useRef<HTMLDivElement>(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 (
-    <TreeElement
-      forwardRef={ref}
-      open={open}
-      depth={depth}
-      icon={<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.value.length > 0 &&
-        children.value.map(child => (
-          <NodeElement node={child} depth={depth + 1} />
-        ))}
-    </TreeElement>
-  );
-}
+import {useComputed, useSignal, useSignalEffect} from '@preact/signals';
+import type {Node} from '@twick/2d';
+import {NODE_NAME} from '@twick/2d';
+import {useRef} from 'preact/hooks';
+import {usePluginState} from '../Provider';
+import {IconMap} from '../icons/IconMap';
+import {TreeElement} from './TreeElement';
+
+interface NodeElementProps {
+  node: Node;
+  depth?: number;
+}
+
+export function NodeElement({node, depth = 0}: NodeElementProps) {
+  const {selectedKey, hoveredKey, openNodes, selectedChain, afterRender} =
+    usePluginState();
+  const ref = useRef<HTMLDivElement>(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 (
+    <TreeElement
+      forwardRef={ref}
+      open={open}
+      depth={depth}
+      icon={<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.value.length > 0 &&
+        children.value.map(child => (
+          <NodeElement node={child} depth={depth + 1} />
+        ))}
+    </TreeElement>
+  );
+}

package/src/editor/tree/TreeElement.tsx

@@ -1,72 +1,72 @@
-import type {Signal} from '@preact/signals';
-import {Collapse, Toggle} from '@twick/ui';
-import {clsx} from 'clsx';
-import type {ComponentChildren, JSX} from 'preact';
-import type {Ref} from 'preact/hooks';
-import styles from './index.module.scss';
-
-const DEPTH_VAR = '--depth';
-
-interface TreeElementProps
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'label' | 'icon'> {
-  icon?: ComponentChildren;
-  label: ComponentChildren;
-  children?: ComponentChildren;
-  selected?: boolean;
-  open: Signal<boolean>;
-  depth?: number;
-  forwardRef?: Ref<HTMLDivElement>;
-}
-
-export function TreeElement({
-  label,
-  children,
-  selected,
-  depth = 0,
-  open,
-  icon,
-  forwardRef,
-  ...props
-}: TreeElementProps) {
-  const hasChildren = !!children;
-
-  return (
-    <>
-      <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}`}}
-      >
-        {hasChildren && (
-          <Toggle
-            animated={false}
-            open={open.value}
-            onToggle={value => {
-              open.value = value;
-            }}
-            onDblClick={e => {
-              e.stopPropagation();
-            }}
-          />
-        )}
-        {icon}
-        {label}
-      </div>
-      {hasChildren && (
-        <Collapse open={open.value} animated={false}>
-          {children}
-        </Collapse>
-      )}
-    </>
-  );
-}
+import type {Signal} from '@preact/signals';
+import {Collapse, Toggle} from '@twick/ui';
+import {clsx} from 'clsx';
+import type {ComponentChildren, JSX} from 'preact';
+import type {Ref} from 'preact/hooks';
+import styles from './index.module.scss';
+
+const DEPTH_VAR = '--depth';
+
+interface TreeElementProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'label' | 'icon'> {
+  icon?: ComponentChildren;
+  label: ComponentChildren;
+  children?: ComponentChildren;
+  selected?: boolean;
+  open: Signal<boolean>;
+  depth?: number;
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+export function TreeElement({
+  label,
+  children,
+  selected,
+  depth = 0,
+  open,
+  icon,
+  forwardRef,
+  ...props
+}: TreeElementProps) {
+  const hasChildren = !!children;
+
+  return (
+    <>
+      <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}`}}
+      >
+        {hasChildren && (
+          <Toggle
+            animated={false}
+            open={open.value}
+            onToggle={value => {
+              open.value = value;
+            }}
+            onDblClick={e => {
+              e.stopPropagation();
+            }}
+          />
+        )}
+        {icon}
+        {label}
+      </div>
+      {hasChildren && (
+        <Collapse open={open.value} animated={false}>
+          {children}
+        </Collapse>
+      )}
+    </>
+  );
+}