@syntax-syllogism/flow-delta 0.1.2 → 0.3.0

package/README.md

@@ -5,6 +5,11 @@ A semantic, visual diff for Salesforce Flows: parse two versions of a
 interactive HTML artifact (plus `diff.json`) that shows added / deleted /
 modified / unchanged nodes and edges with per-property deltas.
 
+Inspired by Google's [Flow Lens](https://github.com/google/flow-lens), with
+a focus on making it work with GitLab's pipelines. We also opted for our own HTML output over plantuml, graphviz, or mermaid.
+
+[Sample Gitlab Project with artifacts](https://gitlab.com/j.p.richter/flow-delta-example/-/merge_requests/1)
+
 ## Usage
 
 Runs as a TypeScript CLI via `tsx` (no build step). See [docs/cli.md](docs/cli.md)

package/dist/cli.js

@@ -714,10 +714,10 @@ function classifyNode(oldNode, newNode) {
     throw new Error("Cannot classify absent node");
   }
   if (!oldNode) {
-    return { id: newNode.id, type: newNode.type, label: newNode.label, status: "added" };
+    return { id: newNode.id, type: newNode.type, label: newNode.label, status: "added", after: newNode.properties };
   }
   if (!newNode) {
-    return { id: oldNode.id, type: oldNode.type, label: oldNode.label, status: "deleted" };
+    return { id: oldNode.id, type: oldNode.type, label: oldNode.label, status: "deleted", before: oldNode.properties };
   }
   const changes = [
     ...deepDiff(oldNode.label, newNode.label, "label"),
@@ -737,7 +737,9 @@ function classifyNode(oldNode, newNode) {
     type: newNode.type,
     label: newNode.label,
     status: "modified",
-    changes
+    changes,
+    before: oldNode.properties,
+    after: newNode.properties
   };
 }
 function classifyEdge(oldEdge, newEdge) {
@@ -863,6 +865,656 @@ function measureBounds(nodes) {
   return { width: maxX + 40, height: maxY + 40 };
 }
 
+// src/render/section-schemas.ts
+var MAPPING_COLUMNS = [
+  { path: "field", label: "Field" },
+  { path: "value", label: "Value" }
+];
+var FILTER_COLUMNS = [
+  { path: "field", label: "Field" },
+  { path: "operator", label: "Operator" },
+  { path: "value", label: "Value" }
+];
+var PARAM_COLUMNS = [
+  { path: "name", label: "Name" },
+  { path: "value", label: "Value" },
+  { path: "assignToReference", label: "Assign To" }
+];
+var SCREEN_SETTING_PATHS = [
+  "allowBack",
+  "allowFinish",
+  "allowPause",
+  "showFooter",
+  "showHeader"
+];
+var SECTION_SCHEMAS = {
+  screen: [
+    { name: "Screen Settings", paths: SCREEN_SETTING_PATHS, render: "lines" }
+  ],
+  start: [
+    {
+      name: "Trigger",
+      paths: ["object", "triggerType", "recordTriggerType", "schedule", "filterLogic"],
+      render: "lines"
+    },
+    { name: "Entry Conditions", paths: ["filters"], render: "table", columns: FILTER_COLUMNS },
+    {
+      name: "Scheduled Paths",
+      paths: ["scheduledPaths"],
+      render: "table",
+      columns: [
+        { path: "name", label: "Name" },
+        { path: "label", label: "Label" },
+        { path: "offsetNumber", label: "Offset" },
+        { path: "offsetUnit", label: "Unit" },
+        { path: "timeSource", label: "Time Source" }
+      ]
+    }
+  ],
+  decision: [{
+    name: "Outcomes",
+    paths: ["rules"],
+    render: "grouped-table",
+    groupLabelPath: "label",
+    innerArray: "conditions",
+    innerColumns: [
+      { path: "leftValueReference", label: "Resource" },
+      { path: "operator", label: "Operator" },
+      { path: "rightValue", label: "Value" }
+    ]
+  }],
+  assignment: [{
+    name: "Assignment Items",
+    paths: ["assignmentItems"],
+    render: "table",
+    columns: [
+      { path: "assignToReference", label: "Variable" },
+      { path: "operator", label: "Operator" },
+      { path: "value", label: "Value" }
+    ]
+  }],
+  recordCreate: [{ name: "Field Mappings", paths: ["inputAssignments"], render: "table", columns: MAPPING_COLUMNS }],
+  recordUpdate: [{ name: "Field Mappings", paths: ["inputAssignments"], render: "table", columns: MAPPING_COLUMNS }],
+  recordLookup: [{ name: "Filters", paths: ["filters"], render: "table", columns: FILTER_COLUMNS }],
+  recordDelete: [{ name: "Filters", paths: ["filters"], render: "table", columns: FILTER_COLUMNS }],
+  subflow: [{ name: "Parameters", paths: ["inputAssignments", "outputAssignments"], render: "table", columns: PARAM_COLUMNS }],
+  actionCall: [{ name: "Parameters", paths: ["inputParameters", "outputParameters"], render: "table", columns: PARAM_COLUMNS }],
+  apexPluginCall: [{ name: "Parameters", paths: ["inputParameters", "outputParameters"], render: "table", columns: PARAM_COLUMNS }],
+  wait: [{
+    name: "Wait Events",
+    paths: ["waitEvents"],
+    render: "table",
+    columns: [
+      { path: "label", label: "Label" },
+      { path: "offset", label: "Offset" },
+      { path: "offsetUnit", label: "Unit" },
+      { path: "resumeDateReference", label: "Resume Date" }
+    ]
+  }],
+  customError: [{
+    name: "Error Messages",
+    paths: ["customErrorMessages"],
+    render: "table",
+    columns: [
+      { path: "name", label: "Name" },
+      { path: "errorMessage", label: "Message" }
+    ]
+  }],
+  transform: [
+    {
+      name: "Value Mappings",
+      paths: ["transformValues", "valueMappings"],
+      render: "table",
+      columns: [
+        { path: "name", label: "Name" },
+        { path: "sourceDataType", label: "Source Type" },
+        { path: "targetDataType", label: "Target Type" },
+        { path: "value", label: "Value" }
+      ]
+    },
+    {
+      name: "Data Type Mappings",
+      paths: ["dataTypeMappings"],
+      render: "table",
+      columns: [
+        { path: "name", label: "Name" },
+        { path: "sourceDataType", label: "Source Type" },
+        { path: "targetDataType", label: "Target Type" }
+      ]
+    }
+  ],
+  collectionProcessor: [
+    { name: "Collection Settings", paths: ["collectionReference", "operation"], render: "lines" },
+    { name: "Filters", paths: ["filters"], render: "table", columns: FILTER_COLUMNS },
+    {
+      name: "Sort Options",
+      paths: ["sortOptions"],
+      render: "table",
+      columns: [
+        { path: "field", label: "Field" },
+        { path: "sortOrder", label: "Order" }
+      ]
+    }
+  ],
+  orchestratedStage: [
+    { name: "Stage Settings", paths: ["stageLabel", "stageOrder"], render: "lines" }
+  ]
+};
+function getSectionSchemas(type) {
+  return SECTION_SCHEMAS[type] ?? [];
+}
+
+// src/render/snapshot-panel.ts
+var LONG_TEXT_THRESHOLD = 160;
+var COLLECTION_KEY_NAMES = [
+  "assignmentItems",
+  "choiceReferences",
+  "choices",
+  "conditions",
+  "customErrorMessages",
+  "dataTypeMappings",
+  "fields",
+  "filters",
+  "inputAssignments",
+  "inputParameters",
+  "outputParameters",
+  "outputAssignments",
+  "processMetadataValues",
+  "rules",
+  "scheduledPaths",
+  "sortOptions",
+  "stageSteps",
+  "steps",
+  "storeOutputParameters",
+  "transformValues",
+  "valueMappings",
+  "waitEvents"
+];
+var COLLECTION_KEYS = new Set(COLLECTION_KEY_NAMES);
+function renderNodePanelBody(node, schemas = []) {
+  if (node.status === "unchanged") {
+    return "<div class='empty'>No property changes.</div>";
+  }
+  const before = node.status === "added" ? void 0 : node.before;
+  const after = node.status === "deleted" ? void 0 : node.after;
+  const options = { showUnchanged: node.status !== "modified", nodeStatus: node.status };
+  const sections = renderSections(before, after, schemas || [], options);
+  if (!sections.length) {
+    return "<div class='empty'>No configuration.</div>";
+  }
+  return sections.map((section, index) => {
+    const open = node.status === "modified" || index === 0 ? " open" : "";
+    return "<details class='detail-section snapshot-section " + node.status + "'" + open + "><summary>" + escapeHtml(section.name) + " <span class='section-count'>(" + section.count + ")</span></summary><div class='section-body'>" + section.html + "</div></details>";
+  }).join("");
+}
+function renderSections(before, after, schemas, options) {
+  const sections = [];
+  const owned = /* @__PURE__ */ new Set();
+  for (const schema of schemas) {
+    for (const path of schema.paths) owned.add(path);
+    const rendered = renderSchemaSection(before, after, schema, options);
+    if (rendered) sections.push(rendered);
+  }
+  const keys = unionKeys(before, after).filter((key) => !ownsAny(owned, key));
+  const settingsRows = [];
+  let settingsCount = 0;
+  const nestedSections = [];
+  for (const key of keys) {
+    const childBefore = getField(before, key);
+    const childAfter = getField(after, key);
+    const childChanged = hasChange(childBefore, childAfter, key);
+    const scalar = scalarPair(childBefore, childAfter);
+    if (scalar) {
+      if (options.showUnchanged || childChanged) {
+        settingsRows.push(scalarRow(key, scalar.before, scalar.after, statusOf(childBefore, childAfter), options.nodeStatus));
+      }
+      if (childChanged) settingsCount += 1;
+      continue;
+    }
+    const rendered = renderValue(getField(before, key), getField(after, key), {
+      ...options,
+      label: humanizePath(key),
+      pathKey: key,
+      depth: 0
+    });
+    if (rendered.html) {
+      nestedSections.push({ name: humanizePath(key), html: rendered.html, count: rendered.count });
+    }
+  }
+  if (settingsRows.length) {
+    sections.push({
+      name: "Settings",
+      html: "<table class='snapshot-kv'><tbody>" + settingsRows.join("") + "</tbody></table>",
+      count: settingsCount
+    });
+  }
+  sections.push(...nestedSections);
+  return sections;
+}
+function renderSchemaSection(before, after, schema, options) {
+  let rendered;
+  if (schema.render === "table" && schema.columns) {
+    rendered = renderTable(before, after, schema.paths, schema.columns, options);
+  } else if (schema.render === "grouped-table" && schema.innerArray && schema.innerColumns) {
+    rendered = renderGroupedTable(before, after, schema, options);
+  } else {
+    const sectionBefore = pickSectionObject(before, schema.paths);
+    const sectionAfter = pickSectionObject(after, schema.paths);
+    rendered = renderValue(sectionBefore, sectionAfter, {
+      ...options,
+      label: schema.name,
+      pathKey: schema.paths[0] || schema.name,
+      depth: 0
+    });
+  }
+  if (!rendered.html) return null;
+  return { name: schema.name, html: rendered.html, count: rendered.count };
+}
+function renderValue(before, after, ctx) {
+  const changed = hasChange(before, after, ctx.pathKey);
+  if (!ctx.showUnchanged && !changed) return { html: "", changed: false, count: 0 };
+  const scalar = scalarPair(before, after);
+  if (scalar) {
+    return {
+      html: renderLine(ctx.label, scalar.before, scalar.after, statusOf(before, after), ctx.nodeStatus),
+      changed,
+      count: changed ? 1 : 0
+    };
+  }
+  if (isCollection(before, after, ctx.pathKey)) {
+    const rendered2 = renderArray(before, after, ctx);
+    return { html: rendered2.html, changed, count: rendered2.count || (changed ? 1 : 0) };
+  }
+  const rendered = renderObject(before, after, ctx);
+  return { html: rendered.html, changed, count: rendered.count || (changed ? 1 : 0) };
+}
+function renderObject(before, after, ctx) {
+  const beforeObj = isObj(before) ? before : {};
+  const afterObj = isObj(after) ? after : {};
+  const keys = unionKeys(beforeObj, afterObj);
+  const scalarRows = [];
+  const nested = [];
+  let count = 0;
+  for (const key of keys) {
+    const childBefore = getField(beforeObj, key);
+    const childAfter = getField(afterObj, key);
+    const childChanged = hasChange(childBefore, childAfter, key);
+    const scalar = scalarPair(childBefore, childAfter);
+    if (scalar) {
+      if (ctx.showUnchanged || childChanged || ctx.depth > 0) {
+        scalarRows.push(scalarRow(key, scalar.before, scalar.after, statusOf(childBefore, childAfter), ctx.nodeStatus));
+      }
+      if (childChanged) count += 1;
+      continue;
+    }
+    const rendered = renderValue(childBefore, childAfter, {
+      ...ctx,
+      label: humanizePath(key),
+      pathKey: key,
+      depth: ctx.depth + 1
+    });
+    if (rendered.html) {
+      nested.push("<div class='snapshot-nested'><div class='snapshot-nested-title'>" + escapeHtml(humanizePath(key)) + "</div>" + rendered.html + "</div>");
+      count += rendered.count;
+    }
+  }
+  const table = scalarRows.length ? "<table class='snapshot-kv'><tbody>" + scalarRows.join("") + "</tbody></table>" : "";
+  return { html: table + nested.join(""), changed: count > 0, count };
+}
+function renderArray(before, after, ctx) {
+  const beforeItems = arr(before);
+  const afterItems = arr(after);
+  if (looksLikeNameValueArray(beforeItems, afterItems)) {
+    return renderTableFromItems(before, after, [""], [
+      { path: "name", label: "Name" },
+      { path: "value", label: "Value" }
+    ], ctx);
+  }
+  const max = Math.max(beforeItems.length, afterItems.length);
+  const cards = [];
+  let count = 0;
+  for (let i = 0; i < max; i += 1) {
+    const childBefore = beforeItems[i];
+    const childAfter = afterItems[i];
+    const childChanged = hasChange(childBefore, childAfter, "");
+    if (!ctx.showUnchanged && !childChanged) continue;
+    const title = itemTitle(childBefore, childAfter, i);
+    const rendered = renderValue(childBefore, childAfter, {
+      ...ctx,
+      label: title,
+      pathKey: "",
+      depth: ctx.depth + 1
+    });
+    if (!rendered.html) continue;
+    count += rendered.count || (childChanged ? 1 : 0);
+    cards.push("<div class='snapshot-card " + statusOf(childBefore, childAfter) + "'><div class='snapshot-card-title'>" + escapeHtml(title) + "</div>" + rendered.html + "</div>");
+  }
+  return { html: cards.join(""), changed: count > 0, count };
+}
+function renderTable(before, after, paths, columns, options) {
+  return renderTableFromItems(before, after, paths, columns, { ...options, label: "", pathKey: paths[0] || "", depth: 0 });
+}
+function renderTableFromItems(before, after, paths, columns, options) {
+  const rows = [];
+  for (const path of paths) {
+    const beforeItems = arr(resolvePath(before, path));
+    const afterItems = arr(resolvePath(after, path));
+    const max = Math.max(beforeItems.length, afterItems.length);
+    for (let i = 0; i < max; i += 1) {
+      const itemBefore = beforeItems[i];
+      const itemAfter = afterItems[i];
+      if (!options.showUnchanged && !hasChange(itemBefore, itemAfter, path)) continue;
+      const cells = {};
+      for (const col of columns) {
+        const cellBefore = resolvePath(itemBefore, col.path);
+        const cellAfter = resolvePath(itemAfter, col.path);
+        cells[col.path] = {
+          before: unwrapValue(cellBefore),
+          after: unwrapValue(cellAfter),
+          changed: hasChange(cellBefore, cellAfter, col.path)
+        };
+      }
+      rows.push({ idx: i, kind: statusOf(itemBefore, itemAfter), cells });
+    }
+  }
+  if (!rows.length) return { html: "", changed: false, count: 0 };
+  const showChange = options.nodeStatus === "modified" && !options.suppressChangeColumn;
+  const head = "<tr><th class='row-idx'>#</th>" + columns.map((col) => "<th>" + escapeHtml(col.label) + "</th>").join("") + (showChange ? "<th>Change</th>" : "") + "</tr>";
+  const body = rows.map((row) => renderRow(row, columns, showChange, options.nodeStatus)).join("");
+  return {
+    html: "<table class='change-table'><thead>" + head + "</thead><tbody>" + body + "</tbody></table>",
+    changed: rows.some((row) => row.kind !== "unchanged" || Object.values(row.cells).some((cell) => cell.changed)),
+    count: rows.filter((row) => row.kind !== "unchanged" || Object.values(row.cells).some((cell) => cell.changed)).length
+  };
+}
+function renderRow(row, columns, showChange, nodeStatus) {
+  const cells = columns.map((col) => {
+    const cell = row.cells[col.path];
+    return "<td>" + renderValueCell(cell.before, cell.after, cell.changed ? row.kind : "unchanged", nodeStatus) + "</td>";
+  }).join("");
+  const badge = showChange ? "<td><span class='change-kind " + row.kind + "'>" + capitalize(row.kind) + "</span></td>" : "";
+  return "<tr class='row-" + row.kind + "'><td class='row-idx'>" + (row.idx + 1) + "</td>" + cells + badge + "</tr>";
+}
+function renderGroupedTable(before, after, schema, options) {
+  const groups = [];
+  let count = 0;
+  for (const path of schema.paths) {
+    const beforeGroups = arr(resolvePath(before, path));
+    const afterGroups = arr(resolvePath(after, path));
+    const max = Math.max(beforeGroups.length, afterGroups.length);
+    for (let i = 0; i < max; i += 1) {
+      const groupBefore = beforeGroups[i];
+      const groupAfter = afterGroups[i];
+      if (!options.showUnchanged && !hasChange(groupBefore, groupAfter, path)) continue;
+      const kind = statusOf(groupBefore, groupAfter);
+      const present = groupAfter !== void 0 ? groupAfter : groupBefore;
+      const labelValue = schema.groupLabelPath && present ? resolvePath(present, schema.groupLabelPath) : void 0;
+      const label = labelValue != null ? stripHtml(String(labelValue)) : "Outcome " + (i + 1);
+      const scalarRows = renderGroupScalars(groupBefore, groupAfter, schema, options);
+      const inner = renderTableFromItems(groupBefore, groupAfter, [schema.innerArray || ""], schema.innerColumns || [], {
+        ...options,
+        suppressChangeColumn: kind !== "modified",
+        label,
+        pathKey: schema.innerArray || "",
+        depth: 1
+      }).html;
+      const head = "<div class='group-head'><span class='change-kind " + kind + "'>" + capitalize(kind) + "</span><span class='group-label'>" + escapeHtml(label) + "</span></div>";
+      groups.push("<div class='outcome-group'>" + head + scalarRows + inner + "</div>");
+      count += 1;
+    }
+  }
+  return { html: groups.join(""), changed: count > 0, count };
+}
+function renderGroupScalars(before, after, schema, options) {
+  const beforeObj = isObj(before) ? before : {};
+  const afterObj = isObj(after) ? after : {};
+  const skip = new Set([schema.innerArray, schema.groupLabelPath].filter(Boolean));
+  const rows = unionKeys(beforeObj, afterObj).filter((key) => !skip.has(key)).map((key) => {
+    const cellBefore = getField(beforeObj, key);
+    const cellAfter = getField(afterObj, key);
+    const scalar = scalarPair(cellBefore, cellAfter);
+    if (!scalar) return "";
+    if (!options.showUnchanged && !hasChange(cellBefore, cellAfter, key)) return "";
+    return scalarRow(key, scalar.before, scalar.after, statusOf(cellBefore, cellAfter), options.nodeStatus);
+  }).filter(Boolean).join("");
+  return rows ? "<table class='snapshot-kv'><tbody>" + rows + "</tbody></table>" : "";
+}
+function scalarRow(key, before, after, kind, nodeStatus) {
+  return "<tr><th>" + escapeHtml(humanizePath(key)) + "</th><td>" + renderValueCell(before, after, kind, nodeStatus) + "</td></tr>";
+}
+function renderLine(label, before, after, kind, nodeStatus) {
+  const badge = nodeStatus === "modified" ? "<span class='change-kind " + kind + "'>" + capitalize(kind) + "</span>" : "";
+  return "<ul class='changes'><li><div class='change-line-head'>" + badge + "<span class='change-line-label'>" + escapeHtml(label) + "</span></div><div class='change-line-value'>" + renderValueCell(before, after, kind, nodeStatus) + "</div></li></ul>";
+}
+function renderValueCell(before, after, kind, nodeStatus) {
+  if (nodeStatus === "added") return oneSidedVal(after !== void 0 ? after : before);
+  if (nodeStatus === "deleted") return oneSidedVal(before !== void 0 ? before : after);
+  if (kind === "added") return insVal(after !== void 0 ? after : before);
+  if (kind === "removed") return delVal(before !== void 0 ? before : after);
+  if (kind === "modified") return diffValue(before, after);
+  return faintVal(after !== void 0 ? after : before);
+}
+function statusOf(before, after) {
+  if (before === void 0) return "added";
+  if (after === void 0) return "removed";
+  return valuesEqual(before, after) ? "unchanged" : "modified";
+}
+function hasChange(before, after, pathKey = "") {
+  if (before === void 0 || after === void 0) return before !== after;
+  const scalar = scalarPair(before, after);
+  if (scalar) return !valuesEqual(scalar.before, scalar.after);
+  if (isCollection(before, after, pathKey)) {
+    const beforeItems = arr(before);
+    const afterItems = arr(after);
+    const max = Math.max(beforeItems.length, afterItems.length);
+    for (let i = 0; i < max; i += 1) {
+      if (hasChange(beforeItems[i], afterItems[i], "")) return true;
+    }
+    return false;
+  }
+  const beforeObj = isObj(before) ? before : {};
+  const afterObj = isObj(after) ? after : {};
+  for (const key of unionKeys(beforeObj, afterObj)) {
+    if (hasChange(beforeObj[key], afterObj[key], key)) return true;
+  }
+  return false;
+}
+function scalarPair(before, after) {
+  const beforeUnwrapped = unwrapValue(before);
+  const afterUnwrapped = unwrapValue(after);
+  const beforeScalar = beforeUnwrapped == null || typeof beforeUnwrapped !== "object";
+  const afterScalar = afterUnwrapped == null || typeof afterUnwrapped !== "object";
+  return beforeScalar && afterScalar ? { before: beforeUnwrapped, after: afterUnwrapped } : null;
+}
+function arr(value) {
+  if (value === void 0 || value === null) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function isObj(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value);
+}
+function isCollection(before, after, pathKey) {
+  return Array.isArray(before) || Array.isArray(after) || isCollectionKey(pathKey);
+}
+function isCollectionKey(key) {
+  return COLLECTION_KEYS.has(key);
+}
+function unionKeys(before, after) {
+  return [.../* @__PURE__ */ new Set([...Object.keys(before || {}), ...Object.keys(after || {})])].sort();
+}
+function ownsAny(paths, key) {
+  for (const path of paths) {
+    if (key === path || key.startsWith(path + ".") || key.startsWith(path + "[")) return true;
+  }
+  return false;
+}
+function pickSectionObject(obj, paths) {
+  if (!obj) return void 0;
+  const out = {};
+  for (const path of paths) {
+    const value = resolvePath(obj, path);
+    if (value !== void 0) out[path] = value;
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+function getField(obj, key) {
+  return obj ? obj[key] : void 0;
+}
+function resolvePath(obj, path) {
+  if (obj == null || !path) return obj;
+  let cur = obj;
+  const tokens = path.match(/[^.[\]]+|\[\d+\]/g) || [];
+  for (const token of tokens) {
+    if (cur == null || typeof cur !== "object") return void 0;
+    cur = token[0] === "[" ? cur[Number(token.slice(1, -1))] : cur[token];
+  }
+  return cur;
+}
+function looksLikeNameValueArray(beforeItems, afterItems) {
+  const items = [...beforeItems, ...afterItems].filter(isObj);
+  return items.length > 0 && items.every((item) => "name" in item && "value" in item);
+}
+function itemTitle(before, after, index) {
+  const item = isObj(after) ? after : before;
+  if (item) {
+    for (const key of ["fieldText", "label", "name", "fieldType", "field"]) {
+      const value = unwrapValue(item[key]);
+      if (value !== void 0 && value !== null && typeof value !== "object") {
+        return stripHtml(String(value));
+      }
+    }
+  }
+  return "Item " + (index + 1);
+}
+function stripHtml(value) {
+  return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+}
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+function humanizePath(path) {
+  const names = {
+    assignmentItems: "Assignment item",
+    choiceReferences: "Choice reference",
+    choices: "Choice",
+    conditions: "Condition",
+    customErrorMessages: "Custom error message",
+    dataTypeMappings: "Data type mapping",
+    fields: "Field",
+    filters: "Filter",
+    inputAssignments: "Input assignment",
+    inputParameters: "Input parameter",
+    outputParameters: "Output parameter",
+    processMetadataValues: "Process metadata value",
+    rules: "Rule",
+    scheduledPaths: "Scheduled path",
+    storeOutputParameters: "Store output parameter",
+    transformValues: "Transform value",
+    valueMappings: "Value mapping",
+    waitEvents: "Wait event"
+  };
+  return path.split(".").map((segment) => {
+    const match = segment.match(/^([^[]+)(?:\[(\d+)\])?$/);
+    if (!match) return segment;
+    const name = names[match[1]] || match[1].replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (char) => char.toUpperCase());
+    return match[2] === void 0 ? name : name + " " + (Number(match[2]) + 1);
+  }).join(" > ");
+}
+function unwrapValue(value) {
+  if (value === null || value === void 0 || typeof value !== "object" || Array.isArray(value)) return value;
+  if ("elementReference" in value) return "{!" + value.elementReference + "}";
+  const keys = Object.keys(value);
+  if (keys.length === 1) {
+    const key = keys[0];
+    const obj = value;
+    if (key === "stringValue" || key === "numberValue" || key === "dateValue" || key === "dateTimeValue") return obj[key];
+    if (key === "booleanValue") return String(obj[key]) === "true" ? "true" : "false";
+  }
+  return value;
+}
+function valuesEqual(a, b) {
+  if (a === b) return true;
+  if (a && b && typeof a === "object" && typeof b === "object") return JSON.stringify(a) === JSON.stringify(b);
+  return false;
+}
+function renderScalar(value) {
+  if (value === void 0) return "<em>-</em>";
+  if (value === null) return "<em>empty</em>";
+  if (typeof value === "object") return "<pre>" + escapeHtml(JSON.stringify(value, null, 2)) + "</pre>";
+  const text = String(value);
+  if (text.length > LONG_TEXT_THRESHOLD || text.includes("\n")) {
+    return "<pre>" + escapeHtml(text) + "</pre>";
+  }
+  return escapeHtml(text);
+}
+function insVal(value) {
+  return "<span class='val ins'>" + renderScalar(value) + "</span>";
+}
+function delVal(value) {
+  return "<span class='val del'>" + renderScalar(value) + "</span>";
+}
+function faintVal(value) {
+  return "<span class='val faint'>" + renderScalar(value) + "</span>";
+}
+function oneSidedVal(value) {
+  return "<span class='val one-sided'>" + renderScalar(value) + "</span>";
+}
+function diffValue(before, after) {
+  before = unwrapValue(before);
+  after = unwrapValue(after);
+  if (before === void 0) return insVal(after);
+  if (after === void 0) return delVal(before);
+  return delVal(before) + " <span class='arrow'>-></span> " + insVal(after);
+}
+function escapeHtml(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function snapshotPanelClientScript() {
+  const functions = [
+    renderNodePanelBody,
+    renderSections,
+    renderSchemaSection,
+    renderValue,
+    renderObject,
+    renderArray,
+    renderTable,
+    renderTableFromItems,
+    renderRow,
+    renderGroupedTable,
+    renderGroupScalars,
+    scalarRow,
+    renderLine,
+    renderValueCell,
+    statusOf,
+    hasChange,
+    scalarPair,
+    arr,
+    isObj,
+    isCollection,
+    isCollectionKey,
+    unionKeys,
+    ownsAny,
+    pickSectionObject,
+    getField,
+    resolvePath,
+    looksLikeNameValueArray,
+    itemTitle,
+    stripHtml,
+    capitalize,
+    humanizePath,
+    unwrapValue,
+    valuesEqual,
+    renderScalar,
+    insVal,
+    delVal,
+    faintVal,
+    oneSidedVal,
+    diffValue,
+    escapeHtml
+  ].map((fn) => fn.toString()).join("\n\n");
+  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
 function renderHtml(layout) {
   const data = {
@@ -871,7 +1523,8 @@ function renderHtml(layout) {
     edges: layout.edges,
     width: layout.width,
     height: layout.height,
-    layouts: layout.views
+    layouts: layout.views,
+    sectionSchemas: Object.fromEntries(layout.diff.nodes.map((node) => [node.type, getSectionSchemas(node.type)]))
   };
   const json = JSON.stringify(data).replace(/</g, "\\u003c");
   const s = layout.diff.summary;
@@ -884,7 +1537,7 @@ function renderHtml(layout) {
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>${escapeHtml(layout.diff.flowName)}</title>
+  <title>${escapeHtml2(layout.diff.flowName)}</title>
   <style>
     :root {
       color-scheme: light;
@@ -896,6 +1549,7 @@ function renderHtml(layout) {
       --modified: #d97706; --modified-fill: #fef3c7;
       --unchanged: #94a3b8; --unchanged-fill: #e9edf3;
       --edge: #64748b; --fault: #7c3aed;
+      --panel-width: 34vw;
     }
     * { box-sizing: border-box; }
     body { margin: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
@@ -938,7 +1592,8 @@ function renderHtml(layout) {
     .legend .deleted::before { background: var(--deleted); }
     .legend .modified::before { background: var(--modified); }
     .legend .unchanged::before { background: var(--unchanged); }
-    main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 32vw, 520px); min-height: 0; }
+    main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, var(--panel-width), 70vw); min-height: 0; }
+    body.panel-collapsed main { grid-template-columns: minmax(0, 1fr) 0; }
     .canvas { position: relative; overflow: hidden; }
     svg {
       width: 100%; height: 100%; display: block;
@@ -946,22 +1601,83 @@ function renderHtml(layout) {
         radial-gradient(circle, #dfe5ee 1px, transparent 1.4px) -11px -11px / 22px 22px,
         linear-gradient(#ffffff, #f7f9fc);
     }
-    .panel { min-width: 0; border-left: 1px solid var(--border); background: var(--surface); padding: 20px; overflow-y: auto; overflow-x: hidden; }
+    .panel { position: relative; min-width: 0; border-left: 1px solid var(--border); background: var(--surface); padding: 20px; overflow-y: auto; overflow-x: hidden; }
+    body.panel-collapsed .panel { padding: 0; border-left: 0; overflow: hidden; }
+    body.panel-collapsed .panel > *:not(.panel-resizer) { display: none; }
+    /* drag-to-resize handle on the panel's left edge */
+    .panel-resizer { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; transform: translateX(-50%); cursor: col-resize; z-index: 6; touch-action: none; }
+    .panel-resizer::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); transform: translateX(-50%); transition: background-color 0.12s ease, width 0.12s ease; }
+    .panel-resizer:hover::before, .panel-resizer.dragging::before { background: #93c5fd; width: 3px; }
+    body.panel-collapsed .panel-resizer { display: none; }
+    .panel-head { display: flex; align-items: flex-start; gap: 8px; }
+    .panel-head h2 { flex: 1; min-width: 0; }
+    .panel-toggle, .panel-reopen { border: 1px solid var(--border); background: #f8fafc; color: var(--muted); border-radius: 7px; cursor: pointer; font: inherit; line-height: 1; }
+    .panel-toggle { flex: none; width: 26px; height: 26px; font-size: 16px; display: grid; place-items: center; }
+    .panel-toggle:hover, .panel-reopen:hover { color: var(--text); border-color: #93c5fd; background: #eff6ff; }
+    .panel-toggle:focus-visible, .panel-reopen:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
+    /* floating tab to reopen the panel once collapsed */
+    .panel-reopen { display: none; position: absolute; top: 14px; right: 14px; z-index: 7; padding: 7px 12px; font-size: 12px; font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
+    body.panel-collapsed .panel-reopen { display: inline-flex; align-items: center; gap: 6px; }
     .panel h2 { margin: 0 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
     .panel .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; background: #eef1f6; color: var(--muted); margin-bottom: 16px; }
     .panel.added .badge { background: var(--added-fill); color: var(--added); }
     .panel.deleted .badge { background: var(--deleted-fill); color: var(--deleted); }
     .panel.modified .badge { background: var(--modified-fill); color: var(--modified); }
     .panel .empty { color: var(--muted); font-size: 13px; }
-    .changes { list-style: none; padding: 0; margin: 4px 0 0; }
-    .changes li { min-width: 0; margin-bottom: 12px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; }
-    .change-title { font-weight: 600; margin-bottom: 5px; }
-    .change-path { margin-bottom: 12px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
-    .change-values { display: grid; gap: 10px; min-width: 0; }
-    .change-value { min-width: 0; }
-    .change-value-label { margin-bottom: 4px; color: #475569; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
-    .changes code { font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #eef1f6; padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
-    .changes pre { max-width: 100%; margin: 0; padding: 11px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }
+    .detail-section { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fbfcfe; overflow: hidden; }
+    .detail-section.snapshot-section { border-left-width: 3px; }
+    .detail-section.snapshot-section.added { border-left-color: rgba(22, 163, 74, 0.5); }
+    .detail-section.snapshot-section.deleted { border-left-color: rgba(220, 38, 38, 0.45); }
+    .detail-section.snapshot-section.added summary { background: rgba(220, 252, 231, 0.35); }
+    .detail-section.snapshot-section.deleted summary { background: rgba(254, 226, 226, 0.35); }
+    .detail-section summary { cursor: pointer; padding: 11px 13px; font-weight: 650; }
+    .detail-section[open] summary { border-bottom: 1px solid var(--border); }
+    .section-count { color: var(--muted); font-size: 11px; font-weight: 500; }
+    .section-body { padding: 12px; overflow-x: auto; }
+    .change-kind { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
+    .change-kind.added { color: var(--added); background: var(--added-fill); }
+    .change-kind.modified { color: var(--modified); background: var(--modified-fill); }
+    .change-kind.removed { color: var(--deleted); background: var(--deleted-fill); }
+    /* git-diff value grammar */
+    .val { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
+    .val.ins { color: #14532d; background: var(--added-fill); }
+    .val.del { color: #7f1d1d; background: var(--deleted-fill); text-decoration: line-through; text-decoration-color: rgba(127, 29, 29, 0.5); }
+    .val.faint { color: var(--muted); background: transparent; padding-left: 0; }
+    .val.one-sided { color: var(--text); background: transparent; padding-left: 0; }
+    .val em { font-style: normal; color: var(--faint); }
+    .val pre { margin: 4px 0 0; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.5; max-height: 220px; overflow: auto; }
+    .arrow { color: var(--faint); margin: 0 2px; }
+    /* scalar / fallback change lines */
+    .changes { list-style: none; padding: 0; margin: 0; }
+    .changes li { min-width: 0; margin-bottom: 9px; }
+    .changes li:last-child { margin-bottom: 0; }
+    .change-line-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
+    .change-line-label { font-weight: 600; font-size: 12px; }
+    .change-line-value { padding-left: 2px; }
+    /* item tables (field mappings, conditions, filters, parameters) */
+    .change-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    .change-table th, .change-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+    .change-table th { color: var(--muted); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }
+    .change-table tr:last-child td { border-bottom: 0; }
+    .change-table .row-idx { color: var(--faint); font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
+    .change-table tr.row-added { background: rgba(22, 163, 74, 0.06); }
+    .change-table tr.row-removed { background: rgba(220, 38, 38, 0.05); }
+    .snapshot-kv { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
+    .snapshot-kv th, .snapshot-kv td { padding: 6px 7px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+    .snapshot-kv th { color: var(--muted); width: 34%; font-weight: 650; }
+    .snapshot-kv tr:last-child th, .snapshot-kv tr:last-child td { border-bottom: 0; }
+    .snapshot-nested { border-left: 2px solid var(--border); padding-left: 10px; margin: 10px 0; }
+    .snapshot-nested-title { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 7px; }
+    .snapshot-card { border: 1px dashed var(--border); border-radius: 7px; padding: 9px 10px; margin: 8px 0; background: var(--surface); }
+    .snapshot-card.added { border-left: 2px solid rgba(22, 163, 74, 0.5); }
+    .snapshot-card.removed { border-left: 2px solid rgba(220, 38, 38, 0.45); }
+    .snapshot-card-title { font-size: 12px; font-weight: 700; margin-bottom: 7px; overflow-wrap: anywhere; }
+    /* outcome groups (decisions) */
+    .outcome-group { margin-bottom: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
+    .outcome-group:last-child { margin-bottom: 0; }
+    .group-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
+    .group-label { font-weight: 700; font-size: 12.5px; }
+    .outcome-group .changes { margin-bottom: 8px; }
     .edge { fill: none; }
     .edge.unchanged { stroke-width: 1.4; opacity: 0.55; }
     .edge.normal.unchanged { stroke: var(--edge); marker-end: url(#arrow-normal); }
@@ -981,8 +1697,18 @@ function renderHtml(layout) {
     .node.unchanged rect { fill: var(--unchanged-fill); stroke: var(--unchanged); }
     .node.selected rect { stroke-width: 3; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18)); }
     .node-label { white-space: pre; }
+    /* Type-based styling \u2014 SHAPE & stroke pattern only. Status (added/deleted/
+       modified/unchanged) remains the sole authority on fill/stroke COLOR, so
+       the legend stays reliable. Start/end stand out via a pill shape, heavier
+       stroke, and a neutral emphasis halo \u2014 never via a status-like color. */
+    .node.type-start rect, .node.type-end rect { rx: 24; ry: 24; stroke-width: 2.5; filter: drop-shadow(0 0 0 3px rgba(15, 23, 42, 0.16)) drop-shadow(0 1px 3px rgba(15, 23, 42, 0.18)); }
+    .node.type-recordLookup rect, .node.type-recordCreate rect, .node.type-recordUpdate rect, .node.type-recordDelete rect { rx: 4; ry: 4; }
+    .node.type-screen rect { rx: 6; ry: 6; }
+    .node.type-subflow rect { stroke-width: 2.5; }
+    .node.type-loop rect { stroke-dasharray: 2 3; }
+    .node.type-wait rect { stroke-dasharray: 4 4; }
+    .node.selected.type-start rect, .node.selected.type-end rect { stroke-width: 3.5; filter: drop-shadow(0 0 0 5px rgba(15, 23, 42, 0.22)) drop-shadow(0 2px 6px rgba(15, 23, 42, 0.2)); }
     @media (max-width: 1000px) {
-      main { grid-template-columns: minmax(0, 1fr) minmax(320px, 42vw); }
       .panel { padding: 16px; }
     }
   </style>
@@ -990,7 +1716,7 @@ function renderHtml(layout) {
 <body>
   <header>
     <div>
-      <h1>${escapeHtml(layout.diff.flowName)}</h1>
+      <h1>${escapeHtml2(layout.diff.flowName)}</h1>
       <div class="meta">${metaHtml}</div>
     </div>
     <div class="header-actions">
@@ -1032,10 +1758,15 @@ function renderHtml(layout) {
       </svg>
     </div>
     <aside class="panel">
-      <h2 id="panel-title">Select a node</h2>
+      <div class="panel-resizer" id="panel-resizer" role="separator" aria-orientation="vertical" aria-label="Resize panel"></div>
+      <div class="panel-head">
+        <h2 id="panel-title">Select a node</h2>
+        <button type="button" id="panel-toggle" class="panel-toggle" aria-label="Collapse panel" title="Collapse panel">\u203A</button>
+      </div>
       <div id="panel-badge" class="badge">No selection</div>
       <div id="panel-body">Click a node to inspect its properties.</div>
     </aside>
+    <button type="button" id="panel-reopen" class="panel-reopen" aria-label="Show details panel" title="Show details">\u2039 Details</button>
   </main>
   <script>
     const DATA = ${json};
@@ -1053,14 +1784,6 @@ function renderHtml(layout) {
     let dragStart = null;
     let selectedNodeId = null;
 
-    function escapeHtml(value) {
-      return String(value)
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
-    }
-
     function isNodeVisible(node, mode) {
       if (mode === "after") return node.status !== "deleted";
       if (mode === "before") return node.status !== "added";
@@ -1186,16 +1909,11 @@ function renderHtml(layout) {
       panel.className = "panel " + node.status;
       panelTitle.textContent = node.label;
       panelBadge.textContent = node.status.toUpperCase();
-      const changes = node.changes || [];
-      panelBody.innerHTML = changes.length
-        ? "<ul class='changes'>" + changes.map(formatChange).join("") + "</ul>"
-        : node.status === "added"
-          ? "<div class='empty'>This node was added in the new version.</div>"
-          : node.status === "deleted"
-            ? "<div class='empty'>This node was removed in the new version.</div>"
-            : "<div class='empty'>No property changes.</div>";
+      panelBody.innerHTML = renderNodePanelBody(node, DATA.sectionSchemas[node.type] || []);
     }
 
+    ${snapshotPanelClientScript()}
+
     function selectNode(id) {
       selectedNodeId = id;
       document.querySelectorAll(".node").forEach((el) => el.classList.remove("selected"));
@@ -1205,45 +1923,6 @@ function renderHtml(layout) {
       if (node) updatePanel(node);
     }
 
-    function formatChange(change) {
-      const beforeMissing = change.before === undefined;
-      const afterMissing = change.after === undefined;
-      const action = beforeMissing ? "Added" : afterMissing ? "Removed" : "Changed";
-      const values = beforeMissing
-        ? formatLabeledValue("New value", change.after)
-        : afterMissing
-          ? formatLabeledValue("Previous value", change.before)
-          : formatLabeledValue("Before", change.before) + formatLabeledValue("After", change.after);
-      return "<li><div class='change-title'>" + action + ": " + escapeHtml(humanizePath(change.path)) + "</div>"
-        + "<div class='change-path'>Metadata path: <code>" + escapeHtml(change.path) + "</code></div>"
-        + "<div class='change-values'>" + values + "</div></li>";
-    }
-
-    function formatLabeledValue(label, value) {
-      return "<div class='change-value'><div class='change-value-label'>" + label + "</div>" + formatValue(value) + "</div>";
-    }
-
-    function humanizePath(path) {
-      const names = {
-        assignmentItems: "Assignment item",
-        conditions: "Condition",
-        rules: "Rule",
-      };
-      return path.split(".").map((segment) => {
-        const match = segment.match(/^([^[]+)(?:\\[(\\d+)\\])?$/);
-        if (!match) return segment;
-        const name = names[match[1]] || match[1].replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (char) => char.toUpperCase());
-        return match[2] === undefined ? name : name + " " + (Number(match[2]) + 1);
-      }).join(" \u203A ");
-    }
-
-    function formatValue(value) {
-      if (value === undefined) return "<em>Not present</em>";
-      if (value === null) return "<em>Empty value</em>";
-      if (typeof value === "object") return "<pre>" + escapeHtml(JSON.stringify(value, null, 2)) + "</pre>";
-      return "<code>" + escapeHtml(String(value)) + "</code>";
-    }
-
     function pickInitialNode(visibleNodeIds) {
       return DATA.nodes.find((node) => visibleNodeIds.has(node.id) && node.status === "modified")
         || DATA.nodes.find((node) => visibleNodeIds.has(node.id) && node.status !== "unchanged")
@@ -1356,6 +2035,39 @@ function renderHtml(layout) {
       });
     });
 
+    // Panel: collapse to focus on the canvas, and drag the left edge to resize.
+    const panelToggle = document.getElementById("panel-toggle");
+    const panelReopen = document.getElementById("panel-reopen");
+    const panelResizer = document.getElementById("panel-resizer");
+
+    function setPanelCollapsed(collapsed) {
+      document.body.classList.toggle("panel-collapsed", collapsed);
+      if (panelToggle) panelToggle.setAttribute("aria-expanded", collapsed ? "false" : "true");
+    }
+    if (panelToggle) panelToggle.addEventListener("click", () => setPanelCollapsed(true));
+    if (panelReopen) panelReopen.addEventListener("click", () => setPanelCollapsed(false));
+
+    if (panelResizer) {
+      let resizeStart = null;
+      panelResizer.addEventListener("pointerdown", (event) => {
+        resizeStart = { x: event.clientX, width: panel.getBoundingClientRect().width };
+        panelResizer.classList.add("dragging");
+        panelResizer.setPointerCapture(event.pointerId);
+        event.preventDefault();
+      });
+      panelResizer.addEventListener("pointermove", (event) => {
+        if (!resizeStart) return;
+        // The handle is on the panel's left edge, so dragging left widens it.
+        const next = resizeStart.width - (event.clientX - resizeStart.x);
+        const max = Math.max(320, window.innerWidth - 360);
+        const clamped = Math.max(300, Math.min(max, next));
+        document.documentElement.style.setProperty("--panel-width", clamped + "px");
+      });
+      const endResize = () => { resizeStart = null; panelResizer.classList.remove("dragging"); };
+      panelResizer.addEventListener("pointerup", endResize);
+      panelResizer.addEventListener("pointercancel", endResize);
+    }
+
     applyView("all");
   </script>
 </body>
@@ -1384,16 +2096,16 @@ function renderEdge(edge) {
     return "";
   }
   const d = points.map((point, index) => `${index === 0 ? "M" : "L"} ${point.x} ${point.y}`).join(" ");
-  return `<path class="edge ${edge.kind} ${edge.status}" d="${d}" data-edge-id="${escapeHtml(edge.id)}"></path>`;
+  return `<path class="edge ${edge.kind} ${edge.status}" d="${d}" data-edge-id="${escapeHtml2(edge.id)}"></path>`;
 }
 function renderNode(node) {
   const lines = wrapLabel(node.label, 22);
   const lineHeight = 14;
   const textY = node.height / 2 - (lines.length - 1) * lineHeight / 2 + 5;
-  return `<g class="node ${node.status}" data-node-id="${escapeHtml(node.id)}" transform="translate(${node.x},${node.y})">
+  return `<g class="node ${node.status} type-${node.type}" data-node-id="${escapeHtml2(node.id)}" transform="translate(${node.x},${node.y})">
     <rect width="${node.width}" height="${node.height}"></rect>
     <text x="${node.width / 2}" y="${textY}" text-anchor="middle" class="node-label">
-      ${lines.map((line, index) => `<tspan x="${node.width / 2}" dy="${index === 0 ? 0 : lineHeight}">${escapeHtml(line)}</tspan>`).join("")}
+      ${lines.map((line, index) => `<tspan x="${node.width / 2}" dy="${index === 0 ? 0 : lineHeight}">${escapeHtml2(line)}</tspan>`).join("")}
     </text>
   </g>`;
 }
@@ -1415,7 +2127,7 @@ function wrapLabel(label, maxChars) {
   }
   return lines.length ? lines.slice(0, 3) : [label];
 }
-function escapeHtml(value) {
+function escapeHtml2(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntax-syllogism/flow-delta",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "type": "module",
   "description": "Semantic visual diff for Salesforce Flows",
   "license": "MIT",