@parhelia/localization 0.1.12907 → 0.1.12910

package/dist/steps/ItemSelectionTree.js

@@ -0,0 +1,327 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ItemCollectionEditor, } from "@parhelia/core";
+import { streamSubitemCount } from "../api/discovery";
+const SITECORE_ROOT = "11111111-1111-1111-1111-111111111111";
+function fullItemFromDescriptor(descriptor) {
+    return {
+        id: descriptor.id,
+        language: descriptor.language,
+        version: descriptor.version,
+        descriptor: {
+            id: descriptor.id,
+            language: descriptor.language,
+            version: descriptor.version,
+            name: descriptor.name,
+            displayName: descriptor.displayName,
+            path: descriptor.path,
+        },
+        name: descriptor.name ?? "",
+        templateId: descriptor.templateId ?? "",
+        templateName: "",
+        icon: descriptor.icon ?? "",
+        largeIcon: descriptor.icon ?? "",
+        thumbnail: "",
+        path: descriptor.path ?? "",
+        fields: [],
+        canWriteItem: false,
+        canWriteLanguage: false,
+        canWriteWorkflow: false,
+        canRename: false,
+        canDelete: false,
+        canCreate: false,
+        workflowState: "",
+        hasLock: false,
+        hasLayout: true,
+        idPath: descriptor.idPath ?? "",
+        canLock: false,
+        lockedBy: "",
+        isInheritedFromMasterLanguage: false,
+        hasChildren: descriptor.hasChildren ?? false,
+    };
+}
+function fullItemToWithSubtree(item, includeSubitems) {
+    return {
+        descriptor: {
+            id: item.descriptor?.id ?? item.id,
+            language: item.descriptor?.language ?? item.language,
+            version: item.descriptor?.version ?? item.version,
+            name: item.descriptor?.name ?? item.name,
+            displayName: item.descriptor?.displayName ?? item.displayName,
+            path: item.descriptor?.path ?? item.path,
+        },
+        includeSubitems,
+    };
+}
+export function ItemSelectionTree({ data, setData, editContext, isActive = true, onSelectionValidChange, height = 360, }) {
+    const language = useMemo(() => editContext?.item?.language ??
+        editContext?.currentItemDescriptor?.language ??
+        "en", [editContext?.item?.language, editContext?.currentItemDescriptor?.language]);
+    // Seed selection: prefer previously saved tree items, then discoveredItems,
+    // then the wizard's initial `items`. Default includeSubitems = legacy flag.
+    const initialItems = useMemo(() => {
+        if (data.selectionTreeItems && data.selectionTreeItems.length > 0) {
+            return data.selectionTreeItems;
+        }
+        const seed = data.discoveredItems && data.discoveredItems.length > 0
+            ? data.discoveredItems
+            : data.items;
+        return seed.map((item) => fullItemToWithSubtree(item, !!data.includeSubitems));
+        // First mount only — once the user edits, wizard data is downstream.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const [items, setItems] = useState(initialItems);
+    const [selectedInTree, setSelectedInTree] = useState([]);
+    const [selectedFromList, setSelectedFromList] = useState([]);
+    // Async subitem counts keyed by item id. Filtered server-side via
+    // IItemExportFilter (see TranslationController.DiscoverItemsTree). The
+    // running count climbs as chunks arrive; `complete` flips true on the
+    // final chunk so consumers know when to drop the "still counting" hint.
+    const [subitemCounts, setSubitemCounts] = useState(() => data.subitemCounts ?? {});
+    // Mirror local subitemCounts into wizardData so later steps (e.g. the
+    // Start Translation button) can show a live total.
+    const dataRef = useRef(data);
+    dataRef.current = data;
+    useEffect(() => {
+        setData({ ...dataRef.current, subitemCounts });
+    }, [subitemCounts, setData]);
+    // Keep a cache of the richest FullItem we've ever seen for each id so we
+    // can rebuild discoveredItems without re-fetching.
+    const itemCacheRef = useRef(new Map());
+    if (itemCacheRef.current.size === 0) {
+        for (const it of data.items)
+            itemCacheRef.current.set(it.id, it);
+        for (const it of data.discoveredItems || [])
+            itemCacheRef.current.set(it.id, it);
+    }
+    // Build a combined idPath that expands every parent of the current
+    // selection (but not the items themselves). ContentTree's parser
+    // extracts each {guid} segment, so concatenating multiple paths works.
+    const expandIdPath = useMemo(() => {
+        const segments = [];
+        for (const entry of items) {
+            const cached = itemCacheRef.current.get(entry.descriptor.id);
+            const idPath = cached?.idPath;
+            if (!idPath)
+                continue;
+            const parts = idPath.split("/").filter((s) => s.length > 0);
+            // Drop the last segment (the item itself) — we only want parents.
+            parts.pop();
+            for (const part of parts)
+                segments.push(part);
+        }
+        if (segments.length === 0)
+            return undefined;
+        return "/" + segments.join("/");
+    }, [items]);
+    const commitToWizard = useCallback((nextItems) => {
+        const cache = itemCacheRef.current;
+        const discovered = nextItems.map((entry) => cache.get(entry.descriptor.id) ??
+            fullItemFromDescriptor(entry.descriptor));
+        setData({
+            ...data,
+            selectionTreeItems: nextItems,
+            discoveredItems: discovered,
+            includeSubitems: nextItems.some((i) => i.includeSubitems),
+        });
+    }, [data, setData]);
+    // Commit current state on first mount so wizard data reflects the seed.
+    const didInitialCommitRef = useRef(false);
+    useEffect(() => {
+        if (didInitialCommitRef.current)
+            return;
+        didInitialCommitRef.current = true;
+        commitToWizard(items);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (isActive)
+            onSelectionValidChange?.(items.length > 0);
+    }, [isActive, onSelectionValidChange, items.length]);
+    // Stream subitem counts in the background for items whose
+    // includeSubitems flag is on. Filtering happens server-side (see
+    // TranslationController.DiscoverSubitemCountStream). The count grows in
+    // real time as the backend walks the subtree. Cached results survive
+    // toggle-off/on; in-flight requests are aborted if the user turns the
+    // flag back off.
+    const sessionId = editContext?.sessionId;
+    const inFlightRef = useRef(new Map());
+    useEffect(() => {
+        const inFlight = inFlightRef.current;
+        const enabledIds = new Set(items.filter((it) => it.includeSubitems).map((it) => it.descriptor.id));
+        // Cancel any streams whose items no longer have the flag on.
+        for (const [id, ctrl] of inFlight) {
+            if (!enabledIds.has(id)) {
+                ctrl.abort();
+                inFlight.delete(id);
+            }
+        }
+        // Start a stream for every newly-enabled item that doesn't already
+        // have a count or an active stream. Cached complete results survive;
+        // a partial (non-complete) object means a previous stream was aborted
+        // mid-flight — restart it.
+        const toStart = items
+            .filter((it) => it.includeSubitems)
+            .map((it) => it.descriptor)
+            .filter((d) => {
+            if (inFlight.has(d.id))
+                return false;
+            const c = subitemCounts[d.id];
+            if (c === undefined || c === "error")
+                return true;
+            if (c === "loading")
+                return false;
+            return !c.complete;
+        });
+        if (toStart.length === 0)
+            return;
+        setSubitemCounts((prev) => {
+            const next = { ...prev };
+            for (const d of toStart)
+                next[d.id] = "loading";
+            return next;
+        });
+        for (const descriptor of toStart) {
+            const controller = new AbortController();
+            inFlight.set(descriptor.id, controller);
+            void (async () => {
+                try {
+                    const finalCount = await streamSubitemCount({ itemId: descriptor.id, language: descriptor.language }, ({ count, complete }) => {
+                        setSubitemCounts((prev) => ({
+                            ...prev,
+                            [descriptor.id]: { count, complete },
+                        }));
+                    }, { sessionId, signal: controller.signal });
+                    // Backend may close the stream without explicitly sending
+                    // complete=true on the last line — mark complete on a clean exit.
+                    setSubitemCounts((prev) => {
+                        const existing = prev[descriptor.id];
+                        const count = existing && typeof existing === "object"
+                            ? existing.count
+                            : finalCount;
+                        return {
+                            ...prev,
+                            [descriptor.id]: { count, complete: true },
+                        };
+                    });
+                }
+                catch (err) {
+                    if (err?.name === "AbortError")
+                        return;
+                    setSubitemCounts((prev) => {
+                        // Don't overwrite a partial count with "error" — keep what we have.
+                        const existing = prev[descriptor.id];
+                        if (existing && typeof existing === "object")
+                            return prev;
+                        return { ...prev, [descriptor.id]: "error" };
+                    });
+                }
+                finally {
+                    if (inFlight.get(descriptor.id) === controller) {
+                        inFlight.delete(descriptor.id);
+                    }
+                }
+            })();
+        }
+    }, [items, subitemCounts, sessionId]);
+    // Abort any in-flight streams on unmount.
+    useEffect(() => {
+        const inFlight = inFlightRef.current;
+        return () => {
+            for (const ctrl of inFlight.values())
+                ctrl.abort();
+            inFlight.clear();
+        };
+    }, []);
+    const cacheTreeNode = useCallback((node) => {
+        const id = node.id;
+        if (!id)
+            return;
+        const cache = itemCacheRef.current;
+        if (cache.has(id))
+            return;
+        const anyNode = node;
+        cache.set(id, fullItemFromDescriptor({
+            id,
+            language: node.language ?? language,
+            version: node.version ?? 1,
+            name: node.name,
+            displayName: node.displayName,
+            path: node.path,
+            idPath: anyNode.idPath,
+            icon: anyNode.icon,
+            templateId: anyNode.templateId,
+            hasChildren: anyNode.hasChildren,
+        }));
+    }, [language]);
+    const handleAddToList = useCallback(async (itemsToAdd) => {
+        const source = itemsToAdd ?? selectedInTree;
+        if (!source || source.length === 0)
+            return;
+        const existing = new Set(items.map((i) => i.descriptor.id));
+        const next = [...items];
+        for (const node of source) {
+            if (!node.id || existing.has(node.id))
+                continue;
+            cacheTreeNode(node);
+            next.push({
+                descriptor: {
+                    id: node.id,
+                    language: node.language ?? language,
+                    version: node.version ?? 1,
+                    name: node.name,
+                    displayName: node.displayName,
+                    path: node.path,
+                },
+                includeSubitems: false,
+            });
+            existing.add(node.id);
+        }
+        setItems(next);
+        commitToWizard(next);
+        setSelectedInTree([]);
+        setSelectedFromList([]);
+    }, [items, selectedInTree, language, cacheTreeNode, commitToWizard]);
+    const handleAddItem = useCallback(async (item) => {
+        const id = item.id;
+        if (!id || items.some((i) => i.descriptor.id === id))
+            return;
+        cacheTreeNode(item);
+        const next = [
+            ...items,
+            {
+                descriptor: {
+                    id,
+                    language: item.language ?? language,
+                    version: item.version ?? 1,
+                    name: item.name,
+                    displayName: item.displayName,
+                    path: item.path,
+                },
+                includeSubitems: false,
+            },
+        ];
+        setItems(next);
+        commitToWizard(next);
+        setSelectedFromList([]);
+    }, [items, language, cacheTreeNode, commitToWizard]);
+    const handleRemoveFromList = useCallback(() => {
+        const ids = new Set(selectedFromList.map((i) => i.descriptor.id));
+        const next = items.filter((i) => !ids.has(i.descriptor.id));
+        setItems(next);
+        commitToWizard(next);
+        setSelectedFromList([]);
+    }, [items, selectedFromList, commitToWizard]);
+    const handleRemoveItem = useCallback((index) => {
+        const next = items.filter((_, i) => i !== index);
+        setItems(next);
+        commitToWizard(next);
+        setSelectedFromList([]);
+    }, [items, commitToWizard]);
+    const handleToggleSubitems = useCallback((index) => {
+        const next = items.map((it, i) => i === index ? { ...it, includeSubitems: !it.includeSubitems } : it);
+        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" }));
+}

package/dist/steps/PromptCustomizationStep.d.ts

@@ -1,3 +1,3 @@
 import { TranslationStepProps } from "./types";
-export declare function PromptCustomizationStep({ stepIndex, isActive, data, setData, onStepCompleted, editContext, }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+export declare function PromptCustomizationStep({ 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":"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"}
+{"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"}

package/dist/steps/PromptCustomizationStep.js

@@ -1,15 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-export function PromptCustomizationStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, }) {
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Input, Select, Spinner, Textarea } from "@parhelia/core";
+import { WizardStepShell } from "./WizardStepShell";
+import { suggestBatchName } from "../api/discovery";
+export function PromptCustomizationStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
     const [customPrompt, setCustomPrompt] = useState("");
     const [customizationType, setCustomizationType] = useState("extend");
-    // Use refs to track current values without triggering re-renders
+    // 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 customizationTypeRef = useRef(customizationType);
-    // Track if we've initialized from parent data to prevent re-initialization during typing
     const hasInitializedRef = useRef(false);
     const lastProviderRef = useRef(data.translationProvider);
-    // Debounce timer ref for parent updates
     const updateTimerRef = useRef(null);
     useEffect(() => {
         customPromptRef.current = customPrompt;
@@ -17,36 +79,32 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
     useEffect(() => {
         customizationTypeRef.current = customizationType;
     }, [customizationType]);
-    // Get service-specific custom data for the selected provider
+    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;
-    // Get default prompt from provider settings (no fallback)
+    const supportsPromptCustomization = data.translationProvider === "AI";
     const defaultPrompt = useMemo(() => {
-        const provider = data.translationProviders.find(p => p.name === data.translationProvider);
-        const prompt = provider?.defaultPrompt;
-        // Return null if prompt is null, undefined, or empty string
+        const prompt = selectedProvider?.defaultPrompt;
         return prompt && prompt.trim() ? prompt : null;
-    }, [data.translationProviders, data.translationProvider]);
-    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.trim().length > 0;
-    // Initialize from existing data - only on mount or provider change
+    }, [selectedProvider?.defaultPrompt]);
+    const hasDefaultPrompt = defaultPrompt != null && defaultPrompt.length > 0;
     useEffect(() => {
-        // Reset initialization when provider changes
         if (lastProviderRef.current !== data.translationProvider) {
             hasInitializedRef.current = false;
             lastProviderRef.current = data.translationProvider;
         }
-        // Skip if already initialized (prevents re-init during typing)
-        if (hasInitializedRef.current) {
+        if (hasInitializedRef.current)
             return;
-        }
-        const nextCustomizationType = serviceData?.promptCustomizationType || "extend";
+        const nextCustomizationType = serviceData?.promptCustomizationType ||
+            "extend";
         let nextCustomPrompt = serviceData?.customPrompt || "";
-        // If stored prompt already includes default (legacy), strip it for editing
-        if (hasDefaultPrompt && nextCustomizationType === "extend" && nextCustomPrompt.startsWith(defaultPrompt || "")) {
+        if (hasDefaultPrompt &&
+            nextCustomizationType === "extend" &&
+            nextCustomPrompt.startsWith(defaultPrompt || "")) {
             nextCustomPrompt = nextCustomPrompt.slice((defaultPrompt || "").length);
             nextCustomPrompt = nextCustomPrompt.replace(/^\s*\n\s*\n?/, "");
         }
@@ -60,29 +118,70 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
         }
         hasInitializedRef.current = true;
     }, [
+        data.translationProvider,
+        defaultPrompt,
         enableCustomPrompt,
-        serviceData,
         hasDefaultPrompt,
-        defaultPrompt,
-        data.translationProvider,
+        serviceData,
     ]);
-    // Preview of final prompt
+    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) {
+            newServiceCustomData.set(data.translationProvider, {
+                enableCustomPrompt: true,
+                customPrompt: "",
+                promptCustomizationType: "extend",
+            });
+        }
+        else {
+            newServiceCustomData.delete(data.translationProvider);
+        }
+        setData({
+            ...data,
+            serviceCustomData: newServiceCustomData,
+        });
+    };
     const previewPrompt = useMemo(() => {
         if (!enableCustomPrompt || !customPrompt.trim()) {
             return defaultPrompt || "";
         }
-        // If no default prompt, just show custom prompt
         if (!hasDefaultPrompt) {
             return customPrompt;
         }
-        // If default prompt exists, show based on customization type
         if (customizationType === "replace") {
             return customPrompt;
         }
         return `${defaultPrompt}\n\n${customPrompt}`;
-    }, [enableCustomPrompt, customPrompt, customizationType, defaultPrompt, hasDefaultPrompt]);
-    // Debounced update to parent - prevents rapid state updates during typing
+    }, [
+        customPrompt,
+        customizationType,
+        defaultPrompt,
+        enableCustomPrompt,
+        hasDefaultPrompt,
+    ]);
     const updateParentData = useCallback(() => {
+        if (!data.translationProvider)
+            return;
         const trimmedCustomPrompt = customPromptRef.current.trim();
         const currentCustomizationType = customizationTypeRef.current;
         const newServiceCustomData = new Map(data.serviceCustomData || new Map());
@@ -95,33 +194,28 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
             };
             const isSame = currentServiceData?.enableCustomPrompt === true &&
                 (currentServiceData.customPrompt || "") === trimmedCustomPrompt &&
-                (currentServiceData.promptCustomizationType || "extend") === currentCustomizationType;
-            if (isSame) {
+                (currentServiceData.promptCustomizationType || "extend") ===
+                    currentCustomizationType;
+            if (isSame)
                 return;
-            }
             newServiceCustomData.set(data.translationProvider, nextServiceData);
         }
         else {
-            if (!currentServiceData) {
+            if (!currentServiceData)
                 return;
-            }
             newServiceCustomData.delete(data.translationProvider);
         }
-        const newData = {
+        setData({
             ...data,
             serviceCustomData: newServiceCustomData,
-        };
-        setData(newData);
-    }, [enableCustomPrompt, data, setData]);
-    // Update wizard data when settings change - debounced to prevent rapid fire
+        });
+    }, [data, enableCustomPrompt, setData]);
     useEffect(() => {
-        if (!isActive)
+        if (!isActive || !supportsPromptCustomization)
             return;
-        // Clear any pending update
         if (updateTimerRef.current) {
             clearTimeout(updateTimerRef.current);
         }
-        // Debounce the update to parent (100ms delay)
         updateTimerRef.current = setTimeout(() => {
             updateParentData();
         }, 100);
@@ -131,24 +225,33 @@ export function PromptCustomizationStep({ stepIndex, isActive = true, data, setD
             }
         };
     }, [
-        enableCustomPrompt,
         customPrompt,
         customizationType,
         isActive,
+        supportsPromptCustomization,
         updateParentData,
     ]);
-    // Update completion status
-    useEffect(() => {
-        if (!isActive)
-            return;
-        // Step is always complete (it's optional)
-        onStepCompleted(true);
-    }, [isActive, onStepCompleted]);
-    // Skip condition: hide step when checkbox is disabled
-    // This is handled by skipCondition in wizard config
-    return (_jsxs("div", { className: "p-6 space-y-6 h-full flex flex-col", "data-testid": "prompt-customization-step", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-xl font-semibold text-[var(--color-dark)] mb-2", children: "Customize Translation Prompt" }), _jsxs("p", { className: "text-sm text-[var(--color-gray-2)] mb-6", children: ["Optionally customize the prompt used for translation. This allows you to provide specific instructions or context for the translation service.", _jsx("br", {}), _jsx("span", { className: "text-xs text-[var(--color-gray-2)] mt-1 block", children: "Note: Your custom prompt will be appended to the system instructions that ensure proper translation structure." })] })] }), _jsxs("div", { className: "space-y-6 flex-1", children: [!enableCustomPrompt && (_jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg p-4 bg-[var(--color-gray-5)]", children: _jsx("p", { className: "text-sm text-[var(--color-gray-2)]", children: "Enable \"Customize translation prompt\" in the previous step to customize the prompt." }) })), enableCustomPrompt && (_jsxs(_Fragment, { children: [hasDefaultPrompt && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)] mb-2", children: "Default Prompt" }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-md p-3 bg-[var(--color-gray-5)]", children: _jsx("pre", { className: "text-xs text-[var(--color-gray-1)] whitespace-pre-wrap font-mono", children: defaultPrompt }) })] }), _jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)] mb-3", children: "Customization Type" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("label", { className: "flex items-center cursor-pointer py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-5)] transition-colors", children: [_jsx("input", { type: "radio", name: "customizationType", value: "extend", checked: customizationType === "extend", onChange: () => setCustomizationType("extend"), className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] accent-[#9650fb]", "data-testid": "customization-type-extend" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)]", children: "Extend (append to default)" })] }), _jsxs("label", { className: "flex items-center cursor-pointer py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-5)] transition-colors", children: [_jsx("input", { type: "radio", name: "customizationType", value: "replace", checked: customizationType === "replace", onChange: () => setCustomizationType("replace"), className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] accent-[#9650fb]", "data-testid": "customization-type-replace" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)]", children: "Replace (use custom prompt only)" })] })] })] })] })), _jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)] mb-2", children: "Custom Prompt" }), _jsx("textarea", { value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "w-full px-3 py-2.5 border border-[var(--color-gray-3)] rounded-md bg-[var(--color-gray-5)] text-[var(--color-dark)] focus:outline-none focus:ring-2 focus:ring-[#9650fb] focus:border-[#9650fb] text-sm font-mono transition-colors", rows: 6, placeholder: "Enter your custom prompt instructions here...", "data-testid": "custom-prompt-textarea" }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-2", children: hasDefaultPrompt
-                                            ? customizationType === "extend"
-                                                ? "This will be appended to the default prompt. The final prompt (default + custom) will then be appended to the system instructions on the backend."
-                                                : "This will replace the default prompt. The custom prompt will then be appended to the system instructions on the backend."
-                                            : "Your custom prompt will be appended to the system instructions on the backend." })] }), hasDefaultPrompt && _jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)] mb-2", children: "Preview" }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-md p-3 bg-[var(--color-gray-5)] max-h-64 overflow-y-auto", children: _jsx("pre", { className: "text-xs text-[var(--color-gray-1)] whitespace-pre-wrap font-mono", children: previewPrompt }) }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-2", children: "This is how the final prompt will look when sent to the translation service." })] })] }))] })] }));
+    return (_jsx(WizardStepShell, { fillHeight: true, testId: "prompt-customization-step", children: _jsxs("div", { className: "mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col gap-6 overflow-y-auto", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { htmlFor: "translation-batch-name", className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "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("p", { className: "text-muted-foreground mt-1 text-xs", children: "A short label for this translation batch." }), _jsx(Input, { id: "translation-batch-name", type: "text", value: batchName, placeholder: "Translation batch", onChange: (e) => {
+                                userTouchedNameRef.current = true;
+                                setBatchName(e.target.value);
+                            }, className: "mt-2", "data-testid": "translation-batch-name-input" })] }), _jsxs("div", { children: [_jsx("label", { className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "Translation provider" }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: "\"Create Versions\" will create new language versions without automatic translation." }), _jsx(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\u2026", size: "sm", className: "mt-2 w-full", "data-testid": "translation-provider-select" })] }), supportsPromptCustomization && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "-mb-2 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" }), _jsx("span", { className: "text-muted-foreground mt-0.5 block text-xs", children: "Override or extend the provider's default instructions." })] })] }), enableCustomPrompt && (_jsxs(_Fragment, { children: [hasDefaultPrompt && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "Default prompt" }), _jsx("pre", { className: "mt-2 max-h-40 overflow-y-auto rounded-md bg-neutral-grey-5/70 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-neutral-grey-100", children: defaultPrompt })] }), _jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "Customization type" }), _jsx("div", { className: "mt-2 grid gap-2 sm:grid-cols-2", children: [
+                                                        {
+                                                            value: "extend",
+                                                            title: "Extend",
+                                                            hint: "Append to the default prompt.",
+                                                        },
+                                                        {
+                                                            value: "replace",
+                                                            title: "Replace",
+                                                            hint: "Use the custom prompt only.",
+                                                        },
+                                                    ].map((opt) => {
+                                                        const selected = customizationType === opt.value;
+                                                        return (_jsxs("label", { className: `group flex cursor-pointer items-start gap-2.5 rounded-lg p-2.5 transition-colors ${selected ? "bg-primary/5" : "hover:bg-neutral-grey-5"}`, children: [_jsx("input", { type: "radio", name: "customizationType", value: opt.value, checked: selected, onChange: () => setCustomizationType(opt.value), className: "mt-0.5 h-3.5 w-3.5 border-border-default text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `customization-type-${opt.value}` }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-neutral-grey-100", children: opt.title }), _jsx("div", { className: "text-muted-foreground mt-0.5 text-[11px]", children: opt.hint })] })] }, opt.value));
+                                                    }) })] })] })), _jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "Custom prompt" }), _jsx(Textarea, { value: customPrompt, onChange: (e) => setCustomPrompt(e.target.value), className: "mt-2 font-mono", rows: 6, placeholder: "Enter your custom prompt instructions here\u2026", "data-testid": "custom-prompt-textarea" })] }), hasDefaultPrompt && (_jsxs("div", { children: [_jsx("span", { className: "text-[11px] font-bold tracking-wider text-neutral-grey-50 ", children: "Preview" }), _jsx("pre", { className: "mt-2 max-h-52 overflow-y-auto rounded-md bg-neutral-grey-5/70 p-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-neutral-grey-100", children: previewPrompt })] }))] }))] }))] }) }));
 }