feat: introduce local-first SVG workbench

2026-08-02 16:31:49 +02:00
commit 39d9802daa
97 changed files with 20702 additions and 0 deletions
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import type { AnimationDefinition } from "../../src/animation/animation.types";
+import {
+  animationStyle,
+  withAnimationPreview,
+} from "../../src/animation/preview";
+
+const fade: AnimationDefinition = {
+  id: "fade",
+  name: "Fade",
+  targetNodeKey: "id:shape",
+  property: "opacity",
+  kind: "style",
+  enabled: true,
+  keyframes: [
+    { offset: 0, value: "0" },
+    { offset: 1, value: "1" },
+  ],
+  timing: {
+    durationMs: 500,
+    delayMs: 20,
+    iterations: "infinite",
+    direction: "alternate",
+    fillMode: "both",
+    easing: "ease-in-out",
+  },
+};
+
+describe("isolated animation preview", () => {
+  it("creates project-side CSS targeting only projection metadata", () => {
+    const css = animationStyle([fade]);
+    expect(css).toContain("@keyframes svg-tools-animation-0");
+    expect(css).toContain('[data-svg-tools-node="id:shape"]');
+    expect(css).toContain("500ms ease-in-out 20ms infinite alternate both");
+  });
+
+  it("injects preview metadata without mutating the input projection", () => {
+    const source =
+      '<svg xmlns="http://www.w3.org/2000/svg"><circle data-svg-tools-node="id:shape"/></svg>';
+    const result = withAnimationPreview(source, [fade]);
+    expect(source).not.toContain("data-svg-tools-preview");
+    expect(result).toContain('data-svg-tools-preview="animation"');
+  });
+
+  it("rejects unsafe properties and CSS rule or URL injection", () => {
+    expect(() =>
+      animationStyle([{ ...fade, property: "background-image" }]),
+    ).toThrow(/not application-safe/u);
+    expect(() =>
+      animationStyle([
+        {
+          ...fade,
+          keyframes: [{ offset: 0, value: "url(https://evil.test)" }],
+        },
+      ]),
+    ).toThrow(/URLs or external resources/u);
+    expect(() =>
+      animationStyle([
+        {
+          ...fade,
+          timing: { ...fade.timing, easing: "linear; color:red" },
+        },
+      ]),
+    ).toThrow(/unsafe animation easing/u);
+  });
+
+  it("omits disabled animations", () => {
+    expect(animationStyle([{ ...fade, enabled: false }])).toBe("");
+  });
+});