sketchmark 2.1.0 → 2.1.2

package/examples/make-storyboard.cjs

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

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