sketchmark 2.0.0 → 2.1.0

package/examples/make-storyboard.cjs

@@ -0,0 +1,215 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 1100;
+const height = 720;
+const bg = "#f1f5f9";
+const font = "Inter, system-ui, sans-serif";
+
+const colors = {
+  pageTitle: "#0f172a",
+  pageSubtitle: "#64748b",
+  panelBg: "#ffffff",
+  panelBorder: "#e2e8f0",
+  panelNumber: "#cbd5e1",
+  panelTitle: "#1e293b",
+  panelCaption: "#475569",
+  tagBg: "#0f172a",
+  tagText: "#ffffff"
+};
+
+const padX = 48;
+const padY = 40;
+let y = padY;
+
+const elements = [];
+
+// Page title
+elements.push({
+  id: "page-title",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Product Launch Storyboard",
+  align: "left",
+  valign: "top",
+  fontSize: 28,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.pageTitle
+});
+y += 38;
+
+elements.push({
+  id: "page-subtitle",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Four key moments in the announcement video sequence.",
+  align: "left",
+  valign: "top",
+  fontSize: 14,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.pageSubtitle
+});
+y += 44;
+
+// Panel grid (2x2)
+const panelGap = 24;
+const gridW = width - padX * 2;
+const panelW = (gridW - panelGap) / 2;
+const panelH = 260;
+const panelR = 10;
+const panelPad = 20;
+
+const panels = [
+  {
+    id: "panel-1",
+    number: "01",
+    tag: "Intro",
+    title: "Brand Logo Reveal",
+    caption: "Open on a dark screen. The logo fades in from\nthe center with a subtle glow effect. Hold for\ntwo seconds to establish brand presence."
+  },
+  {
+    id: "panel-2",
+    number: "02",
+    tag: "Action",
+    title: "Feature Demonstration",
+    caption: "Quick cuts showing the product in use. Focus\non three key interactions: search, create, and\nshare. Each clip lasts 1.5 seconds."
+  },
+  {
+    id: "panel-3",
+    number: "03",
+    tag: "Pause",
+    title: "Customer Testimonial",
+    caption: "A single customer speaks directly to camera.\nKeep framing tight on their face. Let the quote\nbreathe with natural pauses for emphasis."
+  },
+  {
+    id: "panel-4",
+    number: "04",
+    tag: "End",
+    title: "Call to Action",
+    caption: "Product name and tagline animate in from\nthe left. URL and QR code appear below.\nEnd with logo lockup in the corner."
+  }
+];
+
+panels.forEach((panel, i) => {
+  const col = i % 2;
+  const row = Math.floor(i / 2);
+  const px = padX + col * (panelW + panelGap);
+  const py = y + row * (panelH + panelGap);
+
+  // Panel background
+  elements.push({
+    id: `${panel.id}-bg`,
+    type: "path",
+    d: roundedRect(px, py, panelW, panelH, panelR),
+    fill: colors.panelBg,
+    stroke: colors.panelBorder,
+    strokeWidth: 1
+  });
+
+  // Panel number (top-left, large muted)
+  elements.push({
+    id: `${panel.id}-number`,
+    type: "text",
+    x: px + panelPad,
+    y: py + panelPad,
+    text: panel.number,
+    align: "left",
+    valign: "top",
+    fontSize: 32,
+    fontFamily: font,
+    weight: 700,
+    fill: colors.panelNumber
+  });
+
+  // Tag pill (top-right, centered text)
+  const tagW = panel.tag.length * 9 + 24;
+  const tagH = 26;
+  const tagX = px + panelW - panelPad - tagW;
+  const tagY = py + panelPad;
+  const tagR = 13;
+
+  elements.push({
+    id: `${panel.id}-tag-bg`,
+    type: "path",
+    d: roundedRect(tagX, tagY, tagW, tagH, tagR),
+    fill: colors.tagBg,
+    stroke: "none"
+  });
+
+  elements.push({
+    id: `${panel.id}-tag-text`,
+    type: "text",
+    x: tagX + tagW / 2,
+    y: tagY + tagH / 2,
+    text: panel.tag,
+    align: "center",
+    valign: "middle",
+    fontSize: 11,
+    fontFamily: font,
+    weight: 600,
+    fill: colors.tagText
+  });
+
+  // Panel title (left-aligned)
+  const titleY = py + panelPad + 52;
+  elements.push({
+    id: `${panel.id}-title`,
+    type: "text",
+    x: px + panelPad,
+    y: titleY,
+    text: panel.title,
+    align: "left",
+    valign: "top",
+    fontSize: 18,
+    fontFamily: font,
+    weight: 600,
+    fill: colors.panelTitle
+  });
+
+  // Panel caption (left-aligned, multiline)
+  const captionY = titleY + 32;
+  elements.push({
+    id: `${panel.id}-caption`,
+    type: "text",
+    x: px + panelPad,
+    y: captionY,
+    text: panel.caption,
+    align: "left",
+    valign: "top",
+    fontSize: 13,
+    fontFamily: font,
+    weight: 400,
+    lineHeight: 1.6,
+    fill: colors.panelCaption,
+    maxWidth: panelW - panelPad * 2
+  });
+});
+
+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, "storyboard.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);

package/examples/make-transcript.cjs

@@ -0,0 +1,234 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 900;
+const height = 1140;
+const bg = "#ffffff";
+const font = "Inter, system-ui, sans-serif";
+
+const colors = {
+  title: "#0f172a",
+  subtitle: "#64748b",
+  speaker: "#1e293b",
+  timestamp: "#94a3b8",
+  messageBg: "#f8fafc",
+  messageBorder: "#e2e8f0",
+  messageText: "#334155",
+  divider: "#e2e8f0",
+  btnBg: "#1e293b",
+  btnText: "#ffffff"
+};
+
+const padX = 56;
+const contentW = width - padX * 2;
+let y = 44;
+
+const elements = [];
+
+// Title
+elements.push({
+  id: "title",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Meeting Transcript",
+  align: "left",
+  valign: "top",
+  fontSize: 30,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.title
+});
+y += 42;
+
+// Subtitle
+elements.push({
+  id: "subtitle",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Product Sync — May 27, 2026 · 10:00 AM · 4 participants",
+  align: "left",
+  valign: "top",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.subtitle
+});
+y += 32;
+
+// Divider
+elements.push({
+  id: "divider-top",
+  type: "path",
+  d: `M ${padX} ${y} L ${width - padX} ${y}`,
+  stroke: colors.divider,
+  strokeWidth: 1,
+  fill: "none"
+});
+y += 32;
+
+// Transcript messages
+const messages = [
+  {
+    speaker: "Sarah Chen",
+    time: "10:01",
+    text: "Alright, let's get started. The main topic today is the timeline\nfor the v2.4 release. We need to finalize which features ship\nand which get pushed to the next cycle."
+  },
+  {
+    speaker: "Marcus Taylor",
+    time: "10:02",
+    text: "From the backend side, the API gateway migration is on track.\nWe finished the schema federation layer last week and rate\nlimiting is in review right now."
+  },
+  {
+    speaker: "Priya Nair",
+    time: "10:03",
+    text: "Design system updates are about 80% done. The new tokens\nare merged but we still need to audit accessibility on the\nrefactored form components before release."
+  },
+  {
+    speaker: "Sarah Chen",
+    time: "10:04",
+    text: "Good. Let's set a hard cutoff for Friday on the a11y audit.\nIf it's not passing by then we defer the form components\nand ship everything else on schedule."
+  },
+  {
+    speaker: "James Olsen",
+    time: "10:05",
+    text: "I can help with the audit. I've been running automated scans\non the onboarding flow already so I know the tooling well.\nShould have results by Thursday."
+  },
+  {
+    speaker: "Priya Nair",
+    time: "10:06",
+    text: "That would be great. I'll share the component list and the\ntest matrix with you after this call so we don't duplicate work."
+  },
+  {
+    speaker: "Sarah Chen",
+    time: "10:07",
+    text: "Perfect. Let's reconvene Thursday afternoon to review the\naudit results and make the final call. I'll send a calendar\ninvite. Anything else before we wrap?"
+  }
+];
+
+const speakerX = padX;
+const timeX = padX + 136;
+const bubbleX = padX;
+const bubbleW = contentW;
+const bubblePad = 14;
+const bubbleR = 8;
+
+messages.forEach((msg, i) => {
+  // Speaker name
+  elements.push({
+    id: `msg-${i}-speaker`,
+    type: "text",
+    x: speakerX,
+    y: y,
+    text: msg.speaker,
+    align: "left",
+    valign: "top",
+    fontSize: 13,
+    fontFamily: font,
+    weight: 600,
+    fill: colors.speaker
+  });
+
+  // Timestamp (right-aligned to a fixed column)
+  elements.push({
+    id: `msg-${i}-time`,
+    type: "text",
+    x: width - padX,
+    y: y,
+    text: msg.time,
+    align: "right",
+    valign: "top",
+    fontSize: 12,
+    fontFamily: font,
+    weight: 400,
+    fill: colors.timestamp
+  });
+  y += 24;
+
+  // Message bubble
+  const lineCount = msg.text.split("\n").length;
+  const bubbleH = lineCount * 21 + bubblePad * 2;
+
+  elements.push({
+    id: `msg-${i}-bg`,
+    type: "path",
+    d: roundedRect(bubbleX, y, bubbleW, bubbleH, bubbleR),
+    fill: colors.messageBg,
+    stroke: colors.messageBorder,
+    strokeWidth: 1
+  });
+
+  elements.push({
+    id: `msg-${i}-text`,
+    type: "text",
+    x: bubbleX + bubblePad,
+    y: y + bubblePad,
+    text: msg.text,
+    align: "left",
+    valign: "top",
+    fontSize: 13,
+    fontFamily: font,
+    weight: 400,
+    lineHeight: 1.6,
+    fill: colors.messageText,
+    maxWidth: bubbleW - bubblePad * 2
+  });
+
+  y += bubbleH + 20;
+});
+
+y += 12;
+
+// Centered Export button
+const btnW = 140;
+const btnH = 42;
+const btnX = (width - btnW) / 2;
+const btnR = 8;
+
+elements.push({
+  id: "btn-export-bg",
+  type: "path",
+  d: roundedRect(btnX, y, btnW, btnH, btnR),
+  fill: colors.btnBg,
+  stroke: "none"
+});
+
+elements.push({
+  id: "btn-export-label",
+  type: "text",
+  x: width / 2,
+  y: y + btnH / 2,
+  text: "Export Transcript",
+  align: "center",
+  valign: "middle",
+  fontSize: 14,
+  fontFamily: font,
+  weight: 600,
+  fill: colors.btnText
+});
+
+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, "transcript.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);