sketchmark 2.1.10 → 2.2.0

package/bin/editor-ui.cjs

@@ -699,6 +699,7 @@ async function deleteTreeElement(id) {
 }
 
 function renderTree() {
+  const elementsScroll = captureElementsTreeScroll();
   const canvas = doc && doc.canvas ? doc.canvas : {};
   const canvasSummary = Math.round(valueOr(canvas.width, 1)) + "x" + Math.round(valueOr(canvas.height, 1));
   const canvasBody =
@@ -785,6 +786,7 @@ function renderTree() {
     treeRoot.appendChild(row);
   }
   resizeElementsTree();
+  restoreElementsTreeScroll(elementsScroll);
 }
 
 function resizeElementsTree() {
@@ -802,8 +804,28 @@ function resizeElementsTree() {
   const available = treeRect.bottom - bodyRect.top - fixedRect.height - paddingBottom - 6;
   treeRoot.style.maxHeight = Math.max(72, Math.floor(available)) + "px";
 }
-
-function bindCanvasInputs() {
+
+function captureElementsTreeScroll() {
+  const treeRoot = document.getElementById("elementsTree");
+  return treeRoot ? { top: treeRoot.scrollTop, left: treeRoot.scrollLeft } : { top: 0, left: 0 };
+}
+
+function restoreElementsTreeScroll(scroll) {
+  const treeRoot = document.getElementById("elementsTree");
+  if (!treeRoot || !scroll) return;
+  const top = Math.max(0, Number(scroll.top) || 0);
+  const left = Math.max(0, Number(scroll.left) || 0);
+  treeRoot.scrollTop = top;
+  treeRoot.scrollLeft = left;
+  requestAnimationFrame(() => {
+    const nextRoot = document.getElementById("elementsTree");
+    if (!nextRoot) return;
+    nextRoot.scrollTop = top;
+    nextRoot.scrollLeft = left;
+  });
+}
+
+function bindCanvasInputs() {
   const bind = (id, callback) => {
     const input = document.getElementById(id);
     if (!input) return;
@@ -2191,12 +2213,14 @@ function scheduleSidebarKeyframe(property, valueReader) {
   }, 120);
 }
 
-function readNumberInput(id) {
-  const input = document.getElementById(id);
-  if (!input) return NaN;
-  const value = Number(input.value);
-  return Number.isFinite(value) ? value : NaN;
-}
+function readNumberInput(id) {
+  const input = document.getElementById(id);
+  if (!input) return NaN;
+  const raw = String(input.value ?? "").trim();
+  if (!raw) return NaN;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : NaN;
+}
 
 function readTextInput(id) {
   const input = document.getElementById(id);
@@ -2224,11 +2248,11 @@ async function mutate(path, body, options) {
   if (currentTime > duration) currentTime = duration;
   rebuildElementIndex();
   if (selectedId && !findElement(selectedId)) selectedId = "";
-  if (refreshTree) renderTree();
-  if (refreshInspector) renderInspector();
-  if (refreshTimeline) renderTimeline();
-  requestDraw();
-}
+  if (refreshTree) renderTree();
+  if (refreshInspector) renderInspector();
+  if (refreshTimeline) renderTimeline();
+  if (!options || options.requestDraw !== false) requestDraw();
+}
 
 stageWrap.addEventListener("wheel", (event) => {
   if (!stage.contains(event.target)) return;
@@ -2349,9 +2373,11 @@ stage.addEventListener("pointermove", (event) => {
   drag.changed = drag.changed || Math.abs(dx) > 0.25 || Math.abs(dy) > 0.25;
   let x = drag.x;
   let y = drag.y;
-  let rotation = drag.rotation;
-  let scale = drag.scale;
-  if (drag.mode === "move") {
+  let rotation = drag.rotation;
+  let scale = drag.scale;
+  let scaleX = drag.scaleX;
+  let scaleY = drag.scaleY;
+  if (drag.mode === "move") {
     x = Math.round(drag.x + dx);
     y = Math.round(drag.y + dy);
     setInput("propX", x);
@@ -2363,18 +2389,25 @@ stage.addEventListener("pointermove", (event) => {
     rotation = Math.round((drag.rotation + delta) * 100) / 100;
     setInput("propRotation", rotation);
     previewDraggedTransform("rotate(" + delta + " " + drag.center.x + " " + drag.center.y + ")");
-  } else {
-    const startDistance = Math.max(distance(drag.center, drag.start), 1);
-    const nextDistance = Math.max(distance(drag.center, point), 1);
-    const ratio = Math.max(0.05, nextDistance / startDistance);
-    drag.changed = drag.changed || Math.abs(ratio - 1) > 0.005;
-    scale = Math.max(0.05, Math.round((drag.scale * ratio) * 100) / 100);
-    setInput("propScale", scale);
-    previewDraggedTransform("translate(" + drag.center.x + " " + drag.center.y + ") scale(" + ratio + ") translate(" + (-drag.center.x) + " " + (-drag.center.y) + ")");
-  }
-  drag.value = { x, y, rotation, scale };
-  refreshHandles();
-});
+  } else {
+    const startDistance = Math.max(distance(drag.center, drag.start), 1);
+    const nextDistance = Math.max(distance(drag.center, point), 1);
+    const ratio = Math.max(0.05, nextDistance / startDistance);
+    drag.changed = drag.changed || Math.abs(ratio - 1) > 0.005;
+    if (drag.usesAxisScale) {
+      scaleX = scaleComponentValue(drag.scaleX, ratio);
+      scaleY = scaleComponentValue(drag.scaleY, ratio);
+      setInput("propScaleX", scaleX);
+      setInput("propScaleY", scaleY);
+    } else {
+      scale = scaleComponentValue(drag.scale, ratio);
+      setInput("propScale", scale);
+    }
+    previewDraggedTransform("translate(" + drag.center.x + " " + drag.center.y + ") scale(" + ratio + ") translate(" + (-drag.center.x) + " " + (-drag.center.y) + ")");
+  }
+  drag.value = { x, y, rotation, scale, scaleX, scaleY };
+  refreshHandles();
+});
 
 stage.addEventListener("pointerup", finishDrag);
 stage.addEventListener("pointercancel", finishDrag);
@@ -2400,21 +2433,25 @@ async function finishDrag() {
 
 function startDrag(event, target, mode) {
   if (!target || isElementLocked(target.id) || isElementHidden(target.id)) return;
-  const element = findElement(target.id);
-  if (!element) return;
-  const resolved = findResolvedElement(target.id) || element;
-  drag = {
+  const element = findElement(target.id);
+  if (!element) return;
+  const resolved = findResolvedElement(target.id) || element;
+  const scaleState = resolvedScaleState(resolved, element);
+  drag = {
     id: target.id,
     target,
     mode,
     start: parentPoint(event, target),
     center: targetCenterInParent(target),
-    x: Number(resolved.x ?? element.x ?? 0),
-    y: Number(resolved.y ?? element.y ?? 0),
-    rotation: Number(resolved.rotation ?? element.rotation ?? 0),
-    scale: Number(resolved.scale ?? element.scale ?? 1),
-    transform: target.getAttribute("transform") || "",
-    changed: false,
+    x: Number(resolved.x ?? element.x ?? 0),
+    y: Number(resolved.y ?? element.y ?? 0),
+    rotation: Number(resolved.rotation ?? element.rotation ?? 0),
+    scale: scaleState.scale,
+    scaleX: scaleState.scaleX,
+    scaleY: scaleState.scaleY,
+    usesAxisScale: scaleState.usesAxisScale,
+    transform: target.getAttribute("transform") || "",
+    changed: false,
     value: null
   };
   event.preventDefault();
@@ -2427,17 +2464,22 @@ async function commitDrag(snapshot) {
   if (!element || !snapshot.value) return;
   if (snapshot.mode === "move") {
     await commitEditedProperty(element, "position", [snapshot.value.x, snapshot.value.y]);
-  } else if (snapshot.mode === "rotate") {
-    await commitEditedProperty(element, "rotation", snapshot.value.rotation);
-  } else if (snapshot.mode === "scale") {
-    await commitEditedProperty(element, "scale", snapshot.value.scale);
-  }
-}
-
-async function commitEditedProperty(element, property, value) {
-  if (!ensureElementEditable(element.id)) return;
-  await mutate(apiPath("/keyframe"), { id: element.id, property, value, time: currentTime, curvePreset: "linear" });
-}
+  } else if (snapshot.mode === "rotate") {
+    await commitEditedProperty(element, "rotation", snapshot.value.rotation);
+  } else if (snapshot.mode === "scale") {
+    if (snapshot.usesAxisScale) {
+      await commitEditedProperty(element, "scaleX", snapshot.value.scaleX, { refreshTree: false, refreshInspector: false, refreshTimeline: false, requestDraw: false });
+      await commitEditedProperty(element, "scaleY", snapshot.value.scaleY);
+    } else {
+      await commitEditedProperty(element, "scale", snapshot.value.scale);
+    }
+  }
+}
+
+async function commitEditedProperty(element, property, value, options) {
+  if (!ensureElementEditable(element.id)) return;
+  await mutate(apiPath("/keyframe"), { id: element.id, property, value, time: currentTime, curvePreset: "linear" }, options);
+}
 
 function ensureElementEditable(id) {
   if (!id) return false;
@@ -2540,13 +2582,13 @@ function drawHandles(target) {
   const old = svg.querySelector("#__sketchmark_handles");
   if (old) old.remove();
   let box;
-  let matrix;
-  try {
-    box = target.getBBox();
-    matrix = elementMatrixInSvg(target, svg);
-  } catch {
-    return;
-  }
+  let matrix;
+  try {
+    box = editorHandleBox(target.getBBox());
+    matrix = elementMatrixInSvg(target, svg);
+  } catch {
+    return;
+  }
   if (!matrix) return;
   const topLeft = matrixPoint(svg, matrix, box.x, box.y);
   const topRight = matrixPoint(svg, matrix, box.x + box.width, box.y);
@@ -2611,17 +2653,34 @@ function elementMatrixInSvg(target, svg) {
 function targetCenterInParent(target) {
   const svg = target.ownerSVGElement || stage.querySelector("svg");
   if (!svg || !target.getBBox || !target.getCTM) return { x: 0, y: 0 };
-  try {
-    const box = target.getBBox();
-    const targetMatrix = target.getCTM();
-    const parent = target.parentNode && target.parentNode.getCTM ? target.parentNode : svg;
-    const parentMatrix = parent.getCTM ? parent.getCTM() : null;
+  try {
+    const box = editorHandleBox(target.getBBox());
+    const targetMatrix = target.getCTM();
+    const parent = target.parentNode && target.parentNode.getCTM ? target.parentNode : svg;
+    const parentMatrix = parent.getCTM ? parent.getCTM() : null;
     if (!targetMatrix || !parentMatrix) return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
     return matrixPoint(svg, parentMatrix.inverse().multiply(targetMatrix), box.x + box.width / 2, box.y + box.height / 2);
   } catch {
-    return { x: 0, y: 0 };
-  }
-}
+    return { x: 0, y: 0 };
+  }
+}
+function editorHandleBox(box) {
+  const minSize = 18;
+  const x = Number(box && box.x || 0);
+  const y = Number(box && box.y || 0);
+  const width = Math.max(0, Number(box && box.width || 0));
+  const height = Math.max(0, Number(box && box.height || 0));
+  const centerX = x + width / 2;
+  const centerY = y + height / 2;
+  const stableWidth = width < minSize ? minSize : width;
+  const stableHeight = height < minSize ? minSize : height;
+  return {
+    x: centerX - stableWidth / 2,
+    y: centerY - stableHeight / 2,
+    width: stableWidth,
+    height: stableHeight
+  };
+}
 function matrixPoint(svg, matrix, x, y) {
   const point = svg.createSVGPoint();
   point.x = x;
@@ -2644,14 +2703,33 @@ function svgNode(name) {
 function angleAround(center, point) {
   return Math.atan2(point.y - center.y, point.x - center.x) * 180 / Math.PI;
 }
-function distance(a, b) {
-  const dx = a.x - b.x;
-  const dy = a.y - b.y;
-  return Math.sqrt(dx * dx + dy * dy);
-}
-function supportsPosition(element) {
-  return element && ["path","point","text","image","group"].includes(element.type);
-}
+function distance(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function scaleComponentValue(value, ratio) {
+  const sign = Number(value) < 0 ? -1 : 1;
+  const next = Number(value) * Number(ratio);
+  const clamped = Math.max(0.05, Math.abs(Number.isFinite(next) ? next : sign * 0.05));
+  return Math.round(sign * clamped * 100) / 100;
+}
+function resolvedScaleState(resolved, element) {
+  const tracks = element && element.timeline && element.timeline.tracks ? element.timeline.tracks : {};
+  const usesAxisScale = resolved.scaleX !== undefined || resolved.scaleY !== undefined || element.scaleX !== undefined || element.scaleY !== undefined || tracks.scaleX || tracks.scaleY;
+  const baseScale = finiteNumber(resolved.scale ?? element.scale, 1);
+  const scaleX = finiteNumber(resolved.scaleX ?? element.scaleX, baseScale);
+  const scaleY = finiteNumber(resolved.scaleY ?? element.scaleY, baseScale);
+  return {
+    scale: baseScale,
+    scaleX,
+    scaleY,
+    usesAxisScale: Boolean(usesAxisScale)
+  };
+}
+function supportsPosition(element) {
+  return element && ["path","point","text","image","group"].includes(element.type);
+}
 function setInput(id, value) {
   const input = document.getElementById(id);
   if (input) input.value = value;
@@ -2752,18 +2830,67 @@ function setPointInputs(prefix, point) {
   setInput(prefix + "X", valueOr(value[0], 0));
   setInput(prefix + "Y", valueOr(value[1], 0));
 }
-function originPointValue(element) {
-  if (Array.isArray(element && element.origin) && element.origin.length === 2) {
-    const x = Number(element.origin[0]);
-    const y = Number(element.origin[1]);
-    if (Number.isFinite(x) && Number.isFinite(y)) return [x, y];
-  }
-  const x = Number(element && element.x);
-  const y = Number(element && element.y);
-  if (Number.isFinite(x) && Number.isFinite(y)) return [x, y];
-  return [0, 0];
-}
-function valueOr(value, fallback) { return value === undefined ? fallback : value; }
+function originPointValue(element) {
+  if (Array.isArray(element && element.origin) && element.origin.length === 2) {
+    const x = Number(element.origin[0]);
+    const y = Number(element.origin[1]);
+    if (Number.isFinite(x) && Number.isFinite(y)) return [x, y];
+  }
+  if (element && element.type === "group") {
+    return [
+      finiteNumber(element.x, 0) + finiteNumber(element.width, 0) / 2,
+      finiteNumber(element.y, 0) + finiteNumber(element.height, 0) / 2
+    ];
+  }
+  const x = Number(element && element.x);
+  const y = Number(element && element.y);
+  if (element && (element.type === "text" || element.type === "point") && Number.isFinite(x) && Number.isFinite(y)) return [x, y];
+  const box = editorElementBox(element);
+  if (box) return [box.x + box.width / 2, box.y + box.height / 2];
+  if (Number.isFinite(x) && Number.isFinite(y)) return [x, y];
+  return [0, 0];
+}
+function valueOr(value, fallback) { return value === undefined ? fallback : value; }
+function editorElementBox(element) {
+  if (!element) return null;
+  const target = element.id ? stage.querySelector("#" + cssId(element.id)) : null;
+  if (target && target.getBBox) {
+    try {
+      const box = target.getBBox();
+      if (Number.isFinite(box.x) && Number.isFinite(box.y) && Number.isFinite(box.width) && Number.isFinite(box.height)) {
+        return { x: box.x, y: box.y, width: box.width, height: box.height };
+      }
+    } catch {}
+  }
+  if (element.type === "image" || element.type === "group") {
+    const x = Number(element.x);
+    const y = Number(element.y);
+    const width = Number(element.width);
+    const height = Number(element.height);
+    if ([x, y, width, height].every(Number.isFinite)) return { x, y, width, height };
+  }
+  if (element.type === "path" && typeof element.d === "string") return pathDataBox(element.d);
+  return null;
+}
+function pathDataBox(data) {
+  const numbers = String(data || "").match(/-?\\d+(?:\\.\\d+)?(?:e[+-]?\\d+)?/gi);
+  if (!numbers || numbers.length < 2) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (let index = 0; index < numbers.length - 1; index += 2) {
+    const x = Number(numbers[index]);
+    const y = Number(numbers[index + 1]);
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+  if (![minX, minY, maxX, maxY].every(Number.isFinite)) return null;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
 function clipRadiusValue(element) {
   if (!element || !element.clip || typeof element.clip.d !== "string") return 0;
   const numbers = element.clip.d.match(/-?\\d+(?:\\.\\d+)?(?:e[+-]?\\d+)?/gi);

package/bin/preview-ui.d.ts

@@ -0,0 +1 @@
+export function previewHtml(title: string): string;

package/dist/src/edit.d.ts

@@ -58,3 +58,4 @@ export declare function listTimelineTracks(document: VisualDocument, id: string)
 }>;
 export declare function roundedRectClipPath(x: number, y: number, width: number, height: number, radius?: number): string;
 export declare function imageRoundedClip(element: Pick<ImageElement, "x" | "y" | "width" | "height">, radius?: number): ClipShape;
+export { deleteElement as remove, findElementById as find, insertElementPreset as insertPreset, listElementReferences as listReferences, listTimelineTracks as listTracks, removeTimelineKeyframe as removeKeyframe, reorderElement as reorder, setElementProperty as setProperty, setTimelineKeyframe as setKeyframe };

package/dist/src/edit.js

@@ -1,14 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listElementReferences = listElementReferences;
+exports.listReferences = listElementReferences;
 exports.findElementById = findElementById;
+exports.find = findElementById;
 exports.insertElementPreset = insertElementPreset;
+exports.insertPreset = insertElementPreset;
 exports.reorderElement = reorderElement;
+exports.reorder = reorderElement;
 exports.deleteElement = deleteElement;
+exports.remove = deleteElement;
 exports.setElementProperty = setElementProperty;
+exports.setProperty = setElementProperty;
 exports.setTimelineKeyframe = setTimelineKeyframe;
+exports.setKeyframe = setTimelineKeyframe;
 exports.removeTimelineKeyframe = removeTimelineKeyframe;
+exports.removeKeyframe = removeTimelineKeyframe;
 exports.listTimelineTracks = listTimelineTracks;
+exports.listTracks = listTimelineTracks;
 exports.roundedRectClipPath = roundedRectClipPath;
 exports.imageRoundedClip = imageRoundedClip;
 const animatable_1 = require("./animatable");

package/dist/src/index.d.ts

@@ -5,8 +5,10 @@ export * from "./diagnostics";
 export * from "./schema";
 export * from "./keyframes";
 export * from "./edit";
+export * as edit from "./edit";
 export { deleteElement, insertElementPreset, reorderElement } from "./edit";
 export * from "./animatable";
+export * as render from "./render";
 export * from "./render/svg";
 export * from "./render/html";
 export * from "./render/embed";

package/dist/src/index.js

@@ -10,11 +10,33 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reorderElement = exports.insertElementPreset = exports.deleteElement = void 0;
+exports.render = exports.reorderElement = exports.insertElementPreset = exports.deleteElement = exports.edit = void 0;
 __exportStar(require("./types"), exports);
 __exportStar(require("./validate"), exports);
 __exportStar(require("./normalize"), exports);
@@ -22,11 +44,13 @@ __exportStar(require("./diagnostics"), exports);
 __exportStar(require("./schema"), exports);
 __exportStar(require("./keyframes"), exports);
 __exportStar(require("./edit"), exports);
+exports.edit = __importStar(require("./edit"));
 var edit_1 = require("./edit");
 Object.defineProperty(exports, "deleteElement", { enumerable: true, get: function () { return edit_1.deleteElement; } });
 Object.defineProperty(exports, "insertElementPreset", { enumerable: true, get: function () { return edit_1.insertElementPreset; } });
 Object.defineProperty(exports, "reorderElement", { enumerable: true, get: function () { return edit_1.reorderElement; } });
 __exportStar(require("./animatable"), exports);
+exports.render = __importStar(require("./render"));
 __exportStar(require("./render/svg"), exports);
 __exportStar(require("./render/html"), exports);
 __exportStar(require("./render/embed"), exports);

package/dist/src/render/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./svg";
+export * from "./html";
+export * from "./embed";
+export { renderToSvg as svg, renderResolvedSvg as resolvedSvg } from "./svg";
+export { renderToHtml as html } from "./html";
+export { renderToEmbedHtml as embedHtml } from "./embed";

package/dist/src/render/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.embedHtml = exports.html = exports.resolvedSvg = exports.svg = void 0;
+__exportStar(require("./svg"), exports);
+__exportStar(require("./html"), exports);
+__exportStar(require("./embed"), exports);
+var svg_1 = require("./svg");
+Object.defineProperty(exports, "svg", { enumerable: true, get: function () { return svg_1.renderToSvg; } });
+Object.defineProperty(exports, "resolvedSvg", { enumerable: true, get: function () { return svg_1.renderResolvedSvg; } });
+var html_1 = require("./html");
+Object.defineProperty(exports, "html", { enumerable: true, get: function () { return html_1.renderToHtml; } });
+var embed_1 = require("./embed");
+Object.defineProperty(exports, "embedHtml", { enumerable: true, get: function () { return embed_1.renderToEmbedHtml; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "2.1.10",
+  "version": "2.2.0",
   "description": "Render kernel for Sketchmark visual documents.",
   "license": "MIT",
   "type": "commonjs",
@@ -30,11 +30,21 @@
       "require": "./dist/src/edit.js",
       "default": "./dist/src/edit.js"
     },
+    "./render": {
+      "types": "./dist/src/render/index.d.ts",
+      "require": "./dist/src/render/index.js",
+      "default": "./dist/src/render/index.js"
+    },
     "./editor": {
       "types": "./bin/editor-ui.d.ts",
       "require": "./bin/editor-ui.cjs",
       "default": "./bin/editor-ui.cjs"
     },
+    "./preview": {
+      "types": "./bin/preview-ui.d.ts",
+      "require": "./bin/preview-ui.cjs",
+      "default": "./bin/preview-ui.cjs"
+    },
     "./schema": {
       "default": "./schema/visual.schema.json"
     }
@@ -52,6 +62,7 @@
   "files": [
     "bin",
     "dist",
+    "skills",
     "schema",
     "README.md"
   ],

package/skills/sketchmark/SKILL.md

@@ -0,0 +1,16 @@
+---
+name: sketchmark
+description: Entry point for Sketchmark kernel, design, animation, and render/edit/preview guidance. Use when working with Sketchmark `.visual.json`, generators, validation, rendering, timelines, or previews.
+---
+
+# Sketchmark
+
+Use the smallest file needed:
+
+- `kernel.md`: valid document shape, element properties, paints, effects, timelines, curves, and animatable tracks.
+- `design.md`: broad composition and static visual construction guidance.
+- `animation.md`: broad timeline and motion guidance.
+- `render.md`: validate, render, edit, preview, export, and debug workflow.
+
+Keep `.visual.json` output pure kernel: `version`, `canvas`, and `elements`.
+When working inside this repository, prefer example generator scripts such as `examples/make-*.cjs` over hand-authoring only generated `.visual.json` files.

package/skills/sketchmark/animation.md

@@ -0,0 +1,67 @@
+# Animation
+
+Use this for timeline creation, motion timing, reveals, transitions, and animated visual states.
+
+## Boundary
+
+- Animation is stored in element-local `timeline.tracks`.
+- Track names must be valid animatable properties from `kernel.md`.
+- Curves are timeline curve objects.
+- Helper functions may exist in generator code, but their output is only kernel timelines.
+
+## Process
+
+1. Create a readable static frame first.
+2. Choose which element or group owns each motion.
+3. Animate parent groups for broad movement.
+4. Animate child elements for local changes.
+5. Add keyframes at clear beats.
+6. Use explicit curves when timing matters.
+7. Validate.
+8. Render checkpoint frames at key times.
+
+## Track Selection
+
+- Position: `position`, `x`, `y`.
+- Visibility: `opacity`.
+- Transform: `rotation`, `scale`, `scaleX`, `scaleY`, `origin`.
+- Path drawing: `drawStart`, `drawEnd`.
+- Text changes: `text`, `lines`.
+- Paint changes: `fill`, `stroke`, paint subproperties.
+- Reveal: `clip.d`, `mask.d`, `mask.opacity`.
+- Effects: `effects.*`.
+
+## Keyframes
+
+Preferred object form:
+
+```js
+{ time: 0, value: [0, 0], out: { type: "cubicBezier", x1: 0.16, y1: 1, x2: 0.3, y2: 1 } }
+```
+
+Tuple form:
+
+```js
+[0, [0, 0]]
+```
+
+## Curves
+
+- `cubicBezier`: smooth timing.
+- `graph`: custom normalized timing.
+- `hold`: discrete switch.
+
+## Timing
+
+- Use seconds.
+- Keep keyframes sorted by time.
+- Use short names for curve constants in generator code.
+- Use `hold` for instant changes.
+- Use multiple sampled keyframes for path or radius style changes because path data is discrete.
+
+## Final Check
+
+- Every animated track exists in `kernel.md`.
+- Keyframes are sorted.
+- Curve fields contain curve objects.
+- The animation still reads at checkpoint frames.