@pantheon-systems/puck-css 0.4.0

package/dist/merge/components/conflict-resolution/RenderedResolutionPreview.d.ts

@@ -0,0 +1,37 @@
+/**
+ * RenderedResolutionPreview Component
+ *
+ * Renders a preview of the merged PuckData state. Shows a summary
+ * of the merged document's content components and root props.
+ */
+import React from 'react';
+import type { PuckData } from '@pantheon-systems/css-client';
+/**
+ * Props for the RenderedResolutionPreview component.
+ */
+export interface RenderedResolutionPreviewProps {
+    /** The merged PuckData to preview */
+    mergedData: PuckData;
+    /** Optional Puck config for richer rendering (unused for now) */
+    config?: unknown;
+}
+/**
+ * Preview component that shows a summary of the merged PuckData.
+ *
+ * Currently renders a key-value summary of all components and their
+ * props. Can be extended later to render a full Puck preview when
+ * a Puck config is available.
+ *
+ * @param props - {@link RenderedResolutionPreviewProps}
+ * @returns A React element displaying root props, content components, and zones.
+ *
+ * @example
+ * ```tsx
+ * <RenderedResolutionPreview
+ *   mergedData={mergedSnapshot}
+ *   config={puckConfig}
+ * />
+ * ```
+ */
+export declare function RenderedResolutionPreview({ mergedData, config: _config, }: RenderedResolutionPreviewProps): React.ReactElement;
+//# sourceMappingURL=RenderedResolutionPreview.d.ts.map

package/dist/merge/components/conflict-resolution/RenderedResolutionPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderedResolutionPreview.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/conflict-resolution/RenderedResolutionPreview.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,qCAAqC;IACrC,UAAU,EAAE,QAAQ,CAAC;IACrB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAcD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,UAAU,EACV,MAAM,EAAE,OAAO,GAChB,EAAE,8BAA8B,GAAG,KAAK,CAAC,YAAY,CAqFrD"}

package/dist/merge/components/conflict-resolution/RenderedResolutionPreview.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseClass = 'rendered-resolution-preview';
+/**
+ * Formats a value for display in the preview.
+ */
+function formatPreviewValue(value) {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'object')
+        return JSON.stringify(value, null, 2);
+    return String(value);
+}
+/**
+ * Preview component that shows a summary of the merged PuckData.
+ *
+ * Currently renders a key-value summary of all components and their
+ * props. Can be extended later to render a full Puck preview when
+ * a Puck config is available.
+ *
+ * @param props - {@link RenderedResolutionPreviewProps}
+ * @returns A React element displaying root props, content components, and zones.
+ *
+ * @example
+ * ```tsx
+ * <RenderedResolutionPreview
+ *   mergedData={mergedSnapshot}
+ *   config={puckConfig}
+ * />
+ * ```
+ */
+export function RenderedResolutionPreview({ mergedData, config: _config, }) {
+    return (_jsxs("div", { className: baseClass, children: [_jsx("h3", { className: `${baseClass}__title`, children: "Merged Preview" }), mergedData.root?.props &&
+                Object.keys(mergedData.root.props).length > 0 && (_jsxs("div", { className: `${baseClass}__root`, children: [_jsx("h4", { className: `${baseClass}__section-title`, children: "Page Settings" }), _jsx("dl", { className: `${baseClass}__prop-list`, children: Object.entries(mergedData.root.props).map(([key, value]) => (_jsxs("div", { className: `${baseClass}__prop`, children: [_jsx("dt", { className: `${baseClass}__prop-name`, children: key }), _jsx("dd", { className: `${baseClass}__prop-value`, children: formatPreviewValue(value) })] }, key))) })] })), mergedData.content.length > 0 && (_jsxs("div", { className: `${baseClass}__content`, children: [_jsx("h4", { className: `${baseClass}__section-title`, children: "Components" }), mergedData.content.map((component) => (_jsxs("div", { className: `${baseClass}__component`, children: [_jsx("h5", { className: `${baseClass}__component-type`, children: component.type }), _jsx("dl", { className: `${baseClass}__prop-list`, children: Object.entries(component.props)
+                                    .filter(([key]) => key !== 'id')
+                                    .map(([key, value]) => (_jsxs("div", { className: `${baseClass}__prop`, children: [_jsx("dt", { className: `${baseClass}__prop-name`, children: key }), _jsx("dd", { className: `${baseClass}__prop-value`, children: formatPreviewValue(value) })] }, key))) })] }, component.props.id)))] })), mergedData.zones &&
+                Object.entries(mergedData.zones).map(([zoneName, components]) => (_jsxs("div", { className: `${baseClass}__zone`, children: [_jsxs("h4", { className: `${baseClass}__section-title`, children: ["Zone: ", zoneName] }), components.map((component) => (_jsxs("div", { className: `${baseClass}__component`, children: [_jsx("h5", { className: `${baseClass}__component-type`, children: component.type }), _jsx("dl", { className: `${baseClass}__prop-list`, children: Object.entries(component.props)
+                                        .filter(([key]) => key !== 'id')
+                                        .map(([key, value]) => (_jsxs("div", { className: `${baseClass}__prop`, children: [_jsx("dt", { className: `${baseClass}__prop-name`, children: key }), _jsx("dd", { className: `${baseClass}__prop-value`, children: formatPreviewValue(value) })] }, key))) })] }, component.props.id)))] }, zoneName)))] }));
+}
+//# sourceMappingURL=RenderedResolutionPreview.js.map

package/dist/merge/components/conflict-resolution/RenderedResolutionPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderedResolutionPreview.js","sourceRoot":"","sources":["../../../../src/merge/components/conflict-resolution/RenderedResolutionPreview.tsx"],"names":[],"mappings":"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"}

package/dist/merge/components/conflict-resolution/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Conflict Resolution Components
+ *
+ * Puck-aware field-level conflict resolution UI components.
+ */
+export { PuckFieldResolutionPanel } from './PuckFieldResolutionPanel.js';
+export type { PuckFieldResolutionPanelProps } from './PuckFieldResolutionPanel.js';
+export { ComponentConflictGroup } from './ComponentConflictGroup.js';
+export type { ComponentConflictGroupProps } from './ComponentConflictGroup.js';
+export { RenderedResolutionPreview } from './RenderedResolutionPreview.js';
+export type { RenderedResolutionPreviewProps } from './RenderedResolutionPreview.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/merge/components/conflict-resolution/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/conflict-resolution/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,YAAY,EAAE,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAEnF,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,YAAY,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAE/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,YAAY,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/merge/components/conflict-resolution/index.js

@@ -0,0 +1,9 @@
+/**
+ * Conflict Resolution Components
+ *
+ * Puck-aware field-level conflict resolution UI components.
+ */
+export { PuckFieldResolutionPanel } from './PuckFieldResolutionPanel.js';
+export { ComponentConflictGroup } from './ComponentConflictGroup.js';
+export { RenderedResolutionPreview } from './RenderedResolutionPreview.js';
+//# sourceMappingURL=index.js.map

package/dist/merge/components/conflict-resolution/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/merge/components/conflict-resolution/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAGrE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/merge/components/merge-resolution/CherryPickVisualPanel.d.ts

@@ -0,0 +1,44 @@
+/**
+ * CherryPickVisualPanel Component
+ *
+ * Two-column layout for cherry-pick with visual comparison and live merged preview.
+ * The left column shows two rendered Puck pages (Draft and Live) with
+ * ComponentClickOverlay on each, plus prop-level controls below.
+ * The right column shows a live-updating merged preview.
+ *
+ * Does NOT use MergePreviewRenderer (see PLAN.md Decision 3).
+ * Instead renders two separate <Render> instances directly, each with its own
+ * ComponentClickOverlay for unambiguous panel-level click handling.
+ *
+ * All visual styling uses inline React styles.
+ */
+import React from 'react';
+import type { DocumentResolution } from '../../useMergeResolution.js';
+import type { ComponentDiffWithPosition } from '../../../core/types.js';
+/**
+ * Props for the CherryPickVisualPanel component.
+ */
+export interface CherryPickVisualPanelProps {
+    /** Current document being resolved */
+    document: DocumentResolution;
+    /** Puck config for rendering */
+    config: unknown;
+    /** Component-level diffs for highlighting */
+    diffs: ComponentDiffWithPosition[];
+    /** Source branch display name */
+    sourceBranchName: string;
+    /** Target branch display name */
+    targetBranchName: string;
+    /** Callback for individual prop selection */
+    onCherryPickSelection: (documentId: string, componentId: string, propName: string, choice: 'source' | 'target') => void;
+    /** Callback for accepting all props of a component */
+    onAcceptAllComponentProps: (documentId: string, componentId: string, choice: 'source' | 'target') => void;
+}
+/**
+ * Visual cherry-pick panel with two-column layout.
+ *
+ * @param props - {@link CherryPickVisualPanelProps}
+ * @returns A React element with visual comparison and merged preview.
+ */
+export declare function CherryPickVisualPanel({ document: doc, config, diffs, sourceBranchName, targetBranchName, onCherryPickSelection, onAcceptAllComponentProps, }: CherryPickVisualPanelProps): React.ReactElement;
+//# sourceMappingURL=CherryPickVisualPanel.d.ts.map

package/dist/merge/components/merge-resolution/CherryPickVisualPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CherryPickVisualPanel.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/merge-resolution/CherryPickVisualPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAOxE;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,sCAAsC;IACtC,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gCAAgC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,KAAK,EAAE,yBAAyB,EAAE,CAAC;IACnC,iCAAiC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,qBAAqB,EAAE,CACrB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,QAAQ,GAAG,QAAQ,KACxB,IAAI,CAAC;IACV,sDAAsD;IACtD,yBAAyB,EAAE,CACzB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,QAAQ,GAAG,QAAQ,KACxB,IAAI,CAAC;CACX;AA+JD;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EAAE,GAAG,EACb,MAAM,EACN,KAAK,EACL,gBAAgB,EAChB,gBAAgB,EAChB,qBAAqB,EACrB,yBAAyB,GAC1B,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CAwMjD"}

package/dist/merge/components/merge-resolution/CherryPickVisualPanel.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CherryPickVisualPanel Component
+ *
+ * Two-column layout for cherry-pick with visual comparison and live merged preview.
+ * The left column shows two rendered Puck pages (Draft and Live) with
+ * ComponentClickOverlay on each, plus prop-level controls below.
+ * The right column shows a live-updating merged preview.
+ *
+ * Does NOT use MergePreviewRenderer (see PLAN.md Decision 3).
+ * Instead renders two separate <Render> instances directly, each with its own
+ * ComponentClickOverlay for unambiguous panel-level click handling.
+ *
+ * All visual styling uses inline React styles.
+ */
+import { useRef, useMemo } from 'react';
+import { Render } from '@puckeditor/core';
+import { createDiffMap, createHighlightedConfig } from '../../../versioning/utils/highlightConfig.js';
+import { groupFieldsByComponent } from '../../utils/puckFieldClassifier.js';
+import { ScaledContent } from '../../../editor/components/merge-preview/ScaledContent.js';
+import { ComponentClickOverlay } from './ComponentClickOverlay.js';
+import { ComponentConflictGroup } from '../conflict-resolution/ComponentConflictGroup.js';
+// =============================================================================
+// Inline Style Constants
+// =============================================================================
+const containerStyle = {
+    display: 'flex',
+    gap: '16px',
+    marginTop: '16px',
+};
+const leftColumnStyle = {
+    flex: '0 0 60%',
+    minWidth: 0,
+};
+const rightColumnStyle = {
+    flex: '0 0 40%',
+    minWidth: 0,
+};
+const comparisonRowStyle = {
+    display: 'flex',
+    gap: '12px',
+    marginBottom: '16px',
+};
+const renderPanelStyle = {
+    flex: '1 1 50%',
+    minWidth: 0,
+    position: 'relative',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    overflow: 'hidden',
+};
+const panelLabelStyle = {
+    padding: '8px 12px',
+    fontWeight: 600,
+    fontSize: '13px',
+    background: '#f9fafb',
+    borderBottom: '1px solid #e5e7eb',
+};
+const panelContentStyle = {
+    padding: '12px',
+};
+const mergedPreviewHeaderStyle = {
+    padding: '8px 12px',
+    fontWeight: 600,
+    fontSize: '14px',
+    background: '#f0f9ff',
+    borderBottom: '1px solid #e5e7eb',
+    color: '#0369a1',
+    borderRadius: '8px 8px 0 0',
+};
+const mergedPreviewContainerStyle = {
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    overflow: 'hidden',
+};
+const mergedPreviewContentStyle = {
+    padding: '12px',
+};
+const promptStyle = {
+    padding: '40px 20px',
+    textAlign: 'center',
+    color: '#999',
+    fontStyle: 'italic',
+};
+const conflictSectionStyle = {
+    marginTop: '16px',
+};
+const componentGroupStyle = {
+    marginBottom: '16px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '8px',
+    padding: '12px',
+};
+const componentActionsStyle = {
+    display: 'flex',
+    gap: '8px',
+    marginBottom: '8px',
+};
+const acceptButtonStyle = {
+    padding: '4px 10px',
+    borderRadius: '4px',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: '#ccc',
+    background: 'white',
+    cursor: 'pointer',
+    fontSize: '12px',
+};
+const autoMergedStyle = {
+    fontSize: '13px',
+    color: '#666',
+    marginBottom: '12px',
+};
+// =============================================================================
+// Helpers
+// =============================================================================
+/**
+ * Derives per-component selection state from cherry-pick selections.
+ * For a component, if ALL conflicting props are resolved to 'source',
+ * returns 'source'. If all 'target', returns 'target'. Otherwise 'none'.
+ */
+function deriveComponentSelections(document) {
+    const result = {};
+    if (!document.classifiedFields)
+        return result;
+    // Group conflicting fields by component
+    const componentConflicts = new Map();
+    for (const field of document.classifiedFields) {
+        if (field.classification === 'conflicting') {
+            const existing = componentConflicts.get(field.componentId) || [];
+            existing.push(field.propName);
+            componentConflicts.set(field.componentId, existing);
+        }
+    }
+    for (const [componentId, propNames] of componentConflicts) {
+        const selections = propNames.map((propName) => document.cherryPickSelections[`${componentId}:${propName}`]);
+        if (selections.length === 0) {
+            result[componentId] = 'none';
+        }
+        else if (selections.every((s) => s === 'source')) {
+            result[componentId] = 'source';
+        }
+        else if (selections.every((s) => s === 'target')) {
+            result[componentId] = 'target';
+        }
+        else {
+            result[componentId] = 'none';
+        }
+    }
+    return result;
+}
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * Visual cherry-pick panel with two-column layout.
+ *
+ * @param props - {@link CherryPickVisualPanelProps}
+ * @returns A React element with visual comparison and merged preview.
+ */
+export function CherryPickVisualPanel({ document: doc, config, diffs, sourceBranchName, targetBranchName, onCherryPickSelection, onAcceptAllComponentProps, }) {
+    const sourceContainerRef = useRef(null);
+    const targetContainerRef = useRef(null);
+    // Create highlighted configs for diff visualization
+    const diffMap = useMemo(() => createDiffMap(diffs), [diffs]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const sourceHighlightedConfig = useMemo(() => createHighlightedConfig(config, diffMap, 'after'), [config, diffMap]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const targetHighlightedConfig = useMemo(() => createHighlightedConfig(config, diffMap, 'before'), [config, diffMap]);
+    // Derive per-component selection state for overlay indicators
+    const componentSelections = useMemo(() => deriveComponentSelections(doc), [doc]);
+    // Group classified fields by component for prop-level controls
+    const componentGroups = doc.classifiedFields
+        ? groupFieldsByComponent(doc.classifiedFields)
+        : [];
+    // Count auto-merged (non-conflicting) fields
+    const autoMergedCount = doc.classifiedFields
+        ? doc.classifiedFields.filter((f) => f.classification !== 'conflicting').length
+        : 0;
+    const sourceData = doc.sourceSnapshot;
+    const targetData = doc.targetSnapshot;
+    return (_jsxs("div", { className: "cherry-pick-visual-panel", style: containerStyle, children: [_jsxs("div", { className: "cherry-pick-visual-panel__left", style: leftColumnStyle, children: [sourceData && targetData && (_jsxs("div", { className: "cherry-pick-visual-panel__comparison", style: comparisonRowStyle, children: [_jsxs("div", { className: "cherry-pick-visual-panel__render-panel", style: renderPanelStyle, children: [_jsx("div", { className: "cherry-pick-visual-panel__panel-label", style: panelLabelStyle, children: sourceBranchName }), _jsx("div", { className: "cherry-pick-visual-panel__panel-content", style: panelContentStyle, ref: sourceContainerRef, children: _jsx(ScaledContent, { children: _jsx(Render, { config: sourceHighlightedConfig, data: sourceData }) }) }), _jsx(ComponentClickOverlay, { containerRef: sourceContainerRef, selections: componentSelections, onComponentClick: (componentId) => onAcceptAllComponentProps(doc.documentId, componentId, 'source'), interactive: true, branchLabel: sourceBranchName })] }), _jsxs("div", { className: "cherry-pick-visual-panel__render-panel", style: renderPanelStyle, children: [_jsx("div", { className: "cherry-pick-visual-panel__panel-label", style: panelLabelStyle, children: targetBranchName }), _jsx("div", { className: "cherry-pick-visual-panel__panel-content", style: panelContentStyle, ref: targetContainerRef, children: _jsx(ScaledContent, { children: _jsx(Render, { config: targetHighlightedConfig, data: targetData }) }) }), _jsx(ComponentClickOverlay, { containerRef: targetContainerRef, selections: componentSelections, onComponentClick: (componentId) => onAcceptAllComponentProps(doc.documentId, componentId, 'target'), interactive: true, branchLabel: targetBranchName })] })] })), componentGroups.length > 0 && (_jsxs("div", { className: "cherry-pick-visual-panel__conflicts", style: conflictSectionStyle, children: [autoMergedCount > 0 && (_jsxs("p", { className: "cherry-pick-visual-panel__auto-merged", style: autoMergedStyle, children: [autoMergedCount, " ", autoMergedCount === 1 ? 'field' : 'fields', " auto-merged"] })), componentGroups.map((group) => (_jsxs("div", { className: "cherry-pick-visual-panel__component-group", style: componentGroupStyle, children: [_jsxs("div", { className: "cherry-pick-visual-panel__component-actions", style: componentActionsStyle, children: [_jsx("button", { type: "button", className: "cherry-pick-visual-panel__accept-button", style: acceptButtonStyle, onClick: () => onAcceptAllComponentProps(doc.documentId, group.componentId, 'source'), children: "Accept all from Draft" }), _jsx("button", { type: "button", className: "cherry-pick-visual-panel__accept-button", style: acceptButtonStyle, onClick: () => onAcceptAllComponentProps(doc.documentId, group.componentId, 'target'), children: "Accept all from Live" })] }), _jsx(ComponentConflictGroup, { componentType: group.componentType, componentId: group.componentId, fields: group.fields, sourceBranchName: sourceBranchName, targetBranchName: targetBranchName, resolutions: Object.fromEntries(Object.entries(doc.cherryPickSelections)
+                                            .filter(([k]) => k.startsWith(`${group.componentId}:`))
+                                            .map(([k, v]) => [k.split(':').slice(1).join(':'), v])), onResolutionChange: (componentId, propName, choice) => onCherryPickSelection(doc.documentId, componentId, propName, choice) })] }, group.componentId)))] }))] }), _jsx("div", { className: "cherry-pick-visual-panel__right", style: rightColumnStyle, children: _jsxs("div", { className: "cherry-pick-visual-panel__merged-preview", style: mergedPreviewContainerStyle, children: [_jsx("div", { className: "cherry-pick-visual-panel__merged-header", style: mergedPreviewHeaderStyle, children: "Merged Preview" }), _jsx("div", { className: "cherry-pick-visual-panel__merged-content", style: mergedPreviewContentStyle, children: doc.mergedSnapshot ? (_jsx(ScaledContent, { children: _jsx(Render, { config: config, data: doc.mergedSnapshot }) })) : (_jsx("p", { className: "cherry-pick-visual-panel__merged-prompt", style: promptStyle, children: "Make selections to see the merged preview" })) })] }) })] }));
+}
+//# sourceMappingURL=CherryPickVisualPanel.js.map

package/dist/merge/components/merge-resolution/CherryPickVisualPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CherryPickVisualPanel.js","sourceRoot":"","sources":["../../../../src/merge/components/merge-resolution/CherryPickVisualPanel.tsx"],"names":[],"mappings":"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"}

package/dist/merge/components/merge-resolution/ComponentClickOverlay.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ComponentClickOverlay Component
+ *
+ * Transparent overlay that positions click targets over rendered Puck
+ * components. Used by CherryPickVisualPanel to enable component-level
+ * selection without modifying Puck configs.
+ *
+ * All visual styling uses inline React styles.
+ */
+import React from 'react';
+/**
+ * Props for the ComponentClickOverlay component.
+ */
+export interface ComponentClickOverlayProps {
+    /** Ref to the container element wrapping the <Render> output */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Map of componentId -> selection state */
+    selections: Record<string, 'source' | 'target' | 'none'>;
+    /** Callback when a component region is clicked */
+    onComponentClick: (componentId: string) => void;
+    /** Whether click interaction is enabled */
+    interactive: boolean;
+    /** Label to show for the branch this overlay represents (e.g., "Draft" or "Live") */
+    branchLabel: string;
+}
+/**
+ * Renders absolutely-positioned click targets over each component that has
+ * a `data-component-id` attribute in the container.
+ *
+ * @param props - {@link ComponentClickOverlayProps}
+ * @returns A React element with overlay click targets, or null if no components found.
+ */
+export declare function ComponentClickOverlay({ containerRef, selections, onComponentClick, interactive, branchLabel, }: ComponentClickOverlayProps): React.ReactElement | null;
+//# sourceMappingURL=ComponentClickOverlay.d.ts.map

package/dist/merge/components/merge-resolution/ComponentClickOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentClickOverlay.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/merge-resolution/ComponentClickOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,gEAAgE;IAChE,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACzD,kDAAkD;IAClD,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,2CAA2C;IAC3C,WAAW,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,WAAW,EAAE,MAAM,CAAC;CACrB;AA+CD;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,WAAW,GACZ,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAgIxD"}

package/dist/merge/components/merge-resolution/ComponentClickOverlay.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ComponentClickOverlay Component
+ *
+ * Transparent overlay that positions click targets over rendered Puck
+ * components. Used by CherryPickVisualPanel to enable component-level
+ * selection without modifying Puck configs.
+ *
+ * All visual styling uses inline React styles.
+ */
+import { useState, useEffect, useCallback } from 'react';
+// =============================================================================
+// Inline Style Constants
+// =============================================================================
+const overlayContainerStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+};
+const selectionColors = {
+    source: {
+        borderColor: '#22c55e',
+        background: 'rgba(34, 197, 94, 0.1)',
+    },
+    target: {
+        borderColor: '#3b82f6',
+        background: 'rgba(59, 130, 246, 0.1)',
+    },
+    none: {
+        borderColor: 'transparent',
+        background: 'transparent',
+    },
+};
+const selectionIndicatorColors = {
+    source: '#22c55e',
+    target: '#3b82f6',
+};
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * Renders absolutely-positioned click targets over each component that has
+ * a `data-component-id` attribute in the container.
+ *
+ * @param props - {@link ComponentClickOverlayProps}
+ * @returns A React element with overlay click targets, or null if no components found.
+ */
+export function ComponentClickOverlay({ containerRef, selections, onComponentClick, interactive, branchLabel, }) {
+    const [positions, setPositions] = useState([]);
+    const updatePositions = useCallback(() => {
+        const container = containerRef.current;
+        if (!container) {
+            setPositions([]);
+            return;
+        }
+        const elements = container.querySelectorAll('[data-component-id]');
+        if (elements.length === 0) {
+            setPositions([]);
+            return;
+        }
+        const containerRect = container.getBoundingClientRect();
+        const newPositions = [];
+        elements.forEach((el) => {
+            const componentId = el.getAttribute('data-component-id');
+            if (!componentId)
+                return;
+            const rect = el.getBoundingClientRect();
+            newPositions.push({
+                componentId,
+                top: rect.top - containerRect.top,
+                left: rect.left - containerRect.left,
+                width: rect.width,
+                height: rect.height,
+            });
+        });
+        setPositions(newPositions);
+    }, [containerRef]);
+    useEffect(() => {
+        updatePositions();
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Use ResizeObserver to track position changes
+        const observer = new ResizeObserver(() => {
+            updatePositions();
+        });
+        observer.observe(container);
+        // Also listen for window resize
+        const handleResize = () => updatePositions();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [containerRef, updatePositions]);
+    if (positions.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "component-click-overlay", style: overlayContainerStyle, "aria-label": `${branchLabel} component overlay`, children: positions.map((pos) => {
+            const selection = selections[pos.componentId] || 'none';
+            const colorStyle = selectionColors[selection] ?? selectionColors['none'] ?? {};
+            const indicatorColor = selectionIndicatorColors[selection];
+            return (_jsx("div", { "data-testid": `component-overlay-${pos.componentId}`, style: {
+                    position: 'absolute',
+                    top: pos.top,
+                    left: pos.left,
+                    width: pos.width,
+                    height: pos.height,
+                    cursor: interactive ? 'pointer' : 'default',
+                    pointerEvents: interactive ? 'auto' : 'none',
+                    border: `2px solid ${colorStyle.borderColor}`,
+                    borderRadius: '4px',
+                    background: colorStyle.background,
+                    transition: 'border-color 0.15s, background 0.15s',
+                    boxSizing: 'border-box',
+                }, onClick: interactive
+                    ? (e) => {
+                        e.stopPropagation();
+                        onComponentClick(pos.componentId);
+                    }
+                    : undefined, children: indicatorColor && (_jsx("div", { className: "component-click-overlay__indicator", style: {
+                        position: 'absolute',
+                        top: '-6px',
+                        right: '-6px',
+                        width: '16px',
+                        height: '16px',
+                        borderRadius: '50%',
+                        background: indicatorColor,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: '10px',
+                        color: '#fff',
+                        fontWeight: 700,
+                    }, children: '\u2713' })) }, pos.componentId));
+        }) }));
+}
+//# sourceMappingURL=ComponentClickOverlay.js.map

package/dist/merge/components/merge-resolution/ComponentClickOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentClickOverlay.js","sourceRoot":"","sources":["../../../../src/merge/components/merge-resolution/ComponentClickOverlay.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AAEH,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA0BhE,gFAAgF;AAChF,yBAAyB;AACzB,gFAAgF;AAEhF,MAAM,qBAAqB,GAAwB;IACjD,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,aAAa,EAAE,MAAM;CACtB,CAAC;AAEF,MAAM,eAAe,GAAwC;IAC3D,MAAM,EAAE;QACN,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,wBAAwB;KACrC;IACD,MAAM,EAAE;QACN,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,yBAAyB;KACtC;IACD,IAAI,EAAE;QACJ,WAAW,EAAE,aAAa;QAC1B,UAAU,EAAE,aAAa;KAC1B;CACF,CAAC;AAEF,MAAM,wBAAwB,GAA2B;IACvD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,gFAAgF;AAChF,YAAY;AACZ,gFAAgF;AAEhF;;;;;;GAMG;AACH,MAAM,UAAU,qBAAqB,CAAC,EACpC,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,WAAW,GACgB;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,YAAY,CAAC,EAAE,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,SAAS,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;QACnE,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC1B,YAAY,CAAC,EAAE,CAAC,CAAC;YACjB,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;QACxD,MAAM,YAAY,GAAwB,EAAE,CAAC;QAE7C,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YACtB,MAAM,WAAW,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;YACzD,IAAI,CAAC,WAAW;gBAAE,OAAO;YAEzB,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;YACxC,YAAY,CAAC,IAAI,CAAC;gBAChB,WAAW;gBACX,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG;gBACjC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI;gBACpC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC;QAElB,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QACvC,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,+CAA+C;QAC/C,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QAE5B,gCAAgC;QAChC,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC;QAC7C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,cACE,SAAS,EAAC,yBAAyB,EACnC,KAAK,EAAE,qBAAqB,gBAChB,GAAG,WAAW,oBAAoB,YAE7C,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,MAAM,CAAC;YACxD,MAAM,UAAU,GAAG,eAAe,CAAC,SAAS,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YAC/E,MAAM,cAAc,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAC;YAE3D,OAAO,CACL,6BAEe,qBAAqB,GAAG,CAAC,WAAW,EAAE,EACnD,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,GAAG,CAAC,GAAG;oBACZ,IAAI,EAAE,GAAG,CAAC,IAAI;oBACd,KAAK,EAAE,GAAG,CAAC,KAAK;oBAChB,MAAM,EAAE,GAAG,CAAC,MAAM;oBAClB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBAC3C,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;oBAC5C,MAAM,EAAE,aAAa,UAAU,CAAC,WAAW,EAAE;oBAC7C,YAAY,EAAE,KAAK;oBACnB,UAAU,EAAE,UAAU,CAAC,UAAU;oBACjC,UAAU,EAAE,sCAAsC;oBAClD,SAAS,EAAE,YAAY;iBACxB,EACD,OAAO,EACL,WAAW;oBACT,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;wBACJ,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;oBACpC,CAAC;oBACH,CAAC,CAAC,SAAS,YAId,cAAc,IAAI,CACjB,cACE,SAAS,EAAC,oCAAoC,EAC9C,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,MAAM;wBACX,KAAK,EAAE,MAAM;wBACb,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,YAAY,EAAE,KAAK;wBACnB,UAAU,EAAE,cAAc;wBAC1B,OAAO,EAAE,MAAM;wBACf,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,QAAQ,EAAE,MAAM;wBAChB,KAAK,EAAE,MAAM;wBACb,UAAU,EAAE,GAAG;qBAChB,YAEA,QAAQ,GACL,CACP,IA/CI,GAAG,CAAC,WAAW,CAgDhB,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/merge/components/merge-resolution/DocumentResolutionDetail.d.ts

@@ -0,0 +1,26 @@
+/**
+ * DocumentResolutionDetail Component
+ *
+ * Expanded view for a single document showing strategy options,
+ * visual comparison via MergePreviewRenderer, cherry-pick visual panel,
+ * and delete-type conflict messages.
+ *
+ * All visual styling uses inline React styles.
+ */
+import React from 'react';
+import type { DocumentResolution, DocumentResolutionStrategy } from '../../useMergeResolution.js';
+import type { ComponentDiffWithPosition } from '../../../core/types.js';
+export interface DocumentResolutionDetailProps {
+    document: DocumentResolution | null;
+    sourceBranchName: string;
+    targetBranchName: string;
+    onSetStrategy: (documentId: string, strategy: DocumentResolutionStrategy) => void;
+    onCherryPickSelection: (documentId: string, componentId: string, propName: string, choice: 'source' | 'target') => void;
+    onAcceptAllComponentProps: (documentId: string, componentId: string, choice: 'source' | 'target') => void;
+    /** Puck config for <Render> */
+    config?: unknown;
+    /** Pre-computed diffs for this document */
+    diffs?: ComponentDiffWithPosition[];
+}
+export declare function DocumentResolutionDetail({ document: doc, sourceBranchName, targetBranchName, onSetStrategy, onCherryPickSelection, onAcceptAllComponentProps, config, diffs, }: DocumentResolutionDetailProps): React.ReactElement;
+//# sourceMappingURL=DocumentResolutionDetail.d.ts.map

package/dist/merge/components/merge-resolution/DocumentResolutionDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentResolutionDetail.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/merge-resolution/DocumentResolutionDetail.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAClG,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAQxE,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,0BAA0B,KAAK,IAAI,CAAC;IAClF,qBAAqB,EAAE,CACrB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,QAAQ,GAAG,QAAQ,KACxB,IAAI,CAAC;IACV,yBAAyB,EAAE,CACzB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,QAAQ,GAAG,QAAQ,KACxB,IAAI,CAAC;IACV,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,yBAAyB,EAAE,CAAC;CACrC;AA0KD,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,qBAAqB,EACrB,yBAAyB,EACzB,MAAM,EACN,KAAU,GACX,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CA6SpD"}