@efxlab/motion-canvas-2d 4.0.0

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 {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,19 @@
+import './index.css';
+
+import {makeEditorPlugin} from '@efxlab/motion-canvas-ui';
+import {NodeInspectorConfig} from './NodeInspectorConfig';
+import {PreviewOverlayConfig} from './PreviewOverlayConfig';
+import {Provider} from './Provider';
+import {SceneGraphTabConfig} from './SceneGraphTabConfig';
+import {SCENE_GRAPH_SHORTCUTS} from './shortcuts';
+
+export default makeEditorPlugin(() => {
+  return {
+    name: '@efxlab/motion-canvas-2d',
+    provider: Provider,
+    previewOverlay: PreviewOverlayConfig,
+    tabs: [SceneGraphTabConfig],
+    inspectors: [NodeInspectorConfig],
+    shortcuts: [SCENE_GRAPH_SHORTCUTS],
+  };
+});

package/src/editor/shortcuts.ts

@@ -0,0 +1,27 @@
+import {makeShortcuts} from '@efxlab/motion-canvas-ui';
+export const SCENE_GRAPH_SHORTCUTS = makeShortcuts('scene-graph', {
+  moveUp: {
+    display: '↑',
+    description: 'Go up',
+    key: 'ArrowUp',
+    modifiers: {},
+  },
+  modeDown: {
+    display: '↓',
+    description: 'Go down',
+    key: 'ArrowDown',
+    modifiers: {},
+  },
+  expandOrMoveDown: {
+    display: '→',
+    description: 'Expand / Enter',
+    key: 'ArrowRight',
+    modifiers: {},
+  },
+  collapseOrMoveUp: {
+    display: '←',
+    description: 'Collapse / Leave',
+    key: 'ArrowLeft',
+    modifiers: {},
+  },
+});

package/src/editor/tree/DetachedRoot.tsx

@@ -0,0 +1,27 @@
+import {usePluginState} from '../Provider';
+import {NodeElement} from './NodeElement';
+import {TreeElement} from './TreeElement';
+import {TreeRoot} from './TreeRoot';
+
+export function DetachedRoot() {
+  const {afterRender, openDetached, scene} = usePluginState();
+  const currentScene = scene.value;
+  const children = currentScene ? [...currentScene.getDetachedNodes()] : [];
+  afterRender.value;
+
+  return children.length > 0 ? (
+    <TreeRoot>
+      <TreeElement
+        open={openDetached.value}
+        hasChildren
+        onToggle={value => {
+          openDetached.value = value;
+        }}
+        label="Detached nodes"
+      >
+        {openDetached.value &&
+          children.map(child => <NodeElement node={child} depth={1} />)}
+      </TreeElement>
+    </TreeRoot>
+  ) : null;
+}

package/src/editor/tree/NodeElement.tsx

@@ -0,0 +1,72 @@
+import {NODE_NAME, Node} from '@efxlab/motion-canvas-2d';
+import {useComputed, useSignal, useSignalEffect} from '@preact/signals';
+import {useEffect, 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 {
+    selectedNode,
+    visibleNodes,
+    selectNode,
+    hoveredKey,
+    openNodes,
+    afterRender,
+  } = usePluginState();
+  const ref = useRef<HTMLDivElement>(null);
+  const nodeSignal = useSignal(node);
+  nodeSignal.value = node;
+
+  const open = useComputed(() => openNodes.has(nodeSignal.value.key));
+
+  useEffect(() => {
+    visibleNodes.add(node.key);
+    return () => {
+      visibleNodes.delete(node.key);
+    };
+  }, [node.key]);
+
+  const children = useComputed(() => {
+    afterRender.value;
+    return nodeSignal.value.peekChildren();
+  });
+
+  useSignalEffect(() => {
+    if (node.key === selectedNode.value?.key) {
+      ref.current?.scrollIntoView({block: 'nearest', behavior: 'instant'});
+    }
+  });
+
+  const Icon = IconMap[node[NODE_NAME]] ?? IconMap.Node;
+
+  return (
+    <TreeElement
+      forwardRef={ref}
+      open={open.value}
+      hasChildren={children.value.length > 0}
+      onToggle={value => openNodes.toggle(node.key, value)}
+      depth={depth}
+      icon={<Icon />}
+      label={node.key}
+      selected={selectedNode.value === node}
+      onClick={event => {
+        selectNode(node.key);
+        event.stopPropagation();
+      }}
+      onPointerEnter={() => (hoveredKey.value = node.key)}
+      onPointerLeave={() => (hoveredKey.value = null)}
+    >
+      {open.value &&
+        children.value.length > 0 &&
+        children.value.map(child => (
+          <NodeElement node={child} depth={depth + 1} />
+        ))}
+    </TreeElement>
+  );
+}

package/src/editor/tree/TreeElement.tsx

@@ -0,0 +1,70 @@
+import {Toggle} from '@efxlab/motion-canvas-ui';
+import {clsx} from 'clsx';
+import {ComponentChildren, JSX} from 'preact';
+import {Ref} from 'preact/hooks';
+import styles from './index.module.scss';
+
+const DEPTH_VAR = '--depth';
+
+interface TreeElementProps extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  'label' | 'icon' | 'onToggle'
+> {
+  icon?: ComponentChildren;
+  label: ComponentChildren;
+  children?: ComponentChildren;
+  selected?: boolean;
+  open: boolean;
+  hasChildren?: boolean;
+  onToggle?: (value: boolean) => void;
+  depth?: number;
+  forwardRef?: Ref<HTMLDivElement>;
+}
+
+export function TreeElement({
+  label,
+  children,
+  selected,
+  hasChildren,
+  depth = 0,
+  open,
+  onToggle,
+  icon,
+  forwardRef,
+  ...props
+}: TreeElementProps) {
+  return (
+    <>
+      <div
+        className={clsx(
+          styles.entry,
+          selected && styles.active,
+          hasChildren && styles.parent,
+        )}
+        onDblClick={() => {
+          if (hasChildren) {
+            onToggle?.(!open);
+          }
+        }}
+        {...props}
+        style={{[DEPTH_VAR]: `${depth}`}}
+      >
+        <div ref={forwardRef} className={styles.label}>
+          {hasChildren && (
+            <Toggle
+              animated={false}
+              open={open}
+              onToggle={onToggle}
+              onDblClick={e => {
+                e.stopPropagation();
+              }}
+            />
+          )}
+          {icon}
+          {label}
+        </div>
+      </div>
+      {children}
+    </>
+  );
+}

package/src/editor/tree/TreeRoot.tsx

@@ -0,0 +1,10 @@
+import {clsx} from 'clsx';
+import {JSX} from 'preact';
+import styles from './index.module.scss';
+
+export function TreeRoot({
+  className,
+  ...props
+}: JSX.HTMLAttributes<HTMLDivElement>) {
+  return <div className={clsx(styles.root, className)} {...props} />;
+}

package/src/editor/tree/ViewRoot.tsx

@@ -0,0 +1,20 @@
+import {useSignal, useSignalEffect} from '@preact/signals';
+import {usePluginState} from '../Provider';
+import {NodeElement} from './NodeElement';
+import {TreeRoot} from './TreeRoot';
+
+export 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();
+    });
+  });
+
+  return view.value ? (
+    <TreeRoot>{<NodeElement node={view.value} />}</TreeRoot>
+  ) : null;
+}

package/src/editor/tree/index.module.scss

@@ -0,0 +1,45 @@
+.root {
+  margin-top: -1px;
+  padding: 3px 0 4px;
+  border-top: 2px solid var(--background-color);
+  width: max-content;
+  min-width: 100%;
+}
+
+.entry {
+  --depth: 0;
+
+  padding: 4px 0 4px calc(var(--depth) * 22px + 24px);
+  border-radius: var(--radius);
+  user-select: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--surface-color-hover);
+  }
+
+  &.active {
+    --surface-color-hover: none;
+    background-color: var(--theme-overlay);
+    color: var(--theme);
+  }
+
+  &.parent {
+    padding-left: calc(var(--depth) * 22px);
+  }
+}
+
+.label {
+  width: max-content;
+  display: flex;
+  padding-right: 8px;
+
+  > svg {
+    width: 20px;
+    height: 20px;
+    align-self: center;
+    background-color: var(--background-color);
+    border-radius: var(--radius);
+    margin-right: 8px;
+  }
+}

package/src/editor/tree/index.ts

@@ -0,0 +1,4 @@
+export * from './DetachedRoot';
+export * from './navigation';
+export * from './NodeElement';
+export * from './ViewRoot';

package/src/editor/tree/navigation.ts

@@ -0,0 +1,145 @@
+import {Node} from '@efxlab/motion-canvas-2d';
+import {useShortcuts} from '@efxlab/motion-canvas-ui';
+import {useComputed} from '@preact/signals';
+import {usePluginState} from '../Provider';
+import {SCENE_GRAPH_SHORTCUTS} from '../shortcuts';
+
+export function useKeyboardNavigation() {
+  const {selectedNode, scene, afterRender, openNodes, selectNode} =
+    usePluginState();
+
+  const detachedNodes = useComputed(() => {
+    afterRender.value;
+    const detachedNodes: string[] = [];
+    for (const node of scene.value?.getDetachedNodes() ?? []) {
+      detachedNodes.push(node.key);
+    }
+    return detachedNodes;
+  });
+
+  function selectView() {
+    selectNode(scene.value?.getView()?.key ?? null);
+  }
+
+  function findNextNodeUp(node: Node): string | null {
+    const detachedIndex = detachedNodes.value.indexOf(node.key);
+    if (detachedIndex > 0) {
+      return detachedNodes.value[detachedIndex - 1];
+    } else if (detachedIndex === 0) {
+      // Go back to the scene graph after reaching the top of detached nodes:
+      return findLowestNode();
+    }
+
+    const parent = node.parent();
+    if (!parent) {
+      return null;
+    }
+
+    const siblings = parent.peekChildren();
+    const index = siblings.indexOf(node);
+    if (index < 1) {
+      return parent.key;
+    }
+
+    let current = siblings[index - 1];
+    while (current) {
+      const children = current.peekChildren();
+      if (openNodes.has(current.key) && children.length > 0) {
+        current = children.at(-1)!;
+      } else {
+        return current.key;
+      }
+    }
+
+    return null;
+  }
+
+  function findNextNodeDown(node: Node): string | null {
+    if (openNodes.has(node.key)) {
+      const children = node.peekChildren();
+      if (children.length > 0) {
+        return children[0].key;
+      }
+    }
+
+    let current = node;
+    while (current) {
+      const parent = current.parent();
+      if (!parent) {
+        const detachedIndex = detachedNodes.value.indexOf(node.key);
+        if (detachedIndex >= 0) {
+          return detachedNodes.value[detachedIndex + 1] ?? null;
+        }
+
+        // Try jumping down to the detached section after reaching the bottom:
+        return detachedNodes.value[0] ?? null;
+      }
+
+      const siblings = parent.peekChildren();
+      const index = siblings.indexOf(current);
+      if (index < siblings.length - 1) {
+        return siblings[index + 1].key;
+      }
+
+      current = parent;
+    }
+
+    return null;
+  }
+
+  function findLowestNode(): string | null {
+    let current: Node | undefined = scene.value?.getView();
+    while (current) {
+      const children = current.peekChildren();
+      if (openNodes.has(current.key) && children.length > 0) {
+        current = children.at(-1)!;
+      } else {
+        return current.key;
+      }
+    }
+    return null;
+  }
+
+  useShortcuts(SCENE_GRAPH_SHORTCUTS, {
+    moveUp: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      selectNode(findNextNodeUp(node) ?? node.key);
+    },
+    collapseOrMoveUp: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      if (!openNodes.delete(node.key)) {
+        selectNode(node.parent()?.key ?? node.key);
+      }
+    },
+    modeDown: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      selectNode(findNextNodeDown(node) ?? node.key);
+    },
+    expandOrMoveDown: () => {
+      const node = selectedNode.value;
+      if (!node) {
+        selectView();
+        return;
+      }
+
+      if (node.peekChildren().length === 0 || !openNodes.add(node.key)) {
+        selectNode(findNextNodeDown(node) ?? node.key);
+      }
+    },
+  });
+}

package/src/editor/tsconfig.build.json

@@ -0,0 +1,5 @@
+{
+  "extends": "./tsconfig.json",
+  "references": [{"path": "../lib/tsconfig.build.json"}],
+  "include": ["**/*"]
+}

package/src/editor/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "paths": {
+      "@efxlab/motion-canvas-2d": ["../lib"]
+    }
+  },
+  "references": [{"path": "../lib/tsconfig.json"}],
+  "include": ["**/*"]
+}

package/src/editor/tsdoc.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+  "extends": ["../../../../tsdoc.json"]
+}

package/src/editor/utils/SignalSet.ts

@@ -0,0 +1,37 @@
+import {signal} from '@preact/signals';
+
+export class SignalSet<T> {
+  private readonly set = new Set<T>();
+  private readonly signal = signal(0);
+
+  public has(value: T) {
+    this.signal.value;
+    return this.set.has(value);
+  }
+
+  public peekHas(value: T) {
+    return this.set.has(value);
+  }
+
+  public add(value: T): boolean {
+    if (this.set.has(value)) {
+      return false;
+    }
+
+    this.set.add(value);
+    this.signal.value++;
+    return true;
+  }
+
+  public delete(value: T): boolean {
+    const result = this.set.delete(value);
+    if (result) {
+      this.signal.value++;
+    }
+    return result;
+  }
+
+  public toggle(value: T, state: boolean): boolean {
+    return state ? this.add(value) : this.delete(value);
+  }
+}

package/src/editor/utils/index.ts

@@ -0,0 +1 @@
+export * from './SignalSet';

package/src/editor/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />