sketchmark 2.1.7 → 2.1.9

package/dist/tests/run.js

@@ -110,6 +110,36 @@ test("renders path, text, image, and group to SVG and HTML", () => {
     assert(svg.includes('stroke-width="1"'), "path stroke should default to width 1 when stroke is set");
     assert((0, src_1.renderToHtml)(doc).includes("Sketchmark Kernel Visual"), "should render HTML shell");
 });
+test("renders a self-contained interactive embed HTML shell", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 240, height: 140, background: "#f8fafc", duration: 1, fps: 12 },
+        elements: [
+            {
+                id: "label",
+                type: "text",
+                text: "Embed preview",
+                x: 40,
+                y: 70,
+                fill: "#0f172a",
+                timeline: {
+                    tracks: {
+                        position: { keyframes: [[0, [40, 70]], [1, [180, 70]]], ease: "linear" }
+                    }
+                }
+            }
+        ]
+    };
+    const html = (0, src_1.renderToEmbedHtml)(doc, { title: "Embed Demo", maxFrames: 16 });
+    assert(html.includes("Sketchmark Embed"), "should include embed chrome");
+    assert(html.includes("background: transparent;"), "should default embed chrome to a transparent background");
+    assert(html.includes("prefers-color-scheme: dark"), "should adapt embed chrome for dark mode");
+    assert(html.includes('data-export-format="svg"'), "should include export controls");
+    assert(html.includes('data-export-format="mp4"'), "should include mp4 export");
+    assert(html.includes("__SKETCHMARK_EMBED__"), "should expose a runtime controller");
+    assert(html.includes("loadMp4Muxer"), "should inline mp4 export runtime");
+    assert(html.includes("sketchmark-rendered"), "should notify host frames when ready");
+});
 test("resolves element-local timeline tracks", () => {
     const doc = {
         version: 1,
@@ -462,6 +492,58 @@ test("compiles per-property curves and timing offsets", () => {
     assert(keyframes[1].time === 1.5, `global and property offsets should shift the target keyframe, got ${keyframes[1].time}`);
     assert(near((0, src_1.resolveVisualFrame)(animated, 1).elements[0].x, 0), "hold curve should keep the point at the base value before the target");
 });
+test("inserts element presets at root and inside groups", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 320, height: 180, duration: 2 },
+        elements: [{ id: "group", type: "group", x: 20, y: 30, width: 120, height: 80, children: [] }]
+    };
+    const rootInsert = (0, src_1.insertElementPreset)(doc, "rectangle");
+    assert(rootInsert.element.id === "rectangle", "root preset should use the preset name as id");
+    assert((0, src_1.validateVisualDocument)(rootInsert.document).ok, "root preset insert should validate");
+    assert((0, src_1.findElementById)(rootInsert.document, "rectangle").type === "path", "rectangle preset should be a path");
+    const nestedInsert = (0, src_1.insertElementPreset)(rootInsert.document, "text", { parentId: "group" });
+    assert(nestedInsert.parentId === "group", "nested insert should report parent id");
+    assert((0, src_1.findElementById)(nestedInsert.document, "group").children.some((item) => item.id === "text"), "nested preset should be added to group children");
+    const duplicate = (0, src_1.insertElementPreset)(nestedInsert.document, "text", { parentId: "group" });
+    assert(duplicate.element.id === "text_2", "duplicate preset ids should be made unique");
+});
+test("reorders and deletes elements inside their sibling layer", () => {
+    const doc = {
+        version: 1,
+        canvas: { width: 320, height: 180, duration: 2 },
+        elements: [
+            { id: "a", type: "point", x: 0, y: 0 },
+            { id: "b", type: "point", x: 10, y: 0 },
+            {
+                id: "group",
+                type: "group",
+                x: 20,
+                y: 30,
+                width: 120,
+                height: 80,
+                children: [
+                    { id: "child1", type: "point", x: 0, y: 0 },
+                    { id: "child2", type: "point", x: 10, y: 0 }
+                ]
+            }
+        ]
+    };
+    const front = (0, src_1.reorderElement)(doc, "a", { direction: "front" });
+    assert(front.previousIndex === 0 && front.index === 2, "root reorder should report old and new indexes");
+    assert((front.document.elements ?? []).map((item) => item.id).join(",") === "b,group,a", "front should move the element to the end of root order");
+    const backward = (0, src_1.reorderElement)(front.document, "a", { direction: "backward" });
+    assert((backward.document.elements ?? []).map((item) => item.id).join(",") === "b,a,group", "backward should move one layer down");
+    const nested = (0, src_1.reorderElement)(backward.document, "child1", { direction: "front" });
+    assert(nested.parentId === "group", "nested reorder should report parent id");
+    assert((0, src_1.findElementById)(nested.document, "group").children.map((item) => item.id).join(",") === "child2,child1", "nested reorder should only affect group children");
+    const deleted = (0, src_1.deleteElement)(nested.document, "child2");
+    assert(deleted.parentId === "group", "nested delete should report parent id");
+    assert(!(0, src_1.findElementById)(deleted.document, "child2"), "deleted child should be removed");
+    assert((0, src_1.findElementById)(deleted.document, "group").children.map((item) => item.id).join(",") === "child1", "delete should preserve remaining siblings");
+    const deletedGroup = (0, src_1.deleteElement)(deleted.document, "group");
+    assert(!(0, src_1.findElementById)(deletedGroup.document, "group") && !(0, src_1.findElementById)(deletedGroup.document, "child1"), "deleting a group should remove its children");
+});
 test("edits nested element properties and timeline keyframes", () => {
     const doc = {
         version: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "description": "Render kernel for Sketchmark visual documents.",
   "license": "MIT",
   "type": "commonjs",
@@ -25,6 +25,11 @@
       "require": "./dist/src/browser-export.js",
       "default": "./dist/src/browser-export.js"
     },
+    "./edit": {
+      "types": "./dist/src/edit.d.ts",
+      "require": "./dist/src/edit.js",
+      "default": "./dist/src/edit.js"
+    },
     "./editor": {
       "types": "./bin/editor-ui.d.ts",
       "require": "./bin/editor-ui.cjs",