fix(studio): reject unsafe keyframe values (#1389)

packages/core/src/studio-api/helpers/finiteMutation.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { findUnsafeDomPatchValues, findUnsafeMutationValues } from "./finiteMutation";
+
+describe("finiteMutation", () => {
+  it("reports non-finite numbers before mutation serialization", () => {
+    expect(
+      findUnsafeMutationValues({
+        type: "set-arc-path",
+        segments: [{ curviness: Number.NaN, cp1: { x: Infinity, y: 0 } }],
+      }).map((field) => field.path),
+    ).toEqual(["body.segments[0].curviness", "body.segments[0].cp1.x"]);
+  });
+
+  it("treats null as unsafe because JSON serializes NaN and Infinity to null", () => {
+    expect(
+      findUnsafeMutationValues({
+        type: "update-property",
+        property: "x",
+        value: null,
+      }),
+    ).toEqual([{ path: "body.value", reason: "null" }]);
+  });
+
+  it("allows explicit DOM patch value removals while rejecting unsafe patch metadata", () => {
+    expect(
+      findUnsafeDomPatchValues({
+        target: { id: "title", selectorIndex: null },
+        operations: [{ type: "inline-style", property: "opacity", value: null }],
+      }),
+    ).toEqual([{ path: "body.target.selectorIndex", reason: "null" }]);
+  });
+
+  it("rejects non-finite DOM patch values before JSON serialization can turn them into null", () => {
+    expect(
+      findUnsafeDomPatchValues({
+        target: { id: "title" },
+        operations: [{ type: "inline-style", property: "left", value: Number.NaN }],
+      }),
+    ).toEqual([{ path: "body.operations[0].value", reason: "non-finite-number" }]);
+  });
+});

packages/core/src/studio-api/helpers/finiteMutation.ts

@@ -0,0 +1,38 @@
+export interface UnsafeMutationValue {
+  path: string;
+  reason: "non-finite-number" | "null";
+}
+
+interface FindUnsafeMutationValuesOptions {
+  allowNullPath?: (path: string) => boolean;
+}
+
+export function findUnsafeMutationValues(
+  value: unknown,
+  path = "body",
+  options: FindUnsafeMutationValuesOptions = {},
+): UnsafeMutationValue[] {
+  if (value === null) {
+    return options.allowNullPath?.(path) ? [] : [{ path, reason: "null" }];
+  }
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? [] : [{ path, reason: "non-finite-number" }];
+  }
+  if (!value || typeof value !== "object") return [];
+  if (Array.isArray(value)) {
+    return value.flatMap((item, index) =>
+      findUnsafeMutationValues(item, `${path}[${index}]`, options),
+    );
+  }
+  return Object.entries(value).flatMap(([key, item]) =>
+    findUnsafeMutationValues(item, `${path}.${key}`, options),
+  );
+}
+
+const DOM_PATCH_NULL_VALUE_PATH = /^body\.operations\[\d+\]\.value$/;
+
+export function findUnsafeDomPatchValues(value: unknown): UnsafeMutationValue[] {
+  return findUnsafeMutationValues(value, "body", {
+    allowNullPath: (path) => DOM_PATCH_NULL_VALUE_PATH.test(path),
+  });
+}

packages/core/src/studio-api/helpers/safePath.test.ts

@@ -19,18 +19,21 @@ function createProjectDir(): string {
 }
 
 describe("walkDir", () => {
-  it("hides internal HyperFrames backup files from project listings", () => {
+  it("hides internal HyperFrames files from project listings", () => {
     const projectDir = createProjectDir();
     mkdirSync(join(projectDir, ".hyperframes", "backup"), { recursive: true });
     mkdirSync(join(projectDir, ".hyperframes", "examples"), { recursive: true });
+    mkdirSync(join(projectDir, ".cache", "examples"), { recursive: true });
     mkdirSync(join(projectDir, "compositions"), { recursive: true });
     writeFileSync(join(projectDir, ".hyperframes", "backup", "snapshot.html"), "backup");
     writeFileSync(join(projectDir, ".hyperframes", "examples", "preset.html"), "preset");
+    writeFileSync(join(projectDir, ".cache", "examples", "preset.html"), "preset");
     writeFileSync(join(projectDir, "compositions", "scene.html"), "scene");
 
-    expect(walkDir(projectDir)).toEqual([
-      ".hyperframes/examples/preset.html",
-      "compositions/scene.html",
-    ]);
+    const files = walkDir(projectDir);
+    expect(files).toContain(".cache/examples/preset.html");
+    expect(files).toContain("compositions/scene.html");
+    expect(files).not.toContain(".hyperframes/backup/snapshot.html");
+    expect(files).not.toContain(".hyperframes/examples/preset.html");
   });
 });

packages/core/src/studio-api/helpers/safePath.ts

@@ -7,11 +7,7 @@ export function isSafePath(base: string, resolved: string): boolean {
   return resolved.startsWith(norm) || resolved === resolve(base);
 }
 
-const IGNORE_DIRS = new Set([".thumbnails", "node_modules", ".git"]);
-
-function shouldIgnoreDir(rel: string): boolean {
-  return rel === ".hyperframes/backup";
-}
+const IGNORE_DIRS = new Set([".thumbnails", ".hyperframes", "node_modules", ".git"]);
 
 /**
  * True when any directory segment of a relative path is a dot-directory or
@@ -30,7 +26,7 @@ export function walkDir(dir: string, prefix = ""): string[] {
   const files: string[] = [];
   for (const entry of readdirSync(dir, { withFileTypes: true })) {
     const rel = prefix ? `${prefix}/${entry.name}` : entry.name;
-    if (IGNORE_DIRS.has(entry.name) || shouldIgnoreDir(rel)) continue;
+    if (IGNORE_DIRS.has(entry.name)) continue;
     if (entry.isDirectory()) {
       files.push(...walkDir(join(dir, entry.name), rel));
     } else {