@canvas-commons/2d 0.2.0

package/lib/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+import { F as Fragment, L as jsx } from "./index-OvpZ-GsA.js";
+export { Fragment, jsx as jsxDEV };

package/lib/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+import { Fragment, jsx } from "./jsx-runtime.js";
+export { Fragment, jsx as jsxDEV };

package/lib/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+import { F as Fragment, I as JSX, L as jsx } from "./index-OvpZ-GsA.js";
+export { Fragment, JSX, jsx, jsx as jsxs };

package/lib/jsx-runtime.js

@@ -0,0 +1,28 @@
+//#region src/lib/jsx-runtime.ts
+function isClassComponent(fn) {
+	return !!fn.prototype?.isClass;
+}
+const Fragment = Symbol.for("@canvas-commons/2d/fragment");
+function jsx(type, config, key) {
+	const { ref, children, ...rest } = config;
+	const flatChildren = Array.isArray(children) ? children.flat() : children;
+	if (type === Fragment) return flatChildren;
+	if (isClassComponent(type)) {
+		const node = new type({
+			...rest,
+			children: flatChildren,
+			key
+		});
+		ref?.(node);
+		return node;
+	} else return type({
+		...rest,
+		ref,
+		children: flatChildren,
+		key
+	});
+}
+//#endregion
+export { Fragment, jsx, jsx as jsxs };
+
+//# sourceMappingURL=jsx-runtime.js.map

package/lib/jsx-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.js","names":[],"sources":["../src/lib/jsx-runtime.ts"],"sourcesContent":["import type {\n  ComponentChildren,\n  FunctionComponent,\n  JSXProps,\n  Node,\n  NodeConstructor,\n} from './components';\n\nexport namespace JSX {\n  export type Element = Node;\n  export type ElementClass = Node;\n  export interface ElementChildrenAttribute {\n    children: any;\n  }\n}\n\nfunction isClassComponent(\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  fn: Function,\n): fn is new (...args: unknown[]) => unknown {\n  return !!fn.prototype?.isClass;\n}\n\nexport const Fragment = Symbol.for('@canvas-commons/2d/fragment');\nexport function jsx(\n  type: NodeConstructor | FunctionComponent | typeof Fragment,\n  config: JSXProps,\n  key?: any,\n): ComponentChildren {\n  const {ref, children, ...rest} = config;\n  const flatChildren = Array.isArray(children) ? children.flat() : children;\n\n  if (type === Fragment) {\n    return flatChildren;\n  }\n\n  if (isClassComponent(type)) {\n    const node = new type({...rest, children: flatChildren, key});\n    ref?.(node);\n    return node;\n  } else {\n    return type({...rest, ref, children: flatChildren, key});\n  }\n}\nexport {jsx as jsxs};\n"],"mappings":";AAgBA,SAAS,iBAEP,IAC2C;CAC3C,OAAO,CAAC,CAAC,GAAG,WAAW;AACzB;AAEA,MAAa,WAAW,OAAO,IAAI,6BAA6B;AAChE,SAAgB,IACd,MACA,QACA,KACmB;CACnB,MAAM,EAAC,KAAK,UAAU,GAAG,SAAQ;CACjC,MAAM,eAAe,MAAM,QAAQ,QAAQ,IAAI,SAAS,KAAK,IAAI;CAEjE,IAAI,SAAS,UACX,OAAO;CAGT,IAAI,iBAAiB,IAAI,GAAG;EAC1B,MAAM,OAAO,IAAI,KAAK;GAAC,GAAG;GAAM,UAAU;GAAc;EAAG,CAAC;EAC5D,MAAM,IAAI;EACV,OAAO;CACT,OACE,OAAO,KAAK;EAAC,GAAG;EAAM;EAAK,UAAU;EAAc;CAAG,CAAC;AAE3D"}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@canvas-commons/2d",
+  "version": "0.2.0",
+  "description": "A 2D renderer for Canvas Commons",
+  "type": "module",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./lib/jsx-runtime.d.ts",
+      "default": "./lib/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./lib/jsx-dev-runtime.d.ts",
+      "default": "./lib/jsx-dev-runtime.js"
+    },
+    "./editor": {
+      "default": "./editor/index.js"
+    },
+    "./tsconfig.project.json": "./tsconfig.project.json",
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "author": "canvas-commons",
+  "homepage": "https://canvascommons.io/",
+  "bugs": "https://github.com/canvas-commons/canvas-commons/issues",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/canvas-commons/canvas-commons.git",
+    "directory": "packages/2d"
+  },
+  "files": [
+    "lib",
+    "editor",
+    "src",
+    "tsconfig.project.json"
+  ],
+  "devDependencies": {
+    "@preact/signals": "^1.2.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/node": "^20.19.0",
+    "clsx": "^2.0.0",
+    "geometry-polyfill": "^1.0.7",
+    "jsdom": "^29.1.0",
+    "preact": "^10.19.2",
+    "rollup": "^4.9.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "vitest": "^4.1.0",
+    "@canvas-commons/editor": "^0.2.0",
+    "@canvas-commons/2d": "0.2.0"
+  },
+  "dependencies": {
+    "@codemirror/language": "^6.10.1",
+    "@lezer/common": "^1.2.1",
+    "@lezer/highlight": "^1.2.0",
+    "escape-string-regexp": "^5.0.0",
+    "mathjax-full": "^3.2.2",
+    "parse-svg-path": "^0.1.2",
+    "roughjs": "^4.6.6",
+    "@canvas-commons/core": "^0.2.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "pnpm run build-lib && pnpm run build-editor",
+    "build-lib": "tsdown",
+    "build-editor": "rollup -c rollup.editor.mjs",
+    "test": "vitest run",
+    "lint:pkg": "publint --strict && attw --pack . --profile esm-only --ignore-rules internal-resolution-error --exclude-entrypoints ./editor"
+  }
+}

package/src/editor/NodeInspectorConfig.tsx

@@ -0,0 +1,76 @@
+import {
+  AutoField,
+  Button,
+  Group,
+  Label,
+  Pane,
+  PluginInspectorConfig,
+  Separator,
+  UnknownField,
+  findAndOpenFirstUserFile,
+  useApplication,
+} from '@canvas-commons/editor';
+import {useComputed} from '@preact/signals';
+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,65 @@
+import {Vector2} from '@canvas-commons/core';
+import {
+  MouseButton,
+  OverlayWrapper,
+  PluginOverlayConfig,
+  useViewportContext,
+  useViewportMatrix,
+} from '@canvas-commons/editor';
+import {ComponentChildren} from 'preact';
+import {usePluginState} from './Provider';
+
+function Component({children}: {children?: ComponentChildren}) {
+  const state = useViewportContext();
+  const {scene, selectNode} = usePluginState();
+  const matrix = useViewportMatrix();
+
+  return (
+    <OverlayWrapper
+      onPointerDown={event => {
+        if (event.button !== MouseButton.Left || event.shiftKey) return;
+        if (!scene.value) return;
+        event.stopPropagation();
+
+        const position = new Vector2(
+          event.x - state.rect.x,
+          event.y - state.rect.y,
+        ).transformAsPoint(matrix.inverse());
+
+        selectNode(
+          scene.value.inspectPosition(position.x, position.y) as string,
+        );
+      }}
+    >
+      {children}
+    </OverlayWrapper>
+  );
+}
+
+function drawHook() {
+  const {selectedNode, hoveredKey, afterRender, scene} = usePluginState();
+  selectedNode.value;
+  hoveredKey.value;
+  afterRender.value;
+
+  return (ctx: CanvasRenderingContext2D, matrix: DOMMatrix) => {
+    const currentScene = scene.peek();
+    if (!currentScene) return;
+
+    let node = selectedNode.value;
+    if (node) {
+      currentScene.drawOverlay(node.key, matrix, ctx);
+    }
+
+    node = currentScene.getNode(hoveredKey.value);
+    if (node && hoveredKey.value !== selectedNode.value?.key) {
+      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,109 @@
+import {Node, Scene2D} from '@canvas-commons/2d';
+import {SceneRenderEvent} from '@canvas-commons/core';
+import {useApplication, useCurrentScene} from '@canvas-commons/editor';
+import {
+  ReadonlySignal,
+  Signal,
+  computed,
+  signal,
+  useSignalEffect,
+} from '@preact/signals';
+import {ComponentChildren, createContext} from 'preact';
+import {useContext, useMemo} from 'preact/hooks';
+import {SignalSet} from './utils';
+
+export interface PluginState {
+  selectedNode: ReadonlySignal<Node | null>;
+  hoveredKey: Signal<string | null>;
+  selectNode: (nodeKey: string | null) => void;
+  openNodes: SignalSet<string>;
+  openDetached: Signal<boolean>;
+  visibleNodes: Set<string>;
+  scene: ReadonlySignal<Scene2D | null>;
+  afterRender: ReadonlySignal<number>;
+}
+
+const PluginContext = createContext<PluginState | null>(null);
+
+export const NodeInspectorKey = '@canvas-commons/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 afterRender = signal(0);
+    const openDetached = signal(false);
+    const visibleNodes = new Set<string>();
+    const scene = signal(currentScene as Scene2D);
+    const selectedNode = computed(() => {
+      afterRender.value;
+      const {key, payload} = inspection.value;
+      if (key === NodeInspectorKey) {
+        return scene.value?.getNode(payload as string) ?? null;
+      }
+      return null;
+    });
+    const hoveredKey = signal<string | null>(null);
+    const openNodes = new SignalSet<string>();
+    const selectNode = (nodeKey: string | null) => {
+      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 {
+      selectedNode,
+      selectNode,
+      hoveredKey,
+      afterRender,
+      openNodes,
+      openDetached,
+      visibleNodes,
+      scene,
+    } satisfies PluginState;
+  }, []);
+
+  state.scene.value = currentScene as Scene2D;
+
+  useSignalEffect(() =>
+    state.scene.value?.onRenderLifecycle.subscribe(([event]) => {
+      if (event === SceneRenderEvent.AfterRender) {
+        state.afterRender.value++;
+      }
+    }),
+  );
+
+  // Expand all nodes necessary to reveal the selected one:
+  useSignalEffect(() => {
+    const selectedNode = state.selectedNode.value;
+
+    if (selectedNode && !state.visibleNodes.has(selectedNode.key ?? '')) {
+      let node = selectedNode.parent() ?? null;
+      if (!node && selectedNode !== selectedNode.view()) {
+        state.openDetached.value = true;
+      }
+
+      while (node) {
+        state.openNodes.add(node.key);
+        const parent = node.parent();
+        if (!parent && node !== node.view()) {
+          state.openDetached.value = true;
+        }
+        node = parent;
+      }
+    }
+  });
+
+  return (
+    <PluginContext.Provider value={state}>{children}</PluginContext.Provider>
+  );
+}

package/src/editor/SceneGraphTabConfig.tsx

@@ -0,0 +1,87 @@
+import {
+  AccountTree,
+  emphasize,
+  Pane,
+  PluginTabConfig,
+  PluginTabProps,
+  Tab,
+  useApplication,
+  usePanels,
+  useReducedMotion,
+  useSurfaceShortcuts,
+} from '@canvas-commons/editor';
+import {useSignalEffect} from '@preact/signals';
+import {useEffect, useRef} from 'preact/hooks';
+import {usePluginState} from './Provider';
+import {SCENE_GRAPH_SHORTCUTS} from './shortcuts';
+import {DetachedRoot, useKeyboardNavigation, ViewRoot} from './tree';
+
+function TabComponent({tab}: PluginTabProps) {
+  const {sidebar} = usePanels();
+  const inspectorTab = useRef<HTMLButtonElement>(null);
+  const reducedMotion = useReducedMotion();
+  const {selectedNode, selectNode} = usePluginState();
+  const {logger} = useApplication();
+
+  useEffect(
+    () =>
+      logger.onInspected.subscribe(key => {
+        sidebar.set(tab);
+        selectNode(key);
+      }),
+    [tab],
+  );
+
+  useSignalEffect(() => {
+    if (
+      selectedNode.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 ref = useSurfaceShortcuts<HTMLDivElement>(SCENE_GRAPH_SHORTCUTS);
+  const {selectNode} = usePluginState();
+
+  useKeyboardNavigation();
+
+  return (
+    <Pane
+      forwardRef={ref}
+      title="Scene Graph"
+      id="scene-graph-pane"
+      onClick={() => {
+        selectNode(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/CodeIcon.tsx

@@ -0,0 +1,8 @@
+export function CodeIcon() {
+  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 {FunctionComponent} from 'preact';
+import {CircleIcon} from './CircleIcon';
+import {CodeIcon} from './CodeIcon';
+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,
+  Code: CodeIcon,
+  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 '@canvas-commons/editor';
+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: '@canvas-commons/2d',
+    provider: Provider,
+    previewOverlay: PreviewOverlayConfig,
+    tabs: [SceneGraphTabConfig],
+    inspectors: [NodeInspectorConfig],
+    shortcuts: [SCENE_GRAPH_SHORTCUTS],
+  };
+});