@syntax-syllogism/flow-delta 0.5.1 → 0.6.1

package/README.md

@@ -14,6 +14,14 @@ Inspired by Google's [Flow Lens](https://github.com/google/flow-lens), with a
 focus on CI review workflows for GitLab merge requests and GitHub pull requests.
 We also opted for our own HTML output over plantuml, graphviz, or mermaid.
 
+Raw XML isn't just a Flow problem. The package also ships
+[FlexiPageDelta](docs/flexipage.md), a sibling tool that does the same for
+`.flexipage-meta.xml` — semantic diffs of regions, components, and facets,
+rendered as an interactive outline with an optional template-aware wireframe
+canvas so you can see *where* on the page layout changed, not just what.
+`flexipage-delta`, `flexipage-delta-gitlab`, and `flexipage-delta-github`
+ship alongside the Flow binaries.
+
 - [Sample GitLab project with artifacts](https://gitlab.com/j.p.richter/flow-delta-example/-/merge_requests/)
 - [Sample GitHub project with artifacts](https://github.com/Syntax-Syllogism/flow-delta-example/pulls)
 
@@ -35,10 +43,24 @@ npm install -g @syntax-syllogism/flow-delta
 flow-delta --old before.flow-meta.xml --new after.flow-meta.xml --out ./flow-delta-out
 ```
 
+Working with Lightning pages instead? [FlexiPageDelta](docs/flexipage.md)
+is available too:
+
+```bash
+npx flexipage-delta --old before.flexipage-meta.xml --new after.flexipage-meta.xml --out ./flexipage-delta-out
+```
+
 ## Usage
 
 See [docs/cli.md](docs/cli.md) for full file-mode and git-mode options.
 
+For FlexiPage metadata, see [docs/flexipage.md](docs/flexipage.md) for the
+full CLI, outline/wireframe artifact, and CI reporting details:
+
+```bash
+npx flexipage-delta --old before.flexipage-meta.xml --new after.flexipage-meta.xml --out ./flexipage-delta-out --json
+```
+
 ```bash
 # File mode — compare two local files
 npx @syntax-syllogism/flow-delta --old before.flow-meta.xml --new after.flow-meta.xml --out ./flow-delta-out --json
@@ -57,6 +79,9 @@ npx flow-delta-gitlab --in flow-delta-out
 npx flow-delta-github --in flow-delta-out
 ```
 
+FlexiPageDelta has the same reporters — swap in `flexipage-delta-gitlab` /
+`flexipage-delta-github` and point `--in` at `flexipage-delta-out`.
+
 The GitHub reporter can also consume `--artifact-urls <manifest.json>` for
 user-owned live-render links, such as R2 presigned URLs or Cloudflare
 Worker-backed URLs. See [docs/ci.md](docs/ci.md) for GitLab/GitHub workflow
@@ -70,7 +95,9 @@ build step:
 ```bash
 npm install
 npm test                 # parser + semantic diff / render / CLI suites
-npm run render:fixtures  # render every diff fixture to flow-delta-out/fixtures/
+npm run render:fixtures  # render all Flow + FlexiPage fixtures
+npm run render:fixtures -- flow       # Flow only
+npm run render:fixtures -- flexipage  # FlexiPage only
 npx tsx src/cli.ts --old before.flow-meta.xml --new after.flow-meta.xml --out ./flow-delta-out --json
 ```
 

package/dist/cli.js

@@ -560,7 +560,8 @@ function collectNodes(parsed) {
       continue;
     }
     for (const node of nodes) {
-      result.push(toNode(node, type));
+      const graphNode = toNode(node, type);
+      if (graphNode) result.push(graphNode);
     }
   }
   return result;
@@ -835,7 +836,7 @@ async function layoutDiff(diff) {
     }
   };
 }
-var elk = new ELK();
+var elk = new ELK.default();
 async function layoutView(diff, nodeVisible, edgeVisible) {
   const nodes = diff.nodes.filter(nodeVisible);
   const nodeIds = new Set(nodes.map((node) => node.id));
@@ -848,8 +849,8 @@ async function layoutView(diff, nodeVisible, edgeVisible) {
     layoutOptions: {
       "elk.algorithm": "layered",
       "elk.direction": "DOWN",
-      "elk.layered.spacing.nodeNodeBetweenLayers": 60,
-      "elk.spacing.nodeNode": 40
+      "elk.layered.spacing.nodeNodeBetweenLayers": "60",
+      "elk.spacing.nodeNode": "40"
     },
     children: nodes.map((node) => ({
       id: node.id,
@@ -1558,8 +1559,10 @@ function snapshotPanelClientScript() {
   return "const LONG_TEXT_THRESHOLD = " + LONG_TEXT_THRESHOLD + ";\nconst COLLECTION_KEYS = new Set(" + JSON.stringify(COLLECTION_KEY_NAMES) + ");\n\n" + functions;
 }
 
-// src/render/render-html.ts
+// src/render/shell.ts
 var THEME_STORAGE_KEY = "flow-delta-theme";
+
+// src/render/render-html.ts
 function renderHtml(layout) {
   const data = {
     diff: layout.diff,