@parhelia/localization 0.1.12903 → 0.1.12904

package/dist/settings/TranslationServicesPanel.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState, useEffect, } from "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 { 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 LanguagesIcon = LucideLanguages;
-const ListChecksIcon = LucideListChecks;
+const Trash2Icon = LucideTrash2;
 const DEFAULT_STRUCTURE_SETTINGS = {
     translationFolderPath: "/sitecore/system/Parhelia/Settings/Translation",
     translationFolderTemplateId: "b1e40cfe-6e36-4a0e-a49e-19c10b2127b7",
@@ -237,30 +236,46 @@ 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 = (_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 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 isSelected = selectedConfigTarget?.key ===
                                     `service:${service.serviceName}`;
-                                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));
-                            }) })) })] })] }));
+                                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 }))] }) }) }) }));
     // 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,4CA6QpC;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

@@ -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-[var(--color-feedback-green)]", strokeWidth: 1 }));
+            return _jsx(CheckCircleIcon, { className: "h-4 w-4 text-[#8ae048]", 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-[var(--color-feedback-orange)]", strokeWidth: 1 }));
-        return (_jsx(RefreshCwIcon, { className: "h-4 w-4 animate-spin text-[var(--color-highlight-100)]", strokeWidth: 1 }));
+            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 }));
     }, []);
     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,8 +62,7 @@ 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) {
@@ -73,7 +72,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 ??
@@ -81,20 +80,13 @@ 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 {
@@ -103,25 +95,22 @@ 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-neutral-grey-100", 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-[var(--color-gray-1)]", 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-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 }))] }) }));
+                                                    : "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 }))] }) }));
 }
 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":"AAkBA,wBAAgB,kBAAkB,mDA8NjC"}
+{"version":3,"file":"TranslationSidebar.d.ts","sourceRoot":"","sources":["../../src/sidebar/TranslationSidebar.tsx"],"names":[],"mappings":"AAcA,wBAAgB,kBAAkB,mDA4MjC"}

package/dist/sidebar/TranslationSidebar.js

@@ -3,9 +3,6 @@ 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)
@@ -28,7 +25,7 @@ export function TranslationSidebar() {
         });
     };
     const languageName = (language) => {
-        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));
+        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));
     };
     const loadTranslationStatus = async () => {
         if (!item)
@@ -75,11 +72,7 @@ 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,
         };
     });
@@ -92,7 +85,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-border-default 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-[var(--color-gray-3)] p-1 px-2", children: item && (_jsx(Button, { size: "xs", "data-testid": "translation-sidebar-localize-button", onClick: () => {
                         editContext.executeCommand({
                             command: localizeItemCommand,
                             data: {
@@ -101,23 +94,20 @@ 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-neutral-grey-100", children: x.versions.toString() })),
-                            },
+                            { header: "Ver.", body: (x) => _jsx("span", { className: "text-[var(--color-gray-1)]", children: x.versions.toString() }) },
                             {
                                 header: "Src",
-                                body: (x) => (_jsx("span", { className: "text-neutral-grey-50", children: x.translationStatus?.sourceLanguage })),
+                                body: (x) => _jsx("span", { className: "text-[var(--color-gray-2)]", children: x.translationStatus?.sourceLanguage }),
                             },
                             {
                                 header: "Status",
-                                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"
+                                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"
                                                 : x.translationStatus?.status === "Error"
-                                                    ? "text-feedback-red font-medium"
-                                                    : "text-neutral-grey-50", children: x.translationStatus?.status || "Not started" }))] })),
+                                                    ? "text-red-600 font-medium"
+                                                    : "text-[var(--color-gray-2)]", children: x.translationStatus?.status || "Not started" }))] })),
                             },
                         ], items: languageData, onRowClick: (data) => selectLanguage(data.item), rowClassName: (item) => item.languageCode == editContext.currentItemDescriptor?.language
-                            ? "bg-[var(--color-highlight-10)]"
+                            ? "bg-[#f6eeff]"
                             : "" }) }) })] }));
 }

package/dist/steps/MetadataInputStep.d.ts

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

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

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

package/dist/steps/MetadataInputStep.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+/** Example Step for metadata input testing */
+export function MetadataInputStep({ stepIndex, isActive = true, data, setData, onStepCompleted, }) {
+    // Convert Map<string, Map<string, string>> to a flat object for local state management
+    const [itemMetadata, setItemMetadata] = useState(() => {
+        const result = {};
+        data.itemMetadata.forEach((languageMap, itemId) => {
+            result[itemId] = Object.fromEntries(languageMap);
+        });
+        return result;
+    });
+    const allItems = data.includeSubitems ? data.discoveredItems : data.items;
+    const handleMetadataChange = (itemId, language, metadata) => {
+        const updated = {
+            ...itemMetadata,
+            [itemId]: {
+                ...(itemMetadata[itemId] || {}),
+                [language]: metadata
+            }
+        };
+        setItemMetadata(updated);
+        // Convert back to Map structure for wizard data
+        const metadataMap = new Map();
+        Object.entries(updated).forEach(([itemId, languageMap]) => {
+            metadataMap.set(itemId, new Map(Object.entries(languageMap)));
+        });
+        setData({ ...data, itemMetadata: metadataMap });
+        console.log('Updated itemMetadata:', metadataMap);
+    };
+    // Data is saved automatically on change
+    useEffect(() => {
+        // Only update completion when this step is active
+        if (!isActive)
+            return;
+        // Mark step as completed since metadata is optional
+        onStepCompleted(true);
+    }, [isActive, onStepCompleted]); // Check when active state changes
+    // No footer actions needed since data is saved automatically
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-6", "data-testid": "metadata-input-step", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-xl font-semibold text-[var(--color-dark)] mb-2", children: "Enter Metadata Per Item Per Language" }), _jsx("p", { className: "text-sm text-[var(--color-gray-2)]", children: "Provide custom metadata for each item and language combination (optional)." })] }), _jsx("div", { className: "max-h-64 overflow-y-auto space-y-4", "data-testid": "metadata-input-container", children: allItems.map((item) => (_jsxs("div", { className: "border border-[var(--color-gray-3)] rounded-lg p-4 bg-background shadow-sm", "data-testid": `metadata-item-${item.id}`, children: [_jsx("label", { className: "block text-sm font-medium text-[var(--color-dark)] mb-3", "data-testid": `metadata-item-label-${item.id}`, children: item.name || item.id }), data.targetLanguages?.map((language) => (_jsxs("div", { className: "mb-3", "data-testid": `metadata-field-${item.id}-${language}`, children: [_jsxs("label", { className: "block text-xs font-medium mb-1.5 text-[var(--color-gray-2)]", "data-testid": `metadata-language-label-${item.id}-${language}`, children: [language.toUpperCase(), ":"] }), _jsx("textarea", { className: "w-full border border-[var(--color-gray-3)] rounded-md p-2.5 text-sm bg-[var(--color-gray-5)] text-[var(--color-dark)] focus:outline-none focus:ring-2 focus:ring-[#9650fb] focus:border-[#9650fb] transition-colors", rows: 2, value: itemMetadata[item.id]?.[language] || "", onChange: (e) => handleMetadataChange(item.id, language, e.target.value), placeholder: `Enter metadata for ${language}...`, "data-testid": `metadata-textarea-${item.id}-${language}` })] }, `${item.id}-${language}`)))] }, item.id))) })] }));
+}

package/dist/steps/PromptCustomizationStep.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"PromptCustomizationStep.d.ts","sourceRoot":"","sources":["../../src/steps/PromptCustomizationStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAItE,wBAAgB,uBAAuB,CAAC,EACtC,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CAsctB"}
+{"version":3,"file":"PromptCustomizationStep.d.ts","sourceRoot":"","sources":["../../src/steps/PromptCustomizationStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAEtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CAqRtB"}