sketchmark 2.0.0 → 2.1.0

package/examples/make-dashboard-table.cjs

@@ -0,0 +1,277 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 1100;
+const height = 560;
+const bg = "#f8fafc";
+const font = "Inter, system-ui, sans-serif";
+
+const colors = {
+  pageTitle: "#0f172a",
+  tableTitle: "#1e293b",
+  headerBg: "#f1f5f9",
+  headerText: "#475569",
+  rowBg: "#ffffff",
+  rowAltBg: "#fafbfc",
+  rowBorder: "#e2e8f0",
+  cellText: "#334155",
+  cellMuted: "#64748b",
+  tableBorder: "#e2e8f0",
+  statusGreen: "#10b981",
+  statusGreenBg: "#d1fae5",
+  statusYellow: "#d97706",
+  statusYellowBg: "#fef3c7",
+  statusRed: "#dc2626",
+  statusRedBg: "#fee2e2",
+  statusGray: "#64748b",
+  statusGrayBg: "#f1f5f9"
+};
+
+const padX = 48;
+let y = 40;
+
+const elements = [];
+
+// Page title
+elements.push({
+  id: "page-title",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Operations Dashboard",
+  align: "left",
+  valign: "top",
+  fontSize: 26,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.pageTitle
+});
+y += 44;
+
+// Table title
+elements.push({
+  id: "table-title",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Service Health Overview",
+  align: "left",
+  valign: "top",
+  fontSize: 16,
+  fontFamily: font,
+  weight: 600,
+  fill: colors.tableTitle
+});
+y += 32;
+
+// Table structure
+const tableX = padX;
+const tableW = width - padX * 2;
+const rowH = 44;
+const headerH = 40;
+
+const columns = [
+  { key: "service", label: "Service", width: 200, align: "left" },
+  { key: "requests", label: "Requests", width: 120, align: "right" },
+  { key: "latency", label: "Avg Latency", width: 120, align: "right" },
+  { key: "errors", label: "Error Rate", width: 110, align: "right" },
+  { key: "uptime", label: "Uptime", width: 100, align: "right" },
+  { key: "status", label: "Status", width: 110, align: "center" }
+];
+
+const rows = [
+  { service: "API Gateway", requests: "1.2M", latency: "42ms", errors: "0.02%", uptime: "99.99%", status: "Healthy" },
+  { service: "Auth Service", requests: "890K", latency: "28ms", errors: "0.01%", uptime: "99.98%", status: "Healthy" },
+  { service: "User Database", requests: "2.4M", latency: "8ms", errors: "0.00%", uptime: "100%", status: "Healthy" },
+  { service: "Cache Layer", requests: "5.1M", latency: "2ms", errors: "0.03%", uptime: "99.95%", status: "Degraded" },
+  { service: "Search Index", requests: "340K", latency: "156ms", errors: "1.20%", uptime: "98.50%", status: "Warning" },
+  { service: "Legacy Sync", requests: "45K", latency: "890ms", errors: "4.50%", uptime: "94.20%", status: "Critical" }
+];
+
+const statusColors = {
+  Healthy: { bg: colors.statusGreenBg, text: colors.statusGreen },
+  Degraded: { bg: colors.statusYellowBg, text: colors.statusYellow },
+  Warning: { bg: colors.statusYellowBg, text: colors.statusYellow },
+  Critical: { bg: colors.statusRedBg, text: colors.statusRed },
+  Offline: { bg: colors.statusGrayBg, text: colors.statusGray }
+};
+
+// Table outer border
+const tableH = headerH + rows.length * rowH;
+elements.push({
+  id: "table-border",
+  type: "path",
+  d: roundedRect(tableX, y, tableW, tableH, 8),
+  fill: colors.rowBg,
+  stroke: colors.tableBorder,
+  strokeWidth: 1
+});
+
+// Header row background
+elements.push({
+  id: "header-bg",
+  type: "path",
+  d: `M ${tableX + 8} ${y} L ${tableX + tableW - 8} ${y} Q ${tableX + tableW} ${y} ${tableX + tableW} ${y + 8} L ${tableX + tableW} ${y + headerH} L ${tableX} ${y + headerH} L ${tableX} ${y + 8} Q ${tableX} ${y} ${tableX + 8} ${y} Z`,
+  fill: colors.headerBg,
+  stroke: "none"
+});
+
+// Header row bottom border
+elements.push({
+  id: "header-border",
+  type: "path",
+  d: `M ${tableX} ${y + headerH} L ${tableX + tableW} ${y + headerH}`,
+  stroke: colors.rowBorder,
+  strokeWidth: 1,
+  fill: "none"
+});
+
+// Column headers
+let colX = tableX;
+columns.forEach((col, i) => {
+  const textX = col.align === "left" ? colX + 16 :
+                col.align === "right" ? colX + col.width - 16 :
+                colX + col.width / 2;
+
+  elements.push({
+    id: `header-${col.key}`,
+    type: "text",
+    x: textX,
+    y: y + headerH / 2,
+    text: col.label,
+    align: col.align,
+    valign: "middle",
+    fontSize: 12,
+    fontFamily: font,
+    weight: 600,
+    fill: colors.headerText
+  });
+
+  colX += col.width;
+});
+
+// Data rows
+rows.forEach((row, ri) => {
+  const rowY = y + headerH + ri * rowH;
+
+  // Alternating row background
+  if (ri % 2 === 1) {
+    elements.push({
+      id: `row-bg-${ri}`,
+      type: "path",
+      d: `M ${tableX} ${rowY} L ${tableX + tableW} ${rowY} L ${tableX + tableW} ${rowY + rowH} L ${tableX} ${rowY + rowH} Z`,
+      fill: colors.rowAltBg,
+      stroke: "none"
+    });
+  }
+
+  // Row border (except last)
+  if (ri < rows.length - 1) {
+    elements.push({
+      id: `row-border-${ri}`,
+      type: "path",
+      d: `M ${tableX + 16} ${rowY + rowH} L ${tableX + tableW - 16} ${rowY + rowH}`,
+      stroke: colors.rowBorder,
+      strokeWidth: 1,
+      fill: "none"
+    });
+  }
+
+  // Cell values
+  let cx = tableX;
+  columns.forEach((col) => {
+    const value = row[col.key];
+    const textX = col.align === "left" ? cx + 16 :
+                  col.align === "right" ? cx + col.width - 16 :
+                  cx + col.width / 2;
+
+    if (col.key === "status") {
+      // Status chip
+      const chipW = 72;
+      const chipH = 24;
+      const chipX = cx + (col.width - chipW) / 2;
+      const chipY = rowY + (rowH - chipH) / 2;
+      const chipR = 12;
+      const sc = statusColors[value] || statusColors.Offline;
+
+      elements.push({
+        id: `cell-${ri}-${col.key}-bg`,
+        type: "path",
+        d: roundedRect(chipX, chipY, chipW, chipH, chipR),
+        fill: sc.bg,
+        stroke: "none"
+      });
+
+      elements.push({
+        id: `cell-${ri}-${col.key}-text`,
+        type: "text",
+        x: chipX + chipW / 2,
+        y: chipY + chipH / 2,
+        text: value,
+        align: "center",
+        valign: "middle",
+        fontSize: 11,
+        fontFamily: font,
+        weight: 600,
+        fill: sc.text
+      });
+    } else if (col.key === "service") {
+      // Service name (row label)
+      elements.push({
+        id: `cell-${ri}-${col.key}`,
+        type: "text",
+        x: textX,
+        y: rowY + rowH / 2,
+        text: value,
+        align: col.align,
+        valign: "middle",
+        fontSize: 13,
+        fontFamily: font,
+        weight: 500,
+        fill: colors.cellText
+      });
+    } else {
+      // Numeric values
+      elements.push({
+        id: `cell-${ri}-${col.key}`,
+        type: "text",
+        x: textX,
+        y: rowY + rowH / 2,
+        text: value,
+        align: col.align,
+        valign: "middle",
+        fontSize: 13,
+        fontFamily: font,
+        weight: 400,
+        fill: colors.cellMuted
+      });
+    }
+
+    cx += col.width;
+  });
+});
+
+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: bg },
+  elements
+};
+
+const outPath = path.join(__dirname, "dashboard-table.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);

package/examples/make-dev-docs.cjs

@@ -0,0 +1,233 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 1280;
+const height = 960;
+const bg = "#ffffff";
+const textColor = "#1a1a2e";
+const mutedColor = "#6b7280";
+const accentColor = "#2563eb";
+const codeBg = "#f1f5f9";
+const codeBorder = "#e2e8f0";
+const codeText = "#334155";
+const bulletColor = "#2563eb";
+const btnBg = "#2563eb";
+const btnText = "#ffffff";
+const font = "Inter, system-ui, sans-serif";
+const monoFont = "JetBrains Mono, Fira Code, monospace";
+
+const padX = 80;
+let y = 64;
+
+const elements = [];
+
+// Page title
+elements.push({
+  id: "title",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Getting Started with the Render API",
+  align: "left",
+  valign: "top",
+  fontSize: 36,
+  fontFamily: font,
+  weight: 700,
+  fill: textColor
+});
+y += 52;
+
+// Subtitle
+elements.push({
+  id: "subtitle",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "A concise guide to integrating the render pipeline into your application.",
+  align: "left",
+  valign: "top",
+  fontSize: 16,
+  fontFamily: font,
+  weight: 400,
+  fill: mutedColor
+});
+y += 48;
+
+// Horizontal rule
+elements.push({
+  id: "divider",
+  type: "path",
+  d: `M ${padX} ${y} L ${width - padX} ${y}`,
+  stroke: "#e5e7eb",
+  strokeWidth: 1,
+  fill: "none"
+});
+y += 32;
+
+// Paragraph 1
+elements.push({
+  id: "para1",
+  type: "text",
+  x: padX,
+  y: y,
+  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: font,
+  weight: 400,
+  lineHeight: 1.7,
+  fill: textColor,
+  maxWidth: width - padX * 2
+});
+y += 110;
+
+// Paragraph 2
+elements.push({
+  id: "para2",
+  type: "text",
+  x: padX,
+  y: y,
+  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: font,
+  weight: 400,
+  lineHeight: 1.7,
+  fill: textColor,
+  maxWidth: width - padX * 2
+});
+y += 100;
+
+// Code block background
+const codeBlockH = 172;
+elements.push({
+  id: "code-bg",
+  type: "path",
+  d: `M ${padX} ${y} L ${width - padX} ${y} L ${width - padX} ${y + codeBlockH} L ${padX} ${y + codeBlockH} Z`,
+  fill: codeBg,
+  stroke: codeBorder,
+  strokeWidth: 1
+});
+
+// Code block text (6 lines)
+elements.push({
+  id: "code-text",
+  type: "text",
+  x: padX + 20,
+  y: y + 18,
+  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: monoFont,
+  weight: 400,
+  lineHeight: 1.8,
+  fill: codeText,
+  maxWidth: width - padX * 2 - 40
+});
+y += codeBlockH + 36;
+
+// Section heading for bullet list
+elements.push({
+  id: "list-heading",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Key Concepts",
+  align: "left",
+  valign: "top",
+  fontSize: 20,
+  fontFamily: font,
+  weight: 600,
+  fill: textColor
+});
+y += 36;
+
+// Bullet list items
+const bullets = [
+  "Documents must declare version: 1 and a canvas with width and height.",
+  "Elements are flat arrays of path, text, image, point, or group primitives.",
+  "Timelines are element-local — each element owns its own tracks and keyframes.",
+  "Interpolation resolves per-track using cubic bezier, graph, or hold curves.",
+  "The output frame contains fully resolved properties with no remaining references."
+];
+
+bullets.forEach((text, i) => {
+  const bulletY = y + i * 30;
+  elements.push({
+    id: `bullet-dot-${i}`,
+    type: "path",
+    d: `M ${padX + 4} ${bulletY + 7} A 3 3 0 1 1 ${padX + 4} ${bulletY + 7.01} Z`,
+    fill: bulletColor,
+    stroke: "none"
+  });
+  elements.push({
+    id: `bullet-text-${i}`,
+    type: "text",
+    x: padX + 18,
+    y: bulletY,
+    text: text,
+    align: "left",
+    valign: "top",
+    fontSize: 14,
+    fontFamily: font,
+    weight: 400,
+    fill: textColor,
+    maxWidth: width - padX * 2 - 18
+  });
+});
+y += bullets.length * 30 + 40;
+
+// Centered button
+const btnW = 200;
+const btnH = 44;
+const btnX = (width - btnW) / 2;
+const btnR = 8;
+elements.push({
+  id: "btn-bg",
+  type: "path",
+  d: `M ${btnX + btnR} ${y} L ${btnX + btnW - btnR} ${y} Q ${btnX + btnW} ${y} ${btnX + btnW} ${y + btnR} L ${btnX + btnW} ${y + btnH - btnR} Q ${btnX + btnW} ${y + btnH} ${btnX + btnW - btnR} ${y + btnH} L ${btnX + btnR} ${y + btnH} Q ${btnX} ${y + btnH} ${btnX} ${y + btnH - btnR} L ${btnX} ${y + btnR} Q ${btnX} ${y} ${btnX + btnR} ${y} Z`,
+  fill: btnBg,
+  stroke: "none"
+});
+elements.push({
+  id: "btn-label",
+  type: "text",
+  x: width / 2,
+  y: y + btnH / 2,
+  text: "View Full Reference",
+  align: "center",
+  valign: "middle",
+  fontSize: 15,
+  fontFamily: font,
+  weight: 600,
+  fill: btnText
+});
+y += btnH + 36;
+
+// Footer note
+elements.push({
+  id: "footer",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Last updated May 2026 · Sketchmark v1.0 · MIT License",
+  align: "left",
+  valign: "top",
+  fontSize: 12,
+  fontFamily: font,
+  weight: 400,
+  fill: mutedColor
+});
+
+const doc = {
+  version: 1,
+  canvas: { width, height, background: bg },
+  elements
+};
+
+const outPath = path.join(__dirname, "dev-docs.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);