initial commit

tools/make-fixture.js

@@ -0,0 +1,40 @@
+/* Paste into the Firefox console (F12) on the graph page, then save the result:
+ *
+ *     wl-paste > tests/fixture.json
+ *
+ * It captures the real graph SVG plus the CSS custom properties it depends on
+ * (--required-validated and friends), which are defined outside the SVG and
+ * would otherwise be lost. That pair is everything needed to rebuild the page
+ * offline and test the extension against it.
+ *
+ * Firefox may require typing "allow pasting" in the console first.
+ */
+(() => {
+  const svg = document.querySelector('svg.statediagram') || document.querySelector('svg');
+  if (!svg) return console.error('no graph SVG found on this page');
+
+  // Custom properties are inherited, so resolve them while the SVG is in place.
+  const names = new Set();
+  svg.querySelectorAll('[style*="var(--"]').forEach((el) => {
+    for (const m of (el.getAttribute('style') || '').matchAll(/var\((--[\w-]+)/g)) names.add(m[1]);
+  });
+  const computed = getComputedStyle(svg);
+  const vars = {};
+  for (const n of names) vars[n] = computed.getPropertyValue(n).trim();
+
+  const fixture = {
+    url: location.href,
+    capturedAt: new Date().toISOString(),
+    vars,
+    bodyBackground: getComputedStyle(document.body).backgroundColor,
+    svg: svg.outerHTML,
+  };
+
+  const json = JSON.stringify(fixture, null, 2);
+  console.log('vars:', vars, '| svg length:', fixture.svg.length);
+  (navigator.clipboard?.writeText(json) || Promise.reject()).then(
+    () => console.log('%c copied — now run:  wl-paste > tests/fixture.json', 'color:#22c55e'),
+    () => console.log('%c clipboard refused — right-click the object above > Copy', 'color:#f59e0b')
+  );
+  return fixture;
+})();