@parhelia/localization 0.1.12602 → 0.1.12612

package/dist/settings/TranslationServicesPanel.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState, useEffect } from "react";
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, } from "react";
+import { Button, useEditContext, Splitter, ItemConfigPanel, } from "@parhelia/core";
+import { CheckCircle as LucideCheckCircle, AlertCircle as LucideAlertCircle, RefreshCw as LucideRefreshCw, Plus as LucidePlus, Settings as LucideSettings, Trash2 as LucideTrash2, } from "lucide-react";
 import { getAvailableTranslationServices, createProviderSettings, getTranslationStructure, ensureTranslationStructure, } from "../services/translationService";
 const CheckCircleIcon = LucideCheckCircle;
 const AlertCircleIcon = LucideAlertCircle;
 const RefreshCwIcon = LucideRefreshCw;
 const PlusIcon = LucidePlus;
 const SettingsIcon = LucideSettings;
+const Trash2Icon = LucideTrash2;
 const DEFAULT_STRUCTURE_SETTINGS = {
     translationFolderPath: "/sitecore/system/Parhelia/Settings/Translation",
     translationFolderTemplateId: "b1e40cfe-6e36-4a0e-a49e-19c10b2127b7",
@@ -52,13 +53,13 @@ export function TranslationServicesPanel() {
             setStructureLoading(true);
             const result = await getTranslationStructure(structureSettings);
             if (result.type === "success" && result.data) {
-                const success = result.data.success !== false;
-                const response = result.data.success !== undefined ? result.data.data : result.data;
-                if (success && response) {
-                    setStructureState(response);
+                if (result.data.success && result.data.data) {
+                    setStructureState(result.data.data);
                 }
                 else {
-                    throw new Error(result.data.error || result.details || "Failed to read translation structure");
+                    throw new Error(result.data.error ||
+                        result.details ||
+                        "Failed to read translation structure");
                 }
             }
             else {
@@ -78,13 +79,13 @@ export function TranslationServicesPanel() {
             setError(null);
             const result = await ensureTranslationStructure(structureSettings);
             if (result.type === "success" && result.data) {
-                const success = result.data.success !== false;
-                const response = result.data.success !== undefined ? result.data.data : result.data;
-                if (success && response) {
-                    setStructureState(response);
+                if (result.data.success && result.data.data) {
+                    setStructureState(result.data.data);
                     return true;
                 }
-                throw new Error(result.data.error || result.details || "Failed to create translation structure");
+                throw new Error(result.data.error ||
+                    result.details ||
+                    "Failed to create translation structure");
             }
             throw new Error(result.details || "Failed to create translation structure");
         }
@@ -103,20 +104,24 @@ export function TranslationServicesPanel() {
             await loadStructure();
             const result = await getAvailableTranslationServices();
             if (result.type === "success" && result.data) {
-                // Backend returns ApiResponse<T>, so data is wrapped: { success: true, data: [...] }
-                const availableServices = Array.isArray(result.data)
-                    ? result.data
-                    : result.data.data || [];
+                if (!result.data.success || !result.data.data) {
+                    throw new Error(result.data.error ||
+                        result.details ||
+                        "Failed to load translation services. The translation API may not be available.");
+                }
+                const availableServices = result.data.data;
                 const serviceStates = availableServices.map((svc) => ({
                     ...svc,
-                    creating: false
+                    creating: false,
+                    deleting: false,
                 }));
                 setServices(serviceStates);
                 setState(availableServices.length === 0 ? "error" : "success");
             }
             else {
                 setState("error");
-                setError(result.details || "Failed to load translation services. The translation API may not be available.");
+                setError(result.details ||
+                    "Failed to load translation services. The translation API may not be available.");
             }
         }
         catch (e) {
@@ -125,32 +130,38 @@ export function TranslationServicesPanel() {
         }
     }, [loadStructure]);
     const handleStructureInputChange = useCallback((field) => (e) => {
-        setStructureSettings(prev => ({
+        setStructureSettings((prev) => ({
             ...prev,
             [field]: e.target.value,
         }));
     }, []);
     const createSettings = useCallback(async (serviceName, templateId) => {
         try {
-            setServices(prev => prev.map(s => s.serviceName === serviceName ? { ...s, creating: true } : s));
+            setServices((prev) => prev.map((s) => s.serviceName === serviceName ? { ...s, creating: true } : s));
             setError(null);
             const language = editContext?.item?.language ??
                 editContext?.currentItemDescriptor?.language ??
                 "en";
             const result = await createProviderSettings(serviceName, templateId, language, structureSettings);
             if (result.type === "success" && result.data) {
-                // Backend returns ApiResponse<T>, so unwrap: { success: true, data: { itemId, itemPath } }
-                const response = result.data.success ? result.data.data : result.data;
-                const success = result.data.success !== false;
-                if (success && response) {
-                    setServices(prev => prev.map(s => s.serviceName === serviceName
-                        ? { ...s, isConfigured: true, creating: false, settingsItemId: response.itemId }
+                const payload = result.data.data;
+                if (result.data.success && payload) {
+                    const settingsItemId = payload.itemId;
+                    setServices((prev) => prev.map((s) => s.serviceName === serviceName
+                        ? {
+                            ...s,
+                            isConfigured: true,
+                            creating: false,
+                            settingsItemId,
+                        }
                         : s));
                     // Reload data to ensure consistency
                     setTimeout(() => loadData(), 500);
                 }
                 else {
-                    throw new Error(result.data.error || result.details || "Failed to create settings");
+                    throw new Error(result.data.error ||
+                        result.details ||
+                        "Failed to create settings");
                 }
             }
             else {
@@ -163,7 +174,8 @@ export function TranslationServicesPanel() {
             let displayMessage = errorMessage;
             if (errorMessage.includes("Translation Providers folder not found") ||
                 errorMessage.includes("Translation folder not found")) {
-                displayMessage = "The required folder structure is missing. Configure and create the parent items in the Settings section above.";
+                displayMessage =
+                    "The required folder structure is missing. Configure and create the parent items in the Settings section above.";
             }
             else if (errorMessage.includes("already exists")) {
                 displayMessage = `Settings for ${serviceName} already exist. Please refresh the list.`;
@@ -171,41 +183,98 @@ export function TranslationServicesPanel() {
                 setTimeout(() => loadData(), 500);
             }
             setError(`Failed to create settings for ${serviceName}: ${displayMessage}`);
-            setServices(prev => prev.map(s => s.serviceName === serviceName ? { ...s, creating: false } : s));
+            setServices((prev) => prev.map((s) => s.serviceName === serviceName ? { ...s, creating: false } : s));
         }
     }, [editContext, loadData, structureSettings]);
+    const deleteSettings = useCallback(async (service) => {
+        if (!editContext || !service.settingsItemId)
+            return;
+        try {
+            setServices((prev) => prev.map((s) => s.serviceName === service.serviceName
+                ? { ...s, deleting: true }
+                : s));
+            setError(null);
+            const language = editContext.item?.language ??
+                editContext.currentItemDescriptor?.language ??
+                "en";
+            const deleted = await editContext.operations.deleteItems([
+                {
+                    id: service.settingsItemId,
+                    language,
+                    version: 0,
+                },
+            ]);
+            if (deleted) {
+                if (selectedConfigTarget?.key === `service:${service.serviceName}` ||
+                    selectedConfigTarget?.itemId === service.settingsItemId) {
+                    setSelectedConfigTarget(null);
+                }
+                setServices((prev) => prev.map((s) => s.serviceName === service.serviceName
+                    ? {
+                        ...s,
+                        isConfigured: false,
+                        settingsItemId: undefined,
+                        deleting: false,
+                    }
+                    : s));
+                await loadData();
+            }
+            else {
+                setServices((prev) => prev.map((s) => s.serviceName === service.serviceName
+                    ? { ...s, deleting: false }
+                    : s));
+            }
+        }
+        catch (e) {
+            setError(e?.message ||
+                `Failed to delete settings for ${service.displayName || service.serviceName}`);
+            setServices((prev) => prev.map((s) => s.serviceName === service.serviceName
+                ? { ...s, deleting: false }
+                : s));
+        }
+    }, [editContext, loadData, selectedConfigTarget]);
     useEffect(() => {
         loadData();
     }, [loadData]);
     const statusIcon = (currentState) => {
         if (currentState === "success")
-            return _jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600", strokeWidth: 1 });
+            return (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600", strokeWidth: 1 }));
         if (currentState === "error")
-            return _jsx(AlertCircleIcon, { className: "h-4 w-4 text-red-600", strokeWidth: 1 });
+            return (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-red-600", strokeWidth: 1 }));
         return (_jsx(RefreshCwIcon, { className: "h-4 w-4 animate-spin text-amber-600", strokeWidth: 1 }));
     };
-    const configuredCount = services.filter(s => s.isConfigured).length;
+    const configuredCount = services.filter((s) => s.isConfigured).length;
     const totalCount = services.length;
     const translationFolderExists = !!structureState?.translationFolder?.exists;
     const providersFolderExists = !!structureState?.translationProvidersFolder?.exists;
     // Build the services list content
     const servicesListContent = (_jsx("div", { className: "h-full overflow-auto p-4", children: _jsx("div", { className: "mx-auto", children: _jsx("div", { className: "rounded-lg bg-white p-4 md:p-6", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-gray-900", children: "Prerequisites" }), _jsxs("div", { className: "mt-1 flex items-center gap-2", children: [translationFolderExists && providersFolderExists ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600", strokeWidth: 1 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-amber-500", strokeWidth: 1 })), _jsx("span", { className: "text-sm text-gray-700", children: translationFolderExists && providersFolderExists
                                                         ? "All parent items found"
-                                                        : "Parent items missing" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: loadStructure, disabled: structureLoading || ensuringStructure, children: [_jsx(RefreshCwIcon, { strokeWidth: 1, className: `h-4 w-4 ${structureLoading ? "animate-spin" : ""}` }), "Refresh"] }), !providersFolderExists && (_jsxs(Button, { size: "sm", onClick: ensureStructure, disabled: ensuringStructure || structureLoading, children: [ensuringStructure ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.5, className: "h-4 w-4" })), "Ensure Items"] }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: `flex items-center justify-between rounded border p-3 text-sm transition-shadow hover:shadow-sm ${selectedConfigTarget?.key === `structure:${structureState?.translationFolder?.itemId}`
+                                                        : "Parent items missing" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", onClick: loadStructure, disabled: structureLoading || ensuringStructure, children: [_jsx(RefreshCwIcon, { strokeWidth: 1, className: `h-4 w-4 ${structureLoading ? "animate-spin" : ""}` }), "Refresh"] }), !providersFolderExists && (_jsxs(Button, { size: "sm", onClick: ensureStructure, disabled: ensuringStructure || structureLoading, children: [ensuringStructure ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.5, className: "h-4 w-4" })), "Ensure Items"] }))] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: `flex items-center justify-between rounded border p-3 text-sm transition-shadow hover:shadow-sm ${selectedConfigTarget?.key ===
+                                        `structure:${structureState?.translationFolder?.itemId}`
                                         ? "border-blue-400 bg-blue-50"
-                                        : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [translationFolderExists ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600 flex-shrink-0", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-amber-500 flex-shrink-0", strokeWidth: 1.5 })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-gray-900", children: "Translation folder" }), _jsx("div", { className: "text-xs text-gray-500 truncate", children: structureSettings.translationFolderPath })] })] }), _jsx("div", { className: "flex items-center gap-2 ml-4", children: translationFolderExists && structureState?.translationFolder?.itemId && (_jsxs(Button, { size: "sm", variant: selectedConfigTarget?.key === `structure:${structureState.translationFolder.itemId}`
+                                        : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [translationFolderExists ? (_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 folder" }), _jsx("div", { className: "text-xs text-gray-500 truncate", children: structureSettings.translationFolderPath })] })] }), _jsx("div", { className: "flex items-center gap-2 ml-4 shrink-0", children: translationFolderExists &&
+                                                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 }), "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}`
+                                                    : "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", children: [providersFolderExists ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600 flex-shrink-0", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-amber-500 flex-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", children: providersFolderExists && structureState?.translationProvidersFolder?.itemId && (_jsxs(Button, { size: "sm", variant: selectedConfigTarget?.key === `structure:${structureState.translationProvidersFolder.itemId}`
+                                        : "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 }), "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 === `service:${service.serviceName}`;
+                                const isSelected = selectedConfigTarget?.key ===
+                                    `service:${service.serviceName}`;
                                 return (_jsxs("div", { className: `flex items-center justify-between rounded border p-3 text-sm transition-shadow hover:shadow-sm ${isSelected
                                         ? "border-blue-400 bg-blue-50"
-                                        : "border-gray-200 bg-white"}`, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1", children: [service.isConfigured ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-green-600 flex-shrink-0", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-amber-500 flex-shrink-0", strokeWidth: 1.5 })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-gray-900", children: service.displayName || service.serviceName }), service.displayName && service.displayName !== service.serviceName && (_jsxs("div", { className: "text-xs text-gray-500", children: ["Service: ", service.serviceName] })), service.isConfigured && service.supportedLanguages && service.supportedLanguages.length > 0 && (_jsxs("div", { className: "text-xs text-gray-500 mt-1", 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", 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 }), "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));
+                                        : "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(_Fragment, { children: [_jsxs(Button, { size: "sm", variant: isSelected ? "default" : "ghost", onClick: () => handleOpenConfig(service), className: "shrink-0", disabled: service.deleting, children: [_jsx(SettingsIcon, { className: "h-4 w-4", strokeWidth: 1.5 }), editContext?.isMobile ? "" : "Configure"] }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: () => deleteSettings(service), className: "shrink-0 text-red-600 hover:text-red-700", disabled: service.deleting, title: `Delete settings for ${service.displayName || service.serviceName}`, children: [service.deleting ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4 animate-spin" })) : (_jsx(Trash2Icon, { className: "h-4 w-4", strokeWidth: 1.5 })), editContext?.isMobile ? "" : "Delete"] })] })) : (_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
@@ -232,6 +301,6 @@ export function TranslationServicesPanel() {
             },
         ];
     const SplitterComponent = Splitter;
-    return (_jsx(SplitterComponent, { panels: panels, localStorageKey: "translation-services-panel-splitter", direction: "horizontal", className: "h-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/setup/LocalizationSetupStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizationSetupStep.d.ts","sourceRoot":"","sources":["../../src/setup/LocalizationSetupStep.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,qBAAqB,4CA2NpC;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"LocalizationSetupStep.d.ts","sourceRoot":"","sources":["../../src/setup/LocalizationSetupStep.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,qBAAqB,4CA6NpC;AAED,eAAe,qBAAqB,CAAC"}

package/dist/setup/LocalizationSetupStep.js

@@ -29,8 +29,12 @@ export function LocalizationSetupStep() {
             setServices([]);
             const result = await getAvailableTranslationServices();
             if (result.type === "success" && result.data) {
-                // Backend returns ApiResponse<T>, so data is wrapped: { success: true, data: [...] }
-                const availableServices = Array.isArray(result.data) ? result.data : result.data.data || [];
+                if (!result.data.success || !result.data.data) {
+                    throw new Error(result.data.error ||
+                        result.details ||
+                        "Failed to check translation services. The translation API may not be available.");
+                }
+                const availableServices = result.data.data;
                 if (availableServices.length === 0) {
                     setState("error");
                     setError("No translation services registered in dependency injection.");
@@ -75,12 +79,9 @@ export function LocalizationSetupStep() {
                 "en";
             const result = await createProviderSettings(serviceName, templateId, language);
             if (result.type === "success" && result.data) {
-                // Backend returns ApiResponse<T>, so unwrap: { success: true, data: { itemId, itemPath } }
-                const response = result.data.success ? result.data.data : result.data;
-                const success = result.data.success !== false;
-                if (success && response) {
+                if (result.data.success && result.data.data) {
                     setServices(prev => prev.map(s => s.serviceName === serviceName
-                        ? { ...s, isConfigured: true, creating: false, settingsItemId: response.itemId }
+                        ? { ...s, isConfigured: true, creating: false, settingsItemId: result.data?.data?.itemId }
                         : s));
                     setTimeout(() => checkLocalization(), 500);
                 }

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,2CAoa5L"}