sketchmark 2.1.0 → 2.1.2

package/examples/make-dashboard-table.cjs

@@ -1,277 +0,0 @@
-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

@@ -1,233 +0,0 @@
-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);