@syntax-syllogism/flow-delta 0.5.1 → 0.6.0

package/dist/flexipage-cli.js

@@ -0,0 +1,704 @@
+#!/usr/bin/env node
+
+// src/flexipage-cli.ts
+import { mkdirSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { execFileSync as execFileSync2 } from "node:child_process";
+import { parseArgs } from "node:util";
+
+// src/io/read-metadata.ts
+import { existsSync, readFileSync } from "node:fs";
+import { execFileSync } from "node:child_process";
+function readMetadataFromFile(path) {
+  if (!path.endsWith(".xml")) {
+    throw new Error(`Expected an XML file, got ${path}`);
+  }
+  if (!existsSync(path)) {
+    throw new Error(`File not found: ${path}`);
+  }
+  return readFileSync(path, "utf8");
+}
+function readMetadataFromGit(repo, ref, filePath) {
+  try {
+    return execFileSync("git", ["-C", repo, "show", `${ref}:${filePath}`], {
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+  } catch (error) {
+    const message = String(error.stderr ?? error.message ?? "");
+    if (message.includes("does not exist in") || message.includes("exists on disk, but not in") || message.includes("pathspec") || message.includes("fatal: path")) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+// src/util/file-name.ts
+function safeFileName(value) {
+  return value.replace(/[^a-zA-Z0-9._-]+/g, "_");
+}
+
+// src/util/is-main-module.ts
+import { realpathSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+function isMainModule(metaUrl, argvPath = process.argv[1]) {
+  if (!argvPath) {
+    return false;
+  }
+  try {
+    return realpathSync(fileURLToPath(metaUrl)) === realpathSync(argvPath);
+  } catch {
+    return false;
+  }
+}
+
+// src/diff/deep-diff.ts
+function deepDiff(before, after, path = "") {
+  if (Object.is(before, after)) {
+    return [];
+  }
+  if (Array.isArray(before) && Array.isArray(after)) {
+    const changes = [];
+    const shared = Math.min(before.length, after.length);
+    for (let index = 0; index < shared; index += 1) {
+      changes.push(...deepDiff(before[index], after[index], joinPath(path, `[${index}]`)));
+    }
+    for (let index = shared; index < before.length; index += 1) {
+      changes.push({ path: joinPath(path, `[${index}]`), before: before[index], after: void 0 });
+    }
+    for (let index = shared; index < after.length; index += 1) {
+      changes.push({ path: joinPath(path, `[${index}]`), before: void 0, after: after[index] });
+    }
+    return changes;
+  }
+  if (isPlainObject(before) && isPlainObject(after)) {
+    const changes = [];
+    const keys = /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)]);
+    for (const key of [...keys].sort()) {
+      if (!(key in before)) {
+        changes.push({ path: joinPath(path, key), before: void 0, after: after[key] });
+        continue;
+      }
+      if (!(key in after)) {
+        changes.push({ path: joinPath(path, key), before: before[key], after: void 0 });
+        continue;
+      }
+      changes.push(...deepDiff(before[key], after[key], joinPath(path, key)));
+    }
+    return changes;
+  }
+  return [{ path, before, after }];
+}
+function isPlainObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function joinPath(base, segment) {
+  if (!base) {
+    return segment;
+  }
+  return segment.startsWith("[") ? `${base}${segment}` : `${base}.${segment}`;
+}
+
+// src/flexipage/diff-page.ts
+var HEADER_ORDER = ["masterLabel", "template", "sobjectType", "type", "parentFlexiPage", "description"];
+function diffPage(oldModel, newModel) {
+  const oldRegions = new Map(oldModel.regions.map((region) => [region.name, region]));
+  const newRegions = new Map(newModel.regions.map((region) => [region.name, region]));
+  const names = [.../* @__PURE__ */ new Set([...newModel.regions.map((region) => region.name), ...oldModel.regions.map((region) => region.name)])];
+  const regions = names.map((name) => diffRegion(name, oldRegions.get(name), newRegions.get(name)));
+  const pageChanges = oldModel.header && newModel.header && Object.keys(oldModel.header).length > 0 && Object.keys(newModel.header).length > 0 ? deepDiff(oldModel.header, newModel.header).sort((left, right) => orderOf(left.path) - orderOf(right.path)) : [];
+  const items = regions.flatMap((region) => region.items);
+  return {
+    pageName: selectPageName(oldModel, newModel),
+    kind: "flexipage",
+    summary: {
+      addedComponents: items.filter((item) => item.status === "added").length,
+      removedComponents: items.filter((item) => item.status === "deleted").length,
+      modifiedComponents: items.filter((item) => item.status === "modified").length,
+      unchangedComponents: items.filter((item) => item.status === "unchanged").length,
+      addedRegions: regions.filter((region) => region.status === "added").length,
+      removedRegions: regions.filter((region) => region.status === "deleted").length,
+      modifiedRegions: regions.filter((region) => (region.changes?.length ?? 0) > 0).length,
+      changedPageAttributes: pageChanges.length
+    },
+    ...pageChanges.length ? { pageChanges } : {},
+    regions
+  };
+}
+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}`)) };
+  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 };
+}
+function diffItems(oldItems, newItems, regionName) {
+  const pairs = lcs(oldItems, newItems);
+  const output = [];
+  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}`));
+    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++}`));
+  return output;
+}
+function classifyItem(before, after, id) {
+  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);
+  return changes.length ? { ...base, status: "modified", changes, before, after } : { ...base, status: "unchanged", after };
+}
+function lcs(oldItems, newItems) {
+  const table = Array.from({ length: oldItems.length + 1 }, () => Array(newItems.length + 1).fill(0));
+  for (let oldIndex2 = oldItems.length - 1; oldIndex2 >= 0; oldIndex2 -= 1) {
+    for (let newIndex2 = newItems.length - 1; newIndex2 >= 0; newIndex2 -= 1) {
+      table[oldIndex2][newIndex2] = itemKey(oldItems[oldIndex2]) === itemKey(newItems[newIndex2]) ? table[oldIndex2 + 1][newIndex2 + 1] + 1 : Math.max(table[oldIndex2 + 1][newIndex2], table[oldIndex2][newIndex2 + 1]);
+    }
+  }
+  const matches = [];
+  let oldIndex = 0;
+  let newIndex = 0;
+  while (oldIndex < oldItems.length && newIndex < newItems.length) {
+    if (itemKey(oldItems[oldIndex]) === itemKey(newItems[newIndex])) {
+      matches.push([oldIndex++, newIndex++]);
+    } else if (table[oldIndex + 1][newIndex] >= table[oldIndex][newIndex + 1]) {
+      oldIndex += 1;
+    } else {
+      newIndex += 1;
+    }
+  }
+  return matches;
+}
+function itemKey(item) {
+  return item.kind === "component" ? `component:${item.componentName}` : `field:${item.fieldItem}`;
+}
+function orderOf(path) {
+  const index = HEADER_ORDER.indexOf(path);
+  return index >= 0 ? index : HEADER_ORDER.length;
+}
+function selectPageName(oldModel, newModel) {
+  return newModel.pageName !== "(unknown)" ? newModel.pageName : oldModel.pageName;
+}
+
+// src/flexipage/parse.ts
+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"];
+async function parseFlexiPage(xml) {
+  const parsed = await new Parser({ explicitArray: true, trim: true, normalize: false }).parseStringPromise(xml);
+  const page = parsed.FlexiPage;
+  if (!page) {
+    throw new Error("Expected a FlexiPage root element");
+  }
+  const header = {};
+  for (const key of HEADER_KEYS) {
+    const value = scalar(page[key]);
+    if (value !== void 0) header[key] = value;
+  }
+  const template = objectAt(page.template)?.name;
+  if (template !== void 0) header.template = scalar(template);
+  const fullName = scalar(page.fullName);
+  const regions = arrayAt(page.flexiPageRegions).map(parseRegion);
+  return canonicalize({
+    pageName: header.masterLabel ?? fullName ?? "(unknown)",
+    header,
+    regions
+  });
+}
+function parseRegion(value) {
+  const region = objectValue(value);
+  const type = scalar(region.type) === "Facet" ? "Facet" : "Region";
+  const mode = scalar(region.mode);
+  return {
+    name: scalar(region.name) ?? "(unnamed)",
+    type,
+    ...mode === "Replace" || mode === "Append" || mode === "Prepend" ? { mode } : {},
+    items: arrayAt(region.itemInstances).flatMap(parseItemInstance)
+  };
+}
+function parseItemInstance(value) {
+  const instance = objectValue(value);
+  const component = objectAt(instance.componentInstance);
+  if (component) {
+    const properties = arrayAt(component.componentInstanceProperties).map((entry) => objectValue(entry)).map((entry) => [scalar(entry.name), valueText(entry.value)]).filter((entry) => entry[0] !== void 0 && entry[1] !== void 0).sort(([left], [right]) => left.localeCompare(right));
+    return [{
+      kind: "component",
+      componentName: scalar(component.componentName) ?? "(unnamed component)",
+      properties: Object.fromEntries(properties),
+      facetRefs: []
+    }];
+  }
+  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)
+    );
+    return [{
+      kind: "field",
+      fieldItem: scalar(field.fieldItem) ?? "(unnamed field)",
+      attributes
+    }];
+  }
+  return [];
+}
+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 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]));
+      return {
+        ...item,
+        properties,
+        facetRefs: Object.values(properties).filter((value) => rawRegions.some((candidate) => candidate.type === "Facet" && (canonicalNames.get(candidate.name) ?? candidate.name) === value))
+      };
+    })
+  }));
+  return { ...model, regions };
+}
+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 })
+  };
+  return createHash("sha1").update(JSON.stringify(stable)).digest("hex").slice(0, 12);
+}
+function arrayAt(value) {
+  return Array.isArray(value) ? value : [];
+}
+function objectAt(value) {
+  const first = Array.isArray(value) ? value[0] : value;
+  return first && typeof first === "object" && !Array.isArray(first) ? first : void 0;
+}
+function objectValue(value) {
+  return objectAt(value) ?? {};
+}
+function scalar(value) {
+  if (Array.isArray(value)) return scalar(value[0]);
+  if (value === void 0 || value === null || typeof value === "object") return void 0;
+  return String(value);
+}
+function valueText(value) {
+  const direct = scalar(value);
+  if (direct !== void 0) return direct;
+  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(";");
+}
+
+// src/render/shell.ts
+var THEME_STORAGE_KEY = "flow-delta-theme";
+var VIEW_STORAGE_KEY = "flow-delta-view";
+function renderShell(options) {
+  const title = escapeHtml(options.title);
+  const productName = escapeHtml(options.productName ?? "FlowDelta");
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${title}</title>
+  <script>
+    (() => {
+      const key = ${JSON.stringify(THEME_STORAGE_KEY)};
+      const allowed = new Set(["system", "light", "dark"]);
+      let theme = "system";
+      try { const stored = localStorage.getItem(key); if (allowed.has(stored)) theme = stored; } catch {}
+      document.documentElement.dataset.theme = theme;
+    })();${options.wireframeHtml === void 0 ? "" : `
+    (() => {
+      const key = ${JSON.stringify(VIEW_STORAGE_KEY)};
+      const allowed = new Set(["outline", "wireframe"]);
+      let view = ${JSON.stringify(options.defaultView ?? "outline")};
+      try { const stored = localStorage.getItem(key); if (allowed.has(stored)) view = stored; } catch {}
+      document.documentElement.dataset.view = view;
+    })();`}
+  </script>
+  <style>
+    :root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --bg:#f5f7fb; --surface:#fff; --surface-muted:#f8fafc; --surface-selected:#eff6ff; --border:#e3e8ef; --focus:#93c5fd; --text:#1f2937; --muted:#64748b; --faint:#94a3b8; --added:#16a34a; --added-fill:#dcfce7; --deleted:#dc2626; --deleted-fill:#fee2e2; --modified:#d97706; --modified-fill:#fef3c7; --unchanged:#94a3b8; --unchanged-fill:#e9edf3; --panel-width:34vw; }
+    :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; }
+    .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); }
+    .view-canvas { min-height:100%; }
+    /* The head script stamps data-view before first paint, so the active canvas is
+       correct on the first frame. Without JS no attribute is set and the outline shows. */
+    [data-view-canvas="wireframe"] { display:none; }
+    :root[data-view="wireframe"] [data-view-canvas="wireframe"] { display:block; }
+    :root[data-view="wireframe"] [data-view-canvas="outline"] { display:none; }
+    .wireframe { max-width:1100px; margin:0 auto; }
+    .wireframe-caption { margin:0 0 12px; color:var(--muted); font-size:12px; font-weight:650; }
+    .wireframe-grid { display:grid; gap:12px; }
+    .wireframe-grid-row, .wireframe-stack-row { display:grid; gap:12px; align-items:stretch; }
+    .wireframe-cell { min-width:0; border:1px solid var(--border); border-radius:9px; background:var(--surface); overflow:hidden; }
+    .wireframe-cell.added { border-color:var(--added); }
+    .wireframe-cell.deleted { border-color:var(--deleted); }
+    .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-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; }
+    .wireframe-stack { display:grid; gap:12px; height:100%; }
+    .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; }
+  </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>
+  <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>`;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// 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>`;
+}
+function itemFacetRefs(item) {
+  const value = item.after ?? item.before;
+  return value?.kind === "component" ? value.facetRefs : [];
+}
+function escapeHtml2(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/flexipage/template-geometry.ts
+var headerAndMain = {
+  label: "Header and One Region",
+  rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "main", widthPercent: 100 }]]
+};
+var singleRegion = {
+  label: "One Region",
+  rows: [[{ slot: "main", widthPercent: 100 }]]
+};
+var headerThreeColumns = {
+  label: "Header and Three Regions",
+  rows: [
+    [{ slot: "header", widthPercent: 100 }],
+    [{ slot: "leftsidebar", widthPercent: 33.34 }, { slot: "main", widthPercent: 33.33 }, { slot: "rightsidebar", widthPercent: 33.33 }]
+  ]
+};
+var registry = {
+  recordHomeTemplateDesktop: { label: "Header and Right Sidebar", rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "main", widthPercent: 67 }, { slot: "sidebar", widthPercent: 33 }]] },
+  recordHomeLeftSidebarTemplateDesktop: { label: "Header and Left Sidebar", rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "sidebar", widthPercent: 33 }, { slot: "main", widthPercent: 67 }]] },
+  recordHomeTwoColEqualHeaderTemplateDesktop: { label: "Header and Two Equal Regions", rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "leftcol", widthPercent: 50 }, { slot: "rightcol", widthPercent: 50 }]] },
+  recordHomeThreeColHeaderTemplateDesktop: headerThreeColumns,
+  recordHomeSingleColTemplateDesktop: headerAndMain,
+  recordHomeSimpleViewTemplate: headerAndMain,
+  recordHomeWithSubheaderTemplateDesktop: { label: "Header, Subheader, Right Sidebar", rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "subheader", widthPercent: 100 }], [{ slot: "main", widthPercent: 67 }, { slot: "sidebar", widthPercent: 33 }]] },
+  recordHomeWithSubheaderLeftSidebarTemplateDesktop: { label: "Header, Subheader, Left Sidebar", rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "subheader", widthPercent: 100 }], [{ slot: "sidebar", widthPercent: 33 }, { slot: "main", widthPercent: 67 }]] },
+  recordHomePinnedHeaderTemplateDesktop: headerThreeColumns,
+  recordPrintableViewTemplate: { label: "Printable View", rows: [[{ slot: "header", widthPercent: 100 }], [{ slot: "main", widthPercent: 100 }], [{ slot: "footer", widthPercent: 100 }]] },
+  defaultAppHomeTemplate: singleRegion,
+  appHomeTemplateTwoColumns: { label: "Two Regions", rows: [[{ slot: "column1", widthPercent: 50 }, { slot: "column2", widthPercent: 50 }]] },
+  appHomeTemplateThreeColumns: { label: "Three Regions", rows: [[{ slot: "region1", widthPercent: 33.34 }, { slot: "region2", widthPercent: 33.33 }, { slot: "region3", widthPercent: 33.33 }]] },
+  appHomeTemplateTwoColumnsStacked: { label: "Main Region and Right Sidebar", rows: [[{ slot: "region1", widthPercent: 67 }, { widthPercent: 33, stack: [{ slot: "region2" }, { slot: "region3" }] }]] },
+  appHomeTemplateHeaderTwoColumns15LeftSidebar: { label: "Header and Left Sidebar with 15% width", rows: [[{ slot: "region1", widthPercent: 100 }], [{ slot: "region2", widthPercent: 15 }, { slot: "region3", widthPercent: 85 }]] },
+  appHomeTemplateHeaderTwoColumns: { label: "Header and Two Regions", rows: [[{ slot: "region1", widthPercent: 100 }], [{ slot: "region2", widthPercent: 67 }, { slot: "region3", widthPercent: 33 }]] },
+  appHomeTemplateHeaderTwoColumnsEqualWidth: { label: "Header and Two Equal Regions", rows: [[{ slot: "region1", widthPercent: 100 }], [{ slot: "region2", widthPercent: 50 }, { slot: "region3", widthPercent: 50 }]] },
+  appHomeTemplateHeaderTwoColumnsLeftSidebar: { label: "Header and Left Sidebar", rows: [[{ slot: "region1", widthPercent: 100 }], [{ slot: "region2", widthPercent: 33 }, { slot: "region3", widthPercent: 67 }]] },
+  "home:desktopTemplate": { label: "Standard Home Page", rows: [[{ widthPercent: 67, stack: [{ slot: "top" }, [{ slot: "bottomLeft", widthPercent: 50 }, { slot: "bottomRight", widthPercent: 50 }]] }, { slot: "sidebar", widthPercent: 33 }]] },
+  "industries_common:homeTemplateOneRegion": singleRegion
+};
+var baseRegistry = registry;
+var canonicalRegistry = {};
+for (const [template, geometry] of Object.entries(baseRegistry)) {
+  const canonical = template.includes(":") ? template : `flexipage:${template}`;
+  canonicalRegistry[canonical] = geometry;
+  if (canonical.startsWith("flexipage:")) canonicalRegistry[template] = geometry;
+}
+for (const [template, geometry] of Object.entries(canonicalRegistry)) validateTemplateGeometry(geometry, template);
+var TEMPLATE_GEOMETRY = deepFreeze(canonicalRegistry);
+function getTemplateGeometry(template) {
+  return template === void 0 ? void 0 : TEMPLATE_GEOMETRY[template];
+}
+function validateTemplateGeometry(geometry, template = "template") {
+  if (geometry.rows.length === 0 || geometry.rows.some((row) => row.length === 0 || !validRow(row))) {
+    throw new Error(`Invalid geometry for ${template}: each row must contain positive widths totaling 100%`);
+  }
+}
+function validRow(row) {
+  const total = row.reduce((sum, cell) => sum + cellWidth(cell), 0);
+  return row.every((cell) => cellWidth(cell) > 0 && (isStack(cell) ? cell.stack.length > 0 && cell.stack.every((child) => Array.isArray(child) ? validRow(child) : true) : true)) && total > 99.9 && total < 100.1;
+}
+function cellWidth(cell) {
+  return cell.widthPercent ?? 100;
+}
+function isStack(cell) {
+  return "stack" in cell;
+}
+function deepFreeze(value) {
+  if (value !== null && typeof value === "object" && !Object.isFrozen(value)) {
+    Object.freeze(value);
+    for (const child of Object.values(value)) deepFreeze(child);
+  }
+  return value;
+}
+
+// src/flexipage/render-wireframe.ts
+function renderWireframe(diff, geometry) {
+  if (!geometry) return void 0;
+  validateTemplateGeometry(geometry);
+  const slots = geometry.rows.flatMap((row) => row.flatMap(slotsInCell));
+  const slotNames = new Set(slots);
+  const currentRegions = diff.regions.filter((region) => region.type === "Region" && region.status !== "deleted");
+  if (slots.length !== slotNames.size || currentRegions.some((region) => !slotNames.has(region.name))) return void 0;
+  const regions = new Map(diff.regions.map((region) => [region.name, region]));
+  const referenced = /* @__PURE__ */ new Set();
+  for (const region of diff.regions) for (const item of region.items) itemFacetRefs(item).forEach((ref) => referenced.add(ref));
+  const renderedFacets = /* @__PURE__ */ new Set();
+  const renderRegionItems = (region) => region.items.map((item) => {
+    const nested = itemFacetRefs(item).map((ref) => {
+      const facet = regions.get(ref);
+      if (!facet || renderedFacets.has(facet.name)) return "";
+      renderedFacets.add(facet.name);
+      return renderFacet(facet);
+    }).join("");
+    return renderItem(item) + nested;
+  }).join("");
+  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 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>`;
+    return renderSlot(cell.slot);
+  };
+  const renderRow = (row, className = "wireframe-grid-row") => `<div class="${className}" style="grid-template-columns:${row.map((cell) => `${cellWidth2(cell)}fr`).join(" ")}">${row.map(renderCell).join("")}</div>`;
+  const renderNestedRow = (row) => renderRow(row, "wireframe-stack-row");
+  const grid = geometry.rows.map((row) => renderRow(row)).join("");
+  const removed = diff.regions.filter((region) => region.type === "Region" && region.status === "deleted" && !slotNames.has(region.name));
+  const unplacedFacets = diff.regions.filter((region) => region.type === "Facet" && !referenced.has(region.name));
+  const removedMarkup = removed.length === 0 ? "" : `<section class="wireframe-removed"><h2>Removed (not in current template)</h2>${removed.map(renderAppendixRegion).join("")}</section>`;
+  const facetMarkup = unplacedFacets.length === 0 ? "" : `<section class="wireframe-unplaced"><h2>Unplaced facet regions</h2>${unplacedFacets.map(renderAppendixRegion).join("")}</section>`;
+  return `<div class="wireframe" data-template-label="${escapeHtml2(geometry.label)}"><div class="wireframe-caption">Template geometry: ${escapeHtml2(geometry.label)}</div><div class="wireframe-grid">${grid}</div>${removedMarkup}${facetMarkup}</div>`;
+  function renderAppendixRegion(region) {
+    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 slotsInCell(cell) {
+  if (!isStack2(cell)) return [cell.slot];
+  return cell.stack.flatMap((child) => Array.isArray(child) ? child.flatMap(slotsInCell) : [child.slot]);
+}
+function cellWidth2(cell) {
+  return cell.widthPercent ?? 100;
+}
+function isStack2(cell) {
+  return "stack" in cell;
+}
+function renderFacet(region) {
+  return `<section class="facet-region" data-region-status="${region.status}"><div class="region-head"><span class="status-badge">${region.status}</span><span>${escapeHtml2(region.name)}</span></div><div class="region-items">${region.items.map(renderItem).join("")}</div></section>`;
+}
+
+// src/flexipage/render-outline.ts
+function renderOutline(diff, options = {}) {
+  const referenced = /* @__PURE__ */ new Set();
+  for (const region of diff.regions) {
+    for (const item of region.items) {
+      const value = item.after ?? item.before;
+      if (value?.kind === "component") value.facetRefs.forEach((ref) => referenced.add(ref));
+    }
+  }
+  const regions = new Map(diff.regions.map((region) => [region.name, region]));
+  const rendered = /* @__PURE__ */ new Set();
+  const renderRegion = (region, facet = false) => {
+    if (rendered.has(region.name)) return "";
+    rendered.add(region.name);
+    const items = region.items.map((item) => {
+      const nested = itemFacetRefs(item).map((ref) => {
+        const child = regions.get(ref);
+        return child ? renderRegion(child, true) : "";
+      }).join("");
+      return renderItem(item) + nested;
+    }).join("");
+    return `<section class="outline-region ${facet ? "facet-region " : ""}${region.status}" data-region-status="${region.status}">
+      <div class="region-head"><span class="status-badge">${region.status}</span><span>${escapeHtml2(region.name)}</span></div>
+      <div class="region-items">${items}</div>
+    </section>`;
+  };
+  const content = [...diff.regions.filter((region) => !referenced.has(region.name)), ...diff.regions.filter((region) => referenced.has(region.name))].map((region) => renderRegion(region)).join("");
+  const summary = diff.summary;
+  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 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; }
+    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 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>'; }
+    rows.forEach((row) => { row.addEventListener('click', () => selectRow(row)); row.addEventListener('keydown', (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); selectRow(row); } }); });
+    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'; } }
+    themeButtons.forEach((button) => button.addEventListener('click', () => { const theme = button.dataset.themeChoice; applyTheme(theme); try { localStorage.setItem(${JSON.stringify("flow-delta-theme")}, theme); } catch {} }));
+    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));
+  return renderShell({ title: diff.pageName, productName: "FlexiPageDelta", metaHtml, bannerHtml, contentHtml: content, wireframeHtml: wireframe ?? void 0, defaultView: wireframe ? "wireframe" : "outline", clientScript });
+}
+function renderInlineValue(value) {
+  return escapeHtml2(value === void 0 ? "(missing)" : String(value));
+}
+
+// src/flexipage-cli.ts
+var CLI_USAGE = `Usage:
+  flexipage-delta --old <old.flexipage-meta.xml> --new <new.flexipage-meta.xml> [--out dir] [--json]
+  flexipage-delta --from <ref> --to <ref> --repo <path> [--path <glob>] [--changed-only] [--out dir] [--json]`;
+async function main(argv = process.argv.slice(2)) {
+  const parsed = parseArgs({
+    args: argv,
+    options: {
+      old: { type: "string" },
+      new: { type: "string" },
+      from: { type: "string" },
+      to: { type: "string" },
+      repo: { type: "string" },
+      path: { type: "string" },
+      out: { type: "string" },
+      json: { type: "boolean" },
+      "changed-only": { type: "boolean" },
+      help: { type: "boolean", short: "h" }
+    },
+    allowPositionals: false
+  });
+  const options = parsed.values;
+  if (options.help) {
+    console.log(CLI_USAGE);
+    return;
+  }
+  const outDir = resolve(options.out ?? "./flexipage-delta-out");
+  mkdirSync(outDir, { recursive: true });
+  try {
+    if (options.old || options.new) {
+      if (!options.old || !options.new) throw new Error("File mode requires both --old and --new");
+      await runFileMode(options.old, options.new, outDir, Boolean(options.json));
+      return;
+    }
+    if (options.from || options.to || options.repo || options.path) {
+      if (!options.from || !options.to || !options.repo) throw new Error("Git mode requires --from, --to, and --repo");
+      await runGitMode(options.repo, options.from, options.to, options.path ?? "force-app/**/*.flexipage-meta.xml", outDir, Boolean(options.json), Boolean(options["changed-only"]));
+      return;
+    }
+    throw new Error("Specify either --old/--new or --from/--to/--repo");
+  } catch (error) {
+    console.error(error.message);
+    process.exitCode = 1;
+  }
+}
+async function runFileMode(oldPath, newPath, outDir, writeJson) {
+  await writeArtifacts(await parseFlexiPage(readMetadataFromFile(oldPath)), await parseFlexiPage(readMetadataFromFile(newPath)), outDir, writeJson);
+}
+async function runGitMode(repo, from, to, pattern, outDir, writeJson, changedOnly) {
+  let failed = false;
+  for (const filePath of discoverGitFiles(repo, from, to, pattern, changedOnly)) {
+    try {
+      const oldXml = readMetadataFromGit(repo, from, filePath);
+      const newXml = readMetadataFromGit(repo, to, filePath);
+      await writeArtifacts(oldXml ? await parseFlexiPage(oldXml) : emptyPage(), newXml ? await parseFlexiPage(newXml) : emptyPage(), outDir, writeJson, filePath);
+    } catch (error) {
+      failed = true;
+      console.error(`${filePath}: ${error.message}`);
+    }
+  }
+  if (failed) process.exitCode = 1;
+}
+function emptyPage() {
+  return { pageName: "(unknown)", header: {}, regions: [] };
+}
+async function writeArtifacts(oldModel, newModel, outDir, writeJson, sourcePath) {
+  const diff = diffPage(oldModel, newModel);
+  const stem = safeFileName(diff.pageName === "(unknown)" ? sourcePath ?? "flexipage" : diff.pageName);
+  writeFileSync(join(outDir, `${stem}.html`), renderOutline(diff, { template: newModel.header.template }), "utf8");
+  if (writeJson) writeFileSync(join(outDir, `${stem}.diff.json`), JSON.stringify(diff, null, 2), "utf8");
+  console.log(`${diff.pageName}: components +${diff.summary.addedComponents}/\u2212${diff.summary.removedComponents}/~${diff.summary.modifiedComponents}; regions +${diff.summary.addedRegions}/\u2212${diff.summary.removedRegions}/~${diff.summary.modifiedRegions}; page attributes ${diff.summary.changedPageAttributes}`);
+}
+function discoverGitFiles(repo, from, to, pattern, changedOnly) {
+  const files = changedOnly ? gitFiles(repo, ["diff", "--name-only", "--diff-filter=ACMRD", from, to, "--", pattern]) : [.../* @__PURE__ */ new Set([...gitFiles(repo, ["ls-tree", "-r", "--name-only", from]), ...gitFiles(repo, ["ls-tree", "-r", "--name-only", to])])];
+  const matcher = globToRegExp(pattern.replaceAll("\\", "/"));
+  return files.filter((file) => matcher.test(file)).sort();
+}
+function gitFiles(repo, args) {
+  return execFileSync2("git", ["-C", repo, ...args], { encoding: "utf8", stdio: ["ignore", "pipe", "pipe"] }).split("\n").map((line) => line.trim()).filter(Boolean);
+}
+function globToRegExp(pattern) {
+  let source = "^";
+  for (let index = 0; index < pattern.length; index += 1) {
+    const char = pattern[index];
+    if (char === "*") {
+      if (pattern[index + 1] === "*") {
+        source += ".*";
+        index += 1;
+      } else source += "[^/]*";
+      continue;
+    }
+    if (char === "?") {
+      source += "[^/]";
+      continue;
+    }
+    source += "\\^$+?.()|{}[]".includes(char) ? `\\${char}` : char;
+  }
+  return new RegExp(`${source}$`);
+}
+if (isMainModule(import.meta.url)) void main();
+export {
+  main
+};