autovisualizer 0.7.0 → 0.8.0

package/README.md

@@ -155,7 +155,7 @@ The events `events` and a walkthrough send are drawn as a path: each transition
 
 From React, set `walkthrough`, `counts`, `input` and `context` as JSON strings with `setAttribute` (or as attributes in markup). React renders before `embed.js` defines the element, so an object passed as a prop arrives as the text `[object Object]`.
 
-The chart shows states and events only, so it leaves the machine's name to your page. The mouse wheel and a one-finger swipe scroll the page; drag with the mouse, or use two fingers, to pan and zoom the chart. Charts load as they near the viewport, so a page with ten charts loads the ones your readers reach. Without a `height` in your CSS, the element sizes itself to the chart, between 240px and 720px tall plus the walkthrough bar, so a phone gets a short box instead of a tiny chart in empty space. A `height` in your CSS overrides that. It renders in a shadow root, so your page's styles don't reach in and its styles don't leak out. A chart written as code runs it in its own Web Worker, which needs the page served over HTTP; a chart from a definition runs on the page. `embed.d.ts` and `embed.react.d.ts` next to `embed.js` type the element for TypeScript and JSX.
+The chart shows states and events only, so it leaves the machine's name to your page. The mouse wheel and a one-finger swipe scroll the page; drag with the mouse, or use two fingers, to pan and zoom the chart. The button in the top-right corner shows the chart full screen; inside an iframe, give the iframe `allow="fullscreen"` to show it. Charts load as they near the viewport, so a page with ten charts loads the ones your readers reach. Without a `height` in your CSS, the element sizes itself to the chart, between 240px and 720px tall plus the walkthrough bar, so a phone gets a short box instead of a tiny chart in empty space. A `height` in your CSS overrides that. It renders in a shadow root, so your page's styles don't reach in and its styles don't leak out. `embed.js` carries its own stylesheet and fonts, so a page whose Content Security Policy allows only that script still gets a styled chart. A chart written as code runs it in its own Web Worker, which needs the page served over HTTP; a chart from a definition runs on the page. `embed.d.ts` and `embed.react.d.ts` next to `embed.js` type the element for TypeScript and JSX.
 
 ### In READMEs, issues and pull requests
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autovisualizer",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "See and step through XState v6 and @xstate/effect machines in the browser.",
   "license": "Apache-2.0",
   "author": "Jag Reehal",