feat(canvas): first-class inlined asset imports in the build recipe

Phase 4 (runtime expansion, code side) of the canvas application build
pipeline plan: svg imports now compile to data URLs (usable directly as
img/css sources) alongside json imports, with a shared contract fixture so
the cloud adapter must inline them identically. Binary asset formats,
workers, and WebAssembly need a binary source representation and land with
the build-service schema evolution.

Generated-By: PostHog Code
Task-Id: 9e9a7b3c-f90d-4867-aa0d-b9acc83e26e1

Author: k11kirky

packages/shared/src/canvas-build-fixtures.ts

@@ -125,6 +125,27 @@ export const CANVAS_BUILD_CONTRACT_FIXTURES: CanvasBuildContractFixture[] = [
     }),
     expected: { status: "ready" },
   },
+  {
+    name: "asset imports (svg data-url + json)",
+    project: project({
+      [CANVAS_ENTRY_HTML]: HTML_SHELL(
+        '    <div id="root"></div>\n    <script type="module" src="/src/main.ts"></script>',
+      ),
+      "src/main.ts": [
+        'import logo from "./logo.svg";',
+        'import config from "./config.json";',
+        'const img = document.createElement("img");',
+        "img.src = logo;",
+        "img.alt = config.title;",
+        'document.getElementById("root")?.append(img);',
+        "export {};",
+      ].join("\n"),
+      "src/logo.svg":
+        '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="#f54d00"/></svg>',
+      "src/config.json": '{ "title": "hedgehog" }',
+    }),
+    expected: { status: "ready" },
+  },
   {
     name: "import of a non-admitted package",
     project: project(

packages/workspace-server/src/services/canvas-build/canvas-build.test.ts

@@ -97,6 +97,24 @@ describe("CanvasBuildService", () => {
     expect(imports).not.toContain("dayjs");
   });
 
+  it("inlines svg and json asset imports into the bundle", async () => {
+    const fixture = CANVAS_BUILD_CONTRACT_FIXTURES.find(
+      (f) => f.name === "asset imports (svg data-url + json)",
+    );
+    if (!fixture) throw new Error("asset fixture missing");
+    const result = await service.buildCanvas({
+      project: fixture.project,
+      mode: "validate",
+    });
+
+    expect(result.status).toBe("ready");
+    const js = result.files?.find((f) => f.path.endsWith(".js"));
+    // The svg became a data URL and the json a literal — no asset fetches at
+    // runtime and nothing left for the sandbox CSP to block.
+    expect(js?.content).toContain("data:image/svg+xml");
+    expect(js?.content).toContain("hedgehog");
+  });
+
   it("reports bundle errors with the failing file and line", async () => {
     const project = createCanvasStarterProject();
     project.files["src/main.ts"] =

packages/workspace-server/src/services/canvas-build/canvas-build.ts

@@ -61,7 +61,10 @@ const LOADERS: Record<string, esbuild.Loader> = {
   ".jsx": "jsx",
   ".css": "css",
   ".json": "json",
-  ".svg": "text",
+  // Inlined assets: importing an svg yields a data URL usable directly as an
+  // img/css source. Binary formats need a binary source representation and
+  // land with the build-service schema evolution.
+  ".svg": "dataurl",
   ".txt": "text",
 };