sketchmark 2.1.0 → 2.1.1

package/examples/make-modal-dialog.cjs

@@ -1,355 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-const width = 800;
-const height = 600;
-const bg = "rgba(15, 23, 42, 0.6)";
-const font = "Inter, system-ui, sans-serif";
-
-const colors = {
-  overlay: "#0f172a",
-  modalBg: "#ffffff",
-  modalBorder: "#e2e8f0",
-  title: "#0f172a",
-  description: "#475569",
-  label: "#1e293b",
-  helper: "#64748b",
-  inputBg: "#ffffff",
-  inputBorder: "#cbd5e1",
-  placeholder: "#94a3b8",
-  warningBg: "#fef2f2",
-  warningBorder: "#fecaca",
-  warningText: "#991b1b",
-  footerBg: "#f8fafc",
-  footerBorder: "#e2e8f0",
-  btnPrimaryBg: "#dc2626",
-  btnPrimaryText: "#ffffff",
-  btnSecondaryBg: "#ffffff",
-  btnSecondaryText: "#475569",
-  btnSecondaryBorder: "#cbd5e1"
-};
-
-const elements = [];
-
-// Overlay background
-elements.push({
-  id: "overlay",
-  type: "path",
-  d: `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`,
-  fill: colors.overlay,
-  opacity: 0.5,
-  stroke: "none"
-});
-
-// Modal dimensions
-const modalW = 520;
-const modalH = 480;
-const modalX = (width - modalW) / 2;
-const modalY = (height - modalH) / 2;
-const modalR = 12;
-const modalPad = 28;
-
-// Modal background
-elements.push({
-  id: "modal-bg",
-  type: "path",
-  d: roundedRect(modalX, modalY, modalW, modalH, modalR),
-  fill: colors.modalBg,
-  stroke: colors.modalBorder,
-  strokeWidth: 1,
-  effects: { shadow: { dx: 0, dy: 8, blur: 32, color: "#000000", opacity: 0.15 } }
-});
-
-let y = modalY + modalPad;
-const contentX = modalX + modalPad;
-const contentW = modalW - modalPad * 2;
-
-// Title (left aligned)
-elements.push({
-  id: "modal-title",
-  type: "text",
-  x: contentX,
-  y: y,
-  text: "Delete Project",
-  align: "left",
-  valign: "top",
-  fontSize: 20,
-  fontFamily: font,
-  weight: 700,
-  fill: colors.title
-});
-y += 32;
-
-// Description (left aligned)
-elements.push({
-  id: "modal-desc",
-  type: "text",
-  x: contentX,
-  y: y,
-  text: "This action will permanently remove the project and all associated\ndata. This cannot be undone.",
-  align: "left",
-  valign: "top",
-  fontSize: 14,
-  fontFamily: font,
-  weight: 400,
-  lineHeight: 1.55,
-  fill: colors.description,
-  maxWidth: contentW
-});
-y += 56;
-
-// Warning note
-const warnH = 56;
-const warnR = 6;
-const warnPad = 14;
-
-elements.push({
-  id: "warning-bg",
-  type: "path",
-  d: roundedRect(contentX, y, contentW, warnH, warnR),
-  fill: colors.warningBg,
-  stroke: colors.warningBorder,
-  strokeWidth: 1
-});
-
-elements.push({
-  id: "warning-text",
-  type: "text",
-  x: contentX + warnPad,
-  y: y + warnPad,
-  text: "Warning: 3 team members will lose access immediately. Any\nactive integrations connected to this project will stop working.",
-  align: "left",
-  valign: "top",
-  fontSize: 12,
-  fontFamily: font,
-  weight: 500,
-  lineHeight: 1.5,
-  fill: colors.warningText,
-  maxWidth: contentW - warnPad * 2
-});
-y += warnH + 24;
-
-// Field 1: Project name
-elements.push({
-  id: "field1-label",
-  type: "text",
-  x: contentX,
-  y: y,
-  text: "Project Name",
-  align: "left",
-  valign: "top",
-  fontSize: 13,
-  fontFamily: font,
-  weight: 600,
-  fill: colors.label
-});
-y += 22;
-
-elements.push({
-  id: "field1-helper",
-  type: "text",
-  x: contentX,
-  y: y,
-  text: "Enter the project name exactly as shown to confirm deletion.\nThis helps prevent accidental removal of important data.",
-  align: "left",
-  valign: "top",
-  fontSize: 12,
-  fontFamily: font,
-  weight: 400,
-  lineHeight: 1.5,
-  fill: colors.helper,
-  maxWidth: contentW
-});
-y += 42;
-
-// Input field 1
-const inputH = 38;
-const inputR = 6;
-
-elements.push({
-  id: "field1-input-bg",
-  type: "path",
-  d: roundedRect(contentX, y, contentW, inputH, inputR),
-  fill: colors.inputBg,
-  stroke: colors.inputBorder,
-  strokeWidth: 1
-});
-
-elements.push({
-  id: "field1-placeholder",
-  type: "text",
-  x: contentX + 12,
-  y: y + inputH / 2,
-  text: "acme-dashboard-v2",
-  align: "left",
-  valign: "middle",
-  fontSize: 13,
-  fontFamily: font,
-  weight: 400,
-  fill: colors.placeholder
-});
-y += inputH + 20;
-
-// Field 2: Confirmation phrase
-elements.push({
-  id: "field2-label",
-  type: "text",
-  x: contentX,
-  y: y,
-  text: "Confirmation Phrase",
-  align: "left",
-  valign: "top",
-  fontSize: 13,
-  fontFamily: font,
-  weight: 600,
-  fill: colors.label
-});
-y += 22;
-
-elements.push({
-  id: "field2-helper",
-  type: "text",
-  x: contentX,
-  y: y,
-  text: "Type \"delete my project\" to enable the delete button.",
-  align: "left",
-  valign: "top",
-  fontSize: 12,
-  fontFamily: font,
-  weight: 400,
-  fill: colors.helper,
-  maxWidth: contentW
-});
-y += 26;
-
-// Input field 2
-elements.push({
-  id: "field2-input-bg",
-  type: "path",
-  d: roundedRect(contentX, y, contentW, inputH, inputR),
-  fill: colors.inputBg,
-  stroke: colors.inputBorder,
-  strokeWidth: 1
-});
-
-elements.push({
-  id: "field2-placeholder",
-  type: "text",
-  x: contentX + 12,
-  y: y + inputH / 2,
-  text: "delete my project",
-  align: "left",
-  valign: "middle",
-  fontSize: 13,
-  fontFamily: font,
-  weight: 400,
-  fill: colors.placeholder
-});
-
-// Footer
-const footerH = 68;
-const footerY = modalY + modalH - footerH;
-const footerR = modalR;
-
-// Footer background (bottom rounded corners only)
-elements.push({
-  id: "footer-bg",
-  type: "path",
-  d: `M ${modalX} ${footerY} L ${modalX + modalW} ${footerY} L ${modalX + modalW} ${modalY + modalH - footerR} Q ${modalX + modalW} ${modalY + modalH} ${modalX + modalW - footerR} ${modalY + modalH} L ${modalX + footerR} ${modalY + modalH} Q ${modalX} ${modalY + modalH} ${modalX} ${modalY + modalH - footerR} Z`,
-  fill: colors.footerBg,
-  stroke: "none"
-});
-
-// Footer top border
-elements.push({
-  id: "footer-border",
-  type: "path",
-  d: `M ${modalX} ${footerY} L ${modalX + modalW} ${footerY}`,
-  stroke: colors.footerBorder,
-  strokeWidth: 1,
-  fill: "none"
-});
-
-// Footer buttons (right-aligned group)
-const btnH = 38;
-const btnR = 6;
-const btnGap = 12;
-const cancelBtnW = 80;
-const deleteBtnW = 120;
-const btnGroupW = cancelBtnW + btnGap + deleteBtnW;
-const btnGroupX = modalX + modalW - modalPad - btnGroupW;
-const btnY = footerY + (footerH - btnH) / 2;
-
-// Cancel button (secondary)
-elements.push({
-  id: "btn-cancel-bg",
-  type: "path",
-  d: roundedRect(btnGroupX, btnY, cancelBtnW, btnH, btnR),
-  fill: colors.btnSecondaryBg,
-  stroke: colors.btnSecondaryBorder,
-  strokeWidth: 1
-});
-
-elements.push({
-  id: "btn-cancel-label",
-  type: "text",
-  x: btnGroupX + cancelBtnW / 2,
-  y: btnY + btnH / 2,
-  text: "Cancel",
-  align: "center",
-  valign: "middle",
-  fontSize: 13,
-  fontFamily: font,
-  weight: 500,
-  fill: colors.btnSecondaryText
-});
-
-// Delete button (primary/destructive)
-const deleteBtnX = btnGroupX + cancelBtnW + btnGap;
-
-elements.push({
-  id: "btn-delete-bg",
-  type: "path",
-  d: roundedRect(deleteBtnX, btnY, deleteBtnW, btnH, btnR),
-  fill: colors.btnPrimaryBg,
-  stroke: "none"
-});
-
-elements.push({
-  id: "btn-delete-label",
-  type: "text",
-  x: deleteBtnX + deleteBtnW / 2,
-  y: btnY + btnH / 2,
-  text: "Delete Project",
-  align: "center",
-  valign: "middle",
-  fontSize: 13,
-  fontFamily: font,
-  weight: 600,
-  fill: colors.btnPrimaryText
-});
-
-function roundedRect(x, y, w, h, r) {
-  return [
-    `M ${x + r} ${y}`,
-    `L ${x + w - r} ${y}`,
-    `Q ${x + w} ${y} ${x + w} ${y + r}`,
-    `L ${x + w} ${y + h - r}`,
-    `Q ${x + w} ${y + h} ${x + w - r} ${y + h}`,
-    `L ${x + r} ${y + h}`,
-    `Q ${x} ${y + h} ${x} ${y + h - r}`,
-    `L ${x} ${y + r}`,
-    `Q ${x} ${y} ${x + r} ${y}`,
-    "Z"
-  ].join(" ");
-}
-
-const doc = {
-  version: 1,
-  canvas: { width, height, background: "#64748b" },
-  elements
-};
-
-const outPath = path.join(__dirname, "modal-dialog.visual.json");
-fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
-console.log("Written:", outPath);

package/examples/make-origin-effects-lab.cjs

@@ -1,311 +0,0 @@
-const fs = require("node:fs");
-const path = require("node:path");
-
-const width = 1280;
-const height = 760;
-const duration = 6;
-const fps = 30;
-const bg = "#07111f";
-const font = "Roboto, Arial, sans-serif";
-
-const colors = {
-  panel: "#0d1a2e",
-  panelStroke: "#193252",
-  title: "#f8fafc",
-  body: "#94a3b8",
-  marker: "#fde047",
-  markerStroke: "#0f172a",
-  grid: "#173054",
-  rowLabel: "#7dd3fc",
-  fills: ["#818cf8", "#38bdf8", "#22c55e", "#f59e0b"]
-};
-
-const curves = {
-  ease: { type: "cubicBezier", x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 },
-  easeOut: { type: "cubicBezier", x1: 0, y1: 0, x2: 0.2, y2: 1 }
-};
-
-const rectW = 160;
-const rectH = 100;
-const cellW = 270;
-const cellH = 240;
-const gridX = 70;
-const gridGap = 25;
-const scaleRowY = 150;
-const rotateRowY = 435;
-const shapeOffsetX = 58;
-const shapeOffsetY = 98;
-const rectShape = roundedRect(0, 0, rectW, rectH, 18);
-
-const originVariants = [
-  { key: "top_left", title: "Top-left origin", note: "[0, 0]", local: [0, 0] },
-  { key: "center", title: "Center origin", note: "[80, 50]", local: [rectW / 2, rectH / 2] },
-  { key: "bottom_right", title: "Bottom-right origin", note: "[160, 100]", local: [rectW, rectH] },
-  { key: "outside_right", title: "Outside-right origin", note: "[200, 50]", local: [rectW + 40, rectH / 2] }
-];
-
-const elements = [];
-
-elements.push({
-  id: "lab_title",
-  type: "text",
-  x: 70,
-  y: 52,
-  text: "Origin Transform Lab",
-  fontSize: 38,
-  fontFamily: font,
-  weight: 700,
-  fill: colors.title
-});
-
-elements.push({
-  id: "lab_body",
-  type: "text",
-  x: 70,
-  y: 96,
-  text: "Same rounded rectangle, animated as a group. Only the origin changes.",
-  fontSize: 16,
-  fontFamily: font,
-  weight: 400,
-  fill: colors.body
-});
-
-elements.push({
-  id: "scale_row_label",
-  type: "text",
-  x: 70,
-  y: scaleRowY - 38,
-  text: "Scale tests",
-  fontSize: 18,
-  fontFamily: font,
-  weight: 700,
-  fill: colors.rowLabel
-});
-
-elements.push({
-  id: "rotate_row_label",
-  type: "text",
-  x: 70,
-  y: rotateRowY - 38,
-  text: "Rotation tests",
-  fontSize: 18,
-  fontFamily: font,
-  weight: 700,
-  fill: colors.rowLabel
-});
-
-originVariants.forEach((variant, index) => {
-  const cellX = gridX + index * (cellW + gridGap);
-  const fill = colors.fills[index % colors.fills.length];
-  addPanel(cellX, scaleRowY, `scale_${variant.key}`, variant.title, variant.note);
-  addScaleDemo(cellX, scaleRowY, variant, fill);
-  addPanel(cellX, rotateRowY, `rotate_${variant.key}`, variant.title, variant.note);
-  addRotateDemo(cellX, rotateRowY, variant, fill);
-});
-
-const doc = {
-  version: 1,
-  canvas: { width, height, background: bg, duration, fps },
-  elements
-};
-
-const outPath = path.join(__dirname, "origin-effects-lab.visual.json");
-fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
-console.log("Written:", outPath);
-
-function addPanel(x, y, id, title, note) {
-  elements.push({
-    id: `${id}_panel`,
-    type: "path",
-    d: roundedRect(x, y, cellW, cellH, 22),
-    fill: colors.panel,
-    stroke: colors.panelStroke,
-    strokeWidth: 1.5
-  });
-
-  elements.push({
-    id: `${id}_title`,
-    type: "text",
-    x: x + 20,
-    y: y + 18,
-    text: title,
-    fontSize: 16,
-    fontFamily: font,
-    weight: 700,
-    fill: colors.title
-  });
-
-  elements.push({
-    id: `${id}_note`,
-    type: "text",
-    x: x + 20,
-    y: y + 42,
-    text: note,
-    fontSize: 12,
-    fontFamily: font,
-    weight: 500,
-    fill: colors.body
-  });
-
-  elements.push({
-    id: `${id}_guide_h`,
-    type: "path",
-    d: `M ${x + 20} ${y + shapeOffsetY + rectH / 2} L ${x + cellW - 20} ${y + shapeOffsetY + rectH / 2}`,
-    fill: "none",
-    stroke: colors.grid,
-    strokeWidth: 1,
-    dashArray: [6, 6]
-  });
-
-  elements.push({
-    id: `${id}_guide_v`,
-    type: "path",
-    d: `M ${x + shapeOffsetX + rectW / 2} ${y + 68} L ${x + shapeOffsetX + rectW / 2} ${y + cellH - 20}`,
-    fill: "none",
-    stroke: colors.grid,
-    strokeWidth: 1,
-    dashArray: [6, 6]
-  });
-}
-
-function addScaleDemo(cellX, cellY, variant, fill) {
-  const groupX = cellX + shapeOffsetX;
-  const groupY = cellY + shapeOffsetY;
-  const originAbs = absoluteOrigin(groupX, groupY, variant.local);
-
-  elements.push(originMarker(`scale_${variant.key}_origin`, originAbs[0], originAbs[1]));
-
-  elements.push({
-    id: `scale_${variant.key}_group`,
-    type: "group",
-    x: groupX,
-    y: groupY,
-    width: rectW,
-    height: rectH,
-    origin: originAbs,
-    children: [
-      {
-        id: `scale_${variant.key}_rect`,
-        type: "path",
-        d: rectShape,
-        fill,
-        stroke: "#dbeafe",
-        strokeWidth: 2
-      }
-    ],
-    timeline: {
-      tracks: {
-        scale: {
-          keyframes: [
-            { time: 0, value: 1, out: curves.easeOut },
-            { time: 1.3, value: 1.45, out: curves.ease },
-            { time: 2.6, value: 0.72, out: curves.ease },
-            { time: 4, value: 1.18, out: curves.ease },
-            { time: 5.4, value: 1 }
-          ]
-        }
-      }
-    }
-  });
-}
-
-function addRotateDemo(cellX, cellY, variant, fill) {
-  const groupX = cellX + shapeOffsetX;
-  const groupY = cellY + shapeOffsetY;
-  const originAbs = absoluteOrigin(groupX, groupY, variant.local);
-
-  elements.push(originMarker(`rotate_${variant.key}_origin`, originAbs[0], originAbs[1]));
-
-  elements.push({
-    id: `rotate_${variant.key}_group`,
-    type: "group",
-    x: groupX,
-    y: groupY,
-    width: rectW,
-    height: rectH,
-    origin: originAbs,
-    children: [
-      {
-        id: `rotate_${variant.key}_rect`,
-        type: "path",
-        d: rectShape,
-        fill,
-        stroke: "#dbeafe",
-        strokeWidth: 2
-      }
-    ],
-    timeline: {
-      tracks: {
-        rotation: {
-          keyframes: [
-            { time: 0, value: 0, out: curves.easeOut },
-            { time: 1.5, value: 42, out: curves.ease },
-            { time: 3, value: -28, out: curves.ease },
-            { time: 4.5, value: 18, out: curves.ease },
-            { time: 5.8, value: 0 }
-          ]
-        }
-      }
-    }
-  });
-}
-
-function originMarker(id, x, y) {
-  return {
-    id,
-    type: "group",
-    x: x - 16,
-    y: y - 16,
-    children: [
-      {
-        id: `${id}_cross_h`,
-        type: "path",
-        d: "M 0 16 L 32 16",
-        fill: "none",
-        stroke: colors.marker,
-        strokeWidth: 2,
-        strokeCap: "round"
-      },
-      {
-        id: `${id}_cross_v`,
-        type: "path",
-        d: "M 16 0 L 16 32",
-        fill: "none",
-        stroke: colors.marker,
-        strokeWidth: 2,
-        strokeCap: "round"
-      },
-      {
-        id: `${id}_dot`,
-        type: "path",
-        d: circlePath(16, 16, 6),
-        fill: colors.marker,
-        stroke: colors.markerStroke,
-        strokeWidth: 1.5
-      }
-    ]
-  };
-}
-
-function absoluteOrigin(groupX, groupY, localOrigin) {
-  return [groupX + localOrigin[0], groupY + localOrigin[1]];
-}
-
-function circlePath(cx, cy, r) {
-  return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0`;
-}
-
-function roundedRect(x, y, w, h, r) {
-  return [
-    `M ${x + r} ${y}`,
-    `L ${x + w - r} ${y}`,
-    `Q ${x + w} ${y} ${x + w} ${y + r}`,
-    `L ${x + w} ${y + h - r}`,
-    `Q ${x + w} ${y + h} ${x + w - r} ${y + h}`,
-    `L ${x + r} ${y + h}`,
-    `Q ${x} ${y + h} ${x} ${y + h - r}`,
-    `L ${x} ${y + r}`,
-    `Q ${x} ${y} ${x + r} ${y}`,
-    "Z"
-  ].join(" ");
-}

package/examples/make-preset-character-motion.cjs

@@ -1,32 +0,0 @@
-const fs = require("node:fs");
-const path = require("node:path");
-
-const { applyPresetFragments, characters, effects, motions, scenes, shapes } = require("../dist/src/presets");
-
-const outputPath = path.join(__dirname, "preset-character-motion.visual.json");
-
-const doc = {
-  version: 1,
-  canvas: { width: 960, height: 540, background: "#f8fafc", duration: 4, fps: 30 },
-  elements: []
-};
-
-const visual = applyPresetFragments(doc, [
-  scenes.gridBackground({ id: "stage.grid", x: 0, y: 0, width: 960, height: 540, step: 48 }),
-  shapes.line({ id: "stage.ground", from: [80, 430], to: [880, 430], stroke: "#cbd5e1", strokeWidth: 8 }),
-  characters.stickPerson({ id: "hero", x: 150, y: 235, height: 190 }),
-  characters.simpleDog({ id: "dog", x: 470, y: 335, width: 190, height: 100 }),
-  characters.simpleSpider({ id: "spider", x: 730, y: 330, width: 130, height: 130 }),
-  shapes.speechBubble({ id: "caption", x: 280, y: 84, width: 400, height: 90, text: "Characters are just kernel groups", fill: "#ffffff", stroke: "#94a3b8" }),
-  effects.dropShadow({ id: "hero", dy: 8, blur: 18, opacity: 0.16 }),
-  effects.dropShadow({ id: "dog", dy: 7, blur: 16, opacity: 0.14 }),
-  effects.glow({ id: "spider", color: "#60a5fa", blur: 12, opacity: 0.22 }),
-  motions.slideIn({ id: "hero", from: [80, 235], to: [150, 235], start: 0, duration: 0.7 }),
-  motions.bob({ id: "dog", to: [470, 335], start: 0.4, duration: 1.4, distance: 12 }),
-  motions.shake({ id: "spider", start: 1.1, duration: 0.8, amount: 10 }),
-  motions.stagger({ ids: ["hero.head", "hero.body", "hero.leftArm", "hero.rightArm"], start: 0.1, duration: 0.35, each: 0.08 }),
-  motions.fadeIn({ id: "caption", start: 0.45, duration: 0.45 })
-]);
-
-fs.writeFileSync(outputPath, JSON.stringify(visual, null, 2));
-console.log(`Wrote ${outputPath}`);