@parhelia/localization 0.1.12906 → 0.1.12909

package/dist/settings/TranslationServicesPanel.js

@@ -1,14 +1,15 @@
 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 { Button, Card, useEditContext, Splitter, ItemConfigPanel, DeleteIcon, } from "@parhelia/core";
+import { CheckCircle as LucideCheckCircle, AlertCircle as LucideAlertCircle, RefreshCw as LucideRefreshCw, Plus as LucidePlus, Settings as LucideSettings, Languages as LucideLanguages, ListChecks as LucideListChecks, } 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 LanguagesIcon = LucideLanguages;
+const ListChecksIcon = LucideListChecks;
 const DEFAULT_STRUCTURE_SETTINGS = {
     translationFolderPath: "/sitecore/system/Parhelia/Settings/Translation",
     translationFolderTemplateId: "b1e40cfe-6e36-4a0e-a49e-19c10b2127b7",
@@ -236,46 +237,30 @@ export function TranslationServicesPanel() {
     useEffect(() => {
         loadData();
     }, [loadData]);
-    const statusIcon = (currentState) => {
-        if (currentState === "success")
-            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(RefreshCwIcon, { className: "h-4 w-4 animate-spin text-amber-600", strokeWidth: 1 }));
-    };
     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", "data-testid": "translation-services-panel", 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: "space-y-4", "data-testid": "translation-services-prerequisites", 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", { "data-testid": "translation-structure-folder", 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 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 }), editContext?.isMobile ? "" : "Configure"] })) })] }), _jsxs("div", { "data-testid": "translation-structure-providers-folder", 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 }), 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", "data-testid": "translation-services-providers", children: services.map((service) => {
+    const servicesListContent = (_jsxs("div", { className: "flex h-full flex-col gap-4 p-4", "data-testid": "translation-services-panel", children: [_jsx(Card, { icon: _jsx(ListChecksIcon, { strokeWidth: 1, className: "h-5 w-5" }), title: "Prerequisites", description: "Required Sitecore folders for translation settings.", noPadding: true, className: "shrink-0", headerActions: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex items-center gap-1.5 text-xs text-neutral-grey-50", children: translationFolderExists && providersFolderExists ? (_jsxs(_Fragment, { children: [_jsx(CheckCircleIcon, { className: "h-3.5 w-3.5 text-feedback-green", strokeWidth: 1.5 }), "All parent items found"] })) : (_jsxs(_Fragment, { children: [_jsx(AlertCircleIcon, { className: "h-3.5 w-3.5 text-feedback-orange", strokeWidth: 1.5 }), "Parent items missing"] })) }), !providersFolderExists && (_jsxs(Button, { size: "sm", variant: "default", onClick: ensureStructure, disabled: ensuringStructure || structureLoading, children: [ensuringStructure ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "mr-1 h-4 w-4 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.75, className: "mr-1 h-4 w-4" })), "Ensure items"] }))] }), children: _jsxs("div", { className: "divide-y divide-border-default border-t border-border-default", children: [_jsxs("div", { "data-testid": "translation-structure-folder", className: `flex items-center gap-3 px-3 py-3 text-sm transition-colors ${selectedConfigTarget?.key ===
+                                `structure:${structureState?.translationFolder?.itemId}`
+                                ? "bg-feedback-blue-light"
+                                : "bg-white"}`, children: [translationFolderExists ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 shrink-0 text-feedback-green", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 shrink-0 text-feedback-orange", strokeWidth: 1.5 })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-neutral-grey-100", children: "Translation folder" }), _jsx("div", { className: "mt-0.5 truncate font-mono text-xs text-neutral-grey-50", children: structureSettings.translationFolderPath })] }), translationFolderExists &&
+                                    structureState?.translationFolder?.itemId && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleOpenStructureConfig(structureState.translationFolder.itemId, "Configure: Translation folder"), title: "Configure", children: _jsx(SettingsIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }))] }), _jsxs("div", { "data-testid": "translation-structure-providers-folder", className: `flex items-center gap-3 px-3 py-3 text-sm transition-colors ${selectedConfigTarget?.key ===
+                                `structure:${structureState?.translationProvidersFolder?.itemId}`
+                                ? "bg-feedback-blue-light"
+                                : "bg-white"}`, children: [providersFolderExists ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 shrink-0 text-feedback-green", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 shrink-0 text-feedback-orange", strokeWidth: 1.5 })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-neutral-grey-100", children: "Translation providers folder" }), _jsx("div", { className: "mt-0.5 truncate font-mono text-xs text-neutral-grey-50", children: structureSettings.translationProvidersPath })] }), providersFolderExists &&
+                                    structureState?.translationProvidersFolder?.itemId && (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleOpenStructureConfig(structureState.translationProvidersFolder.itemId, "Configure: Translation Providers folder"), title: "Configure", children: _jsx(SettingsIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }))] })] }) }), _jsxs(Card, { icon: _jsx(LanguagesIcon, { strokeWidth: 1, className: "h-5 w-5" }), title: _jsxs(_Fragment, { children: ["Translation providers", " ", _jsxs("span", { className: "font-normal text-neutral-grey-50", children: ["(", configuredCount, " of ", totalCount, " configured)"] })] }), description: "Translation services registered in Parhelia and their settings.", noPadding: true, className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [((totalCount === 0 && state === "success") || error) && (_jsxs("div", { className: "border-border-default space-y-2 border-t px-4 py-3", children: [totalCount === 0 && state === "success" && (_jsx("div", { className: "rounded border border-feedback-orange bg-feedback-orange-light p-2 text-xs text-feedback-orange", children: "No translation services are registered in dependency injection. Please check the server configuration." })), error && (_jsx("div", { className: "rounded border border-feedback-red bg-feedback-red-light p-2 text-xs whitespace-pre-wrap text-feedback-red", children: error }))] })), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto border-t border-border-default", "data-testid": "translation-services-providers", children: services.length > 0 && (_jsx("div", { className: "divide-y divide-border-default", children: services.map((service) => {
                                 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 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 }))] }) }) }) }));
+                                const isConfigured = service.isConfigured;
+                                return (_jsxs("div", { className: `group flex items-center gap-3 px-3 py-3 text-sm transition-colors ${isSelected
+                                        ? "bg-feedback-blue-light"
+                                        : "bg-white hover:bg-neutral-grey-5"}`, children: [isConfigured ? (_jsx(CheckCircleIcon, { className: "h-4 w-4 shrink-0 text-feedback-green", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-4 w-4 shrink-0 text-feedback-orange", strokeWidth: 1.5 })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-neutral-grey-100", children: service.displayName || service.serviceName }), service.displayName &&
+                                                            service.displayName !== service.serviceName && (_jsx("span", { className: "shrink-0 rounded bg-neutral-grey-5 badge-pad-sm text-[10px] font-medium text-neutral-grey-50", children: service.serviceName })), !isConfigured && (_jsx("span", { className: "shrink-0 rounded bg-feedback-orange-light badge-pad-sm text-[10px] font-medium text-feedback-orange", children: "Not configured" }))] }), isConfigured &&
+                                                    service.supportedLanguages &&
+                                                    service.supportedLanguages.length > 0 && (_jsxs("div", { className: "mt-0.5 truncate text-xs text-neutral-grey-50", children: ["Languages: ", service.supportedLanguages.join(", ")] }))] }), _jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: isConfigured && service.settingsItemId ? (_jsxs("div", { className: "flex items-center gap-0.5 opacity-60 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => handleOpenConfig(service), disabled: service.deleting, title: "Configure", children: _jsx(SettingsIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }) }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => deleteSettings(service), className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50", disabled: service.deleting, title: `Delete settings for ${service.displayName || service.serviceName}`, children: service.deleting ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(DeleteIcon, { size: "md" })) })] })) : (_jsxs(Button, { size: "sm", variant: "default", onClick: () => createSettings(service.serviceName, service.templateId), disabled: service.creating, title: `Create settings using template: ${service.templateName}`, children: [service.creating ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "mr-1 h-3.5 w-3.5 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.75, className: "mr-1 h-3.5 w-3.5" })), "Create"] })) })] }, service.serviceName));
+                            }) })) })] })] }));
     // Build splitter panels - only show config panel when a service is selected
     const panels = selectedConfigTarget?.itemId
         ? [

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,4CA6NpC;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"LocalizationSetupStep.d.ts","sourceRoot":"","sources":["../../src/setup/LocalizationSetupStep.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,qBAAqB,4CA6QpC;AAED,eAAe,qBAAqB,CAAC"}

package/dist/setup/LocalizationSetupStep.js

@@ -15,12 +15,12 @@ export function LocalizationSetupStep() {
     const [services, setServices] = useState([]);
     const statusIcon = useCallback((state) => {
         if (state === "success")
-            return _jsx(CheckCircleIcon, { className: "h-4 w-4 text-[#8ae048]", strokeWidth: 1 });
+            return (_jsx(CheckCircleIcon, { className: "h-4 w-4 text-[var(--color-feedback-green)]", strokeWidth: 1 }));
         if (state === "error")
-            return _jsx(AlertCircleIcon, { className: "h-4 w-4 text-destructive", strokeWidth: 1 });
+            return (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-destructive", strokeWidth: 1 }));
         if (state === "partial")
-            return _jsx(AlertCircleIcon, { className: "h-4 w-4 text-[#ffc310]", strokeWidth: 1 });
-        return (_jsx(RefreshCwIcon, { className: "h-4 w-4 animate-spin text-[#9650fb]", strokeWidth: 1 }));
+            return (_jsx(AlertCircleIcon, { className: "h-4 w-4 text-[var(--color-feedback-orange)]", strokeWidth: 1 }));
+        return (_jsx(RefreshCwIcon, { className: "h-4 w-4 animate-spin text-[var(--color-highlight-100)]", strokeWidth: 1 }));
     }, []);
     const checkLocalization = useCallback(async () => {
         try {
@@ -42,14 +42,14 @@ export function LocalizationSetupStep() {
                 else {
                     const serviceStates = availableServices.map((svc) => ({
                         ...svc,
-                        creating: false
+                        creating: false,
                     }));
                     setServices(serviceStates);
-                    const configuredCount = serviceStates.filter(s => s.isConfigured).length;
+                    const configuredCount = serviceStates.filter((s) => s.isConfigured).length;
                     const totalCount = serviceStates.length;
                     if (configuredCount === 0) {
                         setState("error");
-                        setError(`Found ${totalCount} translation service${totalCount !== 1 ? 's' : ''} in DI, but none have Sitecore Settings items configured.`);
+                        setError(`Found ${totalCount} translation service${totalCount !== 1 ? "s" : ""} in DI, but none have Sitecore Settings items configured.`);
                     }
                     else if (configuredCount < totalCount) {
                         setState("partial");
@@ -62,7 +62,8 @@ export function LocalizationSetupStep() {
             }
             else {
                 setState("error");
-                setError(result.details || "Failed to check translation services. The translation API may not be available.");
+                setError(result.details ||
+                    "Failed to check translation services. The translation API may not be available.");
             }
         }
         catch (e) {
@@ -72,7 +73,7 @@ export function LocalizationSetupStep() {
     }, []);
     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 ??
@@ -80,13 +81,20 @@ export function LocalizationSetupStep() {
             const result = await createProviderSettings(serviceName, templateId, language);
             if (result.type === "success" && result.data) {
                 if (result.data.success && result.data.data) {
-                    setServices(prev => prev.map(s => s.serviceName === serviceName
-                        ? { ...s, isConfigured: true, creating: false, settingsItemId: result.data?.data?.itemId }
+                    setServices((prev) => prev.map((s) => s.serviceName === serviceName
+                        ? {
+                            ...s,
+                            isConfigured: true,
+                            creating: false,
+                            settingsItemId: result.data?.data?.itemId,
+                        }
                         : s));
                     setTimeout(() => checkLocalization(), 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 {
@@ -95,22 +103,25 @@ export function LocalizationSetupStep() {
         }
         catch (e) {
             setError(`Failed to create settings for ${serviceName}: ${e?.message || "Unknown error"}`);
-            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, checkLocalization]);
     React.useEffect(() => {
         checkLocalization();
     }, [checkLocalization]);
-    const configuredCount = services.filter(s => s.isConfigured).length;
+    const configuredCount = services.filter((s) => s.isConfigured).length;
     const totalCount = services.length;
-    return (_jsx(Card, { icon: _jsx(LanguagesIcon, { strokeWidth: 1, className: "h-5 w-5" }), title: "Localization setup", description: "Verifies that translation services registered in DI have corresponding Sitecore Settings items.", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [statusIcon(state), _jsx("span", { className: "text-sm text-[var(--color-gray-1)]", children: state === "success"
-                                        ? `All ${totalCount} translation service${totalCount !== 1 ? 's' : ''} configured`
+    return (_jsx(Card, { icon: _jsx(LanguagesIcon, { strokeWidth: 1, className: "h-5 w-5" }), title: "Localization setup", description: "Verifies that translation services registered in DI have corresponding Sitecore Settings items.", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [statusIcon(state), _jsx("span", { className: "text-sm text-neutral-grey-100", children: state === "success"
+                                        ? `All ${totalCount} translation service${totalCount !== 1 ? "s" : ""} configured`
                                         : state === "partial"
                                             ? `${configuredCount} of ${totalCount} services configured`
                                             : state === "error" && totalCount > 0
-                                                ? `${totalCount} service${totalCount !== 1 ? 's' : ''} found, none configured`
+                                                ? `${totalCount} service${totalCount !== 1 ? "s" : ""} found, none configured`
                                                 : state === "error"
                                                     ? "No services found"
-                                                    : "Checking..." })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: checkLocalization, children: [_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4" }), "Recheck"] })] }), services.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-lg border border-[var(--color-gray-3)] bg-[var(--color-gray-5)] p-3", children: [_jsx("div", { className: "text-xs font-semibold text-[var(--color-gray-2)] uppercase tracking-wide", children: "Translation Services" }), services.map((service) => (_jsxs("div", { className: "flex items-center justify-between rounded-md bg-background p-3 shadow-sm border border-[var(--color-gray-3)]", children: [_jsxs("div", { className: "flex items-center gap-2", children: [service.isConfigured ? (_jsx(CheckCircleIcon, { className: "h-3.5 w-3.5 text-[#8ae048]", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-3.5 w-3.5 text-[#ffc310]", strokeWidth: 1.5 })), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-[var(--color-dark)]", children: service.displayName || service.serviceName }), service.displayName && service.displayName !== service.serviceName && (_jsxs("div", { className: "text-xs text-[var(--color-gray-2)]", children: ["Service: ", service.serviceName] })), service.isConfigured && service.supportedLanguages && service.supportedLanguages.length > 0 && (_jsxs("div", { className: "text-xs text-[var(--color-gray-2)]", children: ["Languages: ", service.supportedLanguages.join(", ")] }))] })] }), !service.isConfigured && (_jsxs(Button, { size: "xs", onClick: () => createSettings(service.serviceName, service.templateId), disabled: service.creating, title: `Create using template: ${service.templateName}`, children: [service.creating ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.5, className: "h-3 w-3" })), "Create Settings"] }))] }, service.serviceName)))] })), error && (_jsx("div", { className: "rounded-md border border-[#ffc310]/30 bg-[#ffc310]/10 p-3 text-xs whitespace-pre-wrap text-[var(--color-dark)]", children: error }))] }) }));
+                                                    : "Checking..." })] }), _jsxs(Button, { size: "sm", variant: "outline", onClick: checkLocalization, children: [_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-4 w-4" }), "Recheck"] })] }), services.length > 0 && (_jsxs("div", { className: "space-y-2 rounded-lg border border-border-default bg-neutral-grey-5 p-3", children: [_jsx("div", { className: "text-xs font-medium text-neutral-grey-50 tracking-wide", children: "Translation Services" }), services.map((service) => (_jsxs("div", { className: "flex items-center justify-between rounded-md bg-background p-3 shadow-sm border border-border-default", children: [_jsxs("div", { className: "flex items-center gap-2", children: [service.isConfigured ? (_jsx(CheckCircleIcon, { className: "h-3.5 w-3.5 text-[var(--color-feedback-green)]", strokeWidth: 1.5 })) : (_jsx(AlertCircleIcon, { className: "h-3.5 w-3.5 text-[var(--color-feedback-orange)]", strokeWidth: 1.5 })), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-neutral-grey-100", children: service.displayName || service.serviceName }), service.displayName &&
+                                                    service.displayName !== service.serviceName && (_jsxs("div", { className: "text-xs text-neutral-grey-50", children: ["Service: ", service.serviceName] })), service.isConfigured &&
+                                                    service.supportedLanguages &&
+                                                    service.supportedLanguages.length > 0 && (_jsxs("div", { className: "text-xs text-neutral-grey-50", children: ["Languages: ", service.supportedLanguages.join(", ")] }))] })] }), !service.isConfigured && (_jsxs(Button, { size: "xs", onClick: () => createSettings(service.serviceName, service.templateId), disabled: service.creating, title: `Create using template: ${service.templateName}`, children: [service.creating ? (_jsx(RefreshCwIcon, { strokeWidth: 1, className: "h-3 w-3 animate-spin" })) : (_jsx(PlusIcon, { strokeWidth: 1.5, className: "h-3 w-3" })), "Create Settings"] }))] }, service.serviceName)))] })), error && (_jsx("div", { className: "rounded-md border border-feedback-orange/30 bg-feedback-orange/10 p-3 text-xs whitespace-pre-wrap text-neutral-grey-100", children: error }))] }) }));
 }
 export default LocalizationSetupStep;

package/dist/sidebar/TranslationSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TranslationSidebar.d.ts","sourceRoot":"","sources":["../../src/sidebar/TranslationSidebar.tsx"],"names":[],"mappings":"AAcA,wBAAgB,kBAAkB,mDA4MjC"}
+{"version":3,"file":"TranslationSidebar.d.ts","sourceRoot":"","sources":["../../src/sidebar/TranslationSidebar.tsx"],"names":[],"mappings":"AAkBA,wBAAgB,kBAAkB,mDA8NjC"}

package/dist/sidebar/TranslationSidebar.js

@@ -3,6 +3,9 @@ import { Button, useEditContext, SimpleTable, confirmCreateVersion, Progress, }
 import { getTranslationStatus } from "../services/translationService";
 import { useEffect, useState } from "react";
 import { localizeItemCommand } from "../LocalizeItemCommand";
+function isActiveTranslationStatus(status) {
+    return status === "Pending" || status === "In Progress";
+}
 export function TranslationSidebar() {
     const editContext = useEditContext();
     if (!editContext)
@@ -25,7 +28,7 @@ export function TranslationSidebar() {
         });
     };
     const languageName = (language) => {
-        return (_jsxs("div", { className: "flex items-center gap-2 text-[var(--color-dark)]", children: [_jsx("img", { src: language.icon, className: "h-5 rounded-sm", alt: language.languageCode }), _jsx("span", { className: "font-medium", children: language.name })] }, language.languageCode));
+        return (_jsxs("div", { className: "flex items-center gap-2 text-neutral-grey-100", children: [_jsx("img", { src: language.icon, className: "h-5 rounded-sm", alt: language.languageCode }), _jsx("span", { className: "font-medium", children: language.name })] }, language.languageCode));
     };
     const loadTranslationStatus = async () => {
         if (!item)
@@ -72,7 +75,11 @@ export function TranslationSidebar() {
         const effectiveStatus = progress ? "In Progress" : status?.status;
         return {
             ...x,
-            translationStatus: status ? { ...status, status: effectiveStatus } : (progress ? { status: "In Progress" } : undefined),
+            translationStatus: status
+                ? { ...status, status: effectiveStatus }
+                : progress
+                    ? { status: "In Progress" }
+                    : undefined,
             translationProgress: progress,
         };
     });
@@ -85,7 +92,7 @@ export function TranslationSidebar() {
         // Sort by name for languages that both have versions or both don't
         return a.name.localeCompare(b.name);
     });
-    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "translation-sidebar", children: [_jsx("div", { className: "flex items-center justify-end border-b border-[var(--color-gray-3)] p-1 px-2", children: item && (_jsx(Button, { size: "xs", "data-testid": "translation-sidebar-localize-button", onClick: () => {
+    return (_jsxs("div", { className: "flex h-full flex-col", "data-testid": "translation-sidebar", children: [_jsx("div", { className: "flex items-center justify-end border-b border-border-default p-1 px-2", children: item && (_jsx(Button, { size: "xs", "data-testid": "translation-sidebar-localize-button", onClick: () => {
                         editContext.executeCommand({
                             command: localizeItemCommand,
                             data: {
@@ -94,20 +101,23 @@ export function TranslationSidebar() {
                         });
                     }, children: "Translate" })) }), _jsx("div", { className: "relative flex-1", children: _jsx("div", { className: "absolute inset-0 overflow-y-auto", children: _jsx(SimpleTable, { "data-testid": "translation-sidebar-language-table", columns: [
                             { header: "Language", body: languageName },
-                            { header: "Ver.", body: (x) => _jsx("span", { className: "text-[var(--color-gray-1)]", children: x.versions.toString() }) },
+                            {
+                                header: "Ver.",
+                                body: (x) => (_jsx("span", { className: "text-neutral-grey-100", children: x.versions.toString() })),
+                            },
                             {
                                 header: "Src",
-                                body: (x) => _jsx("span", { className: "text-[var(--color-gray-2)]", children: x.translationStatus?.sourceLanguage }),
+                                body: (x) => (_jsx("span", { className: "text-neutral-grey-50", children: x.translationStatus?.sourceLanguage })),
                             },
                             {
                                 header: "Status",
-                                body: (x) => (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `translation-status-${x.languageCode}`, children: [x.translationStatus?.status === "In Progress" && (_jsxs("div", { className: "relative w-full", children: [_jsx(Progress, { className: "h-5", value: (x.translationProgress?.progress || 0) * 100, showValue: false, indicatorClassName: "bg-[#9650fb]", "data-testid": `translation-progress-${x.languageCode}` }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-white text-xs font-medium", children: x.translationProgress?.message })] })), x.translationStatus?.status !== "In Progress" && (_jsx("span", { title: x.translationStatus?.message, className: x.translationStatus?.status === "Completed"
-                                                ? "text-green-600 font-medium"
+                                body: (x) => (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `translation-status-${x.languageCode}`, children: [isActiveTranslationStatus(x.translationStatus?.status) && (_jsxs("div", { className: "relative w-full", children: [_jsx(Progress, { className: "h-5", value: (x.translationProgress?.progress || 0) * 100, showValue: false, indicatorClassName: "bg-[var(--color-highlight-100)]", "data-testid": `translation-progress-${x.languageCode}` }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-white text-xs font-medium", children: x.translationProgress?.message })] })), !isActiveTranslationStatus(x.translationStatus?.status) && (_jsx("span", { title: x.translationStatus?.message, className: x.translationStatus?.status === "Completed"
+                                                ? "text-feedback-green font-medium"
                                                 : x.translationStatus?.status === "Error"
-                                                    ? "text-red-600 font-medium"
-                                                    : "text-[var(--color-gray-2)]", children: x.translationStatus?.status || "Not started" }))] })),
+                                                    ? "text-feedback-red font-medium"
+                                                    : "text-neutral-grey-50", children: x.translationStatus?.status || "Not started" }))] })),
                             },
                         ], items: languageData, onRowClick: (data) => selectLanguage(data.item), rowClassName: (item) => item.languageCode == editContext.currentItemDescriptor?.language
-                            ? "bg-[#f6eeff]"
+                            ? "bg-[var(--color-highlight-10)]"
                             : "" }) }) })] }));
 }

package/dist/steps/ItemSelectionStep.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ItemSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,wBAAgB,iBAAiB,CAAC,EAChC,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CAoCtB"}

package/dist/steps/ItemSelectionStep.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ItemSelectionTree } from "./ItemSelectionTree";
+import { WizardStepShell } from "./WizardStepShell";
+export function ItemSelectionStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
+    const multiItemEnabled = editContext?.configuration?.localization?.multiItem !== false;
+    const [itemSelectionValid, setItemSelectionValid] = useState(!multiItemEnabled ||
+        (data.selectionTreeItems?.length ?? data.items.length) > 0);
+    const onStepCompletedRef = useRef(onStepCompleted);
+    useEffect(() => {
+        onStepCompletedRef.current = onStepCompleted;
+    }, [onStepCompleted]);
+    const lastCompletionRef = useRef(null);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const completed = !multiItemEnabled || itemSelectionValid;
+        if (lastCompletionRef.current !== completed) {
+            lastCompletionRef.current = completed;
+            onStepCompletedRef.current(completed);
+        }
+    }, [isActive, itemSelectionValid, multiItemEnabled]);
+    return (_jsx(WizardStepShell, { fillHeight: true, testId: "item-selection-step", children: _jsx(ItemSelectionTree, { data: data, setData: setData, editContext: editContext, isActive: isActive, onSelectionValidChange: setItemSelectionValid, height: "100%" }) }));
+}

package/dist/steps/ItemSelectionTree.d.ts

@@ -0,0 +1,13 @@
+import { type EditContextType } from "@parhelia/core";
+import type { TranslationWizardData } from "./types";
+type ItemSelectionTreeProps = {
+    data: TranslationWizardData;
+    setData: (data: TranslationWizardData) => void;
+    editContext: EditContextType;
+    isActive?: boolean;
+    onSelectionValidChange?: (valid: boolean) => void;
+    height?: number | string;
+};
+export declare function ItemSelectionTree({ data, setData, editContext, isActive, onSelectionValidChange, height, }: ItemSelectionTreeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ItemSelectionTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemSelectionTree.d.ts","sourceRoot":"","sources":["../../src/steps/ItemSelectionTree.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,eAAe,EAMrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAkEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAe,EACf,sBAAsB,EACtB,MAAY,GACb,EAAE,sBAAsB,2CA4VxB"}