@fgv/ts-res-ui-components 5.0.0-10

package/lib/components/views/ResolutionView/EditableJsonView.js

@@ -0,0 +1,109 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { JsonEditor } from 'json-edit-react';
+import { PencilIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { validateEditedResource } from '../../../utils/resolutionEditing';
+export const EditableJsonView = ({ value, resourceId, isEdited = false, editedValue, onSave, onCancel, disabled = false, className = '' }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [currentEditValue, setCurrentEditValue] = useState(null);
+    const [validationErrors, setValidationErrors] = useState([]);
+    // The display value is either the edited value or the original value
+    const displayValue = useMemo(() => {
+        if (isEdited && editedValue !== undefined) {
+            return editedValue;
+        }
+        return value;
+    }, [value, editedValue, isEdited]);
+    // Handle starting an edit
+    const handleStartEdit = useCallback(() => {
+        if (disabled)
+            return;
+        setCurrentEditValue(displayValue);
+        setIsEditing(true);
+        setValidationErrors([]);
+    }, [displayValue, disabled]);
+    // Handle canceling an edit
+    const handleCancelEdit = useCallback(() => {
+        setIsEditing(false);
+        setCurrentEditValue(null);
+        setValidationErrors([]);
+        onCancel?.(resourceId);
+    }, [resourceId, onCancel]);
+    // Handle saving an edit
+    const handleSaveEdit = useCallback(() => {
+        if (!onSave || currentEditValue === null)
+            return;
+        // Validate the edited value
+        const validation = validateEditedResource(currentEditValue);
+        if (!validation.isValid) {
+            setValidationErrors(validation.errors);
+            return;
+        }
+        // Save the edit
+        onSave(resourceId, currentEditValue, value);
+        setIsEditing(false);
+        setCurrentEditValue(null);
+        setValidationErrors([]);
+    }, [resourceId, currentEditValue, value, onSave]);
+    // Handle changes in the JSON editor
+    const handleJsonChange = useCallback((newValue) => {
+        setCurrentEditValue(newValue);
+        // Clear validation errors when user starts typing
+        if (validationErrors.length > 0) {
+            setValidationErrors([]);
+        }
+    }, [validationErrors]);
+    // JSON editor configuration
+    const jsonEditConfig = useMemo(() => ({
+        minHeight: '200px',
+        maxHeight: '400px',
+        style: {
+            container: {
+                backgroundColor: '#f9fafb',
+                border: '1px solid #d1d5db',
+                borderRadius: '0.375rem',
+                fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+            },
+            key: {
+                color: '#1f2937',
+                fontWeight: '500'
+            },
+            string: {
+                color: '#059669'
+            },
+            number: {
+                color: '#dc2626'
+            },
+            boolean: {
+                color: '#7c3aed'
+            },
+            null: {
+                color: '#6b7280'
+            }
+        },
+        enableHighlight: true,
+        enableClipboard: true
+    }), []);
+    return (React.createElement("div", { className: `bg-white rounded-lg border ${className}` },
+        React.createElement("div", { className: "flex items-center justify-between p-3 border-b bg-gray-50" },
+            React.createElement("div", { className: "flex items-center space-x-2" },
+                React.createElement("h4", { className: "text-sm font-semibold text-gray-900" }, "Resource Content"),
+                isEdited && (React.createElement("span", { className: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800" }, "Edited"))),
+            !isEditing && (React.createElement("button", { onClick: handleStartEdit, disabled: disabled, className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed", title: "Edit resource content" },
+                React.createElement(PencilIcon, { className: "h-4 w-4 mr-1" }),
+                "Edit")),
+            isEditing && (React.createElement("div", { className: "flex items-center space-x-2" },
+                React.createElement("button", { onClick: handleSaveEdit, disabled: validationErrors.length > 0, className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed", title: "Save changes" },
+                    React.createElement(CheckIcon, { className: "h-4 w-4 mr-1" }),
+                    "Save"),
+                React.createElement("button", { onClick: handleCancelEdit, className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", title: "Cancel changes" },
+                    React.createElement(XMarkIcon, { className: "h-4 w-4 mr-1" }),
+                    "Cancel")))),
+        validationErrors.length > 0 && (React.createElement("div", { className: "p-3 border-b bg-red-50" },
+            React.createElement("div", { className: "text-sm text-red-800" },
+                React.createElement("p", { className: "font-medium mb-1" }, "Validation Errors:"),
+                React.createElement("ul", { className: "list-disc list-inside space-y-1" }, validationErrors.map((error, index) => (React.createElement("li", { key: index }, error))))))),
+        React.createElement("div", { className: "p-3" }, isEditing ? (React.createElement(JsonEditor, { data: currentEditValue, setData: handleJsonChange, ...jsonEditConfig })) : (React.createElement("pre", { className: "text-sm font-mono text-gray-800 bg-gray-50 p-3 rounded border overflow-x-auto whitespace-pre-wrap" }, JSON.stringify(displayValue, null, 2)))),
+        isEditing && (React.createElement("div", { className: "px-3 pb-3" },
+            React.createElement("p", { className: "text-xs text-gray-500" }, "Edit the JSON content above. Changes will be saved as a new candidate with the current resolution context.")))));
+};
+//# sourceMappingURL=EditableJsonView.js.map

package/lib/components/views/ResolutionView/EditableJsonView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableJsonView.js","sourceRoot":"","sources":["../../../../src/components/views/ResolutionView/EditableJsonView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useMemo } from 'react';\nimport { JsonEditor } from 'json-edit-react';\nimport { PencilIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';\nimport { validateEditedResource } from '../../../utils/resolutionEditing';\n\nexport interface EditableJsonViewProps {\n  /** The original JSON value */\n  value: any;\n  /** The resource ID for tracking edits */\n  resourceId: string;\n  /** Whether this resource has been edited */\n  isEdited?: boolean;\n  /** The current edited value if any */\n  editedValue?: any;\n  /** Callback when the user saves an edit */\n  onSave?: (resourceId: string, editedValue: any, originalValue: any) => void;\n  /** Callback when the user cancels an edit */\n  onCancel?: (resourceId: string) => void;\n  /** Whether editing is currently disabled */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport const EditableJsonView: React.FC<EditableJsonViewProps> = ({\n  value,\n  resourceId,\n  isEdited = false,\n  editedValue,\n  onSave,\n  onCancel,\n  disabled = false,\n  className = ''\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [currentEditValue, setCurrentEditValue] = useState<any>(null);\n  const [validationErrors, setValidationErrors] = useState<string[]>([]);\n\n  // The display value is either the edited value or the original value\n  const displayValue = useMemo(() => {\n    if (isEdited && editedValue !== undefined) {\n      return editedValue;\n    }\n    return value;\n  }, [value, editedValue, isEdited]);\n\n  // Handle starting an edit\n  const handleStartEdit = useCallback(() => {\n    if (disabled) return;\n    setCurrentEditValue(displayValue);\n    setIsEditing(true);\n    setValidationErrors([]);\n  }, [displayValue, disabled]);\n\n  // Handle canceling an edit\n  const handleCancelEdit = useCallback(() => {\n    setIsEditing(false);\n    setCurrentEditValue(null);\n    setValidationErrors([]);\n    onCancel?.(resourceId);\n  }, [resourceId, onCancel]);\n\n  // Handle saving an edit\n  const handleSaveEdit = useCallback(() => {\n    if (!onSave || currentEditValue === null) return;\n\n    // Validate the edited value\n    const validation = validateEditedResource(currentEditValue);\n    if (!validation.isValid) {\n      setValidationErrors(validation.errors);\n      return;\n    }\n\n    // Save the edit\n    onSave(resourceId, currentEditValue, value);\n    setIsEditing(false);\n    setCurrentEditValue(null);\n    setValidationErrors([]);\n  }, [resourceId, currentEditValue, value, onSave]);\n\n  // Handle changes in the JSON editor\n  const handleJsonChange = useCallback(\n    (newValue: any) => {\n      setCurrentEditValue(newValue);\n\n      // Clear validation errors when user starts typing\n      if (validationErrors.length > 0) {\n        setValidationErrors([]);\n      }\n    },\n    [validationErrors]\n  );\n\n  // JSON editor configuration\n  const jsonEditConfig = useMemo(\n    () => ({\n      minHeight: '200px',\n      maxHeight: '400px',\n      style: {\n        container: {\n          backgroundColor: '#f9fafb',\n          border: '1px solid #d1d5db',\n          borderRadius: '0.375rem',\n          fontFamily:\n            'ui-monospace, SFMono-Regular, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace'\n        },\n        key: {\n          color: '#1f2937',\n          fontWeight: '500'\n        },\n        string: {\n          color: '#059669'\n        },\n        number: {\n          color: '#dc2626'\n        },\n        boolean: {\n          color: '#7c3aed'\n        },\n        null: {\n          color: '#6b7280'\n        }\n      },\n      enableHighlight: true,\n      enableClipboard: true\n    }),\n    []\n  );\n\n  return (\n    <div className={`bg-white rounded-lg border ${className}`}>\n      {/* Header with edit controls */}\n      <div className=\"flex items-center justify-between p-3 border-b bg-gray-50\">\n        <div className=\"flex items-center space-x-2\">\n          <h4 className=\"text-sm font-semibold text-gray-900\">Resource Content</h4>\n          {isEdited && (\n            <span className=\"inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800\">\n              Edited\n            </span>\n          )}\n        </div>\n\n        {!isEditing && (\n          <button\n            onClick={handleStartEdit}\n            disabled={disabled}\n            className=\"inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed\"\n            title=\"Edit resource content\"\n          >\n            <PencilIcon className=\"h-4 w-4 mr-1\" />\n            Edit\n          </button>\n        )}\n\n        {isEditing && (\n          <div className=\"flex items-center space-x-2\">\n            <button\n              onClick={handleSaveEdit}\n              disabled={validationErrors.length > 0}\n              className=\"inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed\"\n              title=\"Save changes\"\n            >\n              <CheckIcon className=\"h-4 w-4 mr-1\" />\n              Save\n            </button>\n            <button\n              onClick={handleCancelEdit}\n              className=\"inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n              title=\"Cancel changes\"\n            >\n              <XMarkIcon className=\"h-4 w-4 mr-1\" />\n              Cancel\n            </button>\n          </div>\n        )}\n      </div>\n\n      {/* Validation errors */}\n      {validationErrors.length > 0 && (\n        <div className=\"p-3 border-b bg-red-50\">\n          <div className=\"text-sm text-red-800\">\n            <p className=\"font-medium mb-1\">Validation Errors:</p>\n            <ul className=\"list-disc list-inside space-y-1\">\n              {validationErrors.map((error, index) => (\n                <li key={index}>{error}</li>\n              ))}\n            </ul>\n          </div>\n        </div>\n      )}\n\n      {/* JSON content */}\n      <div className=\"p-3\">\n        {isEditing ? (\n          <JsonEditor data={currentEditValue} setData={handleJsonChange} {...jsonEditConfig} />\n        ) : (\n          <pre className=\"text-sm font-mono text-gray-800 bg-gray-50 p-3 rounded border overflow-x-auto whitespace-pre-wrap\">\n            {JSON.stringify(displayValue, null, 2)}\n          </pre>\n        )}\n      </div>\n\n      {/* Help text */}\n      {isEditing && (\n        <div className=\"px-3 pb-3\">\n          <p className=\"text-xs text-gray-500\">\n            Edit the JSON content above. Changes will be saved as a new candidate with the current resolution\n            context.\n          </p>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/components/views/ResolutionView/ResolutionEditControls.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ResolutionEditControlsProps {
+    /** Number of unsaved edits */
+    editCount: number;
+    /** Whether edit application is currently in progress */
+    isApplying: boolean;
+    /** Whether any edits exist to operate on */
+    hasEdits: boolean;
+    /** Callback to apply all pending edits */
+    onApplyEdits?: () => Promise<void>;
+    /** Callback to discard all pending edits */
+    onDiscardEdits?: () => void;
+    /** Whether the controls should be disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const ResolutionEditControls: React.FC<ResolutionEditControlsProps>;
+//# sourceMappingURL=ResolutionEditControls.d.ts.map

package/lib/components/views/ResolutionView/ResolutionEditControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolutionEditControls.d.ts","sourceRoot":"","sources":["../../../../src/components/views/ResolutionView/ResolutionEditControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,MAAM,WAAW,2BAA2B;IAC1C,8BAA8B;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,UAAU,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+IxE,CAAC"}

package/lib/components/views/ResolutionView/ResolutionEditControls.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { CheckIcon, XMarkIcon, ExclamationTriangleIcon, ArrowPathIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
+export const ResolutionEditControls = ({ editCount, isApplying, hasEdits, onApplyEdits, onDiscardEdits, disabled = false, className = '' }) => {
+    const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+    const handleApplyEdits = async () => {
+        if (onApplyEdits && !isApplying && hasEdits) {
+            await onApplyEdits();
+        }
+    };
+    const handleDiscardEdits = () => {
+        if (onDiscardEdits && hasEdits && !isApplying) {
+            onDiscardEdits();
+            setShowDiscardConfirm(false);
+        }
+    };
+    const handleDiscardClick = () => {
+        if (hasEdits) {
+            setShowDiscardConfirm(true);
+        }
+    };
+    if (!hasEdits && !isApplying) {
+        return (React.createElement("div", { className: `bg-gray-50 rounded-lg border border-gray-200 p-4 ${className}` },
+            React.createElement("div", { className: "flex items-center justify-center text-gray-500" },
+                React.createElement(DocumentTextIcon, { className: "h-5 w-5 mr-2" }),
+                React.createElement("span", { className: "text-sm" }, "No pending edits"))));
+    }
+    return (React.createElement("div", { className: `bg-white rounded-lg border border-gray-200 shadow-sm ${className}` },
+        React.createElement("div", { className: "p-4" },
+            React.createElement("div", { className: "flex items-center justify-between mb-4" },
+                React.createElement("div", { className: "flex items-center" },
+                    React.createElement("div", { className: "flex items-center space-x-2" },
+                        React.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Pending Edits"),
+                        React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800" },
+                            editCount,
+                            " edit",
+                            editCount !== 1 ? 's' : ''))),
+                isApplying && (React.createElement("div", { className: "flex items-center text-blue-600" },
+                    React.createElement(ArrowPathIcon, { className: "h-4 w-4 mr-1 animate-spin" }),
+                    React.createElement("span", { className: "text-sm font-medium" }, "Applying...")))),
+            React.createElement("p", { className: "text-sm text-gray-600 mb-4" },
+                "You have ",
+                editCount,
+                " unsaved edit",
+                editCount !== 1 ? 's' : '',
+                ".",
+                ' ',
+                editCount === 1 ? 'This edit' : 'These edits',
+                " will be applied as new candidate",
+                editCount !== 1 ? 's' : '',
+                " with the current resolution context."),
+            !showDiscardConfirm ? (React.createElement("div", { className: "flex items-center space-x-3" },
+                React.createElement("button", { onClick: handleApplyEdits, disabled: disabled || isApplying || !hasEdits, className: "inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed" }, isApplying ? (React.createElement(React.Fragment, null,
+                    React.createElement(ArrowPathIcon, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    "Applying Edits...")) : (React.createElement(React.Fragment, null,
+                    React.createElement(CheckIcon, { className: "h-4 w-4 mr-2" }),
+                    "Apply Edits"))),
+                React.createElement("button", { onClick: handleDiscardClick, disabled: disabled || isApplying || !hasEdits, className: "inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed" },
+                    React.createElement(XMarkIcon, { className: "h-4 w-4 mr-2" }),
+                    "Discard Edits"))) : (
+            /* Discard confirmation */
+            React.createElement("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4" },
+                React.createElement("div", { className: "flex items-start" },
+                    React.createElement(ExclamationTriangleIcon, { className: "h-5 w-5 text-yellow-400 mt-0.5 mr-3" }),
+                    React.createElement("div", { className: "flex-1" },
+                        React.createElement("h4", { className: "text-sm font-medium text-yellow-800 mb-1" }, "Confirm Discard"),
+                        React.createElement("p", { className: "text-sm text-yellow-700 mb-3" },
+                            "Are you sure you want to discard ",
+                            editCount,
+                            " unsaved edit",
+                            editCount !== 1 ? 's' : '',
+                            "? This action cannot be undone."),
+                        React.createElement("div", { className: "flex items-center space-x-3" },
+                            React.createElement("button", { onClick: handleDiscardEdits, className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" },
+                                React.createElement(XMarkIcon, { className: "h-4 w-4 mr-1" }),
+                                "Yes, Discard"),
+                            React.createElement("button", { onClick: () => setShowDiscardConfirm(false), className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, "Cancel"))))))),
+        hasEdits && !showDiscardConfirm && (React.createElement("div", { className: "border-t border-gray-200 px-4 py-3 bg-blue-50" },
+            React.createElement("p", { className: "text-xs text-blue-700" },
+                React.createElement("strong", null, "Note:"),
+                " Applying edits will rebuild the entire resource system with your changes. This may take a moment and will update all resolution results.")))));
+};
+//# sourceMappingURL=ResolutionEditControls.js.map

package/lib/components/views/ResolutionView/ResolutionEditControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResolutionEditControls.js","sourceRoot":"","sources":["../../../../src/components/views/ResolutionView/ResolutionEditControls.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport {\n  CheckIcon,\n  XMarkIcon,\n  ExclamationTriangleIcon,\n  ArrowPathIcon,\n  DocumentTextIcon\n} from '@heroicons/react/24/outline';\n\nexport interface ResolutionEditControlsProps {\n  /** Number of unsaved edits */\n  editCount: number;\n  /** Whether edit application is currently in progress */\n  isApplying: boolean;\n  /** Whether any edits exist to operate on */\n  hasEdits: boolean;\n  /** Callback to apply all pending edits */\n  onApplyEdits?: () => Promise<void>;\n  /** Callback to discard all pending edits */\n  onDiscardEdits?: () => void;\n  /** Whether the controls should be disabled */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport const ResolutionEditControls: React.FC<ResolutionEditControlsProps> = ({\n  editCount,\n  isApplying,\n  hasEdits,\n  onApplyEdits,\n  onDiscardEdits,\n  disabled = false,\n  className = ''\n}) => {\n  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);\n\n  const handleApplyEdits = async () => {\n    if (onApplyEdits && !isApplying && hasEdits) {\n      await onApplyEdits();\n    }\n  };\n\n  const handleDiscardEdits = () => {\n    if (onDiscardEdits && hasEdits && !isApplying) {\n      onDiscardEdits();\n      setShowDiscardConfirm(false);\n    }\n  };\n\n  const handleDiscardClick = () => {\n    if (hasEdits) {\n      setShowDiscardConfirm(true);\n    }\n  };\n\n  if (!hasEdits && !isApplying) {\n    return (\n      <div className={`bg-gray-50 rounded-lg border border-gray-200 p-4 ${className}`}>\n        <div className=\"flex items-center justify-center text-gray-500\">\n          <DocumentTextIcon className=\"h-5 w-5 mr-2\" />\n          <span className=\"text-sm\">No pending edits</span>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`bg-white rounded-lg border border-gray-200 shadow-sm ${className}`}>\n      <div className=\"p-4\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between mb-4\">\n          <div className=\"flex items-center\">\n            <div className=\"flex items-center space-x-2\">\n              <h3 className=\"text-lg font-semibold text-gray-900\">Pending Edits</h3>\n              <span className=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800\">\n                {editCount} edit{editCount !== 1 ? 's' : ''}\n              </span>\n            </div>\n          </div>\n\n          {isApplying && (\n            <div className=\"flex items-center text-blue-600\">\n              <ArrowPathIcon className=\"h-4 w-4 mr-1 animate-spin\" />\n              <span className=\"text-sm font-medium\">Applying...</span>\n            </div>\n          )}\n        </div>\n\n        {/* Info text */}\n        <p className=\"text-sm text-gray-600 mb-4\">\n          You have {editCount} unsaved edit{editCount !== 1 ? 's' : ''}.{' '}\n          {editCount === 1 ? 'This edit' : 'These edits'} will be applied as new candidate\n          {editCount !== 1 ? 's' : ''} with the current resolution context.\n        </p>\n\n        {/* Action buttons */}\n        {!showDiscardConfirm ? (\n          <div className=\"flex items-center space-x-3\">\n            <button\n              onClick={handleApplyEdits}\n              disabled={disabled || isApplying || !hasEdits}\n              className=\"inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              {isApplying ? (\n                <>\n                  <ArrowPathIcon className=\"h-4 w-4 mr-2 animate-spin\" />\n                  Applying Edits...\n                </>\n              ) : (\n                <>\n                  <CheckIcon className=\"h-4 w-4 mr-2\" />\n                  Apply Edits\n                </>\n              )}\n            </button>\n\n            <button\n              onClick={handleDiscardClick}\n              disabled={disabled || isApplying || !hasEdits}\n              className=\"inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <XMarkIcon className=\"h-4 w-4 mr-2\" />\n              Discard Edits\n            </button>\n          </div>\n        ) : (\n          /* Discard confirmation */\n          <div className=\"bg-yellow-50 border border-yellow-200 rounded-lg p-4\">\n            <div className=\"flex items-start\">\n              <ExclamationTriangleIcon className=\"h-5 w-5 text-yellow-400 mt-0.5 mr-3\" />\n              <div className=\"flex-1\">\n                <h4 className=\"text-sm font-medium text-yellow-800 mb-1\">Confirm Discard</h4>\n                <p className=\"text-sm text-yellow-700 mb-3\">\n                  Are you sure you want to discard {editCount} unsaved edit{editCount !== 1 ? 's' : ''}? This\n                  action cannot be undone.\n                </p>\n                <div className=\"flex items-center space-x-3\">\n                  <button\n                    onClick={handleDiscardEdits}\n                    className=\"inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500\"\n                  >\n                    <XMarkIcon className=\"h-4 w-4 mr-1\" />\n                    Yes, Discard\n                  </button>\n                  <button\n                    onClick={() => setShowDiscardConfirm(false)}\n                    className=\"inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n                  >\n                    Cancel\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Warning about system rebuild */}\n      {hasEdits && !showDiscardConfirm && (\n        <div className=\"border-t border-gray-200 px-4 py-3 bg-blue-50\">\n          <p className=\"text-xs text-blue-700\">\n            <strong>Note:</strong> Applying edits will rebuild the entire resource system with your changes.\n            This may take a moment and will update all resolution results.\n          </p>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/components/views/ResolutionView/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ResolutionViewProps } from '../../../types';
+export declare const ResolutionView: React.FC<ResolutionViewProps>;
+export default ResolutionView;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/views/ResolutionView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/views/ResolutionView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAY9D,OAAO,EAAE,mBAAmB,EAAqD,MAAM,gBAAgB,CAAC;AAOxG,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6TxD,CAAC;AA8PF,eAAe,cAAc,CAAC"}

package/lib/components/views/ResolutionView/index.js

@@ -0,0 +1,255 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { MagnifyingGlassIcon, DocumentTextIcon, CubeIcon, PencilIcon, ListBulletIcon, FolderIcon } from '@heroicons/react/24/outline';
+import { QualifierContextControl } from '../../common/QualifierContextControl';
+import { EditableJsonView } from './EditableJsonView';
+import { ResolutionEditControls } from './ResolutionEditControls';
+import { ResourceTreeView } from '../../common/ResourceTreeView';
+export const ResolutionView = ({ resources, filterState, filterResult, resolutionState, resolutionActions, availableQualifiers = [], onMessage, className = '' }) => {
+    // Local UI state
+    const [viewMode, setViewMode] = useState('list');
+    // Use filtered resources when filtering is active and successful
+    const isFilteringActive = filterState?.enabled && filterResult?.success === true;
+    const activeProcessedResources = isFilteringActive ? filterResult?.processedResources : resources;
+    // Available resources for selection
+    const availableResources = useMemo(() => {
+        if (!activeProcessedResources?.summary?.resourceIds) {
+            return [];
+        }
+        return activeProcessedResources.summary.resourceIds.sort();
+    }, [activeProcessedResources?.summary?.resourceIds]);
+    // Handle context value changes using the shared component's callback pattern
+    const handleQualifierChange = useCallback((qualifierName, value) => {
+        resolutionActions?.updateContextValue(qualifierName, value);
+    }, [resolutionActions]);
+    // Handle resource selection
+    const handleResourceSelect = useCallback((resourceId) => {
+        resolutionActions?.selectResource(resourceId);
+    }, [resolutionActions]);
+    // Handle view mode change
+    const handleViewModeChange = useCallback((mode) => {
+        resolutionActions?.setViewMode(mode);
+    }, [resolutionActions]);
+    if (!resources) {
+        return (React.createElement("div", { className: `p-6 ${className}` },
+            React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+                React.createElement(MagnifyingGlassIcon, { className: "h-8 w-8 text-blue-600" }),
+                React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Resolution Viewer")),
+            React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center" },
+                React.createElement("div", { className: "max-w-2xl mx-auto" },
+                    React.createElement("h3", { className: "text-xl font-semibold text-gray-900 mb-4" }, "No Resources Loaded"),
+                    React.createElement("p", { className: "text-gray-600 mb-6" }, "Import resources first to test resource resolution with different contexts."),
+                    React.createElement("div", { className: "bg-blue-50 rounded-lg p-4" },
+                        React.createElement("p", { className: "text-sm text-blue-800" },
+                            React.createElement("strong", null, "Resolution Viewer:"),
+                            " Test how resources resolve with different qualifier contexts. Set context values and see which candidates match."))))));
+    }
+    return (React.createElement("div", { className: `p-6 ${className}` },
+        React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+            React.createElement(MagnifyingGlassIcon, { className: "h-8 w-8 text-blue-600" }),
+            React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Resolution Viewer"),
+            isFilteringActive && (React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800" }, "Filtered"))),
+        React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            React.createElement("div", { className: "mb-6" },
+                React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, "Context Configuration"),
+                React.createElement("div", { className: "bg-gray-50 rounded-lg p-4" },
+                    React.createElement("div", { className: "mb-4" },
+                        React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" }, availableQualifiers.map((qualifierName) => (React.createElement(QualifierContextControl, { key: qualifierName, qualifierName: qualifierName, value: resolutionState?.pendingContextValues[qualifierName], onChange: handleQualifierChange, placeholder: `Enter ${qualifierName} value`, resources: activeProcessedResources }))))),
+                    React.createElement("div", { className: "flex items-center justify-between" },
+                        React.createElement("div", { className: "text-sm text-gray-600" },
+                            "Current:",
+                            ' ',
+                            Object.entries(resolutionState?.contextValues || {})
+                                .map(([key, value]) => `${key}=${value === undefined ? '(undefined)' : value}`)
+                                .join(', ')),
+                        React.createElement("div", { className: "flex items-center space-x-2" },
+                            React.createElement("button", { onClick: resolutionActions?.resetCache, className: "px-3 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500", title: "Clear resolution cache" }, "Clear Cache"),
+                            React.createElement("button", { onClick: resolutionActions?.applyContext, disabled: !resolutionState?.hasPendingChanges, className: `px-4 py-2 rounded-md text-sm font-medium ${resolutionState?.hasPendingChanges
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500'
+                                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'}` }, resolutionState?.hasPendingChanges
+                                ? 'Apply Changes'
+                                : resolutionState?.currentResolver
+                                    ? 'Context Applied'
+                                    : 'Apply Context'))))),
+            resolutionState?.hasUnsavedEdits && (React.createElement("div", { className: "mt-6" },
+                React.createElement(ResolutionEditControls, { editCount: resolutionState.editedResources.size, isApplying: resolutionState.isApplyingEdits, hasEdits: resolutionState.hasUnsavedEdits, onApplyEdits: resolutionActions?.applyEdits, onDiscardEdits: resolutionActions?.discardEdits, disabled: !resolutionState.currentResolver }))),
+            React.createElement("div", { className: "flex flex-col lg:flex-row gap-6 h-[600px]" },
+                React.createElement("div", { className: "lg:w-1/2 flex flex-col" },
+                    React.createElement("div", { className: "flex items-center justify-between mb-4" },
+                        React.createElement("div", null,
+                            React.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Resources"),
+                            React.createElement("div", { className: "text-sm text-gray-500" },
+                                availableResources.length,
+                                " available")),
+                        React.createElement("div", { className: "flex items-center space-x-1 bg-gray-100 rounded-lg p-1" },
+                            React.createElement("button", { onClick: () => setViewMode('list'), className: `flex items-center px-2 py-1 text-xs font-medium rounded ${viewMode === 'list'
+                                    ? 'bg-white text-gray-900 shadow-sm'
+                                    : 'text-gray-600 hover:text-gray-900'}`, title: "List View" },
+                                React.createElement(ListBulletIcon, { className: "h-4 w-4" }),
+                                React.createElement("span", { className: "ml-1" }, "List")),
+                            React.createElement("button", { onClick: () => setViewMode('tree'), className: `flex items-center px-2 py-1 text-xs font-medium rounded ${viewMode === 'tree'
+                                    ? 'bg-white text-gray-900 shadow-sm'
+                                    : 'text-gray-600 hover:text-gray-900'}`, title: "Tree View" },
+                                React.createElement(FolderIcon, { className: "h-4 w-4" }),
+                                React.createElement("span", { className: "ml-1" }, "Tree")))),
+                    React.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50" }, viewMode === 'tree' && activeProcessedResources?.system.resourceManager ? (React.createElement(ResourceTreeView, { resources: activeProcessedResources.system.resourceManager, selectedResourceId: resolutionState?.selectedResourceId || null, onResourceSelect: handleResourceSelect, searchTerm: "", className: "" })) : (availableResources.map((resourceId) => (React.createElement("div", { key: resourceId, className: `flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 ${resolutionState?.selectedResourceId === resourceId
+                            ? 'bg-blue-50 border-r-2 border-blue-500'
+                            : ''}`, onClick: () => handleResourceSelect(resourceId) },
+                        React.createElement(DocumentTextIcon, { className: "w-4 h-4 mr-2 text-green-500" }),
+                        React.createElement("span", { className: `text-sm ${resolutionState?.selectedResourceId === resourceId
+                                ? 'font-medium text-blue-900'
+                                : 'text-gray-700'}` }, resourceId),
+                        resolutionActions?.hasEdit?.(resourceId) && (React.createElement("span", { className: "ml-auto" },
+                            React.createElement(PencilIcon, { className: "h-3 w-3 text-blue-500" }))))))))),
+                React.createElement("div", { className: "lg:w-1/2 flex flex-col" },
+                    React.createElement("div", { className: "flex items-center justify-between mb-4" },
+                        React.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Results"),
+                        resolutionState?.selectedResourceId && (React.createElement("div", { className: "flex space-x-2" },
+                            React.createElement("button", { onClick: () => handleViewModeChange('composed'), className: `px-3 py-1 text-xs rounded ${resolutionState?.viewMode === 'composed'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-200 text-gray-700'}` }, "Composed"),
+                            React.createElement("button", { onClick: () => handleViewModeChange('best'), className: `px-3 py-1 text-xs rounded ${resolutionState?.viewMode === 'best'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-200 text-gray-700'}` }, "Best"),
+                            React.createElement("button", { onClick: () => handleViewModeChange('all'), className: `px-3 py-1 text-xs rounded ${resolutionState?.viewMode === 'all'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-200 text-gray-700'}` }, "All"),
+                            React.createElement("button", { onClick: () => handleViewModeChange('raw'), className: `px-3 py-1 text-xs rounded ${resolutionState?.viewMode === 'raw'
+                                    ? 'bg-blue-600 text-white'
+                                    : 'bg-gray-200 text-gray-700'}` }, "Raw")))),
+                    React.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg p-4 bg-gray-50" }, !resolutionState?.selectedResourceId ? (React.createElement("div", { className: "flex items-center justify-center h-full" },
+                        React.createElement("div", { className: "text-center" },
+                            React.createElement(CubeIcon, { className: "h-12 w-12 text-gray-400 mx-auto mb-4" }),
+                            React.createElement("p", { className: "text-gray-500" }, "Select a resource to view resolution results")))) : !resolutionState?.currentResolver ? (React.createElement("div", { className: "text-center text-gray-500" },
+                        React.createElement("p", null, "Apply a context to resolve resources"))) : !resolutionState?.resolutionResult ? (React.createElement("div", { className: "text-center text-gray-500" },
+                        React.createElement("p", null, "Resolving..."))) : (React.createElement(ResolutionResults, { result: resolutionState.resolutionResult, viewMode: resolutionState.viewMode, contextValues: resolutionState.contextValues, resolutionActions: resolutionActions, resolutionState: resolutionState }))))))));
+};
+const ResolutionResults = ({ result, viewMode, contextValues, resolutionActions, resolutionState }) => {
+    if (!result.success) {
+        return (React.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4" },
+            React.createElement("h4", { className: "font-medium text-red-800 mb-2" }, "Resolution Failed"),
+            React.createElement("p", { className: "text-sm text-red-600" }, result.error)));
+    }
+    if (viewMode === 'raw') {
+        return (React.createElement("div", { className: "space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h4", { className: "font-medium text-gray-800 mb-2" }, "Raw Resolution Data"),
+                React.createElement("pre", { className: "text-xs bg-white p-3 rounded border overflow-x-auto" }, JSON.stringify({
+                    context: contextValues,
+                    resource: result.resource
+                        ? {
+                            id: result.resource.id,
+                            candidateCount: result.resource.candidates.length
+                        }
+                        : null,
+                    bestCandidate: result.bestCandidate?.json,
+                    allCandidates: result.allCandidates?.map((c) => c.json),
+                    composedValue: result.composedValue,
+                    error: result.error
+                }, null, 2)))));
+    }
+    if (viewMode === 'composed') {
+        return (React.createElement("div", { className: "space-y-4" },
+            result.composedValue ? (React.createElement(EditableJsonView, { value: result.composedValue, resourceId: result.resourceId, isEdited: resolutionActions?.hasEdit?.(result.resourceId) || false, editedValue: resolutionActions?.getEditedValue?.(result.resourceId), onSave: resolutionActions?.saveEdit, onCancel: () => { }, disabled: resolutionState?.isApplyingEdits || false })) : (React.createElement("div", { className: "bg-yellow-50 border border-yellow-200 rounded p-3" },
+                React.createElement("p", { className: "text-sm text-yellow-800" }, "No composed value available for the current context."),
+                result.error && React.createElement("p", { className: "text-xs text-yellow-600 mt-1" }, result.error))),
+            result.resource && (React.createElement("div", null,
+                React.createElement("h4", { className: "font-medium text-gray-800 mb-2" }, "Resource Info"),
+                React.createElement("div", { className: "bg-white p-3 rounded border text-sm" },
+                    React.createElement("div", null,
+                        React.createElement("strong", null, "ID:"),
+                        " ",
+                        result.resource.id),
+                    React.createElement("div", null,
+                        React.createElement("strong", null, "Type:"),
+                        " ",
+                        result.resource.resourceType.key),
+                    React.createElement("div", null,
+                        React.createElement("strong", null, "Total Candidates:"),
+                        " ",
+                        result.resource.candidates.length))))));
+    }
+    if (viewMode === 'best') {
+        return (React.createElement("div", { className: "space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h4", { className: "font-medium text-gray-800 mb-2" }, "Best Match"),
+                result.bestCandidate ? (React.createElement("div", { className: "bg-white p-3 rounded border border-green-200" },
+                    React.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" }, "Selected candidate for current context"),
+                    React.createElement("pre", { className: "text-xs bg-gray-50 p-2 rounded overflow-x-auto" }, JSON.stringify(result.bestCandidate.json, null, 2)))) : (React.createElement("div", { className: "bg-yellow-50 border border-yellow-200 rounded p-3" },
+                    React.createElement("p", { className: "text-sm text-yellow-800" }, "No best candidate found for the current context."),
+                    result.error && React.createElement("p", { className: "text-xs text-yellow-600 mt-1" }, result.error))))));
+    }
+    // 'all' view mode
+    const regularMatchingCandidates = result.candidateDetails?.filter((c) => c.matched && !c.isDefaultMatch) || [];
+    const defaultMatchingCandidates = result.candidateDetails?.filter((c) => c.matched && c.isDefaultMatch) || [];
+    const nonMatchingCandidates = result.candidateDetails?.filter((c) => !c.matched) || [];
+    const getMatchTypeColor = (type) => {
+        switch (type) {
+            case 'match':
+                return 'bg-green-100 text-green-800';
+            case 'matchAsDefault':
+                return 'bg-amber-100 text-amber-800';
+            case 'noMatch':
+                return 'bg-red-100 text-red-800';
+            default:
+                return 'bg-gray-100 text-gray-800';
+        }
+    };
+    const getMatchTypeIcon = (type) => {
+        switch (type) {
+            case 'match':
+                return '✓';
+            case 'matchAsDefault':
+                return '≈';
+            case 'noMatch':
+                return '✗';
+            default:
+                return '?';
+        }
+    };
+    return (React.createElement("div", { className: "space-y-4" },
+        regularMatchingCandidates.length > 0 && (React.createElement("div", null,
+            React.createElement("h4", { className: "font-medium text-gray-800 mb-2" }, "Regular Matches"),
+            React.createElement("div", { className: "space-y-2" }, regularMatchingCandidates.map((candidateInfo, index) => (React.createElement("div", { key: `regular-${candidateInfo.candidateIndex}`, className: "bg-white p-3 rounded border border-green-200" },
+                React.createElement("div", { className: "flex items-center justify-between mb-2" },
+                    React.createElement("div", { className: "text-sm font-medium text-gray-700 flex items-center space-x-2" },
+                        React.createElement("span", null,
+                            "Candidate ",
+                            candidateInfo.candidateIndex + 1,
+                            " ",
+                            index === 0 ? '(Best Match)' : ''),
+                        React.createElement("span", { className: `px-2 py-1 rounded text-xs ${getMatchTypeColor(candidateInfo.matchType)}` },
+                            getMatchTypeIcon(candidateInfo.matchType),
+                            " ",
+                            candidateInfo.matchType))),
+                React.createElement("pre", { className: "text-xs bg-gray-50 p-2 rounded overflow-x-auto" }, JSON.stringify(candidateInfo.candidate.json, null, 2)))))))),
+        defaultMatchingCandidates.length > 0 && (React.createElement("div", null,
+            React.createElement("h4", { className: "font-medium text-gray-800 mb-2" }, "Default Matches"),
+            React.createElement("div", { className: "space-y-2" }, defaultMatchingCandidates.map((candidateInfo) => (React.createElement("div", { key: `default-${candidateInfo.candidateIndex}`, className: "bg-white p-3 rounded border border-amber-200" },
+                React.createElement("div", { className: "flex items-center justify-between mb-2" },
+                    React.createElement("div", { className: "text-sm font-medium text-gray-700 flex items-center space-x-2" },
+                        React.createElement("span", null,
+                            "Candidate ",
+                            candidateInfo.candidateIndex + 1),
+                        React.createElement("span", { className: `px-2 py-1 rounded text-xs ${getMatchTypeColor(candidateInfo.matchType)}` },
+                            getMatchTypeIcon(candidateInfo.matchType),
+                            " ",
+                            candidateInfo.matchType))),
+                React.createElement("pre", { className: "text-xs bg-gray-50 p-2 rounded overflow-x-auto" }, JSON.stringify(candidateInfo.candidate.json, null, 2)))))))),
+        regularMatchingCandidates.length === 0 && defaultMatchingCandidates.length === 0 && (React.createElement("div", null,
+            React.createElement("h4", { className: "font-medium text-gray-800 mb-2" }, "Matching Candidates"),
+            React.createElement("p", { className: "text-sm text-gray-600" }, "No candidates matched the current context."))),
+        nonMatchingCandidates.length > 0 && (React.createElement("div", null,
+            React.createElement("h4", { className: "font-medium text-gray-500 mb-2" }, "Non-matching Candidates"),
+            React.createElement("div", { className: "space-y-2" },
+                nonMatchingCandidates.slice(0, 3).map((candidateInfo) => (React.createElement("div", { key: `non-matching-${candidateInfo.candidateIndex}`, className: "bg-gray-50 p-3 rounded border border-gray-200 opacity-75" },
+                    React.createElement("div", { className: "text-sm font-medium text-gray-500 mb-2" },
+                        "Candidate ",
+                        candidateInfo.candidateIndex + 1),
+                    React.createElement("pre", { className: "text-xs bg-gray-100 p-2 rounded overflow-x-auto text-gray-600" }, JSON.stringify(candidateInfo.candidate.json, null, 2))))),
+                nonMatchingCandidates.length > 3 && (React.createElement("div", { className: "text-center text-sm text-gray-500" },
+                    "... and ",
+                    nonMatchingCandidates.length - 3,
+                    " more non-matching candidates")))))));
+};
+export default ResolutionView;
+//# sourceMappingURL=index.js.map