@parhelia/localization 0.1.12910 → 0.1.12912

package/dist/LocalizeItemDialog.d.ts.map

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

package/dist/LocalizeItemDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogContent, StyledDialogTitle, Button, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@parhelia/core";
+import { Dialog, DialogContent, StyledDialogTitle, Button, cn, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@parhelia/core";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { AlertTriangle as LucideAlertTriangle, ArrowRight as LucideArrowRight, Globe as LucideGlobe, } from "lucide-react";
 import { useTranslationWizard } from "./hooks/useTranslationWizard";
@@ -12,9 +12,17 @@ const LARGE_BATCH_WARNING_THRESHOLD = 100;
 const getNextButtonLabel = (step) => step?.nextButtonLabel || step?.name || "Next";
 // Note: DialogButtons is an internal component that might need to be added to core exports
 // For now, we'll implement it inline
-const DialogButtons = ({ children, ...props }) => (_jsx("div", { className: "mt-auto flex shrink-0 items-center gap-3 border-t border-border-default bg-white px-6 py-4", ...props, children: children }));
+const DialogButtons = ({ children, ...props }) => (_jsx("div", { className: "mt-auto flex shrink-0 items-center gap-3 border-t border-border-default bg-white px-4 py-4 md:px-6", ...props, children: children }));
+const StepIndicatorDots = ({ steps, currentStepIndex, }) => {
+    if (steps.length <= 1)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none absolute top-full left-1/2 mt-8 flex -translate-x-1/2 justify-center gap-3", "aria-hidden": "true", "data-testid": "translation-wizard-step-dots", children: steps.map((step, index) => (_jsx("div", { className: cn("h-1.5 rounded-full transition-all duration-300", index === currentStepIndex
+                ? "w-8 bg-white"
+                : "w-1.5 bg-neutral-grey-10") }, step.id ?? step.name ?? index))) }));
+};
 export function LocalizeItemDialog(props) {
     const editContext = props.editContext;
+    const isMobile = editContext?.isMobile ?? false;
     const configuration = editContext.configuration.translationWizard;
     const [currentStepIndex, setCurrentStepIndex] = useState(0);
     const [stepCompleted, setStepCompleted] = useState(-1);
@@ -53,7 +61,7 @@ export function LocalizeItemDialog(props) {
     }, [props.onClose]);
     // Memoize activeSteps to prevent unnecessary recalculations and new object references
     // This prevents infinite loops when wizardData changes but skip conditions don't
-    // The skip condition for prompt-customization step checks serviceCustomData and translationProvider
+    // The skip condition for the provider step checks serviceCustomData and translationProvider
     const activeSteps = useMemo(() => {
         const steps = configuration.steps.filter((step) => !step.skipCondition || !step.skipCondition(wizardData));
         return steps;
@@ -233,7 +241,7 @@ export function LocalizeItemDialog(props) {
             itemsCount: newData.items?.length || 0,
             serviceCustomData: serviceCustomDataKey,
             metadata: metadataKey,
-            // batchName must be part of the key — otherwise the PromptCustomizationStep's
+            // batchName must be part of the key — otherwise the ProviderStep's
             // setData({...prev, batchName}) call sees an "unchanged" key here and the
             // update is silently dropped, so the user-entered name never reaches submit.
             batchName: newData.batchName ?? "",
@@ -279,9 +287,9 @@ export function LocalizeItemDialog(props) {
             if (!open) {
                 props.onClose?.(null);
             }
-        }, children: [_jsxs(DialogContent, { className: "flex h-[85vh] max-h-[900px] min-h-0 w-[90vw] max-w-5xl flex-col overflow-hidden md:min-h-[700px]", "data-testid": "translation-wizard-dialog", onPointerDownOutside: (e) => e.preventDefault(), onEscapeKeyDown: (e) => e.preventDefault(), "aria-describedby": "translation-wizard-description", style: {
-                    width: "min(90vw, 1280px)",
-                    height: "min(85vh, 900px)",
+        }, children: [_jsxs(DialogContent, { className: "flex max-h-[900px] min-h-0 max-w-5xl flex-col overflow-visible md:min-h-[700px]", "data-testid": "translation-wizard-dialog", onPointerDownOutside: (e) => e.preventDefault(), onEscapeKeyDown: (e) => e.preventDefault(), "aria-describedby": "translation-wizard-description", style: {
+                    width: isMobile ? "calc(100vw - 24px)" : "min(90vw, 1280px)",
+                    height: isMobile ? "min(92dvh, 900px)" : "min(85vh, 900px)",
                 }, children: [_jsx(StyledDialogTitle, { icon: _jsx(GlobeIcon, { strokeWidth: 1.5 }), title: `Translate · ${currentStep?.name ?? ""}`, subtitle: currentStep?.description ||
                             "Configure and start translation for your content" }), _jsx("div", { id: "translation-wizard-description", className: "sr-only", children: currentStep?.description ||
                             "Configure and start translation for your content." }), _jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [_jsx("div", { className: "flex-1 overflow-y-auto min-h-0 ", "data-testid": "translation-wizard-step-content", children: _jsx("div", { className: "h-full relative", children: activeSteps.map((step, index) => {
@@ -290,12 +298,12 @@ export function LocalizeItemDialog(props) {
                                         if (!StepComponent)
                                             return null;
                                         return (_jsx("div", { className: "h-full", style: { display: isActive ? "block" : "none" }, "aria-hidden": !isActive, "data-testid": `step-content-${step.id}`, children: _jsx(StepComponent, { stepIndex: index, isActive: isActive, data: wizardData, setData: setWizardDataStable, editContext: editContext, onStepCompleted: (completed) => handleStepCompleted(completed, index), setBeforeNextCallback: isActive ? setBeforeNextCallbackStable : undefined, setFooterActions: isActive ? provideFooterActions : undefined, requestClose: isActive ? requestCloseCb : undefined }) }, step.id));
-                                    }) }) }), _jsxs(DialogButtons, { "data-testid": "translation-wizard-dialog-buttons", children: [_jsx(Button, { onClick: () => props.onClose?.(null), variant: "outline", size: "lg", className: "w-auto min-w-24 flex-none", "data-testid": "translation-wizard-cancel-button", children: "Cancel" }), _jsxs("div", { className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-3", children: [currentStepIndex > 0 && (_jsx(Button, { onClick: handlePrevious, variant: "outline", size: "lg", className: "w-auto min-w-32 flex-none", "data-testid": "translation-wizard-previous-button", children: "Previous" })), footerActions.map((a) => (_jsx(Button, { onClick: a.onClick, disabled: !!a.disabled, variant: "default", size: "lg", className: "w-auto min-w-32 flex-none", "data-testid": `translation-wizard-footer-action-${a.key}`, children: a.label }, a.key))), _jsx(Button, { onClick: handleNext, disabled: !canProceed || isSubmitting, variant: "default", size: "lg", className: "w-auto min-w-40 flex-none gap-2", "data-testid": "translation-wizard-next-button", children: isSubmitting ? ("Starting...") : isLastStep ? ((() => {
+                                    }) }) }), _jsxs(DialogButtons, { "data-testid": "translation-wizard-dialog-buttons", children: [_jsx(Button, { onClick: () => props.onClose?.(null), variant: "ghost", size: "lg", className: "w-auto min-w-24 flex-none", "data-testid": "translation-wizard-cancel-button", children: "Cancel" }), _jsxs("div", { className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-3", children: [currentStepIndex > 0 && (_jsx(Button, { onClick: handlePrevious, variant: "outline", size: "lg", className: "w-auto min-w-32 flex-none", "data-testid": "translation-wizard-previous-button", children: "Previous" })), footerActions.map((a) => (_jsx(Button, { onClick: a.onClick, disabled: !!a.disabled, variant: "default", size: "lg", className: "w-auto min-w-32 flex-none", "data-testid": `translation-wizard-footer-action-${a.key}`, children: a.label }, a.key))), _jsx(Button, { onClick: handleNext, disabled: !canProceed || isSubmitting, variant: "default", size: "lg", className: "w-auto min-w-40 flex-none gap-2", "data-testid": "translation-wizard-next-button", children: isSubmitting ? ("Starting...") : isLastStep ? ((() => {
                                                     const { totalTranslations, isStreaming } = calculateTranslationCounts(wizardData);
                                                     if (totalTranslations <= 0)
                                                         return "Start Translation";
                                                     return `Start Translation (${totalTranslations}${isStreaming ? "+" : ""})`;
-                                                })()) : (_jsxs(_Fragment, { children: [getNextButtonLabel(activeSteps[currentStepIndex + 1]), _jsx(ArrowRightIcon, { className: "h-4 w-4", strokeWidth: 2 })] })) })] })] })] })] }), _jsx(AlertDialog, { open: showLargeBatchWarning, onOpenChange: setShowLargeBatchWarning, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangleIcon, { className: "h-5 w-5 text-feedback-orange" }), "Large Translation Batch"] }), _jsx(AlertDialogDescription, { children: (() => {
+                                                })()) : (_jsxs(_Fragment, { children: [getNextButtonLabel(activeSteps[currentStepIndex + 1]), _jsx(ArrowRightIcon, { className: "h-4 w-4", strokeWidth: 2 })] })) })] })] })] }), _jsx(StepIndicatorDots, { steps: activeSteps, currentStepIndex: currentStepIndex })] }), _jsx(AlertDialog, { open: showLargeBatchWarning, onOpenChange: setShowLargeBatchWarning, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsxs(AlertDialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangleIcon, { className: "h-5 w-5 text-feedback-orange" }), "Large Translation Batch"] }), _jsx(AlertDialogDescription, { children: (() => {
                                         const { itemCount, languageCount, totalTranslations } = calculateTranslationCounts(wizardData);
                                         return (_jsxs(_Fragment, { children: ["You are about to start", " ", _jsxs("strong", { children: [totalTranslations, " translations"] }), " (", itemCount, " items \u00D7 ", languageCount, " languages). Large batches may take a significant amount of time to process.", _jsx("br", {}), _jsx("br", {}), "Are you sure you want to continue?"] }));
                                     })() })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isSubmitting, children: "Cancel" }), _jsx(AlertDialogAction, { onClick: handleLargeBatchConfirm, disabled: isSubmitting, children: isSubmitting ? "Starting..." : "Continue" })] })] }) })] }));

package/dist/LocalizeItemUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeItemUtils.d.ts","sourceRoot":"","sources":["../src/LocalizeItemUtils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAsDjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,eAAe,GAC3B,OAAO,CAAC,iBAAiB,CAAC,CA0I5B;AAGD,eAAO,MAAM,mBAAmB,GAC9B,eAAe,MAAM,EAAE,EACvB,mBAAmB,iBAAiB,EAAE,EACtC,WAAW,MAAM,EACjB,MAAM,QAAQ,EACd,qBAAqB,MAAM,+BAkC5B,CAAC"}
+{"version":3,"file":"LocalizeItemUtils.d.ts","sourceRoot":"","sources":["../src/LocalizeItemUtils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAsDjD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAIF,wBAAsB,yBAAyB,CAC7C,UAAU,EAAE,qBAAqB,EACjC,WAAW,EAAE,eAAe,GAC3B,OAAO,CAAC,iBAAiB,CAAC,CAwH5B;AAGD,eAAO,MAAM,mBAAmB,GAC9B,eAAe,MAAM,EAAE,EACvB,mBAAmB,iBAAiB,EAAE,EACtC,WAAW,MAAM,EACjB,MAAM,QAAQ,EACd,qBAAqB,MAAM,+BAkC5B,CAAC"}

package/dist/LocalizeItemUtils.js

@@ -86,29 +86,15 @@ export async function performDefaultTranslation(wizardData, editContext) {
     if (wizardData.serviceCustomData && wizardData.serviceCustomData.size > 0) {
         const serviceData = wizardData.serviceCustomData.get(wizardData.translationProvider);
         if (serviceData && serviceData.enableCustomPrompt) {
-            const provider = wizardData.translationProviders.find((p) => p.name === wizardData.translationProvider);
-            const defaultPrompt = provider?.defaultPrompt && provider.defaultPrompt.trim()
-                ? provider.defaultPrompt
-                : null;
-            const customizationType = serviceData.promptCustomizationType === "replace"
-                ? "replace"
-                : "extend";
-            const rawCustomPrompt = (serviceData.customPrompt || "").trim();
-            let finalCustomPrompt = "";
-            if (rawCustomPrompt) {
-                if (defaultPrompt && customizationType === "extend") {
-                    finalCustomPrompt = `${defaultPrompt}\n\n${rawCustomPrompt}`;
-                }
-                else {
-                    finalCustomPrompt = rawCustomPrompt;
-                }
+            const customPrompt = (serviceData.customPrompt || "").trim();
+            if (customPrompt) {
+                metadataObj.serviceCustomData = {
+                    [wizardData.translationProvider]: {
+                        enableCustomPrompt: serviceData.enableCustomPrompt,
+                        customPrompt,
+                    },
+                };
             }
-            metadataObj.serviceCustomData = {
-                [wizardData.translationProvider]: {
-                    enableCustomPrompt: serviceData.enableCustomPrompt,
-                    customPrompt: finalCustomPrompt,
-                },
-            };
         }
     }
     // Serialize metadata to JSON string (or undefined if empty)

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAepF,OAAO,EACL,mBAAmB,EAGpB,MAAM,gBAAgB,CAAC;AAUxB,QAAA,MAAM,wCAAwC;;;;;;;;;;;;;;CAuB7C,CAAC;AAEF,QAAA,MAAM,4CAA4C;;;;;;;;CAiBjD,CAAC;AAkCF,OAAO,EACL,wCAAwC,EACxC,4CAA4C,GAC7C,CAAC;AACF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC/E,YAAY,EACV,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEhF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,mBAAmB,EAClC,OAAO,CAAC,EAAE,yBAAyB,uBAyHpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAoBpF,OAAO,EACL,mBAAmB,EAGpB,MAAM,gBAAgB,CAAC;AAWxB,QAAA,MAAM,wCAAwC;;;;;;;;;;;;;;CAuB7C,CAAC;AAEF,QAAA,MAAM,4CAA4C;;;;;;;;CAiBjD,CAAC;AAoDF,OAAO,EACL,wCAAwC,EACxC,4CAA4C,GAC7C,CAAC;AACF,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAC/E,YAAY,EACV,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,yBAAyB,EACzB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEhF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CACnC,aAAa,EAAE,mBAAmB,EAClC,OAAO,CAAC,EAAE,yBAAyB,uBAmIpC"}

package/dist/index.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ItemSelectionStep } from "./steps/ItemSelectionStep";
 import { ServiceLanguageSelectionStep } from "./steps/ServiceLanguageSelectionStep";
-import { PromptCustomizationStep } from "./steps/PromptCustomizationStep";
+import { ProviderStep } from "./steps/ProviderStep";
 import { localizeItemCommand } from "./LocalizeItemCommand";
 import { TranslationSidebar } from "./sidebar/TranslationSidebar";
 import { TranslationManagement } from "./translation-center/TranslationManagement";
 import { TranslationsTitlebar } from "./translation-center/TranslationsTitlebar";
-import { TranslationBatches } from "./translation-center/TranslationBatches";
+import { TranslationBatches, TranslationBatchFiltersSidebar, TRANSLATION_BATCH_FILTERS_SIDEBAR_ID, } from "./translation-center/TranslationBatches";
 import { TranslationServicesPanel } from "./settings/TranslationServicesPanel";
-import { Languages as LucideLanguages, LayoutGrid as LucideLayoutGrid, Globe as LucideGlobe, } from "lucide-react";
+import { Languages as LucideLanguages, LayoutGrid as LucideLayoutGrid, Globe as LucideGlobe, ListChecks as LucideListChecks, } from "lucide-react";
 const LanguagesIcon = LucideLanguages;
 const LayoutGridIcon = LucideLayoutGrid;
 const GlobeIcon = LucideGlobe;
+const ListChecksIcon = LucideListChecks;
 const DEFAULT_TRANSLATION_WIZARD_CONFIGURATION = {
     steps: [
         {
@@ -32,7 +33,7 @@ const DEFAULT_TRANSLATION_WIZARD_CONFIGURATION = {
             name: "Provider",
             nextButtonLabel: "Select Provider",
             description: "Choose the translation provider and provider settings.",
-            component: PromptCustomizationStep,
+            component: ProviderStep,
         },
     ],
 };
@@ -50,7 +51,7 @@ const SINGLE_ITEM_TRANSLATION_WIZARD_CONFIGURATION = {
             name: "Provider",
             nextButtonLabel: "Select Provider",
             description: "Choose the translation provider and provider settings.",
-            component: PromptCustomizationStep,
+            component: ProviderStep,
         },
     ],
 };
@@ -72,6 +73,22 @@ const translateSidebar = {
         },
     ],
 };
+const translationBatchFiltersSidebar = {
+    id: TRANSLATION_BATCH_FILTERS_SIDEBAR_ID,
+    title: "Translation Batches",
+    icon: _jsx(ListChecksIcon, { strokeWidth: 1 }),
+    position: "left",
+    sortOrder: 10,
+    defaultWidth: 320,
+    panels: [
+        {
+            name: "translation-batch-filters",
+            title: "Translation Batches",
+            content: _jsx(TranslationBatchFiltersSidebar, {}),
+            initialSize: 100,
+        },
+    ],
+};
 /**
  * Translation Management workspace definition
  */
@@ -81,7 +98,8 @@ const translationManagementWorkspace = {
     icon: _jsx(GlobeIcon, { strokeWidth: 1 }),
     component: _jsx(TranslationManagement, {}),
     titlebar: _jsx(TranslationsTitlebar, {}),
-    supportsSidebars: false,
+    supportsSidebars: true,
+    defaultSidebars: [TRANSLATION_BATCH_FILTERS_SIDEBAR_ID],
     sortOrder: 30,
 };
 export { DEFAULT_TRANSLATION_WIZARD_CONFIGURATION, SINGLE_ITEM_TRANSLATION_WIZARD_CONFIGURATION, };
@@ -133,13 +151,21 @@ export function configureLocalization(configuration, options) {
     if (!hasLocalizeCommand) {
         configuration.commands.allItemCommands.push(localizeItemCommand);
     }
-    // Register translate sidebar in the Editor workspace
+    // Register localization sidebars
     const sidebars = configuration.editor?.sidebars || [];
     const hasTranslateSidebar = sidebars.some((s) => s.id === "translate");
-    if (!hasTranslateSidebar) {
+    const hasTranslationBatchFiltersSidebar = sidebars.some((s) => s.id === TRANSLATION_BATCH_FILTERS_SIDEBAR_ID);
+    if (!hasTranslateSidebar || !hasTranslationBatchFiltersSidebar) {
+        const nextSidebars = [...sidebars];
+        if (!hasTranslateSidebar) {
+            nextSidebars.push(translateSidebar);
+        }
+        if (!hasTranslationBatchFiltersSidebar) {
+            nextSidebars.push(translationBatchFiltersSidebar);
+        }
         configuration.editor = {
             ...configuration.editor,
-            sidebars: [...sidebars, translateSidebar],
+            sidebars: nextSidebars,
         };
     }
     // Add Translation Management workspace if enabled

package/dist/steps/ItemSelectionStep.js

@@ -20,5 +20,5 @@ export function ItemSelectionStep({ isActive = true, data, setData, onStepComple
             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%" }) }));
+    return (_jsx(WizardStepShell, { fillHeight: true, noPadding: 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.map

@@ -1 +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"}
+{"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;AAsEF,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAe,EACf,sBAAsB,EACtB,MAAY,GACb,EAAE,sBAAsB,2CAiWxB"}

package/dist/steps/ItemSelectionTree.js

@@ -49,6 +49,8 @@ function fullItemToWithSubtree(item, includeSubitems) {
             name: item.descriptor?.name ?? item.name,
             displayName: item.descriptor?.displayName ?? item.displayName,
             path: item.descriptor?.path ?? item.path,
+            icon: item.descriptor?.icon ??
+                item.icon,
         },
         includeSubitems,
     };
@@ -263,6 +265,7 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
         for (const node of source) {
             if (!node.id || existing.has(node.id))
                 continue;
+            const nodeWithIcon = node;
             cacheTreeNode(node);
             next.push({
                 descriptor: {
@@ -272,6 +275,7 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
                     name: node.name,
                     displayName: node.displayName,
                     path: node.path,
+                    icon: nodeWithIcon.icon,
                 },
                 includeSubitems: false,
             });
@@ -297,6 +301,7 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
                     name: item.name,
                     displayName: item.displayName,
                     path: item.path,
+                    icon: item.icon,
                 },
                 includeSubitems: false,
             },
@@ -323,5 +328,5 @@ export function ItemSelectionTree({ data, setData, editContext, isActive = true,
         setItems(next);
         commitToWizard(next);
     }, [items, commitToWizard]);
-    return (_jsx(ItemCollectionEditor, { items: items, selectedInTree: selectedInTree, onSelectedInTreeChange: setSelectedInTree, selectedFromList: selectedFromList, onSelectedFromListChange: setSelectedFromList, onAddToList: handleAddToList, onRemoveFromList: handleRemoveFromList, onAddItem: handleAddItem, onRemoveItem: handleRemoveItem, onToggleSubitems: handleToggleSubitems, language: language, rootItemIds: [SITECORE_ROOT], selectedItemsLabel: "Items to Translate", emptyMessage: "No items selected", emptyHint: "Browse or search to add items", height: height, subitemCounts: subitemCounts, expandIdPath: expandIdPath, localStorageKey: "translation-wizard.itemCollectionSplitter" }));
+    return (_jsx(ItemCollectionEditor, { items: items, selectedInTree: selectedInTree, onSelectedInTreeChange: setSelectedInTree, selectedFromList: selectedFromList, onSelectedFromListChange: setSelectedFromList, onAddToList: handleAddToList, onRemoveFromList: handleRemoveFromList, onAddItem: handleAddItem, onRemoveItem: handleRemoveItem, onToggleSubitems: handleToggleSubitems, language: language, rootItemIds: [SITECORE_ROOT], selectedItemsLabel: "Items to Translate", emptyMessage: "No items selected", emptyHint: "Browse or search to add items", height: height, subitemCounts: subitemCounts, expandIdPath: expandIdPath, localStorageKey: "translation-wizard.itemCollectionSplitter", treeSearchContainerClassName: "border-b-0 p-0 pb-3", frameless: true }));
 }

package/dist/steps/ProviderStep.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderStep.d.ts","sourceRoot":"","sources":["../../src/steps/ProviderStep.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAQtE,wBAAgB,YAAY,CAAC,EAC3B,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CAqXtB"}

package/dist/steps/ProviderStep.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Input, Label, Select, Spinner, Textarea, } from "@parhelia/core";
+import { RotateCcw } from "lucide-react";
+import { WizardStepShell } from "./WizardStepShell";
+import { suggestBatchName } from "../api/discovery";
+const PROMPT_CUSTOMIZATION_TYPE = "replace";
+const ResetIcon = (props) => React.createElement(RotateCcw, props);
+export function ProviderStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
+    const [customPrompt, setCustomPrompt] = useState("");
+    // Local mirror of the wizard's batch name so typing is responsive.
+    const [batchName, setBatchName] = useState(data.batchName ?? "");
+    const [isSuggesting, setIsSuggesting] = useState(false);
+    // Whether the user has manually edited the name. If so, we never overwrite
+    // it with a fresh AI suggestion.
+    const userTouchedNameRef = useRef(!!data.batchName);
+    const dataRef = useRef(data);
+    useEffect(() => {
+        dataRef.current = data;
+    }, [data]);
+    // Push name changes back into wizard data (debounced via simple equality).
+    useEffect(() => {
+        if ((dataRef.current.batchName ?? "") === batchName)
+            return;
+        setData({ ...dataRef.current, batchName });
+    }, [batchName, setData]);
+    // Auto-suggest a name when the step becomes active and the user hasn't
+    // already provided/edited one. Fires once per item+language combination so
+    // navigating away and back doesn't re-fetch.
+    const lastSuggestionKeyRef = useRef("");
+    const sessionId = editContext?.sessionId;
+    useEffect(() => {
+        if (!isActive)
+            return;
+        if (userTouchedNameRef.current)
+            return;
+        const itemIds = (data.selectionTreeItems && data.selectionTreeItems.length > 0
+            ? data.selectionTreeItems.map((s) => s.descriptor.id)
+            : data.items.map((i) => i.descriptor.id)).filter(Boolean);
+        const langs = [...data.targetLanguages].sort();
+        if (itemIds.length === 0 || langs.length === 0)
+            return;
+        const key = JSON.stringify({ itemIds: [...itemIds].sort(), langs });
+        if (lastSuggestionKeyRef.current === key)
+            return;
+        lastSuggestionKeyRef.current = key;
+        let cancelled = false;
+        setIsSuggesting(true);
+        void (async () => {
+            try {
+                const includeSubitems = !!data.selectionTreeItems?.some((s) => s.includeSubitems);
+                const name = await suggestBatchName({ itemIds, targetLanguages: langs, includeSubitems }, sessionId);
+                if (cancelled || userTouchedNameRef.current)
+                    return;
+                if (name)
+                    setBatchName(name);
+            }
+            finally {
+                if (!cancelled)
+                    setIsSuggesting(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        isActive,
+        sessionId,
+        data.selectionTreeItems,
+        data.items,
+        data.targetLanguages,
+    ]);
+    const customPromptRef = useRef(customPrompt);
+    const hasInitializedRef = useRef(false);
+    const lastProviderRef = useRef(data.translationProvider);
+    const updateTimerRef = useRef(null);
+    useEffect(() => {
+        customPromptRef.current = customPrompt;
+    }, [customPrompt]);
+    const selectedProvider = useMemo(() => data.translationProviders.find((p) => p.name === data.translationProvider), [data.translationProviders, data.translationProvider]);
+    const serviceData = useMemo(() => {
+        if (!data.serviceCustomData || !data.translationProvider)
+            return null;
+        return data.serviceCustomData.get(data.translationProvider);
+    }, [data.serviceCustomData, data.translationProvider]);
+    const enableCustomPrompt = serviceData?.enableCustomPrompt === true;
+    const supportsPromptCustomization = data.translationProvider === "AI";
+    const isCreateLanguageVersionsOnlyProvider = data.translationProvider === "Create Language Versions Only" ||
+        selectedProvider?.displayName === "Create Language Versions Only";
+    const defaultPrompt = useMemo(() => {
+        const prompt = selectedProvider?.defaultPrompt;
+        return prompt && prompt.trim() ? prompt : null;
+    }, [selectedProvider?.defaultPrompt]);
+    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.length > 0;
+    useEffect(() => {
+        if (lastProviderRef.current !== data.translationProvider) {
+            hasInitializedRef.current = false;
+            lastProviderRef.current = data.translationProvider;
+        }
+        if (hasInitializedRef.current)
+            return;
+        if (supportsPromptCustomization && !selectedProvider)
+            return;
+        let nextCustomPrompt = serviceData?.customPrompt || "";
+        if (hasDefaultPrompt &&
+            nextCustomPrompt.trim() &&
+            (serviceData?.promptCustomizationType || "extend") === "extend" &&
+            !nextCustomPrompt.startsWith(defaultPrompt || "")) {
+            nextCustomPrompt = `${defaultPrompt}\n\n${nextCustomPrompt}`;
+        }
+        if (enableCustomPrompt && serviceData) {
+            setCustomPrompt(nextCustomPrompt || defaultPrompt || "");
+        }
+        else {
+            setCustomPrompt(defaultPrompt || "");
+        }
+        hasInitializedRef.current = true;
+    }, [
+        data.translationProvider,
+        defaultPrompt,
+        enableCustomPrompt,
+        hasDefaultPrompt,
+        selectedProvider,
+        serviceData,
+        supportsPromptCustomization,
+    ]);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        onStepCompleted(!!data.translationProvider);
+    }, [data.translationProvider, isActive, onStepCompleted]);
+    const handleProviderChange = (e) => {
+        const newProvider = e.target.value;
+        const newServiceCustomData = new Map();
+        data.serviceCustomData?.forEach((value, key) => {
+            if (key !== "AI" || newProvider === "AI") {
+                newServiceCustomData.set(key, value);
+            }
+        });
+        const newData = {
+            ...data,
+            translationProvider: newProvider,
+            serviceCustomData: newServiceCustomData,
+        };
+        setData(newData);
+    };
+    const handleCustomPromptToggle = (enabled) => {
+        const newServiceCustomData = new Map(data.serviceCustomData || new Map());
+        if (enabled) {
+            const prompt = defaultPrompt || "";
+            setCustomPrompt(prompt);
+            newServiceCustomData.set(data.translationProvider, {
+                enableCustomPrompt: true,
+                customPrompt: prompt.trim(),
+                promptCustomizationType: PROMPT_CUSTOMIZATION_TYPE,
+            });
+        }
+        else {
+            newServiceCustomData.delete(data.translationProvider);
+        }
+        setData({
+            ...data,
+            serviceCustomData: newServiceCustomData,
+        });
+    };
+    const handleResetPrompt = () => {
+        setCustomPrompt(defaultPrompt || "");
+    };
+    const updateParentData = useCallback(() => {
+        if (!data.translationProvider)
+            return;
+        const trimmedCustomPrompt = customPromptRef.current.trim();
+        const newServiceCustomData = new Map(data.serviceCustomData || new Map());
+        const currentServiceData = data.serviceCustomData?.get(data.translationProvider);
+        if (enableCustomPrompt) {
+            const nextServiceData = {
+                enableCustomPrompt: true,
+                customPrompt: trimmedCustomPrompt,
+                promptCustomizationType: PROMPT_CUSTOMIZATION_TYPE,
+            };
+            const isSame = currentServiceData?.enableCustomPrompt === true &&
+                (currentServiceData.customPrompt || "") === trimmedCustomPrompt &&
+                currentServiceData.promptCustomizationType ===
+                    PROMPT_CUSTOMIZATION_TYPE;
+            if (isSame)
+                return;
+            newServiceCustomData.set(data.translationProvider, nextServiceData);
+        }
+        else {
+            if (!currentServiceData)
+                return;
+            newServiceCustomData.delete(data.translationProvider);
+        }
+        setData({
+            ...data,
+            serviceCustomData: newServiceCustomData,
+        });
+    }, [data, enableCustomPrompt, setData]);
+    useEffect(() => {
+        if (!isActive || !supportsPromptCustomization)
+            return;
+        if (updateTimerRef.current) {
+            clearTimeout(updateTimerRef.current);
+        }
+        updateTimerRef.current = setTimeout(() => {
+            updateParentData();
+        }, 100);
+        return () => {
+            if (updateTimerRef.current) {
+                clearTimeout(updateTimerRef.current);
+            }
+        };
+    }, [customPrompt, isActive, supportsPromptCustomization, updateParentData]);
+    return (_jsx(WizardStepShell, { fillHeight: true, noPadding: true, testId: "prompt-customization-step", children: _jsx("div", { className: "flex min-h-0 w-full flex-1 overflow-y-auto", children: _jsxs("section", { className: "grid min-h-full w-full flex-1 grid-cols-2", children: [_jsxs("div", { className: "min-w-0 px-6 py-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { htmlFor: "translation-batch-name", className: "text-neutral-grey-50", children: "Translation batch name" }), isSuggesting && (_jsx("div", { role: "status", "aria-label": "Suggesting name", className: "text-muted-foreground flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Spinner, { size: "xs" }) }))] }), _jsx(Input, { id: "translation-batch-name", type: "text", value: batchName, placeholder: "A short label for this translation batch.", onChange: (e) => {
+                                    userTouchedNameRef.current = true;
+                                    setBatchName(e.target.value);
+                                }, className: "mt-2", "data-testid": "translation-batch-name-input" })] }), _jsxs("div", { className: "border-border-default min-w-0 space-y-4 border-l px-6 py-6", children: [_jsxs("div", { children: [_jsx("div", { className: "flex items-center justify-between", children: _jsx(Label, { htmlFor: "translation-provider-select", className: "text-neutral-grey-50", children: "Translation provider" }) }), _jsx(Select, { id: "translation-provider-select", value: data.translationProvider || "", onValueChange: (value) => handleProviderChange({
+                                            target: { value },
+                                        }), options: data.translationProviders.map((provider) => ({
+                                            value: provider.name,
+                                            label: provider.displayName || provider.name,
+                                        })), placeholder: "Select a provider...", size: "sm", className: "mt-2 w-full", "data-testid": "translation-provider-select" }), isCreateLanguageVersionsOnlyProvider && (_jsx("p", { className: "text-muted-foreground mt-2 text-xs", children: "\"Create Language Versions Only\" will create new language versions without automatic translation." }))] }), supportsPromptCustomization && (_jsxs("div", { children: [_jsxs(Label, { className: "flex cursor-pointer items-start gap-2.5", children: [_jsx("input", { type: "checkbox", checked: enableCustomPrompt, onChange: (e) => handleCustomPromptToggle(e.target.checked), className: "mt-0.5 h-3.5 w-3.5 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "enable-custom-prompt-checkbox" }), _jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "block text-[13px] font-medium text-neutral-grey-100", children: "Customize translation prompt (optional)" }), _jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs", children: "Edit the provider prompt before starting translation." })] })] }), enableCustomPrompt && (_jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Textarea, { id: "custom-prompt-textarea", value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "text-xs", rows: 8, placeholder: "Enter prompt instructions here...", "data-testid": "custom-prompt-textarea" }), hasDefaultPrompt && (_jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: handleResetPrompt, disabled: customPrompt === (defaultPrompt || ""), className: "gap-1.5", title: "Reset to the default prompt", "data-testid": "reset-custom-prompt-button", children: [_jsx(ResetIcon, { className: "size-3.5", strokeWidth: 1.5, "aria-hidden": "true" }), "Reset to default"] }))] }))] }))] })] }) }) }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CAiRtB"}
+{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAGtE;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAe,EACf,IAAI,EACJ,OAAO,EACP,eAAe,EACf,WAAW,GACZ,EAAE,oBAAoB,2CA+RtB"}

package/dist/steps/ServiceLanguageSelectionStep.js

@@ -78,6 +78,10 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
             const languageDataLang = data.languageData.get(code);
             const sourceLanguage = languageDataLang?.translationStatus?.sourceLanguage ||
                 itemSourceLanguage;
+            const sourceLanguageName = editContextLanguageMap.get(sourceLanguage)?.name ||
+                data.languageData.get(sourceLanguage)?.name ||
+                siteLanguageMap.get(sourceLanguage)?.name ||
+                sourceLanguage;
             return {
                 code,
                 name: editContextLang?.name ||
@@ -86,6 +90,7 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
                     code,
                 icon: editContextLang?.icon || siteLanguage?.icon,
                 sourceLanguage,
+                sourceLanguageName,
             };
         })
             .filter((lang) => lang.sourceLanguage !== lang.code);
@@ -152,17 +157,17 @@ export function ServiceLanguageSelectionStep({ isActive = true, data, setData, o
         return allLanguages.some((lang) => languageSelection[lang.code]);
     }, [allLanguages, languageSelection]);
     const selectedCount = data.targetLanguages.length;
-    return (_jsx(WizardStepShell, { fillHeight: true, testId: "language-selection-step", children: _jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col overflow-hidden rounded-xl border border-border-default bg-white", children: [_jsxs("div", { className: "flex h-[37px] shrink-0 items-center justify-between gap-2 border-b border-border-default bg-neutral-grey-5/50 px-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium tracking-wider text-neutral-grey-50 ", children: "Target Languages" }), selectedCount > 0 && _jsx(CountBadge, { children: selectedCount })] }), allLanguages.length > 1 && (_jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] font-medium text-neutral-grey-50 transition-colors hover:text-neutral-grey-100", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
+    return (_jsx(WizardStepShell, { fillHeight: true, noPadding: true, testId: "language-selection-step", children: _jsxs("div", { className: "flex min-h-0 w-full flex-1 flex-col overflow-hidden p-6", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-2 pb-3", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-xs font-medium tracking-wider text-neutral-grey-50", children: "Select target languages" }), selectedCount > 0 && _jsx(CountBadge, { children: selectedCount })] }), allLanguages.length > 1 && (_jsxs("label", { className: "flex cursor-pointer items-center gap-1.5 text-[11px] font-medium text-neutral-grey-50 transition-colors hover:text-neutral-grey-100", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
                                         if (input) {
                                             input.indeterminate =
                                                 areSomeLanguagesSelected && !areAllLanguagesSelected;
                                         }
-                                    }, onChange: handleSelectAllLanguages, className: "h-3 w-3 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "select-all-languages-checkbox" }), "Select all"] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", children: allLanguages.length === 0 ? (_jsx("div", { className: "grid gap-2 p-1 sm:grid-cols-2", children: [...Array(6)].map((_, i) => (_jsxs("div", { className: "flex animate-pulse items-center gap-2 rounded-lg border border-border-default px-3 py-2", children: [_jsx("div", { className: "h-3.5 w-3.5 rounded bg-neutral-grey-10" }), _jsx("div", { className: "h-4 w-4 rounded-sm bg-neutral-grey-10" }), _jsx("div", { className: "h-3.5 w-24 rounded bg-neutral-grey-10" }), _jsx("div", { className: "ml-auto h-3 w-10 rounded bg-neutral-grey-5" })] }, i))) })) : (_jsx("div", { className: "grid gap-1.5 sm:grid-cols-2", children: allLanguages.map((lang) => {
+                                    }, onChange: handleSelectAllLanguages, className: "h-3 w-3 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": "select-all-languages-checkbox" }), "Select all"] }))] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pt-2", children: allLanguages.length === 0 ? (_jsx("div", { className: "grid gap-2.5 sm:grid-cols-2", children: [...Array(6)].map((_, i) => (_jsxs("div", { className: "flex animate-pulse items-center gap-2 rounded-[8px] border border-border-default px-3 py-2", children: [_jsx("div", { className: "h-3.5 w-3.5 rounded bg-neutral-grey-10" }), _jsx("div", { className: "h-4 w-4 bg-neutral-grey-10" }), _jsx("div", { className: "h-3.5 w-24 rounded bg-neutral-grey-10" }), _jsx("div", { className: "ml-auto h-3 w-10 rounded bg-neutral-grey-5" })] }, i))) })) : (_jsx("div", { className: "grid gap-2.5 sm:grid-cols-2", children: allLanguages.map((lang) => {
                             const checked = !!languageSelection[lang.code];
-                            return (_jsxs("label", { className: `group flex cursor-pointer items-center gap-2.5 rounded-lg border px-2 py-1.5 transition-all ${checked
-                                    ? "border-primary/30 bg-primary/5 ring-primary/10 ring-1"
-                                    : "border-border-default hover:border-border-default hover:bg-neutral-grey-5"}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => handleLanguageToggle(lang.code), className: "h-3.5 w-3.5 shrink-0 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `language-checkbox-${lang.code}` }), lang.icon ? (_jsx("img", { src: lang.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 rounded-sm object-cover" })) : (_jsx("span", { className: "inline-block h-4 w-5 shrink-0 rounded-sm bg-neutral-grey-5" })), _jsx("span", { className: `min-w-0 flex-1 truncate text-[13px] ${checked
+                            return (_jsxs("label", { className: `group flex cursor-pointer items-center gap-2.5 rounded-[8px] border px-2 py-1.5 transition-all ${checked
+                                    ? "border-primary/30 ring-primary/10 ring-1"
+                                    : "border-border-default hover:border-border-default hover:bg-neutral-grey-5"}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => handleLanguageToggle(lang.code), className: "h-3.5 w-3.5 shrink-0 rounded border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `language-checkbox-${lang.code}` }), lang.icon ? (_jsx("img", { src: lang.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 object-cover" })) : (_jsx("span", { className: "inline-block h-4 w-5 shrink-0 bg-neutral-grey-5" })), _jsx("span", { className: `min-w-0 flex-1 truncate text-[13px] ${checked
                                             ? "font-medium text-neutral-grey-100"
-                                            : "text-neutral-grey-100"}`, children: lang.name }), _jsx("span", { className: "shrink-0 font-mono text-[10px] tracking-wider text-neutral-grey-50 ", children: lang.code })] }, lang.code));
+                                            : "text-neutral-grey-100"}`, children: lang.name }), _jsxs("span", { className: "ml-auto flex max-w-[9rem] shrink-0 flex-col items-end leading-tight", children: [_jsx("span", { className: "font-mono text-[10px] tracking-wider text-neutral-grey-50", children: lang.code }), _jsxs("span", { className: "max-w-full truncate text-[10px] text-neutral-grey-50", title: `Source language: ${lang.sourceLanguageName}`, children: ["from ", lang.sourceLanguageName] })] })] }, lang.code));
                         }) })) })] }) }));
 }

package/dist/steps/WizardStepShell.d.ts

@@ -4,6 +4,8 @@ type WizardStepShellProps = {
     meta?: ReactNode;
     /** When true, the body section flex-grows and content can overflow internally. */
     fillHeight?: boolean;
+    /** Removes the shell padding so a step can draw flush dividers or bands. */
+    noPadding?: boolean;
     testId?: string;
     children: ReactNode;
 };
@@ -12,6 +14,6 @@ type WizardStepShellProps = {
  * live in the wizard's stepper bar, so this just gives a consistent
  * padding + optional meta row + flex/scroll behavior for the content.
  */
-export declare function WizardStepShell({ meta, fillHeight, testId, children, }: WizardStepShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function WizardStepShell({ meta, fillHeight, noPadding, testId, children, }: WizardStepShellProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=WizardStepShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"WizardStepShell.d.ts","sourceRoot":"","sources":["../../src/steps/WizardStepShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,oBAAoB,GAAG;IAC1B,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAkB,EAClB,MAAM,EACN,QAAQ,GACT,EAAE,oBAAoB,2CAiBtB"}
+{"version":3,"file":"WizardStepShell.d.ts","sourceRoot":"","sources":["../../src/steps/WizardStepShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,KAAK,oBAAoB,GAAG;IAC1B,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,UAAkB,EAClB,SAAiB,EACjB,MAAM,EACN,QAAQ,GACT,EAAE,oBAAoB,2CAwBtB"}