@syntax-syllogism/flow-delta 0.6.1 → 0.6.2

package/dist/flexipage-cli.js

@@ -126,11 +126,11 @@ function diffPage(oldModel, newModel) {
   };
 }
 function diffRegion(name, oldRegion, newRegion) {
-  if (!oldRegion) return { name, type: newRegion.type, mode: newRegion.mode, status: "added", items: newRegion.items.map((item, index) => classifyItem(void 0, item, `${name}:after:${index}`)) };
-  if (!newRegion) return { name, type: oldRegion.type, mode: oldRegion.mode, status: "deleted", items: oldRegion.items.map((item, index) => classifyItem(item, void 0, `${name}:before:${index}`)) };
+  if (!oldRegion) return { name, path: name, type: newRegion.type, mode: newRegion.mode, status: "added", items: newRegion.items.map((item, index) => classifyItem(void 0, item, `${name}:after:${index}`, name)) };
+  if (!newRegion) return { name, path: name, type: oldRegion.type, mode: oldRegion.mode, status: "deleted", items: oldRegion.items.map((item, index) => classifyItem(item, void 0, `${name}:before:${index}`, name)) };
   const items = diffItems(oldRegion.items, newRegion.items, name);
   const regionChanges = deepDiff({ type: oldRegion.type, mode: oldRegion.mode }, { type: newRegion.type, mode: newRegion.mode });
-  return { name, type: newRegion.type, mode: newRegion.mode, status: regionChanges.length || items.some((item) => item.status !== "unchanged") ? "modified" : "unchanged", ...regionChanges.length ? { changes: regionChanges } : {}, items };
+  return { name, path: name, type: newRegion.type, mode: newRegion.mode, status: regionChanges.length || items.some((item) => item.status !== "unchanged") ? "modified" : "unchanged", ...regionChanges.length ? { changes: regionChanges } : {}, items };
 }
 function diffItems(oldItems, newItems, regionName) {
   const pairs = lcs(oldItems, newItems);
@@ -138,22 +138,24 @@ function diffItems(oldItems, newItems, regionName) {
   let oldIndex = 0;
   let newIndex = 0;
   for (const [matchOld, matchNew] of pairs) {
-    while (oldIndex < matchOld) output.push(classifyItem(oldItems[oldIndex], void 0, `${regionName}:before:${oldIndex++}`));
-    while (newIndex < matchNew) output.push(classifyItem(void 0, newItems[newIndex], `${regionName}:after:${newIndex++}`));
-    output.push(classifyItem(oldItems[matchOld], newItems[matchNew], `${regionName}:${matchNew}`));
+    while (oldIndex < matchOld) output.push(classifyItem(oldItems[oldIndex], void 0, `${regionName}:before:${oldIndex++}`, regionName));
+    while (newIndex < matchNew) output.push(classifyItem(void 0, newItems[newIndex], `${regionName}:after:${newIndex++}`, regionName));
+    output.push(classifyItem(oldItems[matchOld], newItems[matchNew], `${regionName}:${matchNew}`, regionName));
     oldIndex = matchOld + 1;
     newIndex = matchNew + 1;
   }
-  while (oldIndex < oldItems.length) output.push(classifyItem(oldItems[oldIndex], void 0, `${regionName}:before:${oldIndex++}`));
-  while (newIndex < newItems.length) output.push(classifyItem(void 0, newItems[newIndex], `${regionName}:after:${newIndex++}`));
+  while (oldIndex < oldItems.length) output.push(classifyItem(oldItems[oldIndex], void 0, `${regionName}:before:${oldIndex++}`, regionName));
+  while (newIndex < newItems.length) output.push(classifyItem(void 0, newItems[newIndex], `${regionName}:after:${newIndex++}`, regionName));
   return output;
 }
-function classifyItem(before, after, id) {
+function classifyItem(before, after, id, regionPath) {
   const item = after ?? before;
-  const base = item.kind === "component" ? { id, kind: item.kind, componentName: item.componentName } : { id, kind: item.kind, fieldItem: item.fieldItem };
-  if (!before) return { ...base, status: "added", after };
-  if (!after) return { ...base, status: "deleted", before };
-  const changes = before.kind === "component" && after.kind === "component" ? deepDiff(before.properties, after.properties) : deepDiff(before, after);
+  const identifier = item.identifier;
+  const itemPath = `${regionPath} \u203A ${itemLabel(item)}`;
+  const base = item.kind === "component" ? { id, path: itemPath, kind: item.kind, componentName: item.componentName, ...identifier ? { identifier } : {} } : { id, path: itemPath, kind: item.kind, fieldItem: item.fieldItem, ...identifier ? { identifier } : {} };
+  if (!before) return { ...base, status: "added", ...visibilityNote(item), after };
+  if (!after) return { ...base, status: "deleted", ...visibilityNote(item), before };
+  const changes = before.kind === "component" && after.kind === "component" ? deepDiff(before.properties, after.properties) : before.kind === "field" && after.kind === "field" ? deepDiff(before.attributes, after.attributes) : deepDiff(before, after);
   return changes.length ? { ...base, status: "modified", changes, before, after } : { ...base, status: "unchanged", after };
 }
 function lcs(oldItems, newItems) {
@@ -178,7 +180,13 @@ function lcs(oldItems, newItems) {
   return matches;
 }
 function itemKey(item) {
-  return item.kind === "component" ? `component:${item.componentName}` : `field:${item.fieldItem}`;
+  return item.kind === "component" ? `component:${item.componentName}#${item.identifier ?? ""}` : `field:${item.fieldItem}#${item.identifier ?? ""}`;
+}
+function itemLabel(item) {
+  return item.kind === "component" ? `${item.componentName}${item.identifier ? `#${item.identifier}` : ""}` : `${item.fieldItem}${item.identifier ? `#${item.identifier}` : ""}`;
+}
+function visibilityNote(item) {
+  return item.kind === "field" && item.attributes.visibilityRule !== void 0 ? { notes: ["has visibility rule"] } : {};
 }
 function orderOf(path) {
   const index = HEADER_ORDER.indexOf(path);
@@ -193,6 +201,7 @@ import { Parser } from "xml2js";
 import { createHash } from "node:crypto";
 var FACET_GUID = /^Facet-[0-9a-f-]{36}$/i;
 var HEADER_KEYS = ["masterLabel", "type", "sobjectType", "parentFlexiPage", "description"];
+var ALWAYS_LIST_KEYS = /* @__PURE__ */ new Set(["criteria"]);
 async function parseFlexiPage(xml) {
   const parsed = await new Parser({ explicitArray: true, trim: true, normalize: false }).parseStringPromise(xml);
   const page = parsed.FlexiPage;
@@ -233,6 +242,7 @@ function parseItemInstance(value) {
     return [{
       kind: "component",
       componentName: scalar(component.componentName) ?? "(unnamed component)",
+      ...scalar(component.identifier) !== void 0 ? { identifier: scalar(component.identifier) } : {},
       properties: Object.fromEntries(properties),
       facetRefs: []
     }];
@@ -240,11 +250,13 @@ function parseItemInstance(value) {
   const field = objectAt(instance.fieldInstance);
   if (field) {
     const attributes = Object.fromEntries(
-      Object.entries(field).filter(([key]) => key !== "fieldItem").map(([key, raw]) => [key, valueText(raw)]).filter((entry) => entry[1] !== void 0)
+      Object.entries(field).filter(([key]) => key !== "fieldItem" && key !== "identifier").map(([key, raw]) => [key, valueText(raw)]).filter((entry) => entry[1] !== void 0)
     );
+    const identifier = scalar(field.identifier);
     return [{
       kind: "field",
       fieldItem: scalar(field.fieldItem) ?? "(unnamed field)",
+      ...identifier !== void 0 ? { identifier } : {},
       attributes
     }];
   }
@@ -253,48 +265,88 @@ function parseItemInstance(value) {
 function canonicalize(model) {
   const rawRegions = model.regions;
   const facets = new Map(rawRegions.filter((region) => region.type === "Facet").map((region) => [region.name, region]));
-  const references = /* @__PURE__ */ new Map();
-  for (const region of rawRegions) {
-    region.items.forEach((item) => {
-      if (item.kind !== "component") return;
-      for (const [property, value] of Object.entries(item.properties)) {
-        if (!facets.has(value)) continue;
-        const context = `${region.name}:${item.componentName}:${property}`;
-        references.set(value, [...references.get(value) ?? [], context]);
-      }
-    });
-  }
   const canonicalNames = /* @__PURE__ */ new Map();
-  for (const [name, contexts] of references) {
-    if (!FACET_GUID.test(name)) continue;
-    const context = [...contexts].sort()[0];
-    canonicalNames.set(name, `Facet:${context}`);
-  }
-  for (const facet of rawRegions.filter((region) => region.type === "Facet" && FACET_GUID.test(region.name))) {
-    if (!canonicalNames.has(facet.name)) {
-      canonicalNames.set(facet.name, `Facet:orphan:${facetHash(facet)}`);
-    }
+  const usedNames = new Set(rawRegions.filter((region) => region.type === "Region").map((region) => region.name));
+  for (const region of rawRegions.filter((candidate) => candidate.type === "Region")) {
+    resolveFacetChildren(region, region.name);
+  }
+  const orphanCounts = /* @__PURE__ */ new Map();
+  for (const facet of rawRegions.filter((candidate) => candidate.type === "Facet" && FACET_GUID.test(candidate.name))) {
+    if (canonicalNames.has(facet.name)) continue;
+    const base = `Facet:orphan:${facetHash(facet)}`;
+    const count = orphanCounts.get(base) ?? 0;
+    const name = count === 0 ? base : `${base}#${count + 1}`;
+    orphanCounts.set(base, count + 1);
+    canonicalNames.set(facet.name, name);
+    usedNames.add(name);
   }
+  const canonicalFacetNames = new Set(canonicalNames.values());
   const regions = rawRegions.map((region) => ({
     ...region,
     name: canonicalNames.get(region.name) ?? region.name,
     items: region.items.map((item) => {
       if (item.kind !== "component") return item;
-      const properties = Object.fromEntries(Object.entries(item.properties).map(([key, value]) => [key, canonicalNames.get(value) ?? value]));
+      const properties = Object.fromEntries(Object.entries(item.properties).map(([key, value]) => [key, mapFacetValues(value)]));
       return {
         ...item,
         properties,
-        facetRefs: Object.values(properties).filter((value) => rawRegions.some((candidate) => candidate.type === "Facet" && (canonicalNames.get(candidate.name) ?? candidate.name) === value))
+        facetRefs: [...new Set(Object.values(properties).flatMap((value) => collectFacetRefs(value)))]
       };
     })
   }));
+  const names = regions.map((region) => region.name);
+  if (names.length !== new Set(names).size) {
+    throw new Error("FlexiPage canonicalization produced duplicate region names");
+  }
   return { ...model, regions };
+  function resolveFacetChildren(parent, parentPath) {
+    const siblingCounts = /* @__PURE__ */ new Map();
+    for (const item of parent.items) {
+      if (item.kind !== "component") continue;
+      for (const [property, value] of Object.entries(item.properties)) {
+        for (const facetName of collectRawFacetRefs(value)) {
+          const child = facets.get(facetName);
+          if (!child || !FACET_GUID.test(facetName)) continue;
+          let childPath = canonicalNames.get(facetName);
+          if (!childPath) {
+            const base = `${parentPath} \u203A ${componentLabel(item)} \u203A ${property}`;
+            const count = siblingCounts.get(base) ?? 0;
+            siblingCounts.set(base, count + 1);
+            childPath = count === 0 ? base : `${base}#${count + 1}`;
+            canonicalNames.set(facetName, childPath);
+            usedNames.add(childPath);
+            resolveFacetChildren(child, childPath);
+          }
+        }
+      }
+    }
+  }
+  function mapFacetValues(value) {
+    if (typeof value === "string") return canonicalNames.get(value) ?? value;
+    if (Array.isArray(value)) return value.map(mapFacetValues);
+    return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, mapFacetValues(child)]));
+  }
+  function collectRawFacetRefs(value) {
+    if (typeof value === "string") return facets.has(value) ? [value] : [];
+    if (Array.isArray(value)) return value.flatMap(collectRawFacetRefs);
+    return Object.values(value).flatMap(collectRawFacetRefs);
+  }
+  function collectFacetRefs(value) {
+    if (typeof value === "string") {
+      const canonical = canonicalNames.get(value);
+      if (canonical) return [canonical];
+      if (facets.has(value)) return [value];
+      return canonicalFacetNames.has(value) ? [value] : [];
+    }
+    if (Array.isArray(value)) return value.flatMap(collectFacetRefs);
+    return Object.values(value).flatMap(collectFacetRefs);
+  }
 }
 function facetHash(region) {
   const stable = {
     type: region.type,
     mode: region.mode,
-    items: region.items.map((item) => item.kind === "component" ? { kind: item.kind, componentName: item.componentName, properties: item.properties } : { kind: item.kind, fieldItem: item.fieldItem, attributes: item.attributes })
+    items: region.items.map((item) => item.kind === "component" ? { kind: item.kind, componentName: item.componentName, identifier: item.identifier, properties: item.properties } : { kind: item.kind, fieldItem: item.fieldItem, identifier: item.identifier, attributes: item.attributes })
   };
   return createHash("sha1").update(JSON.stringify(stable)).digest("hex").slice(0, 12);
 }
@@ -313,13 +365,38 @@ function scalar(value) {
   if (value === void 0 || value === null || typeof value === "object") return void 0;
   return String(value);
 }
-function valueText(value) {
+function valueText(value, preserveList = false) {
   const direct = scalar(value);
   if (direct !== void 0) return direct;
+  if (Array.isArray(value)) {
+    const values = value.map((entry) => valueText(entry)).filter((entry) => entry !== void 0);
+    if (values.length === 0) return void 0;
+    if (preserveList) return values;
+    return mergeNamedValues(values) ?? (values.length === 1 ? values[0] : values);
+  }
   const object = objectAt(value);
   if (!object) return void 0;
   const entries = Object.entries(object).sort(([left], [right]) => left.localeCompare(right));
-  return entries.map(([key, child]) => `${key}=${valueText(child) ?? ""}`).join(";");
+  const name = scalar(object.name);
+  if (name !== void 0 && Object.prototype.hasOwnProperty.call(object, "value")) {
+    const nested = valueText(object.value);
+    return { [name]: nested ?? "" };
+  }
+  return Object.fromEntries(entries.map(([key, child]) => [key, valueText(child, ALWAYS_LIST_KEYS.has(key))]).filter((entry) => entry[1] !== void 0));
+}
+function mergeNamedValues(values) {
+  if (values.length === 0 || !values.every(isSingleEntryObject)) return void 0;
+  const entries = values.flatMap((value) => Object.entries(value));
+  if (new Set(entries.map(([key]) => key)).size !== entries.length) return void 0;
+  return Object.fromEntries(entries);
+}
+function isSingleEntryObject(value) {
+  return !Array.isArray(value) && typeof value === "object" && Object.keys(value).length === 1;
+}
+function componentLabel(item) {
+  const identity = item.identifier ? `${item.componentName}#${item.identifier}` : item.componentName;
+  const label = ["title", "label", "name"].map((key) => item.properties[key]).find((value) => typeof value === "string" && value.length > 0);
+  return label && label !== item.componentName ? `${identity} (${label})` : identity;
 }
 
 // src/render/shell.ts
@@ -355,6 +432,8 @@ function renderShell(options) {
     :root[data-theme="dark"] { color-scheme:dark; --bg:#0f172a; --surface:#111827; --surface-muted:#1f2937; --surface-selected:#1e3a5f; --border:#334155; --focus:#60a5fa; --text:#e5e7eb; --muted:#a5b4c7; --faint:#718096; --added:#4ade80; --added-fill:#123f2a; --deleted:#f87171; --deleted-fill:#4a1d23; --modified:#fbbf24; --modified-fill:#46330d; --unchanged:#64748b; --unchanged-fill:#263241; }
     @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#0f172a; --surface:#111827; --surface-muted:#1f2937; --surface-selected:#1e3a5f; --border:#334155; --focus:#60a5fa; --text:#e5e7eb; --muted:#a5b4c7; --faint:#718096; --added:#4ade80; --added-fill:#123f2a; --deleted:#f87171; --deleted-fill:#4a1d23; --modified:#fbbf24; --modified-fill:#46330d; --unchanged:#64748b; --unchanged-fill:#263241; } }
     * { 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; } header { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--surface); } h1 { margin:0 0 2px; font-size:15px; font-weight:650; } .meta { color:var(--muted); font-size:12.5px; } .header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:9px; } .filters { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; } .display-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; } button { font:inherit; cursor:pointer; } .filters button, .theme-toggle button, .panel-toggle, .panel-reopen { border:1px solid var(--border); background:var(--surface-muted); color:var(--muted); border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600; } .filters button.active, .theme-toggle button[aria-pressed="true"] { background:var(--surface-selected); border-color:var(--focus); color:var(--text); } .theme-toggle { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--border); border-radius:999px; background:var(--surface-muted); } .theme-toggle button { border:0; padding:3px 8px; } 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 { overflow:auto; padding:24px; position:relative; } .outline { max-width:1100px; margin:0 auto; } .outline-region { margin:0 0 13px; border:1px solid var(--border); border-left-width:4px; border-radius:9px; background:var(--surface); overflow:hidden; } .outline-region.added { border-left-color:var(--added); } .outline-region.deleted { border-left-color:var(--deleted); } .outline-region.modified { border-left-color:var(--modified); } .outline-region.unchanged { border-left-color:var(--unchanged); } .region-head { display:flex; align-items:center; gap:8px; padding:10px 13px; background:var(--surface-muted); font-weight:700; } .region-items { padding:7px 10px 10px 25px; } .outline-row { display:flex; align-items:center; gap:8px; margin:4px 0; padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--surface); cursor:pointer; } .outline-row:hover, .outline-row:focus-visible { border-color:var(--focus); outline:none; } .outline-row.added { background:var(--added-fill); border-color:color-mix(in srgb,var(--added) 45%,var(--border)); } .outline-row.deleted { background:var(--deleted-fill); border-color:color-mix(in srgb,var(--deleted) 45%,var(--border)); } .outline-row.modified { background:var(--modified-fill); border-color:color-mix(in srgb,var(--modified) 45%,var(--border)); } .facet-region { margin:8px 0 3px 22px; } .facet-region .region-head { font-size:12px; padding:7px 10px; } .facet-region .region-items { padding-left:14px; } .status-badge { min-width:68px; color:var(--muted); font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; } .added .status-badge { color:var(--added); } .deleted .status-badge { color:var(--deleted); } .modified .status-badge { color:var(--modified); } .summary-stat { margin-right:10px; } .summary-stat.added { color:var(--added); } .summary-stat.deleted { color:var(--deleted); } .summary-stat.modified { color:var(--modified); } .banner { margin:0 auto 16px; max-width:1100px; padding:11px 14px; border:1px solid var(--modified); border-radius:8px; background:var(--modified-fill); color:var(--modified); font-weight:750; } .panel { position:relative; min-width:0; border-left:1px solid var(--border); background:var(--surface); padding:20px; overflow:auto; } body.panel-collapsed .panel { padding:0; border-left:0; overflow:hidden; } body.panel-collapsed .panel > *:not(.panel-resizer) { display:none; } .panel-resizer { position:absolute; left:0; top:0; bottom:0; width:9px; transform:translateX(-50%); cursor:col-resize; z-index:2; } .panel-resizer:hover { background:var(--focus); opacity:.5; } .panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .panel h2 { margin:0 0 8px; font-size:15px; } .panel-toggle { border-radius:7px; padding:6px 9px; } .panel-reopen { display:none; position:absolute; top:14px; right:14px; z-index:3; border-radius:7px; } body.panel-collapsed .panel-reopen { display:block; } .panel-badge { display:inline-block; margin:0 0 15px; padding:3px 9px; border-radius:999px; background:var(--unchanged-fill); color:var(--muted); font-size:11px; font-weight:650; } .panel-badge.added { background:var(--added-fill); color:var(--added); } .panel-badge.deleted { background:var(--deleted-fill); color:var(--deleted); } .panel-badge.modified { background:var(--modified-fill); color:var(--modified); } .empty { color:var(--muted); font-size:13px; } .changes { list-style:none; margin:0; padding:0; } .changes li { margin:0 0 10px; } .change-path { display:block; margin-bottom:3px; color:var(--muted); font-size:11px; font-weight:700; } .val { padding:2px 5px; border-radius:4px; font:12px ui-monospace,Consolas,monospace; overflow-wrap:anywhere; } .val.before { color:var(--deleted); background:var(--deleted-fill); text-decoration:line-through; } .val.after { color:var(--added); background:var(--added-fill); } .arrow { color:var(--faint); margin:0 3px; } [hidden] { display:none !important; }
+    .item-note { margin-left:auto; padding:2px 6px; border:1px solid var(--border); border-radius:999px; background:var(--surface-muted); color:var(--muted); font-size:11px; white-space:nowrap; }
+    .item-notes { margin:0 0 10px; padding-left:18px; color:var(--muted); font-size:12px; }
     .view-toggle { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--border); border-radius:999px; background:var(--surface-muted); }
     .view-toggle button { border:1px solid var(--border); background:var(--surface-muted); color:var(--muted); border-radius:999px; padding:3px 8px; font-size:12px; font-weight:600; }
     .view-toggle button.active { background:var(--surface-selected); border-color:var(--focus); color:var(--text); }
@@ -374,6 +453,8 @@ function renderShell(options) {
     .wireframe-cell.modified { border-color:var(--modified); }
     .wireframe-cell.unchanged { border-color:var(--unchanged); }
     .wireframe-slot-head { display:flex; align-items:center; gap:8px; padding:9px 11px; background:var(--surface-muted); font-weight:700; }
+    .wireframe-rollup { margin-left:auto; border:1px solid var(--modified); border-radius:999px; padding:3px 8px; background:var(--modified-fill); color:var(--modified); font-size:11px; font-weight:700; white-space:nowrap; }
+    .wireframe-rollup:hover, .wireframe-rollup:focus-visible { border-color:var(--text); outline:2px solid var(--focus); outline-offset:1px; }
     .wireframe-items { min-height:56px; padding:7px 10px 10px; }
     .wireframe-empty-label { display:block; padding:8px 2px; color:var(--faint); font-style:italic; }
     .wireframe-stack-cell { padding:0; }
@@ -381,11 +462,26 @@ function renderShell(options) {
     .wireframe-removed { margin-top:18px; padding:14px; border:1px dashed var(--deleted); border-radius:9px; background:var(--surface-muted); }
     .wireframe-removed h2 { margin:0 0 10px; font-size:14px; color:var(--deleted); }
     .wireframe-removed-region { margin-top:8px; border:1px solid var(--border); border-radius:7px; overflow:hidden; }
+    .panel-back { display:block; margin:0 0 7px; border:0; padding:0; background:transparent; color:var(--muted); font-size:12px; font-weight:650; text-align:left; }
+    .panel-back:hover, .panel-back:focus-visible { color:var(--text); text-decoration:underline; outline:none; }
+    .digest { display:grid; gap:14px; }
+    .digest-group { margin:0; }
+    .digest-group-head { display:flex; justify-content:space-between; gap:8px; margin:0 0 6px; color:var(--text); font-size:13px; font-weight:750; }
+    .digest-group-count { color:var(--muted); font-weight:650; }
+    .digest-entry { display:flex; align-items:center; gap:8px; width:100%; margin:4px 0; border:1px solid var(--border); border-radius:7px; padding:7px 9px; background:var(--surface); color:var(--text); text-align:left; }
+    .digest-entry.added { background:var(--added-fill); border-color:color-mix(in srgb,var(--added) 45%,var(--border)); }
+    .digest-entry.deleted { background:var(--deleted-fill); border-color:color-mix(in srgb,var(--deleted) 45%,var(--border)); }
+    .digest-entry.modified { background:var(--modified-fill); border-color:color-mix(in srgb,var(--modified) 45%,var(--border)); }
+    .digest-entry.added .status-badge { color:var(--added); }
+    .digest-entry.deleted .status-badge { color:var(--deleted); }
+    .digest-entry.modified .status-badge { color:var(--modified); }
+    .digest-entry:hover, .digest-entry:focus-visible { border-color:var(--focus); outline:none; }
+    .digest-entry .status-badge { min-width:58px; }
   </style>
 </head>
 <body>
   <header><div><h1>${productName} \u2014 ${title}</h1><div class="meta">${options.metaHtml}</div></div><div class="header-actions"><div class="filters" aria-label="View filters"><button class="filter-button active" data-view-mode="all">All</button><button class="filter-button" data-view-mode="after">After</button><button class="filter-button" data-view-mode="before">Before</button><button class="filter-button" data-view-mode="changes">Changes only</button></div><div class="display-controls">${options.wireframeHtml === void 0 ? "" : `<div class="view-toggle" aria-label="Canvas view"><button class="view-button" data-view-mode="outline">Outline</button><button class="view-button" data-view-mode="wireframe">Wireframe</button></div>`}<div class="theme-toggle" aria-label="Theme"><button class="theme-button" data-theme-choice="system">System</button><button class="theme-button" data-theme-choice="light">Light</button><button class="theme-button" data-theme-choice="dark">Dark</button></div></div></div></header>
-  <main><section class="canvas">${options.bannerHtml ?? ""}<div class="view-canvas" data-view-canvas="outline">${options.contentHtml}</div>${options.wireframeHtml === void 0 ? "" : `<div class="view-canvas" data-view-canvas="wireframe">${options.wireframeHtml}</div>`}</section><aside class="panel" id="detail-panel"><div class="panel-resizer" id="panel-resizer"></div><div class="panel-head"><h2 id="panel-title">Select a component or field</h2><button class="panel-toggle" id="panel-toggle" type="button" aria-expanded="true" aria-label="Collapse details" title="Collapse details">\u203A</button></div><div class="panel-badge" id="panel-badge" hidden></div><div id="panel-body" class="empty">Click a component or field row to inspect its property deltas.</div></aside><button class="panel-reopen" id="panel-reopen" type="button">Show details</button></main>
+  <main><section class="canvas">${options.bannerHtml ?? ""}<div class="view-canvas" data-view-canvas="outline">${options.contentHtml}</div>${options.wireframeHtml === void 0 ? "" : `<div class="view-canvas" data-view-canvas="wireframe">${options.wireframeHtml}</div>`}</section><aside class="panel" id="detail-panel"><div class="panel-resizer" id="panel-resizer"></div><div class="panel-head"><div><button class="panel-back" id="panel-back" type="button" hidden>Back to changes</button><h2 id="panel-title">Select a component or field</h2></div><button class="panel-toggle" id="panel-toggle" type="button" aria-expanded="true" aria-label="Collapse details" title="Collapse details">\u203A</button></div><div class="panel-badge" id="panel-badge" hidden></div><div id="panel-body" class="empty">Click a component or field row to inspect its property deltas.</div></aside><button class="panel-reopen" id="panel-reopen" type="button">Show details</button></main>
   <script>(() => { const viewKey = ${JSON.stringify(VIEW_STORAGE_KEY)}; const viewButtons = [...document.querySelectorAll('.view-button')]; const hasWireframe = viewButtons.length > 0; function applyViewMode(mode) { const selected = hasWireframe && mode === "wireframe" ? "wireframe" : "outline"; document.documentElement.dataset.view = selected; viewButtons.forEach((button) => button.classList.toggle('active', button.dataset.viewMode === selected)); } viewButtons.forEach((button) => button.addEventListener('click', () => { const mode = button.dataset.viewMode; applyViewMode(mode); try { localStorage.setItem(viewKey, mode); } catch {} })); applyViewMode(document.documentElement.dataset.view ?? "outline"); })(); (() => { ${options.clientScript} })();</script>
 </body>
 </html>`;
@@ -397,7 +493,8 @@ function escapeHtml(value) {
 // src/flexipage/render-helpers.ts
 function renderItem(item) {
   const label = item.componentName ?? item.fieldItem ?? "Item";
-  return `<div class="outline-row ${item.status}" data-status="${item.status}" data-item-id="${escapeHtml2(item.id)}" tabindex="0" role="button"><span class="status-badge">${item.status}</span><span>${escapeHtml2(label)}</span></div>`;
+  const notes = item.notes?.map((note) => `<span class="item-note">${escapeHtml2(note)}</span>`).join("") ?? "";
+  return `<div class="outline-row ${item.status}" data-status="${item.status}" data-item-id="${escapeHtml2(item.id)}" data-item-path="${escapeHtml2(item.path)}" tabindex="0" role="button"><span class="status-badge">${item.status}</span><span>${escapeHtml2(label)}</span>${notes}</div>`;
 }
 function itemFacetRefs(item) {
   const value = item.after ?? item.before;
@@ -481,7 +578,38 @@ function deepFreeze(value) {
 }
 
 // src/flexipage/render-wireframe.ts
-function renderWireframe(diff, geometry) {
+function getWireframeRollups(diff) {
+  const rollups = /* @__PURE__ */ new Map();
+  const addEntry = (root, group, id) => {
+    const rollup = rollups.get(root) ?? { itemIds: [], groups: /* @__PURE__ */ new Map() };
+    rollup.itemIds.push(id);
+    const groupItems = rollup.groups.get(group) ?? [];
+    groupItems.push(id);
+    rollup.groups.set(group, groupItems);
+    rollups.set(root, rollup);
+  };
+  for (const region of diff.regions) {
+    if (!region.changes?.length) continue;
+    const segments = region.path.split(" \u203A ");
+    const root = segments[0];
+    addEntry(root, digestGroupLabel([...segments, "__region__"], root), regionChangeId(region));
+  }
+  for (const item of diff.regions.flatMap((region) => region.items)) {
+    if (item.status === "unchanged") continue;
+    const segments = item.path.split(" \u203A ");
+    const root = segments[0];
+    addEntry(root, digestGroupLabel(segments, root), item.id);
+  }
+  return Object.fromEntries([...rollups.entries()].map(([region, value]) => [region, {
+    count: value.itemIds.length,
+    itemIds: value.itemIds,
+    groups: [...value.groups.entries()].map(([label, itemIds]) => ({ label, itemIds }))
+  }]));
+}
+function regionChangeId(region) {
+  return `region:${region.name}`;
+}
+function renderWireframe(diff, geometry, rollups = getWireframeRollups(diff)) {
   if (!geometry) return void 0;
   validateTemplateGeometry(geometry);
   const slots = geometry.rows.flatMap((row) => row.flatMap(slotsInCell));
@@ -504,7 +632,9 @@ function renderWireframe(diff, geometry) {
   const renderSlot = (slot) => {
     const region = regions.get(slot);
     const status = region?.status ?? "unchanged";
-    return `<div class="wireframe-cell${region ? ` ${status}` : " wireframe-empty"}" data-region-status="${status}" data-slot="${escapeHtml2(slot)}"><div class="wireframe-slot-head"><span class="status-badge">${status}</span><span>${escapeHtml2(slot)}</span></div><div class="wireframe-items">${region ? renderRegionItems(region) : '<span class="wireframe-empty-label">Empty slot</span>'}</div></div>`;
+    const rollup = rollups[slot];
+    const rollupMarkup = rollup ? `<button class="wireframe-rollup" type="button" data-rollup-region="${escapeHtml2(slot)}" aria-label="${rollup.count} changes in ${escapeHtml2(slot)}">${rollup.count} ${rollup.count === 1 ? "change" : "changes"}</button>` : "";
+    return `<div class="wireframe-cell${region ? ` ${status}` : " wireframe-empty"}" data-region-status="${status}" data-slot="${escapeHtml2(slot)}"><div class="wireframe-slot-head"><span class="status-badge">${status}</span><span>${escapeHtml2(slot)}</span>${rollupMarkup}</div><div class="wireframe-items">${region ? renderRegionItems(region) : '<span class="wireframe-empty-label">Empty slot</span>'}</div></div>`;
   };
   const renderCell = (cell) => {
     if (isStack2(cell)) return `<div class="wireframe-cell wireframe-stack-cell"><div class="wireframe-stack">${cell.stack.map((child) => Array.isArray(child) ? renderNestedRow(child) : renderSlot(child.slot)).join("")}</div></div>`;
@@ -522,6 +652,10 @@ function renderWireframe(diff, geometry) {
     return `<div class="wireframe-removed-region" data-region-status="${region.status}"><div class="wireframe-slot-head"><span class="status-badge">${region.status}</span><span>${escapeHtml2(region.name)}</span></div><div class="wireframe-items">${renderRegionItems(region)}</div></div>`;
   }
 }
+function digestGroupLabel(segments, root) {
+  const ancestor = [...segments.slice(1, -1)].reverse().find((segment) => /\([^()]+\)$/.test(segment));
+  return ancestor?.match(/\(([^()]+)\)$/)?.[1] ?? segments.at(-2) ?? root;
+}
 function slotsInCell(cell) {
   if (!isStack2(cell)) return [cell.slot];
   return cell.stack.flatMap((child) => Array.isArray(child) ? child.flatMap(slotsInCell) : [child.slot]);
@@ -567,24 +701,45 @@ function renderOutline(diff, options = {}) {
   const metaHtml = `<span class="summary-stat added">+${summary.addedComponents} components</span><span class="summary-stat deleted">\u2212${summary.removedComponents} components</span><span class="summary-stat modified">~${summary.modifiedComponents} components</span><span class="summary-stat">+${summary.addedRegions}/\u2212${summary.removedRegions} regions</span><span class="summary-stat">${summary.changedPageAttributes} page attributes</span>`;
   const templateChange = diff.pageChanges?.find((change) => change.path === "template");
   const bannerHtml = templateChange ? `<div class="banner">Template changed: ${renderInlineValue(templateChange.before)} \u2192 ${renderInlineValue(templateChange.after)}</div>` : "";
-  const data = Object.fromEntries(diff.regions.flatMap((region) => region.items.map((item) => [item.id, item])));
-  const json = JSON.stringify({ items: data }).replace(/</g, "\\u003c");
+  const data = Object.fromEntries([
+    ...diff.regions.flatMap((region) => region.items.map((item) => [item.id, item])),
+    ...diff.regions.flatMap((region) => region.changes?.length ? [[regionChangeId(region), {
+      id: regionChangeId(region),
+      path: region.path,
+      kind: "region",
+      status: region.status,
+      componentName: region.name.split(" \u203A ").at(-1)?.match(/\(([^()]+)\)$/)?.[1] ?? region.name.split(" \u203A ").at(-1) ?? region.name,
+      changes: region.changes
+    }]] : [])
+  ]);
+  const rollups = getWireframeRollups(diff);
+  const json = JSON.stringify({ items: data, rollups }).replace(/</g, "\\u003c");
   const clientScript = `const DATA = ${json};
     const rows = [...document.querySelectorAll('.outline-row')];
     const regions = [...document.querySelectorAll('[data-region-status]')];
     const filters = [...document.querySelectorAll('.filter-button')];
-    function changed(el) { return el.dataset.regionStatus !== 'unchanged' || el.querySelector('.outline-row.added,.outline-row.deleted,.outline-row.modified') !== null; }
+    const panelTitle = document.getElementById('panel-title');
+    const panelBadge = document.getElementById('panel-badge');
+    const panelBody = document.getElementById('panel-body');
+    const panelBack = document.getElementById('panel-back');
+    let activeDigestRegion;
+    function changed(el) { return el.dataset.regionStatus !== 'unchanged' || el.querySelector('.outline-row:not(.unchanged)') !== null; }
     function applyView(mode) {
       filters.forEach((button) => button.classList.toggle('active', button.dataset.viewMode === mode));
       rows.forEach((row) => { const status = row.dataset.status; row.hidden = mode === 'after' ? status === 'deleted' : mode === 'before' ? status === 'added' : mode === 'changes' ? status === 'unchanged' : false; });
       regions.forEach((region) => { const wireframeCell = region.classList.contains('wireframe-cell'); region.hidden = mode === 'after' ? region.dataset.regionStatus === 'deleted' : mode === 'before' ? region.dataset.regionStatus === 'added' : mode === 'changes' ? !wireframeCell && !changed(region) : false; });
     }
     filters.forEach((button) => button.addEventListener('click', () => applyView(button.dataset.viewMode)));
-    function text(value) { return value === undefined ? '(missing)' : String(value); }
+    function text(value) { return value === undefined ? '(missing)' : typeof value === 'object' ? JSON.stringify(value) : String(value); }
     function escape(value) { return text(value).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;'); }
     function renderValue(before, after) { if (before === undefined) return '<span class="val after">' + escape(after) + '</span>'; if (after === undefined) return '<span class="val before">' + escape(before) + '</span>'; return '<span class="val before">' + escape(before) + '</span><span class="arrow">\u2192</span><span class="val after">' + escape(after) + '</span>'; }
-    function selectRow(row) { const item = DATA.items[row.dataset.itemId]; if (!item) return; const title = item.componentName || item.fieldItem || 'Item'; const badge = document.getElementById('panel-badge'); document.getElementById('panel-title').textContent = title; badge.hidden = false; badge.textContent = item.status; badge.className = 'panel-badge ' + item.status; const body = document.getElementById('panel-body'); if (!item.changes || item.changes.length === 0) { body.className = 'empty'; body.textContent = item.status === 'unchanged' ? 'No property changes.' : 'No property details available.'; return; } body.className = ''; body.innerHTML = '<ul class="changes">' + item.changes.map((change) => '<li><span class="change-path">' + escape(change.path) + '</span>' + renderValue(change.before, change.after) + '</li>').join('') + '</ul>'; }
+    function selectItem(id, fromDigest = false) { const item = DATA.items[id]; if (!item) return; if (!fromDigest) { activeDigestRegion = undefined; panelBack.hidden = true; } else { panelBack.hidden = false; panelBack.textContent = 'Back to ' + activeDigestRegion + ' changes'; } const title = item.componentName || item.fieldItem || 'Item'; panelTitle.textContent = title; panelBadge.hidden = false; panelBadge.textContent = item.status; panelBadge.className = 'panel-badge ' + item.status; const location = item.path ? '<div class="item-path">' + escape(item.path) + '</div>' : ''; const notes = item.notes?.length ? '<ul class="item-notes">' + item.notes.map((note) => '<li>' + escape(note) + '</li>').join('') + '</ul>' : ''; if (!item.changes || item.changes.length === 0) { if (item.status === 'unchanged' && !notes) { panelBody.className = 'empty'; panelBody.textContent = 'No property changes.'; } else { panelBody.className = 'empty'; panelBody.innerHTML = location + notes + '<div>' + (item.status === 'unchanged' ? 'No property changes.' : 'No property details available.') + '</div>'; } return; } panelBody.className = ''; panelBody.innerHTML = location + notes + '<ul class="changes">' + item.changes.map((change) => '<li><span class="change-path">' + escape(change.path) + '</span>' + renderValue(change.before, change.after) + '</li>').join('') + '</ul>'; }
+    function selectRow(row) { selectItem(row.dataset.itemId); }
+    function digestEntry(id) { const item = DATA.items[id]; if (!item) return ''; const label = item.componentName || item.fieldItem || 'Item'; return '<button class="digest-entry ' + item.status + '" type="button" data-digest-item-id="' + escape(id) + '"><span class="status-badge ' + item.status + '">' + escape(item.status) + '</span><span>' + escape(label) + '</span></button>'; }
+    function showDigest(regionName) { const rollup = DATA.rollups[regionName]; if (!rollup) return; document.body.classList.remove('panel-collapsed'); document.getElementById('panel-toggle')?.setAttribute('aria-expanded','true'); activeDigestRegion = regionName; panelTitle.textContent = regionName + ' changes'; panelBadge.hidden = true; panelBack.hidden = true; panelBody.className = ''; panelBody.innerHTML = '<div class="digest">' + rollup.groups.map((group) => '<section class="digest-group"><div class="digest-group-head"><span>' + escape(group.label) + '</span><span class="digest-group-count">' + group.itemIds.length + ' ' + (group.itemIds.length === 1 ? 'change' : 'changes') + '</span></div>' + group.itemIds.map(digestEntry).join('') + '</section>').join('') + '</div>'; panelBody.querySelectorAll('[data-digest-item-id]').forEach((entry) => entry.addEventListener('click', () => selectItem(entry.dataset.digestItemId, true))); }
     rows.forEach((row) => { row.addEventListener('click', () => selectRow(row)); row.addEventListener('keydown', (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); selectRow(row); } }); });
+    document.querySelectorAll('.wireframe-rollup').forEach((button) => button.addEventListener('click', (event) => { event.stopPropagation(); showDigest(button.dataset.rollupRegion); }));
+    panelBack.addEventListener('click', () => { if (activeDigestRegion) showDigest(activeDigestRegion); });
     const themeButtons = [...document.querySelectorAll('.theme-button')];
     function applyTheme(theme) { document.documentElement.dataset.theme = theme; themeButtons.forEach((button) => button.setAttribute('aria-pressed', button.dataset.themeChoice === theme ? 'true' : 'false')); }
     function storedTheme() { try { const value = localStorage.getItem(${JSON.stringify("flow-delta-theme")}); return ['system','light','dark'].includes(value) ? value : 'system'; } catch { return 'system'; } }
@@ -592,7 +747,7 @@ function renderOutline(diff, options = {}) {
     applyTheme(storedTheme()); applyView('all');
     const panelToggle = document.getElementById('panel-toggle'); const panelReopen = document.getElementById('panel-reopen'); panelToggle.addEventListener('click', () => { document.body.classList.add('panel-collapsed'); panelToggle.setAttribute('aria-expanded','false'); }); panelReopen.addEventListener('click', () => { document.body.classList.remove('panel-collapsed'); panelToggle.setAttribute('aria-expanded','true'); });
     const resizer = document.getElementById('panel-resizer'); let resizeStart; resizer.addEventListener('pointerdown', (event) => { resizeStart = { x:event.clientX, width:document.getElementById('detail-panel').getBoundingClientRect().width }; resizer.setPointerCapture(event.pointerId); }); resizer.addEventListener('pointermove', (event) => { if (!resizeStart) return; document.documentElement.style.setProperty('--panel-width', Math.max(300, resizeStart.width - (event.clientX - resizeStart.x)) + 'px'); }); resizer.addEventListener('pointerup', () => { resizeStart = undefined; });`;
-  const wireframe = renderWireframe(diff, getTemplateGeometry(options.template));
+  const wireframe = renderWireframe(diff, getTemplateGeometry(options.template), rollups);
   return renderShell({ title: diff.pageName, productName: "FlexiPageDelta", metaHtml, bannerHtml, contentHtml: content, wireframeHtml: wireframe ?? void 0, defaultView: wireframe ? "wireframe" : "outline", clientScript });
 }
 function renderInlineValue(value) {

package/package.json

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