@pantheon-systems/puck-css 0.4.0

package/dist/merge/components/conflict-notifications/ConflictNotificationToast.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseClass = 'css-puck-conflict-toast';
+/**
+ * Get the icon for a notification type.
+ */
+function getTypeIcon(type) {
+    switch (type) {
+        case 'agent_editing':
+            return '🤖';
+        case 'human_conflict':
+            return '👥';
+        case 'agent_checkpoint':
+            return '✓';
+        case 'agent_kicked':
+            return '⚡';
+        default:
+            return '⚠';
+    }
+}
+/**
+ * Get aria-live value for notification type.
+ */
+function getAriaLive(type) {
+    switch (type) {
+        case 'agent_editing':
+        case 'human_conflict':
+            return 'assertive';
+        default:
+            return 'polite';
+    }
+}
+/**
+ * Toast component for conflict notifications.
+ *
+ * @example
+ * ```tsx
+ * <ConflictNotificationToast
+ *   notification={notification}
+ *   onDismiss={(id) => dismiss(id)}
+ *   onAction={() => viewChanges()}
+ *   actionLabel="View Changes"
+ * />
+ * ```
+ */
+export function ConflictNotificationToast({ notification, onDismiss, onAction, actionLabel, className = '', }) {
+    const handleDismiss = () => {
+        onDismiss(notification.id);
+    };
+    const containerClasses = [
+        baseClass,
+        `${baseClass}--${notification.type}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: containerClasses, role: "alert", "aria-live": getAriaLive(notification.type), children: [_jsx("span", { className: `${baseClass}__icon`, "aria-label": "Conflict notification", role: "img", children: getTypeIcon(notification.type) }), _jsxs("div", { className: `${baseClass}__content`, children: [notification.agentName && (_jsx("div", { className: `${baseClass}__agent-name`, children: notification.agentName })), _jsx("div", { className: `${baseClass}__message`, children: notification.message }), notification.conflictingRegions &&
+                        notification.conflictingRegions.length > 0 && (_jsx("div", { className: `${baseClass}__regions`, children: notification.conflictingRegions.map((region) => (_jsx("span", { className: `${baseClass}__region`, children: region }, region))) })), onAction && actionLabel && (_jsx("div", { className: `${baseClass}__actions`, children: _jsx("button", { type: "button", className: `pds-button pds-button--subtle pds-button--sm ${baseClass}__action`, onClick: onAction, children: actionLabel }) }))] }), _jsx("button", { type: "button", className: `pds-button pds-button--subtle pds-button--sm ${baseClass}__dismiss`, onClick: handleDismiss, "aria-label": "Dismiss notification", children: "\u2715" })] }));
+}
+//# sourceMappingURL=ConflictNotificationToast.js.map

package/dist/merge/components/conflict-notifications/ConflictNotificationToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConflictNotificationToast.js","sourceRoot":"","sources":["../../../../src/merge/components/conflict-notifications/ConflictNotificationToast.tsx"],"names":[],"mappings":";AAuBA,MAAM,SAAS,GAAG,yBAAyB,CAAC;AAE5C;;GAEG;AACH,SAAS,WAAW,CAAC,IAA8B;IACjD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,eAAe;YAClB,OAAO,IAAI,CAAC;QACd,KAAK,gBAAgB;YACnB,OAAO,IAAI,CAAC;QACd,KAAK,kBAAkB;YACrB,OAAO,GAAG,CAAC;QACb,KAAK,cAAc;YACjB,OAAO,GAAG,CAAC;QACb;YACE,OAAO,GAAG,CAAC;IACf,CAAC;AACH,CAAC;AAED;;GAEG;AACH,SAAS,WAAW,CAAC,IAA8B;IACjD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,eAAe,CAAC;QACrB,KAAK,gBAAgB;YACnB,OAAO,WAAW,CAAC;QACrB;YACE,OAAO,QAAQ,CAAC;IACpB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,yBAAyB,CAAC,EACxC,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,SAAS,GAAG,EAAE,GACiB;IAC/B,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG;QACvB,SAAS;QACT,GAAG,SAAS,KAAK,YAAY,CAAC,IAAI,EAAE;QACpC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eACE,SAAS,EAAE,gBAAgB,EAC3B,IAAI,EAAC,OAAO,eACD,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,aAGzC,eACE,SAAS,EAAE,GAAG,SAAS,QAAQ,gBACpB,uBAAuB,EAClC,IAAI,EAAC,KAAK,YAET,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,GAC1B,EAGP,eAAK,SAAS,EAAE,GAAG,SAAS,WAAW,aAEpC,YAAY,CAAC,SAAS,IAAI,CACzB,cAAK,SAAS,EAAE,GAAG,SAAS,cAAc,YACvC,YAAY,CAAC,SAAS,GACnB,CACP,EAGD,cAAK,SAAS,EAAE,GAAG,SAAS,WAAW,YAAG,YAAY,CAAC,OAAO,GAAO,EAGpE,YAAY,CAAC,kBAAkB;wBAC9B,YAAY,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5C,cAAK,SAAS,EAAE,GAAG,SAAS,WAAW,YACpC,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC/C,eAAmB,SAAS,EAAE,GAAG,SAAS,UAAU,YACjD,MAAM,IADE,MAAM,CAEV,CACR,CAAC,GACE,CACP,EAGF,QAAQ,IAAI,WAAW,IAAI,CAC1B,cAAK,SAAS,EAAE,GAAG,SAAS,WAAW,YACrC,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,gDAAgD,SAAS,UAAU,EAC9E,OAAO,EAAE,QAAQ,YAEhB,WAAW,GACL,GACL,CACP,IACG,EAGN,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,gDAAgD,SAAS,WAAW,EAC/E,OAAO,EAAE,aAAa,gBACX,sBAAsB,uBAG1B,IACL,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,10 @@
+/**
+ * Conflict Notifications
+ *
+ * Components and hooks for real-time conflict notifications.
+ */
+export { useConflictNotifications } from './useConflictNotifications.js';
+export type { ConflictNotification, ConflictNotificationType, UseConflictNotificationsOptions, UseConflictNotificationsReturn, } from './useConflictNotifications.js';
+export { ConflictNotificationToast } from './ConflictNotificationToast.js';
+export type { ConflictNotificationToastProps } from './ConflictNotificationToast.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/conflict-notifications/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,+BAA+B,EAC/B,8BAA8B,GAC/B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,YAAY,EAAE,8BAA8B,EAAE,MAAM,gCAAgC,CAAC"}

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

@@ -0,0 +1,8 @@
+/**
+ * Conflict Notifications
+ *
+ * Components and hooks for real-time conflict notifications.
+ */
+export { useConflictNotifications } from './useConflictNotifications.js';
+export { ConflictNotificationToast } from './ConflictNotificationToast.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/merge/components/conflict-notifications/useConflictNotifications.d.ts

@@ -0,0 +1,69 @@
+/**
+ * useConflictNotifications Hook
+ *
+ * Hook for managing real-time conflict notifications.
+ * Listens to WebSocket events for collaboration conflicts.
+ */
+/**
+ * Type of conflict notification.
+ */
+export type ConflictNotificationType = 'agent_editing' | 'human_conflict' | 'agent_checkpoint' | 'agent_kicked';
+/**
+ * A conflict notification.
+ */
+export interface ConflictNotification {
+    id: string;
+    type: ConflictNotificationType;
+    agentId?: string;
+    agentName?: string;
+    conflictingRegions?: string[];
+    message: string;
+    timestamp: string;
+}
+/**
+ * Options for useConflictNotifications hook.
+ */
+export interface UseConflictNotificationsOptions {
+    /** Auto-dismiss checkpoint notifications */
+    autoDismissCheckpoints?: boolean;
+    /** Auto-dismiss delay in milliseconds */
+    autoDismissMs?: number;
+}
+/**
+ * Return type for useConflictNotifications hook.
+ */
+export interface UseConflictNotificationsReturn {
+    /** Active conflict notifications */
+    notifications: ConflictNotification[];
+    /** Dismiss a notification by ID */
+    dismiss: (id: string) => void;
+    /** Dismiss all notifications */
+    dismissAll: () => void;
+}
+/**
+ * Hook for managing real-time conflict notifications.
+ *
+ * Subscribes to the PresenceContext for WebSocket events and
+ * maintains a list of active conflict notifications.
+ *
+ * @example
+ * ```tsx
+ * function ConflictPanel() {
+ *   const { notifications, dismiss, dismissAll } = useConflictNotifications();
+ *
+ *   return (
+ *     <div>
+ *       {notifications.map((n) => (
+ *         <ConflictNotificationToast
+ *           key={n.id}
+ *           notification={n}
+ *           onDismiss={() => dismiss(n.id)}
+ *         />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useConflictNotifications(options?: UseConflictNotificationsOptions): UseConflictNotificationsReturn;
+//# sourceMappingURL=useConflictNotifications.d.ts.map

package/dist/merge/components/conflict-notifications/useConflictNotifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConflictNotifications.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/conflict-notifications/useConflictNotifications.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAChC,eAAe,GACf,gBAAgB,GAChB,kBAAkB,GAClB,cAAc,CAAC;AAEnB;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,wBAAwB,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,4CAA4C;IAC5C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C,oCAAoC;IACpC,aAAa,EAAE,oBAAoB,EAAE,CAAC;IACtC,mCAAmC;IACnC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,gCAAgC;IAChC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAiFD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,GAAE,+BAAoC,GAC5C,8BAA8B,CAwEhC"}

package/dist/merge/components/conflict-notifications/useConflictNotifications.js

@@ -0,0 +1,151 @@
+/**
+ * useConflictNotifications Hook
+ *
+ * Hook for managing real-time conflict notifications.
+ * Listens to WebSocket events for collaboration conflicts.
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { usePresenceContext } from '../../../core/PresenceContext.js';
+/**
+ * Generate a unique notification ID.
+ */
+function generateNotificationId() {
+    return `conflict-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+/**
+ * Get a human-readable message for a conflict event.
+ */
+function getConflictMessage(event) {
+    if (event.type === 'conflict') {
+        switch (event.conflictType) {
+            case 'agent_editing':
+                return event.agentName
+                    ? `${event.agentName} is currently editing this region`
+                    : 'An agent is currently editing this region';
+            case 'human_conflict':
+                return 'Another user is editing in the same area';
+            default:
+                return 'A conflict has occurred';
+        }
+    }
+    if (event.type === 'agent_checkpoint') {
+        return event.agentName
+            ? `${event.agentName} has completed changes and created a checkpoint`
+            : 'An agent has completed changes and created a checkpoint';
+    }
+    if (event.type === 'agent_kicked') {
+        return event.agentName
+            ? `${event.agentName} edit was interrupted due to human activity`
+            : 'Agent edit was interrupted due to human activity';
+    }
+    return 'A collaboration event occurred';
+}
+/**
+ * Convert a WebSocket event to a ConflictNotification.
+ */
+function eventToNotification(event) {
+    let type;
+    if (event.type === 'conflict') {
+        type = event.conflictType ?? 'human_conflict';
+    }
+    else if (event.type === 'agent_checkpoint') {
+        type = 'agent_checkpoint';
+    }
+    else if (event.type === 'agent_kicked') {
+        type = 'agent_kicked';
+    }
+    else {
+        type = 'human_conflict';
+    }
+    return {
+        id: generateNotificationId(),
+        type,
+        agentId: event.agentId,
+        agentName: event.agentName,
+        conflictingRegions: event.regions,
+        message: getConflictMessage(event),
+        timestamp: new Date().toISOString(),
+    };
+}
+/**
+ * Hook for managing real-time conflict notifications.
+ *
+ * Subscribes to the PresenceContext for WebSocket events and
+ * maintains a list of active conflict notifications.
+ *
+ * @example
+ * ```tsx
+ * function ConflictPanel() {
+ *   const { notifications, dismiss, dismissAll } = useConflictNotifications();
+ *
+ *   return (
+ *     <div>
+ *       {notifications.map((n) => (
+ *         <ConflictNotificationToast
+ *           key={n.id}
+ *           notification={n}
+ *           onDismiss={() => dismiss(n.id)}
+ *         />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useConflictNotifications(options = {}) {
+    const { autoDismissCheckpoints = false, autoDismissMs = 5000 } = options;
+    const [notifications, setNotifications] = useState([]);
+    const timersRef = useRef(new Map());
+    const context = usePresenceContext();
+    // Dismiss a notification by ID
+    const dismiss = useCallback((id) => {
+        // Clear any auto-dismiss timer
+        const timer = timersRef.current.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            timersRef.current.delete(id);
+        }
+        setNotifications((prev) => prev.filter((n) => n.id !== id));
+    }, []);
+    // Dismiss all notifications
+    const dismissAll = useCallback(() => {
+        timersRef.current.forEach((timer) => clearTimeout(timer));
+        timersRef.current.clear();
+        setNotifications([]);
+    }, []);
+    // Handle incoming events
+    const handleEvent = useCallback((event) => {
+        const conflictEvent = event;
+        // Only handle conflict-related events
+        if (conflictEvent.type !== 'conflict' &&
+            conflictEvent.type !== 'agent_checkpoint' &&
+            conflictEvent.type !== 'agent_kicked') {
+            return;
+        }
+        const notification = eventToNotification(conflictEvent);
+        setNotifications((prev) => [...prev, notification]);
+        // Set up auto-dismiss for checkpoint notifications
+        if (autoDismissCheckpoints && notification.type === 'agent_checkpoint') {
+            const timer = setTimeout(() => {
+                dismiss(notification.id);
+            }, autoDismissMs);
+            timersRef.current.set(notification.id, timer);
+        }
+    }, [autoDismissCheckpoints, autoDismissMs, dismiss]);
+    // Subscribe to presence events
+    useEffect(() => {
+        const unsubscribe = context.subscribe(handleEvent);
+        return () => {
+            unsubscribe();
+            // Clear all timers on unmount
+            timersRef.current.forEach((timer) => clearTimeout(timer));
+            timersRef.current.clear();
+        };
+    }, [context, handleEvent]);
+    return {
+        notifications,
+        dismiss,
+        dismissAll,
+    };
+}
+//# sourceMappingURL=useConflictNotifications.js.map

package/dist/merge/components/conflict-notifications/useConflictNotifications.js.map

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

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

@@ -0,0 +1,55 @@
+/**
+ * ComponentConflictGroup Component
+ *
+ * Displays conflicts for a single Puck component, showing each conflicting
+ * prop with source and target values and radio buttons for resolution.
+ *
+ * All visual styling uses inline React styles. BEM class names are retained
+ * as secondary identifiers for test assertions.
+ */
+import React from 'react';
+import type { PuckFieldClassification } from '../../utils/puckFieldClassifier.js';
+/**
+ * Props for the ComponentConflictGroup component.
+ */
+export interface ComponentConflictGroupProps {
+    /** The Puck component type name (e.g. "Heading", "Text") */
+    componentType: string;
+    /** The Puck component ID */
+    componentId: string;
+    /** Classified fields for this component */
+    fields: PuckFieldClassification[];
+    /** Display name of the source branch */
+    sourceBranchName: string;
+    /** Display name of the target branch */
+    targetBranchName: string;
+    /** Current resolution choices keyed by propName */
+    resolutions: Record<string, 'source' | 'target'>;
+    /** Callback when a resolution radio is selected */
+    onResolutionChange: (componentId: string, propName: string, choice: 'source' | 'target') => void;
+}
+/**
+ * Renders a group of conflicting fields for a single Puck component.
+ *
+ * Shows the component type as a header, a conflict count badge, and
+ * for each field: the prop name, source/target values, and radio
+ * buttons to choose which side to keep.
+ *
+ * @param props - {@link ComponentConflictGroupProps}
+ * @returns A React element displaying the conflict group with resolution controls.
+ *
+ * @example
+ * ```tsx
+ * <ComponentConflictGroup
+ *   componentType="Heading"
+ *   componentId="h1"
+ *   fields={conflictingFields}
+ *   sourceBranchName="feature"
+ *   targetBranchName="main"
+ *   resolutions={resolutions}
+ *   onResolutionChange={handleChange}
+ * />
+ * ```
+ */
+export declare function ComponentConflictGroup({ componentType, componentId, fields, sourceBranchName, targetBranchName, resolutions, onResolutionChange, }: ComponentConflictGroupProps): React.ReactElement;
+//# sourceMappingURL=ComponentConflictGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentConflictGroup.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/conflict-resolution/ComponentConflictGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,4DAA4D;IAC5D,aAAa,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,MAAM,EAAE,uBAAuB,EAAE,CAAC;IAClC,wCAAwC;IACxC,gBAAgB,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;IACjD,mDAAmD;IACnD,kBAAkB,EAAE,CAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,QAAQ,GAAG,QAAQ,KACxB,IAAI,CAAC;CACX;AA+FD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,WAAW,EACX,MAAM,EACN,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,kBAAkB,GACnB,EAAE,2BAA2B,GAAG,KAAK,CAAC,YAAY,CAuElD"}

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const baseClass = 'component-conflict-group';
+// =============================================================================
+// Inline Style Constants
+// =============================================================================
+const containerStyle = {
+    marginBottom: '16px',
+};
+const headerStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    marginBottom: '8px',
+};
+const titleStyle = {
+    fontSize: '15px',
+    fontWeight: 600,
+    margin: 0,
+};
+const conflictCountStyle = {
+    fontSize: '12px',
+    padding: '2px 8px',
+    borderRadius: '10px',
+    background: '#fef3c7',
+    color: '#92400e',
+};
+const fieldsContainerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+};
+const fieldRowStyle = {
+    padding: '8px 12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+};
+const fieldNameStyle = {
+    fontWeight: 500,
+    fontSize: '13px',
+    marginBottom: '4px',
+};
+const fieldValuesStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+};
+const optionLabelStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    fontSize: '13px',
+    cursor: 'pointer',
+};
+const branchNameStyle = {
+    fontWeight: 500,
+    color: '#374151',
+};
+const valueStyle = {
+    color: '#6b7280',
+    fontFamily: 'monospace',
+    fontSize: '12px',
+};
+// =============================================================================
+// Helpers
+// =============================================================================
+/**
+ * Formats a value for display. Objects and arrays are JSON-stringified;
+ * primitives are converted to string directly.
+ */
+function formatValue(value) {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'object')
+        return JSON.stringify(value);
+    return String(value);
+}
+// =============================================================================
+// Component
+// =============================================================================
+/**
+ * Renders a group of conflicting fields for a single Puck component.
+ *
+ * Shows the component type as a header, a conflict count badge, and
+ * for each field: the prop name, source/target values, and radio
+ * buttons to choose which side to keep.
+ *
+ * @param props - {@link ComponentConflictGroupProps}
+ * @returns A React element displaying the conflict group with resolution controls.
+ *
+ * @example
+ * ```tsx
+ * <ComponentConflictGroup
+ *   componentType="Heading"
+ *   componentId="h1"
+ *   fields={conflictingFields}
+ *   sourceBranchName="feature"
+ *   targetBranchName="main"
+ *   resolutions={resolutions}
+ *   onResolutionChange={handleChange}
+ * />
+ * ```
+ */
+export function ComponentConflictGroup({ componentType, componentId, fields, sourceBranchName, targetBranchName, resolutions, onResolutionChange, }) {
+    const conflictCount = fields.filter((f) => f.classification === 'conflicting').length;
+    return (_jsxs("div", { className: baseClass, style: containerStyle, children: [_jsxs("div", { className: `${baseClass}__header`, style: headerStyle, children: [_jsx("h3", { className: `${baseClass}__title`, style: titleStyle, children: componentType }), _jsxs("span", { className: `${baseClass}__conflict-count`, style: conflictCountStyle, children: [conflictCount, " ", conflictCount === 1 ? 'conflict' : 'conflicts'] })] }), _jsx("div", { className: `${baseClass}__fields`, style: fieldsContainerStyle, children: fields.map((field) => {
+                    const radioName = `${componentId}-${field.propName}`;
+                    return (_jsxs("div", { className: `${baseClass}__field`, style: fieldRowStyle, children: [_jsx("div", { className: `${baseClass}__field-name`, style: fieldNameStyle, children: field.propName }), _jsxs("div", { className: `${baseClass}__field-values`, style: fieldValuesStyle, children: [_jsxs("label", { className: `${baseClass}__option`, style: optionLabelStyle, children: [_jsx("input", { type: "radio", name: radioName, value: "source", checked: resolutions[field.propName] === 'source', onChange: () => onResolutionChange(componentId, field.propName, 'source') }), _jsxs("span", { className: `${baseClass}__branch-name`, style: branchNameStyle, children: [sourceBranchName, ":"] }), ' ', _jsx("span", { className: `${baseClass}__value`, style: valueStyle, children: formatValue(field.sourceValue) })] }), _jsxs("label", { className: `${baseClass}__option`, style: optionLabelStyle, children: [_jsx("input", { type: "radio", name: radioName, value: "target", checked: resolutions[field.propName] === 'target', onChange: () => onResolutionChange(componentId, field.propName, 'target') }), _jsxs("span", { className: `${baseClass}__branch-name`, style: branchNameStyle, children: [targetBranchName, ":"] }), ' ', _jsx("span", { className: `${baseClass}__value`, style: valueStyle, children: formatValue(field.targetValue) })] })] })] }, field.propName));
+                }) })] }));
+}
+//# sourceMappingURL=ComponentConflictGroup.js.map

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

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

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

@@ -0,0 +1,51 @@
+/**
+ * PuckFieldResolutionPanel Component
+ *
+ * Main panel for Puck-aware field-level conflict resolution. Groups
+ * conflicts by component, separates auto-merged fields from conflicting
+ * fields, and provides radio-button resolution for each conflict.
+ */
+import React from 'react';
+import type { PuckData } from '@pantheon-systems/css-client';
+/**
+ * Props for the PuckFieldResolutionPanel component.
+ */
+export interface PuckFieldResolutionPanelProps {
+    /** The source branch snapshot */
+    sourceSnapshot: PuckData;
+    /** The target branch snapshot */
+    targetSnapshot: PuckData;
+    /** The common ancestor snapshot (null for two-way comparison) */
+    baseSnapshot: PuckData | null;
+    /** Display name of the source branch */
+    sourceBranchName: string;
+    /** Display name of the target branch */
+    targetBranchName: string;
+    /** Callback with the merged PuckData when user applies resolutions */
+    onResolve: (merged: PuckData) => void;
+}
+/**
+ * Main panel for Puck-aware field-level conflict resolution.
+ *
+ * Classifies all field changes between source and target, separates
+ * auto-merged fields from true conflicts, and renders radio-button
+ * resolution UI grouped by component.
+ *
+ * @param props - {@link PuckFieldResolutionPanelProps}
+ * @returns A React element containing the resolution UI with auto-merge summary,
+ *          conflict groups, and an apply button.
+ *
+ * @example
+ * ```tsx
+ * <PuckFieldResolutionPanel
+ *   sourceSnapshot={sourceBranchData}
+ *   targetSnapshot={targetBranchData}
+ *   baseSnapshot={commonAncestor}
+ *   sourceBranchName="feature-branch"
+ *   targetBranchName="main"
+ *   onResolve={(merged) => saveMerged(merged)}
+ * />
+ * ```
+ */
+export declare function PuckFieldResolutionPanel({ sourceSnapshot, targetSnapshot, baseSnapshot, sourceBranchName, targetBranchName, onResolve, }: PuckFieldResolutionPanelProps): React.ReactElement;
+//# sourceMappingURL=PuckFieldResolutionPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PuckFieldResolutionPanel.d.ts","sourceRoot":"","sources":["../../../../src/merge/components/conflict-resolution/PuckFieldResolutionPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAS7D;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,iCAAiC;IACjC,cAAc,EAAE,QAAQ,CAAC;IACzB,iCAAiC;IACjC,cAAc,EAAE,QAAQ,CAAC;IACzB,iEAAiE;IACjE,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC9B,wCAAwC;IACxC,gBAAgB,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,gBAAgB,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,SAAS,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;CACvC;AAWD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CA2HpD"}

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PuckFieldResolutionPanel Component
+ *
+ * Main panel for Puck-aware field-level conflict resolution. Groups
+ * conflicts by component, separates auto-merged fields from conflicting
+ * fields, and provides radio-button resolution for each conflict.
+ */
+import { useState, useMemo, useCallback } from 'react';
+import { classifyPuckFields, groupFieldsByComponent, buildMergedSnapshot, } from '../../utils/puckFieldClassifier.js';
+import { ComponentConflictGroup } from './ComponentConflictGroup.js';
+const baseClass = 'puck-field-resolution-panel';
+/**
+ * Builds a unique key for a field resolution entry.
+ */
+function fieldKey(componentId, propName) {
+    return `${componentId}:${propName}`;
+}
+/**
+ * Main panel for Puck-aware field-level conflict resolution.
+ *
+ * Classifies all field changes between source and target, separates
+ * auto-merged fields from true conflicts, and renders radio-button
+ * resolution UI grouped by component.
+ *
+ * @param props - {@link PuckFieldResolutionPanelProps}
+ * @returns A React element containing the resolution UI with auto-merge summary,
+ *          conflict groups, and an apply button.
+ *
+ * @example
+ * ```tsx
+ * <PuckFieldResolutionPanel
+ *   sourceSnapshot={sourceBranchData}
+ *   targetSnapshot={targetBranchData}
+ *   baseSnapshot={commonAncestor}
+ *   sourceBranchName="feature-branch"
+ *   targetBranchName="main"
+ *   onResolve={(merged) => saveMerged(merged)}
+ * />
+ * ```
+ */
+export function PuckFieldResolutionPanel({ sourceSnapshot, targetSnapshot, baseSnapshot, sourceBranchName, targetBranchName, onResolve, }) {
+    // Classify all fields
+    const allFields = useMemo(() => classifyPuckFields(sourceSnapshot, targetSnapshot, baseSnapshot), [sourceSnapshot, targetSnapshot, baseSnapshot]);
+    // Separate auto-merged from conflicting
+    const autoMergedFields = useMemo(() => allFields.filter((f) => f.classification === 'source-only' ||
+        f.classification === 'target-only'), [allFields]);
+    const conflictingFields = useMemo(() => allFields.filter((f) => f.classification === 'conflicting'), [allFields]);
+    // Group conflicting fields by component
+    const conflictGroups = useMemo(() => groupFieldsByComponent(conflictingFields), [conflictingFields]);
+    // Resolution state
+    const [resolutions, setResolutions] = useState({});
+    // Check if all conflicts are resolved
+    const allResolved = useMemo(() => {
+        if (conflictingFields.length === 0)
+            return true;
+        return conflictingFields.every((f) => resolutions[fieldKey(f.componentId, f.propName)] !== undefined);
+    }, [conflictingFields, resolutions]);
+    // Handle resolution change
+    const handleResolutionChange = useCallback((componentId, propName, choice) => {
+        setResolutions((prev) => ({
+            ...prev,
+            [fieldKey(componentId, propName)]: choice,
+        }));
+    }, []);
+    // Handle apply
+    const handleApply = useCallback(() => {
+        const merged = buildMergedSnapshot(sourceSnapshot, targetSnapshot, allFields, resolutions);
+        onResolve(merged);
+    }, [sourceSnapshot, targetSnapshot, allFields, resolutions, onResolve]);
+    return (_jsxs("div", { className: baseClass, children: [_jsx("h2", { className: `${baseClass}__title`, children: "Resolve field conflicts" }), autoMergedFields.length > 0 && (_jsx("div", { className: `${baseClass}__auto-merged`, children: _jsxs("p", { className: `${baseClass}__auto-merged-summary`, children: [autoMergedFields.length, ' ', autoMergedFields.length === 1 ? 'field was' : 'fields were', " auto-merged"] }) })), conflictGroups.length > 0 && (_jsxs("div", { className: `${baseClass}__conflicts`, children: [_jsx("h3", { className: `${baseClass}__conflicts-title`, children: "Conflicts requiring resolution" }), conflictGroups.map((group) => (_jsx(ComponentConflictGroup, { componentType: group.componentType, componentId: group.componentId, fields: group.fields, sourceBranchName: sourceBranchName, targetBranchName: targetBranchName, resolutions: Object.fromEntries(Object.entries(resolutions)
+                            .filter(([k]) => k.startsWith(`${group.componentId}:`))
+                            .map(([k, v]) => [k.split(':').slice(1).join(':'), v])), onResolutionChange: handleResolutionChange }, group.componentId)))] })), conflictGroups.length === 0 && autoMergedFields.length > 0 && (_jsx("p", { className: `${baseClass}__no-conflicts`, children: "All changes were auto-merged. No manual resolution needed." })), _jsx("div", { className: `${baseClass}__actions`, children: _jsx("button", { type: "button", className: `${baseClass}__apply-button`, disabled: !allResolved, onClick: handleApply, children: "Apply resolution" }) })] }));
+}
+//# sourceMappingURL=PuckFieldResolutionPanel.js.map

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

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