@twick/2d 0.11.0

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@twick/2d",
+  "version": "0.11.0",
+  "description": "A 2D renderer for twick",
+  "author": "twick",
+  "homepage": "https://twick.com/",
+  "bugs": "https://github.com/ncounterspecialist/twick/issues",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "types": "./lib/index.d.ts",
+  "scripts": {
+    "dev": "tsc -p src/lib -w",
+    "build": "npm run build-lib && npm run build-editor",
+    "build-lib": "tsc -p src/lib/tsconfig.build.json",
+    "build-editor": "rollup -c rollup.editor.mjs",
+    "bundle": "rollup -c rollup.config.mjs",
+    "test": "vitest"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ncounterspecialist/twick-base.git"
+  },
+  "files": [
+    "lib",
+    "editor",
+    "src",
+    "tsconfig.project.json"
+  ],
+  "devDependencies": {
+    "@preact/signals": "^1.2.1",
+    "@rollup/plugin-node-resolve": "^15.2.4",
+    "@rollup/plugin-typescript": "^12.1.0",
+    "@twick/ui": "^0.11.0",
+    "clsx": "^2.0.0",
+    "jsdom": "^22.1.0",
+    "preact": "^10.19.2",
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "dependencies": {
+    "@codemirror/language": "^6.10.1",
+    "@lezer/common": "^1.2.1",
+    "@lezer/highlight": "^1.2.0",
+    "@rive-app/canvas-advanced": "2.7.3",
+    "@twick/core": "^0.11.0",
+    "code-fns": "^0.8.2",
+    "hls.js": "^1.5.11",
+    "mathjax-full": "^3.2.2",
+    "mp4box": "^0.5.2",
+    "parse-svg-path": "^0.1.2"
+  },
+  "gitHead": "59f38f4e7d3a9a30943bbad830dc0201eaa57ce7"
+}

package/src/editor/NodeInspectorConfig.tsx

@@ -0,0 +1,76 @@
+import {useComputed} from '@preact/signals';
+import type {PluginInspectorConfig} from '@twick/ui';
+import {
+  AutoField,
+  Button,
+  Group,
+  Label,
+  Pane,
+  Separator,
+  UnknownField,
+  findAndOpenFirstUserFile,
+  useApplication,
+} from '@twick/ui';
+import {NodeInspectorKey, usePluginState} from './Provider';
+
+function Component() {
+  const {inspection} = useApplication();
+  const {scene, afterRender} = usePluginState();
+  const node = useComputed(() => {
+    afterRender.value;
+    const {payload} = inspection.value;
+    return scene.value?.getNode(payload as string);
+  });
+
+  const attributes = useComputed(() => {
+    afterRender.value;
+    const currentNode = node.value;
+    const attributes: [string, unknown][] = [];
+
+    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 (
+    <Pane title="Node Inspector" id="node-inspector-pane">
+      <Separator size={1} />
+      {stack && (
+        <Group>
+          <Label />
+          <Button onClick={() => findAndOpenFirstUserFile(stack)} main>
+            GO TO SOURCE
+          </Button>
+        </Group>
+      )}
+      <Group>
+        <Label>key</Label>
+        <UnknownField value={inspection.value.payload} />
+      </Group>
+      {!node.value && (
+        <Group>
+          <Label />
+          Couldn't find the node. It may have been deleted or doesn't exist yet.
+        </Group>
+      )}
+      {attributes.value.map(([key, value]) => (
+        <Group key={key}>
+          <Label>{key}</Label>
+          <AutoField value={value} />
+        </Group>
+      ))}
+    </Pane>
+  );
+}
+
+export const NodeInspectorConfig: PluginInspectorConfig = {
+  key: NodeInspectorKey,
+  component: Component,
+};

package/src/editor/PreviewOverlayConfig.tsx

@@ -0,0 +1,67 @@
+import {transformVectorAsPoint, Vector2} from '@twick/core';
+import type {PluginOverlayConfig} from '@twick/ui';
+import {
+  MouseButton,
+  OverlayWrapper,
+  useViewportContext,
+  useViewportMatrix,
+} from '@twick/ui';
+import type {ComponentChildren} from 'preact';
+import {usePluginState} from './Provider';
+
+function Component({children}: {children?: ComponentChildren}) {
+  const state = useViewportContext();
+  const {scene, selectedKey} = usePluginState();
+  const matrix = useViewportMatrix();
+
+  return (
+    <OverlayWrapper
+      onPointerDown={event => {
+        if (event.button !== MouseButton.Left || event.shiftKey) return;
+        if (!scene.value) return;
+        event.stopPropagation();
+
+        const diff = new Vector2(
+          event.x - state.rect.x,
+          event.y - state.rect.y,
+        );
+        const position = transformVectorAsPoint(diff, matrix.inverse());
+
+        selectedKey.value = scene.value.inspectPosition(
+          position.x,
+          position.y,
+        ) as string;
+      }}
+    >
+      {children}
+    </OverlayWrapper>
+  );
+}
+
+function drawHook() {
+  const {selectedKey, hoveredKey, afterRender, scene} = usePluginState();
+  selectedKey.value;
+  hoveredKey.value;
+  afterRender.value;
+
+  return (ctx: CanvasRenderingContext2D, matrix: DOMMatrix) => {
+    const currentScene = scene.peek();
+    if (!currentScene) return;
+
+    let node = currentScene.getNode(selectedKey.value);
+    if (node) {
+      currentScene.drawOverlay(node.key, matrix, ctx);
+    }
+
+    node = currentScene.getNode(hoveredKey.value);
+    if (node && hoveredKey.value !== selectedKey.value) {
+      ctx.globalAlpha = 0.5;
+      currentScene.drawOverlay(hoveredKey.value, matrix, ctx);
+    }
+  };
+}
+
+export const PreviewOverlayConfig: PluginOverlayConfig = {
+  drawHook,
+  component: Component,
+};

package/src/editor/Provider.tsx

@@ -0,0 +1,93 @@
+import type {ReadonlySignal, Signal} from '@preact/signals';
+import {computed, signal, useSignalEffect} from '@preact/signals';
+import type {Scene2D} from '@twick/2d';
+import {SceneRenderEvent} from '@twick/core';
+import {useApplication, useCurrentScene} from '@twick/ui';
+import type {ComponentChildren} from 'preact';
+import {createContext} from 'preact';
+import {useContext, useMemo} from 'preact/hooks';
+
+export interface PluginState {
+  selectedKey: Signal<string | null>;
+  hoveredKey: Signal<string | null>;
+  openNodes: Map<string, boolean>;
+  scene: ReadonlySignal<Scene2D | null>;
+  selectedChain: ReadonlySignal<Set<string>>;
+  afterRender: ReadonlySignal<number>;
+}
+
+const PluginContext = createContext<PluginState | null>(null);
+
+export const NodeInspectorKey = '@twick/2d/node-inspector';
+
+export function usePluginState() {
+  return useContext(PluginContext)!;
+}
+
+export function Provider({children}: {children?: ComponentChildren}) {
+  const {inspection} = useApplication();
+  const currentScene = useCurrentScene();
+
+  const state = useMemo(() => {
+    const scene = signal(currentScene as Scene2D);
+    const selectedKey = signal<string | null>(null);
+    const afterRender = signal(0);
+    const hoveredKey = signal<string | null>(null);
+    const openNodes = new Map<string, boolean>();
+    const selectedChain = computed(() => {
+      const chain = new Set<string>();
+      const key = selectedKey.value;
+      const selectedNode = scene.value?.getNode(key);
+      if (selectedNode) {
+        let node = selectedNode.parent() ?? null;
+        while (node) {
+          chain.add(node.key);
+          node = node.parent();
+        }
+      }
+
+      return chain;
+    });
+
+    return {
+      selectedKey,
+      hoveredKey,
+      afterRender,
+      openNodes,
+      selectedChain,
+      scene,
+    } satisfies PluginState;
+  }, []);
+
+  state.scene.value = currentScene as Scene2D;
+
+  useSignalEffect(() =>
+    state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
+      if (event === SceneRenderEvent.AfterRender) {
+        state.afterRender.value++;
+      }
+    }),
+  );
+
+  useSignalEffect(() => {
+    const {key, payload} = inspection.value;
+    if (key === NodeInspectorKey) {
+      state.selectedKey.value = payload as string;
+    }
+  });
+
+  useSignalEffect(() => {
+    const nodeKey = state.selectedKey.value;
+    const {key, payload} = inspection.peek();
+
+    if (key === NodeInspectorKey && !nodeKey) {
+      inspection.value = {key: '', payload: null};
+    } else if (payload !== nodeKey) {
+      inspection.value = {key: NodeInspectorKey, payload: nodeKey};
+    }
+  });
+
+  return (
+    <PluginContext.Provider value={state}>{children}</PluginContext.Provider>
+  );
+}

package/src/editor/SceneGraphTabConfig.tsx

@@ -0,0 +1,81 @@
+import type {PluginTabConfig, PluginTabProps} from '@twick/ui';
+import {
+  AccountTree,
+  emphasize,
+  Pane,
+  Tab,
+  useApplication,
+  usePanels,
+  useReducedMotion,
+} from '@twick/ui';
+
+import {useSignalEffect} from '@preact/signals';
+import {useEffect, useRef} from 'preact/hooks';
+import {usePluginState} from './Provider';
+import {DetachedRoot, ViewRoot} from './tree';
+
+function TabComponent({tab}: PluginTabProps) {
+  const {sidebar} = usePanels();
+  const inspectorTab = useRef<HTMLButtonElement>(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 (
+    <Tab
+      forwardRef={inspectorTab}
+      title="Scene Graph"
+      id="scene-graph-tab"
+      tab={tab}
+    >
+      <AccountTree />
+    </Tab>
+  );
+}
+
+function PaneComponent() {
+  const {selectedKey} = usePluginState();
+
+  return (
+    <Pane
+      title="Scene Graph"
+      id="scene-graph-pane"
+      onClick={() => {
+        selectedKey.value = null;
+      }}
+    >
+      <ViewRoot />
+      <DetachedRoot />
+    </Pane>
+  );
+}
+
+export const SceneGraphTabConfig: PluginTabConfig = {
+  name: 'scene-graph',
+  tabComponent: TabComponent,
+  paneComponent: PaneComponent,
+};

package/src/editor/icons/CircleIcon.tsx

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

package/src/editor/icons/CodeBlockIcon.tsx

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

package/src/editor/icons/CurveIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/GridIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/IconMap.ts

@@ -0,0 +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,
+};

package/src/editor/icons/ImgIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/LayoutIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/LineIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/NodeIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/RayIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/RectIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/ShapeIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/TxtIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/VideoIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/icons/View2DIcon.tsx

@@ -0,0 +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>
+  );
+}

package/src/editor/index.ts

@@ -0,0 +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],
+  };
+});

package/src/editor/tree/DetachedRoot.tsx

@@ -0,0 +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;
+}

package/src/editor/tree/NodeElement.tsx

@@ -0,0 +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>
+  );
+}