sketchmark 2.0.0 → 2.1.0

package/examples/image-clip-radius.visual.json

@@ -0,0 +1,271 @@
+{
+  "version": 1,
+  "canvas": {
+    "width": 960,
+    "height": 540,
+    "background": "#f8fafc",
+    "duration": 4,
+    "fps": 30
+  },
+  "elements": [
+    {
+      "id": "title",
+      "type": "text",
+      "text": "Image radius is compiled to clip.d keyframes",
+      "x": 480,
+      "y": 54,
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 30,
+      "weight": 800,
+      "fill": "#0f172a"
+    },
+    {
+      "id": "note",
+      "type": "text",
+      "text": "The kernel only sees an image plus animated clip path data.",
+      "x": 480,
+      "y": 494,
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 18,
+      "fill": "#475569"
+    },
+    {
+      "id": "photo",
+      "type": "image",
+      "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22560%22%20viewBox%3D%220%200%20900%20560%22%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%22bg%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%20%3Cstop%20offset%3D%220%22%20stop-color%3D%22%230f766e%22%2F%3E%20%3Cstop%20offset%3D%220.52%22%20stop-color%3D%22%232563eb%22%2F%3E%20%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237c3aed%22%2F%3E%20%3C%2FlinearGradient%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%22900%22%20height%3D%22560%22%20fill%3D%22url(%23bg)%22%2F%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22150%22%20r%3D%2286%22%20fill%3D%22%23fef3c7%22%20opacity%3D%220.9%22%2F%3E%20%3Ccircle%20cx%3D%22710%22%20cy%3D%22120%22%20r%3D%22120%22%20fill%3D%22%23bae6fd%22%20opacity%3D%220.42%22%2F%3E%20%3Ccircle%20cx%3D%22640%22%20cy%3D%22415%22%20r%3D%22180%22%20fill%3D%22%23f0abfc%22%20opacity%3D%220.35%22%2F%3E%20%3Cpath%20d%3D%22M%200%20410%20C%20160%20340%20260%20470%20430%20390%20C%20590%20315%20720%20395%20900%20330%20L%20900%20560%20L%200%20560%20Z%22%20fill%3D%22%23022c22%22%20opacity%3D%220.45%22%2F%3E%20%3Cpath%20d%3D%22M%200%20450%20C%20170%20390%20330%20510%20500%20425%20C%20660%20350%20760%20470%20900%20405%20L%20900%20560%20L%200%20560%20Z%22%20fill%3D%22%23020617%22%20opacity%3D%220.38%22%2F%3E%20%3Ctext%20x%3D%2260%22%20y%3D%22488%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2248%22%20font-weight%3D%22800%22%20fill%3D%22%23ffffff%22%3Eclip.d%20radius%20animation%3C%2Ftext%3E%20%3C%2Fsvg%3E",
+      "x": 210,
+      "y": 116,
+      "width": 540,
+      "height": 336,
+      "clip": {
+        "type": "path",
+        "d": "M 210 116 H 750 V 452 H 210 Z"
+      },
+      "timeline": {
+        "tracks": {
+          "clip.d": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": "M 210 116 H 750 V 452 H 210 Z"
+              },
+              {
+                "time": 0.0833,
+                "value": "M 210.42 116 H 749.58 Q 750 116 750 116.42 V 451.58 Q 750 452 749.58 452 H 210.42 Q 210 452 210 451.58 V 116.42 Q 210 116 210.42 116 Z"
+              },
+              {
+                "time": 0.1667,
+                "value": "M 211.67 116 H 748.33 Q 750 116 750 117.67 V 450.33 Q 750 452 748.33 452 H 211.67 Q 210 452 210 450.33 V 117.67 Q 210 116 211.67 116 Z"
+              },
+              {
+                "time": 0.25,
+                "value": "M 213.75 116 H 746.25 Q 750 116 750 119.75 V 448.25 Q 750 452 746.25 452 H 213.75 Q 210 452 210 448.25 V 119.75 Q 210 116 213.75 116 Z"
+              },
+              {
+                "time": 0.3333,
+                "value": "M 216.67 116 H 743.33 Q 750 116 750 122.67 V 445.33 Q 750 452 743.33 452 H 216.67 Q 210 452 210 445.33 V 122.67 Q 210 116 216.67 116 Z"
+              },
+              {
+                "time": 0.4167,
+                "value": "M 220.42 116 H 739.58 Q 750 116 750 126.42 V 441.58 Q 750 452 739.58 452 H 220.42 Q 210 452 210 441.58 V 126.42 Q 210 116 220.42 116 Z"
+              },
+              {
+                "time": 0.5,
+                "value": "M 225 116 H 735 Q 750 116 750 131 V 437 Q 750 452 735 452 H 225 Q 210 452 210 437 V 131 Q 210 116 225 116 Z"
+              },
+              {
+                "time": 0.5833,
+                "value": "M 230.41 116 H 729.59 Q 750 116 750 136.41 V 431.59 Q 750 452 729.59 452 H 230.41 Q 210 452 210 431.59 V 136.41 Q 210 116 230.41 116 Z"
+              },
+              {
+                "time": 0.6667,
+                "value": "M 236.67 116 H 723.33 Q 750 116 750 142.67 V 425.33 Q 750 452 723.33 452 H 236.67 Q 210 452 210 425.33 V 142.67 Q 210 116 236.67 116 Z"
+              },
+              {
+                "time": 0.75,
+                "value": "M 243.75 116 H 716.25 Q 750 116 750 149.75 V 418.25 Q 750 452 716.25 452 H 243.75 Q 210 452 210 418.25 V 149.75 Q 210 116 243.75 116 Z"
+              },
+              {
+                "time": 0.8333,
+                "value": "M 251.66 116 H 708.34 Q 750 116 750 157.66 V 410.34 Q 750 452 708.34 452 H 251.66 Q 210 452 210 410.34 V 157.66 Q 210 116 251.66 116 Z"
+              },
+              {
+                "time": 0.9167,
+                "value": "M 260.42 116 H 699.58 Q 750 116 750 166.42 V 401.58 Q 750 452 699.58 452 H 260.42 Q 210 452 210 401.58 V 166.42 Q 210 116 260.42 116 Z"
+              },
+              {
+                "time": 1,
+                "value": "M 270 116 H 690 Q 750 116 750 176 V 392 Q 750 452 690 452 H 270 Q 210 452 210 392 V 176 Q 210 116 270 116 Z"
+              },
+              {
+                "time": 1.0833,
+                "value": "M 279.58 116 H 680.42 Q 750 116 750 185.58 V 382.42 Q 750 452 680.42 452 H 279.58 Q 210 452 210 382.42 V 185.58 Q 210 116 279.58 116 Z"
+              },
+              {
+                "time": 1.1667,
+                "value": "M 288.34 116 H 671.66 Q 750 116 750 194.34 V 373.66 Q 750 452 671.66 452 H 288.34 Q 210 452 210 373.66 V 194.34 Q 210 116 288.34 116 Z"
+              },
+              {
+                "time": 1.25,
+                "value": "M 296.25 116 H 663.75 Q 750 116 750 202.25 V 365.75 Q 750 452 663.75 452 H 296.25 Q 210 452 210 365.75 V 202.25 Q 210 116 296.25 116 Z"
+              },
+              {
+                "time": 1.3333,
+                "value": "M 303.33 116 H 656.67 Q 750 116 750 209.33 V 358.67 Q 750 452 656.67 452 H 303.33 Q 210 452 210 358.67 V 209.33 Q 210 116 303.33 116 Z"
+              },
+              {
+                "time": 1.4167,
+                "value": "M 309.59 116 H 650.41 Q 750 116 750 215.59 V 352.41 Q 750 452 650.41 452 H 309.59 Q 210 452 210 352.41 V 215.59 Q 210 116 309.59 116 Z"
+              },
+              {
+                "time": 1.5,
+                "value": "M 315 116 H 645 Q 750 116 750 221 V 347 Q 750 452 645 452 H 315 Q 210 452 210 347 V 221 Q 210 116 315 116 Z"
+              },
+              {
+                "time": 1.5833,
+                "value": "M 319.58 116 H 640.42 Q 750 116 750 225.58 V 342.42 Q 750 452 640.42 452 H 319.58 Q 210 452 210 342.42 V 225.58 Q 210 116 319.58 116 Z"
+              },
+              {
+                "time": 1.6667,
+                "value": "M 323.33 116 H 636.67 Q 750 116 750 229.33 V 338.67 Q 750 452 636.67 452 H 323.33 Q 210 452 210 338.67 V 229.33 Q 210 116 323.33 116 Z"
+              },
+              {
+                "time": 1.75,
+                "value": "M 326.25 116 H 633.75 Q 750 116 750 232.25 V 335.75 Q 750 452 633.75 452 H 326.25 Q 210 452 210 335.75 V 232.25 Q 210 116 326.25 116 Z"
+              },
+              {
+                "time": 1.8333,
+                "value": "M 328.33 116 H 631.67 Q 750 116 750 234.33 V 333.67 Q 750 452 631.67 452 H 328.33 Q 210 452 210 333.67 V 234.33 Q 210 116 328.33 116 Z"
+              },
+              {
+                "time": 1.9167,
+                "value": "M 329.58 116 H 630.42 Q 750 116 750 235.58 V 332.42 Q 750 452 630.42 452 H 329.58 Q 210 452 210 332.42 V 235.58 Q 210 116 329.58 116 Z"
+              },
+              {
+                "time": 2,
+                "value": "M 330 116 H 630 Q 750 116 750 236 V 332 Q 750 452 630 452 H 330 Q 210 452 210 332 V 236 Q 210 116 330 116 Z"
+              },
+              {
+                "time": 2.0833,
+                "value": "M 329.58 116 H 630.42 Q 750 116 750 235.58 V 332.42 Q 750 452 630.42 452 H 329.58 Q 210 452 210 332.42 V 235.58 Q 210 116 329.58 116 Z"
+              },
+              {
+                "time": 2.1667,
+                "value": "M 328.33 116 H 631.67 Q 750 116 750 234.33 V 333.67 Q 750 452 631.67 452 H 328.33 Q 210 452 210 333.67 V 234.33 Q 210 116 328.33 116 Z"
+              },
+              {
+                "time": 2.25,
+                "value": "M 326.25 116 H 633.75 Q 750 116 750 232.25 V 335.75 Q 750 452 633.75 452 H 326.25 Q 210 452 210 335.75 V 232.25 Q 210 116 326.25 116 Z"
+              },
+              {
+                "time": 2.3333,
+                "value": "M 323.33 116 H 636.67 Q 750 116 750 229.33 V 338.67 Q 750 452 636.67 452 H 323.33 Q 210 452 210 338.67 V 229.33 Q 210 116 323.33 116 Z"
+              },
+              {
+                "time": 2.4167,
+                "value": "M 319.58 116 H 640.42 Q 750 116 750 225.58 V 342.42 Q 750 452 640.42 452 H 319.58 Q 210 452 210 342.42 V 225.58 Q 210 116 319.58 116 Z"
+              },
+              {
+                "time": 2.5,
+                "value": "M 315 116 H 645 Q 750 116 750 221 V 347 Q 750 452 645 452 H 315 Q 210 452 210 347 V 221 Q 210 116 315 116 Z"
+              },
+              {
+                "time": 2.5833,
+                "value": "M 309.59 116 H 650.41 Q 750 116 750 215.59 V 352.41 Q 750 452 650.41 452 H 309.59 Q 210 452 210 352.41 V 215.59 Q 210 116 309.59 116 Z"
+              },
+              {
+                "time": 2.6667,
+                "value": "M 303.33 116 H 656.67 Q 750 116 750 209.33 V 358.67 Q 750 452 656.67 452 H 303.33 Q 210 452 210 358.67 V 209.33 Q 210 116 303.33 116 Z"
+              },
+              {
+                "time": 2.75,
+                "value": "M 296.25 116 H 663.75 Q 750 116 750 202.25 V 365.75 Q 750 452 663.75 452 H 296.25 Q 210 452 210 365.75 V 202.25 Q 210 116 296.25 116 Z"
+              },
+              {
+                "time": 2.8333,
+                "value": "M 288.34 116 H 671.66 Q 750 116 750 194.34 V 373.66 Q 750 452 671.66 452 H 288.34 Q 210 452 210 373.66 V 194.34 Q 210 116 288.34 116 Z"
+              },
+              {
+                "time": 2.9167,
+                "value": "M 279.58 116 H 680.42 Q 750 116 750 185.58 V 382.42 Q 750 452 680.42 452 H 279.58 Q 210 452 210 382.42 V 185.58 Q 210 116 279.58 116 Z"
+              },
+              {
+                "time": 3,
+                "value": "M 270 116 H 690 Q 750 116 750 176 V 392 Q 750 452 690 452 H 270 Q 210 452 210 392 V 176 Q 210 116 270 116 Z"
+              },
+              {
+                "time": 3.0833,
+                "value": "M 260.42 116 H 699.58 Q 750 116 750 166.42 V 401.58 Q 750 452 699.58 452 H 260.42 Q 210 452 210 401.58 V 166.42 Q 210 116 260.42 116 Z"
+              },
+              {
+                "time": 3.1667,
+                "value": "M 251.66 116 H 708.34 Q 750 116 750 157.66 V 410.34 Q 750 452 708.34 452 H 251.66 Q 210 452 210 410.34 V 157.66 Q 210 116 251.66 116 Z"
+              },
+              {
+                "time": 3.25,
+                "value": "M 243.75 116 H 716.25 Q 750 116 750 149.75 V 418.25 Q 750 452 716.25 452 H 243.75 Q 210 452 210 418.25 V 149.75 Q 210 116 243.75 116 Z"
+              },
+              {
+                "time": 3.3333,
+                "value": "M 236.67 116 H 723.33 Q 750 116 750 142.67 V 425.33 Q 750 452 723.33 452 H 236.67 Q 210 452 210 425.33 V 142.67 Q 210 116 236.67 116 Z"
+              },
+              {
+                "time": 3.4167,
+                "value": "M 230.41 116 H 729.59 Q 750 116 750 136.41 V 431.59 Q 750 452 729.59 452 H 230.41 Q 210 452 210 431.59 V 136.41 Q 210 116 230.41 116 Z"
+              },
+              {
+                "time": 3.5,
+                "value": "M 225 116 H 735 Q 750 116 750 131 V 437 Q 750 452 735 452 H 225 Q 210 452 210 437 V 131 Q 210 116 225 116 Z"
+              },
+              {
+                "time": 3.5833,
+                "value": "M 220.42 116 H 739.58 Q 750 116 750 126.42 V 441.58 Q 750 452 739.58 452 H 220.42 Q 210 452 210 441.58 V 126.42 Q 210 116 220.42 116 Z"
+              },
+              {
+                "time": 3.6667,
+                "value": "M 216.67 116 H 743.33 Q 750 116 750 122.67 V 445.33 Q 750 452 743.33 452 H 216.67 Q 210 452 210 445.33 V 122.67 Q 210 116 216.67 116 Z"
+              },
+              {
+                "time": 3.75,
+                "value": "M 213.75 116 H 746.25 Q 750 116 750 119.75 V 448.25 Q 750 452 746.25 452 H 213.75 Q 210 452 210 448.25 V 119.75 Q 210 116 213.75 116 Z"
+              },
+              {
+                "time": 3.8333,
+                "value": "M 211.67 116 H 748.33 Q 750 116 750 117.67 V 450.33 Q 750 452 748.33 452 H 211.67 Q 210 452 210 450.33 V 117.67 Q 210 116 211.67 116 Z"
+              },
+              {
+                "time": 3.9167,
+                "value": "M 210.42 116 H 749.58 Q 750 116 750 116.42 V 451.58 Q 750 452 749.58 452 H 210.42 Q 210 452 210 451.58 V 116.42 Q 210 116 210.42 116 Z"
+              },
+              {
+                "time": 4,
+                "value": "M 210 116 H 750 V 452 H 210 Z"
+              }
+            ]
+          },
+          "opacity": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 0,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.58,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 0.35,
+                "value": 1
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}

package/examples/make-app-screen.cjs

@@ -0,0 +1,368 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 1440;
+const height = 900;
+const bg = "#f1f5f9";
+const font = "Inter, system-ui, sans-serif";
+
+const sidebarW = 240;
+const sidebarBg = "#1e293b";
+const mainX = sidebarW;
+const mainW = width - sidebarW;
+const mainPad = 40;
+
+const colors = {
+  sidebarBg: "#1e293b",
+  sidebarSection: "#94a3b8",
+  sidebarLabel: "#e2e8f0",
+  sidebarLabelMuted: "#94a3b8",
+  sidebarActive: "#2563eb",
+  sidebarActiveBg: "#334155",
+  mainTitle: "#0f172a",
+  mainBody: "#475569",
+  caption: "#64748b",
+  cardBg: "#ffffff",
+  cardBorder: "#e2e8f0",
+  cardTitle: "#1e293b",
+  cardBody: "#64748b",
+  cardMeta: "#94a3b8",
+  chipBg: "#ffffff",
+  chipBorder: "#cbd5e1",
+  chipText: "#334155",
+  chipActiveBg: "#2563eb",
+  chipActiveText: "#ffffff",
+  divider: "#334155"
+};
+
+const elements = [];
+
+// === Sidebar background ===
+elements.push({
+  id: "sidebar-bg",
+  type: "path",
+  d: `M 0 0 L ${sidebarW} 0 L ${sidebarW} ${height} L 0 ${height} Z`,
+  fill: colors.sidebarBg,
+  stroke: "none"
+});
+
+// Sidebar logo / app name
+elements.push({
+  id: "sidebar-logo",
+  type: "text",
+  x: 24,
+  y: 24,
+  text: "Acme Studio",
+  align: "left",
+  valign: "top",
+  fontSize: 16,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.sidebarLabel
+});
+
+let sy = 72;
+
+// --- Sidebar Section: Workspace ---
+sy = sidebarSection("ws", "WORKSPACE", sy, [
+  { id: "nav-dashboard", label: "Dashboard", active: false },
+  { id: "nav-projects", label: "Projects", active: true },
+  { id: "nav-tasks", label: "Tasks", active: false },
+  { id: "nav-calendar", label: "Calendar", active: false }
+]);
+
+sy += 24;
+
+// --- Sidebar Section: Analytics ---
+sy = sidebarSection("an", "ANALYTICS", sy, [
+  { id: "nav-overview", label: "Overview", active: false },
+  { id: "nav-reports", label: "Reports", active: false },
+  { id: "nav-exports", label: "Exports", active: false }
+]);
+
+sy += 24;
+
+// --- Sidebar Section: Settings ---
+sy = sidebarSection("st", "SETTINGS", sy, [
+  { id: "nav-general", label: "General", active: false },
+  { id: "nav-team", label: "Team Members", active: false },
+  { id: "nav-billing", label: "Billing", active: false },
+  { id: "nav-integrations", label: "Integrations", active: false }
+]);
+
+// === Main content area ===
+let my = 32;
+const mx = mainX + mainPad;
+const mw = mainW - mainPad * 2;
+
+// Main title
+elements.push({
+  id: "main-title",
+  type: "text",
+  x: mx,
+  y: my,
+  text: "Projects",
+  align: "left",
+  valign: "top",
+  fontSize: 28,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.mainTitle
+});
+my += 40;
+
+// Summary paragraph
+elements.push({
+  id: "main-summary",
+  type: "text",
+  x: mx,
+  y: my,
+  text: "Track active projects across your workspace. Filter by status or team to narrow\nresults. Each card shows the latest activity snapshot and assigned owner.",
+  align: "left",
+  valign: "top",
+  fontSize: 14,
+  fontFamily: font,
+  weight: 400,
+  lineHeight: 1.6,
+  fill: colors.mainBody,
+  maxWidth: mw
+});
+my += 52;
+
+// Filter chips row (centered text in each chip)
+const chips = [
+  { label: "All", active: true },
+  { label: "Active", active: false },
+  { label: "Archived", active: false },
+  { label: "My Team", active: false }
+];
+
+let chipX = mx;
+const chipH = 30;
+const chipR = 15;
+const chipPadX = 16;
+const chipGap = 10;
+
+chips.forEach((chip, i) => {
+  const charW = chip.label.length * 7.5 + chipPadX * 2;
+  elements.push({
+    id: `chip-bg-${i}`,
+    type: "path",
+    d: roundedRect(chipX, my, charW, chipH, chipR),
+    fill: chip.active ? colors.chipActiveBg : colors.chipBg,
+    stroke: chip.active ? "none" : colors.chipBorder,
+    strokeWidth: chip.active ? 0 : 1
+  });
+  elements.push({
+    id: `chip-text-${i}`,
+    type: "text",
+    x: chipX + charW / 2,
+    y: my + chipH / 2,
+    text: chip.label,
+    align: "center",
+    valign: "middle",
+    fontSize: 13,
+    fontFamily: font,
+    weight: 500,
+    fill: chip.active ? colors.chipActiveText : colors.chipText
+  });
+  chipX += charW + chipGap;
+});
+my += chipH + 28;
+
+// Table caption
+elements.push({
+  id: "table-caption",
+  type: "text",
+  x: mx,
+  y: my,
+  text: "Showing 3 of 12 projects · Sorted by last activity",
+  align: "left",
+  valign: "top",
+  fontSize: 12,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.caption
+});
+my += 28;
+
+// === Content cards ===
+const cards = [
+  {
+    id: "card-a",
+    title: "Design System v3",
+    body: "Component library refactor with updated tokens, accessibility\nimprovements, and new layout primitives for dashboard views.",
+    meta: "Updated 2 hours ago · Sarah K."
+  },
+  {
+    id: "card-b",
+    title: "API Gateway Migration",
+    body: "Moving from the legacy REST proxy to a new GraphQL federation\nlayer with per-service schema ownership and rate limiting.",
+    meta: "Updated 1 day ago · Marcus T."
+  },
+  {
+    id: "card-c",
+    title: "Onboarding Flow Redesign",
+    body: "Streamlining the first-run experience with progressive disclosure,\nreduced form fields, and contextual help tooltips.",
+    meta: "Updated 3 days ago · Priya N."
+  }
+];
+
+const cardPad = 20;
+const cardGap = 16;
+const cardW = mw;
+const cardH = 120;
+
+cards.forEach((card, i) => {
+  const cy = my + i * (cardH + cardGap);
+
+  // Card background
+  elements.push({
+    id: `${card.id}-bg`,
+    type: "path",
+    d: roundedRect(mx, cy, cardW, cardH, 8),
+    fill: colors.cardBg,
+    stroke: colors.cardBorder,
+    strokeWidth: 1
+  });
+
+  // Card title
+  elements.push({
+    id: `${card.id}-title`,
+    type: "text",
+    x: mx + cardPad,
+    y: cy + 16,
+    text: card.title,
+    align: "left",
+    valign: "top",
+    fontSize: 16,
+    fontFamily: font,
+    weight: 600,
+    fill: colors.cardTitle
+  });
+
+  // Card body
+  elements.push({
+    id: `${card.id}-body`,
+    type: "text",
+    x: mx + cardPad,
+    y: cy + 42,
+    text: card.body,
+    align: "left",
+    valign: "top",
+    fontSize: 13,
+    fontFamily: font,
+    weight: 400,
+    lineHeight: 1.55,
+    fill: colors.cardBody,
+    maxWidth: cardW - cardPad * 2
+  });
+
+  // Card meta
+  elements.push({
+    id: `${card.id}-meta`,
+    type: "text",
+    x: mx + cardPad,
+    y: cy + cardH - 22,
+    text: card.meta,
+    align: "left",
+    valign: "top",
+    fontSize: 11,
+    fontFamily: font,
+    weight: 400,
+    fill: colors.cardMeta
+  });
+});
+
+// --- Sidebar helpers ---
+
+function sidebarSection(prefix, title, startY, items) {
+  let cy = startY;
+
+  // Section heading
+  elements.push({
+    id: `${prefix}-heading`,
+    type: "text",
+    x: 24,
+    y: cy,
+    text: title,
+    align: "left",
+    valign: "top",
+    fontSize: 10,
+    fontFamily: font,
+    weight: 600,
+    letterSpacing: 1,
+    fill: colors.sidebarSection
+  });
+  cy += 24;
+
+  items.forEach((item) => {
+    // Active highlight bg
+    if (item.active) {
+      elements.push({
+        id: `${item.id}-active-bg`,
+        type: "path",
+        d: roundedRect(12, cy - 4, sidebarW - 24, 30, 6),
+        fill: colors.sidebarActiveBg,
+        stroke: "none"
+      });
+    }
+
+    // Nav label
+    elements.push({
+      id: item.id,
+      type: "text",
+      x: 24,
+      y: cy,
+      text: item.label,
+      align: "left",
+      valign: "top",
+      fontSize: 13,
+      fontFamily: font,
+      weight: item.active ? 500 : 400,
+      fill: item.active ? colors.sidebarLabel : colors.sidebarLabelMuted
+    });
+
+    // Active indicator bar
+    if (item.active) {
+      elements.push({
+        id: `${item.id}-indicator`,
+        type: "path",
+        d: `M 4 ${cy} L 4 ${cy + 18}`,
+        stroke: colors.sidebarActive,
+        strokeWidth: 3,
+        strokeCap: "round",
+        fill: "none"
+      });
+    }
+
+    cy += 34;
+  });
+
+  return cy;
+}
+
+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, "app-screen.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);