ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/showcase/pages/views.tsx

@@ -0,0 +1,223 @@
+// GENERATED by gallery/vela/tools/vela_evg.rgr — do not edit by hand.
+//
+// Each chart below is an unmodified Vega specification, compiled from a
+// Vega-Lite example, run through the Vela runtime and drawn with the EVG
+// vector layer: every gridline, bar, wedge and label is path data and text
+// this repository computed, in all three targets.
+//
+// Regenerate with:  npm run vela:showcase
+
+import { View, Label, Path } from "./evg_types";
+
+function render() {
+  return (
+    <View className="page">
+      <Label className="title">Näkymät</Label>
+      <View className="rule" />
+      <View className="row chartRow">
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="236px" height="155px">
+            <Label className="chartText0" position="absolute" left="134.425px" top="5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">g</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" d="M51.5,119.5 L46.5,119.5 M51.5,88.5 L46.5,88.5 M51.5,57.5 L46.5,57.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="114.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="25.25px" top="83.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="52.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" d="M51.5,119.5 L51.5,57.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="81.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Label className="chartText0" position="absolute" left="84.75px" top="36px" width="12.5px" textAlign="center" fontSize="10px">x</Label>
+            <Label className="chartText0" position="absolute" left="184.75px" top="36px" width="12.5px" textAlign="center" fontSize="10px">y</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" d="M56.5,120.5 L56.5,125.5 M65.5,120.5 L65.5,125.5 M73.5,120.5 L73.5,125.5 M82.5,120.5 L82.5,125.5 M91.5,120.5 L91.5,125.5 M99.5,120.5 L99.5,125.5 M108.5,120.5 L108.5,125.5 M117.5,120.5 L117.5,125.5 M125.5,120.5 L125.5,125.5" />
+            <Label className="chartLabel" position="absolute" left="49.271px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">A</Label>
+            <Label className="chartLabel" position="absolute" left="57.938px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">B</Label>
+            <Label className="chartLabel" position="absolute" left="66.604px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">C</Label>
+            <Label className="chartLabel" position="absolute" left="75.271px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">D</Label>
+            <Label className="chartLabel" position="absolute" left="83.938px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">E</Label>
+            <Label className="chartLabel" position="absolute" left="92.604px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">F</Label>
+            <Label className="chartLabel" position="absolute" left="101.271px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">G</Label>
+            <Label className="chartLabel" position="absolute" left="109.938px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">H</Label>
+            <Label className="chartLabel" position="absolute" left="118.604px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">I</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" d="M52.5,120.5 L130.5,120.5" />
+            <Label className="chartTitle" position="absolute" left="84.925px" top="139.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">a</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" d="M156.5,120.5 L156.5,125.5 M165.5,120.5 L165.5,125.5 M173.5,120.5 L173.5,125.5 M182.5,120.5 L182.5,125.5 M191.5,120.5 L191.5,125.5 M199.5,120.5 L199.5,125.5 M208.5,120.5 L208.5,125.5 M217.5,120.5 L217.5,125.5 M225.5,120.5 L225.5,125.5" />
+            <Label className="chartLabel" position="absolute" left="149.271px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">A</Label>
+            <Label className="chartLabel" position="absolute" left="157.938px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">B</Label>
+            <Label className="chartLabel" position="absolute" left="166.604px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">C</Label>
+            <Label className="chartLabel" position="absolute" left="175.271px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">D</Label>
+            <Label className="chartLabel" position="absolute" left="183.938px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">E</Label>
+            <Label className="chartLabel" position="absolute" left="192.604px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">F</Label>
+            <Label className="chartLabel" position="absolute" left="201.271px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">G</Label>
+            <Label className="chartLabel" position="absolute" left="209.938px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">H</Label>
+            <Label className="chartLabel" position="absolute" left="218.604px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">I</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" d="M152.5,120.5 L230.5,120.5" />
+            <Label className="chartTitle" position="absolute" left="184.925px" top="139.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">a</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" opacity="0.4" d="M52.5,57.5 L130.5,57.5 L130.5,119.5 L52.5,119.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" opacity="0.25" d="M52.5,119.5 L130.5,119.5 M52.5,88.5 L130.5,88.5 M52.5,57.5 L130.5,57.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" stroke="none" d="M52.4333,101.64 L60.2333,101.64 L60.2333,119 L52.4333,119 Z M69.7667,92.34 L77.5667,92.34 L77.5667,119 L69.7667,119 Z M87.1,68.78 L94.9,68.78 L94.9,119 L87.1,119 Z M104.4333,107.22 L112.2333,107.22 L112.2333,119 L104.4333,119 Z M121.7667,86.76 L129.5667,86.76 L129.5667,119 L121.7667,119 Z" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" opacity="0.4" d="M152.5,57.5 L230.5,57.5 L230.5,119.5 L152.5,119.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" fill="none" strokeWidth="1" opacity="0.25" d="M152.5,119.5 L230.5,119.5 M152.5,88.5 L230.5,88.5 M152.5,57.5 L230.5,57.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="236px" height="155px" viewBox="0 0 236 155" stroke="none" d="M161.1,84.9 L168.9,84.9 L168.9,119 L161.1,119 Z M178.4333,62.58 L186.2333,62.58 L186.2333,119 L178.4333,119 Z M195.7667,86.14 L203.5667,86.14 L203.5667,119 L195.7667,119 Z M213.1,65.06 L220.9,65.06 L220.9,119 L213.1,119 Z" />
+          </View>
+        </View>
+          <Label className="caption">Sarakefasetointi · 102 komentoa</Label>
+        </View>
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="187px" height="156px">
+            <Label className="chartText0" position="absolute" left="5.025px" top="58.4px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">g</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" d="M102.5,54.5 L97.5,54.5 M102.5,32.5 L97.5,32.5 M102.5,10.5 L97.5,10.5" />
+            <Label className="chartLabel" position="absolute" left="82.875px" top="49.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="76.25px" top="27.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="69.625px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" d="M102.5,54.5 L102.5,10.5" />
+            <Label className="chartTitle" position="absolute" left="54.325px" top="25.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Label className="chartText0" position="absolute" left="35.75px" top="26px" width="12.5px" textAlign="center" fontSize="10px" rotate="-90">x</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" d="M102.5,120.5 L97.5,120.5 M102.5,98.5 L97.5,98.5 M102.5,76.5 L97.5,76.5" />
+            <Label className="chartLabel" position="absolute" left="82.875px" top="115.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="76.25px" top="93.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="69.625px" top="71.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" d="M102.5,120.5 L102.5,76.5" />
+            <Label className="chartTitle" position="absolute" left="54.325px" top="91.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Label className="chartText0" position="absolute" left="35.75px" top="92px" width="12.5px" textAlign="center" fontSize="10px" rotate="-90">y</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" d="M107.5,121.5 L107.5,126.5 M116.5,121.5 L116.5,126.5 M124.5,121.5 L124.5,126.5 M133.5,121.5 L133.5,126.5 M142.5,121.5 L142.5,126.5 M150.5,121.5 L150.5,126.5 M159.5,121.5 L159.5,126.5 M168.5,121.5 L168.5,126.5 M176.5,121.5 L176.5,126.5" />
+            <Label className="chartLabel" position="absolute" left="100.271px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">A</Label>
+            <Label className="chartLabel" position="absolute" left="108.938px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">B</Label>
+            <Label className="chartLabel" position="absolute" left="117.604px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">C</Label>
+            <Label className="chartLabel" position="absolute" left="126.271px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">D</Label>
+            <Label className="chartLabel" position="absolute" left="134.938px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">E</Label>
+            <Label className="chartLabel" position="absolute" left="143.604px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">F</Label>
+            <Label className="chartLabel" position="absolute" left="152.271px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">G</Label>
+            <Label className="chartLabel" position="absolute" left="160.938px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">H</Label>
+            <Label className="chartLabel" position="absolute" left="169.604px" top="122.5px" width="14.125px" textAlign="center" fontSize="10px" rotate="270">I</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" d="M103.5,121.5 L181.5,121.5" />
+            <Label className="chartTitle" position="absolute" left="135.925px" top="140.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">a</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" opacity="0.4" d="M103.5,10.5 L181.5,10.5 L181.5,54.5 L103.5,54.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" opacity="0.25" d="M103.5,54.5 L181.5,54.5 M103.5,32.5 L181.5,32.5 M103.5,10.5 L181.5,10.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" stroke="none" d="M103.4333,41.68 L111.2333,41.68 L111.2333,54 L103.4333,54 Z M120.7667,35.08 L128.5667,35.08 L128.5667,54 L120.7667,54 Z M138.1,18.36 L145.9,18.36 L145.9,54 L138.1,54 Z M155.4333,45.64 L163.2333,45.64 L163.2333,54 L155.4333,54 Z M172.7667,31.12 L180.5667,31.12 L180.5667,54 L172.7667,54 Z" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" opacity="0.4" d="M103.5,76.5 L181.5,76.5 L181.5,120.5 L103.5,120.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" fill="none" strokeWidth="1" opacity="0.25" d="M103.5,120.5 L181.5,120.5 M103.5,98.5 L181.5,98.5 M103.5,76.5 L181.5,76.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="187px" height="156px" viewBox="0 0 187 156" stroke="none" d="M112.1,95.8 L119.9,95.8 L119.9,120 L112.1,120 Z M129.4333,79.96 L137.2333,79.96 L137.2333,120 L129.4333,120 Z M146.7667,96.68 L154.5667,96.68 L154.5667,120 L146.7667,120 Z M164.1,81.72 L171.9,81.72 L171.9,120 L164.1,120 Z" />
+          </View>
+        </View>
+          <Label className="caption">Rivifasetointi · 86 komentoa</Label>
+        </View>
+      </View>
+      <View className="row chartRow">
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="222px" height="263px">
+            <Label className="chartText0" position="absolute" left="127.425px" top="5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">a</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M51.5,79.5 L46.5,79.5 M51.5,47.5 L46.5,47.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="74.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="42.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M51.5,79.5 L51.5,47.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="56.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M51.5,153.5 L46.5,153.5 M51.5,121.5 L46.5,121.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="148.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="116.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M51.5,153.5 L51.5,121.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="130.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M51.5,227.5 L46.5,227.5 M51.5,195.5 L46.5,195.5" />
+            <Label className="chartLabel" position="absolute" left="31.875px" top="222.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="18.625px" top="190.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M51.5,227.5 L51.5,195.5" />
+            <Label className="chartTitle" position="absolute" left="3.325px" top="204.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M62.5,228.5 L62.5,233.5 M82.5,228.5 L82.5,233.5" />
+            <Label className="chartLabel" position="absolute" left="55.75px" top="229.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">x</Label>
+            <Label className="chartLabel" position="absolute" left="75.75px" top="229.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">y</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M52.5,228.5 L92.5,228.5" />
+            <Label className="chartTitle" position="absolute" left="65.925px" top="247.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">g</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M124.5,228.5 L124.5,233.5 M144.5,228.5 L144.5,233.5" />
+            <Label className="chartLabel" position="absolute" left="117.75px" top="229.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">x</Label>
+            <Label className="chartLabel" position="absolute" left="137.75px" top="229.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">y</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M114.5,228.5 L154.5,228.5" />
+            <Label className="chartTitle" position="absolute" left="127.925px" top="247.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">g</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M186.5,228.5 L186.5,233.5 M206.5,228.5 L206.5,233.5" />
+            <Label className="chartLabel" position="absolute" left="179.75px" top="229.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">x</Label>
+            <Label className="chartLabel" position="absolute" left="199.75px" top="229.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">y</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" d="M176.5,228.5 L216.5,228.5" />
+            <Label className="chartTitle" position="absolute" left="189.925px" top="247.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">g</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M52.5,47.5 L92.5,47.5 L92.5,79.5 L52.5,79.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M52.5,79.5 L92.5,79.5 M52.5,47.5 L92.5,47.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M53,70.04 L71,70.04 L71,79 L53,79 Z" />
+            <Label className="chartText0" position="absolute" left="64.938px" top="27px" width="14.125px" textAlign="center" fontSize="10px">A</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M114.5,47.5 L154.5,47.5 L154.5,79.5 L114.5,79.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M114.5,79.5 L154.5,79.5 M114.5,47.5 L154.5,47.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M135,61.4 L153,61.4 L153,79 L135,79 Z" />
+            <Label className="chartText0" position="absolute" left="126.938px" top="27px" width="14.125px" textAlign="center" fontSize="10px">B</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M176.5,47.5 L216.5,47.5 L216.5,79.5 L176.5,79.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M176.5,79.5 L216.5,79.5 M176.5,47.5 L216.5,47.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M177,65.24 L195,65.24 L195,79 L177,79 Z" />
+            <Label className="chartText0" position="absolute" left="188.938px" top="27px" width="14.125px" textAlign="center" fontSize="10px">C</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M52.5,121.5 L92.5,121.5 L92.5,153.5 L52.5,153.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M52.5,153.5 L92.5,153.5 M52.5,121.5 L92.5,121.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M73,123.88 L91,123.88 L91,153 L73,153 Z" />
+            <Label className="chartText0" position="absolute" left="64.938px" top="101px" width="14.125px" textAlign="center" fontSize="10px">D</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M114.5,121.5 L154.5,121.5 L154.5,153.5 L114.5,153.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M114.5,153.5 L154.5,153.5 M114.5,121.5 L154.5,121.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M115,127.08 L133,127.08 L133,153 L115,153 Z" />
+            <Label className="chartText0" position="absolute" left="126.938px" top="101px" width="14.125px" textAlign="center" fontSize="10px">E</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M176.5,121.5 L216.5,121.5 L216.5,153.5 L176.5,153.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M176.5,153.5 L216.5,153.5 M176.5,121.5 L216.5,121.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M197,136.04 L215,136.04 L215,153 L197,153 Z" />
+            <Label className="chartText0" position="absolute" left="188.938px" top="101px" width="14.125px" textAlign="center" fontSize="10px">F</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M52.5,195.5 L92.5,195.5 L92.5,227.5 L52.5,227.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M52.5,227.5 L92.5,227.5 M52.5,195.5 L92.5,195.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M53,220.92 L71,220.92 L71,227 L53,227 Z" />
+            <Label className="chartText0" position="absolute" left="64.938px" top="175px" width="14.125px" textAlign="center" fontSize="10px">G</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M114.5,195.5 L154.5,195.5 L154.5,227.5 L114.5,227.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M114.5,227.5 L154.5,227.5 M114.5,195.5 L154.5,195.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M135,199.16 L153,199.16 L153,227 L135,227 Z" />
+            <Label className="chartText0" position="absolute" left="126.938px" top="175px" width="14.125px" textAlign="center" fontSize="10px">H</Label>
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.4" d="M176.5,195.5 L216.5,195.5 L216.5,227.5 L176.5,227.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" fill="none" strokeWidth="1" opacity="0.25" d="M176.5,227.5 L216.5,227.5 M176.5,195.5 L216.5,195.5" />
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="222px" height="263px" viewBox="0 0 222 263" stroke="none" d="M177,210.36 L195,210.36 L195,227 L177,227 Z" />
+            <Label className="chartText0" position="absolute" left="188.938px" top="175px" width="14.125px" textAlign="center" fontSize="10px">I</Label>
+          </View>
+        </View>
+          <Label className="caption">Kääritty ruudukko · 166 komentoa</Label>
+        </View>
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="257px" height="111px">
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" opacity="0.4" d="M52.5,11.5 L92.5,11.5 L92.5,73.5 L52.5,73.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" opacity="0.25" d="M52.5,73.5 L92.5,73.5 M52.5,32.5 L92.5,32.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M62.5,73.5 L62.5,78.5 M82.5,73.5 L82.5,78.5" />
+            <Label className="chartLabel" position="absolute" left="55.75px" top="74.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">x</Label>
+            <Label className="chartLabel" position="absolute" left="75.75px" top="74.5px" width="12.5px" textAlign="center" fontSize="10px" rotate="270">y</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M52.5,73.5 L92.5,73.5" />
+            <Label className="chartTitle" position="absolute" left="65.925px" top="92.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">g</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M52.5,73.5 L47.5,73.5 M52.5,32.5 L47.5,32.5" />
+            <Label className="chartLabel" position="absolute" left="32.875px" top="68.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="19.625px" top="27.167px" width="25.875px" textAlign="right" fontSize="10px">200</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M52.5,73.5 L52.5,11.5" />
+            <Label className="chartTitle" position="absolute" left="4.325px" top="35.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartFill1" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" stroke="none" d="M53,67.2133 L71,67.2133 L71,73 L53,73 Z M73,61.6333 L91,61.6333 L91,73 L73,73 Z M53,58.3267 L71,58.3267 L71,67.2133 L53,67.2133 Z M73,42.8267 L91,42.8267 L91,61.6333 L73,61.6333 Z M53,41.5867 L71,41.5867 L71,58.3267 L53,58.3267 Z M73,31.8733 L91,31.8733 L91,42.8267 L73,42.8267 Z M53,37.66 L71,37.66 L71,41.5867 L53,41.5867 Z M73,13.8933 L91,13.8933 L91,31.8733 L73,31.8733 Z M53,26.9133 L71,26.9133 L71,37.66 L53,37.66 Z" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" opacity="0.4" d="M160.5,11.5 L244.5,11.5 L244.5,73.5 L160.5,73.5 Z" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" opacity="0.25" d="M160.5,11.5 L160.5,73.5 M179.5,11.5 L179.5,73.5 M197.5,11.5 L197.5,73.5 M216.5,11.5 L216.5,73.5 M235.5,11.5 L235.5,73.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" opacity="0.25" d="M160.5,73.5 L244.5,73.5 M160.5,42.5 L244.5,42.5 M160.5,11.5 L244.5,11.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M160.5,73.5 L160.5,78.5 M179.5,73.5 L179.5,78.5 M197.5,73.5 L197.5,78.5 M216.5,73.5 L216.5,78.5 M235.5,73.5 L235.5,78.5" />
+            <Label className="chartLabel" position="absolute" left="160.5px" top="80.5px" width="12.625px" textAlign="left" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="172.854px" top="80.5px" width="12.625px" textAlign="center" fontSize="10px">2</Label>
+            <Label className="chartLabel" position="absolute" left="191.521px" top="80.5px" width="12.625px" textAlign="center" fontSize="10px">4</Label>
+            <Label className="chartLabel" position="absolute" left="210.188px" top="80.5px" width="12.625px" textAlign="center" fontSize="10px">6</Label>
+            <Label className="chartLabel" position="absolute" left="228.854px" top="80.5px" width="12.625px" textAlign="center" fontSize="10px">8</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M160.5,73.5 L244.5,73.5" />
+            <Label className="chartTitle" position="absolute" left="195.925px" top="94.5px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold">c</Label>
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M160.5,73.5 L155.5,73.5 M160.5,42.5 L155.5,42.5 M160.5,11.5 L155.5,11.5" />
+            <Label className="chartLabel" position="absolute" left="140.875px" top="68.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="134.25px" top="37.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="127.625px" top="6.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="1" d="M160.5,73.5 L160.5,11.5" />
+            <Label className="chartTitle" position="absolute" left="112.325px" top="35.9px" width="13.15px" textAlign="center" fontSize="11px" fontWeight="bold" rotate="-90">b</Label>
+            <Path className="chartStroke1" position="absolute" left="0px" top="0px" width="257px" height="111px" viewBox="0 0 257 111" fill="none" strokeWidth="2" opacity="0.7" d="M209.4053,55.64 C209.4053,57.1525 208.1792,58.3786 206.6667,58.3786 C205.1542,58.3786 203.9281,57.1525 203.9281,55.64 C203.9281,54.1275 205.1542,52.9014 206.6667,52.9014 C208.1792,52.9014 209.4053,54.1275 209.4053,55.64 Z M246.7386,38.9 C246.7386,40.4125 245.5125,41.6386 244,41.6386 C242.4875,41.6386 241.2614,40.4125 241.2614,38.9 C241.2614,37.3875 242.4875,36.1614 244,36.1614 C245.5125,36.1614 246.7386,37.3875 246.7386,38.9 Z M181.4053,46.34 C181.4053,47.8525 180.1792,49.0786 178.6667,49.0786 C177.1542,49.0786 175.9281,47.8525 175.9281,46.34 C175.9281,44.8275 177.1542,43.6014 178.6667,43.6014 C180.1792,43.6014 181.4053,44.8275 181.4053,46.34 Z M228.0719,16.58 C228.0719,18.0925 226.8458,19.3186 225.3333,19.3186 C223.8208,19.3186 222.5947,18.0925 222.5947,16.58 C222.5947,15.0675 223.8208,13.8414 225.3333,13.8414 C226.8458,13.8414 228.0719,15.0675 228.0719,16.58 Z M200.0719,22.78 C200.0719,24.2925 198.8458,25.5186 197.3333,25.5186 C195.8208,25.5186 194.5947,24.2925 194.5947,22.78 C194.5947,21.2675 195.8208,20.0414 197.3333,20.0414 C198.8458,20.0414 200.0719,21.2675 200.0719,22.78 Z M218.7386,40.14 C218.7386,41.6525 217.5125,42.8786 216,42.8786 C214.4875,42.8786 213.2614,41.6525 213.2614,40.14 C213.2614,38.6275 214.4875,37.4014 216,37.4014 C217.5125,37.4014 218.7386,38.6275 218.7386,40.14 Z M237.4053,61.22 C237.4053,62.7325 236.1792,63.9586 234.6667,63.9586 C233.1542,63.9586 231.9281,62.7325 231.9281,61.22 C231.9281,59.7075 233.1542,58.4814 234.6667,58.4814 C236.1792,58.4814 237.4053,59.7075 237.4053,61.22 Z M172.0719,19.06 C172.0719,20.5725 170.8458,21.7986 169.3333,21.7986 C167.8208,21.7986 166.5947,20.5725 166.5947,19.06 C166.5947,17.5475 167.8208,16.3214 169.3333,16.3214 C170.8458,16.3214 172.0719,17.5475 172.0719,19.06 Z M190.7386,40.76 C190.7386,42.2725 189.5125,43.4986 188,43.4986 C186.4875,43.4986 185.2614,42.2725 185.2614,40.76 C185.2614,39.2475 186.4875,38.0214 188,38.0214 C189.5125,38.0214 190.7386,39.2475 190.7386,40.76 Z" />
+          </View>
+        </View>
+          <Label className="caption">Konkatenaatio · 82 komentoa</Label>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default render;

package/dist/lib/evg/showcase/tests/chart_api_smoke.mjs

@@ -0,0 +1,339 @@
+/**
+ * chart_api_smoke.mjs — does the chart API actually RUN in a browser?
+ *
+ *   npm run showcase && npm run showcase:api
+ *
+ * The rest of this gallery is rendered ahead of time: a PDF and a PNG prove
+ * that the API built a chart once, on a build machine, in Node. They do not
+ * prove that the compiled API runs where a reader is. This does — it opens
+ * `dist/chart-api/` in a real browser and checks, through the page rather than
+ * around it:
+ *
+ *   1. the default script — JavaScript — draws an SVG with real geometry,
+ *   2. every preset draws a DIFFERENT chart, and the status line reports the
+ *      calls that were dispatched and the commands the runtime produced,
+ *   3. the SAME chart written in Ranger draws the SAME SVG, byte for byte,
+ *      which is the claim the two-language page makes,
+ *   4. a method the API does not have is refused BY NAME in both languages,
+ *   5. editing the DATA redraws the chart — which is what tells a live page
+ *      from a picture of one,
+ *   6. the Vega-Lite the calls built is on the page beside the drawing,
+ *   7. and nothing threw: a page error or a console error fails the run.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import http from "node:http";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(HERE, "../../../..");
+const DIST = path.resolve(process.argv[2] || path.join(HERE, "..", "dist"));
+const LIVE = path.join(DIST, "chart-api");
+
+function loadPlaywright() {
+  const anchors = [
+    "/opt/node22/lib/node_modules/x",
+    path.join(ROOT, "package.json"),
+    path.join(process.cwd(), "package.json"),
+    import.meta.url,
+  ];
+  for (const anchor of anchors) {
+    for (const name of ["playwright", "playwright-core"]) {
+      try {
+        return createRequire(anchor)(name);
+      } catch { /* try the next anchor */ }
+    }
+  }
+  return null;
+}
+
+function findChrome() {
+  const fixed = [process.env.CHROME_PATH, "/usr/bin/chromium", "/usr/bin/google-chrome",
+                 "/usr/local/bin/google-chrome"].filter(Boolean);
+  for (const c of fixed) if (fs.existsSync(c)) return c;
+  const pwBrowsers = "/opt/pw-browsers";
+  if (fs.existsSync(pwBrowsers)) {
+    for (const dir of fs.readdirSync(pwBrowsers)) {
+      for (const rel of ["chrome-linux/chrome", "chrome"]) {
+        const c = path.join(pwBrowsers, dir, rel);
+        if (fs.existsSync(c)) return c;
+      }
+    }
+  }
+  return null;
+}
+
+const pw = loadPlaywright();
+if (!pw) {
+  console.log("Playwright is not available — the live page was not checked.");
+  process.exit(0);
+}
+if (!fs.existsSync(path.join(LIVE, "index.html"))) {
+  console.error(`no live page in ${path.relative(ROOT, LIVE)} — run: npm run showcase`);
+  process.exit(1);
+}
+
+const TYPES = { ".html": "text/html", ".js": "text/javascript", ".json": "application/json" };
+const server = http.createServer((req, res) => {
+  let file = path.join(DIST, decodeURIComponent(req.url.split("?")[0]));
+  if (fs.existsSync(file) && fs.statSync(file).isDirectory()) file = path.join(file, "index.html");
+  if (!file.startsWith(DIST) || !fs.existsSync(file)) {
+    res.writeHead(404);
+    res.end();
+    return;
+  }
+  res.writeHead(200, { "content-type": TYPES[path.extname(file)] || "application/octet-stream" });
+  fs.createReadStream(file).pipe(res);
+});
+await new Promise((r) => server.listen(0, "127.0.0.1", r));
+const port = server.address().port;
+
+const browser = await pw.chromium.launch({
+  executablePath: findChrome() || undefined,
+});
+const page = await browser.newPage({ viewport: { width: 1200, height: 900 } });
+const problems = [];
+page.on("pageerror", (e) => problems.push(`page error: ${e}`));
+page.on("console", (m) => {
+  if (m.type() !== "error") return;
+  const where = (m.location() && m.location().url) || "";
+  if (/\/favicon\.ico$/.test(where)) return;
+  problems.push(`console: ${m.text()}`);
+});
+
+const checks = [];
+function check(name, ok, detail = "") {
+  checks.push({ name, ok, detail });
+  console.log(`${ok ? "  ok  " : " FAIL "} ${name}${detail ? "  " + detail : ""}`);
+}
+
+await page.goto(`http://127.0.0.1:${port}/chart-api/`, { waitUntil: "load" });
+await page.waitForFunction(() => document.querySelector("#chart svg") !== null, null, { timeout: 15000 });
+
+const startsIn = await page.evaluate(() =>
+  document.querySelector('[data-lang="js"]').getAttribute("aria-pressed"));
+check("the page opens in JavaScript", startsIn === "true", `aria-pressed=${startsIn}`);
+
+const first = await page.evaluate(() => ({
+  paths: document.querySelectorAll("#chart svg path").length,
+  texts: document.querySelectorAll("#chart svg text").length,
+  status: document.getElementById("status").textContent,
+  svg: document.getElementById("chart").innerHTML.length,
+}));
+check("the default script draws", first.paths >= 2 && first.texts >= 3,
+  `${first.paths} paths, ${first.texts} labels`);
+check("and says what it did", /\d+ kutsua/.test(first.status) && /piirtokomentoa/.test(first.status),
+  first.status.trim());
+
+// A drawn chart is also a document of sentences. `tools/reference/aria.mjs`
+// holds those against official Vega; this holds them against the BUNDLE, which
+// is the half that can silently go missing — a stale build ships a picture
+// that says nothing and every check above still passes.
+const spoken = await page.evaluate(() => {
+  const labelled = [...document.querySelectorAll("#chart svg [aria-label]")];
+  return {
+    guides: labelled.filter((e) => /axis|legend|title/.test(e.getAttribute("aria-roledescription") || ""))
+      .map((e) => e.getAttribute("aria-label")),
+    marks: labelled.length,
+    hidden: document.querySelectorAll("#chart svg [aria-hidden=\"true\"]").length,
+    roles: new Set(labelled.map((e) => e.getAttribute("role"))).size,
+  };
+});
+check("the drawing says something to a screen reader",
+  spoken.guides.some((t) => /-axis titled/.test(t)) && spoken.marks > spoken.guides.length,
+  `${spoken.guides.length} guides, ${spoken.marks} labelled elements, ${spoken.hidden} hidden`);
+check("and every labelled element claims a role", spoken.roles === 1,
+  spoken.guides[0] || "no guide sentence");
+
+// Every preset is a different chart, drawn by the same compiled API.
+const presets = await page.$$eval("[data-preset]", (els) => els.map((e) => e.dataset.preset));
+const shapes = new Map();
+for (const preset of presets) {
+  await page.click(`[data-preset="${preset}"]`);
+  await page.waitForTimeout(120);
+  const drawn = await page.evaluate(() => ({
+    svg: document.querySelector("#chart svg")?.outerHTML || "",
+    status: document.getElementById("status").textContent,
+    bad: document.getElementById("status").className === "bad",
+  }));
+  check(`preset ${preset} draws`, drawn.svg.length > 500 && !drawn.bad, drawn.status.trim());
+  shapes.set(preset, drawn.svg);
+}
+check("the presets are not the same picture", new Set(shapes.values()).size === presets.length,
+  `${new Set(shapes.values()).size} of ${presets.length} distinct`);
+
+// The same charts in Ranger: the other language, the same engine, and the
+// claim the page makes is that they draw the same picture.
+await page.click('[data-lang="rgr"]');
+await page.waitForTimeout(200);
+let identical = 0;
+for (const name of presets) {
+  await page.click(`[data-preset="${name}"]`);
+  await page.waitForTimeout(150);
+  const drawn = await page.evaluate(() => ({
+    svg: document.querySelector("#chart svg")?.outerHTML || "",
+    bad: document.getElementById("status").className === "bad",
+    code: document.getElementById("code").value,
+  }));
+  const same = drawn.svg === shapes.get(name);
+  if (same) identical += 1;
+  if (!same || drawn.bad) {
+    check(`preset ${name} in Ranger draws what JavaScript drew`, false,
+      drawn.bad ? drawn.code.split("\n")[0] : "different picture");
+  }
+}
+check("every preset draws the same picture in both languages", identical === presets.length,
+  `${identical} of ${presets.length}`);
+check("and the Ranger source is not the JavaScript",
+  !(await page.evaluate(() => document.getElementById("code").value)).includes(";"),
+  "no semicolons in the Ranger form");
+
+// A method the API does not have is refused by name — in Ranger by the
+// interpreter, in JavaScript by JavaScript itself.
+await page.fill("#code", 'chart.size(200 150)\nchart.colour("region")');
+await page.waitForTimeout(300);
+const refused = await page.evaluate(() => ({
+  bad: document.getElementById("status").className === "bad",
+  text: document.getElementById("status").textContent,
+}));
+check("an unknown method is refused by name (Ranger)", refused.bad && /no method 'colour'/.test(refused.text),
+  refused.text.trim());
+
+await page.click('[data-lang="js"]');
+await page.waitForTimeout(150);
+await page.fill("#code", 'chart.size(200, 150);\nchart.colour("region");');
+await page.waitForTimeout(300);
+const refusedJs = await page.evaluate(() => ({
+  bad: document.getElementById("status").className === "bad",
+  text: document.getElementById("status").textContent,
+}));
+check("and in JavaScript", refusedJs.bad && /colour is not a function/.test(refusedJs.text),
+  refusedJs.text.trim());
+
+// A column the data does not have is refused too — the API's own check,
+// running in the browser.
+await page.fill("#code", 'chart.size(200, 150);\nchart.bar().x("region").y("profit");');
+await page.waitForTimeout(300);
+const unknownColumn = await page.evaluate(() => document.getElementById("status").textContent);
+check("an unknown column is refused", /no column called 'profit'/.test(unknownColumn), unknownColumn.trim());
+
+// Editing the DATA redraws: this is the difference between a live page and a
+// picture of one.
+await page.fill("#code", 'chart.size(300, 180);\nchart.bar().x("region").keepOrder().y("sales").aggregate("sum");');
+await page.waitForTimeout(300);
+const before = await page.evaluate(() => document.querySelector("#chart svg").outerHTML);
+await page.fill("#data", JSON.stringify([
+  { region: "Yksi", sales: 10 },
+  { region: "Kaksi", sales: 90 },
+  { region: "Kolme", sales: 50 },
+]));
+await page.waitForTimeout(300);
+const after = await page.evaluate(() => ({
+  svg: document.querySelector("#chart svg").outerHTML,
+  cols: document.getElementById("cols").textContent,
+  status: document.getElementById("status").textContent,
+}));
+check("editing the data redraws the chart", after.svg !== before && after.svg.includes("Kaksi"),
+  after.status.trim());
+check("and the inferred column types are shown", /region → nominal/.test(after.cols) && /sales → quantitative/.test(after.cols),
+  after.cols.trim());
+
+// The specification the calls built is on the page.
+await page.click('[data-view="spec"]');
+await page.waitForTimeout(120);
+const spec = await page.evaluate(() => document.getElementById("spec").textContent);
+check("the Vega-Lite the calls built is shown", spec.includes("\"mark\"") && spec.includes("\"encoding\""),
+  `${spec.split("\n").length} lines`);
+await page.click('[data-view="vega"]');
+await page.waitForTimeout(120);
+const vega = await page.evaluate(() => document.getElementById("vega").textContent);
+check("and the Vega it compiles to", vega.includes("\"scales\"") && vega.includes("\"marks\""),
+  `${vega.split("\n").length} lines`);
+
+// Docs pages iframe this page with ?embed=1&view=chart. The full playground
+// still draws on load (checked above). The embed hides the chrome, autoruns
+// a preset, and a parent can post a snippet that is not one of the presets.
+const embedPage = await browser.newPage({ viewport: { width: 800, height: 520 } });
+embedPage.on("pageerror", (e) => problems.push(`embed: ${e}`));
+await embedPage.goto(`http://127.0.0.1:${port}/chart-api/?embed=1&view=chart&preset=bar`,
+  { waitUntil: "load" });
+await embedPage.waitForFunction(() => window.__chartApiReady === true, null, { timeout: 15000 });
+await embedPage.waitForFunction(() => document.querySelector("#chart svg") !== null, null, { timeout: 15000 });
+const embed = await embedPage.evaluate(() => ({
+  mode: !!window.__embedMode,
+  header: getComputedStyle(document.querySelector("header")).display,
+  editor: getComputedStyle(document.querySelector("main > div:first-child")).display,
+  paths: document.querySelectorAll("#chart svg path").length,
+}));
+check("embed mode is on", embed.mode);
+check("embed hides the playground chrome", embed.header === "none" && embed.editor === "none");
+check("embed autoruns the requested preset", embed.paths >= 2, `${embed.paths} paths`);
+check("embed hides the chart chrome",
+  await embedPage.evaluate(() => getComputedStyle(document.querySelector(".head")).display) === "none");
+await embedPage.close();
+
+const waitPage = await browser.newPage({ viewport: { width: 800, height: 520 } });
+waitPage.on("pageerror", (e) => problems.push(`wait: ${e}`));
+await waitPage.goto(`http://127.0.0.1:${port}/chart-api/?embed=1&view=chart&run=0`,
+  { waitUntil: "load" });
+await waitPage.waitForFunction(() => window.__chartApiReady === true, null, { timeout: 15000 });
+const waiting = await waitPage.evaluate(() => ({
+  svg: document.querySelector("#chart svg") !== null,
+  status: document.getElementById("status").textContent,
+}));
+check("embed with run=0 waits for a parent", !waiting.svg && /waiting/.test(waiting.status),
+  waiting.status.trim());
+await waitPage.close();
+
+const postedCode = `chart.size(280, 160);
+chart.heading("Posted from parent");
+const bars = chart.bar();
+bars.x("region").keepOrder();
+bars.y("sales").aggregate("sum");`;
+fs.writeFileSync(path.join(LIVE, "embed-host.html"), `<!doctype html>
+<html><body style="margin:0">
+<iframe id="f" src="./index.html?embed=1&view=chart&run=0"
+        style="width:100%;height:480px;border:0"></iframe>
+<script>
+  const f = document.getElementById("f");
+  const code = ${JSON.stringify(postedCode)};
+  const send = () => {
+    try {
+      if (f.contentWindow && f.contentWindow.__chartApiReady) {
+        f.contentWindow.postMessage({ type: "vela-embed", view: "chart", lang: "js", code: code }, "*");
+        return true;
+      }
+    } catch (e) {}
+    return false;
+  };
+  const t = setInterval(() => { if (send()) clearInterval(t); }, 50);
+  f.addEventListener("load", () => { if (send()) clearInterval(t); });
+</script>
+</body></html>`);
+const host = await browser.newPage({ viewport: { width: 800, height: 520 } });
+host.on("pageerror", (e) => problems.push(`host: ${e}`));
+await host.goto(`http://127.0.0.1:${port}/chart-api/embed-host.html`, { waitUntil: "load" });
+await host.waitForFunction(() => {
+  const f = document.getElementById("f");
+  const doc = f && f.contentDocument;
+  return doc && doc.querySelector("#chart svg");
+}, null, { timeout: 20000 });
+const posted = await host.evaluate(() => {
+  const doc = document.getElementById("f").contentDocument;
+  const status = doc.getElementById("status").textContent;
+  const svg = doc.getElementById("chart").innerHTML;
+  return { status, drew: /<svg/.test(svg), heading: /Posted from parent/.test(svg) };
+});
+check("a parent can post a snippet into the embed", posted.drew && /kutsua/.test(posted.status));
+check("and the posted heading is in the drawing", posted.heading);
+await host.close();
+
+check("nothing threw", problems.length === 0, problems.slice(0, 3).join(" | "));
+
+await browser.close();
+server.close();
+
+const failed = checks.filter((c) => !c.ok).length;
+console.log(`\n${checks.length - failed}/${checks.length} checks passed in a real browser`);
+process.exit(failed === 0 ? 0 : 1);