sketchmark 2.0.0 → 2.1.0

package/examples/dev-docs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="960" viewBox="0 0 1280 960" role="img"><rect x="0" y="0" width="1280" height="960" fill="#ffffff"/><text id="title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="36" font-weight="700" fill="#1a1a2e"><tspan x="80" y="82">Getting Started with the Render API</tspan></text><text id="subtitle" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#6b7280"><tspan x="80" y="124">A concise guide to integrating the render pipeline into your application.</tspan></text><path id="divider" d="M 80 164 L 1200 164" fill="none" stroke="#e5e7eb" stroke-width="1"/><text id="para1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#1a1a2e"><tspan x="80" y="203.5">The Render API exposes a minimal surface for compiling visual documents into</tspan><tspan x="80" y="229">output frames. It accepts a validated kernel document and a target time, then</tspan><tspan x="80" y="254.5">resolves all timeline interpolations and returns a flat list of positioned primitives</tspan><tspan x="80" y="280">ready for rasterization or SVG serialization.</tspan></text><text id="para2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="400" fill="#1a1a2e"><tspan x="80" y="313.5">Before calling the render function, ensure your document passes schema</tspan><tspan x="80" y="339">validation. Invalid documents will throw a structured error with path information</tspan><tspan x="80" y="364.5">pointing to the offending node. This keeps the pipeline predictable and safe.</tspan></text><path id="code-bg" d="M 80 406 L 1200 406 L 1200 578 L 80 578 Z" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1"/><text id="code-text" text-anchor="start" dominant-baseline="middle" font-family="JetBrains Mono, Fira Code, monospace" font-size="13" font-weight="400" fill="#334155"><tspan x="100" y="430.5">import { validateVisualDocument, resolveVisualFrame } from "sketchmark";</tspan><tspan x="100" y="453.9"></tspan><tspan x="100" y="477.3">const doc = JSON.parse(fs.readFileSync("scene.visual.json", "utf8"));</tspan><tspan x="100" y="500.7">validateVisualDocument(doc);</tspan><tspan x="100" y="524.1"></tspan><tspan x="100" y="547.5">const frame = resolveVisualFrame(doc, { time: 1.5 });</tspan><tspan x="100" y="570.9">console.log(frame.elements.length, "primitives resolved");</tspan></text><text id="list-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="600" fill="#1a1a2e"><tspan x="80" y="624">Key Concepts</tspan></text><path id="bullet-dot-0" d="M 84 657 A 3 3 0 1 1 84 657.01 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="bullet-text-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#1a1a2e"><tspan x="98" y="657">Documents must declare version: 1 and a canvas with width and height.</tspan></text><path id="bullet-dot-1" d="M 84 687 A 3 3 0 1 1 84 687.01 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="bullet-text-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#1a1a2e"><tspan x="98" y="687">Elements are flat arrays of path, text, image, point, or group primitives.</tspan></text><path id="bullet-dot-2" d="M 84 717 A 3 3 0 1 1 84 717.01 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="bullet-text-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#1a1a2e"><tspan x="98" y="717">Timelines are element-local — each element owns its own tracks and keyframes.</tspan></text><path id="bullet-dot-3" d="M 84 747 A 3 3 0 1 1 84 747.01 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="bullet-text-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#1a1a2e"><tspan x="98" y="747">Interpolation resolves per-track using cubic bezier, graph, or hold curves.</tspan></text><path id="bullet-dot-4" d="M 84 777 A 3 3 0 1 1 84 777.01 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="bullet-text-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#1a1a2e"><tspan x="98" y="777">The output frame contains fully resolved properties with no remaining references.</tspan></text><path id="btn-bg" d="M 548 840 L 732 840 Q 740 840 740 848 L 740 876 Q 740 884 732 884 L 548 884 Q 540 884 540 876 L 540 848 Q 540 840 548 840 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="btn-label" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="15" font-weight="600" fill="#ffffff"><tspan x="640" y="862">View Full Reference</tspan></text><text id="footer" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#6b7280"><tspan x="80" y="926">Last updated May 2026 · Sketchmark v1.0 · MIT License</tspan></text></svg>

package/examples/dev-docs.visual.json

@@ -0,0 +1,248 @@
+{
+  "version": 1,
+  "canvas": {
+    "width": 1280,
+    "height": 960,
+    "background": "#ffffff"
+  },
+  "elements": [
+    {
+      "id": "title",
+      "type": "text",
+      "x": 80,
+      "y": 64,
+      "text": "Getting Started with the Render API",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 36,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 700,
+      "fill": "#1a1a2e"
+    },
+    {
+      "id": "subtitle",
+      "type": "text",
+      "x": 80,
+      "y": 116,
+      "text": "A concise guide to integrating the render pipeline into your application.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 16,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#6b7280"
+    },
+    {
+      "id": "divider",
+      "type": "path",
+      "d": "M 80 164 L 1200 164",
+      "stroke": "#e5e7eb",
+      "strokeWidth": 1,
+      "fill": "none"
+    },
+    {
+      "id": "para1",
+      "type": "text",
+      "x": 80,
+      "y": 196,
+      "text": "The Render API exposes a minimal surface for compiling visual documents into\noutput frames. It accepts a validated kernel document and a target time, then\nresolves all timeline interpolations and returns a flat list of positioned primitives\nready for rasterization or SVG serialization.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 15,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "lineHeight": 1.7,
+      "fill": "#1a1a2e",
+      "maxWidth": 1120
+    },
+    {
+      "id": "para2",
+      "type": "text",
+      "x": 80,
+      "y": 306,
+      "text": "Before calling the render function, ensure your document passes schema\nvalidation. Invalid documents will throw a structured error with path information\npointing to the offending node. This keeps the pipeline predictable and safe.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 15,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "lineHeight": 1.7,
+      "fill": "#1a1a2e",
+      "maxWidth": 1120
+    },
+    {
+      "id": "code-bg",
+      "type": "path",
+      "d": "M 80 406 L 1200 406 L 1200 578 L 80 578 Z",
+      "fill": "#f1f5f9",
+      "stroke": "#e2e8f0",
+      "strokeWidth": 1
+    },
+    {
+      "id": "code-text",
+      "type": "text",
+      "x": 100,
+      "y": 424,
+      "text": "import { validateVisualDocument, resolveVisualFrame } from \"sketchmark\";\n\nconst doc = JSON.parse(fs.readFileSync(\"scene.visual.json\", \"utf8\"));\nvalidateVisualDocument(doc);\n\nconst frame = resolveVisualFrame(doc, { time: 1.5 });\nconsole.log(frame.elements.length, \"primitives resolved\");",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "JetBrains Mono, Fira Code, monospace",
+      "weight": 400,
+      "lineHeight": 1.8,
+      "fill": "#334155",
+      "maxWidth": 1080
+    },
+    {
+      "id": "list-heading",
+      "type": "text",
+      "x": 80,
+      "y": 614,
+      "text": "Key Concepts",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 20,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "fill": "#1a1a2e"
+    },
+    {
+      "id": "bullet-dot-0",
+      "type": "path",
+      "d": "M 84 657 A 3 3 0 1 1 84 657.01 Z",
+      "fill": "#2563eb",
+      "stroke": "none"
+    },
+    {
+      "id": "bullet-text-0",
+      "type": "text",
+      "x": 98,
+      "y": 650,
+      "text": "Documents must declare version: 1 and a canvas with width and height.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 14,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#1a1a2e",
+      "maxWidth": 1102
+    },
+    {
+      "id": "bullet-dot-1",
+      "type": "path",
+      "d": "M 84 687 A 3 3 0 1 1 84 687.01 Z",
+      "fill": "#2563eb",
+      "stroke": "none"
+    },
+    {
+      "id": "bullet-text-1",
+      "type": "text",
+      "x": 98,
+      "y": 680,
+      "text": "Elements are flat arrays of path, text, image, point, or group primitives.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 14,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#1a1a2e",
+      "maxWidth": 1102
+    },
+    {
+      "id": "bullet-dot-2",
+      "type": "path",
+      "d": "M 84 717 A 3 3 0 1 1 84 717.01 Z",
+      "fill": "#2563eb",
+      "stroke": "none"
+    },
+    {
+      "id": "bullet-text-2",
+      "type": "text",
+      "x": 98,
+      "y": 710,
+      "text": "Timelines are element-local — each element owns its own tracks and keyframes.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 14,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#1a1a2e",
+      "maxWidth": 1102
+    },
+    {
+      "id": "bullet-dot-3",
+      "type": "path",
+      "d": "M 84 747 A 3 3 0 1 1 84 747.01 Z",
+      "fill": "#2563eb",
+      "stroke": "none"
+    },
+    {
+      "id": "bullet-text-3",
+      "type": "text",
+      "x": 98,
+      "y": 740,
+      "text": "Interpolation resolves per-track using cubic bezier, graph, or hold curves.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 14,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#1a1a2e",
+      "maxWidth": 1102
+    },
+    {
+      "id": "bullet-dot-4",
+      "type": "path",
+      "d": "M 84 777 A 3 3 0 1 1 84 777.01 Z",
+      "fill": "#2563eb",
+      "stroke": "none"
+    },
+    {
+      "id": "bullet-text-4",
+      "type": "text",
+      "x": 98,
+      "y": 770,
+      "text": "The output frame contains fully resolved properties with no remaining references.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 14,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#1a1a2e",
+      "maxWidth": 1102
+    },
+    {
+      "id": "btn-bg",
+      "type": "path",
+      "d": "M 548 840 L 732 840 Q 740 840 740 848 L 740 876 Q 740 884 732 884 L 548 884 Q 540 884 540 876 L 540 848 Q 540 840 548 840 Z",
+      "fill": "#2563eb",
+      "stroke": "none"
+    },
+    {
+      "id": "btn-label",
+      "type": "text",
+      "x": 640,
+      "y": 862,
+      "text": "View Full Reference",
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 15,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "fill": "#ffffff"
+    },
+    {
+      "id": "footer",
+      "type": "text",
+      "x": 80,
+      "y": 920,
+      "text": "Last updated May 2026 · Sketchmark v1.0 · MIT License",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 12,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#6b7280"
+    }
+  ]
+}