[Grida Canvas] RC

AGENTS.md

@@ -153,4 +153,10 @@ pnpm turbo build
 
 # run dev
 pnpm turbo dev
+
+# run typecheck
+pnpm turbo typecheck # fallback when build fails due to network issues (nextjs package might fail due to font fetching issues)
 ```
+
+Note: `typecheck` still rely on packages build artifacts, so it will fail if the build fails.
+To handle this, you can build the `/packages/*`, then run typecheck. (when networking is not available)

apps/backgrounds/package.json

@@ -7,7 +7,8 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@next/third-parties": "15.3.2",

apps/blog/package.json

@@ -12,7 +12,7 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@docusaurus/core": "3.7.0",

apps/viewer/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
   },
   "packageManager": "pnpm@10.10.0",
   "dependencies": {

editor/grida-canvas-react/provider.tsx

@@ -16,7 +16,7 @@ import { domapi } from "../grida-canvas/backends/dom";
 import cmath from "@grida/cmath";
 import type { Action } from "@/grida-canvas/action";
 import mixed, { PropertyCompareFn } from "@grida/mixed-properties";
-import deepEqual from "deep-equal";
+import equal from "fast-deep-equal";
 import { toast } from "sonner";
 import { is_direct_component_consumer } from "@/grida-canvas-utils/utils/supports";
 import { Editor } from "@/grida-canvas/editor";
@@ -247,25 +247,17 @@ const compareNodeProperty: PropertyCompareFn<
       // support gradient (as the id should be ignored)
       const { id: __, ..._a } = (a ?? {}) as cg.AnyPaint;
       const { id: _, ..._b } = (b ?? {}) as cg.AnyPaint;
-      return deepEqual(_a, _b);
+      return equal(_a, _b);
   }
-  return deepEqual(a, b);
+  return equal(a, b);
 };
 
 export function useCurrentSelection() {
   const instance = useCurrentEditor();
-  const state = useEditorState(instance, (state) => ({
-    selection: state.selection,
-    document: state.document,
-  }));
-
-  const selection = state.selection;
-
-  const nodes = useMemo(() => {
-    return selection.map((node_id) => {
-      return state.document.nodes[node_id];
-    });
-  }, [selection, state.document.nodes]);
+  const selection = useEditorState(instance, (state) => state.selection);
+  const nodes = useEditorState(instance, (state) =>
+    selection.map((id) => state.document.nodes[id])
+  );
 
   const mixedProperties = useMemo(
     () =>

editor/grida-canvas-react/viewport/ui/path-editor.tsx

@@ -11,6 +11,13 @@ import { cn } from "@/components/lib/utils";
 import { svg } from "@/grida-canvas-utils/svg";
 import assert from "assert";
 
+function transformDelta(v: cmath.Vector2, t: cmath.Transform): cmath.Vector2 {
+  return cmath.vector2.transform(v, [
+    [t[0][0], t[0][1], 0],
+    [t[1][0], t[1][1], 0],
+  ]);
+}
+
 export function SurfacePathEditor({ node_id: _node_id }: { node_id: string }) {
   const { debug } = useEditorFlagsState();
   const { tool } = useToolState();
@@ -84,7 +91,7 @@ export function SurfacePathEditor({ node_id: _node_id }: { node_id: string }) {
               transform
             )}
             b={cmath.vector2.transform(path_cursor_position, transform)}
-            ta={next_ta ? next_ta : undefined}
+            ta={next_ta ? transformDelta(next_ta, transform) : undefined}
           />
         </>
       )}
@@ -93,6 +100,8 @@ export function SurfacePathEditor({ node_id: _node_id }: { node_id: string }) {
         const b = vertices[s.b].p;
         const ta = s.ta;
         const tb = s.tb;
+        const ta_scaled = transformDelta(ta, transform);
+        const tb_scaled = transformDelta(tb, transform);
         const is_neighbouring = a_point === s.a || a_point === s.b;
         if (!is_neighbouring) return null;
 
@@ -115,6 +124,7 @@ export function SurfacePathEditor({ node_id: _node_id }: { node_id: string }) {
                     cmath.vector2.add(a, offset, ta),
                     transform
                   )}
+                  ta={ta_scaled}
                 />
               )}
               {!cmath.vector2.isZero(tb) && (
@@ -129,6 +139,7 @@ export function SurfacePathEditor({ node_id: _node_id }: { node_id: string }) {
                     cmath.vector2.add(b, offset, tb),
                     transform
                   )}
+                  tb={tb_scaled}
                 />
               )}
               {/* preview the next ta - cannot be edited */}

editor/grida-canvas/editor.ts

@@ -138,6 +138,10 @@ export class Editor
     });
   }
 
+  public __get_node_siblings(node_id: string): string[] {
+    return editor.dq.getSiblings(this.mstate.document_ctx, node_id);
+  }
+
   public dispatch(action: Action, force: boolean = false) {
     if (this._locked && !force) return;
     this.mstate = reducer(this.mstate, action);

editor/grida-canvas/index.ts

@@ -1418,6 +1418,7 @@ export namespace editor.dq {
     const parent_id = getParentId(context, node_id);
 
     if (!parent_id) {
+      // FIXME: this is not scoped by the scene - may result unexpected behavior.
       // If the node has no parent, it is at the root level, and all nodes without parents are its "siblings."
       return Object.keys(context.__ctx_nid_to_parent_id).filter(
         (id) => context.__ctx_nid_to_parent_id[id] === null

editor/grida-canvas/reducers/index.ts

@@ -7,7 +7,7 @@ import {
 } from "./methods";
 import eventTargetReducer from "./event-target.reducer";
 import documentReducer from "./document.reducer";
-import equal from "deep-equal";
+import equal from "fast-deep-equal";
 import grida from "@grida/schema";
 import { editor } from "@/grida-canvas";
 import nid from "./tools/id";

editor/scaffolds/playground-canvas/modals/import-from-grida-file.tsx

@@ -56,7 +56,7 @@ export function ImportFromGridaFileJsonDialog({
         </DialogHeader>
         <div className="space-y-4">
           <Label>Select a .grida file</Label>
-          <Card className="flex items-center justify-center">
+          <Card className="flex items-center justify-center p-0">
             <Button
               onClick={openFilePicker}
               disabled={loading}

package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "test": "turbo run test",
+    "typecheck": "turbo run typecheck",
     "publish-packages": "turbo run build lint test && changeset version && changeset publish"
   },
   "packageManager": "pnpm@10.10.0",

packages/grida-canvas-schema/grida.ts

@@ -542,13 +542,16 @@ export namespace grida.program.document {
         __ctx_nid_to_children_ids: {},
       };
 
+      // First, default every node’s parent to null
+      for (const node_id of ctx.__ctx_nids) {
+        ctx.__ctx_nid_to_parent_id[node_id] = null;
+        ctx.__ctx_nid_to_children_ids[node_id] = [];
+      }
+
+      // Then walk through and hook up actual parent/children relationships
       for (const node_id in nodes) {
         const node = nodes[node_id];
 
-        // Ensure the parent has an array in __ctx_nid_to_children_ids
-        ctx.__ctx_nid_to_children_ids[node_id] =
-          ctx.__ctx_nid_to_children_ids[node_id] ?? [];
-
         // If the node has children, map each child to its parent and add to the parent’s child array
         if (Array.isArray((node as nodes.UnknwonNode).children)) {
           for (const child_id of (node as nodes.i.IChildrenReference)

packages/grida-mixed-properties/index.ts

@@ -1,4 +1,4 @@
-import deepEqual from "deep-equal";
+import equal from "fast-deep-equal";
 
 type MixedProperties<T, S> = {
   [K in keyof T]: MixedProperty<T[K], S>;
@@ -89,7 +89,7 @@ export default function mixed<T extends Record<string, any>, S>(
     idKey,
     ignoredKey: ignoredKeys = [],
     mixed: mixedIndicator,
-    compare = (_key: any, a: any, b: any) => deepEqual(a, b),
+    compare = (_key: any, a: any, b: any) => equal(a, b),
   }: MixedOptions<T, S>
 ): MixedProperties<T, S> {
   if (!objects.length) return {} as MixedProperties<T, S>;

packages/grida-mixed-properties/package.json

@@ -27,12 +27,10 @@
     "dist"
   ],
   "dependencies": {
-    "deep-equal": "^2.2.3"
+    "fast-deep-equal": "^3.1.3"
   },
   "jest": {
     "preset": "ts-jest"
   },
-  "devDependencies": {
-    "@types/deep-equal": "^1.0.4"
-  }
+  "devDependencies": {}
 }

packages/grida-mixed-properties/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "noImplicitAny": true,
     "strict": true

turbo.json

@@ -8,8 +8,8 @@
       "dependsOn": ["^build"],
       "outputs": [".next/**", "!.next/cache/**", "build/**", "dist/**"]
     },
-    "check-types": {
-      "dependsOn": ["^check-types"]
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
     },
     "dev": {
       "persistent": true,