ranger-compiler 3.5.0 → 3.5.2

package/dist/lib/evg/agent/fixtures/broken.evg.json

@@ -0,0 +1,7 @@
+{"evg":1,"root":{"tag":"div","props":{"class-name":"page","width":"600px","height":"300px"},"children":[
+  {"tag":"div","props":{"class-name":"clipped","width":"200px","height":"80px","overflow":"hidden"},"children":[
+    {"tag":"div","props":{"class-name":"wide","width":"400px","height":"40px"}}
+  ]},
+  {"tag":"div","props":{"class-name":"stacked","width":"100px","height":"60px","margin-top":"-40px"}},
+  {"tag":"div","props":{"class-name":"far","width":"320px","height":"60px","position":"absolute","left":"500px","top":"260px"}}
+]}}

package/dist/lib/evg/agent/fixtures/card.evg.json

@@ -0,0 +1,9 @@
+{"evg":1,"root":{"tag":"div","props":{"class-name":"page","width":"600px","height":"400px","padding-left":"24px","padding-top":"24px","background-color":"rgb(246,247,249)"},"children":[
+  {"tag":"div","props":{"class-name":"card","width":"320px","height":"120px","background-color":"rgb(255,255,255)","border-radius":"8px","padding-left":"16px","padding-top":"12px","flex-direction":"column"},"children":[
+    {"tag":"span","key":"title","props":{"font-size":"20px","font-weight":"bold","color":"rgb(31,41,51)"},"text":"Orders"},
+    {"tag":"span","key":"sub","props":{"font-size":"13px","color":"rgb(110,120,130)"},"text":"1 284 this month"}
+  ]},
+  {"tag":"div","props":{"class-name":"card","width":"320px","height":"120px","background-color":"rgb(255,255,255)","border-radius":"8px","padding-left":"16px","padding-top":"12px"},"children":[
+    {"tag":"span","props":{"font-size":"20px"},"text":"Revenue"}
+  ]}
+]}}

package/dist/lib/evg/agent/fixtures/connector.css

@@ -0,0 +1,63 @@
+/* Two cards and an arrow between them. Nothing here says where the arrow is —
+   only which two boxes it joins and what it looks like. */
+
+.page {
+  width: 100%;
+  height: 100%;
+  background-color: #f8fafc;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 24px;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 56px;
+}
+
+/* One column on a narrow page. The arrow is not mentioned. */
+@media (max-width: 560px) {
+  .page {
+    grid-template-columns: 1fr;
+    gap: 40px;
+  }
+}
+
+.card {
+  height: 120px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding-left: 18px;
+  padding-top: 16px;
+  flex-direction: column;
+}
+
+.label { font-size: 13px; color: #64748b; }
+.value { font-size: 30px; color: #0f172a; padding-top: 6px; }
+
+.flow {
+  from: --orders;
+  to: --revenue;
+  stroke: #f59e0b;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  arrow-end: triangle;
+  arrow-size: 11;
+}
+
+/* A count badge on the Orders card's top-right corner: one edge of this box
+   against one edge of that one. */
+.badge {
+  position-anchor: --orders;
+  left: calc(anchor(right) - 14px);
+  top: calc(anchor(top) - 10px);
+
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  background-color: #dc2626;
+  padding-left: 8px;
+  padding-top: 5px;
+}
+
+.badge-text { font-size: 14px; color: #ffffff; }

package/dist/lib/evg/agent/fixtures/connector.evg.json

@@ -0,0 +1,14 @@
+{"evg":1,"root":{"tag":"div","props":{"class-name":"page"},"children":[
+  {"tag":"div","props":{"class-name":"card","anchor-name":"--orders"},"children":[
+    {"tag":"span","props":{"class-name":"label"},"text":"Orders"},
+    {"tag":"span","props":{"class-name":"value"},"text":"1 284"}
+  ]},
+  {"tag":"div","props":{"class-name":"card","anchor-name":"--revenue"},"children":[
+    {"tag":"span","props":{"class-name":"label"},"text":"Revenue"},
+    {"tag":"span","props":{"class-name":"value"},"text":"48 190"}
+  ]},
+  {"tag":"connector","props":{"class-name":"flow"}},
+  {"tag":"div","props":{"class-name":"badge"},"children":[
+    {"tag":"span","props":{"class-name":"badge-text"},"text":"7"}
+  ]}
+]}}

package/dist/lib/evg/agent/fixtures/drawn.evg.json

@@ -0,0 +1,129 @@
+{
+  "evg": 1,
+  "root": {
+    "tag": "div",
+    "props": {
+      "display": "flex",
+      "width": "390px",
+      "height": "200px",
+      "padding-left": "16px",
+      "padding-top": "16px",
+      "gap": "12px"
+    },
+    "children": [
+      {
+        "tag": "div",
+        "props": {
+          "display": "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "gap": "12px"
+        },
+        "children": [
+          {
+            "tag": "span",
+            "text": "Share network",
+            "props": {
+              "font-size": "15px"
+            }
+          },
+          {
+            "tag": "div",
+            "props": {
+              "display": "flex",
+              "align-items": "center",
+              "width": "48px",
+              "height": "28px",
+              "background-color": "rgb(120,140,210)",
+              "border-radius": "14px"
+            },
+            "children": [
+              {
+                "tag": "div",
+                "props": {
+                  "width": "22px",
+                  "height": "22px",
+                  "background-color": "rgb(255,255,255)",
+                  "margin-left": "22px",
+                  "border-radius": "11px"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "tag": "div",
+        "props": {
+          "display": "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "gap": "12px"
+        },
+        "children": [
+          {
+            "tag": "div",
+            "role": "switch",
+            "label": "Wi-Fi",
+            "checked": 2,
+            "props": {
+              "display": "flex",
+              "align-items": "center",
+              "width": "48px",
+              "height": "28px",
+              "background-color": "rgb(22,163,74)",
+              "border-radius": "14px"
+            },
+            "children": [
+              {
+                "tag": "div",
+                "hidden": true,
+                "props": {
+                  "width": "22px",
+                  "height": "22px",
+                  "background-color": "rgb(255,255,255)",
+                  "margin-left": "22px",
+                  "border-radius": "11px"
+                }
+              }
+            ]
+          },
+          {
+            "tag": "span",
+            "text": "Wi-Fi",
+            "props": {
+              "font-size": "15px"
+            }
+          }
+        ]
+      },
+      {
+        "tag": "div",
+        "props": {
+          "display": "flex",
+          "flex-direction": "row",
+          "align-items": "center",
+          "height": "6px",
+          "min-height": "6px",
+          "width": "300px",
+          "border-radius": "999px",
+          "background-color": "rgb(229,229,234)",
+          "padding-left": "120px"
+        },
+        "children": [
+          {
+            "tag": "div",
+            "props": {
+              "width": "24px",
+              "height": "24px",
+              "min-width": "24px",
+              "min-height": "24px",
+              "border-radius": "999px",
+              "background-color": "rgb(255,255,255)"
+            }
+          }
+        ]
+      }
+    ]
+  }
+}

package/dist/lib/evg/agent/fixtures/gradient.evg.json

@@ -0,0 +1,4 @@
+{"evg":1,"root":{"tag":"div","props":{"width":"400px","height":"260px","background-color":"rgb(250,250,252)","padding-left":"20px","padding-top":"20px"},"children":[
+  {"tag":"div","props":{"width":"160px","height":"80px","gradient-from":"rgb(37,99,235)","gradient-to":"rgb(139,92,246)","gradient-dir":"1","border-radius":"12px"}},
+  {"tag":"div","props":{"width":"160px","height":"80px","gradient-from":"rgb(16,185,129)","gradient-to":"rgb(250,204,21)","gradient-dir":"0","margin-top":"20px"}}
+]}}

package/dist/lib/evg/agent/fixtures/popover.css

@@ -0,0 +1,99 @@
+/* A menu bar and one open menu. Every surface property is here in the
+   stylesheet, not on the element: they are ordinary declarations. */
+
+.app {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background-color: #f1f5f9;
+}
+
+.bar {
+  flex-direction: row;
+  align-items: center;
+  height: 44px;
+  background-color: #0f172a;
+  padding-left: 8px;
+  gap: 2px;
+}
+
+.title {
+  font-size: 15px;
+  color: #e2e8f0;
+  padding-left: 14px;
+  padding-right: 14px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+/* The item the menu is open on. */
+.open {
+  background-color: #334155;
+  color: #ffffff;
+}
+
+.canvas {
+  flex-grow: 1;
+  padding-left: 20px;
+  padding-top: 20px;
+  flex-direction: column;
+}
+
+.cards { flex-direction: row; gap: 16px; }
+
+.card {
+  width: 220px;
+  height: 92px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  padding-left: 16px;
+  padding-top: 14px;
+  flex-direction: column;
+}
+
+.card-title { font-size: 13px; color: #64748b; }
+.card-value { font-size: 26px; color: #0f172a; padding-top: 4px; }
+
+/* The menu. Anchored by NAME to the File item, which is two levels away in
+   another subtree — nothing joins the two but this line. */
+.menu {
+  position-anchor: --file;
+  position-area: bottom start;
+  position-try-fallbacks: top start, right start;
+  overlay-gap: 6px;
+
+  width: 210px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  flex-direction: column;
+
+  /* Take the room there is and scroll for the rest… */
+  fit-viewport: true;
+  overflow: hidden;
+
+  /* …and stop being a menu at all when the page is a phone. */
+  sheet-below: 600px;
+
+  shadow-color: rgba(15, 23, 42, 0.28);
+  shadow-radius: 18px;
+  shadow-offset-y: 6px;
+}
+
+.item {
+  width: 100%;
+  font-size: 15px;
+  color: #0f172a;
+  padding-left: 14px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.sep {
+  width: 100%;
+  height: 1px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  background-color: #e2e8f0;
+}

package/dist/lib/evg/agent/fixtures/popover.evg.json

@@ -0,0 +1,30 @@
+{"evg":1,"root":{"tag":"div","props":{"class-name":"app"},"children":[
+  {"tag":"div","props":{"class-name":"bar"},"children":[
+    {"tag":"span","props":{"class-name":"title open","anchor-name":"--file"},"text":"File"},
+    {"tag":"span","props":{"class-name":"title"},"text":"Edit"},
+    {"tag":"span","props":{"class-name":"title"},"text":"View"},
+    {"tag":"span","props":{"class-name":"title"},"text":"Help"}
+  ]},
+  {"tag":"div","props":{"class-name":"canvas"},"children":[
+    {"tag":"div","props":{"class-name":"cards"},"children":[
+      {"tag":"div","props":{"class-name":"card"},"children":[
+        {"tag":"span","props":{"class-name":"card-title"},"text":"Orders"},
+        {"tag":"span","props":{"class-name":"card-value"},"text":"1 284"}
+      ]},
+      {"tag":"div","props":{"class-name":"card"},"children":[
+        {"tag":"span","props":{"class-name":"card-title"},"text":"Revenue"},
+        {"tag":"span","props":{"class-name":"card-value"},"text":"48 190"}
+      ]}
+    ]}
+  ]},
+  {"tag":"popover","props":{"class-name":"menu"},"children":[
+    {"tag":"span","props":{"class-name":"item"},"text":"New Tab"},
+    {"tag":"span","props":{"class-name":"item"},"text":"New Window"},
+    {"tag":"span","props":{"class-name":"item"},"text":"Open…"},
+    {"tag":"div","props":{"class-name":"sep"}},
+    {"tag":"span","props":{"class-name":"item"},"text":"Save"},
+    {"tag":"span","props":{"class-name":"item"},"text":"Save As…"},
+    {"tag":"div","props":{"class-name":"sep"}},
+    {"tag":"span","props":{"class-name":"item"},"text":"Close Window"}
+  ]}
+]}}

package/dist/lib/evg/agent/roundtrip.sh

@@ -0,0 +1,74 @@
+#!/usr/bin/env bash
+#
+# Every showcase page, through the editable format and back to a picture.
+#
+# WHY THIS AND NOT ONLY THE CONVERTER'S OWN AUDIT. `evg_json_tool` checks three
+# things — a tag it cannot name, a field the patchable set has no room for, and
+# whether the two trees lay out and DRAW the same. All three were written after
+# a comparison like this one found a loss they had missed:
+#
+#   grid-row      the deck's subgrid placement, so captions sat on the paragraph
+#   svgSource     every imported graphic, on a page whose boxes were all correct
+#   emoji-color   the tint on three rows of monochrome emoji, which then
+#                 fell back to the text colour — same glyphs, same places
+#
+# Each of those taught the audit a new question. None of them was the LAST such
+# question, so the guard that matters is the one that asks nothing and compares
+# everything: render the original, render the conversion, and require the two
+# PNGs to be identical byte for byte.
+#
+#   npm run agent:roundtrip
+set -uo pipefail
+
+root=$(cd "$(dirname "$0")/../../.." && pwd)
+cd "$root"
+work=$(mktemp -d)
+trap 'rm -rf "$work"' EXIT
+
+PAGES=lib/evg/showcase/pages
+THEMES=lib/evg/showcase/themes
+PNG=gallery/pdf_writer/bin/evg_png_tool.js
+JSON=gallery/pdf_writer/bin/evg_json_tool.js
+
+for tool in evg_png_tool evg_json_tool; do
+  if [ ! -f "gallery/pdf_writer/bin/$tool.js" ]; then
+    echo "building $tool…"
+    RANGER_LIB=./compiler/Lang.rgr:./lib/stdops.rgr \
+      node dist/rgrc.js -es6 "./gallery/pdf_writer/src/tools/$tool.rgr" \
+      -d=./gallery/pdf_writer/bin -o="$tool.js" -nodecli > "$work/build.log" 2>&1 \
+      || { tail -20 "$work/build.log"; echo "FAILED to build $tool" >&2; exit 1; }
+  fi
+done
+
+same=0; differ=0; failed=0
+for src in "$PAGES"/*.tsx; do
+  name=$(basename "$src" .tsx)
+  css=(-css "$THEMES/showcase.css")
+  [ -f "$THEMES/$name-default.css" ] && css=(-css "$THEMES/$name-default.css" "${css[@]}")
+
+  if ! node "$JSON" "$src" "$PAGES/$name.roundtrip.evg.json" "${css[@]}" -theme editorial > "$work/$name.convert.log" 2>&1; then
+    printf "  %-14s convert FAILED\n" "$name"; failed=$((failed+1)); continue
+  fi
+  node "$PNG" "$src" "$work/$name.orig.png" "${css[@]}" -theme editorial > /dev/null 2>&1
+  node "$PNG" "$PAGES/$name.roundtrip.evg.json" "$work/$name.conv.png" > /dev/null 2>&1
+  rm -f "$PAGES/$name.roundtrip.evg.json"
+
+  if [ ! -f "$work/$name.conv.png" ]; then
+    printf "  %-14s render FAILED\n" "$name"; failed=$((failed+1)); continue
+  fi
+  if cmp -s "$work/$name.orig.png" "$work/$name.conv.png"; then
+    printf "  %-14s identical\n" "$name"; same=$((same+1))
+  else
+    printf "  %-14s DIFFERS — the conversion lost something\n" "$name"
+    grep -E "^  [0-9]|the same boxes|draws" "$work/$name.convert.log" | head -4 | sed 's/^/      /'
+    differ=$((differ+1))
+  fi
+done
+
+echo ""
+echo "identical = $same  differing = $differ  failed = $failed"
+if [ "$differ" != "0" ] || [ "$failed" != "0" ]; then
+  echo "FAILURES" >&2
+  exit 1
+fi
+echo "ALL PASS — every showcase page survives the editable format"