@pantheon-systems/puck-css 0.4.0

package/dist/versioning/utils/diff.js

@@ -0,0 +1,318 @@
+/**
+ * Diff Utility
+ *
+ * Functions for comparing Puck data structures to identify changes.
+ */
+/**
+ * Generates a unique key for a component based on its ID and path.
+ */
+function getComponentKey(component, path) {
+    return `${path.join('/')}/${component.props.id}`;
+}
+/**
+ * Flattens a Puck data structure into a map of component ID to component data.
+ */
+function flattenComponents(data) {
+    const result = new Map();
+    // Process main content (handle undefined/null content)
+    const content = data?.content ?? [];
+    for (const component of content) {
+        const path = ['content'];
+        result.set(getComponentKey(component, path), { component, path });
+    }
+    // Process zones
+    if (data?.zones) {
+        for (const [zoneName, components] of Object.entries(data.zones)) {
+            for (const component of components ?? []) {
+                const path = ['zones', zoneName];
+                result.set(getComponentKey(component, path), { component, path });
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Deeply compares two objects for equality.
+ */
+function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    if (typeof a !== typeof b)
+        return false;
+    if (a === null || b === null)
+        return a === b;
+    if (typeof a !== 'object')
+        return a === b;
+    const aObj = a;
+    const bObj = b;
+    const aKeys = Object.keys(aObj);
+    const bKeys = Object.keys(bObj);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (!bKeys.includes(key))
+            return false;
+        if (!deepEqual(aObj[key], bObj[key]))
+            return false;
+    }
+    return true;
+}
+/**
+ * Compares two Puck data structures and returns a list of component differences.
+ *
+ * @param before - The original Puck data
+ * @param after - The modified Puck data
+ * @returns Array of component differences
+ *
+ * @example
+ * ```typescript
+ * const diffs = diffPuckData(oldData, newData);
+ * for (const diff of diffs) {
+ *   if (diff.type === 'added') {
+ *     console.log(`Added: ${diff.componentType}`);
+ *   }
+ * }
+ * ```
+ */
+export function diffPuckData(before, after) {
+    const diffs = [];
+    const beforeComponents = flattenComponents(before);
+    const afterComponents = flattenComponents(after);
+    // Find removed and modified components
+    for (const [key, { component, path }] of beforeComponents) {
+        const afterEntry = afterComponents.get(key);
+        if (!afterEntry) {
+            // Component was removed
+            diffs.push({
+                type: 'removed',
+                componentId: component.props.id,
+                componentType: component.type,
+                path,
+                before: component,
+            });
+        }
+        else if (!deepEqual(component, afterEntry.component)) {
+            // Component was modified
+            diffs.push({
+                type: 'modified',
+                componentId: component.props.id,
+                componentType: component.type,
+                path,
+                before: component,
+                after: afterEntry.component,
+            });
+        }
+        else {
+            // Component is unchanged
+            diffs.push({
+                type: 'unchanged',
+                componentId: component.props.id,
+                componentType: component.type,
+                path,
+                before: component,
+                after: afterEntry.component,
+            });
+        }
+    }
+    // Find added components
+    for (const [key, { component, path }] of afterComponents) {
+        if (!beforeComponents.has(key)) {
+            diffs.push({
+                type: 'added',
+                componentId: component.props.id,
+                componentType: component.type,
+                path,
+                after: component,
+            });
+        }
+    }
+    return diffs;
+}
+/**
+ * Filters diffs to only include changes (excludes unchanged components).
+ */
+export function getChangedComponents(diffs) {
+    return diffs.filter((diff) => diff.type !== 'unchanged');
+}
+/**
+ * Counts the number of changes by type.
+ */
+export function countChanges(diffs) {
+    const counts = { added: 0, removed: 0, modified: 0, unchanged: 0 };
+    for (const diff of diffs) {
+        counts[diff.type]++;
+    }
+    return counts;
+}
+/**
+ * Checks if the root props have changed between two Puck data objects.
+ */
+export function hasRootChanged(before, after) {
+    return !deepEqual(before.root, after.root);
+}
+/**
+ * Flattens components with their indices for position tracking.
+ */
+function flattenComponentsWithIndex(data) {
+    const result = new Map();
+    // Process main content (handle undefined/null content)
+    const content = data?.content ?? [];
+    content.forEach((component, index) => {
+        const path = ['content'];
+        const key = `${component.props.id}`;
+        result.set(key, { component, path, index });
+    });
+    // Process zones
+    if (data?.zones) {
+        for (const [zoneName, components] of Object.entries(data.zones)) {
+            (components ?? []).forEach((component, index) => {
+                const path = ['zones', zoneName];
+                const key = `${zoneName}/${component.props.id}`;
+                result.set(key, { component, path, index });
+            });
+        }
+    }
+    return result;
+}
+/**
+ * Compares two Puck data structures with position tracking and reorder detection.
+ *
+ * @param before - The original Puck data
+ * @param after - The modified Puck data
+ * @returns Array of component differences with position info
+ */
+export function diffPuckDataWithPositions(before, after) {
+    const diffs = [];
+    const beforeComponents = flattenComponentsWithIndex(before);
+    const afterComponents = flattenComponentsWithIndex(after);
+    // Find removed, modified, reordered, and unchanged components
+    for (const [key, { component, path, index: beforeIndex }] of beforeComponents) {
+        const afterEntry = afterComponents.get(key);
+        if (!afterEntry) {
+            // Component was removed
+            diffs.push({
+                type: 'removed',
+                componentId: component.props.id,
+                componentType: component.type,
+                path,
+                before: component,
+                beforeIndex,
+                afterIndex: undefined,
+            });
+        }
+        else {
+            const isModified = !deepEqual(component, afterEntry.component);
+            const isReordered = beforeIndex !== afterEntry.index;
+            if (isModified) {
+                // Component was modified (might also be reordered)
+                diffs.push({
+                    type: 'modified',
+                    componentId: component.props.id,
+                    componentType: component.type,
+                    path,
+                    before: component,
+                    after: afterEntry.component,
+                    beforeIndex,
+                    afterIndex: afterEntry.index,
+                    reordered: isReordered,
+                });
+            }
+            else if (isReordered) {
+                // Component was only reordered
+                diffs.push({
+                    type: 'reordered',
+                    componentId: component.props.id,
+                    componentType: component.type,
+                    path,
+                    before: component,
+                    after: afterEntry.component,
+                    beforeIndex,
+                    afterIndex: afterEntry.index,
+                });
+            }
+            else {
+                // Component is unchanged
+                diffs.push({
+                    type: 'unchanged',
+                    componentId: component.props.id,
+                    componentType: component.type,
+                    path,
+                    before: component,
+                    after: afterEntry.component,
+                    beforeIndex,
+                    afterIndex: afterEntry.index,
+                });
+            }
+        }
+    }
+    // Find added components
+    for (const [key, { component, path, index: afterIndex }] of afterComponents) {
+        if (!beforeComponents.has(key)) {
+            diffs.push({
+                type: 'added',
+                componentId: component.props.id,
+                componentType: component.type,
+                path,
+                after: component,
+                beforeIndex: undefined,
+                afterIndex,
+            });
+        }
+    }
+    return diffs;
+}
+/**
+ * Compares two prop objects and returns detailed prop-level differences.
+ *
+ * @param before - Props before change
+ * @param after - Props after change
+ * @returns Array of prop differences
+ */
+export function diffProps(before, after) {
+    const diffs = [];
+    const allKeys = new Set([...Object.keys(before), ...Object.keys(after)]);
+    for (const key of allKeys) {
+        // Skip the 'id' prop as it's an identifier, not content
+        if (key === 'id')
+            continue;
+        const beforeValue = before[key];
+        const afterValue = after[key];
+        const beforeHas = key in before;
+        const afterHas = key in after;
+        if (!beforeHas && afterHas) {
+            // Prop was added
+            diffs.push({
+                propName: key,
+                type: 'added',
+                before: undefined,
+                after: afterValue,
+            });
+        }
+        else if (beforeHas && !afterHas) {
+            // Prop was removed
+            diffs.push({
+                propName: key,
+                type: 'removed',
+                before: beforeValue,
+                after: undefined,
+            });
+        }
+        else if (!deepEqual(beforeValue, afterValue)) {
+            // Prop was modified
+            diffs.push({
+                propName: key,
+                type: 'modified',
+                before: beforeValue,
+                after: afterValue,
+            });
+        }
+    }
+    return diffs;
+}
+/**
+ * Filters diffs to only include reordered components.
+ */
+export function getReorderedComponents(diffs) {
+    return diffs.filter((diff) => diff.type === 'reordered' || (diff.reordered === true));
+}
+//# sourceMappingURL=diff.js.map

package/dist/versioning/utils/diff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.js","sourceRoot":"","sources":["../../../src/versioning/utils/diff.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH;;GAEG;AACH,SAAS,eAAe,CAAC,SAA4B,EAAE,IAAc;IACnE,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;AACnD,CAAC;AAED;;GAEG;AACH,SAAS,iBAAiB,CACxB,IAAc;IAEd,MAAM,MAAM,GAAG,IAAI,GAAG,EAA4D,CAAC;IAEnF,uDAAuD;IACvD,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;IACpC,KAAK,MAAM,SAAS,IAAI,OAAO,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;QACzB,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpE,CAAC;IAED,gBAAgB;IAChB,IAAI,IAAI,EAAE,KAAK,EAAE,CAAC;QAChB,KAAK,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAChE,KAAK,MAAM,SAAS,IAAI,UAAU,IAAI,EAAE,EAAE,CAAC;gBACzC,MAAM,IAAI,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;gBACjC,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;YACpE,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;GAEG;AACH,SAAS,SAAS,CAAC,CAAU,EAAE,CAAU;IACvC,IAAI,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACzB,IAAI,OAAO,CAAC,KAAK,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IACxC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI;QAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7C,IAAI,OAAO,CAAC,KAAK,QAAQ;QAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,CAA4B,CAAC;IAC1C,MAAM,IAAI,GAAG,CAA4B,CAAC;IAE1C,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEhC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAEhD,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,OAAO,KAAK,CAAC;QACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;YAAE,OAAO,KAAK,CAAC;IACrD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,YAAY,CAAC,MAAgB,EAAE,KAAe;IAC5D,MAAM,KAAK,GAAoB,EAAE,CAAC;IAElC,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAEjD,uCAAuC;IACvC,KAAK,MAAM,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC;QAC1D,MAAM,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAE5C,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,wBAAwB;YACxB,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;gBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;gBAC7B,IAAI;gBACJ,MAAM,EAAE,SAAS;aAClB,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YACvD,yBAAyB;YACzB,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,UAAU;gBAChB,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;gBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;gBAC7B,IAAI;gBACJ,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,UAAU,CAAC,SAAS;aAC5B,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,yBAAyB;YACzB,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,WAAW;gBACjB,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;gBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;gBAC7B,IAAI;gBACJ,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,UAAU,CAAC,SAAS;aAC5B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,wBAAwB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,IAAI,eAAe,EAAE,CAAC;QACzD,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,OAAO;gBACb,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;gBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;gBAC7B,IAAI;gBACJ,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAsB;IACzD,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC;AAC3D,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAsB;IAMjD,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC;IAEnE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IACtB,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,MAAgB,EAAE,KAAe;IAC9D,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;AAC7C,CAAC;AAED;;GAEG;AACH,SAAS,0BAA0B,CACjC,IAAc;IAEd,MAAM,MAAM,GAAG,IAAI,GAAG,EAA2E,CAAC;IAElG,uDAAuD;IACvD,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;IACpC,OAAO,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;QACzB,MAAM,GAAG,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QACpC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,gBAAgB;IAChB,IAAI,IAAI,EAAE,KAAK,EAAE,CAAC;QAChB,KAAK,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YAChE,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;gBAC9C,MAAM,IAAI,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;gBACjC,MAAM,GAAG,GAAG,GAAG,QAAQ,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;gBAChD,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9C,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,yBAAyB,CACvC,MAAgB,EAChB,KAAe;IAEf,MAAM,KAAK,GAAgC,EAAE,CAAC;IAE9C,MAAM,gBAAgB,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAC;IAE1D,8DAA8D;IAC9D,KAAK,MAAM,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC;QAC9E,MAAM,UAAU,GAAG,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAE5C,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,wBAAwB;YACxB,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;gBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;gBAC7B,IAAI;gBACJ,MAAM,EAAE,SAAS;gBACjB,WAAW;gBACX,UAAU,EAAE,SAAS;aACtB,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,UAAU,GAAG,CAAC,SAAS,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;YAC/D,MAAM,WAAW,GAAG,WAAW,KAAK,UAAU,CAAC,KAAK,CAAC;YAErD,IAAI,UAAU,EAAE,CAAC;gBACf,mDAAmD;gBACnD,KAAK,CAAC,IAAI,CAAC;oBACT,IAAI,EAAE,UAAU;oBAChB,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;oBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;oBAC7B,IAAI;oBACJ,MAAM,EAAE,SAAS;oBACjB,KAAK,EAAE,UAAU,CAAC,SAAS;oBAC3B,WAAW;oBACX,UAAU,EAAE,UAAU,CAAC,KAAK;oBAC5B,SAAS,EAAE,WAAW;iBACvB,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,WAAW,EAAE,CAAC;gBACvB,+BAA+B;gBAC/B,KAAK,CAAC,IAAI,CAAC;oBACT,IAAI,EAAE,WAAW;oBACjB,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;oBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;oBAC7B,IAAI;oBACJ,MAAM,EAAE,SAAS;oBACjB,KAAK,EAAE,UAAU,CAAC,SAAS;oBAC3B,WAAW;oBACX,UAAU,EAAE,UAAU,CAAC,KAAK;iBAC7B,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,yBAAyB;gBACzB,KAAK,CAAC,IAAI,CAAC;oBACT,IAAI,EAAE,WAAW;oBACjB,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;oBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;oBAC7B,IAAI;oBACJ,MAAM,EAAE,SAAS;oBACjB,KAAK,EAAE,UAAU,CAAC,SAAS;oBAC3B,WAAW;oBACX,UAAU,EAAE,UAAU,CAAC,KAAK;iBAC7B,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IAED,wBAAwB;IACxB,KAAK,MAAM,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,IAAI,eAAe,EAAE,CAAC;QAC5E,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,KAAK,CAAC,IAAI,CAAC;gBACT,IAAI,EAAE,OAAO;gBACb,WAAW,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE;gBAC/B,aAAa,EAAE,SAAS,CAAC,IAAI;gBAC7B,IAAI;gBACJ,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,SAAS;gBACtB,UAAU;aACX,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,MAA+B,EAC/B,KAA8B;IAE9B,MAAM,KAAK,GAAe,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAEzE,KAAK,MAAM,GAAG,IAAI,OAAO,EAAE,CAAC;QAC1B,wDAAwD;QACxD,IAAI,GAAG,KAAK,IAAI;YAAE,SAAS;QAE3B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9B,MAAM,SAAS,GAAG,GAAG,IAAI,MAAM,CAAC;QAChC,MAAM,QAAQ,GAAG,GAAG,IAAI,KAAK,CAAC;QAE9B,IAAI,CAAC,SAAS,IAAI,QAAQ,EAAE,CAAC;YAC3B,iBAAiB;YACjB,KAAK,CAAC,IAAI,CAAC;gBACT,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClC,mBAAmB;YACnB,KAAK,CAAC,IAAI,CAAC;gBACT,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,WAAW;gBACnB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,CAAC;YAC/C,oBAAoB;YACpB,KAAK,CAAC,IAAI,CAAC;gBACT,QAAQ,EAAE,GAAG;gBACb,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,WAAW;gBACnB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,OAAO,KAAK,CAAC,MAAM,CACjB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,CACjE,CAAC;AACJ,CAAC"}

package/dist/versioning/utils/highlightConfig.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Highlighted Config Utility
+ *
+ * Creates a Puck config wrapper that adds visual diff highlighting to components.
+ *
+ * All visual styling uses inline React styles. BEM class names are retained
+ * as secondary identifiers for DOM querying and test assertions.
+ */
+import type { ComponentDiffWithPosition } from '../../core/types.js';
+/**
+ * Puck Config structure (flexible to accept Puck's Config type)
+ */
+export type PuckConfig = Record<string, any>;
+/**
+ * Creates a map of component IDs to their diff types.
+ */
+export declare function createDiffMap(diffs: ComponentDiffWithPosition[]): Map<string, ComponentDiffWithPosition['type']>;
+/**
+ * Wraps a Puck config to add diff highlighting to rendered components.
+ *
+ * @param config - The original Puck config
+ * @param diffMap - Map of component IDs to their diff types
+ * @param side - Which side of the comparison ('before' shows removed/modified, 'after' shows added/modified)
+ * @returns A new config with wrapped render functions that add visual highlighting
+ */
+export declare function createHighlightedConfig(config: PuckConfig, diffMap: Map<string, ComponentDiffWithPosition['type']>, side: 'before' | 'after'): PuckConfig;
+/**
+ * Creates a highlighted config for viewing historical versions.
+ * Shows what has changed between the historical version and the current version.
+ *
+ * When viewing an old version:
+ * - Removed components (in old but not current) are shown with red highlight
+ * - Modified components are shown with yellow highlight
+ * - Added components (in current but not old) are not shown (they don't exist in old version)
+ *
+ * @param config - The original Puck config
+ * @param diffs - Array of component diffs
+ * @returns A new config with diff highlighting for the 'before' side
+ */
+export declare function createHistoricalVersionConfig(config: PuckConfig, diffs: ComponentDiffWithPosition[]): PuckConfig;
+//# sourceMappingURL=highlightConfig.d.ts.map

package/dist/versioning/utils/highlightConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightConfig.d.ts","sourceRoot":"","sources":["../../../src/versioning/utils/highlightConfig.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE;;GAEG;AAEH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAkD7C;;GAEG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,yBAAyB,EAAE,GACjC,GAAG,CAAC,MAAM,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAQhD;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC,EACvD,IAAI,EAAE,QAAQ,GAAG,OAAO,GACvB,UAAU,CA4DZ;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,yBAAyB,EAAE,GACjC,UAAU,CAGZ"}

package/dist/versioning/utils/highlightConfig.js

@@ -0,0 +1,130 @@
+/**
+ * Highlighted Config Utility
+ *
+ * Creates a Puck config wrapper that adds visual diff highlighting to components.
+ *
+ * All visual styling uses inline React styles. BEM class names are retained
+ * as secondary identifiers for DOM querying and test assertions.
+ */
+import React from 'react';
+// =============================================================================
+// Inline Style Constants
+// =============================================================================
+const highlightStyles = {
+    added: {
+        border: '2px solid #22c55e',
+        borderRadius: '4px',
+        position: 'relative',
+    },
+    removed: {
+        border: '2px solid #ef4444',
+        borderRadius: '4px',
+        position: 'relative',
+        opacity: 0.6,
+    },
+    modified: {
+        border: '2px solid #eab308',
+        borderRadius: '4px',
+        position: 'relative',
+    },
+};
+const badgeBaseStyle = {
+    position: 'absolute',
+    top: '-8px',
+    right: '-8px',
+    width: '20px',
+    height: '20px',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '12px',
+    fontWeight: 700,
+    color: '#fff',
+};
+const badgeBackgrounds = {
+    added: '#22c55e',
+    removed: '#ef4444',
+    modified: '#eab308',
+};
+// =============================================================================
+// Utilities
+// =============================================================================
+/**
+ * Creates a map of component IDs to their diff types.
+ */
+export function createDiffMap(diffs) {
+    const map = new Map();
+    for (const diff of diffs) {
+        if (diff.type !== 'unchanged') {
+            map.set(diff.componentId, diff.type);
+        }
+    }
+    return map;
+}
+/**
+ * Wraps a Puck config to add diff highlighting to rendered components.
+ *
+ * @param config - The original Puck config
+ * @param diffMap - Map of component IDs to their diff types
+ * @param side - Which side of the comparison ('before' shows removed/modified, 'after' shows added/modified)
+ * @returns A new config with wrapped render functions that add visual highlighting
+ */
+export function createHighlightedConfig(config, diffMap, side) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const wrappedComponents = {};
+    const components = config.components;
+    for (const [componentName, componentConfig] of Object.entries(components)) {
+        // Cast render to the function type we need
+        const originalRender = componentConfig.render;
+        wrappedComponents[componentName] = {
+            ...componentConfig,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            render: (props) => {
+                const id = props.id;
+                const diffType = diffMap.get(id);
+                // Only show diff styling for relevant changes on each side
+                const shouldHighlight = diffType &&
+                    ((side === 'before' && (diffType === 'removed' || diffType === 'modified')) ||
+                        (side === 'after' && (diffType === 'added' || diffType === 'modified')));
+                const renderedContent = originalRender(props);
+                if (!shouldHighlight) {
+                    return renderedContent;
+                }
+                const wrapperInlineStyle = highlightStyles[diffType] || {};
+                const badgeInlineStyle = {
+                    ...badgeBaseStyle,
+                    background: badgeBackgrounds[diffType] || '#999',
+                };
+                return React.createElement('div', {
+                    className: `visual-diff-highlight visual-diff-highlight--${diffType}`,
+                    style: wrapperInlineStyle,
+                    'data-diff-type': diffType,
+                    'data-component-id': id,
+                }, renderedContent, React.createElement('div', {
+                    className: `visual-diff-badge visual-diff-badge--${diffType}`,
+                    style: badgeInlineStyle,
+                }, diffType === 'added' ? '+' : diffType === 'removed' ? '\u2212' : '~'));
+            },
+        };
+    }
+    return { ...config, components: wrappedComponents };
+}
+/**
+ * Creates a highlighted config for viewing historical versions.
+ * Shows what has changed between the historical version and the current version.
+ *
+ * When viewing an old version:
+ * - Removed components (in old but not current) are shown with red highlight
+ * - Modified components are shown with yellow highlight
+ * - Added components (in current but not old) are not shown (they don't exist in old version)
+ *
+ * @param config - The original Puck config
+ * @param diffs - Array of component diffs
+ * @returns A new config with diff highlighting for the 'before' side
+ */
+export function createHistoricalVersionConfig(config, diffs) {
+    const diffMap = createDiffMap(diffs);
+    return createHighlightedConfig(config, diffMap, 'before');
+}
+//# sourceMappingURL=highlightConfig.js.map

package/dist/versioning/utils/highlightConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlightConfig.js","sourceRoot":"","sources":["../../../src/versioning/utils/highlightConfig.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@pantheon-systems/puck-css",
+  "version": "0.4.0",
+  "description": "Puck editor integration with Collaborative State System",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pantheon-systems/puck-css-integration.git",
+    "directory": "packages/puck-css"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "config": [
+        "./dist/config.d.ts"
+      ],
+      "utils/path": [
+        "./dist/utils/path.d.ts"
+      ],
+      "pds": [
+        "./dist/pds/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./config": {
+      "import": "./dist/config.js",
+      "default": "./dist/config.js",
+      "types": "./dist/config.d.ts"
+    },
+    "./utils/path": {
+      "import": "./dist/utils/path.js",
+      "default": "./dist/utils/path.js",
+      "types": "./dist/utils/path.d.ts"
+    },
+    "./styles.css": "./src/styles.css",
+    "./server": {
+      "import": "./dist/server.js",
+      "default": "./dist/server.js",
+      "types": "./dist/server.d.ts"
+    },
+    "./auth-gate": {
+      "import": "./dist/auth/AuthGate.js",
+      "default": "./dist/auth/AuthGate.js",
+      "types": "./dist/auth/AuthGate.d.ts"
+    },
+    "./connectable": {
+      "import": "./dist/editor/components/connectable.js",
+      "default": "./dist/editor/components/connectable.js",
+      "types": "./dist/editor/components/connectable.d.ts"
+    },
+    "./pds": {
+      "import": "./dist/pds/index.js",
+      "default": "./dist/pds/index.js",
+      "types": "./dist/pds/index.d.ts"
+    },
+    "./pds/styles.css": "./src/pds/theme/PuckEditorTheme.css"
+  },
+  "files": [
+    "dist",
+    "src/styles.css",
+    "src/pds/theme"
+  ],
+  "dependencies": {
+    "fast-json-patch": "^3.1.1",
+    "jsep": "^1.4.0",
+    "yjs": "^13.6.29",
+    "@pantheon-systems/css-client": "0.4.0"
+  },
+  "devDependencies": {
+    "@floating-ui/react": "^0.27.19",
+    "@pantheon-systems/pds-toolkit-react": "2.0.0-alpha.12",
+    "@tanstack/react-query": "^5.99.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^24.1.3",
+    "react-toastify": "^11.0.5",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.2",
+    "vitest": "^4.1.5",
+    "@pantheon-systems/eslint-config": "0.1.0"
+  },
+  "peerDependencies": {
+    "@pantheon-systems/pds-toolkit-react": ">=2.0.0-alpha.0",
+    "@puckeditor/core": ">=0.21.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --config vite.config.preview.ts",
+    "build": "tsc && find src -name '*.module.css' | while read f; do dest=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$dest\")\"; cp \"$f\" \"$dest\"; done && (cp node_modules/@pantheon-systems/pds-toolkit-react/dist/css/pds-core.css src/pds/theme/pds-core.css && node scripts/generate-pds-content.cjs) || true",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}