Embed viewer overhaul, Figma import fixes (geometry, strokes, lists), and CG bug fixes

.agents/skills/io-grida/SKILL.md

@@ -105,3 +105,27 @@ When you need to invalidate old files (field renumbering, semantic changes, remo
 Format: `MAJOR.MINOR.PATCH-prerelease+build` (e.g. `"0.91.0-beta+20260311"`).
 
 See `format/AGENTS.md` for the full review checklist.
+
+## Debugging FlatBuffers Issues
+
+### Verifying bytes
+
+Use `flatbuffers::root::<fbs::GridaFile>(&bytes)` (not `root_unchecked`) in a Rust test to run the FlatBuffers verifier. It reports the exact field chain with the bad offset.
+
+```rust
+use cg::io::generated::grida::grida as fbs;
+let result = flatbuffers::root::<fbs::GridaFile>(&bytes);
+```
+
+Note: the TS FlatBuffers decoder is more lenient than Rust — a TS-side round-trip may pass even when the bytes are structurally invalid. Always verify with the Rust verifier.
+
+### Inspecting .grida files
+
+```sh
+cargo run --example tool_io_grida -- path/to/file.grida --list-scenes
+cargo run --example tool_io_grida -- path/to/file.grida --scene 0 --verbose
+```
+
+### Cross-boundary tests
+
+`crates/grida-canvas-wasm/lib/__test__/bench-load-scene.test.ts` includes tests that TS-encode → WASM-decode `.grida` fixtures. These catch issues that only surface across the TS→Rust boundary.

crates/grida-canvas-wasm/lib/__test__/bench-load-scene.test.ts

@@ -22,10 +22,14 @@ import { readFileSync, existsSync, readdirSync } from "node:fs";
 import { resolve } from "node:path";
 import { beforeAll, describe, expect, it } from "vitest";
 import { Scene } from "../modules/canvas";
+import { io } from "../../../../packages/grida-canvas-io/index";
 
 /** Directory for local (gitignored) benchmark fixtures. */
 const LOCAL_FIXTURES_DIR = resolve(__dirname, "fixtures/local");
 
+/** Shared test fixtures (committed). */
+const SHARED_FIXTURES_DIR = resolve(__dirname, "../../../../fixtures/test-grida");
+
 let module: any;
 
 beforeAll(async () => {
@@ -149,3 +153,49 @@ describe("bench: load_scene (WASM-on-Node)", () => {
     });
   }
 });
+
+describe("cross-boundary: TS encode → WASM decode", () => {
+  /**
+   * Shared .grida fixtures: TS decodes → re-encodes → WASM loads → switchScene.
+   * Validates that the TS FlatBuffers encoder produces bytes the Rust decoder accepts.
+   */
+  const sharedFixtures = existsSync(SHARED_FIXTURES_DIR)
+    ? readdirSync(SHARED_FIXTURES_DIR)
+        .filter((f) => f.endsWith(".grida"))
+        .sort()
+    : [];
+
+  function createFile(name: string, bytes: Uint8Array): File {
+    const blob = new Blob([bytes as BlobPart], {
+      type: "application/octet-stream",
+    });
+    return new File([blob], name, { type: "application/octet-stream" });
+  }
+
+  for (const fixture of sharedFixtures) {
+    it(`${fixture}: TS re-encode → WASM loadSceneGrida → switchScene`, async () => {
+      const raw = new Uint8Array(
+        readFileSync(resolve(SHARED_FIXTURES_DIR, fixture))
+      );
+      const file = createFile(fixture, raw);
+      const loaded = await io.load(file);
+      if (loaded.document.scenes_ref.length === 0) return;
+
+      const sceneId = loaded.document.scenes_ref[0]!;
+      const reEncoded = io.GRID.encode(loaded.document);
+
+      const scene = createRasterScene();
+      scene.loadSceneGrida(reEncoded);
+
+      const wasmIds = scene.loadedSceneIds();
+      expect(wasmIds).toContain(sceneId);
+      expect(() => scene.switchScene(sceneId)).not.toThrow();
+
+      scene.dispose();
+    });
+  }
+
+  if (sharedFixtures.length === 0) {
+    it("no shared .grida fixtures found (skipped)", () => {});
+  }
+});

crates/grida-canvas-wasm/lib/modules/canvas.ts

@@ -12,6 +12,13 @@ const ApplicationCommandID = {
   Pan: 4,
   SelectAll: 5,
   DeselectAll: 6,
+  SelectChildren: 7,
+  SelectParent: 8,
+  SelectNextSibling: 9,
+  SelectPreviousSibling: 10,
+  ZoomToFit: 13,
+  ZoomToSelection: 14,
+  ZoomTo100: 15,
 } as const;
 
 // Surface response bitmask (matches Rust pack_surface_response)
@@ -766,6 +773,82 @@ export class Scene {
     this.module._command(this.appptr, ApplicationCommandID.DeselectAll, 0, 0);
   }
 
+  /**
+   * Navigate selection to direct children of the current selection (Enter).
+   */
+  selectChildren() {
+    this._assertAlive();
+    this.module._command(
+      this.appptr,
+      ApplicationCommandID.SelectChildren,
+      0,
+      0
+    );
+  }
+
+  /**
+   * Navigate selection to parent of the current selection (Shift+Enter).
+   */
+  selectParent() {
+    this._assertAlive();
+    this.module._command(this.appptr, ApplicationCommandID.SelectParent, 0, 0);
+  }
+
+  /**
+   * Navigate selection to next sibling, wrapping around (Tab).
+   */
+  selectNextSibling() {
+    this._assertAlive();
+    this.module._command(
+      this.appptr,
+      ApplicationCommandID.SelectNextSibling,
+      0,
+      0
+    );
+  }
+
+  /**
+   * Navigate selection to previous sibling, wrapping around (Shift+Tab).
+   */
+  selectPreviousSibling() {
+    this._assertAlive();
+    this.module._command(
+      this.appptr,
+      ApplicationCommandID.SelectPreviousSibling,
+      0,
+      0
+    );
+  }
+
+  /**
+   * Zoom the viewport to fit all content (Shift+1).
+   */
+  zoomToFit() {
+    this._assertAlive();
+    this.module._command(this.appptr, ApplicationCommandID.ZoomToFit, 0, 0);
+  }
+
+  /**
+   * Zoom the viewport to fit the current selection (Shift+2).
+   */
+  zoomToSelection() {
+    this._assertAlive();
+    this.module._command(
+      this.appptr,
+      ApplicationCommandID.ZoomToSelection,
+      0,
+      0
+    );
+  }
+
+  /**
+   * Reset viewport zoom to 100% (Shift+0).
+   */
+  zoomTo100() {
+    this._assertAlive();
+    this.module._command(this.appptr, ApplicationCommandID.ZoomTo100, 0, 0);
+  }
+
   highlightStrokes(opts?: {
     nodes?: string[];
     style?: { strokeWidth?: number; stroke?: string };
@@ -1184,7 +1267,12 @@ const PAINT_TYPE_MAP: Record<string, string> = {
 /**
  * Convert a CGColor from Rust u8 array `[r, g, b, a]` to JS RGBA32F object.
  */
-function convertColor(c: number[]): { r: number; g: number; b: number; a: number } {
+function convertColor(c: number[]): {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+} {
   return { r: c[0] / 255, g: c[1] / 255, b: c[2] / 255, a: c[3] / 255 };
 }
 

crates/grida-canvas-wasm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grida/canvas-wasm",
-  "version": "0.91.0-canary.16",
+  "version": "0.91.0-canary.17",
   "private": false,
   "description": "WASM bindings for Grida Canvas",
   "keywords": [
@@ -23,7 +23,7 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "prepack": "just build",
-    "prepublishOnly": "[ $(du -sk dist 2>/dev/null | cut -f1) -lt 15360 ]",
+    "prepublishOnly": "[ $(du -sk dist 2>/dev/null | cut -f1) -lt 20480 ]",
     "serve": "serve -p 4020",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"

crates/grida-canvas/src/cache/geometry.rs

@@ -40,6 +40,11 @@ struct GeoInput {
     transform: AffineTransform,
     width: f32,
     height: f32,
+    /// Content origin offset within the node's local space.
+    /// Non-zero for Path, Polygon, and Vector nodes whose shape data
+    /// is offset from the transform origin.
+    content_origin_x: f32,
+    content_origin_y: f32,
     kind: GeoNodeKind,
     render_bounds_inflation: RenderBoundsInflation,
 }
@@ -472,8 +477,8 @@ impl GeometryCache {
 
             GeoNodeKind::Leaf => {
                 let local_bounds = Rectangle {
-                    x: 0.0,
-                    y: 0.0,
+                    x: geo.content_origin_x,
+                    y: geo.content_origin_y,
                     width: geo.width,
                     height: geo.height,
                 };
@@ -552,13 +557,17 @@ impl GeometryCache {
 /// Build a `GeoInput` directly from schema data, bypassing any layout result.
 fn geo_input_from_schema(geo: &NodeGeoData) -> GeoInput {
     GeoInput {
+        // geo.rotation is in degrees (from Container/Tray); convert to
+        // radians for AffineTransform::new which expects radians.
         transform: AffineTransform::new(
             geo.schema_transform.x(),
             geo.schema_transform.y(),
-            geo.rotation,
+            geo.rotation.to_radians(),
         ),
         width: geo.schema_width,
         height: geo.schema_height,
+        content_origin_x: geo.content_origin_x,
+        content_origin_y: geo.content_origin_y,
         kind: geo.kind,
         render_bounds_inflation: geo.render_bounds_inflation,
     }
@@ -586,22 +595,33 @@ fn resolve_layout(
             transform: geo.schema_transform,
             width: geo.schema_width,
             height: geo.schema_height,
+            content_origin_x: 0.0,
+            content_origin_y: 0.0,
             kind: geo.kind,
             render_bounds_inflation: geo.render_bounds_inflation,
         },
         GeoNodeKind::InitialContainer => GeoInput {
             transform: geo.schema_transform,
             width: viewport_size.width,
             height: viewport_size.height,
+            content_origin_x: 0.0,
+            content_origin_y: 0.0,
             kind: geo.kind,
             render_bounds_inflation: geo.render_bounds_inflation,
         },
         GeoNodeKind::Container => {
             if let Some(computed) = layout_result.and_then(|r| r.get(id)) {
                 GeoInput {
-                    transform: AffineTransform::new(computed.x, computed.y, geo.rotation),
+                    // geo.rotation is in degrees; convert to radians.
+                    transform: AffineTransform::new(
+                        computed.x,
+                        computed.y,
+                        geo.rotation.to_radians(),
+                    ),
                     width: computed.width,
                     height: computed.height,
+                    content_origin_x: 0.0,
+                    content_origin_y: 0.0,
                     kind: geo.kind,
                     render_bounds_inflation: geo.render_bounds_inflation,
                 }
@@ -684,6 +704,8 @@ fn resolve_layout(
                 transform: local_transform,
                 width,
                 height,
+                content_origin_x: 0.0,
+                content_origin_y: 0.0,
                 kind: geo.kind,
                 render_bounds_inflation: geo.render_bounds_inflation,
             }
@@ -727,6 +749,8 @@ fn resolve_layout(
                 transform: local_transform,
                 width,
                 height,
+                content_origin_x: geo.content_origin_x,
+                content_origin_y: geo.content_origin_y,
                 kind: geo.kind,
                 render_bounds_inflation: geo.render_bounds_inflation,
             }