@parhelia/localization 0.1.12350 → 0.1.12390

package/dist/LocalizeItemDialog.d.ts.map

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

package/dist/LocalizeItemDialog.js

@@ -2,16 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Dialog, DialogContent, DialogHeader, DialogTitle, Button, cn, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@parhelia/core";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { AlertTriangle as LucideAlertTriangle } from "lucide-react";
-import { ChevronRight as LucideChevronRight } from "lucide-react";
 import { useTranslationWizard } from "./hooks/useTranslationWizard";
 import { performDefaultTranslation, generateBatchId } from "./LocalizeItemUtils";
-const ChevronRightIcon = LucideChevronRight;
 const AlertTriangleIcon = LucideAlertTriangle;
 // Threshold for warning about large batch translations
 const LARGE_BATCH_WARNING_THRESHOLD = 100;
 // Note: DialogButtons is an internal component that might need to be added to core exports
 // For now, we'll implement it inline
-const DialogButtons = ({ children, ...props }) => (_jsx("div", { className: "flex justify-end gap-2 pt-4 border-t border-[var(--color-gray-3)] mt-auto px-6 pb-6 bg-background", ...props, children: children }));
+const DialogButtons = ({ children, ...props }) => (_jsx("div", { className: "mt-auto flex flex-wrap items-stretch justify-end gap-2 gap-y-2 border-t border-[var(--color-gray-3)] bg-background px-6 pt-4 pb-6", ...props, children: children }));
 export function LocalizeItemDialog(props) {
     const editContext = props.editContext;
     const configuration = editContext.configuration.translationWizard;
@@ -222,25 +220,23 @@ export function LocalizeItemDialog(props) {
             if (!open) {
                 props.onClose?.(null);
             }
-        }, children: [_jsxs(DialogContent, { className: "w-[90vw] max-w-5xl h-[85vh] max-h-[900px] min-h-[700px] overflow-hidden flex flex-col", "data-testid": "translation-wizard-dialog", onPointerDownOutside: (e) => e.preventDefault(), onEscapeKeyDown: (e) => e.preventDefault(), "aria-describedby": "translation-wizard-description", style: {
-                    width: 'min(90vw, 1280px)',
-                    height: 'min(85vh, 900px)',
-                    minHeight: '700px'
-                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { "data-testid": "translation-wizard-title", children: "Translation Wizard" }), _jsx("div", { id: "translation-wizard-description", className: "sr-only", children: currentStep?.description || "Configure and start translation for your content." })] }), _jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [_jsx("div", { className: "border-b border-[var(--color-gray-3)] bg-background px-6", "data-testid": "translation-wizard-step-navigation", children: _jsx("div", { className: "flex items-center gap-3 py-3", children: activeSteps.map((step, index) => (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `step-indicator-${step.id}`, children: [_jsx("div", { className: cn("flex h-8 w-8 items-center justify-center rounded-full border text-sm font-medium transition-colors", currentStepIndex === index &&
-                                                    "border-[#9650fb] text-[#9650fb] bg-[#f6eeff]", currentStepIndex < index && "border-[var(--color-gray-3)] text-[var(--color-gray-2)]", currentStepIndex > index &&
-                                                    "bg-[#9650fb] text-white border-[#9650fb]"), style: currentStepIndex > index
-                                                    ? { backgroundColor: "#9650fb", color: "#ffffff" }
-                                                    : undefined, "data-testid": `step-indicator-circle-${step.id}`, children: currentStepIndex > index ? "✓" : index + 1 }), _jsx("span", { className: cn("text-sm", currentStepIndex === index
-                                                    ? "text-[#9650fb] font-medium"
-                                                    : currentStepIndex > index
-                                                        ? "text-[#9650fb]"
-                                                        : "text-[var(--color-gray-2)]"), "data-testid": `step-indicator-label-${step.id}`, children: step.name }), index < activeSteps.length - 1 && (_jsx(ChevronRightIcon, { className: "w-4 h-4 text-[var(--color-gray-3)] mx-2", strokeWidth: 1 }))] }, step.id))) }) }), _jsx("div", { className: "flex-1 overflow-y-auto min-h-0 bg-[var(--color-gray-5)]", "data-testid": "translation-wizard-step-content", children: _jsx("div", { className: "h-full relative", children: activeSteps.map((step, index) => {
+        }, children: [_jsxs(DialogContent, { className: "flex h-[85vh] max-h-[900px] min-h-0 w-[90vw] max-w-5xl flex-col overflow-hidden md:min-h-[700px]", "data-testid": "translation-wizard-dialog", onPointerDownOutside: (e) => e.preventDefault(), onEscapeKeyDown: (e) => e.preventDefault(), "aria-describedby": "translation-wizard-description", style: {
+                    width: "min(90vw, 1280px)",
+                    height: "min(85vh, 900px)",
+                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { "data-testid": "translation-wizard-title", children: "Translation Wizard" }), _jsx("div", { id: "translation-wizard-description", className: "sr-only", children: currentStep?.description || "Configure and start translation for your content." })] }), _jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [_jsx("div", { className: "border-b border-[var(--color-gray-3)] bg-background px-6", "data-testid": "translation-wizard-step-navigation", children: _jsx("div", { className: "flex min-w-0 flex-nowrap items-center gap-1 overflow-x-auto py-2.5 md:gap-1.5", children: activeSteps.map((step, index) => {
+                                        const isCurrent = currentStepIndex === index;
+                                        return (_jsxs("div", { className: "flex shrink-0 items-center gap-1", "data-testid": `step-indicator-${step.id}`, "aria-current": isCurrent ? "step" : undefined, children: [_jsx("div", { className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium transition-colors", isCurrent && "border-[#9650fb] bg-[#f6eeff] text-[#9650fb]", currentStepIndex < index && "border-[var(--color-gray-3)] text-[var(--color-gray-2)]", currentStepIndex > index && "border-[#9650fb] bg-[#9650fb] text-white"), style: currentStepIndex > index ? { backgroundColor: "#9650fb", color: "#ffffff" } : undefined, "data-testid": `step-indicator-circle-${step.id}`, "aria-label": step.name, children: currentStepIndex > index ? "✓" : index + 1 }), _jsx("span", { className: cn("inline-block text-sm align-middle transition-[max-width,opacity] duration-200 ease-out md:max-w-none md:opacity-100", isCurrent
+                                                        ? "max-w-[min(calc(100vw-5rem),20rem)] overflow-visible text-[#9650fb] font-medium max-md:opacity-100 md:max-w-none"
+                                                        : currentStepIndex > index
+                                                            ? "overflow-hidden text-[#9650fb] max-md:pointer-events-none max-md:max-w-0 max-md:opacity-0"
+                                                            : "overflow-hidden text-[var(--color-gray-2)] max-md:pointer-events-none max-md:max-w-0 max-md:opacity-0"), "data-testid": `step-indicator-label-${step.id}`, children: _jsx("span", { className: cn(isCurrent ? "whitespace-normal break-words md:whitespace-nowrap" : "whitespace-nowrap"), children: step.name }) })] }, step.id));
+                                    }) }) }), _jsx("div", { className: "flex-1 overflow-y-auto min-h-0 bg-[var(--color-gray-5)]", "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 || isSubmitting, variant: "default", size: "default", "data-testid": "translation-wizard-next-button", children: isSubmitting ? "Starting..." : isLastStep ? "Start Translation" : "Next" })] })] })] }), _jsx(AlertDialog, { open: showLargeBatchWarning, onOpenChange: setShowLargeBatchWarning, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangleIcon, { className: "h-5 w-5 text-amber-500" }), "Large Translation Batch"] }), _jsx(AlertDialogDescription, { children: (() => {
+                                    }) }) }), _jsxs(DialogButtons, { "data-testid": "translation-wizard-dialog-buttons", children: [_jsx(Button, { onClick: () => props.onClose?.(null), variant: "outline", size: "default", className: "max-md:hidden", "data-testid": "translation-wizard-cancel-button", children: "Cancel" }), _jsxs("div", { className: "flex min-h-10 min-w-0 flex-1 flex-wrap items-stretch justify-end gap-2 md:contents", children: [currentStepIndex > 0 && (_jsx(Button, { onClick: handlePrevious, variant: "outline", size: "default", className: "min-w-0 flex-1 md:min-w-[6.5rem] md:flex-initial", "data-testid": "translation-wizard-previous-button", children: "Previous" })), footerActions.map((a) => (_jsx(Button, { onClick: a.onClick, disabled: !!a.disabled, variant: "default", size: "default", className: "min-w-0 flex-1 md:flex-initial md:min-w-[6.5rem]", "data-testid": `translation-wizard-footer-action-${a.key}`, children: a.label }, a.key))), _jsx(Button, { onClick: handleNext, disabled: !canProceed || isSubmitting, variant: "default", size: "default", className: "min-w-0 flex-1 md:min-w-[6.5rem] md:flex-initial", "data-testid": "translation-wizard-next-button", children: isSubmitting ? "Starting..." : isLastStep ? "Start Translation" : "Next" })] })] })] })] }), _jsx(AlertDialog, { open: showLargeBatchWarning, onOpenChange: setShowLargeBatchWarning, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangleIcon, { className: "h-5 w-5 text-amber-500" }), "Large Translation Batch"] }), _jsx(AlertDialogDescription, { children: (() => {
                                         const { itemCount, languageCount, totalTranslations } = calculateTranslationCounts(wizardData);
                                         return (_jsxs(_Fragment, { children: ["You are about to start ", _jsxs("strong", { children: [totalTranslations, " translations"] }), " (", itemCount, " items \u00D7 ", languageCount, " languages). Large batches may take a significant amount of time to process.", _jsx("br", {}), _jsx("br", {}), "Are you sure you want to continue?"] }));
                                     })() })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isSubmitting, children: "Cancel" }), _jsx(AlertDialogAction, { onClick: handleLargeBatchConfirm, disabled: isSubmitting, children: isSubmitting ? "Starting..." : "Continue" })] })] }) })] }));

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAatD,OAAO,EACL,mBAAmB,EAGpB,MAAM,gBAAgB,CAAC;AAUxB,QAAA,MAAM,wCAAwC;;;;;;;;;;;;8BAalB,qBAAqB;;CAchD,CAAC;AAEF,QAAA,MAAM,4CAA4C;;;;;;;CAUjD,CAAC;AAkCF,OAAO,EAAE,wCAAwC,EAAE,4CAA4C,EAAE,CAAC;AAClG,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC/E,YAAY,EACV,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EACzB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEhF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,mBAAmB,EAClC,OAAO,CAAC,EAAE,yBAAyB,uBAsIpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAatD,OAAO,EACL,mBAAmB,EAGpB,MAAM,gBAAgB,CAAC;AAUxB,QAAA,MAAM,wCAAwC;;;;;;;;;;;;8BAalB,qBAAqB;;CAchD,CAAC;AAEF,QAAA,MAAM,4CAA4C;;;;;;;CAUjD,CAAC;AAkCF,OAAO,EAAE,wCAAwC,EAAE,4CAA4C,EAAE,CAAC;AAClG,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC/E,YAAY,EACV,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,yBAAyB,EACzB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEhF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,mBAAmB,EAClC,OAAO,CAAC,EAAE,yBAAyB,uBAiIpC"}

package/dist/index.js

@@ -110,15 +110,6 @@ export * from "./steps/types";
 export function configureLocalization(configuration, options) {
     const enableMultiItem = options?.multiItem !== false; // Default to true
     const enableTranslationManagement = options?.translationManagement !== false; // Default to true
-    // Add localization setup step
-    if (!configuration.setup) {
-        configuration.setup = { steps: [] };
-    }
-    // Check if the step is already added (to prevent duplicates)
-    const hasLocalizationSetup = configuration.setup.steps.some((step) => step === LocalizationSetupStep || step.name === "LocalizationSetupStep");
-    if (!hasLocalizationSetup) {
-        configuration.setup.steps.push(LocalizationSetupStep);
-    }
     // Initialize the translation wizard configuration if it doesn't exist
     if (!configuration.translationWizard) {
         configuration.translationWizard = enableMultiItem
@@ -188,35 +179,40 @@ export function configureLocalization(configuration, options) {
         icon: _jsx(LanguagesIcon, { strokeWidth: 1 }),
         content: _jsx(TranslationServicesPanel, {}),
     };
+    const localizationSetupPanel = {
+        id: "localization-setup",
+        title: "Localization Setup",
+        subtitle: "Verify translation services and create provider settings items",
+        icon: _jsx(LanguagesIcon, { strokeWidth: 1 }),
+        content: _jsx(LocalizationSetupStep, {}),
+    };
+    const ensureLocalizationPanels = (group) => {
+        if (!group.panels.some((p) => p.id === "translation-services")) {
+            group.panels.push(translationServicesPanel);
+        }
+        if (!group.panels.some((p) => p.id === "localization-setup")) {
+            group.panels.push(localizationSetupPanel);
+        }
+    };
     if (localizationGroupIndex >= 0) {
-        // Group exists, check if panel is already added
         const group = configuration.settings.groups[localizationGroupIndex];
         if (group) {
-            const hasPanel = group.panels.some((p) => p.id === "translation-services");
-            if (!hasPanel) {
-                group.panels.push(translationServicesPanel);
-            }
+            ensureLocalizationPanels(group);
         }
     }
     else {
-        // Group doesn't exist, create it
         const groups = configuration.settings.groups;
         const aboutIndex = groups.findIndex((g) => g.title === "About");
+        const localizationGroup = {
+            title: "Localization",
+            icon: _jsx(LanguagesIcon, { strokeWidth: 1 }),
+            panels: [translationServicesPanel, localizationSetupPanel],
+        };
         if (aboutIndex >= 0) {
-            // Insert before About section
-            groups.splice(aboutIndex, 0, {
-                title: "Localization",
-                icon: _jsx(LanguagesIcon, { strokeWidth: 1 }),
-                panels: [translationServicesPanel],
-            });
+            groups.splice(aboutIndex, 0, localizationGroup);
         }
         else {
-            // No About section found, push to end
-            groups.push({
-                title: "Localization",
-                icon: _jsx(LanguagesIcon, { strokeWidth: 1 }),
-                panels: [translationServicesPanel],
-            });
+            groups.push(localizationGroup);
         }
     }
     return configuration;

package/dist/settings/TranslationServicesPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TranslationServicesPanel.d.ts","sourceRoot":"","sources":["../../src/settings/TranslationServicesPanel.tsx"],"names":[],"mappings":"AA6DA;;;GAGG;AACH,wBAAgB,wBAAwB,4CAgnBvC;AAED,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"TranslationServicesPanel.d.ts","sourceRoot":"","sources":["../../src/settings/TranslationServicesPanel.tsx"],"names":[],"mappings":"AA6DA;;;GAGG;AACH,wBAAgB,wBAAwB,4CA+mBvC;AAED,eAAe,wBAAwB,CAAC"}

package/dist/settings/TranslationServicesPanel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, } from "react";
-import { Button, useEditContext, Splitter, ItemConfigPanel, useMediaQuery, } from "@parhelia/core";
+import { Button, useEditContext, Splitter, ItemConfigPanel, } from "@parhelia/core";
 import { CheckCircle as LucideCheckCircle, AlertCircle as LucideAlertCircle, RefreshCw as LucideRefreshCw, Plus as LucidePlus, Settings as LucideSettings, } from "lucide-react";
 import { getAvailableTranslationServices, createProviderSettings, getTranslationStructure, ensureTranslationStructure, } from "../services/translationService";
 const CheckCircleIcon = LucideCheckCircle;
@@ -28,7 +28,6 @@ export function TranslationServicesPanel() {
     const [structureState, setStructureState] = useState(null);
     const [structureLoading, setStructureLoading] = useState(false);
     const [ensuringStructure, setEnsuringStructure] = useState(false);
-    const isMobile = useMediaQuery("(max-width: 768px)");
     const handleOpenConfig = useCallback((service) => {
         if (service.isConfigured && service.settingsItemId) {
             setSelectedConfigTarget({
@@ -218,14 +217,14 @@ export function TranslationServicesPanel() {
                                                 structureState?.translationFolder?.itemId && (_jsxs(Button, { size: "sm", variant: selectedConfigTarget?.key ===
                                                     `structure:${structureState.translationFolder.itemId}`
                                                     ? "default"
-                                                    : "ghost", onClick: () => handleOpenStructureConfig(structureState.translationFolder.itemId, "Configure: Translation folder"), className: "shrink-0", children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), isMobile ? "" : "Configure"] })) })] }), _jsxs("div", { className: `flex items-center justify-between rounded border p-3 text-sm transition-shadow hover:shadow-sm ${selectedConfigTarget?.key ===
+                                                    : "ghost", onClick: () => handleOpenStructureConfig(structureState.translationFolder.itemId, "Configure: Translation folder"), className: "shrink-0", children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), editContext?.isMobile ? "" : "Configure"] })) })] }), _jsxs("div", { className: `flex items-center justify-between rounded border p-3 text-sm transition-shadow hover:shadow-sm ${selectedConfigTarget?.key ===
                                         `structure:${structureState?.translationProvidersFolder?.itemId}`
                                         ? "border-blue-400 bg-blue-50"
                                         : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [providersFolderExists ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600 shrink-0", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-amber-500 shrink-0", strokeWidth: 1.5 })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-gray-900", children: "Translation providers folder" }), _jsx("div", { className: "text-xs text-gray-500 truncate", children: structureSettings.translationProvidersPath })] })] }), _jsx("div", { className: "flex items-center gap-2 ml-4 shrink-0", children: providersFolderExists &&
                                                 structureState?.translationProvidersFolder?.itemId && (_jsxs(Button, { size: "sm", variant: selectedConfigTarget?.key ===
                                                     `structure:${structureState.translationProvidersFolder.itemId}`
                                                     ? "default"
-                                                    : "ghost", onClick: () => handleOpenStructureConfig(structureState.translationProvidersFolder.itemId, "Configure: Translation Providers folder"), className: "shrink-0", children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), isMobile ? "" : "Configure"] })) })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-gray-900", children: "Providers" }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [statusIcon(state), _jsx("span", { className: "text-sm text-gray-700", children: totalCount > 0
+                                                    : "ghost", onClick: () => handleOpenStructureConfig(structureState.translationProvidersFolder.itemId, "Configure: Translation Providers folder"), className: "shrink-0", children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), editContext?.isMobile ? "" : "Configure"] })) })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-gray-900", children: "Providers" }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [statusIcon(state), _jsx("span", { className: "text-sm text-gray-700", children: totalCount > 0
                                                         ? `${configuredCount} of ${totalCount} service${totalCount !== 1 ? "s" : ""} configured`
                                                         : "No services found" })] })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: loadData, children: [_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4" }), "Refresh"] })] }), totalCount === 0 && state === "success" && (_jsx("div", { className: "rounded border border-yellow-200 bg-yellow-50 p-3 text-sm text-yellow-800", children: "No translation services are registered in dependency injection. Please check the server configuration." })), services.length > 0 && (_jsx("div", { className: "space-y-1", children: services.map((service) => {
                                 const isSelected = selectedConfigTarget?.key ===
@@ -235,7 +234,7 @@ export function TranslationServicesPanel() {
                                         : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [service.isConfigured ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600 shrink-0", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-amber-500 shrink-0", strokeWidth: 1.5 })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-gray-900 truncate", children: service.displayName || service.serviceName }), service.displayName &&
                                                             service.displayName !== service.serviceName && (_jsxs("div", { className: "text-xs text-gray-500 truncate", children: ["Service: ", service.serviceName] })), service.isConfigured &&
                                                             service.supportedLanguages &&
-                                                            service.supportedLanguages.length > 0 && (_jsxs("div", { className: "text-xs text-gray-500 mt-1 truncate", children: ["Languages:", " ", service.supportedLanguages.join(", ")] })), !service.isConfigured && (_jsx("div", { className: "text-xs text-amber-600 mt-1", children: "Not configured" }))] })] }), _jsx("div", { className: "flex items-center gap-2 ml-4 shrink-0", children: service.isConfigured && service.settingsItemId ? (_jsxs(Button, { size: "sm", variant: isSelected ? "default" : "ghost", onClick: () => handleOpenConfig(service), className: "shrink-0", children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), isMobile ? "" : "Configure"] })) : (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => createSettings(service.serviceName, service.templateId), disabled: service.creating, title: `Create settings using template: ${service.templateName}`, className: "shrink-0", children: [service.creating ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.5, className: "h-4 w-4" })), "Create Settings"] })) })] }, service.serviceName));
+                                                            service.supportedLanguages.length > 0 && (_jsxs("div", { className: "text-xs text-gray-500 mt-1 truncate", children: ["Languages:", " ", service.supportedLanguages.join(", ")] })), !service.isConfigured && (_jsx("div", { className: "text-xs text-amber-600 mt-1", children: "Not configured" }))] })] }), _jsx("div", { className: "flex items-center gap-2 ml-4 shrink-0", children: service.isConfigured && service.settingsItemId ? (_jsxs(Button, { size: "sm", variant: isSelected ? "default" : "ghost", onClick: () => handleOpenConfig(service), className: "shrink-0", children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), editContext?.isMobile ? "" : "Configure"] })) : (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => createSettings(service.serviceName, service.templateId), disabled: service.creating, title: `Create settings using template: ${service.templateName}`, className: "shrink-0", children: [service.creating ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.5, className: "h-4 w-4" })), "Create Settings"] })) })] }, service.serviceName));
                             }) })), error && (_jsx("div", { className: "rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 whitespace-pre-wrap", children: error }))] }) }) }) }));
     // Build splitter panels - only show config panel when a service is selected
     const panels = selectedConfigTarget?.itemId
@@ -262,6 +261,6 @@ export function TranslationServicesPanel() {
             },
         ];
     const SplitterComponent = Splitter;
-    return (_jsx(SplitterComponent, { panels: panels, localStorageKey: "translation-services-panel-splitter", direction: isMobile ? "vertical" : "horizontal", className: "h-full w-full" }));
+    return (_jsx(SplitterComponent, { panels: panels, localStorageKey: "translation-services-panel-splitter", direction: editContext?.isMobile ? "vertical" : "horizontal", className: "h-full w-full" }));
 }
 export default TranslationServicesPanel;

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,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAiZ7K"}
+{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAkBtE,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CA8Z7K"}

package/dist/steps/ServiceLanguageSelectionStep.js

@@ -1,6 +1,20 @@
 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.
+function getTranslationStatusBadgeClass(status) {
+    switch (status) {
+        case "Completed":
+            return "text-green-700 bg-green-100";
+        case "Error":
+            return "text-red-700 bg-red-100";
+        case "In Progress":
+            return "text-purple-800 bg-purple-100";
+        case "Not started":
+            return "text-[var(--color-gray-2)] bg-[var(--color-gray-4)]";
+        default:
+            return "text-[var(--color-gray-2)] bg-[var(--color-gray-4)]";
+    }
+}
 export function ServiceLanguageSelectionStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }) {
     const [languageSelection, setLanguageSelection] = useState({});
     const dataRef = useRef(data);
@@ -220,5 +234,8 @@ export function ServiceLanguageSelectionStep({ stepIndex, isActive = true, data,
                                                     }
                                                 }, onChange: handleSelectAllLanguages, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "select-all-languages-checkbox" }), _jsx("span", { className: "ml-2 text-xs text-[var(--color-gray-2)]", children: "Select All" })] }))] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mb-3", children: "Select the languages you want to translate this content into." }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg min-h-[200px] max-h-64 overflow-y-auto bg-[var(--color-gray-5)]", 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-[var(--color-gray-3)] rounded" }), _jsx("div", { className: "ml-2 h-4 bg-[var(--color-gray-3)] rounded w-32" }), _jsx("div", { className: "ml-auto h-4 bg-[var(--color-gray-3)] 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 py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-4)] transition-colors cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: languageSelection[lang.code] || false, onChange: () => handleLanguageToggle(lang.code), className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": `language-checkbox-${lang.code}` }), _jsxs("span", { className: "ml-2 text-sm text-[var(--color-dark)] flex items-center gap-2", children: [_jsxs("span", { children: [lang.name, " (", lang.code, ")"] }), lang.sourceLanguage && (_jsxs("span", { className: "text-xs text-[var(--color-gray-2)]", children: ["from: ", lang.sourceLanguage] }))] }), !lang.hasVersions && (_jsx("span", { className: "ml-auto text-2xs text-orange-600 bg-orange-100 px-2 py-1 rounded-full font-medium", 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-[var(--color-gray-3)] rounded" }), _jsx("div", { className: "ml-2 h-4 bg-[var(--color-gray-3)] rounded w-32" }), _jsx("div", { className: "ml-auto h-4 bg-[var(--color-gray-3)] rounded w-16" })] }, i))) })) : (_jsx("div", { className: "p-3 grid grid-cols-1 gap-2", children: allLanguages.map((lang) => {
+                                        const statusLabel = lang.translationStatus?.status || "Not started";
+                                        return (_jsxs("label", { className: "flex items-start gap-2 py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-4)] transition-colors cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: languageSelection[lang.code] || false, onChange: () => handleLanguageToggle(lang.code), className: "mt-0.5 h-4 w-4 shrink-0 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": `language-checkbox-${lang.code}` }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "text-sm text-[var(--color-dark)]", children: [lang.name, " (", lang.code, ")"] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[var(--color-gray-2)]", children: [lang.sourceLanguage && _jsxs("span", { children: ["from: ", lang.sourceLanguage] }), !lang.hasVersions && (_jsx("span", { className: "text-2xs text-orange-600 bg-orange-100 px-2 py-1 rounded-full font-medium", children: "No versions" })), lang.hasVersions && (_jsx("span", { title: lang.translationStatus?.message, className: `text-2xs px-2 py-1 rounded-full font-medium ${getTranslationStatusBadgeClass(statusLabel)}`, "data-testid": `translation-status-badge-${lang.code}`, children: statusLabel }))] })] })] }, lang.code));
+                                    }) })) })] })] })] }));
 }

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;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,2CA8f5L"}
+{"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,2CA4f5L"}

package/dist/steps/SubitemDiscoveryStep.js

@@ -269,132 +269,132 @@ export function SubitemDiscoveryStep({ stepIndex, isActive = true, data, setData
         setIsDiscovering(false);
         setDiscoveryComplete(true);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-4 p-6 h-full", "data-testid": "subitem-discovery-step", children: [_jsxs("div", { className: "mb-2", children: [_jsx("h3", { className: "text-lg font-semibold text-[var(--color-dark)] mb-1", children: "Discover Subitems" }), _jsx("p", { className: "text-sm text-[var(--color-gray-2)]", children: "Scanning for subitems to include in translation..." })] }), _jsxs("div", { className: "border border-[var(--color-gray-3)] rounded-lg p-4 bg-background min-h-[120px] shadow-sm", "data-testid": "discovery-status-container", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isDiscovering && _jsx(Spinner, { "data-testid": "discovery-spinner" }), _jsx("span", { className: "font-medium text-[var(--color-dark)]", "data-testid": "discovery-status-text", children: isDiscovering ? 'Discovering subitems...' :
+    return (_jsxs("div", { className: "flex min-h-0 flex-col gap-4 p-6", "data-testid": "subitem-discovery-step", children: [_jsxs("div", { className: "mb-2 shrink-0", children: [_jsx("h3", { className: "text-lg font-semibold text-[var(--color-dark)] mb-1", children: "Discover Subitems" }), _jsx("p", { className: "text-sm text-[var(--color-gray-2)]", children: "Scanning for subitems to include in translation..." })] }), _jsxs("div", { className: "flex w-full min-w-0 shrink-0 flex-col rounded-lg border border-[var(--color-gray-3)] bg-background p-4 shadow-sm", "data-testid": "discovery-status-container", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [isDiscovering && _jsx(Spinner, { "data-testid": "discovery-spinner" }), _jsx("span", { className: "font-medium text-[var(--color-dark)]", "data-testid": "discovery-status-text", children: isDiscovering ? 'Discovering subitems...' :
                                             discoveryComplete ? 'Discovery Complete' :
-                                                'Ready to discover' })] }), isDiscovering && (_jsx(Button, { size: "sm", variant: "outline", onClick: handleCancel, "data-testid": "discovery-cancel-button", children: "Cancel" }))] }), _jsx("div", { className: "text-sm text-[var(--color-gray-2)] mb-3", "data-testid": "discovery-summary", children: discoveredCount > 0 ? (_jsxs("p", { "data-testid": "discovery-total-count", children: [_jsxs("span", { className: "font-medium text-[#9650fb]", children: [totalItemsCount, " total items found"] }), totalItemsCount !== translatableItemsCount && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("span", { className: "text-xs text-[var(--color-gray-2)]", children: ["Translatable items: ", translatableItemsCount, " | Non-translatable: ", totalItemsCount - translatableItemsCount] })] })), _jsx("br", {}), _jsxs("span", { className: "text-xs text-[var(--color-gray-2)]", children: ["Original items: ", data.items.length, " | Subitems discovered: ", Math.max(0, totalItemsCount - data.items.length)] }), isDiscovering && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "text-xs text-[var(--color-gray-2)] italic", children: "Item tree will appear when discovery completes" })] }))] })) : (_jsx("p", { className: "text-[var(--color-gray-2)]", children: "No items discovered yet." })) }), _jsx("div", { className: "mt-4 min-h-[400px]", children: !isDiscovering && discoveryComplete && treeInitialized && allDiscoveredItems.length > 0 && treeNodes.length > 0 ? (_jsx("div", { children: _jsxs("div", { className: "border-t border-[var(--color-gray-3)] pt-4", "data-testid": "item-selection-section", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "text-lg font-semibold text-[var(--color-dark)]", children: "Select Items to Translate" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("span", { className: "text-sm text-[var(--color-gray-2)]", "data-testid": "selection-summary-header", children: selectedItemIds.size > 0 ? _jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-[#9650fb]", children: selectedItemIds.size }), " selected"] }) : "No items selected" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => {
-                                                            if (!isActive)
-                                                                return;
-                                                            // Only select translatable items
-                                                            const translatableIds = new Set();
-                                                            const walk = (nodes) => {
-                                                                nodes.forEach(node => {
-                                                                    if (node?.data?.isTranslatable === true) {
-                                                                        translatableIds.add(node.key);
-                                                                    }
-                                                                    if (node.children)
-                                                                        walk(node.children);
-                                                                });
-                                                            };
-                                                            walk(treeNodes);
-                                                            setUserHasInteracted(true);
-                                                            setSelectedItemIds(translatableIds);
-                                                            onStepCompleted(translatableIds.size > 0);
-                                                        }, "data-testid": "select-all-items-button", children: "Select All" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
-                                                            if (!isActive)
-                                                                return;
-                                                            setUserHasInteracted(true);
-                                                            setSelectedItemIds(new Set());
-                                                            onStepCompleted(false);
-                                                        }, "data-testid": "select-none-items-button", children: "Select None" })] })] }), _jsx("div", { className: "text-xs text-[var(--color-gray-2)] mb-3", "data-testid": "selection-summary", children: _jsx("span", { children: "Tip: Hold Shift and click a checkbox to toggle all descendants." }) }), treeNodes.length > 0 && (_jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg h-80 overflow-auto bg-[var(--color-gray-5)]", "data-testid": "item-tree-view", children: _jsx(PerfectTree, { nodes: treeNodes, expandedKeys: expandedKeys, selectedKeys: selectedKeys, onToggleExpand: (key) => {
-                                                setExpandedIds(prev => {
-                                                    const next = new Set(prev);
-                                                    if (next.has(key))
-                                                        next.delete(key);
-                                                    else
-                                                        next.add(key);
-                                                    return next;
-                                                });
-                                            }, onSelect: (key, event) => {
-                                                if (!isActive)
-                                                    return; // Don't handle selection when inactive
-                                                setUserHasInteracted(true);
-                                                const targetNode = key;
-                                                const shift = event?.shiftKey === true;
-                                                const next = new Set(selectedItemIds);
-                                                // Only select translatable items
-                                                const findNode = (nodes) => {
-                                                    for (const n of nodes) {
-                                                        if (n.key === targetNode)
-                                                            return n;
-                                                        if (n.children) {
-                                                            const f = findNode(n.children);
-                                                            if (f)
-                                                                return f;
-                                                        }
+                                                'Ready to discover' })] }), isDiscovering && (_jsx(Button, { size: "sm", variant: "outline", onClick: handleCancel, "data-testid": "discovery-cancel-button", children: "Cancel" }))] }), _jsx("div", { className: "text-sm text-[var(--color-gray-2)] mb-3", "data-testid": "discovery-summary", children: discoveredCount > 0 ? (_jsxs("p", { "data-testid": "discovery-total-count", children: [_jsxs("span", { className: "font-medium text-[#9650fb]", children: [totalItemsCount, " total items found"] }), totalItemsCount !== translatableItemsCount && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("span", { className: "text-xs text-[var(--color-gray-2)]", children: ["Translatable items: ", translatableItemsCount, " | Non-translatable: ", totalItemsCount - translatableItemsCount] })] })), _jsx("br", {}), _jsxs("span", { className: "text-xs text-[var(--color-gray-2)]", children: ["Original items: ", data.items.length, " | Subitems discovered: ", Math.max(0, totalItemsCount - data.items.length)] }), isDiscovering && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "text-xs text-[var(--color-gray-2)] italic", children: "Item tree will appear when discovery completes" })] }))] })) : (_jsx("p", { className: "text-[var(--color-gray-2)]", children: "No items discovered yet." })) }), _jsx("div", { className: "mt-4 flex flex-col", children: !isDiscovering && discoveryComplete && treeInitialized && allDiscoveredItems.length > 0 && treeNodes.length > 0 ? (_jsxs("div", { className: "flex w-full min-w-0 flex-col", "data-testid": "item-selection-section", children: [_jsxs("div", { className: "mb-3 flex flex-col gap-2 border-t border-[var(--color-gray-3)] pt-4", children: [_jsx("h3", { className: "text-lg font-semibold text-[var(--color-dark)]", children: "Select Items to Translate" }), _jsx("span", { className: "text-sm text-[var(--color-gray-2)]", "data-testid": "selection-summary-header", children: selectedItemIds.size > 0 ? _jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium text-[#9650fb]", children: selectedItemIds.size }), " selected"] }) : "No items selected" }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                                                        if (!isActive)
+                                                            return;
+                                                        // Only select translatable items
+                                                        const translatableIds = new Set();
+                                                        const walk = (nodes) => {
+                                                            nodes.forEach(node => {
+                                                                if (node?.data?.isTranslatable === true) {
+                                                                    translatableIds.add(node.key);
+                                                                }
+                                                                if (node.children)
+                                                                    walk(node.children);
+                                                            });
+                                                        };
+                                                        walk(treeNodes);
+                                                        setUserHasInteracted(true);
+                                                        setSelectedItemIds(translatableIds);
+                                                        onStepCompleted(translatableIds.size > 0);
+                                                    }, "data-testid": "select-all-items-button", children: "Select All" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                                        if (!isActive)
+                                                            return;
+                                                        setUserHasInteracted(true);
+                                                        setSelectedItemIds(new Set());
+                                                        onStepCompleted(false);
+                                                    }, "data-testid": "select-none-items-button", children: "Select None" })] })] }), _jsx("div", { className: "text-xs text-[var(--color-gray-2)] mb-3", "data-testid": "selection-summary", children: _jsx("span", { children: "Tip: Hold Shift and click a checkbox to toggle all descendants." }) }), treeNodes.length > 0 && (_jsx("div", { className: "h-80 w-full min-w-0 shrink-0 overflow-auto rounded-lg border border-[var(--color-gray-3)] bg-[var(--color-gray-5)]", "data-testid": "item-tree-view", children: _jsx(PerfectTree, { nodes: treeNodes, expandedKeys: expandedKeys, selectedKeys: selectedKeys, onToggleExpand: (key) => {
+                                            setExpandedIds(prev => {
+                                                const next = new Set(prev);
+                                                if (next.has(key))
+                                                    next.delete(key);
+                                                else
+                                                    next.add(key);
+                                                return next;
+                                            });
+                                        }, onSelect: (key, event) => {
+                                            if (!isActive)
+                                                return; // Don't handle selection when inactive
+                                            setUserHasInteracted(true);
+                                            const targetNode = key;
+                                            const shift = event?.shiftKey === true;
+                                            const next = new Set(selectedItemIds);
+                                            // Only select translatable items
+                                            const findNode = (nodes) => {
+                                                for (const n of nodes) {
+                                                    if (n.key === targetNode)
+                                                        return n;
+                                                    if (n.children) {
+                                                        const f = findNode(n.children);
+                                                        if (f)
+                                                            return f;
                                                     }
-                                                    return null;
-                                                };
-                                                const n = findNode(treeNodes);
-                                                const isTranslatable = n?.data?.isTranslatable === true;
-                                                if (isTranslatable) {
-                                                    const ids = shift ? [key, ...getDescendantIds(key)] : [key];
-                                                    if (!next.has(key))
-                                                        ids.forEach((id) => next.add(id));
-                                                    else
-                                                        ids.forEach((id) => next.delete(id));
                                                 }
-                                                else {
-                                                    // Folder row click toggles all descendant translatable items
-                                                    const translatableIds = getDescendantTranslatableIds(key);
-                                                    const allSelected = translatableIds.length > 0 && translatableIds.every((id) => next.has(id));
-                                                    if (allSelected)
-                                                        translatableIds.forEach((id) => next.delete(id));
-                                                    else
-                                                        translatableIds.forEach((id) => next.add(id));
-                                                }
-                                                setSelectedItemIds(next);
-                                                // Update completion when user changes selection
-                                                onStepCompleted(next.size > 0);
-                                            }, renderNode: (node) => {
-                                                const isTranslatable = node?.data?.isTranslatable === true;
-                                                const translatableIds = !isTranslatable ? getDescendantTranslatableIds(node.key) : [];
-                                                const allSelected = !isTranslatable ? (translatableIds.length > 0 && translatableIds.every((id) => selectedItemIds.has(id))) : false;
-                                                const someSelected = !isTranslatable ? (translatableIds.some((id) => selectedItemIds.has(id)) && !allSelected) : false;
-                                                // Simple checkbox logic: if it's translatable, check direct selection; otherwise check descendant translatable items
-                                                // Base items are treated like any other selected item - if selected, show checked
-                                                const isChecked = isTranslatable ? selectedItemIds.has(node.key) : allSelected;
-                                                const icon = node?.data?.icon;
-                                                return (_jsxs("div", { className: `flex items-center gap-2 ${!isTranslatable ? 'opacity-70' : ''}`, children: [icon && (_jsx("img", { src: icon, alt: "", className: `w-4 h-4 ${!isTranslatable ? 'opacity-50' : ''}` })), _jsx("input", { type: "checkbox", checked: isChecked, disabled: !isTranslatable, "data-testid": `tree-item-checkbox-${node.key}`, ref: (el) => { if (el)
-                                                                el.indeterminate = someSelected; }, onMouseDown: (e) => {
-                                                                if (!isTranslatable)
-                                                                    return; // Don't handle mouse down for untranslatable items
-                                                                shiftToggleRef.current = e.shiftKey;
-                                                            }, onChange: (e) => {
-                                                                if (!isActive || !isTranslatable)
-                                                                    return; // Don't handle changes when inactive or untranslatable
-                                                                setUserHasInteracted(true);
-                                                                const next = new Set(selectedItemIds);
-                                                                if (isTranslatable) {
-                                                                    const withDesc = shiftToggleRef.current && (node.children?.length ?? 0) > 0;
-                                                                    const ids = withDesc ? [node.key, ...getDescendantIds(node.key)] : [node.key];
-                                                                    if (e.currentTarget.checked)
-                                                                        ids.forEach((id) => next.add(id));
-                                                                    else
-                                                                        ids.forEach((id) => next.delete(id));
-                                                                }
+                                                return null;
+                                            };
+                                            const n = findNode(treeNodes);
+                                            const isTranslatable = n?.data?.isTranslatable === true;
+                                            if (isTranslatable) {
+                                                const ids = shift ? [key, ...getDescendantIds(key)] : [key];
+                                                if (!next.has(key))
+                                                    ids.forEach((id) => next.add(id));
+                                                else
+                                                    ids.forEach((id) => next.delete(id));
+                                            }
+                                            else {
+                                                // Folder row click toggles all descendant translatable items
+                                                const translatableIds = getDescendantTranslatableIds(key);
+                                                const allSelected = translatableIds.length > 0 && translatableIds.every((id) => next.has(id));
+                                                if (allSelected)
+                                                    translatableIds.forEach((id) => next.delete(id));
+                                                else
+                                                    translatableIds.forEach((id) => next.add(id));
+                                            }
+                                            setSelectedItemIds(next);
+                                            // Update completion when user changes selection
+                                            onStepCompleted(next.size > 0);
+                                        }, renderNode: (node) => {
+                                            const isTranslatable = node?.data?.isTranslatable === true;
+                                            const translatableIds = !isTranslatable ? getDescendantTranslatableIds(node.key) : [];
+                                            const allSelected = !isTranslatable ? (translatableIds.length > 0 && translatableIds.every((id) => selectedItemIds.has(id))) : false;
+                                            const someSelected = !isTranslatable ? (translatableIds.some((id) => selectedItemIds.has(id)) && !allSelected) : false;
+                                            // Simple checkbox logic: if it's translatable, check direct selection; otherwise check descendant translatable items
+                                            // Base items are treated like any other selected item - if selected, show checked
+                                            const isChecked = isTranslatable ? selectedItemIds.has(node.key) : allSelected;
+                                            const icon = node?.data?.icon;
+                                            return (_jsxs("div", { className: `flex items-center gap-2 ${!isTranslatable ? 'opacity-70' : ''}`, children: [icon && (_jsx("img", { src: icon, alt: "", className: `w-4 h-4 ${!isTranslatable ? 'opacity-50' : ''}` })), _jsx("input", { type: "checkbox", checked: isChecked, disabled: !isTranslatable, "data-testid": `tree-item-checkbox-${node.key}`, ref: (el) => { if (el)
+                                                            el.indeterminate = someSelected; }, onMouseDown: (e) => {
+                                                            if (!isTranslatable)
+                                                                return; // Don't handle mouse down for untranslatable items
+                                                            shiftToggleRef.current = e.shiftKey;
+                                                        }, onChange: (e) => {
+                                                            if (!isActive || !isTranslatable)
+                                                                return; // Don't handle changes when inactive or untranslatable
+                                                            setUserHasInteracted(true);
+                                                            const next = new Set(selectedItemIds);
+                                                            if (isTranslatable) {
+                                                                const withDesc = shiftToggleRef.current && (node.children?.length ?? 0) > 0;
+                                                                const ids = withDesc ? [node.key, ...getDescendantIds(node.key)] : [node.key];
+                                                                if (e.currentTarget.checked)
+                                                                    ids.forEach((id) => next.add(id));
+                                                                else
+                                                                    ids.forEach((id) => next.delete(id));
+                                                            }
+                                                            else {
+                                                                const ids = getDescendantTranslatableIds(node.key);
+                                                                const allSel = ids.length > 0 && ids.every((id) => next.has(id));
+                                                                if (e.currentTarget.checked && !allSel)
+                                                                    ids.forEach((id) => next.add(id));
+                                                                else if (!e.currentTarget.checked && allSel)
+                                                                    ids.forEach((id) => next.delete(id));
                                                                 else {
-                                                                    const ids = getDescendantTranslatableIds(node.key);
-                                                                    const allSel = ids.length > 0 && ids.every((id) => next.has(id));
-                                                                    if (e.currentTarget.checked && !allSel)
-                                                                        ids.forEach((id) => next.add(id));
-                                                                    else if (!e.currentTarget.checked && allSel)
+                                                                    // Toggle based on current
+                                                                    if (allSel)
                                                                         ids.forEach((id) => next.delete(id));
-                                                                    else {
-                                                                        // Toggle based on current
-                                                                        if (allSel)
-                                                                            ids.forEach((id) => next.delete(id));
-                                                                        else
-                                                                            ids.forEach((id) => next.add(id));
-                                                                    }
+                                                                    else
+                                                                        ids.forEach((id) => next.add(id));
                                                                 }
-                                                                setSelectedItemIds(next);
-                                                                shiftToggleRef.current = false;
-                                                                // Update completion when user changes selection
-                                                                onStepCompleted(next.size > 0);
-                                                            } }), _jsx("span", { className: `${!isTranslatable ? 'opacity-70 italic' : ''}`, children: node.label })] }));
-                                            } }) }))] }) })) : isDiscovering ? (
+                                                            }
+                                                            setSelectedItemIds(next);
+                                                            shiftToggleRef.current = false;
+                                                            // Update completion when user changes selection
+                                                            onStepCompleted(next.size > 0);
+                                                        } }), _jsx("span", { className: `${!isTranslatable ? 'opacity-70 italic' : ''}`, children: node.label })] }));
+                                        } }) }))] })) : isDiscovering ? (
                         // Loading skeleton for discovery results
-                        _jsxs("div", { children: [_jsx("div", { className: "p-3 bg-[#f6eeff] border border-[#9650fb]/20 rounded-lg mb-4", children: _jsx("div", { className: "h-4 bg-[#9650fb]/20 rounded w-64 animate-pulse" }) }), _jsxs("div", { className: "border-t border-[var(--color-gray-3)] pt-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("div", { className: "h-6 bg-[var(--color-gray-3)] rounded w-48 animate-pulse" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-8 bg-[var(--color-gray-3)] rounded w-20 animate-pulse" }), _jsx("div", { className: "h-8 bg-[var(--color-gray-3)] rounded w-20 animate-pulse" })] })] }), _jsx("div", { className: "h-4 bg-[var(--color-gray-3)] rounded w-64 mb-3 animate-pulse" }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg h-80 overflow-auto bg-[var(--color-gray-5)]", children: _jsx("div", { className: "p-3 space-y-2", children: [...Array(8)].map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 animate-pulse", children: [_jsx("div", { className: "h-4 w-4 bg-[var(--color-gray-3)] rounded" }), _jsx("div", { className: "h-4 bg-[var(--color-gray-3)] rounded w-48" })] }, i))) }) })] })] })) : (
+                        _jsxs("div", { className: "flex w-full min-w-0 flex-col", children: [_jsx("div", { className: "p-3 bg-[#f6eeff] border border-[#9650fb]/20 rounded-lg mb-4", children: _jsx("div", { className: "h-4 bg-[#9650fb]/20 rounded w-64 animate-pulse" }) }), _jsxs("div", { className: "border-t border-[var(--color-gray-3)] pt-4", children: [_jsxs("div", { className: "mb-3 flex flex-col gap-2", children: [_jsx("div", { className: "h-6 bg-[var(--color-gray-3)] rounded w-48 animate-pulse" }), _jsx("div", { className: "h-4 bg-[var(--color-gray-3)] rounded w-40 animate-pulse" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("div", { className: "h-8 bg-[var(--color-gray-3)] rounded w-20 animate-pulse" }), _jsx("div", { className: "h-8 bg-[var(--color-gray-3)] rounded w-20 animate-pulse" })] })] }), _jsx("div", { className: "h-4 bg-[var(--color-gray-3)] rounded w-64 mb-3 animate-pulse" }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg h-80 shrink-0 overflow-auto bg-[var(--color-gray-5)]", children: _jsx("div", { className: "p-3 space-y-2", children: [...Array(8)].map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 animate-pulse", children: [_jsx("div", { className: "h-4 w-4 bg-[var(--color-gray-3)] rounded" }), _jsx("div", { className: "h-4 bg-[var(--color-gray-3)] rounded w-48" })] }, i))) }) })] })] })) : (
                         // Empty state
-                        _jsx("div", { className: "flex items-center justify-center h-80 border border-[var(--color-gray-3)] rounded-lg bg-[var(--color-gray-5)]", children: _jsxs("div", { className: "text-center text-[var(--color-gray-2)]", children: [_jsx("p", { className: "font-medium text-[var(--color-gray-1)]", children: "Ready to discover subitems" }), _jsx("p", { className: "text-sm mt-1", children: "Discovery will start automatically" })] }) })) })] })] }));
+                        _jsx("div", { className: "flex h-80 shrink-0 items-center justify-center overflow-auto rounded-lg border border-[var(--color-gray-3)] bg-[var(--color-gray-5)]", children: _jsxs("div", { className: "text-center text-[var(--color-gray-2)]", children: [_jsx("p", { className: "font-medium text-[var(--color-gray-1)]", children: "Ready to discover subitems" }), _jsx("p", { className: "text-sm mt-1", children: "Discovery will start automatically" })] }) })) })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parhelia/localization",
-  "version": "0.1.12350",
+  "version": "0.1.12390",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -34,8 +34,8 @@
     "@tailwindcss/postcss": "^4.1.18",
     "@turbo/gen": "^2.4.4",
     "@types/node": "^22.13.9",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
     "eslint": "^9.22.0",
     "tailwindcss": "^4.1.18",
     "typescript": "5.8.2"
@@ -45,11 +45,11 @@
     "lucide-react": "^0.486.0",
     "next": "16.0.10",
     "postcss": "^8.5.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   },
   "overrides": {
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2"
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3"
   }
 }