sketchmark 2.0.0 → 2.1.0

package/examples/app-screen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900" role="img"><rect x="0" y="0" width="1440" height="900" fill="#f1f5f9"/><path id="sidebar-bg" d="M 0 0 L 240 0 L 240 900 L 0 900 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="sidebar-logo" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#e2e8f0"><tspan x="24" y="32">Acme Studio</tspan></text><text id="ws-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="1" fill="#94a3b8"><tspan x="24" y="77">WORKSPACE</tspan></text><text id="nav-dashboard" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="102.5">Dashboard</tspan></text><path id="nav-projects-active-bg" d="M 18 126 L 222 126 Q 228 126 228 132 L 228 150 Q 228 156 222 156 L 18 156 Q 12 156 12 150 L 12 132 Q 12 126 18 126 Z" fill="#334155" stroke="none" stroke-width="0"/><text id="nav-projects" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#e2e8f0"><tspan x="24" y="136.5">Projects</tspan></text><path id="nav-projects-indicator" d="M 4 130 L 4 148" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round"/><text id="nav-tasks" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="170.5">Tasks</tspan></text><text id="nav-calendar" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="204.5">Calendar</tspan></text><text id="an-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="1" fill="#94a3b8"><tspan x="24" y="261">ANALYTICS</tspan></text><text id="nav-overview" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="286.5">Overview</tspan></text><text id="nav-reports" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="320.5">Reports</tspan></text><text id="nav-exports" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="354.5">Exports</tspan></text><text id="st-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="1" fill="#94a3b8"><tspan x="24" y="411">SETTINGS</tspan></text><text id="nav-general" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="436.5">General</tspan></text><text id="nav-team" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="470.5">Team Members</tspan></text><text id="nav-billing" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="504.5">Billing</tspan></text><text id="nav-integrations" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="538.5">Integrations</tspan></text><text id="main-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="28" font-weight="700" fill="#0f172a"><tspan x="280" y="46">Projects</tspan></text><text id="main-summary" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#475569"><tspan x="280" y="79">Track active projects across your workspace. Filter by status or team to narrow</tspan><tspan x="280" y="101.4">results. Each card shows the latest activity snapshot and assigned owner.</tspan></text><path id="chip-bg-0" d="M 295 124 L 319.5 124 Q 334.5 124 334.5 139 L 334.5 139 Q 334.5 154 319.5 154 L 295 154 Q 280 154 280 139 L 280 139 Q 280 124 295 124 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="chip-text-0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#ffffff"><tspan x="307.25" y="139">All</tspan></text><path id="chip-bg-1" d="M 359.5 124 L 406.5 124 Q 421.5 124 421.5 139 L 421.5 139 Q 421.5 154 406.5 154 L 359.5 154 Q 344.5 154 344.5 139 L 344.5 139 Q 344.5 124 359.5 124 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="chip-text-1" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="383" y="139">Active</tspan></text><path id="chip-bg-2" d="M 446.5 124 L 508.5 124 Q 523.5 124 523.5 139 L 523.5 139 Q 523.5 154 508.5 154 L 446.5 154 Q 431.5 154 431.5 139 L 431.5 139 Q 431.5 124 446.5 124 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="chip-text-2" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="477.5" y="139">Archived</tspan></text><path id="chip-bg-3" d="M 548.5 124 L 603 124 Q 618 124 618 139 L 618 139 Q 618 154 603 154 L 548.5 154 Q 533.5 154 533.5 139 L 533.5 139 Q 533.5 124 548.5 124 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="chip-text-3" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="575.75" y="139">My Team</tspan></text><text id="table-caption" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#64748b"><tspan x="280" y="188">Showing 3 of 12 projects · Sorted by last activity</tspan></text><path id="card-a-bg" d="M 288 210 L 1392 210 Q 1400 210 1400 218 L 1400 322 Q 1400 330 1392 330 L 288 330 Q 280 330 280 322 L 280 218 Q 280 210 288 210 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="card-a-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="300" y="234">Design System v3</tspan></text><text id="card-a-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="300" y="258.5">Component library refactor with updated tokens, accessibility</tspan><tspan x="300" y="278.65">improvements, and new layout primitives for dashboard views.</tspan></text><text id="card-a-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="400" fill="#94a3b8"><tspan x="300" y="313.5">Updated 2 hours ago · Sarah K.</tspan></text><path id="card-b-bg" d="M 288 346 L 1392 346 Q 1400 346 1400 354 L 1400 458 Q 1400 466 1392 466 L 288 466 Q 280 466 280 458 L 280 354 Q 280 346 288 346 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="card-b-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="300" y="370">API Gateway Migration</tspan></text><text id="card-b-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="300" y="394.5">Moving from the legacy REST proxy to a new GraphQL federation</tspan><tspan x="300" y="414.65">layer with per-service schema ownership and rate limiting.</tspan></text><text id="card-b-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="400" fill="#94a3b8"><tspan x="300" y="449.5">Updated 1 day ago · Marcus T.</tspan></text><path id="card-c-bg" d="M 288 482 L 1392 482 Q 1400 482 1400 490 L 1400 594 Q 1400 602 1392 602 L 288 602 Q 280 602 280 594 L 280 490 Q 280 482 288 482 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="card-c-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="300" y="506">Onboarding Flow Redesign</tspan></text><text id="card-c-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="300" y="530.5">Streamlining the first-run experience with progressive disclosure,</tspan><tspan x="300" y="550.65">reduced form fields, and contextual help tooltips.</tspan></text><text id="card-c-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="400" fill="#94a3b8"><tspan x="300" y="585.5">Updated 3 days ago · Priya N.</tspan></text></svg>

package/examples/app-screen.visual.json

@@ -0,0 +1,503 @@
+{
+  "version": 1,
+  "canvas": {
+    "width": 1440,
+    "height": 900,
+    "background": "#f1f5f9"
+  },
+  "elements": [
+    {
+      "id": "sidebar-bg",
+      "type": "path",
+      "d": "M 0 0 L 240 0 L 240 900 L 0 900 Z",
+      "fill": "#1e293b",
+      "stroke": "none"
+    },
+    {
+      "id": "sidebar-logo",
+      "type": "text",
+      "x": 24,
+      "y": 24,
+      "text": "Acme Studio",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 16,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 700,
+      "fill": "#e2e8f0"
+    },
+    {
+      "id": "ws-heading",
+      "type": "text",
+      "x": 24,
+      "y": 72,
+      "text": "WORKSPACE",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 10,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "letterSpacing": 1,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-dashboard",
+      "type": "text",
+      "x": 24,
+      "y": 96,
+      "text": "Dashboard",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-projects-active-bg",
+      "type": "path",
+      "d": "M 18 126 L 222 126 Q 228 126 228 132 L 228 150 Q 228 156 222 156 L 18 156 Q 12 156 12 150 L 12 132 Q 12 126 18 126 Z",
+      "fill": "#334155",
+      "stroke": "none"
+    },
+    {
+      "id": "nav-projects",
+      "type": "text",
+      "x": 24,
+      "y": 130,
+      "text": "Projects",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 500,
+      "fill": "#e2e8f0"
+    },
+    {
+      "id": "nav-projects-indicator",
+      "type": "path",
+      "d": "M 4 130 L 4 148",
+      "stroke": "#2563eb",
+      "strokeWidth": 3,
+      "strokeCap": "round",
+      "fill": "none"
+    },
+    {
+      "id": "nav-tasks",
+      "type": "text",
+      "x": 24,
+      "y": 164,
+      "text": "Tasks",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-calendar",
+      "type": "text",
+      "x": 24,
+      "y": 198,
+      "text": "Calendar",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "an-heading",
+      "type": "text",
+      "x": 24,
+      "y": 256,
+      "text": "ANALYTICS",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 10,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "letterSpacing": 1,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-overview",
+      "type": "text",
+      "x": 24,
+      "y": 280,
+      "text": "Overview",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-reports",
+      "type": "text",
+      "x": 24,
+      "y": 314,
+      "text": "Reports",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-exports",
+      "type": "text",
+      "x": 24,
+      "y": 348,
+      "text": "Exports",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "st-heading",
+      "type": "text",
+      "x": 24,
+      "y": 406,
+      "text": "SETTINGS",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 10,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "letterSpacing": 1,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-general",
+      "type": "text",
+      "x": 24,
+      "y": 430,
+      "text": "General",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-team",
+      "type": "text",
+      "x": 24,
+      "y": 464,
+      "text": "Team Members",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-billing",
+      "type": "text",
+      "x": 24,
+      "y": 498,
+      "text": "Billing",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "nav-integrations",
+      "type": "text",
+      "x": 24,
+      "y": 532,
+      "text": "Integrations",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "main-title",
+      "type": "text",
+      "x": 280,
+      "y": 32,
+      "text": "Projects",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 28,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 700,
+      "fill": "#0f172a"
+    },
+    {
+      "id": "main-summary",
+      "type": "text",
+      "x": 280,
+      "y": 72,
+      "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": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "lineHeight": 1.6,
+      "fill": "#475569",
+      "maxWidth": 1120
+    },
+    {
+      "id": "chip-bg-0",
+      "type": "path",
+      "d": "M 295 124 L 319.5 124 Q 334.5 124 334.5 139 L 334.5 139 Q 334.5 154 319.5 154 L 295 154 Q 280 154 280 139 L 280 139 Q 280 124 295 124 Z",
+      "fill": "#2563eb",
+      "stroke": "none",
+      "strokeWidth": 0
+    },
+    {
+      "id": "chip-text-0",
+      "type": "text",
+      "x": 307.25,
+      "y": 139,
+      "text": "All",
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 500,
+      "fill": "#ffffff"
+    },
+    {
+      "id": "chip-bg-1",
+      "type": "path",
+      "d": "M 359.5 124 L 406.5 124 Q 421.5 124 421.5 139 L 421.5 139 Q 421.5 154 406.5 154 L 359.5 154 Q 344.5 154 344.5 139 L 344.5 139 Q 344.5 124 359.5 124 Z",
+      "fill": "#ffffff",
+      "stroke": "#cbd5e1",
+      "strokeWidth": 1
+    },
+    {
+      "id": "chip-text-1",
+      "type": "text",
+      "x": 383,
+      "y": 139,
+      "text": "Active",
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 500,
+      "fill": "#334155"
+    },
+    {
+      "id": "chip-bg-2",
+      "type": "path",
+      "d": "M 446.5 124 L 508.5 124 Q 523.5 124 523.5 139 L 523.5 139 Q 523.5 154 508.5 154 L 446.5 154 Q 431.5 154 431.5 139 L 431.5 139 Q 431.5 124 446.5 124 Z",
+      "fill": "#ffffff",
+      "stroke": "#cbd5e1",
+      "strokeWidth": 1
+    },
+    {
+      "id": "chip-text-2",
+      "type": "text",
+      "x": 477.5,
+      "y": 139,
+      "text": "Archived",
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 500,
+      "fill": "#334155"
+    },
+    {
+      "id": "chip-bg-3",
+      "type": "path",
+      "d": "M 548.5 124 L 603 124 Q 618 124 618 139 L 618 139 Q 618 154 603 154 L 548.5 154 Q 533.5 154 533.5 139 L 533.5 139 Q 533.5 124 548.5 124 Z",
+      "fill": "#ffffff",
+      "stroke": "#cbd5e1",
+      "strokeWidth": 1
+    },
+    {
+      "id": "chip-text-3",
+      "type": "text",
+      "x": 575.75,
+      "y": 139,
+      "text": "My Team",
+      "align": "center",
+      "valign": "middle",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 500,
+      "fill": "#334155"
+    },
+    {
+      "id": "table-caption",
+      "type": "text",
+      "x": 280,
+      "y": 182,
+      "text": "Showing 3 of 12 projects · Sorted by last activity",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 12,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#64748b"
+    },
+    {
+      "id": "card-a-bg",
+      "type": "path",
+      "d": "M 288 210 L 1392 210 Q 1400 210 1400 218 L 1400 322 Q 1400 330 1392 330 L 288 330 Q 280 330 280 322 L 280 218 Q 280 210 288 210 Z",
+      "fill": "#ffffff",
+      "stroke": "#e2e8f0",
+      "strokeWidth": 1
+    },
+    {
+      "id": "card-a-title",
+      "type": "text",
+      "x": 300,
+      "y": 226,
+      "text": "Design System v3",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 16,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "fill": "#1e293b"
+    },
+    {
+      "id": "card-a-body",
+      "type": "text",
+      "x": 300,
+      "y": 252,
+      "text": "Component library refactor with updated tokens, accessibility\nimprovements, and new layout primitives for dashboard views.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "lineHeight": 1.55,
+      "fill": "#64748b",
+      "maxWidth": 1080
+    },
+    {
+      "id": "card-a-meta",
+      "type": "text",
+      "x": 300,
+      "y": 308,
+      "text": "Updated 2 hours ago · Sarah K.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 11,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "card-b-bg",
+      "type": "path",
+      "d": "M 288 346 L 1392 346 Q 1400 346 1400 354 L 1400 458 Q 1400 466 1392 466 L 288 466 Q 280 466 280 458 L 280 354 Q 280 346 288 346 Z",
+      "fill": "#ffffff",
+      "stroke": "#e2e8f0",
+      "strokeWidth": 1
+    },
+    {
+      "id": "card-b-title",
+      "type": "text",
+      "x": 300,
+      "y": 362,
+      "text": "API Gateway Migration",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 16,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "fill": "#1e293b"
+    },
+    {
+      "id": "card-b-body",
+      "type": "text",
+      "x": 300,
+      "y": 388,
+      "text": "Moving from the legacy REST proxy to a new GraphQL federation\nlayer with per-service schema ownership and rate limiting.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "lineHeight": 1.55,
+      "fill": "#64748b",
+      "maxWidth": 1080
+    },
+    {
+      "id": "card-b-meta",
+      "type": "text",
+      "x": 300,
+      "y": 444,
+      "text": "Updated 1 day ago · Marcus T.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 11,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "card-c-bg",
+      "type": "path",
+      "d": "M 288 482 L 1392 482 Q 1400 482 1400 490 L 1400 594 Q 1400 602 1392 602 L 288 602 Q 280 602 280 594 L 280 490 Q 280 482 288 482 Z",
+      "fill": "#ffffff",
+      "stroke": "#e2e8f0",
+      "strokeWidth": 1
+    },
+    {
+      "id": "card-c-title",
+      "type": "text",
+      "x": 300,
+      "y": 498,
+      "text": "Onboarding Flow Redesign",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 16,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 600,
+      "fill": "#1e293b"
+    },
+    {
+      "id": "card-c-body",
+      "type": "text",
+      "x": 300,
+      "y": 524,
+      "text": "Streamlining the first-run experience with progressive disclosure,\nreduced form fields, and contextual help tooltips.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 13,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "lineHeight": 1.55,
+      "fill": "#64748b",
+      "maxWidth": 1080
+    },
+    {
+      "id": "card-c-meta",
+      "type": "text",
+      "x": 300,
+      "y": 580,
+      "text": "Updated 3 days ago · Priya N.",
+      "align": "left",
+      "valign": "top",
+      "fontSize": 11,
+      "fontFamily": "Inter, system-ui, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    }
+  ]
+}

package/examples/dashboard-table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="560" viewBox="0 0 1100 560" role="img"><rect x="0" y="0" width="1100" height="560" fill="#f8fafc"/><text id="page-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="26" font-weight="700" fill="#0f172a"><tspan x="48" y="53">Operations Dashboard</tspan></text><text id="table-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="48" y="92">Service Health Overview</tspan></text><path id="table-border" d="M 56 116 L 1044 116 Q 1052 116 1052 124 L 1052 412 Q 1052 420 1044 420 L 56 420 Q 48 420 48 412 L 48 124 Q 48 116 56 116 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><path id="header-bg" d="M 56 116 L 1044 116 Q 1052 116 1052 124 L 1052 156 L 48 156 L 48 124 Q 48 116 56 116 Z" fill="#f1f5f9" stroke="none" stroke-width="0"/><path id="header-border" d="M 48 156 L 1052 156" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="header-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#475569"><tspan x="64" y="136">Service</tspan></text><text id="header-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#475569"><tspan x="352" y="136">Requests</tspan></text><text id="header-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#475569"><tspan x="472" y="136">Avg Latency</tspan></text><text id="header-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#475569"><tspan x="582" y="136">Error Rate</tspan></text><text id="header-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#475569"><tspan x="682" y="136">Uptime</tspan></text><text id="header-status" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="600" fill="#475569"><tspan x="753" y="136">Status</tspan></text><path id="row-border-0" d="M 64 200 L 1036 200" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="cell-0-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="64" y="178">API Gateway</tspan></text><text id="cell-0-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="352" y="178">1.2M</tspan></text><text id="cell-0-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="472" y="178">42ms</tspan></text><text id="cell-0-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="582" y="178">0.02%</tspan></text><text id="cell-0-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="682" y="178">99.99%</tspan></text><path id="cell-0-status-bg" d="M 729 166 L 777 166 Q 789 166 789 178 L 789 178 Q 789 190 777 190 L 729 190 Q 717 190 717 178 L 717 178 Q 717 166 729 166 Z" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="cell-0-status-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#10b981"><tspan x="753" y="178">Healthy</tspan></text><path id="row-bg-1" d="M 48 200 L 1052 200 L 1052 244 L 48 244 Z" fill="#fafbfc" stroke="none" stroke-width="0"/><path id="row-border-1" d="M 64 244 L 1036 244" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="cell-1-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="64" y="222">Auth Service</tspan></text><text id="cell-1-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="352" y="222">890K</tspan></text><text id="cell-1-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="472" y="222">28ms</tspan></text><text id="cell-1-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="582" y="222">0.01%</tspan></text><text id="cell-1-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="682" y="222">99.98%</tspan></text><path id="cell-1-status-bg" d="M 729 210 L 777 210 Q 789 210 789 222 L 789 222 Q 789 234 777 234 L 729 234 Q 717 234 717 222 L 717 222 Q 717 210 729 210 Z" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="cell-1-status-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#10b981"><tspan x="753" y="222">Healthy</tspan></text><path id="row-border-2" d="M 64 288 L 1036 288" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="cell-2-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="64" y="266">User Database</tspan></text><text id="cell-2-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="352" y="266">2.4M</tspan></text><text id="cell-2-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="472" y="266">8ms</tspan></text><text id="cell-2-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="582" y="266">0.00%</tspan></text><text id="cell-2-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="682" y="266">100%</tspan></text><path id="cell-2-status-bg" d="M 729 254 L 777 254 Q 789 254 789 266 L 789 266 Q 789 278 777 278 L 729 278 Q 717 278 717 266 L 717 266 Q 717 254 729 254 Z" fill="#d1fae5" stroke="none" stroke-width="0"/><text id="cell-2-status-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#10b981"><tspan x="753" y="266">Healthy</tspan></text><path id="row-bg-3" d="M 48 288 L 1052 288 L 1052 332 L 48 332 Z" fill="#fafbfc" stroke="none" stroke-width="0"/><path id="row-border-3" d="M 64 332 L 1036 332" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="cell-3-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="64" y="310">Cache Layer</tspan></text><text id="cell-3-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="352" y="310">5.1M</tspan></text><text id="cell-3-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="472" y="310">2ms</tspan></text><text id="cell-3-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="582" y="310">0.03%</tspan></text><text id="cell-3-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="682" y="310">99.95%</tspan></text><path id="cell-3-status-bg" d="M 729 298 L 777 298 Q 789 298 789 310 L 789 310 Q 789 322 777 322 L 729 322 Q 717 322 717 310 L 717 310 Q 717 298 729 298 Z" fill="#fef3c7" stroke="none" stroke-width="0"/><text id="cell-3-status-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#d97706"><tspan x="753" y="310">Degraded</tspan></text><path id="row-border-4" d="M 64 376 L 1036 376" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="cell-4-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="64" y="354">Search Index</tspan></text><text id="cell-4-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="352" y="354">340K</tspan></text><text id="cell-4-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="472" y="354">156ms</tspan></text><text id="cell-4-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="582" y="354">1.20%</tspan></text><text id="cell-4-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="682" y="354">98.50%</tspan></text><path id="cell-4-status-bg" d="M 729 342 L 777 342 Q 789 342 789 354 L 789 354 Q 789 366 777 366 L 729 366 Q 717 366 717 354 L 717 354 Q 717 342 729 342 Z" fill="#fef3c7" stroke="none" stroke-width="0"/><text id="cell-4-status-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#d97706"><tspan x="753" y="354">Warning</tspan></text><path id="row-bg-5" d="M 48 376 L 1052 376 L 1052 420 L 48 420 Z" fill="#fafbfc" stroke="none" stroke-width="0"/><text id="cell-5-service" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="64" y="398">Legacy Sync</tspan></text><text id="cell-5-requests" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="352" y="398">45K</tspan></text><text id="cell-5-latency" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="472" y="398">890ms</tspan></text><text id="cell-5-errors" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="582" y="398">4.50%</tspan></text><text id="cell-5-uptime" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="682" y="398">94.20%</tspan></text><path id="cell-5-status-bg" d="M 729 386 L 777 386 Q 789 386 789 398 L 789 398 Q 789 410 777 410 L 729 410 Q 717 410 717 398 L 717 398 Q 717 386 729 386 Z" fill="#fee2e2" stroke="none" stroke-width="0"/><text id="cell-5-status-text" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="600" fill="#dc2626"><tspan x="753" y="398">Critical</tspan></text></svg>