sketchmark 2.1.0 → 2.1.2

package/examples/transcript.visual.json

@@ -1,407 +0,0 @@
-{
-  "version": 1,
-  "canvas": {
-    "width": 900,
-    "height": 1140,
-    "background": "#ffffff"
-  },
-  "elements": [
-    {
-      "id": "title",
-      "type": "text",
-      "x": 56,
-      "y": 44,
-      "text": "Meeting Transcript",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 30,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 700,
-      "fill": "#0f172a"
-    },
-    {
-      "id": "subtitle",
-      "type": "text",
-      "x": 56,
-      "y": 86,
-      "text": "Product Sync — May 27, 2026 · 10:00 AM · 4 participants",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#64748b"
-    },
-    {
-      "id": "divider-top",
-      "type": "path",
-      "d": "M 56 118 L 844 118",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1,
-      "fill": "none"
-    },
-    {
-      "id": "msg-0-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 150,
-      "text": "Sarah Chen",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-0-time",
-      "type": "text",
-      "x": 844,
-      "y": 150,
-      "text": "10:01",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-0-bg",
-      "type": "path",
-      "d": "M 64 174 L 836 174 Q 844 174 844 182 L 844 257 Q 844 265 836 265 L 64 265 Q 56 265 56 257 L 56 182 Q 56 174 64 174 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-0-text",
-      "type": "text",
-      "x": 70,
-      "y": 188,
-      "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.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "msg-1-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 285,
-      "text": "Marcus Taylor",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-1-time",
-      "type": "text",
-      "x": 844,
-      "y": 285,
-      "text": "10:02",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-1-bg",
-      "type": "path",
-      "d": "M 64 309 L 836 309 Q 844 309 844 317 L 844 392 Q 844 400 836 400 L 64 400 Q 56 400 56 392 L 56 317 Q 56 309 64 309 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-1-text",
-      "type": "text",
-      "x": 70,
-      "y": 323,
-      "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.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "msg-2-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 420,
-      "text": "Priya Nair",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-2-time",
-      "type": "text",
-      "x": 844,
-      "y": 420,
-      "text": "10:03",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-2-bg",
-      "type": "path",
-      "d": "M 64 444 L 836 444 Q 844 444 844 452 L 844 527 Q 844 535 836 535 L 64 535 Q 56 535 56 527 L 56 452 Q 56 444 64 444 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-2-text",
-      "type": "text",
-      "x": 70,
-      "y": 458,
-      "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.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "msg-3-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 555,
-      "text": "Sarah Chen",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-3-time",
-      "type": "text",
-      "x": 844,
-      "y": 555,
-      "text": "10:04",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-3-bg",
-      "type": "path",
-      "d": "M 64 579 L 836 579 Q 844 579 844 587 L 844 662 Q 844 670 836 670 L 64 670 Q 56 670 56 662 L 56 587 Q 56 579 64 579 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-3-text",
-      "type": "text",
-      "x": 70,
-      "y": 593,
-      "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.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "msg-4-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 690,
-      "text": "James Olsen",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-4-time",
-      "type": "text",
-      "x": 844,
-      "y": 690,
-      "text": "10:05",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-4-bg",
-      "type": "path",
-      "d": "M 64 714 L 836 714 Q 844 714 844 722 L 844 797 Q 844 805 836 805 L 64 805 Q 56 805 56 797 L 56 722 Q 56 714 64 714 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-4-text",
-      "type": "text",
-      "x": 70,
-      "y": 728,
-      "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.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "msg-5-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 825,
-      "text": "Priya Nair",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-5-time",
-      "type": "text",
-      "x": 844,
-      "y": 825,
-      "text": "10:06",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-5-bg",
-      "type": "path",
-      "d": "M 64 849 L 836 849 Q 844 849 844 857 L 844 911 Q 844 919 836 919 L 64 919 Q 56 919 56 911 L 56 857 Q 56 849 64 849 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-5-text",
-      "type": "text",
-      "x": 70,
-      "y": 863,
-      "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.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "msg-6-speaker",
-      "type": "text",
-      "x": 56,
-      "y": 939,
-      "text": "Sarah Chen",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#1e293b"
-    },
-    {
-      "id": "msg-6-time",
-      "type": "text",
-      "x": 844,
-      "y": 939,
-      "text": "10:07",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#94a3b8"
-    },
-    {
-      "id": "msg-6-bg",
-      "type": "path",
-      "d": "M 64 963 L 836 963 Q 844 963 844 971 L 844 1046 Q 844 1054 836 1054 L 64 1054 Q 56 1054 56 1046 L 56 971 Q 56 963 64 963 Z",
-      "fill": "#f8fafc",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1
-    },
-    {
-      "id": "msg-6-text",
-      "type": "text",
-      "x": 70,
-      "y": 977,
-      "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?",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 13,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.6,
-      "fill": "#334155",
-      "maxWidth": 760
-    },
-    {
-      "id": "btn-export-bg",
-      "type": "path",
-      "d": "M 388 1086 L 512 1086 Q 520 1086 520 1094 L 520 1120 Q 520 1128 512 1128 L 388 1128 Q 380 1128 380 1120 L 380 1094 Q 380 1086 388 1086 Z",
-      "fill": "#1e293b",
-      "stroke": "none"
-    },
-    {
-      "id": "btn-export-label",
-      "type": "text",
-      "x": 450,
-      "y": 1107,
-      "text": "Export Transcript",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#ffffff"
-    }
-  ]
-}

package/examples/typography-indent-check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="920" viewBox="0 0 1000 920" role="img"><rect x="0" y="0" width="1000" height="920" fill="#ffffff"/><text id="headline" xml:space="preserve" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="40" font-weight="700" letter-spacing="0" fill="#0f172a"><tspan x="500" y="76">Typography&#160;Stress&#160;Test</tspan></text><text id="subtitle" xml:space="preserve" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#475569"><tspan x="500" y="120">Demonstrating&#160;multiple&#160;alignment&#160;modes,&#160;text&#160;styles,&#160;and&#160;layout&#160;patterns</tspan><tspan x="500" y="144.8">in&#160;a&#160;single&#160;cohesive&#160;document&#160;without&#160;visual&#160;overlap.</tspan></text><path id="divider-1" d="M 72 176 L 928 176" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="para-heading" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="226">Overview</tspan></text><text id="para-body" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" letter-spacing="0" fill="#334155"><tspan x="72" y="255">This&#160;document&#160;tests&#160;the&#160;render&#160;kernel's&#160;ability&#160;to&#160;handle&#160;diverse&#160;typographic</tspan><tspan x="72" y="278.8">scenarios.&#160;Each&#160;section&#160;exercises&#160;a&#160;different&#160;combination&#160;of&#160;alignment,&#160;weight,</tspan><tspan x="72" y="302.6">size,&#160;and&#160;line&#160;height.&#160;The&#160;goal&#160;is&#160;to&#160;verify&#160;that&#160;spacing&#160;remains&#160;predictable</tspan><tspan x="72" y="326.4">and&#160;that&#160;no&#160;elements&#160;collide&#160;regardless&#160;of&#160;content&#160;length&#160;or&#160;style&#160;variation.</tspan></text><text id="list-heading" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="368">Validation&#160;Checklist</tspan></text><text id="list-num-0" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="397">1.</tspan></text><text id="list-item-0" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="397">Confirm&#160;that&#160;centered&#160;text&#160;remains&#160;horizontally&#160;balanced&#160;at&#160;all&#160;font&#160;sizes.</tspan></text><text id="list-num-1" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="425">2.</tspan></text><text id="list-item-1" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="425">Verify&#160;left-aligned&#160;blocks&#160;maintain&#160;consistent&#160;left&#160;edge&#160;across&#160;line&#160;breaks.</tspan></text><text id="list-num-2" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="453">3.</tspan></text><text id="list-item-2" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="453">Check&#160;that&#160;right-aligned&#160;notes&#160;anchor&#160;correctly&#160;without&#160;drifting.</tspan></text><text id="list-num-3" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="481">4.</tspan></text><text id="list-item-3" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="481">Ensure&#160;code&#160;blocks&#160;preserve&#160;whitespace&#160;and&#160;monospace&#160;character&#160;width.</tspan></text><text id="list-num-4" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="509">5.</tspan></text><text id="list-item-4" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="509">Validate&#160;that&#160;pill&#160;components&#160;center&#160;their&#160;labels&#160;within&#160;fixed&#160;bounds.</tspan></text><path id="code-bg" d="M 80 562 L 920 562 Q 928 562 928 570 L 928 754 Q 928 762 920 762 L 80 762 Q 72 762 72 754 L 72 570 Q 72 562 80 562 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="code-text" xml:space="preserve" text-anchor="start" dominant-baseline="middle" font-family="JetBrains Mono, Fira Code, monospace" font-size="12" font-weight="400" fill="#e2e8f0"><tspan x="92" y="588">function&#160;validateLayout(elements)&#160;{</tspan><tspan x="92" y="606.6">&#160;&#160;const&#160;bounds&#160;=&#160;elements.map(el&#160;=&gt;&#160;getBounds(el));</tspan><tspan x="92" y="625.2">&#160;&#160;for&#160;(let&#160;i&#160;=&#160;0;&#160;i&#160;&lt;&#160;bounds.length;&#160;i++)&#160;{</tspan><tspan x="92" y="643.8">&#160;&#160;&#160;&#160;for&#160;(let&#160;j&#160;=&#160;i&#160;+&#160;1;&#160;j&#160;&lt;&#160;bounds.length;&#160;j++)&#160;{</tspan><tspan x="92" y="662.4">&#160;&#160;&#160;&#160;&#160;&#160;if&#160;(intersects(bounds[i],&#160;bounds[j]))&#160;{</tspan><tspan x="92" y="681">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return&#160;{&#160;valid:&#160;false,&#160;collision:&#160;[i,&#160;j]&#160;};</tspan><tspan x="92" y="699.6">&#160;&#160;&#160;&#160;&#160;&#160;}</tspan><tspan x="92" y="718.2">&#160;&#160;&#160;&#160;}</tspan><tspan x="92" y="736.8">&#160;&#160;}</tspan><tspan x="92" y="755.4">&#160;&#160;return&#160;{&#160;valid:&#160;true&#160;};</tspan><tspan x="92" y="774">}</tspan></text><text id="note-text" xml:space="preserve" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" letter-spacing="0" fill="#94a3b8"><tspan x="928" y="796">Note:&#160;All&#160;measurements&#160;are&#160;in&#160;logical&#160;pixels.</tspan><tspan x="928" y="814">Actual&#160;rendering&#160;may&#160;vary&#160;by&#160;display&#160;density.</tspan></text><path id="pill-bg-0" d="M 358 842 L 426 842 Q 440 842 440 856 L 440 856 Q 440 870 426 870 L 358 870 Q 344 870 344 856 L 344 856 Q 344 842 358 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-0" xml:space="preserve" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="392" y="856">Centered</tspan></text><path id="pill-bg-1" d="M 466 842 L 534 842 Q 548 842 548 856 L 548 856 Q 548 870 534 870 L 466 870 Q 452 870 452 856 L 452 856 Q 452 842 466 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-1" xml:space="preserve" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="500" y="856">Balanced</tspan></text><path id="pill-bg-2" d="M 574 842 L 642 842 Q 656 842 656 856 L 656 856 Q 656 870 642 870 L 574 870 Q 560 870 560 856 L 560 856 Q 560 842 574 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-2" xml:space="preserve" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="608" y="856">Verified</tspan></text></svg>

package/examples/typography-lineheight-0.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="920" viewBox="0 0 1000 920" role="img"><rect x="0" y="0" width="1000" height="920" fill="#ffffff"/><text id="headline" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="40" font-weight="700" letter-spacing="0" fill="#0f172a"><tspan x="500" y="76">Typography Stress Test</tspan></text><text id="subtitle" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#475569"><tspan x="500" y="120">Demonstrating multiple alignment modes, text styles, and layout patterns</tspan><tspan x="500" y="144.8">in a single cohesive document without visual overlap.</tspan></text><path id="divider-1" d="M 72 176 L 928 176" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="para-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="226">Overview</tspan></text><text id="para-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" letter-spacing="0" fill="#334155"><tspan x="72" y="255">This document tests the render kernel's ability to handle diverse typographic</tspan><tspan x="72" y="278.8">scenarios. Each section exercises a different combination of alignment, weight,</tspan><tspan x="72" y="302.6">size, and line height. The goal is to verify that spacing remains predictable</tspan><tspan x="72" y="326.4">and that no elements collide regardless of content length or style variation.</tspan></text><text id="list-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="368">Validation Checklist</tspan></text><text id="list-num-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="397">1.</tspan></text><text id="list-item-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="397">Confirm that centered text remains horizontally balanced at all font sizes.</tspan></text><text id="list-num-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="425">2.</tspan></text><text id="list-item-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="425">Verify left-aligned blocks maintain consistent left edge across line breaks.</tspan></text><text id="list-num-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="453">3.</tspan></text><text id="list-item-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="453">Check that right-aligned notes anchor correctly without drifting.</tspan></text><text id="list-num-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="481">4.</tspan></text><text id="list-item-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="481">Ensure code blocks preserve whitespace and monospace character width.</tspan></text><text id="list-num-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="509">5.</tspan></text><text id="list-item-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="509">Validate that pill components center their labels within fixed bounds.</tspan></text><path id="code-bg" d="M 80 562 L 920 562 Q 928 562 928 570 L 928 754 Q 928 762 920 762 L 80 762 Q 72 762 72 754 L 72 570 Q 72 562 80 562 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="code-text" text-anchor="start" dominant-baseline="middle" font-family="JetBrains Mono, Fira Code, monospace" font-size="12" font-weight="400" fill="#e2e8f0"><tspan x="92" y="588">function validateLayout(elements) {</tspan><tspan x="92" y="606.6">  const bounds = elements.map(el =&gt; getBounds(el));</tspan><tspan x="92" y="625.2">  for (let i = 0; i &lt; bounds.length; i++) {</tspan><tspan x="92" y="643.8">    for (let j = i + 1; j &lt; bounds.length; j++) {</tspan><tspan x="92" y="662.4">      if (intersects(bounds[i], bounds[j])) {</tspan><tspan x="92" y="681">        return { valid: false, collision: [i, j] };</tspan><tspan x="92" y="699.6">      }</tspan><tspan x="92" y="718.2">    }</tspan><tspan x="92" y="736.8">  }</tspan><tspan x="92" y="755.4">  return { valid: true };</tspan><tspan x="92" y="774">}</tspan></text><text id="note-text" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" letter-spacing="0" fill="#94a3b8"><tspan x="928" y="796">Note: All measurements are in logical pixels.</tspan><tspan x="928" y="814">Actual rendering may vary by display density.</tspan></text><path id="pill-bg-0" d="M 358 842 L 426 842 Q 440 842 440 856 L 440 856 Q 440 870 426 870 L 358 870 Q 344 870 344 856 L 344 856 Q 344 842 358 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="392" y="856">Centered</tspan></text><path id="pill-bg-1" d="M 466 842 L 534 842 Q 548 842 548 856 L 548 856 Q 548 870 534 870 L 466 870 Q 452 870 452 856 L 452 856 Q 452 842 466 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-1" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="500" y="856">Balanced</tspan></text><path id="pill-bg-2" d="M 574 842 L 642 842 Q 656 842 656 856 L 656 856 Q 656 870 642 870 L 574 870 Q 560 870 560 856 L 560 856 Q 560 842 574 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-2" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="608" y="856">Verified</tspan></text></svg>

package/examples/typography-lineheight-2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="920" viewBox="0 0 1000 920" role="img"><rect x="0" y="0" width="1000" height="920" fill="#ffffff"/><text id="headline" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="42.24316212409655" font-weight="336.3636363636364" letter-spacing="2.4392094689758634" fill="#0f172a"><tspan x="500" y="77.12158106204828">Typography Stress Test</tspan></text><text id="subtitle" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#475569"><tspan x="500" y="120">Demonstrating multiple alignment modes, text styles, and layout patterns</tspan><tspan x="500" y="150.39999999999995">in a single cohesive document without visual overlap.</tspan></text><path id="divider-1" d="M 72 176 L 928 176" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="para-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="226">Overview</tspan></text><text id="para-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" letter-spacing="0.5800790335891854" fill="#334155"><tspan x="72" y="255">This document tests the render kernel's ability to handle diverse typographic</tspan><tspan x="72" y="278.8">scenarios. Each section exercises a different combination of alignment, weight,</tspan><tspan x="72" y="302.6">size, and line height. The goal is to verify that spacing remains predictable</tspan><tspan x="72" y="326.4">and that no elements collide regardless of content length or style variation.</tspan></text><text id="list-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="368">Validation Checklist</tspan></text><text id="list-num-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="397">1.</tspan></text><text id="list-item-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="397">Confirm that centered text remains horizontally balanced at all font sizes.</tspan></text><text id="list-num-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="425">2.</tspan></text><text id="list-item-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="425">Verify left-aligned blocks maintain consistent left edge across line breaks.</tspan></text><text id="list-num-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="453">3.</tspan></text><text id="list-item-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="453">Check that right-aligned notes anchor correctly without drifting.</tspan></text><text id="list-num-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="481">4.</tspan></text><text id="list-item-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="481">Ensure code blocks preserve whitespace and monospace character width.</tspan></text><text id="list-num-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="509">5.</tspan></text><text id="list-item-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="509">Validate that pill components center their labels within fixed bounds.</tspan></text><path id="code-bg" d="M 80 562 L 920 562 Q 928 562 928 570 L 928 754 Q 928 762 920 762 L 80 762 Q 72 762 72 754 L 72 570 Q 72 562 80 562 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="code-text" text-anchor="start" dominant-baseline="middle" font-family="JetBrains Mono, Fira Code, monospace" font-size="12" font-weight="400" fill="#e2e8f0"><tspan x="92" y="588">function validateLayout(elements) {</tspan><tspan x="92" y="606.6">  const bounds = elements.map(el =&gt; getBounds(el));</tspan><tspan x="92" y="625.2">  for (let i = 0; i &lt; bounds.length; i++) {</tspan><tspan x="92" y="643.8">    for (let j = i + 1; j &lt; bounds.length; j++) {</tspan><tspan x="92" y="662.4">      if (intersects(bounds[i], bounds[j])) {</tspan><tspan x="92" y="681">        return { valid: false, collision: [i, j] };</tspan><tspan x="92" y="699.6">      }</tspan><tspan x="92" y="718.2">    }</tspan><tspan x="92" y="736.8">  }</tspan><tspan x="92" y="755.4">  return { valid: true };</tspan><tspan x="92" y="774">}</tspan></text><text id="note-text" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13.951250723887783" font-weight="400" letter-spacing="1.1707504343326705" fill="#94a3b8"><tspan x="928" y="796.9756253619439">Note: All measurements are in logical pixels.</tspan><tspan x="928" y="817.9025014477755">Actual rendering may vary by display density.</tspan></text><path id="pill-bg-0" d="M 358 842 L 426 842 Q 440 842 440 856 L 440 856 Q 440 870 426 870 L 358 870 Q 344 870 344 856 L 344 856 Q 344 842 358 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="665.2173913043479" fill="#475569"><tspan x="392" y="856">Centered</tspan></text><path id="pill-bg-1" d="M 466 842 L 534 842 Q 548 842 548 856 L 548 856 Q 548 870 534 870 L 466 870 Q 452 870 452 856 L 452 856 Q 452 842 466 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-1" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="696.5217391304348" fill="#475569"><tspan x="500" y="856">Balanced</tspan></text><path id="pill-bg-2" d="M 574 842 L 642 842 Q 656 842 656 856 L 656 856 Q 656 870 642 870 L 574 870 Q 560 870 560 856 L 560 856 Q 560 842 574 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-2" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="685.1851851851852" fill="#475569"><tspan x="608" y="856">Verified</tspan></text></svg>

package/examples/typography-test-check.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="920" viewBox="0 0 1000 920" role="img"><rect x="0" y="0" width="1000" height="920" fill="#ffffff"/><text id="headline" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="36.85701737924497" font-weight="390.9090909090909" letter-spacing="3.7857456551887574" fill="#0f172a"><tspan x="500" y="74.42850868962249">Typography Stress Test</tspan></text><text id="subtitle" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#475569"><tspan x="500" y="120">Demonstrating multiple alignment modes, text styles, and layout patterns</tspan><tspan x="500" y="145.13723240616773">in a single cohesive document without visual overlap.</tspan></text><path id="divider-1" d="M 72 176 L 928 176" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="para-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="226">Overview</tspan></text><text id="para-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" letter-spacing="0.5891224141459042" fill="#334155"><tspan x="72" y="255">This document tests the render kernel's ability to handle diverse typographic</tspan><tspan x="72" y="278.8">scenarios. Each section exercises a different combination of alignment, weight,</tspan><tspan x="72" y="302.6">size, and line height. The goal is to verify that spacing remains predictable</tspan><tspan x="72" y="326.4">and that no elements collide regardless of content length or style variation.</tspan></text><text id="list-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="368">Validation Checklist</tspan></text><text id="list-num-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="397">1.</tspan></text><text id="list-item-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="397">Confirm that centered text remains horizontally balanced at all font sizes.</tspan></text><text id="list-num-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="425">2.</tspan></text><text id="list-item-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="425">Verify left-aligned blocks maintain consistent left edge across line breaks.</tspan></text><text id="list-num-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="453">3.</tspan></text><text id="list-item-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="453">Check that right-aligned notes anchor correctly without drifting.</tspan></text><text id="list-num-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="481">4.</tspan></text><text id="list-item-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="481">Ensure code blocks preserve whitespace and monospace character width.</tspan></text><text id="list-num-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="509">5.</tspan></text><text id="list-item-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="509">Validate that pill components center their labels within fixed bounds.</tspan></text><path id="code-bg" d="M 80 562 L 920 562 Q 928 562 928 570 L 928 754 Q 928 762 920 762 L 80 762 Q 72 762 72 754 L 72 570 Q 72 562 80 562 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="code-text" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#e2e8f0"><tspan x="92" y="588">function validateLayout(elements) {</tspan><tspan x="92" y="606.6">  const bounds = elements.map(el =&gt; getBounds(el));</tspan><tspan x="92" y="625.2">  for (let i = 0; i &lt; bounds.length; i++) {</tspan><tspan x="92" y="643.8">    for (let j = i + 1; j &lt; bounds.length; j++) {</tspan><tspan x="92" y="662.4">      if (intersects(bounds[i], bounds[j])) {</tspan><tspan x="92" y="681">        return { valid: false, collision: [i, j] };</tspan><tspan x="92" y="699.6">      }</tspan><tspan x="92" y="718.2">    }</tspan><tspan x="92" y="736.8">  }</tspan><tspan x="92" y="755.4">  return { valid: true };</tspan><tspan x="92" y="774">}</tspan></text><text id="note-text" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13.88851814364226" font-weight="400" letter-spacing="1.1442590718211303" fill="#94a3b8"><tspan x="928" y="796.9442590718211">Note: All measurements are in logical pixels.</tspan><tspan x="928" y="817.7770362872844">Actual rendering may vary by display density.</tspan></text><path id="pill-bg-0" d="M 358 842 L 426 842 Q 440 842 440 856 L 440 856 Q 440 870 426 870 L 358 870 Q 344 870 344 856 L 344 856 Q 344 842 358 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="543.4782608695652" fill="#475569"><tspan x="392" y="856">Centered</tspan></text><path id="pill-bg-1" d="M 466 842 L 534 842 Q 548 842 548 856 L 548 856 Q 548 870 534 870 L 466 870 Q 452 870 452 856 L 452 856 Q 452 842 466 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-1" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="574.7826086956521" fill="#475569"><tspan x="500" y="856">Balanced</tspan></text><path id="pill-bg-2" d="M 574 842 L 642 842 Q 656 842 656 856 L 656 856 Q 656 870 642 870 L 574 870 Q 560 870 560 856 L 560 856 Q 560 842 574 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-2" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="606.0869565217391" fill="#475569"><tspan x="608" y="856">Verified</tspan></text></svg>

package/examples/typography-test.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="920" viewBox="0 0 1000 920" role="img"><rect x="0" y="0" width="1000" height="920" fill="#ffffff"/><text id="headline" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="40" font-weight="800" fill="#0f172a"><tspan x="500" y="76">Typography Stress Test</tspan></text><text id="subtitle" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="400" fill="#475569"><tspan x="500" y="120">Demonstrating multiple alignment modes, text styles, and layout patterns</tspan><tspan x="500" y="144.8">in a single cohesive document without visual overlap.</tspan></text><path id="divider-1" d="M 72 176 L 928 176" fill="none" stroke="#e2e8f0" stroke-width="1"/><text id="para-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="226">Overview</tspan></text><text id="para-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="72" y="255">This document tests the render kernel's ability to handle diverse typographic</tspan><tspan x="72" y="278.8">scenarios. Each section exercises a different combination of alignment, weight,</tspan><tspan x="72" y="302.6">size, and line height. The goal is to verify that spacing remains predictable</tspan><tspan x="72" y="326.4">and that no elements collide regardless of content length or style variation.</tspan></text><text id="list-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="20" font-weight="700" fill="#0f172a"><tspan x="72" y="368">Validation Checklist</tspan></text><text id="list-num-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="397">1.</tspan></text><text id="list-item-0" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="397">Confirm that centered text remains horizontally balanced at all font sizes.</tspan></text><text id="list-num-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="425">2.</tspan></text><text id="list-item-1" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="425">Verify left-aligned blocks maintain consistent left edge across line breaks.</tspan></text><text id="list-num-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="453">3.</tspan></text><text id="list-item-2" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="453">Check that right-aligned notes anchor correctly without drifting.</tspan></text><text id="list-num-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="481">4.</tspan></text><text id="list-item-3" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="481">Ensure code blocks preserve whitespace and monospace character width.</tspan></text><text id="list-num-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="600" fill="#2563eb"><tspan x="72" y="509">5.</tspan></text><text id="list-item-4" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#334155"><tspan x="96" y="509">Validate that pill components center their labels within fixed bounds.</tspan></text><path id="code-bg" d="M 80 562 L 920 562 Q 928 562 928 570 L 928 754 Q 928 762 920 762 L 80 762 Q 72 762 72 754 L 72 570 Q 72 562 80 562 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="code-text" text-anchor="start" dominant-baseline="middle" font-family="JetBrains Mono, Fira Code, monospace" font-size="12" font-weight="400" fill="#e2e8f0"><tspan x="92" y="588">function validateLayout(elements) {</tspan><tspan x="92" y="606.6">  const bounds = elements.map(el =&gt; getBounds(el));</tspan><tspan x="92" y="625.2">  for (let i = 0; i &lt; bounds.length; i++) {</tspan><tspan x="92" y="643.8">    for (let j = i + 1; j &lt; bounds.length; j++) {</tspan><tspan x="92" y="662.4">      if (intersects(bounds[i], bounds[j])) {</tspan><tspan x="92" y="681">        return { valid: false, collision: [i, j] };</tspan><tspan x="92" y="699.6">      }</tspan><tspan x="92" y="718.2">    }</tspan><tspan x="92" y="736.8">  }</tspan><tspan x="92" y="755.4">  return { valid: true };</tspan><tspan x="92" y="774">}</tspan></text><text id="note-text" text-anchor="end" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#94a3b8"><tspan x="928" y="796">Note: All measurements are in logical pixels.</tspan><tspan x="928" y="814">Actual rendering may vary by display density.</tspan></text><path id="pill-bg-0" d="M 358 842 L 426 842 Q 440 842 440 856 L 440 856 Q 440 870 426 870 L 358 870 Q 344 870 344 856 L 344 856 Q 344 842 358 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="392" y="856">Centered</tspan></text><path id="pill-bg-1" d="M 466 842 L 534 842 Q 548 842 548 856 L 548 856 Q 548 870 534 870 L 466 870 Q 452 870 452 856 L 452 856 Q 452 842 466 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-1" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="500" y="856">Balanced</tspan></text><path id="pill-bg-2" d="M 574 842 L 642 842 Q 656 842 656 856 L 656 856 Q 656 870 642 870 L 574 870 Q 560 870 560 856 L 560 856 Q 560 842 574 842 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1"/><text id="pill-text-2" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="500" fill="#475569"><tspan x="608" y="856">Verified</tspan></text></svg>