@parhelia/localization 0.1.11008 → 0.1.11049

package/README.md

@@ -1,33 +1,33 @@
-# @parhelia/localization
-
-Localization and translation features for Parhelia visual editor.
-
-## Installation
-
-```bash
-npm install @parhelia/localization
-```
-
-## Usage
-
-```typescript
-import { LocalizeItemDialog, TranslationSidebar } from '@parhelia/localization';
-import '@parhelia/localization/styles.css';
-```
-
-## Features
-
-- Translation wizard
-- Localization setup
-- Translation center
-- Multi-language content management
-- Version creation for localized content
-
-## License
-
-See LICENSE file for details.
-
-## Documentation
-
-For complete documentation, visit [https://parhelia.ai](https://parhelia.ai)
-
+# @parhelia/localization
+
+Localization and translation features for Parhelia visual editor.
+
+## Installation
+
+```bash
+npm install @parhelia/localization
+```
+
+## Usage
+
+```typescript
+import { LocalizeItemDialog, TranslationSidebar } from '@parhelia/localization';
+import '@parhelia/localization/styles.css';
+```
+
+## Features
+
+- Translation wizard
+- Localization setup
+- Translation center
+- Multi-language content management
+- Version creation for localized content
+
+## License
+
+See LICENSE file for details.
+
+## Documentation
+
+For complete documentation, visit [https://parhelia.ai](https://parhelia.ai)
+

package/dist/LocalizeItemDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeItemDialog.d.ts","sourceRoot":"","sources":["../src/LocalizeItemDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,eAAe,CAAC;AAiBvB,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAAG,WAAW,CAAC,uBAAuB,CAAC,2CA2PtE"}
+{"version":3,"file":"LocalizeItemDialog.d.ts","sourceRoot":"","sources":["../src/LocalizeItemDialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EAExB,MAAM,eAAe,CAAC;AAiBvB,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAAG,WAAW,CAAC,uBAAuB,CAAC,2CAmVtE"}

package/dist/LocalizeItemDialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, Button, cn, } from "@parhelia/core";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ChevronRight as LucideChevronRight } from "lucide-react";
 import { useTranslationWizard } from "./hooks/useTranslationWizard";
 import { performDefaultTranslation, generateBatchId } from "./LocalizeItemUtils";
@@ -12,12 +12,15 @@ export function LocalizeItemDialog(props) {
     const editContext = props.editContext;
     const configuration = editContext.configuration.translationWizard;
     const [currentStepIndex, setCurrentStepIndex] = useState(0);
-    const [completedByStepId, setCompletedByStepId] = useState({});
+    const [stepCompleted, setStepCompleted] = useState(-1);
     const [beforeNextCallback, setBeforeNextCallback] = useState(null);
     const { wizardData, setWizardData } = useTranslationWizard(props);
     // Keep a ref to the latest wizard data to avoid stale closure issues
     const latestWizardDataRef = useRef(wizardData);
     latestWizardDataRef.current = wizardData;
+    // Log render cycles to track infinite loops
+    const renderCountRef = useRef(0);
+    renderCountRef.current += 1;
     // Clear footer actions when step changes to avoid stale actions from previous steps
     const [footerActions, setFooterActions] = useState([]);
     useEffect(() => {
@@ -36,11 +39,40 @@ export function LocalizeItemDialog(props) {
     const requestCloseCb = useCallback((result) => {
         props.onClose?.(result);
     }, [props.onClose]);
-    // Filter steps based on skip conditions
-    const activeSteps = configuration.steps.filter((step) => !step.skipCondition || !step.skipCondition(wizardData));
+    // Memoize activeSteps to prevent unnecessary recalculations and new object references
+    // This prevents infinite loops when wizardData changes but skip conditions don't
+    // The skip condition for subitem-discovery step only checks includeSubitems
+    const activeSteps = useMemo(() => {
+        const steps = configuration.steps.filter((step) => !step.skipCondition || !step.skipCondition(wizardData));
+        return steps;
+    }, [configuration.steps, wizardData.includeSubitems]); // Only depend on what affects skip conditions
     const currentStep = activeSteps[currentStepIndex];
+    // Refs for stable callbacks - updated during render to avoid dependency issues
+    const currentStepIdRef = useRef(currentStep?.id);
+    const currentStepIndexRef = useRef(currentStepIndex);
+    const lastSetWizardDataRef = useRef('');
+    // Track step changes for logging
+    if (currentStepIdRef.current !== currentStep?.id) {
+        currentStepIdRef.current = currentStep?.id;
+    }
+    currentStepIndexRef.current = currentStepIndex;
+    // Ref to track beforeNextCallback for switchStep
+    const beforeNextCallbackRef = useRef(null);
+    useEffect(() => {
+        beforeNextCallbackRef.current = beforeNextCallback;
+    }, [beforeNextCallback]);
+    // Switch step helper that clears callbacks (similar to page wizard)
+    const switchStep = useCallback((index) => {
+        beforeNextCallbackRef.current = null; // Clear callback when switching steps
+        setBeforeNextCallback(null);
+        setCurrentStepIndex(index);
+    }, []);
+    // Stable callback setter to avoid infinite loops in child components
+    const setBeforeNextCallbackStable = useCallback((cb) => {
+        setBeforeNextCallback(() => cb);
+    }, []); // No dependencies - use ref to access current step index
     const isLastStep = currentStepIndex === activeSteps.length - 1;
-    const canProceed = !!(currentStep && completedByStepId[currentStep.id]);
+    const canProceed = stepCompleted >= currentStepIndex;
     const handleNext = async () => {
         if (beforeNextCallback && typeof beforeNextCallback === 'function') {
             const canProceed = await beforeNextCallback();
@@ -56,14 +88,12 @@ export function LocalizeItemDialog(props) {
             await handleFinish();
         }
         else {
-            setCurrentStepIndex(currentStepIndex + 1);
+            switchStep(currentStepIndex + 1);
         }
     };
     const handlePrevious = () => {
         if (currentStepIndex > 0) {
-            // Clear the callback when moving to previous step
-            setBeforeNextCallback(null);
-            setCurrentStepIndex(currentStepIndex - 1);
+            switchStep(currentStepIndex - 1);
         }
     };
     const handleFinish = useCallback(async () => {
@@ -79,29 +109,62 @@ export function LocalizeItemDialog(props) {
             try {
                 const batchId = generateBatchId();
                 const translationResult = await performDefaultTranslation(currentWizardData, editContext, batchId);
-                console.log("Translation completed successfully:", translationResult);
                 // Include batchId in result for navigation to translation management
                 const resultWithBatch = { ...result, batchId };
                 // Close dialog and let parent component handle navigation to translation management
                 props.onClose?.(resultWithBatch);
             }
             catch (error) {
-                console.error("Translation failed:", error);
-                // Still close the dialog even on error
+                // Handle specific error types
+                if (error.name === 'NoTranslationsNeededError') {
+                    // Show user-friendly message and close dialog
+                    alert('No translations needed. All selected target languages match the source languages of the items.');
+                    props.onClose?.(result);
+                    return;
+                }
+                // For other errors, still close the dialog
+                console.error('Translation failed:', error);
+                alert('Translation failed. Please check the console for details.');
                 props.onClose?.(result);
             }
         }
         catch (error) {
-            console.error("Error in handleFinish:", error);
             props.onClose?.(null);
         }
     }, [editContext, props]);
-    const handleStepCompleted = useCallback((completed) => {
-        if (!currentStep)
+    // Stable setData wrapper to prevent infinite loops
+    // Use refs to access current values without creating dependencies
+    const setWizardDataStable = useCallback((newData) => {
+        // Create a stable key from the data to detect actual changes
+        // Only compare the fields that matter for re-renders
+        const dataKey = JSON.stringify({
+            translationProvider: newData.translationProvider,
+            targetLanguages: [...newData.targetLanguages].sort(),
+            includeSubitems: newData.includeSubitems,
+            discoveredItemsCount: newData.discoveredItems?.length || 0,
+            itemsCount: newData.items?.length || 0,
+        });
+        // Skip if data hasn't actually changed
+        if (lastSetWizardDataRef.current === dataKey) {
             return;
-        setCompletedByStepId(prev => ({ ...prev, [currentStep.id]: completed }));
-    }, [currentStep?.id]);
-    const StepComponent = currentStep?.component;
+        }
+        lastSetWizardDataRef.current = dataKey;
+        setWizardData(newData);
+    }, []); // No dependencies - use refs to access current values
+    // Simplified step completion handler - steps pass their stepIndex via closure
+    // Since steps are always mounted, we can use the step index directly from the map
+    const handleStepCompleted = useCallback((completed, stepIndex) => {
+        if (completed) {
+            setStepCompleted((prev) => {
+                const newValue = Math.max(prev, stepIndex);
+                return newValue;
+            });
+        }
+        else {
+            const newValue = Math.max(-1, stepIndex - 1);
+            setStepCompleted(newValue);
+        }
+    }, []);
     return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
             // Only close when explicitly requested (e.g., close button clicked)
             if (!open) {
@@ -117,7 +180,11 @@ export function LocalizeItemDialog(props) {
                                                 ? "text-blue-600 font-medium"
                                                 : currentStepIndex > index
                                                     ? "text-blue-600"
-                                                    : "text-gray-400"), "data-testid": `step-indicator-label-${step.id}`, children: step.name }), index < activeSteps.length - 1 && (_jsx(ChevronRightIcon, { className: "w-4 h-4 text-gray-400 mx-2" }))] }, step.id))) }) }), _jsx("div", { className: "flex-1 overflow-y-auto min-h-0", "data-testid": "translation-wizard-step-content", children: StepComponent && (_jsx("div", { className: "h-full", children: _jsx(StepComponent, { data: wizardData, setData: setWizardData, editContext: editContext, onStepCompleted: handleStepCompleted, setBeforeNextCallback: (cb) => {
-                                        setBeforeNextCallback(() => cb);
-                                    }, setFooterActions: provideFooterActions, requestClose: requestCloseCb }) })) }), _jsxs(DialogButtons, { "data-testid": "translation-wizard-dialog-buttons", children: [_jsx(Button, { onClick: () => props.onClose?.(null), variant: "outline", size: "default", "data-testid": "translation-wizard-cancel-button", children: "Cancel" }), currentStepIndex > 0 && (_jsx(Button, { onClick: handlePrevious, variant: "outline", size: "default", "data-testid": "translation-wizard-previous-button", children: "Previous" })), footerActions.map((a) => (_jsx(Button, { onClick: a.onClick, disabled: !!a.disabled, variant: "default", size: "default", "data-testid": `translation-wizard-footer-action-${a.key}`, children: a.label }, a.key))), _jsx(Button, { onClick: handleNext, disabled: !canProceed, variant: "default", size: "default", "data-testid": "translation-wizard-next-button", children: isLastStep ? "Start Translation" : "Next" })] })] })] }) }));
+                                                    : "text-gray-400"), "data-testid": `step-indicator-label-${step.id}`, children: step.name }), index < activeSteps.length - 1 && (_jsx(ChevronRightIcon, { className: "w-4 h-4 text-gray-400 mx-2" }))] }, step.id))) }) }), _jsx("div", { className: "flex-1 overflow-y-auto min-h-0", "data-testid": "translation-wizard-step-content", children: _jsx("div", { className: "h-full relative", children: activeSteps.map((step, index) => {
+                                    const StepComponent = step.component;
+                                    const isActive = index === currentStepIndex;
+                                    if (!StepComponent)
+                                        return null;
+                                    return (_jsx("div", { className: "h-full", style: { display: isActive ? 'block' : 'none' }, "aria-hidden": !isActive, "data-testid": `step-content-${step.id}`, children: _jsx(StepComponent, { stepIndex: index, isActive: isActive, data: wizardData, setData: setWizardDataStable, editContext: editContext, onStepCompleted: (completed) => handleStepCompleted(completed, index), setBeforeNextCallback: isActive ? setBeforeNextCallbackStable : undefined, setFooterActions: isActive ? provideFooterActions : undefined, requestClose: isActive ? requestCloseCb : undefined }) }, step.id));
+                                }) }) }), _jsxs(DialogButtons, { "data-testid": "translation-wizard-dialog-buttons", children: [_jsx(Button, { onClick: () => props.onClose?.(null), variant: "outline", size: "default", "data-testid": "translation-wizard-cancel-button", children: "Cancel" }), currentStepIndex > 0 && (_jsx(Button, { onClick: handlePrevious, variant: "outline", size: "default", "data-testid": "translation-wizard-previous-button", children: "Previous" })), footerActions.map((a) => (_jsx(Button, { onClick: a.onClick, disabled: !!a.disabled, variant: "default", size: "default", "data-testid": `translation-wizard-footer-action-${a.key}`, children: a.label }, a.key))), _jsx(Button, { onClick: handleNext, disabled: !canProceed, variant: "default", size: "default", "data-testid": "translation-wizard-next-button", children: isLastStep ? "Start Translation" : "Next" })] })] })] }) }));
 }

package/dist/LocalizeItemUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeItemUtils.d.ts","sourceRoot":"","sources":["../src/LocalizeItemUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,eAAe,EAC5B,iBAAiB,CAAC,EAAE,MAAM,GACzB,OAAO,CAAC,iBAAiB,CAAC,CAqE5B;AAGD,eAAO,MAAM,mBAAmB,GAAU,eAAe,MAAM,EAAE,EAAE,mBAAmB,iBAAiB,EAAE,EAAE,WAAW,MAAM,EAAE,MAAM,QAAQ,EAAE,qBAAqB,MAAM,+BA0BxK,CAAC"}
+{"version":3,"file":"LocalizeItemUtils.d.ts","sourceRoot":"","sources":["../src/LocalizeItemUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,wBAAgB,eAAe,IAAI,MAAM,CAExC;AAED,MAAM,MAAM,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,eAAe,EAC5B,iBAAiB,CAAC,EAAE,MAAM,GACzB,OAAO,CAAC,iBAAiB,CAAC,CAgF5B;AAGD,eAAO,MAAM,mBAAmB,GAAU,eAAe,MAAM,EAAE,EAAE,mBAAmB,iBAAiB,EAAE,EAAE,WAAW,MAAM,EAAE,MAAM,QAAQ,EAAE,qBAAqB,MAAM,+BA0BxK,CAAC"}

package/dist/LocalizeItemUtils.js

@@ -15,15 +15,17 @@ export async function performDefaultTranslation(wizardData, editContext, predefi
     for (const item of itemsToTranslate) {
         for (const language of wizardData.targetLanguages) {
             const languageInfo = wizardData.languageData.get(language);
-            if (!languageInfo?.translationStatus)
-                continue;
-            const status = languageInfo.translationStatus;
-            if (status.sourceLanguage === language)
+            // Determine source language for this target language from translation status
+            // The UI already filters out languages where sourceLanguage === targetLanguage,
+            // so we can trust that if a language is selected, it has a valid source
+            const sourceLanguage = languageInfo?.translationStatus?.sourceLanguage || "en";
+            // Skip if target language equals source language (already filtered in UI, but double-check here)
+            if (language === sourceLanguage)
                 continue;
             const translationItem = {
                 itemId: item.descriptor.id,
                 targetLanguage: language,
-                sourceLanguage: status.sourceLanguage || "en",
+                sourceLanguage: sourceLanguage,
             };
             // Get metadata for this specific item and language
             const itemLanguageMetadata = wizardData.itemMetadata.get(item.descriptor.id)?.get(language);
@@ -33,6 +35,12 @@ export async function performDefaultTranslation(wizardData, editContext, predefi
             translationRequests.push(translationItem);
         }
     }
+    // Validate that we have translation requests to process
+    if (translationRequests.length === 0) {
+        const error = new Error('No translations needed. All selected target languages match the source languages of the items.');
+        error.name = 'NoTranslationsNeededError';
+        throw error;
+    }
     try {
         const batchResult = await requestBatchTranslation({
             sessionId: editContext.sessionId,

package/dist/steps/MetadataInputStep.d.ts

@@ -1,4 +1,4 @@
 import { TranslationStepProps } from "./types";
 /** Example Step for metadata input testing */
-export declare function MetadataInputStep({ data, setData, onStepCompleted, }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataInputStep({ stepIndex, isActive, data, setData, onStepCompleted, }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MetadataInputStep.d.ts.map

package/dist/steps/MetadataInputStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetadataInputStep.d.ts","sourceRoot":"","sources":["../../src/steps/MetadataInputStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,8CAA8C;AAC9C,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,eAAe,GAChB,EAAE,oBAAoB,2CA0EtB"}
+{"version":3,"file":"MetadataInputStep.d.ts","sourceRoot":"","sources":["../../src/steps/MetadataInputStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,8CAA8C;AAC9C,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,GAChB,EAAE,oBAAoB,2CA4EtB"}

package/dist/steps/MetadataInputStep.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 /** Example Step for metadata input testing */
-export function MetadataInputStep({ data, setData, onStepCompleted, }) {
+export function MetadataInputStep({ stepIndex, isActive = true, data, setData, onStepCompleted, }) {
     // Convert Map<string, Map<string, string>> to a flat object for local state management
     const [itemMetadata, setItemMetadata] = useState(() => {
         const result = {};
@@ -30,9 +30,12 @@ export function MetadataInputStep({ data, setData, onStepCompleted, }) {
     };
     // Data is saved automatically on change
     useEffect(() => {
+        // Only update completion when this step is active
+        if (!isActive)
+            return;
         // Mark step as completed since metadata is optional
         onStepCompleted(true);
-    }, [onStepCompleted]);
+    }, [isActive, onStepCompleted]); // Check when active state changes
     // No footer actions needed since data is saved automatically
     return (_jsxs("div", { className: "flex flex-col gap-4 p-4", "data-testid": "metadata-input-step", children: [_jsx("h3", { className: "text-lg font-medium", children: "Enter Metadata Per Item Per Language" }), _jsx("p", { className: "text-sm text-gray-600", children: "Provide custom metadata for each item and language combination (optional)." }), _jsx("div", { className: "max-h-64 overflow-y-auto space-y-4", "data-testid": "metadata-input-container", children: allItems.map((item) => (_jsxs("div", { className: "border rounded p-3", "data-testid": `metadata-item-${item.id}`, children: [_jsx("label", { className: "block text-sm font-medium mb-2", "data-testid": `metadata-item-label-${item.id}`, children: item.name || item.id }), data.targetLanguages?.map((language) => (_jsxs("div", { className: "mb-2", "data-testid": `metadata-field-${item.id}-${language}`, children: [_jsxs("label", { className: "block text-xs font-medium mb-1 text-gray-600", "data-testid": `metadata-language-label-${item.id}-${language}`, children: [language.toUpperCase(), ":"] }), _jsx("textarea", { className: "w-full border rounded p-2 text-sm", rows: 2, value: itemMetadata[item.id]?.[language] || "", onChange: (e) => handleMetadataChange(item.id, language, e.target.value), placeholder: `Enter metadata for ${language}...`, "data-testid": `metadata-textarea-${item.id}-${language}` })] }, `${item.id}-${language}`)))] }, item.id))) })] }));
 }

package/dist/steps/ServiceLanguageSelectionStep.d.ts

@@ -1,3 +1,3 @@
 import { TranslationStepProps } from "./types";
-export declare function ServiceLanguageSelectionStep({ data, setData, onStepCompleted, editContext, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function ServiceLanguageSelectionStep({ stepIndex, isActive, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ServiceLanguageSelectionStep.d.ts.map

package/dist/steps/ServiceLanguageSelectionStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE,wBAAgB,4BAA4B,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAsPjJ"}
+{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAyU7K"}

package/dist/steps/ServiceLanguageSelectionStep.js

@@ -1,44 +1,88 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 // Version creation now offered via VersionOnlyTranslationProvider. No custom button here.
-export function ServiceLanguageSelectionStep({ data, setData, onStepCompleted, editContext, setFooterActions, requestClose }) {
+export function ServiceLanguageSelectionStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }) {
     const [languageSelection, setLanguageSelection] = useState({});
     const dataRef = useRef(data);
     useEffect(() => { dataRef.current = data; }, [data]);
     // Check if multi-item translation is enabled
     const multiItemEnabled = editContext?.configuration?.localization?.multiItem !== false;
-    // Use a ref to avoid dependency on onStepCompleted
+    // Use ref to track onStepCompleted to avoid dependency issues
     const onStepCompletedRef = useRef(onStepCompleted);
     useEffect(() => {
         onStepCompletedRef.current = onStepCompleted;
     }, [onStepCompleted]);
+    // Track last completion state to prevent unnecessary calls
+    const lastCompletionStateRef = useRef(null);
+    // Call completion check when component mounts or when returning to this step
+    // Also check when data changes (but only if we're actually the active step)
     useEffect(() => {
+        // Only update completion when this step is active
+        if (!isActive)
+            return;
         const hasProvider = !!data.translationProvider;
         const hasLanguages = data.targetLanguages.length > 0;
-        onStepCompletedRef.current(hasProvider && hasLanguages);
-    }, [data.translationProvider, data.targetLanguages.length]);
+        const isCompleted = hasProvider && hasLanguages;
+        // Only call if completion state actually changed
+        if (lastCompletionStateRef.current !== isCompleted) {
+            lastCompletionStateRef.current = isCompleted;
+            onStepCompletedRef.current(isCompleted);
+        }
+    }, [isActive, data.translationProvider, data.targetLanguages.length]);
     // 1) Derive provider + available languages (lightweight, in-memory)
     const provider = useMemo(() => data.translationProviders.find(p => p.name === data.translationProvider), [data.translationProviders, data.translationProvider]);
-    const siteLanguageCodes = useMemo(() => Array.from(data.languageData.keys()), [data.languageData]);
+    // Use editContext.itemLanguages (like TranslationSidebar) to get all languages including source language
+    // This is not item-specific - it shows all available languages for the site
+    const editContextLanguages = useMemo(() => editContext?.itemLanguages || [], [editContext?.itemLanguages]);
+    // Get language codes from editContext languages, or fallback to languageData keys
+    const siteLanguageCodes = useMemo(() => {
+        if (editContextLanguages.length > 0) {
+            return editContextLanguages.map(lang => lang.languageCode);
+        }
+        return Array.from(data.languageData.keys());
+    }, [editContextLanguages, data.languageData]);
     const availableLanguageCodes = useMemo(() => (provider?.supportedLanguages?.length ? provider.supportedLanguages : siteLanguageCodes), [provider?.supportedLanguages, siteLanguageCodes]);
+    // Determine the source language from the items being translated
+    // Use the first item's language as the source language (all items should have the same source language)
+    const itemSourceLanguage = useMemo(() => {
+        return data.items[0]?.descriptor.language || editContext?.contentEditorItem?.descriptor.language || "en";
+    }, [data.items, editContext?.contentEditorItem]);
     const allLanguages = useMemo(() => {
+        // Create a map of language codes to Language objects from editContext for quick lookup
+        const editContextLanguageMap = new Map(editContextLanguages.map(lang => [lang.languageCode, lang]));
         const arr = availableLanguageCodes
-            .map(code => ({
-            code,
-            name: data.languageData.get(code)?.name || code,
-            hasVersions: (data.languageData.get(code)?.items.length || 0) > 0,
-            translationStatus: data.languageData.get(code)?.translationStatus,
-        }))
-            // Exclude languages where the provider/source language equals the language itself
-            // e.g., if sourceLanguage is 'en', don't allow translating to 'en'
-            .filter(lang => !lang.translationStatus || lang.translationStatus.sourceLanguage !== lang.code);
+            .map(code => {
+            // Prefer language info from editContext (like TranslationSidebar), fallback to languageData
+            const editContextLang = editContextLanguageMap.get(code);
+            const languageDataLang = data.languageData.get(code);
+            // Determine source language: prefer from translationStatus, fallback to item's source language
+            const sourceLanguage = languageDataLang?.translationStatus?.sourceLanguage || itemSourceLanguage;
+            return {
+                code,
+                name: editContextLang?.name || languageDataLang?.name || code,
+                hasVersions: (editContextLang?.versions || 0) > 0 || (languageDataLang?.items.length || 0) > 0,
+                translationStatus: languageDataLang?.translationStatus,
+                sourceLanguage, // Add source language to the language object
+            };
+        })
+            // Filter out languages where sourceLanguage equals targetLanguage
+            .filter(lang => lang.sourceLanguage !== lang.code);
         arr.sort((a, b) => a.name.localeCompare(b.name));
         return arr;
-    }, [availableLanguageCodes, data.languageData]);
+    }, [availableLanguageCodes, editContextLanguages, data.languageData, itemSourceLanguage]);
+    // Track last processed targetLanguages to prevent unnecessary updates
+    const lastProcessedTargetLanguagesRef = useRef('');
     // Rehydrate UI selection from saved wizard data when returning to this step
     useEffect(() => {
         if (!allLanguages || allLanguages.length === 0)
             return;
+        // Create a stable key from targetLanguages to detect actual changes
+        const targetLanguagesKey = JSON.stringify([...data.targetLanguages].sort());
+        // Skip if we've already processed this exact set of target languages
+        if (lastProcessedTargetLanguagesRef.current === targetLanguagesKey) {
+            return;
+        }
+        lastProcessedTargetLanguagesRef.current = targetLanguagesKey;
         const initialSelection = {};
         // Mark as selected any language that's in our saved targetLanguages array
         for (const langCode of data.targetLanguages) {
@@ -49,20 +93,32 @@ export function ServiceLanguageSelectionStep({ data, setData, onStepCompleted, e
         }
         setLanguageSelection(initialSelection);
     }, [allLanguages, data.targetLanguages]);
+    // Track last set targetLanguages to prevent unnecessary setData calls
+    const lastSetTargetLanguagesRef = useRef('');
     // Update wizard data when language selection changes
     useEffect(() => {
         const selectedLanguages = Object.entries(languageSelection)
             .filter(([, isSelected]) => isSelected)
             .map(([code]) => code);
-        // Only update if the selection has actually changed
-        if (JSON.stringify(selectedLanguages.sort()) !== JSON.stringify(data.targetLanguages.sort())) {
-            const newData = {
-                ...data,
-                targetLanguages: selectedLanguages
-            };
-            setData(newData);
+        const selectedLanguagesKey = JSON.stringify([...selectedLanguages].sort());
+        const currentTargetLanguagesKey = JSON.stringify([...data.targetLanguages].sort());
+        // Only update if the selection has actually changed AND we haven't already set this value
+        if (selectedLanguagesKey === currentTargetLanguagesKey) {
+            // Selection matches current data, no update needed
+            return;
+        }
+        if (lastSetTargetLanguagesRef.current === selectedLanguagesKey) {
+            // We've already set this value, skip to prevent loops
+            return;
         }
-    }, [languageSelection]);
+        lastSetTargetLanguagesRef.current = selectedLanguagesKey;
+        const newData = {
+            ...dataRef.current,
+            targetLanguages: selectedLanguages
+        };
+        setData(newData);
+        // Completion will be updated by the useEffect that watches data.targetLanguages.length
+    }, [languageSelection, setData, data.targetLanguages]);
     const handleProviderChange = (e) => {
         const newProvider = e.target.value;
         const newData = {
@@ -74,6 +130,7 @@ export function ServiceLanguageSelectionStep({ data, setData, onStepCompleted, e
         setData(newData);
         // Clear UI selection too
         setLanguageSelection({});
+        // Completion will be updated by the useEffect that watches data.translationProvider
     };
     const handleLanguageToggle = (langCode) => {
         setLanguageSelection(prev => ({ ...prev, [langCode]: !prev[langCode] }));
@@ -110,11 +167,11 @@ export function ServiceLanguageSelectionStep({ data, setData, onStepCompleted, e
     const areSomeLanguagesSelected = useMemo(() => {
         return allLanguages.some(lang => languageSelection[lang.code]);
     }, [allLanguages, languageSelection]);
-    return (_jsxs("div", { className: "p-6 space-y-6 h-full flex flex-col", "data-testid": "service-language-selection-step", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-xl font-semibold mb-2", children: "Configure Translation" }), _jsx("p", { className: "text-sm text-gray-600 mb-6", children: "Select translation provider and target languages for your content." })] }), _jsxs("div", { className: "space-y-6 flex-1", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-gray-900 mb-2", children: "Translation Provider" }), _jsx("p", { className: "text-xs text-gray-600 mb-3", children: "Choose how to translate your content. \"Create Versions\" will create new language versions without automatic translation." }), _jsxs("select", { value: data.translationProvider || "", onChange: handleProviderChange, className: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm", "data-testid": "translation-provider-select", children: [_jsx("option", { value: "", disabled: true, children: "Select a provider..." }), data.translationProviders.map((provider) => (_jsx("option", { value: provider.name, children: provider.displayName }, provider.name)))] })] }), multiItemEnabled && (_jsxs("div", { children: [_jsxs("label", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", checked: data.includeSubitems, onChange: handleSubitemsToggle, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded", "data-testid": "include-subitems-checkbox" }), _jsx("span", { className: "ml-2 text-sm text-gray-900", children: "Include subitems" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-1 ml-6", children: "Also translate any child components and nested content within this item." })] })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Target Languages" }), allLanguages.length > 1 && (_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
+    return (_jsxs("div", { className: "p-6 space-y-6 h-full flex flex-col", "data-testid": "service-language-selection-step", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-xl font-semibold mb-2", children: "Configure Translation" }), _jsx("p", { className: "text-sm text-gray-600 mb-6", children: "Select translation provider and target languages for your content." })] }), _jsxs("div", { className: "space-y-6 flex-1", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-gray-900 mb-2", children: "Translation Provider" }), _jsx("p", { className: "text-xs text-gray-600 mb-3", children: "Choose how to translate your content. \"Create Versions\" will create new language versions without automatic translation." }), _jsxs("select", { value: data.translationProvider || "", onChange: handleProviderChange, className: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm", "data-testid": "translation-provider-select", children: [_jsx("option", { value: "", disabled: true, children: "Select a provider..." }), data.translationProviders.map((provider) => (_jsx("option", { value: provider.name, children: provider.displayName || provider.name }, provider.name)))] })] }), multiItemEnabled && (_jsxs("div", { children: [_jsxs("label", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", checked: data.includeSubitems, onChange: handleSubitemsToggle, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded", "data-testid": "include-subitems-checkbox" }), _jsx("span", { className: "ml-2 text-sm text-gray-900", children: "Include subitems" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-1 ml-6", children: "Also translate any child components and nested content within this item." })] })), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "text-sm font-medium text-gray-900", children: "Target Languages" }), allLanguages.length > 1 && (_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
                                                     if (input) {
                                                         input.indeterminate = areSomeLanguagesSelected && !areAllLanguagesSelected;
                                                     }
                                                 }, onChange: handleSelectAllLanguages, className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded", "data-testid": "select-all-languages-checkbox" }), _jsx("span", { className: "ml-2 text-xs text-gray-600", children: "Select All" })] }))] }), _jsx("p", { className: "text-xs text-gray-600 mb-3", children: "Select the languages you want to translate this content into." }), _jsx("div", { className: "border border-gray-200 rounded-md min-h-[200px] max-h-64 overflow-y-auto", children: data.translationProviders.length === 0 || allLanguages.length === 0 ? (
                                 // Loading skeleton
-                                _jsx("div", { className: "p-3 space-y-2", children: [...Array(4)].map((_, i) => (_jsxs("div", { className: "flex items-center animate-pulse", children: [_jsx("div", { className: "h-4 w-4 bg-gray-200 rounded" }), _jsx("div", { className: "ml-2 h-4 bg-gray-200 rounded w-32" }), _jsx("div", { className: "ml-auto h-4 bg-gray-200 rounded w-16" })] }, i))) })) : (_jsx("div", { className: "p-3 grid grid-cols-1 gap-2", children: allLanguages.map((lang) => (_jsxs("label", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", checked: languageSelection[lang.code] || false, onChange: () => handleLanguageToggle(lang.code), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded", "data-testid": `language-checkbox-${lang.code}` }), _jsxs("span", { className: "ml-2 text-sm text-gray-900", children: [lang.name, " (", lang.code, ")"] }), !lang.hasVersions && (_jsx("span", { className: "ml-auto text-xs text-orange-600 bg-orange-100 px-2 py-1 rounded", children: "No versions" }))] }, lang.code))) })) })] })] })] }));
+                                _jsx("div", { className: "p-3 space-y-2", children: [...Array(4)].map((_, i) => (_jsxs("div", { className: "flex items-center animate-pulse", children: [_jsx("div", { className: "h-4 w-4 bg-gray-200 rounded" }), _jsx("div", { className: "ml-2 h-4 bg-gray-200 rounded w-32" }), _jsx("div", { className: "ml-auto h-4 bg-gray-200 rounded w-16" })] }, i))) })) : (_jsx("div", { className: "p-3 grid grid-cols-1 gap-2", children: allLanguages.map((lang) => (_jsxs("label", { className: "flex items-center", children: [_jsx("input", { type: "checkbox", checked: languageSelection[lang.code] || false, onChange: () => handleLanguageToggle(lang.code), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded", "data-testid": `language-checkbox-${lang.code}` }), _jsxs("span", { className: "ml-2 text-sm text-gray-900 flex items-center gap-2", children: [_jsxs("span", { children: [lang.name, " (", lang.code, ")"] }), lang.sourceLanguage && (_jsxs("span", { className: "text-xs text-gray-500", children: ["from: ", lang.sourceLanguage] }))] }), !lang.hasVersions && (_jsx("span", { className: "ml-auto text-xs text-orange-600 bg-orange-100 px-2 py-1 rounded", children: "No versions" }))] }, lang.code))) })) })] })] })] }));
 }

package/dist/steps/SubitemDiscoveryStep.d.ts

@@ -1,3 +1,3 @@
 import { TranslationStepProps } from "./types";
-export declare function SubitemDiscoveryStep({ data, setData, editContext, onStepCompleted, setBeforeNextCallback, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubitemDiscoveryStep({ stepIndex, isActive, data, setData, editContext, onStepCompleted, setBeforeNextCallback, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SubitemDiscoveryStep.d.ts.map

package/dist/steps/SubitemDiscoveryStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubitemDiscoveryStep.d.ts","sourceRoot":"","sources":["../../src/steps/SubitemDiscoveryStep.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAY/C,wBAAgB,oBAAoB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAshBhK"}
+{"version":3,"file":"SubitemDiscoveryStep.d.ts","sourceRoot":"","sources":["../../src/steps/SubitemDiscoveryStep.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAW/C,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAqb5L"}