ranger-compiler 3.5.1 → 3.5.2

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

@@ -0,0 +1,160 @@
+// 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">Piirto</Label>
+      <View className="rule" />
+      <View className="row chartRow">
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="343.5px" height="147px">
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="343.5px" height="147px" viewBox="0 0 343.5 147" fill="none" strokeWidth="1" d="M46.5,59.5 L46.5,64.5 M71.5,59.5 L71.5,64.5 M96.5,59.5 L96.5,64.5 M121.5,59.5 L121.5,64.5 M146.5,59.5 L146.5,64.5 M171.5,59.5 L171.5,64.5 M196.5,59.5 L196.5,64.5 M221.5,59.5 L221.5,64.5 M246.5,59.5 L246.5,64.5 M271.5,59.5 L271.5,64.5 M296.5,59.5 L296.5,64.5 M321.5,59.5 L321.5,64.5" />
+            <Label className="chartLabel" position="absolute" left="23.5px" top="60.5px" width="45px" textAlign="center" fontSize="10px" rotate="-40">circle</Label>
+            <Label className="chartLabel" position="absolute" left="48.5px" top="60.5px" width="45px" textAlign="center" fontSize="10px" rotate="-40">square</Label>
+            <Label className="chartLabel" position="absolute" left="76.75px" top="60.5px" width="38.5px" textAlign="center" fontSize="10px" rotate="-40">cross</Label>
+            <Label className="chartLabel" position="absolute" left="95.25px" top="60.5px" width="51.5px" textAlign="center" fontSize="10px" rotate="-40">diamond</Label>
+            <Label className="chartLabel" position="absolute" left="108.625px" top="60.5px" width="74.75px" textAlign="center" fontSize="10px" rotate="-40">triangle-up</Label>
+            <Label className="chartLabel" position="absolute" left="127.125px" top="60.5px" width="87.75px" textAlign="center" fontSize="10px" rotate="-40">triangle-down</Label>
+            <Label className="chartLabel" position="absolute" left="148.875px" top="60.5px" width="94.25px" textAlign="center" fontSize="10px" rotate="-40">triangle-right</Label>
+            <Label className="chartLabel" position="absolute" left="177.125px" top="60.5px" width="87.75px" textAlign="center" fontSize="10px" rotate="-40">triangle-left</Label>
+            <Label className="chartLabel" position="absolute" left="217px" top="60.5px" width="58px" textAlign="center" fontSize="10px" rotate="-40">triangle</Label>
+            <Label className="chartLabel" position="absolute" left="251.75px" top="60.5px" width="38.5px" textAlign="center" fontSize="10px" rotate="-40">wedge</Label>
+            <Label className="chartLabel" position="absolute" left="276.75px" top="60.5px" width="38.5px" textAlign="center" fontSize="10px" rotate="-40">arrow</Label>
+            <Label className="chartLabel" position="absolute" left="298.5px" top="60.5px" width="45px" textAlign="center" fontSize="10px" rotate="-40">stroke</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="343.5px" height="147px" viewBox="0 0 343.5 147" fill="none" strokeWidth="1" d="M33.5,59.5 L333.5,59.5" />
+            <Path className="chartFill0 chartStroke1" position="absolute" left="0px" top="0px" width="343.5px" height="147px" viewBox="0 0 343.5 147" stroke="none" opacity="0.55" d="M52.5711,32 C52.5711,35.9052 49.4052,39.0711 45.5,39.0711 C41.5948,39.0711 38.4289,35.9052 38.4289,32 C38.4289,28.0948 41.5948,24.9289 45.5,24.9289 C49.4052,24.9289 52.5711,28.0948 52.5711,32 Z M63.4289,24.9289 L77.5711,24.9289 L77.5711,39.0711 L63.4289,39.0711 Z M88.4289,29.1716 L88.4289,34.8284 L92.6716,34.8284 L92.6716,39.0711 L98.3284,39.0711 L98.3284,34.8284 L102.5711,34.8284 L102.5711,29.1716 L98.3284,29.1716 L98.3284,24.9289 L92.6716,24.9289 L92.6716,29.1716 Z M113.4289,32 L120.5,24.9289 L127.5711,32 L120.5,39.0711 Z M145.5,25.8763 L138.4289,38.1237 L152.5711,38.1237 Z M170.5,38.1237 L163.4289,25.8763 L177.5711,25.8763 Z M201.6237,32 L189.3763,24.9289 L189.3763,39.0711 Z M214.3763,32 L226.6237,24.9289 L226.6237,39.0711 Z M245.5,23.835 L238.4289,36.0825 L252.5711,36.0825 Z M270.5,23.835 L268.7322,36.0825 L272.2678,36.0825 Z M294.4898,39.0711 L296.5102,39.0711 L296.5102,31.1161 L298.3284,31.1161 L295.5,24.9289 L292.6716,31.1161 L294.4898,31.1161 Z M313.4289,32 L327.5711,32" />
+            <Path className="chartFill0 chartStroke1" position="absolute" left="0px" top="0px" width="343.5px" height="147px" viewBox="0 0 343.5 147" fill="none" strokeWidth="1.5" opacity="0.9" d="M52.5711,32 C52.5711,35.9052 49.4052,39.0711 45.5,39.0711 C41.5948,39.0711 38.4289,35.9052 38.4289,32 C38.4289,28.0948 41.5948,24.9289 45.5,24.9289 C49.4052,24.9289 52.5711,28.0948 52.5711,32 Z M63.4289,24.9289 L77.5711,24.9289 L77.5711,39.0711 L63.4289,39.0711 Z M88.4289,29.1716 L88.4289,34.8284 L92.6716,34.8284 L92.6716,39.0711 L98.3284,39.0711 L98.3284,34.8284 L102.5711,34.8284 L102.5711,29.1716 L98.3284,29.1716 L98.3284,24.9289 L92.6716,24.9289 L92.6716,29.1716 Z M113.4289,32 L120.5,24.9289 L127.5711,32 L120.5,39.0711 Z M145.5,25.8763 L138.4289,38.1237 L152.5711,38.1237 Z M170.5,38.1237 L163.4289,25.8763 L177.5711,25.8763 Z M201.6237,32 L189.3763,24.9289 L189.3763,39.0711 Z M214.3763,32 L226.6237,24.9289 L226.6237,39.0711 Z M245.5,23.835 L238.4289,36.0825 L252.5711,36.0825 Z M270.5,23.835 L268.7322,36.0825 L272.2678,36.0825 Z M294.4898,39.0711 L296.5102,39.0711 L296.5102,31.1161 L298.3284,31.1161 L295.5,24.9289 L292.6716,31.1161 L294.4898,31.1161 Z M313.4289,32 L327.5711,32" />
+          </View>
+        </View>
+          <Label className="caption">Kaikki merkkimuodot · 41 komentoa</Label>
+        </View>
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="356px" height="146px">
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1" d="M36.5,114.5 L36.5,119.5 M63.5,114.5 L63.5,119.5 M90.5,114.5 L90.5,119.5 M117.5,114.5 L117.5,119.5 M145.5,114.5 L145.5,119.5 M172.5,114.5 L172.5,119.5 M199.5,114.5 L199.5,119.5 M226.5,114.5 L226.5,119.5" />
+            <Label className="chartLabel" position="absolute" left="30.188px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="57.33px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">1</Label>
+            <Label className="chartLabel" position="absolute" left="84.473px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">2</Label>
+            <Label className="chartLabel" position="absolute" left="111.616px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">3</Label>
+            <Label className="chartLabel" position="absolute" left="138.759px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">4</Label>
+            <Label className="chartLabel" position="absolute" left="165.902px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">5</Label>
+            <Label className="chartLabel" position="absolute" left="193.045px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">6</Label>
+            <Label className="chartLabel" position="absolute" left="220.188px" top="121.5px" width="12.625px" textAlign="center" fontSize="10px">7</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1" d="M36.5,114.5 L226.5,114.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1" d="M36.5,114.5 L226.5,114.5 M36.5,104.5 L226.5,104.5 M36.5,93.5 L226.5,93.5 M36.5,83.5 L226.5,83.5 M36.5,72.5 L226.5,72.5 M36.5,62.5 L226.5,62.5 M36.5,52.5 L226.5,52.5 M36.5,41.5 L226.5,41.5 M36.5,31.5 L226.5,31.5 M36.5,20.5 L226.5,20.5 M36.5,10.5 L226.5,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1" d="M36.5,114.5 L31.5,114.5 M36.5,104.5 L31.5,104.5 M36.5,93.5 L31.5,93.5 M36.5,83.5 L31.5,83.5 M36.5,72.5 L31.5,72.5 M36.5,62.5 L31.5,62.5 M36.5,52.5 L31.5,52.5 M36.5,41.5 L31.5,41.5 M36.5,31.5 L31.5,31.5 M36.5,20.5 L31.5,20.5 M36.5,10.5 L31.5,10.5" />
+            <Label className="chartLabel" position="absolute" left="16.875px" top="109.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="99.1px" width="19.25px" textAlign="right" fontSize="10px">10</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="88.7px" width="19.25px" textAlign="right" fontSize="10px">20</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="78.3px" width="19.25px" textAlign="right" fontSize="10px">30</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="67.9px" width="19.25px" textAlign="right" fontSize="10px">40</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="57.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="47.1px" width="19.25px" textAlign="right" fontSize="10px">60</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="36.7px" width="19.25px" textAlign="right" fontSize="10px">70</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="26.3px" width="19.25px" textAlign="right" fontSize="10px">80</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="15.9px" width="19.25px" textAlign="right" fontSize="10px">90</Label>
+            <Label className="chartLabel" position="absolute" left="3.625px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1" d="M36.5,114.5 L36.5,10.5" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 L63.1429,56.8 L90.2857,69.28 L117.4286,19.36 L144.5714,29.76 L171.7143,58.88 L198.8571,94.24 L226,23.52" />
+            <Path className="chartStroke2" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 L40.5238,80.2 C45.0476,75.52 54.0952,66.16 63.1429,63.56 C72.1905,60.96 81.2381,65.12 90.2857,58.88 C99.3333,52.64 108.381,36 117.4286,29.4133 C126.4762,22.8267 135.5238,26.2933 144.5714,32.88 C153.619,39.4667 162.6667,49.1733 171.7143,59.92 C180.7619,70.6667 189.8095,82.4533 198.8571,76.56 C207.9048,70.6667 216.9524,47.0933 221.4762,35.3067 L226,23.52" />
+            <Path className="chartStroke3" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 C36,84.88 54.0952,59.4 63.1429,56.8 C72.1905,54.2 81.2381,75.52 90.2857,69.28 C99.3333,63.04 108.381,25.9467 117.4286,19.36 C126.4762,12.7733 135.5238,23.1733 144.5714,29.76 C153.619,36.3467 162.6667,48.1333 171.7143,58.88 C180.7619,69.6267 189.8095,100.1333 198.8571,94.24 C207.9048,88.3467 226,23.52 226,23.52" />
+            <Path className="chartStroke4" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 C36,84.88 53.4033,58.6297 63.1429,56.8 C71.6612,55.1997 82.2835,71.9399 90.2857,69.28 C101.3218,65.6116 106.2807,23.4728 117.4286,19.36 C125.4018,16.4184 136.1304,24.0689 144.5714,29.76 C154.4498,36.4202 162.9084,48.4777 171.7143,58.88 C181.0326,69.8877 190.7242,95.4202 198.8571,94.24 C209.4591,92.7015 226,23.52 226,23.52" />
+            <Path className="chartStroke5" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 C45.0476,70.84 54.0952,56.8 63.1429,56.8 C72.1905,56.8 81.2381,69.28 90.2857,69.28 C99.3333,69.28 108.381,19.36 117.4286,19.36 C126.4762,19.36 135.5238,23.1733 144.5714,29.76 C153.619,36.3467 162.6667,48.1333 171.7143,58.88 C180.7619,69.6267 189.8095,94.24 198.8571,94.24 C207.9048,94.24 216.9524,58.88 226,23.52" />
+            <Path className="chartStroke6" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 C45.0476,70.0343 54.0952,55.1886 63.1429,56.8 C72.1905,58.4114 81.2381,76.4799 90.2857,69.28 C99.3333,62.0801 108.381,29.612 117.4286,19.36 C126.4762,9.108 135.5238,21.0723 144.5714,29.76 C153.619,38.4477 162.6667,43.859 171.7143,58.88 C180.7619,73.901 189.8095,98.5317 198.8571,94.24 C207.9048,89.9483 216.9524,56.7341 226,23.52" />
+            <Path className="chartStroke7" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 L49.5714,84.88 L49.5714,56.8 L63.1429,56.8 L76.7143,56.8 L76.7143,69.28 L90.2857,69.28 L103.8571,69.28 L103.8571,19.36 L117.4286,19.36 L131,19.36 L131,29.76 L144.5714,29.76 L158.1429,29.76 L158.1429,58.88 L171.7143,58.88 L185.2857,58.88 L185.2857,94.24 L198.8571,94.24 L212.4286,94.24 L212.4286,23.52 L226,23.52" />
+            <Path className="chartStroke8" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 L36,56.8 L63.1429,56.8 L63.1429,69.28 L90.2857,69.28 L90.2857,19.36 L117.4286,19.36 L117.4286,29.76 L144.5714,29.76 L144.5714,58.88 L171.7143,58.88 L171.7143,94.24 L198.8571,94.24 L198.8571,23.52 L226,23.52" />
+            <Path className="chartStroke9" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" opacity="0.85" d="M36,84.88 L63.1429,84.88 L63.1429,56.8 L90.2857,56.8 L90.2857,69.28 L117.4286,69.28 L117.4286,19.36 L144.5714,19.36 L144.5714,29.76 L171.7143,29.76 L171.7143,58.88 L198.8571,58.88 L198.8571,94.24 L226,94.24 L226,23.52" />
+            <Path className="chartStroke0" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,32 L258,32" />
+            <Label className="chartLabel" position="absolute" left="263px" top="27px" width="45px" textAlign="left" fontSize="10px">linear</Label>
+            <Path className="chartStroke2" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,45 L258,45" />
+            <Label className="chartLabel" position="absolute" left="263px" top="40px" width="38.5px" textAlign="left" fontSize="10px">basis</Label>
+            <Path className="chartStroke3" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,58 L258,58" />
+            <Label className="chartLabel" position="absolute" left="263px" top="53px" width="58px" textAlign="left" fontSize="10px">cardinal</Label>
+            <Path className="chartStroke4" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,71 L258,71" />
+            <Label className="chartLabel" position="absolute" left="263px" top="66px" width="74.75px" textAlign="left" fontSize="10px">catmull-rom</Label>
+            <Path className="chartStroke5" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,84 L258,84" />
+            <Label className="chartLabel" position="absolute" left="263px" top="79px" width="58px" textAlign="left" fontSize="10px">monotone</Label>
+            <Path className="chartStroke6" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,97 L258,97" />
+            <Label className="chartLabel" position="absolute" left="263px" top="92px" width="51.5px" textAlign="left" fontSize="10px">natural</Label>
+            <Path className="chartStroke7" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,110 L258,110" />
+            <Label className="chartLabel" position="absolute" left="263px" top="105px" width="32px" textAlign="left" fontSize="10px">step</Label>
+            <Path className="chartStroke8" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,123 L258,123" />
+            <Label className="chartLabel" position="absolute" left="263px" top="118px" width="74.75px" textAlign="left" fontSize="10px">step-before</Label>
+            <Path className="chartStroke9" position="absolute" left="0px" top="0px" width="356px" height="146px" viewBox="0 0 356 146" fill="none" strokeWidth="1.5" d="M248,136 L258,136" />
+            <Label className="chartLabel" position="absolute" left="263px" top="131px" width="68.25px" textAlign="left" fontSize="10px">step-after</Label>
+            <Label className="chartTitle" position="absolute" left="247px" top="10px" width="84.65px" textAlign="left" fontSize="11px" fontWeight="bold">interpolate</Label>
+          </View>
+        </View>
+          <Label className="caption">Interpolaatiot · 125 komentoa</Label>
+        </View>
+      </View>
+      <View className="row chartRow">
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="231px" height="136px">
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="1" d="M63.5,114.5 L63.5,119.5 M108.5,114.5 L108.5,119.5 M153.5,114.5 L153.5,119.5 M198.5,114.5 L198.5,119.5" />
+            <Label className="chartLabel" position="absolute" left="56.08px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px">A</Label>
+            <Label className="chartLabel" position="absolute" left="101.318px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px">B</Label>
+            <Label className="chartLabel" position="absolute" left="146.557px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px">C</Label>
+            <Label className="chartLabel" position="absolute" left="191.795px" top="121.5px" width="14.125px" textAlign="center" fontSize="10px">D</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="1" d="M36.5,114.5 L226.5,114.5" />
+            <Path className="chartGrid" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="1" strokeDasharray="4,3" d="M36.5,114.5 L226.5,114.5 M36.5,104.5 L226.5,104.5 M36.5,93.5 L226.5,93.5 M36.5,83.5 L226.5,83.5 M36.5,72.5 L226.5,72.5 M36.5,62.5 L226.5,62.5 M36.5,52.5 L226.5,52.5 M36.5,41.5 L226.5,41.5 M36.5,31.5 L226.5,31.5 M36.5,20.5 L226.5,20.5 M36.5,10.5 L226.5,10.5" />
+            <Path className="chartTick" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="1" d="M36.5,114.5 L31.5,114.5 M36.5,104.5 L31.5,104.5 M36.5,93.5 L31.5,93.5 M36.5,83.5 L31.5,83.5 M36.5,72.5 L31.5,72.5 M36.5,62.5 L31.5,62.5 M36.5,52.5 L31.5,52.5 M36.5,41.5 L31.5,41.5 M36.5,31.5 L31.5,31.5 M36.5,20.5 L31.5,20.5 M36.5,10.5 L31.5,10.5" />
+            <Label className="chartLabel" position="absolute" left="16.875px" top="109.5px" width="12.625px" textAlign="right" fontSize="10px">0</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="99.1px" width="19.25px" textAlign="right" fontSize="10px">10</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="88.7px" width="19.25px" textAlign="right" fontSize="10px">20</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="78.3px" width="19.25px" textAlign="right" fontSize="10px">30</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="67.9px" width="19.25px" textAlign="right" fontSize="10px">40</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="57.5px" width="19.25px" textAlign="right" fontSize="10px">50</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="47.1px" width="19.25px" textAlign="right" fontSize="10px">60</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="36.7px" width="19.25px" textAlign="right" fontSize="10px">70</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="26.3px" width="19.25px" textAlign="right" fontSize="10px">80</Label>
+            <Label className="chartLabel" position="absolute" left="10.25px" top="15.9px" width="19.25px" textAlign="right" fontSize="10px">90</Label>
+            <Label className="chartLabel" position="absolute" left="3.625px" top="5.5px" width="25.875px" textAlign="right" fontSize="10px">100</Label>
+            <Path className="chartDomain" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="1" d="M36.5,114.5 L36.5,10.5" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" stroke="none" opacity="0.45" d="M45.0476,49.52 L81.2381,49.52 L81.2381,114 L45.0476,114 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="2" opacity="0.9" d="M45.0476,49.52 L81.2381,49.52 L81.2381,114 L45.0476,114 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" stroke="none" opacity="0.45" d="M94.2857,22.48 L122.4762,22.48 C124.6839,22.48 126.4762,24.2723 126.4762,26.48 L126.4762,110 C126.4762,112.2077 124.6839,114 122.4762,114 L94.2857,114 C92.0781,114 90.2857,112.2077 90.2857,110 L90.2857,26.48 C90.2857,24.2723 92.0781,22.48 94.2857,22.48 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="2" opacity="0.9" d="M94.2857,22.48 L122.4762,22.48 C124.6839,22.48 126.4762,24.2723 126.4762,26.48 L126.4762,110 C126.4762,112.2077 124.6839,114 122.4762,114 L94.2857,114 C92.0781,114 90.2857,112.2077 90.2857,110 L90.2857,26.48 C90.2857,24.2723 92.0781,22.48 94.2857,22.48 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" stroke="none" opacity="0.45" d="M143.5238,71.36 L163.7143,71.36 C168.1296,71.36 171.7143,74.9447 171.7143,79.36 L171.7143,106 C171.7143,110.4153 168.1296,114 163.7143,114 L143.5238,114 C139.1085,114 135.5238,110.4153 135.5238,106 L135.5238,79.36 C135.5238,74.9447 139.1085,71.36 143.5238,71.36 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="2" opacity="0.9" d="M143.5238,71.36 L163.7143,71.36 C168.1296,71.36 171.7143,74.9447 171.7143,79.36 L171.7143,106 C171.7143,110.4153 168.1296,114 163.7143,114 L143.5238,114 C139.1085,114 135.5238,110.4153 135.5238,106 L135.5238,79.36 C135.5238,74.9447 139.1085,71.36 143.5238,71.36 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" stroke="none" opacity="0.45" d="M192.7619,37.04 L204.9524,37.04 C211.5754,37.04 216.9524,42.417 216.9524,49.04 L216.9524,102 C216.9524,108.623 211.5754,114 204.9524,114 L192.7619,114 C186.1389,114 180.7619,108.623 180.7619,102 L180.7619,49.04 C180.7619,42.417 186.1389,37.04 192.7619,37.04 Z" />
+            <Path className="chartFill5 chartStroke10" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="2" opacity="0.9" d="M192.7619,37.04 L204.9524,37.04 C211.5754,37.04 216.9524,42.417 216.9524,49.04 L216.9524,102 C216.9524,108.623 211.5754,114 204.9524,114 L192.7619,114 C186.1389,114 180.7619,108.623 180.7619,102 L180.7619,49.04 C180.7619,42.417 186.1389,37.04 192.7619,37.04 Z" />
+            <Path className="chartStroke11" position="absolute" left="0px" top="0px" width="231px" height="136px" viewBox="0 0 231 136" fill="none" strokeWidth="3" strokeDasharray="6,4" d="M50.4762,49.52 L75.8095,49.52 M95.7143,22.48 L121.0476,22.48 M140.9524,71.36 L166.2857,71.36 M186.1905,37.04 L211.5238,37.04" />
+          </View>
+        </View>
+          <Label className="caption">Katkoviiva, pyöristys, läpinäkyvyys · 57 komentoa</Label>
+        </View>
+        <View className="chartCell">
+        <View className="chartBox">
+          <View className="chart" position="relative" width="250.7px" height="190px">
+            <Path className="chartFill11" position="absolute" left="0px" top="0px" width="250.7px" height="190px" viewBox="0 0 250.7 190" stroke="none" d="M20.225,21 C20.225,22.1046 19.3296,23 18.225,23 C17.1204,23 16.225,22.1046 16.225,21 C16.225,19.8954 17.1204,19 18.225,19 C19.3296,19 20.225,19.8954 20.225,21 Z M117.225,21 C117.225,22.1046 116.3296,23 115.225,23 C114.1204,23 113.225,22.1046 113.225,21 C113.225,19.8954 114.1204,19 115.225,19 C116.3296,19 117.225,19.8954 117.225,21 Z M214.225,21 C214.225,22.1046 213.3296,23 212.225,23 C211.1204,23 210.225,22.1046 210.225,21 C210.225,19.8954 211.1204,19 212.225,19 C213.3296,19 214.225,19.8954 214.225,21 Z M20.225,57 C20.225,58.1046 19.3296,59 18.225,59 C17.1204,59 16.225,58.1046 16.225,57 C16.225,55.8954 17.1204,55 18.225,55 C19.3296,55 20.225,55.8954 20.225,57 Z M117.225,57 C117.225,58.1046 116.3296,59 115.225,59 C114.1204,59 113.225,58.1046 113.225,57 C113.225,55.8954 114.1204,55 115.225,55 C116.3296,55 117.225,55.8954 117.225,57 Z M214.225,57 C214.225,58.1046 213.3296,59 212.225,59 C211.1204,59 210.225,58.1046 210.225,57 C210.225,55.8954 211.1204,55 212.225,55 C213.3296,55 214.225,55.8954 214.225,57 Z M38.225,109 C38.225,110.1046 37.3296,111 36.225,111 C35.1204,111 34.225,110.1046 34.225,109 C34.225,107.8954 35.1204,107 36.225,107 C37.3296,107 38.225,107.8954 38.225,109 Z M117.225,109 C117.225,110.1046 116.3296,111 115.225,111 C114.1204,111 113.225,110.1046 113.225,109 C113.225,107.8954 114.1204,107 115.225,107 C116.3296,107 117.225,107.8954 117.225,109 Z M208.225,109 C208.225,110.1046 207.3296,111 206.225,111 C205.1204,111 204.225,110.1046 204.225,109 C204.225,107.8954 205.1204,107 206.225,107 C207.3296,107 208.225,107.8954 208.225,109 Z" />
+            <Label className="chartText1" position="absolute" left="18.225px" top="11.4px" width="84px" textAlign="left" fontSize="12px">alphabetic</Label>
+            <Label className="chartText1" position="absolute" left="100.525px" top="21px" width="29.4px" textAlign="center" fontSize="12px">top</Label>
+            <Label className="chartText1" position="absolute" left="159.425px" top="15px" width="52.8px" textAlign="right" fontSize="12px">middle</Label>
+            <Label className="chartText1" position="absolute" left="18.225px" top="45px" width="52.8px" textAlign="left" fontSize="12px">bottom</Label>
+            <Label className="chartText1" position="absolute" left="88.825px" top="51px" width="52.8px" textAlign="center" fontSize="12px">nudged</Label>
+            <Label className="chartText1" position="absolute" left="173.75px" top="49.8px" width="76.95px" textAlign="center" fontSize="12px" rotate="-90">turned -90</Label>
+            <Label className="chartText1" position="absolute" left="0px" top="101.8px" width="72.45px" textAlign="center" fontSize="12px" rotate="90">turned 90</Label>
+            <Label className="chartText1" position="absolute" left="83.95px" top="101.8px" width="76.95px" textAlign="center" fontSize="12px" rotate="-45">turned -45</Label>
+            <Label className="chartText1" position="absolute" left="158.825px" top="101.8px" width="80.4px" textAlign="center" fontSize="12px" rotate="270">turned 270</Label>
+          </View>
+        </View>
+          <Label className="caption">Tekstin ankkurointi · 20 komentoa</Label>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default render;

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

@@ -0,0 +1,91 @@
+import { View, Label } from "./evg_types";
+
+/**
+ * Emoji: clusters, shaping, and a colour of their own.
+ *
+ * Everything here is set from `Noto_Emoji/NotoEmoji-Regular.ttf` — the same
+ * file on every target. The PDF embeds a subset of it as a Type0/Identity-H
+ * font, the PNG fills its outlines with the engine's own rasterizer, and the
+ * standalone HTML loads the same TTF through @font-face so the browser
+ * measures what EVG measured.
+ *
+ * The sequences below are the point. Each one is several codepoints and one
+ * glyph, and it only becomes that glyph if the whole cluster reaches the
+ * shaper together — which is why the face is chosen per cluster and not per
+ * codepoint. The keycap is the case that proves it: its base is a digit, so a
+ * per-codepoint decision left the "1" in the text face and sent only the box
+ * to the emoji face, and the ligature never saw all three parts.
+ *
+ * The tinted rows use `emoji-color`, which exists because there are no inline
+ * spans here to hang a second colour on.
+ */
+function render() {
+  return (
+    <View className="page">
+      <Label className="eyebrow">EVG — one engine, three targets</Label>
+      <Label className="title">Emoji</Label>
+      <View className="rule" />
+
+      <Label className="subhead">One cluster, one glyph</Label>
+      <View className="seqRow">
+        <Label className="seqGlyph">👨‍👩‍👧</Label>
+        <View className="seqText">
+          <Label className="seqName">Joined family</Label>
+          <Label className="seqNote">
+            Five codepoints joined by U+200D. GSUB substitutes one ligature for
+            all five, so it measures one advance and draws one glyph.
+          </Label>
+        </View>
+      </View>
+      <View className="seqRow">
+        <Label className="seqGlyph">🇫🇮</Label>
+        <View className="seqText">
+          <Label className="seqName">Flag</Label>
+          <Label className="seqNote">
+            A pair of regional indicators — and exactly a pair, or two flags in
+            a row would fuse into one cluster and neither would resolve.
+          </Label>
+        </View>
+      </View>
+      <View className="seqRow">
+        <Label className="seqGlyph">1️⃣</Label>
+        <View className="seqText">
+          <Label className="seqName">Keycap</Label>
+          <Label className="seqNote">
+            Digit, variation selector, enclosing keycap. The base character is
+            in the text face, which is why the face has to be chosen for the
+            whole cluster rather than per codepoint.
+          </Label>
+        </View>
+      </View>
+      <View className="seqRow">
+        <Label className="seqGlyph">👍🏽</Label>
+        <View className="seqText">
+          <Label className="seqName">Skin tone</Label>
+          <Label className="seqNote">
+            A modifier attaches to the emoji before it. This face is
+            monochrome, so it resolves to the base glyph — one glyph either way.
+          </Label>
+        </View>
+      </View>
+
+      <Label className="subhead">A colour of their own</Label>
+      <Label className="tintRose">Rose emoji, dark text 🎉 🚀 ⚠</Label>
+      <Label className="tintBlue">Blue emoji, dark text 🎉 🚀 ⚠</Label>
+      <Label className="tintGreen">Green emoji, dark text 🎉 🚀 ⚠</Label>
+      <Label className="body">
+        A monochrome face is outlines, so it takes whatever colour it is filled
+        with. The emoji-color property is inherited the way color is, and unset
+        it is the text colour — so a page that does not ask for one renders
+        byte-identically to before it existed.
+      </Label>
+
+      <Label className="subhead">In a sentence</Label>
+      <Label className="body">
+        Text and emoji share a line and a baseline 😀, the run is cut only where
+        the face has to change 🎉, and the PDF still extracts every one of them
+        as the codepoints they were written with 🚀.
+      </Label>
+    </View>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { View, Label } from "./evg_types";
+
+/**
+ * Flex: grow, shrink and basis; wrapping; and how a row distributes what is
+ * left over. Every arrangement here is a class in the stylesheet, so the same
+ * tree lays out differently under each theme.
+ */
+function render() {
+  return (
+    <View className="page">
+      <Label className="title">Flex</Label>
+      <View className="rule" />
+
+      <Label className="subhead">flex: 1 / 2 / 1</Label>
+      <View className="row">
+        <View className="box grow1"><Label className="boxLabel">1</Label></View>
+        <View className="box grow2"><Label className="boxLabel">2</Label></View>
+        <View className="box grow1"><Label className="boxLabel">1</Label></View>
+      </View>
+
+      <Label className="subhead">flex-shrink: 0 pitää mittansa</Label>
+      <View className="row">
+        <View className="box noshrink"><Label className="boxLabel">kiinteä</Label></View>
+        <View className="box grow1"><Label className="boxLabel">joustaa</Label></View>
+        <View className="box grow1"><Label className="boxLabel">joustaa</Label></View>
+      </View>
+
+      <Label className="subhead">justify-content: space-between</Label>
+      <View className="row between">
+        <View className="chip"><Label className="boxLabel">yksi</Label></View>
+        <View className="chip"><Label className="boxLabel">kaksi</Label></View>
+        <View className="chip"><Label className="boxLabel">kolme</Label></View>
+      </View>
+
+      <Label className="subhead">flex-wrap: wrap</Label>
+      <View className="row wrapping">
+        <View className="tile"><Label className="boxLabel">1</Label></View>
+        <View className="tile"><Label className="boxLabel">2</Label></View>
+        <View className="tile"><Label className="boxLabel">3</Label></View>
+        <View className="tile"><Label className="boxLabel">4</Label></View>
+        <View className="tile"><Label className="boxLabel">5</Label></View>
+        <View className="tile"><Label className="boxLabel">6</Label></View>
+      </View>
+    </View>
+  );
+}