@fgv/ts-res-ui-components 5.0.0-21 → 5.0.0-23

package/lib-commonjs/components/views/GridView/cells/StringCell.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StringCell = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+const cellValidation_1 = require("../../../../utils/cellValidation");
+/**
+ * StringCell component for editing string values with validation.
+ *
+ * Provides text input with configurable validation, visual error highlighting,
+ * and support for required fields, length limits, and pattern matching.
+ *
+ * @example
+ * ```tsx
+ * <StringCell
+ *   value="user@example.com"
+ *   resourceId="user-123"
+ *   column={{
+ *     id: 'email',
+ *     validation: {
+ *       required: true,
+ *       pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ *     }
+ *   }}
+ *   isEditing={false}
+ *   onChange={handleChange}
+ *   onSave={handleSave}
+ *   onValidationChange={handleValidation}
+ * />
+ * ```
+ * @public
+ */
+const StringCell = ({ value, resourceId, column, isEditing, disabled = false, onChange, onStartEdit, onCancel, onSave, onValidationChange }) => {
+    const [editValue, setEditValue] = (0, react_1.useState)('');
+    const [validationError, setValidationError] = (0, react_1.useState)(null);
+    // Convert value to string for editing
+    const stringValue = react_1.default.useMemo(() => {
+        if (value === null || value === undefined)
+            return '';
+        if (typeof value === 'string')
+            return value;
+        return String(value);
+    }, [value]);
+    // Initialize edit value when editing starts
+    (0, react_1.useEffect)(() => {
+        if (isEditing) {
+            setEditValue(stringValue);
+        }
+    }, [isEditing, stringValue]);
+    // Validate the current edit value
+    const validateCurrentValue = (0, react_1.useCallback)(() => {
+        if (!isEditing)
+            return;
+        const validationResult = (0, cellValidation_1.validateCellValue)(editValue, column.validation);
+        if (validationResult.isFailure()) {
+            setValidationError(`Validation failed: ${validationResult.message}`);
+            onValidationChange(`Validation failed: ${validationResult.message}`);
+            return;
+        }
+        const result = validationResult.value;
+        const error = result.isValid ? null : result.error || null;
+        setValidationError(error);
+        onValidationChange(error);
+    }, [editValue, column.validation, isEditing, onValidationChange]);
+    // Validate whenever edit value changes
+    (0, react_1.useEffect)(() => {
+        validateCurrentValue();
+    }, [validateCurrentValue]);
+    // Handle input changes
+    const handleInputChange = (0, react_1.useCallback)((event) => {
+        const newValue = event.target.value;
+        setEditValue(newValue);
+        onChange(newValue);
+    }, [onChange]);
+    // Handle key presses
+    const handleKeyPress = (0, react_1.useCallback)((event) => {
+        if (event.key === 'Enter' && !validationError) {
+            onSave(editValue);
+        }
+        else if (event.key === 'Escape') {
+            onCancel();
+        }
+    }, [editValue, validationError, onSave, onCancel]);
+    // Handle save click
+    const handleSave = (0, react_1.useCallback)(() => {
+        if (!validationError) {
+            onSave(editValue);
+        }
+    }, [editValue, validationError, onSave]);
+    if (isEditing) {
+        return (react_1.default.createElement("div", { className: "relative" },
+            react_1.default.createElement("input", { type: "text", value: editValue, onChange: handleInputChange, onKeyDown: handleKeyPress, onBlur: handleSave, disabled: disabled, autoFocus: true, className: `w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-2 ${validationError
+                    ? 'border-red-500 focus:ring-red-500 bg-red-50'
+                    : 'border-gray-300 focus:ring-blue-500'}`, placeholder: column.validation?.required ? `${column.title} (required)` : column.title }),
+            validationError && (react_1.default.createElement("div", { className: "absolute z-10 mt-1 p-2 bg-red-100 border border-red-200 rounded shadow-sm text-xs text-red-800 max-w-xs" },
+                react_1.default.createElement("div", { className: "flex items-center space-x-1" },
+                    react_1.default.createElement(outline_1.ExclamationCircleIcon, { className: "h-3 w-3 flex-shrink-0" }),
+                    react_1.default.createElement("span", null, validationError))))));
+    }
+    // Display mode
+    const displayValue = stringValue || (column.validation?.required ? '(required)' : '(empty)');
+    const isEmpty = !stringValue;
+    const isRequired = column.validation?.required;
+    return (react_1.default.createElement("div", { className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 ${isEmpty && isRequired ? 'text-red-600 bg-red-25' : 'text-gray-900'}`, onClick: disabled ? undefined : onStartEdit, title: disabled ? undefined : 'Click to edit' },
+        react_1.default.createElement("span", { className: isEmpty ? 'italic' : '' }, displayValue),
+        isEmpty && isRequired && react_1.default.createElement(outline_1.ExclamationCircleIcon, { className: "inline-block h-4 w-4 ml-1 text-red-500" })));
+};
+exports.StringCell = StringCell;
+exports.default = exports.StringCell;
+//# sourceMappingURL=StringCell.js.map

package/lib-commonjs/components/views/GridView/cells/TriStateCell.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TriStateCell = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+/**
+ * TriStateCell component for editing three-state boolean values.
+ *
+ * Supports true, false, and null/undefined states with two presentation modes:
+ * - Checkbox mode: 3-state checkbox (checked, unchecked, indeterminate)
+ * - Dropdown mode: Select dropdown with three options
+ *
+ * @example
+ * ```tsx
+ * <TriStateCell
+ *   value={null}
+ *   resourceId="feature-123"
+ *   column={{ id: 'enabled', title: 'Feature Enabled' }}
+ *   presentation="dropdown"
+ *   onChange={handleChange}
+ *   onSave={handleSave}
+ *   onValidationChange={handleValidation}
+ * />
+ * ```
+ * @public
+ */
+const TriStateCell = ({ value, resourceId, column, disabled = false, presentation = 'dropdown', labels, onChange, onSave, onValidationChange }) => {
+    // Convert value to tri-state boolean
+    const triStateValue = (0, react_1.useMemo)(() => {
+        if (value === null || value === undefined)
+            return null;
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'string') {
+            if (value.toLowerCase() === 'true')
+                return true;
+            if (value.toLowerCase() === 'false')
+                return false;
+            return null;
+        }
+        if (typeof value === 'number') {
+            if (value === 1)
+                return true;
+            if (value === 0)
+                return false;
+            return null;
+        }
+        return Boolean(value);
+    }, [value]);
+    // Handle checkbox change (cycles through states)
+    const handleCheckboxChange = (0, react_1.useCallback)(() => {
+        let newValue;
+        if (triStateValue === null) {
+            newValue = true;
+        }
+        else if (triStateValue === true) {
+            newValue = false;
+        }
+        else {
+            newValue = null;
+        }
+        onChange(newValue);
+        onSave(newValue);
+        onValidationChange(null);
+    }, [triStateValue, onChange, onSave, onValidationChange]);
+    // Handle dropdown change
+    const handleDropdownChange = (0, react_1.useCallback)((event) => {
+        let newValue;
+        switch (event.target.value) {
+            case 'true':
+                newValue = true;
+                break;
+            case 'false':
+                newValue = false;
+                break;
+            default:
+                newValue = null;
+                break;
+        }
+        onChange(newValue);
+        onSave(newValue);
+        onValidationChange(null);
+    }, [onChange, onSave, onValidationChange]);
+    if (presentation === 'checkbox') {
+        // 3-state checkbox presentation
+        const checkboxRef = react_1.default.useRef(null);
+        // Update checkbox indeterminate state
+        react_1.default.useEffect(() => {
+            if (checkboxRef.current) {
+                checkboxRef.current.indeterminate = triStateValue === null;
+            }
+        }, [triStateValue]);
+        return (react_1.default.createElement("div", { className: "px-3 py-2 flex items-center justify-center" },
+            react_1.default.createElement("label", { className: "inline-flex items-center" },
+                react_1.default.createElement("input", { ref: checkboxRef, type: "checkbox", checked: triStateValue === true, onChange: handleCheckboxChange, disabled: disabled, className: `h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}` }),
+                react_1.default.createElement("span", { className: "sr-only" }, column.title))));
+    }
+    // Default labels (can be overridden)
+    const defaultLabels = {
+        trueLabel: 'Yes',
+        falseLabel: 'No',
+        undefinedLabel: 'Unset'
+    };
+    const effectiveLabels = labels || defaultLabels;
+    return (react_1.default.createElement("div", { className: "px-3 py-2" },
+        react_1.default.createElement("div", { className: "relative" },
+            react_1.default.createElement("select", { value: triStateValue === null ? 'null' : String(triStateValue), onChange: handleDropdownChange, disabled: disabled, className: `w-full appearance-none bg-white border border-gray-300 rounded px-3 py-1 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${disabled ? 'opacity-50 cursor-not-allowed bg-gray-100' : 'cursor-pointer'}` },
+                react_1.default.createElement("option", { value: "null" }, effectiveLabels.undefinedLabel),
+                react_1.default.createElement("option", { value: "true" }, effectiveLabels.trueLabel),
+                react_1.default.createElement("option", { value: "false" }, effectiveLabels.falseLabel)),
+            react_1.default.createElement("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none" },
+                react_1.default.createElement(outline_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-400" })))));
+};
+exports.TriStateCell = TriStateCell;
+exports.default = exports.TriStateCell;
+//# sourceMappingURL=TriStateCell.js.map

package/lib-commonjs/components/views/GridView/cells/index.js

@@ -0,0 +1,18 @@
+"use strict";
+/**
+ * Specialized cell components for GridView.
+ *
+ * This module exports all the specialized cell types that can be used
+ * in grid columns for different data types and editing requirements.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownCell = exports.TriStateCell = exports.BooleanCell = exports.StringCell = void 0;
+var StringCell_1 = require("./StringCell");
+Object.defineProperty(exports, "StringCell", { enumerable: true, get: function () { return StringCell_1.StringCell; } });
+var BooleanCell_1 = require("./BooleanCell");
+Object.defineProperty(exports, "BooleanCell", { enumerable: true, get: function () { return BooleanCell_1.BooleanCell; } });
+var TriStateCell_1 = require("./TriStateCell");
+Object.defineProperty(exports, "TriStateCell", { enumerable: true, get: function () { return TriStateCell_1.TriStateCell; } });
+var DropdownCell_1 = require("./DropdownCell");
+Object.defineProperty(exports, "DropdownCell", { enumerable: true, get: function () { return DropdownCell_1.DropdownCell; } });
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/views/GridView/index.js

@@ -0,0 +1,217 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+const resourceSelector_1 = require("../../../utils/resourceSelector");
+const QualifierContextControl_1 = require("../../common/QualifierContextControl");
+const UnifiedChangeControls_1 = require("../ResolutionView/UnifiedChangeControls");
+const ResourceGrid_1 = require("./ResourceGrid");
+/**
+ * GridView component for displaying multiple resources in a tabular format.
+ *
+ * Provides a grid-based interface for viewing and editing multiple resources
+ * simultaneously, with configurable column mappings and shared context management.
+ * Leverages the same state management and batch processing as ResolutionView.
+ *
+ * **Key Features:**
+ * - **Multi-resource display**: View multiple resources in rows with configurable columns
+ * - **Column mapping**: Host-defined extraction of properties from resolved resources
+ * - **Batch editing**: Edit multiple resource values with unified batch application
+ * - **Context integration**: Same context management as ResolutionView
+ * - **Resource filtering**: Flexible resource selection via built-in and custom selectors
+ * - **Change management**: Leverages existing UnifiedChangeControls for batch operations
+ *
+ * @example
+ * ```tsx
+ * import { GridView } from '@fgv/ts-res-ui-components';
+ *
+ * // Define grid configuration
+ * const gridConfig = {
+ *   id: 'user-messages',
+ *   title: 'User Messages',
+ *   resourceSelection: { type: 'prefix', prefix: 'user.' },
+ *   columnMapping: [{
+ *     resourceType: 'text-resource',
+ *     columns: [
+ *       { id: 'text', title: 'Message Text', dataPath: 'text', editable: true },
+ *       { id: 'locale', title: 'Locale', dataPath: 'locale' }
+ *     ]
+ *   }]
+ * };
+ *
+ * function MyGridApp() {
+ *   return (
+ *     <GridView
+ *       gridConfig={gridConfig}
+ *       resources={processedResources}
+ *       resolutionState={resolutionState}
+ *       resolutionActions={resolutionActions}
+ *       availableQualifiers={['language', 'territory', 'platform']}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @public
+ */
+const GridView = ({ gridConfig, resources, resolutionState, resolutionActions, availableQualifiers = [], contextOptions, filterState, filterResult, showContextControls = true, showChangeControls = true, onMessage, className = '' }) => {
+    // Use filtered resources when filtering is active and successful
+    const isFilteringActive = filterState?.enabled && filterResult?.success === true;
+    const baseProcessedResources = isFilteringActive ? filterResult?.processedResources : resources;
+    // Select resources for this grid based on the configuration
+    const selectedResourceIds = (0, react_1.useMemo)(() => {
+        if (!baseProcessedResources || !gridConfig.resourceSelection) {
+            return [];
+        }
+        const selectionResult = (0, resourceSelector_1.selectResources)(gridConfig.resourceSelection, baseProcessedResources);
+        if (selectionResult.isFailure()) {
+            onMessage?.('error', `Resource selection failed: ${selectionResult.message}`);
+            return [];
+        }
+        return selectionResult.value;
+    }, [baseProcessedResources, gridConfig.resourceSelection, onMessage]);
+    // Resolve all selected resources with current context
+    const resourceResolutions = (0, react_1.useMemo)(() => {
+        if (!resolutionState?.currentResolver || !selectedResourceIds.length) {
+            return new Map();
+        }
+        const resolutions = new Map();
+        const context = resolutionState.contextValues;
+        selectedResourceIds.forEach((resourceId) => {
+            try {
+                const resolver = resolutionState.currentResolver;
+                const resourceResult = resolver.resourceManager.getBuiltResource(resourceId);
+                if (resourceResult.isSuccess()) {
+                    const resource = resourceResult.value;
+                    // Resolve the resource with current context
+                    const resolveResult = resolver.resolveComposedResourceValue(resourceId);
+                    if (resolveResult.isSuccess()) {
+                        resolutions.set(resourceId, {
+                            success: true,
+                            resourceId,
+                            resource,
+                            composedValue: resolveResult.value
+                            // Note: For grid view, we mainly need the composed value
+                            // Full candidate analysis is available but not needed for basic grid display
+                        });
+                    }
+                    else {
+                        resolutions.set(resourceId, {
+                            success: false,
+                            resourceId,
+                            error: resolveResult.message
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                resolutions.set(resourceId, {
+                    success: false,
+                    resourceId,
+                    error: error instanceof Error ? error.message : 'Unknown resolution error'
+                });
+            }
+        });
+        return resolutions;
+    }, [selectedResourceIds, resolutionState?.currentResolver, resolutionState?.contextValues]);
+    // Handle context value changes using the shared pattern from ResolutionView
+    const handleQualifierChange = (0, react_1.useCallback)((qualifierName, value) => {
+        // Don't update context if this qualifier is host-managed
+        const qualifierOptions = contextOptions?.qualifierOptions?.[qualifierName];
+        const isHostManaged = qualifierOptions?.hostValue !== undefined;
+        if (!isHostManaged) {
+            resolutionActions?.updateContextValue(qualifierName, value);
+        }
+    }, [resolutionActions, contextOptions?.qualifierOptions]);
+    // Apply host-managed values when they change (same pattern as ResolutionView)
+    (0, react_1.useEffect)(() => {
+        if (!contextOptions?.hostManagedValues || !resolutionActions?.applyContext)
+            return;
+        resolutionActions.applyContext(contextOptions.hostManagedValues);
+    }, [contextOptions?.hostManagedValues, resolutionActions]);
+    // Determine which qualifiers to show
+    const visibleQualifiers = (0, react_1.useMemo)(() => {
+        if (!contextOptions?.qualifierOptions) {
+            return availableQualifiers;
+        }
+        return availableQualifiers.filter((qualifierName) => {
+            const options = contextOptions.qualifierOptions[qualifierName];
+            return options?.visible !== false;
+        });
+    }, [availableQualifiers, contextOptions?.qualifierOptions]);
+    // Get effective context values
+    const effectiveContextValues = (0, react_1.useMemo)(() => {
+        return resolutionState?.contextValues || {};
+    }, [resolutionState?.contextValues]);
+    if (!resources) {
+        return (react_1.default.createElement("div", { className: `p-6 ${className}` },
+            react_1.default.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+                react_1.default.createElement(outline_1.TableCellsIcon, { className: "h-8 w-8 text-blue-600" }),
+                react_1.default.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, gridConfig.title || 'Resource Grid')),
+            react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center" },
+                react_1.default.createElement("div", { className: "max-w-2xl mx-auto" },
+                    react_1.default.createElement("h3", { className: "text-xl font-semibold text-gray-900 mb-4" }, "No Resources Loaded"),
+                    react_1.default.createElement("p", { className: "text-gray-600 mb-6" }, "Import resources first to view them in a grid format with customizable columns."),
+                    react_1.default.createElement("div", { className: "bg-blue-50 rounded-lg p-4" },
+                        react_1.default.createElement("p", { className: "text-sm text-blue-800" },
+                            react_1.default.createElement("strong", null, "Grid View:"),
+                            " Display multiple resources in a table format. Configure columns to extract and edit specific properties from resolved resources."))))));
+    }
+    return (react_1.default.createElement("div", { className: `p-6 ${className}` },
+        react_1.default.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+            react_1.default.createElement(outline_1.TableCellsIcon, { className: "h-8 w-8 text-blue-600" }),
+            react_1.default.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, gridConfig.title || 'Resource Grid'),
+            isFilteringActive && (react_1.default.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_1.default.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800" },
+                selectedResourceIds.length,
+                " resource",
+                selectedResourceIds.length !== 1 ? 's' : '')),
+        gridConfig.description && react_1.default.createElement("p", { className: "text-gray-600 mb-6" }, gridConfig.description),
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            showContextControls && contextOptions?.showContextControls !== false && (react_1.default.createElement("div", { className: "mb-6" },
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, contextOptions?.contextPanelTitle || 'Context Configuration'),
+                react_1.default.createElement("div", { className: `bg-gray-50 rounded-lg p-4 ${contextOptions?.contextPanelClassName || ''}` },
+                    react_1.default.createElement("div", { className: "mb-4" },
+                        react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" }, visibleQualifiers.map((qualifierName) => {
+                            const qualifierOptions = contextOptions?.qualifierOptions?.[qualifierName];
+                            const hostManagedValue = contextOptions?.hostManagedValues?.[qualifierName];
+                            const globalPlaceholder = typeof contextOptions?.globalPlaceholder === 'function'
+                                ? contextOptions.globalPlaceholder(qualifierName)
+                                : contextOptions?.globalPlaceholder;
+                            const mergedOptions = {
+                                ...qualifierOptions,
+                                hostValue: hostManagedValue !== undefined ? hostManagedValue : qualifierOptions?.hostValue
+                            };
+                            return (react_1.default.createElement(QualifierContextControl_1.QualifierContextControl, { key: qualifierName, qualifierName: qualifierName, value: resolutionState?.pendingContextValues[qualifierName], onChange: handleQualifierChange, placeholder: globalPlaceholder || `Enter ${qualifierName} value`, resources: baseProcessedResources, options: mergedOptions }));
+                        }))),
+                    contextOptions?.showCurrentContext !== false && (react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                        react_1.default.createElement("div", { className: "text-sm text-gray-600" },
+                            "Current:",
+                            ' ',
+                            Object.entries(effectiveContextValues)
+                                .map(([key, value]) => `${key}=${value === undefined ? '(undefined)' : value}`)
+                                .join(', ')),
+                        contextOptions?.showContextActions !== false && (react_1.default.createElement("div", { className: "flex items-center space-x-2" },
+                            react_1.default.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_1.default.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')))))))),
+            react_1.default.createElement(ResourceGrid_1.ResourceGrid, { gridConfig: gridConfig, selectedResourceIds: selectedResourceIds, resourceResolutions: resourceResolutions, resolutionActions: resolutionActions, resolutionState: resolutionState, onMessage: onMessage }),
+            showChangeControls &&
+                (resolutionState?.hasUnsavedEdits || resolutionState?.hasPendingResourceChanges) && (react_1.default.createElement("div", { className: "mt-6" },
+                react_1.default.createElement(UnifiedChangeControls_1.UnifiedChangeControls, { editCount: resolutionState?.editedResources?.size || 0, addCount: resolutionState?.pendingResources?.size || 0, deleteCount: resolutionState?.pendingResourceDeletions?.size || 0, isApplying: resolutionState?.isApplyingEdits, disabled: !resolutionState?.currentResolver, onApplyAll: async () => {
+                        await resolutionActions?.applyPendingResources();
+                    }, onDiscardAll: () => {
+                        resolutionActions?.discardEdits?.();
+                        resolutionActions?.discardPendingResources?.();
+                    } }))))));
+};
+exports.GridView = GridView;
+exports.default = exports.GridView;
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/views/ImportView/index.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const outline_1 = require("@heroicons/react/24/outline");
 const ts_res_1 = require("@fgv/ts-res");
 const zipLoader_1 = require("../../../utils/zipLoader");
+const contexts_1 = require("../../../contexts");
 /**
  * ImportView component for importing resource files, directories, and bundles.
  *
@@ -53,7 +54,9 @@ const zipLoader_1 = require("../../../utils/zipLoader");
  *
  * @public
  */
-const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes = ['.json', '.zip'], onMessage, className = '' }) => {
+const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes = ['.json', '.zip'], onMessage, className = '', importError }) => {
+    // Get observability context
+    const o11y = (0, contexts_1.useObservability)();
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const [importStatus, setImportStatus] = (0, react_1.useState)({
         hasImported: false,
@@ -69,7 +72,7 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
     const isFileSystemAccessSupported = 'showDirectoryPicker' in window || 'showOpenFilePicker' in window;
     // Helper function to process ZIP files using zip-archive packlet
     const processZipFile = (0, react_1.useCallback)(async (file) => {
-        console.log(`[ImportView] Processing ZIP file: ${file.name}`);
+        o11y.diag.info(`[ImportView] Processing ZIP file: ${file.name}`);
         onMessage?.('info', `Processing ZIP file: ${file.name}`);
         const loader = new ts_res_1.ZipArchive.ZipArchiveLoader();
         const loadResult = await loader.loadFromFile(file, {
@@ -79,7 +82,7 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
             throw new Error(`Failed to load ZIP: ${loadResult.message}`);
         }
         const zipData = loadResult.value;
-        console.log(`[ImportView] ZIP loaded successfully:`, zipData);
+        o11y.diag.info(`[ImportView] ZIP loaded successfully:`, zipData);
         // Pass the ZIP data to the appropriate handler
         if (onZipImport) {
             // Pass both the directory/files and any configuration found
@@ -111,7 +114,7 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                 const file = files[0];
                 // Check if it's a ZIP file first
                 if ((0, zipLoader_1.isZipFile)(file.name)) {
-                    console.log(`[ImportView] ✅ ${file.name} detected as ZIP file`);
+                    o11y.diag.info(`[ImportView] ✅ ${file.name} detected as ZIP file`);
                     const zipData = await processZipFile(file);
                     setImportStatus({
                         hasImported: true,
@@ -141,10 +144,10 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                 let isCurrentFileBundle = false;
                 try {
                     const parsedData = JSON.parse(content);
-                    console.log(`[ImportView] Checking if ${file.name} is a bundle...`);
+                    o11y.diag.info(`[ImportView] Checking if ${file.name} is a bundle...`);
                     // Use BundleUtils for proper bundle detection
                     if (ts_res_1.Bundle.BundleUtils.isBundleFile(parsedData)) {
-                        console.log(`[ImportView] ✅ ${file.name} detected as bundle file`);
+                        o11y.diag.info(`[ImportView] ✅ ${file.name} detected as bundle file`);
                         bundleFile = { ...importedFile, bundle: parsedData };
                         isCurrentFileBundle = true;
                     }
@@ -153,11 +156,11 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                         console.warn(`[ImportView] ⚠️ File ${file.name} appears to be a bundle by name but content doesn't match bundle structure`);
                     }
                     else {
-                        console.log(`[ImportView] ❌ ${file.name} is not a bundle file`);
+                        o11y.diag.info(`[ImportView] ❌ ${file.name} is not a bundle file`);
                     }
                 }
                 catch (parseError) {
-                    console.log(`[ImportView] ❌ ${file.name} failed JSON parsing:`, parseError);
+                    o11y.diag.info(`[ImportView] ❌ ${file.name} failed JSON parsing:`, parseError);
                     // Not valid JSON or not a bundle, treat as regular file
                 }
                 // Only add to regular files if this specific file is not a bundle
@@ -167,7 +170,7 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
             }
             // Process results
             if (bundleFile) {
-                console.log(`[ImportView] Processing bundle file: ${bundleFile.name}`, bundleFile.bundle);
+                o11y.diag.info(`[ImportView] Processing bundle file: ${bundleFile.name}`, bundleFile.bundle);
                 setImportStatus({
                     hasImported: true,
                     fileCount: 1,
@@ -177,11 +180,11 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                 });
                 onMessage?.('info', `Bundle file detected: ${bundleFile.name}`);
                 if (onBundleImport && bundleFile.bundle) {
-                    console.log(`[ImportView] Calling onBundleImport with bundle data`);
+                    o11y.diag.info(`[ImportView] Calling onBundleImport with bundle data`);
                     onBundleImport(bundleFile.bundle);
                 }
                 else {
-                    console.warn(`[ImportView] No bundle import handler or bundle data missing`);
+                    o11y.diag.warn(`[ImportView] No bundle import handler or bundle data missing`);
                 }
             }
             else if (importedFiles.length > 0) {
@@ -350,7 +353,7 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
             if (fileHandles.length === 1) {
                 const file = await fileHandles[0].getFile();
                 if ((0, zipLoader_1.isZipFile)(file.name)) {
-                    console.log(`[ImportView] Modern API - ✅ ${file.name} detected as ZIP file`);
+                    o11y.diag.info(`[ImportView] Modern API - ✅ ${file.name} detected as ZIP file`);
                     const zipData = await processZipFile(file);
                     setImportStatus({
                         hasImported: true,
@@ -383,10 +386,10 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                 let isCurrentFileBundle = false;
                 try {
                     const parsedData = JSON.parse(content);
-                    console.log(`[ImportView] Modern API - Checking if ${file.name} is a bundle...`);
+                    o11y.diag.info(`[ImportView] Modern API - Checking if ${file.name} is a bundle...`);
                     // Use BundleUtils for proper bundle detection
                     if (ts_res_1.Bundle.BundleUtils.isBundleFile(parsedData)) {
-                        console.log(`[ImportView] Modern API - ✅ ${file.name} detected as bundle file`);
+                        o11y.diag.info(`[ImportView] Modern API - ✅ ${file.name} detected as bundle file`);
                         bundleFile = { ...importedFile, bundle: parsedData };
                         isCurrentFileBundle = true;
                     }
@@ -394,11 +397,11 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                         console.warn(`[ImportView] Modern API - ⚠️ File ${file.name} appears to be a bundle by name but content doesn't match bundle structure`);
                     }
                     else {
-                        console.log(`[ImportView] Modern API - ❌ ${file.name} is not a bundle file`);
+                        o11y.diag.info(`[ImportView] Modern API - ❌ ${file.name} is not a bundle file`);
                     }
                 }
                 catch (parseError) {
-                    console.log(`[ImportView] Modern API - ❌ ${file.name} failed JSON parsing:`, parseError);
+                    o11y.diag.info(`[ImportView] Modern API - ❌ ${file.name} failed JSON parsing:`, parseError);
                 }
                 // Only add to regular files if this specific file is not a bundle
                 if (!isCurrentFileBundle) {
@@ -517,13 +520,13 @@ const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes =
                             react_1.default.createElement(outline_1.ArchiveBoxIcon, { className: "w-5 h-5 text-purple-500" }),
                             react_1.default.createElement("span", { className: "text-sm text-purple-900" }, "ZIP archive processed")))),
                     importStatus.hasImported && (react_1.default.createElement("button", { onClick: handleReset, className: "mt-4 px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors" }, "Clear Import"))),
-                error && (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-red-200 p-6" },
+                (error || importError) && (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-red-200 p-6" },
                     react_1.default.createElement("div", { className: "flex items-start space-x-2" },
                         react_1.default.createElement(outline_1.ExclamationTriangleIcon, { className: "w-5 h-5 text-red-600 mt-0.5" }),
                         react_1.default.createElement("div", { className: "text-sm text-red-800" },
                             react_1.default.createElement("p", { className: "font-medium" }, "Error"),
-                            react_1.default.createElement("p", null, error))))),
-                importStatus.hasImported && !error && (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-green-200 p-6" },
+                            react_1.default.createElement("p", null, importError || error))))),
+                importStatus.hasImported && !error && !importError && (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-green-200 p-6" },
                     react_1.default.createElement("div", { className: "flex items-start space-x-2" },
                         react_1.default.createElement(outline_1.CheckCircleIcon, { className: "w-5 h-5 text-green-600 mt-0.5" }),
                         react_1.default.createElement("div", { className: "text-sm text-green-800" },

package/lib-commonjs/components/views/MessagesWindow/index.js

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const outline_1 = require("@heroicons/react/24/outline");
 const solid_1 = require("@heroicons/react/24/solid");
+const contexts_1 = require("../../../contexts");
 /**
  * MessagesWindow component for displaying and managing application messages.
  *
@@ -99,6 +100,8 @@ const solid_1 = require("@heroicons/react/24/solid");
  * @public
  */
 const MessagesWindow = ({ messages, onClearMessages, className = '' }) => {
+    // Get observability context
+    const o11y = (0, contexts_1.useObservability)();
     const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
     const [filter, setFilter] = (0, react_1.useState)('all');
     const [searchTerm, setSearchTerm] = (0, react_1.useState)('');
@@ -123,7 +126,7 @@ const MessagesWindow = ({ messages, onClearMessages, className = '' }) => {
             setTimeout(() => setCopySuccess(false), 2000);
         })
             .catch((err) => {
-            console.error('Failed to copy messages:', err);
+            o11y.diag.error('Failed to copy messages:', err);
         });
     };
     if (messages.length === 0) {