@efxlab/motion-canvas-2d 4.0.0

package/lib/utils/diff.d.ts

@@ -0,0 +1,31 @@
+interface TransformDiff<T> {
+    inserted: TransformDiffItem<T>[];
+    deleted: TransformDiffItem<T>[];
+    transformed: TransformDiffItemTransformed<T>[];
+}
+interface TransformDiffItem<T> {
+    before?: T;
+    beforeIdIndex: number;
+    current: T;
+    currentIndex: number;
+}
+interface TransformDiffItemTransformed<T> {
+    insert: boolean;
+    remove: boolean;
+    from: TransformDiffItem<T>;
+    to: TransformDiffItem<T>;
+}
+interface ApplyTransformInserted<T> {
+    item: TransformDiffItem<T>;
+    order: number;
+}
+interface ApplyTransformResult<T> {
+    inserted: ApplyTransformInserted<T>[];
+}
+interface Idable {
+    id: string;
+}
+export declare function getTransformDiff<T extends Idable>(from: T[], to: T[]): TransformDiff<T>;
+export declare function applyTransformDiff<T extends Idable>(current: T[], diff: TransformDiff<T>, cloner: (original: T) => T): ApplyTransformResult<T>;
+export {};
+//# sourceMappingURL=diff.d.ts.map

package/lib/utils/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../src/lib/utils/diff.ts"],"names":[],"mappings":"AAAA,UAAU,aAAa,CAAC,CAAC;IACvB,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IACjC,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,WAAW,EAAE,4BAA4B,CAAC,CAAC,CAAC,EAAE,CAAC;CAChD;AAED,UAAU,iBAAiB,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,CAAC,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,4BAA4B,CAAC,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC3B,EAAE,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;CAC1B;AAED,UAAU,sBAAsB,CAAC,CAAC;IAChC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,oBAAoB,CAAC,CAAC;IAC9B,QAAQ,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;CACvC;AAED,UAAU,MAAM;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAsBD,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAC/C,IAAI,EAAE,CAAC,EAAE,EACT,EAAE,EAAE,CAAC,EAAE,GACN,aAAa,CAAC,CAAC,CAAC,CA0ClB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EACjD,OAAO,EAAE,CAAC,EAAE,EACZ,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EACtB,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GACzB,oBAAoB,CAAC,CAAC,CAAC,CA2CzB"}

package/lib/utils/diff.js

@@ -0,0 +1,97 @@
+function getIdMap(list) {
+    const map = new Map();
+    let before = undefined;
+    for (const [index, current] of list.entries()) {
+        const currentArray = map.get(current.id) ?? [];
+        if (!map.has(current.id)) {
+            map.set(current.id, currentArray);
+        }
+        currentArray.push({
+            before,
+            current,
+            beforeIdIndex: before ? map.get(before.id).length - 1 : -1,
+            currentIndex: index,
+        });
+        before = current;
+    }
+    return map;
+}
+export function getTransformDiff(from, to) {
+    const diff = {
+        inserted: [],
+        deleted: [],
+        transformed: [],
+    };
+    const fromMap = getIdMap(from);
+    const toMap = getIdMap(to);
+    for (const [key, fromItem] of fromMap.entries()) {
+        const toItem = toMap.get(key);
+        if (toItem) {
+            toMap.delete(key);
+            for (let i = 0; i < Math.max(fromItem.length, toItem.length); i++) {
+                const insert = i >= fromItem.length;
+                const remove = i >= toItem.length;
+                const fromNode = !insert ? fromItem[i] : fromItem[fromItem.length - 1];
+                const toNode = !remove ? toItem[i] : toItem[toItem.length - 1];
+                diff.transformed.push({
+                    insert,
+                    remove,
+                    from: fromNode,
+                    to: toNode,
+                });
+            }
+        }
+        else {
+            for (const node of fromItem) {
+                diff.deleted.push(node);
+            }
+        }
+    }
+    for (const toItem of toMap.values()) {
+        for (const node of toItem) {
+            diff.inserted.push(node);
+        }
+    }
+    return diff;
+}
+export function applyTransformDiff(current, diff, cloner) {
+    function insert(item) {
+        let idIndex = -1;
+        const index = item.before
+            ? current.findIndex(({ id }) => {
+                if (id === item.before?.id) {
+                    idIndex++;
+                    if (idIndex === item.beforeIdIndex)
+                        return true;
+                }
+                return false;
+            })
+            : 0;
+        current.splice(index + 1, 0, item.current);
+    }
+    const result = {
+        inserted: diff.inserted.map(item => ({
+            item,
+            order: item.currentIndex,
+        })),
+    };
+    for (const item of diff.transformed) {
+        if (!item.insert)
+            continue;
+        const from = item.from;
+        item.from = {
+            ...item.to,
+            current: cloner(from.current),
+        };
+        result.inserted.push({
+            item: item.from,
+            order: item.to.currentIndex,
+        });
+    }
+    result.inserted.sort((a, b) => a.order - b.order);
+    for (const item of result.inserted) {
+        insert(item.item);
+    }
+    return result;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlmZi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvdXRpbHMvZGlmZi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQ0EsU0FBUyxRQUFRLENBQW1CLElBQVM7SUFDM0MsTUFBTSxHQUFHLEdBQUcsSUFBSSxHQUFHLEVBQWtDLENBQUM7SUFDdEQsSUFBSSxNQUFNLEdBQWtCLFNBQVMsQ0FBQztJQUN0QyxLQUFLLE1BQU0sQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUM7UUFDOUMsTUFBTSxZQUFZLEdBQUcsR0FBRyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQy9DLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDO1lBQ3pCLEdBQUcsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLEVBQUUsRUFBRSxZQUFZLENBQUMsQ0FBQztRQUNwQyxDQUFDO1FBRUQsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNoQixNQUFNO1lBQ04sT0FBTztZQUNQLGFBQWEsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUMzRCxZQUFZLEVBQUUsS0FBSztTQUNwQixDQUFDLENBQUM7UUFDSCxNQUFNLEdBQUcsT0FBTyxDQUFDO0lBQ25CLENBQUM7SUFDRCxPQUFPLEdBQUcsQ0FBQztBQUNiLENBQUM7QUFFRCxNQUFNLFVBQVUsZ0JBQWdCLENBQzlCLElBQVMsRUFDVCxFQUFPO0lBRVAsTUFBTSxJQUFJLEdBQXFCO1FBQzdCLFFBQVEsRUFBRSxFQUFFO1FBQ1osT0FBTyxFQUFFLEVBQUU7UUFDWCxXQUFXLEVBQUUsRUFBRTtLQUNo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

package/lib/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CanvasUtils';
+export * from './is';
+export * from './withDefaults';
+//# sourceMappingURL=index.d.ts.map

package/lib/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,MAAM,CAAC;AACrB,cAAc,gBAAgB,CAAC"}

package/lib/utils/index.js

@@ -0,0 +1,4 @@
+export * from './CanvasUtils';
+export * from './is';
+export * from './withDefaults';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3V0aWxzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsTUFBTSxDQUFDO0FBQ3JCLGNBQWMsZ0JBQWdCLENBQUMifQ==

package/lib/utils/is.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Create a predicate that checks if the given object is an instance of the
+ * given class.
+ *
+ * @param klass - The class to check against.
+ */
+export declare function is<T>(klass: new (...args: any[]) => T): (object: any) => object is T;
+//# sourceMappingURL=is.d.ts.map

package/lib/utils/is.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is.d.ts","sourceRoot":"","sources":["../../src/lib/utils/is.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,EAAE,CAAC,CAAC,EAClB,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAC/B,CAAC,MAAM,EAAE,GAAG,KAAK,MAAM,IAAI,CAAC,CAE9B"}

package/lib/utils/is.js

@@ -0,0 +1,10 @@
+/**
+ * Create a predicate that checks if the given object is an instance of the
+ * given class.
+ *
+ * @param klass - The class to check against.
+ */
+export function is(klass) {
+    return (object) => object instanceof klass;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3V0aWxzL2lzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7OztHQUtHO0FBQ0gsTUFBTSxVQUFVLEVBQUUsQ0FDaEIsS0FBZ0M7SUFFaEMsT0FBTyxDQUFDLE1BQU0sRUFBZSxFQUFFLENBQUMsTUFBTSxZQUFZLEtBQUssQ0FBQztBQUMxRCxDQUFDIn0=

package/lib/utils/makeSignalExtensions.d.ts

@@ -0,0 +1,4 @@
+import { SignalExtensions } from '@efxlab/motion-canvas-core';
+import { PropertyMetadata } from '../decorators';
+export declare function makeSignalExtensions<TSetterValue, TValue extends TSetterValue>(meta?: Partial<PropertyMetadata<TValue>>, owner?: any, name?: string): Partial<SignalExtensions<TSetterValue, TValue>>;
+//# sourceMappingURL=makeSignalExtensions.d.ts.map

package/lib/utils/makeSignalExtensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"makeSignalExtensions.d.ts","sourceRoot":"","sources":["../../src/lib/utils/makeSignalExtensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAa,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,MAAM,SAAS,YAAY,EAC5E,IAAI,GAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAM,EAC5C,KAAK,CAAC,EAAE,GAAG,EACX,IAAI,CAAC,EAAE,MAAM,mDAsBd"}

package/lib/utils/makeSignalExtensions.js

@@ -0,0 +1,20 @@
+import { capitalize } from '@efxlab/motion-canvas-core';
+export function makeSignalExtensions(meta = {}, owner, name) {
+    const extensions = {};
+    if (name && owner) {
+        const setter = meta.setter ?? owner?.[`set${capitalize(name)}`];
+        if (setter) {
+            extensions.setter = setter.bind(owner);
+        }
+        const getter = meta.getter ?? owner?.[`get${capitalize(name)}`];
+        if (getter) {
+            extensions.getter = getter.bind(owner);
+        }
+        const tweener = meta.tweener ?? owner?.[`tween${capitalize(name)}`];
+        if (tweener) {
+            extensions.tweener = tweener.bind(owner);
+        }
+    }
+    return extensions;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFrZVNpZ25hbEV4dGVuc2lvbnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3V0aWxzL21ha2VTaWduYWxFeHRlbnNpb25zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBbUIsVUFBVSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFHeEUsTUFBTSxVQUFVLG9CQUFvQixDQUNsQyxPQUEwQyxFQUFFLEVBQzVDLEtBQVcsRUFDWCxJQUFhO0lBRWIsTUFBTSxVQUFVLEdBQW9ELEVBQUUsQ0FBQztJQUV2RSxJQUFJLElBQUksSUFBSSxLQUFLLEVBQUUsQ0FBQztRQUNsQixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssRUFBRSxDQUFDLE1BQU0sVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNoRSxJQUFJLE1BQU0sRUFBRSxDQUFDO1lBQ1gsVUFBVSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pDLENBQUM7UUFFRCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssRUFBRSxDQUFDLE1BQU0sVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNoRSxJQUFJLE1BQU0sRUFBRSxDQUFDO1lBQ1gsVUFBVSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3pDLENBQUM7UUFFRCxNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxJQUFJLEtBQUssRUFBRSxDQUFDLFFBQVEsVUFBVSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNwRSxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ1osVUFBVSxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzNDLENBQUM7SUFDSCxDQUFDO0lBRUQsT0FBTyxVQUFVLENBQUM7QUFDcEIsQ0FBQyJ9

package/lib/utils/withDefaults.d.ts

@@ -0,0 +1,20 @@
+import { FunctionComponent, NodeConstructor, PropsOf } from '../components';
+/**
+ * Create a higher order component with default props.
+ *
+ * @example
+ * ```tsx
+ * const MyTxt = withDefaults(Txt, {
+ *   fill: '#f3303f',
+ * });
+ *
+ * // ...
+ *
+ * view.add(<MyTxt>Hello, World!</MyTxt>);
+ * ```
+ *
+ * @param component - The base class or function component to wrap.
+ * @param defaults - The default props to apply.
+ */
+export declare function withDefaults<T extends FunctionComponent | NodeConstructor>(component: T, defaults: PropsOf<T>): (props: PropsOf<T>) => import("../components").Node;
+//# sourceMappingURL=withDefaults.d.ts.map

package/lib/utils/withDefaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withDefaults.d.ts","sourceRoot":"","sources":["../../src/lib/utils/withDefaults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,eAAe,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAE1E;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,iBAAiB,GAAG,eAAe,EACxE,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,IAGZ,OAAO,OAAO,CAAC,CAAC,CAAC,kCAC1B"}

package/lib/utils/withDefaults.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "@efxlab/motion-canvas-2d/lib/jsx-runtime";
+/**
+ * Create a higher order component with default props.
+ *
+ * @example
+ * ```tsx
+ * const MyTxt = withDefaults(Txt, {
+ *   fill: '#f3303f',
+ * });
+ *
+ * // ...
+ *
+ * view.add(<MyTxt>Hello, World!</MyTxt>);
+ * ```
+ *
+ * @param component - The base class or function component to wrap.
+ * @param defaults - The default props to apply.
+ */
+export function withDefaults(component, defaults) {
+    const Node = component;
+    return (props) => _jsx(Node, { ...defaults, ...props });
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2l0aERlZmF1bHRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi91dGlscy93aXRoRGVmYXVsdHMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFFQTs7Ozs7Ozs7Ozs7Ozs7OztHQWdCRztBQUNILE1BQU0sVUFBVSxZQUFZLENBQzFCLFNBQVksRUFDWixRQUFvQjtJQUVwQixNQUFNLElBQUksR0FBRyxTQUFnQixDQUFDO0lBQzlCLE9BQU8sQ0FBQyxLQUFpQixFQUFFLEVBQUUsQ0FBQyxLQUFDLElBQUksT0FBSyxRQUFRLEtBQU0sS0FBSyxHQUFJLENBQUM7QUFDbEUsQ0FBQyJ9

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@efxlab/motion-canvas-2d",
+  "version": "4.0.0",
+  "description": "A 2D renderer for Motion Canvas",
+  "author": "motion-canvas",
+  "homepage": "https://motioncanvas.io/",
+  "bugs": "https://github.com/motion-canvas/motion-canvas/issues",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "tspc -p src/lib -w",
+    "build": "npm run build-lib && npm run build-editor",
+    "build-lib": "tspc -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/electroheadfx/efx-motion-canvas.git"
+  },
+  "files": [
+    "lib",
+    "editor",
+    "src",
+    "tsconfig.project.json"
+  ],
+  "devDependencies": {
+    "@efxlab/motion-canvas-internal": "workspace:*",
+    "@efxlab/motion-canvas-ui": "workspace:*",
+    "@preact/signals": "^1.2.1",
+    "@types/node": "^25.2.3",
+    "clsx": "^2.0.0",
+    "jsdom": "^22.1.0",
+    "preact": "10.19.3",
+    "ts-patch": "^3.3.0",
+    "vitest": "^0.34.6"
+  },
+  "dependencies": {
+    "@codemirror/language": "^6.10.1",
+    "@efxlab/motion-canvas-core": "workspace:*",
+    "@lezer/common": "^1.2.1",
+    "@lezer/highlight": "^1.2.0",
+    "code-fns": "^0.8.2",
+    "escape-string-regexp": "^5.0.0",
+    "mathjax-full": "^3.2.2",
+    "parse-svg-path": "^0.1.2"
+  }
+}

package/src/editor/NodeInspectorConfig.tsx

@@ -0,0 +1,76 @@
+import {
+  AutoField,
+  Button,
+  Group,
+  Label,
+  Pane,
+  PluginInspectorConfig,
+  Separator,
+  UnknownField,
+  findAndOpenFirstUserFile,
+  useApplication,
+} from '@efxlab/motion-canvas-ui';
+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 '@efxlab/motion-canvas-core';
+import {
+  MouseButton,
+  OverlayWrapper,
+  PluginOverlayConfig,
+  useViewportContext,
+  useViewportMatrix,
+} from '@efxlab/motion-canvas-ui';
+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 '@efxlab/motion-canvas-2d';
+import {SceneRenderEvent} from '@efxlab/motion-canvas-core';
+import {useApplication, useCurrentScene} from '@efxlab/motion-canvas-ui';
+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 = '@efxlab/motion-canvas-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 '@efxlab/motion-canvas-ui';
+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/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>
+  );
+}