@parhelia/localization 0.1.12907 → 0.1.12909

package/dist/steps/ServiceLanguageSelectionStep.d.ts

@@ -1,3 +1,8 @@
 import { TranslationStepProps } from "./types";
-export declare function ServiceLanguageSelectionStep({ stepIndex, isActive, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Language-only step. Item selection lives in its own step
+ * (see ItemSelectionStep). The legacy name is kept so existing imports
+ * keep working.
+ */
+export declare function ServiceLanguageSelectionStep({ isActive, data, setData, onStepCompleted, editContext, }: TranslationStepProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ServiceLanguageSelectionStep.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ServiceLanguageSelectionStep.d.ts","sourceRoot":"","sources":["../../src/steps/ServiceLanguageSelectionStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAC;AAkBtE,wBAAgB,4BAA4B,CAAC,EAAE,SAAS,EAAE,QAAe,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CAuZ7K"}
+{"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"}

package/dist/steps/ServiceLanguageSelectionStep.js

@@ -1,63 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-// Version creation now offered via VersionOnlyTranslationProvider. No custom button here.
-function getTranslationStatusBadgeClass(status) {
-    switch (status) {
-        case "Completed":
-            return "text-green-700 bg-green-100";
-        case "Error":
-            return "text-red-700 bg-red-100";
-        case "In Progress":
-            return "text-purple-800 bg-purple-100";
-        case "Not started":
-            return "text-[var(--color-gray-2)] bg-[var(--color-gray-4)]";
-        default:
-            return "text-[var(--color-gray-2)] bg-[var(--color-gray-4)]";
-    }
-}
-export function ServiceLanguageSelectionStep({ stepIndex, isActive = true, data, setData, onStepCompleted, editContext, setFooterActions, requestClose }) {
+import { CountBadge, getLanguages } from "@parhelia/core";
+import { WizardStepShell } from "./WizardStepShell";
+/**
+ * Language-only step. Item selection lives in its own step
+ * (see ItemSelectionStep). The legacy name is kept so existing imports
+ * keep working.
+ */
+export function ServiceLanguageSelectionStep({ isActive = true, data, setData, onStepCompleted, editContext, }) {
     const [languageSelection, setLanguageSelection] = useState({});
     const dataRef = useRef(data);
-    useEffect(() => { dataRef.current = data; }, [data]);
-    // Check if multi-item translation is enabled
-    const multiItemEnabled = editContext?.configuration?.localization?.multiItem !== false;
-    // Use ref to track onStepCompleted to avoid dependency issues
+    useEffect(() => {
+        dataRef.current = data;
+    }, [data]);
     const onStepCompletedRef = useRef(onStepCompleted);
     useEffect(() => {
         onStepCompletedRef.current = onStepCompleted;
     }, [onStepCompleted]);
-    // Track last completion state to prevent unnecessary calls
     const lastCompletionStateRef = useRef(null);
-    // Call completion check when component mounts or when returning to this step
-    // Also check when data changes (but only if we're actually the active step)
     useEffect(() => {
-        // Only update completion when this step is active
         if (!isActive)
             return;
-        const hasProvider = !!data.translationProvider;
-        const hasLanguages = data.targetLanguages.length > 0;
-        const isCompleted = hasProvider && hasLanguages;
-        // Only call if completion state actually changed
+        const isCompleted = data.targetLanguages.length > 0;
         if (lastCompletionStateRef.current !== isCompleted) {
             lastCompletionStateRef.current = isCompleted;
             onStepCompletedRef.current(isCompleted);
         }
-    }, [isActive, data.translationProvider, data.targetLanguages.length]);
-    // 1) Derive provider + available languages (lightweight, in-memory)
-    const provider = useMemo(() => data.translationProviders.find(p => p.name === data.translationProvider), [data.translationProviders, data.translationProvider]);
-    // Use editContext.itemLanguages (like TranslationSidebar) to get all languages including source language
-    // This is not item-specific - it shows all available languages for the site
+    }, [isActive, data.targetLanguages.length]);
     const editContextLanguages = useMemo(() => editContext?.itemLanguages || [], [editContext?.itemLanguages]);
-    // Get language codes from editContext languages, or fallback to languageData keys
+    const [siteLanguages, setSiteLanguages] = useState([]);
+    useEffect(() => {
+        if (editContextLanguages.length > 0 || data.languageData.size > 0)
+            return;
+        let cancelled = false;
+        const loadSiteLanguages = async () => {
+            try {
+                const res = await getLanguages();
+                const languages = (res?.data ?? res ?? []);
+                if (!cancelled && Array.isArray(languages)) {
+                    setSiteLanguages(languages);
+                }
+            }
+            catch (error) {
+                console.error("Failed to load languages:", error);
+            }
+        };
+        loadSiteLanguages();
+        return () => {
+            cancelled = true;
+        };
+    }, [editContextLanguages.length, data.languageData.size]);
     const siteLanguageCodes = useMemo(() => {
         if (editContextLanguages.length > 0) {
-            return editContextLanguages.map(lang => lang.languageCode);
+            return editContextLanguages.map((lang) => lang.languageCode);
+        }
+        if (data.languageData.size > 0) {
+            return Array.from(data.languageData.keys());
+        }
+        if (siteLanguages.length > 0) {
+            return siteLanguages.map((lang) => lang.languageCode);
         }
         return Array.from(data.languageData.keys());
-    }, [editContextLanguages, data.languageData]);
-    const availableLanguageCodes = useMemo(() => (provider?.supportedLanguages?.length ? provider.supportedLanguages : siteLanguageCodes), [provider?.supportedLanguages, siteLanguageCodes]);
-    // Determine the source language from the items being translated
-    // Use the first item's language as the source language (all items should have the same source language)
+    }, [editContextLanguages, data.languageData, siteLanguages]);
     const itemSourceLanguage = useMemo(() => {
         return (data.items[0]?.descriptor.language ||
             editContext?.item?.descriptor.language ||
@@ -65,177 +69,100 @@ export function ServiceLanguageSelectionStep({ stepIndex, isActive = true, data,
             "en");
     }, [data.items, editContext?.item, editContext?.currentItemDescriptor]);
     const allLanguages = useMemo(() => {
-        // Create a map of language codes to Language objects from editContext for quick lookup
-        const editContextLanguageMap = new Map(editContextLanguages.map(lang => [lang.languageCode, lang]));
-        const arr = availableLanguageCodes
-            .map(code => {
-            // Prefer language info from editContext (like TranslationSidebar), fallback to languageData
+        const editContextLanguageMap = new Map(editContextLanguages.map((lang) => [lang.languageCode, lang]));
+        const siteLanguageMap = new Map(siteLanguages.map((lang) => [lang.languageCode, lang]));
+        const arr = siteLanguageCodes
+            .map((code) => {
             const editContextLang = editContextLanguageMap.get(code);
+            const siteLanguage = siteLanguageMap.get(code);
             const languageDataLang = data.languageData.get(code);
-            // Determine source language: prefer from translationStatus, fallback to item's source language
-            const sourceLanguage = languageDataLang?.translationStatus?.sourceLanguage || itemSourceLanguage;
+            const sourceLanguage = languageDataLang?.translationStatus?.sourceLanguage ||
+                itemSourceLanguage;
             return {
                 code,
-                name: editContextLang?.name || languageDataLang?.name || code,
-                hasVersions: (editContextLang?.versions || 0) > 0 || (languageDataLang?.items.length || 0) > 0,
-                translationStatus: languageDataLang?.translationStatus,
-                sourceLanguage, // Add source language to the language object
+                name: editContextLang?.name ||
+                    languageDataLang?.name ||
+                    siteLanguage?.name ||
+                    code,
+                icon: editContextLang?.icon || siteLanguage?.icon,
+                sourceLanguage,
             };
         })
-            // Filter out languages where sourceLanguage equals targetLanguage
-            .filter(lang => lang.sourceLanguage !== lang.code);
+            .filter((lang) => lang.sourceLanguage !== lang.code);
         arr.sort((a, b) => a.name.localeCompare(b.name));
         return arr;
-    }, [availableLanguageCodes, editContextLanguages, data.languageData, itemSourceLanguage]);
-    // Track last processed targetLanguages to prevent unnecessary updates
-    const lastProcessedTargetLanguagesRef = useRef('');
-    // Rehydrate UI selection from saved wizard data when returning to this step
+    }, [
+        siteLanguageCodes,
+        editContextLanguages,
+        siteLanguages,
+        data.languageData,
+        itemSourceLanguage,
+    ]);
+    const lastProcessedTargetLanguagesRef = useRef("");
     useEffect(() => {
         if (!allLanguages || allLanguages.length === 0)
             return;
-        // Create a stable key from targetLanguages to detect actual changes
         const targetLanguagesKey = JSON.stringify([...data.targetLanguages].sort());
-        // Skip if we've already processed this exact set of target languages
-        if (lastProcessedTargetLanguagesRef.current === targetLanguagesKey) {
+        if (lastProcessedTargetLanguagesRef.current === targetLanguagesKey)
             return;
-        }
         lastProcessedTargetLanguagesRef.current = targetLanguagesKey;
         const initialSelection = {};
-        // Mark as selected any language that's in our saved targetLanguages array
         for (const langCode of data.targetLanguages) {
-            const lang = allLanguages.find(l => l.code === langCode);
-            if (lang) {
+            const lang = allLanguages.find((l) => l.code === langCode);
+            if (lang)
                 initialSelection[langCode] = true;
-            }
         }
         setLanguageSelection(initialSelection);
     }, [allLanguages, data.targetLanguages]);
-    // Track last set targetLanguages to prevent unnecessary setData calls
-    const lastSetTargetLanguagesRef = useRef('');
-    // Update wizard data when language selection changes
+    const lastSetTargetLanguagesRef = useRef("");
     useEffect(() => {
         const selectedLanguages = Object.entries(languageSelection)
             .filter(([, isSelected]) => isSelected)
             .map(([code]) => code);
         const selectedLanguagesKey = JSON.stringify([...selectedLanguages].sort());
         const currentTargetLanguagesKey = JSON.stringify([...data.targetLanguages].sort());
-        // Only update if the selection has actually changed AND we haven't already set this value
-        if (selectedLanguagesKey === currentTargetLanguagesKey) {
-            // Selection matches current data, no update needed
+        if (selectedLanguagesKey === currentTargetLanguagesKey)
             return;
-        }
-        if (lastSetTargetLanguagesRef.current === selectedLanguagesKey) {
-            // We've already set this value, skip to prevent loops
+        if (lastSetTargetLanguagesRef.current === selectedLanguagesKey)
             return;
-        }
         lastSetTargetLanguagesRef.current = selectedLanguagesKey;
         const newData = {
             ...dataRef.current,
-            targetLanguages: selectedLanguages
+            targetLanguages: selectedLanguages,
         };
         setData(newData);
-        // Completion will be updated by the useEffect that watches data.targetLanguages.length
     }, [languageSelection, setData, data.targetLanguages]);
-    const handleProviderChange = (e) => {
-        const newProvider = e.target.value;
-        // Always create a new Map instance to ensure React detects the change
-        const newServiceCustomData = new Map();
-        if (data.serviceCustomData) {
-            data.serviceCustomData.forEach((value, key) => {
-                // Only preserve custom data if not switching away from OpenAI
-                if (key !== "OpenAI" || newProvider === "OpenAI") {
-                    newServiceCustomData.set(key, value);
-                }
-            });
-        }
-        const newData = {
-            ...data,
-            translationProvider: newProvider,
-            serviceCustomData: newServiceCustomData,
-            // Clear target languages when provider changes since language availability might change
-            targetLanguages: []
-        };
-        setData(newData);
-        // Clear UI selection too
-        setLanguageSelection({});
-        // Completion will be updated by the useEffect that watches data.translationProvider
-    };
     const handleLanguageToggle = (langCode) => {
-        setLanguageSelection(prev => ({ ...prev, [langCode]: !prev[langCode] }));
-    };
-    const handleSubitemsToggle = () => {
-        const newData = {
-            ...data,
-            includeSubitems: !data.includeSubitems
-        };
-        setData(newData);
+        setLanguageSelection((prev) => ({ ...prev, [langCode]: !prev[langCode] }));
     };
     const handleSelectAllLanguages = () => {
-        const allSelected = allLanguages.every(lang => languageSelection[lang.code]);
+        const allSelected = allLanguages.every((lang) => languageSelection[lang.code]);
         const newSelection = {};
-        if (allSelected) {
-            // Deselect all
-            allLanguages.forEach(lang => {
-                newSelection[lang.code] = false;
-            });
-        }
-        else {
-            // Select all
-            allLanguages.forEach(lang => {
-                newSelection[lang.code] = true;
-            });
-        }
+        allLanguages.forEach((lang) => {
+            newSelection[lang.code] = !allSelected;
+        });
         setLanguageSelection(newSelection);
     };
     const areAllLanguagesSelected = useMemo(() => {
         if (allLanguages.length === 0)
             return false;
-        return allLanguages.every(lang => languageSelection[lang.code]);
+        return allLanguages.every((lang) => languageSelection[lang.code]);
     }, [allLanguages, languageSelection]);
     const areSomeLanguagesSelected = useMemo(() => {
-        return allLanguages.some(lang => languageSelection[lang.code]);
+        return allLanguages.some((lang) => languageSelection[lang.code]);
     }, [allLanguages, languageSelection]);
-    // Compute checkbox state for prompt customization
-    const isPromptCustomizationEnabled = useMemo(() => {
-        if (data.translationProvider !== "OpenAI") {
-            return false;
-        }
-        const serviceData = data.serviceCustomData?.get("OpenAI");
-        return serviceData?.enableCustomPrompt === true;
-    }, [data.translationProvider, data.serviceCustomData]);
-    return (_jsx("div", { className: "p-6 space-y-6 h-full flex flex-col", "data-testid": "service-language-selection-step", children: _jsxs("div", { className: "space-y-6 flex-1", 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: "Translation Provider" }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mb-3", children: "Choose how to translate your content. \"Create Versions\" will create new language versions without automatic translation." }), _jsxs("select", { value: data.translationProvider || "", onChange: handleProviderChange, className: "block w-full px-3 py-2 border border-[var(--color-gray-3)] rounded-md bg-[var(--color-gray-5)] text-[var(--color-dark)] text-sm focus:outline-none focus:ring-2 focus:ring-[#9650fb] focus:border-[#9650fb] transition-colors", "data-testid": "translation-provider-select", children: [_jsx("option", { value: "", disabled: true, children: "Select a provider..." }), data.translationProviders.map((provider) => (_jsx("option", { value: provider.name, children: provider.displayName || provider.name }, provider.name)))] })] }), multiItemEnabled && (_jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: data.includeSubitems, onChange: handleSubitemsToggle, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "include-subitems-checkbox" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)] font-medium", children: "Include subitems" })] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-1.5 ml-6", children: "Also translate any child components and nested content within this item." })] })), data.translationProvider === "OpenAI" && (_jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: isPromptCustomizationEnabled, onChange: (e) => {
-                                        const isChecked = e.target.checked;
-                                        // Always create a new Map instance to ensure React detects the change
-                                        const newServiceCustomData = new Map();
-                                        if (data.serviceCustomData) {
-                                            data.serviceCustomData.forEach((value, key) => {
-                                                newServiceCustomData.set(key, value);
-                                            });
-                                        }
-                                        if (isChecked) {
-                                            newServiceCustomData.set("OpenAI", {
-                                                enableCustomPrompt: true,
-                                                customPrompt: "",
-                                                promptCustomizationType: "extend",
-                                            });
-                                        }
-                                        else {
-                                            // Remove the service data when unchecked
-                                            newServiceCustomData.delete("OpenAI");
+    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) => {
+                                        if (input) {
+                                            input.indeterminate =
+                                                areSomeLanguagesSelected && !areAllLanguagesSelected;
                                         }
-                                        const newData = {
-                                            ...data,
-                                            serviceCustomData: newServiceCustomData
-                                        };
-                                        setData(newData);
-                                    }, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "enable-custom-prompt-checkbox" }), _jsx("span", { className: "ml-2 text-sm text-[var(--color-dark)] font-medium", children: "Customize translation prompt" })] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mt-1.5 ml-6", children: "Enable advanced prompt customization for the translation service." })] })), _jsxs("div", { className: "bg-background rounded-lg border border-[var(--color-gray-3)] p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("h3", { className: "text-sm font-medium text-[var(--color-dark)]", children: "Target Languages" }), allLanguages.length > 1 && (_jsxs("label", { className: "flex items-center cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: areAllLanguagesSelected, ref: (input) => {
-                                                if (input) {
-                                                    input.indeterminate = areSomeLanguagesSelected && !areAllLanguagesSelected;
-                                                }
-                                            }, onChange: handleSelectAllLanguages, className: "h-4 w-4 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": "select-all-languages-checkbox" }), _jsx("span", { className: "ml-2 text-xs text-[var(--color-gray-2)]", children: "Select All" })] }))] }), _jsx("p", { className: "text-xs text-[var(--color-gray-2)] mb-3", children: "Select the languages you want to translate this content into." }), _jsx("div", { className: "border border-[var(--color-gray-3)] rounded-lg min-h-[200px] max-h-64 overflow-y-auto bg-[var(--color-gray-5)]", children: data.translationProviders.length === 0 || allLanguages.length === 0 ? (
-                            // Loading skeleton
-                            _jsx("div", { className: "p-3 space-y-2", children: [...Array(4)].map((_, i) => (_jsxs("div", { className: "flex items-center animate-pulse", children: [_jsx("div", { className: "h-4 w-4 bg-[var(--color-gray-3)] rounded" }), _jsx("div", { className: "ml-2 h-4 bg-[var(--color-gray-3)] rounded w-32" }), _jsx("div", { className: "ml-auto h-4 bg-[var(--color-gray-3)] rounded w-16" })] }, i))) })) : (_jsx("div", { className: "p-3 grid grid-cols-1 gap-2", children: allLanguages.map((lang) => {
-                                    const statusLabel = lang.translationStatus?.status || "Not started";
-                                    return (_jsxs("label", { className: "flex items-start gap-2 py-1.5 px-2 rounded-md hover:bg-[var(--color-gray-4)] transition-colors cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: languageSelection[lang.code] || false, onChange: () => handleLanguageToggle(lang.code), className: "mt-0.5 h-4 w-4 shrink-0 text-[#9650fb] focus:ring-[#9650fb] border-[var(--color-gray-3)] rounded accent-[#9650fb]", "data-testid": `language-checkbox-${lang.code}` }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "text-sm text-[var(--color-dark)]", children: [lang.name, " (", lang.code, ")"] }), _jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[var(--color-gray-2)]", children: [lang.sourceLanguage && _jsxs("span", { children: ["from: ", lang.sourceLanguage] }), !lang.hasVersions && (_jsx("span", { className: "text-2xs text-orange-600 bg-orange-100 px-2 py-1 rounded-full font-medium", children: "No versions" })), lang.hasVersions && (_jsx("span", { title: lang.translationStatus?.message, className: `text-2xs px-2 py-1 rounded-full font-medium ${getTranslationStatusBadgeClass(statusLabel)}`, "data-testid": `translation-status-badge-${lang.code}`, children: statusLabel }))] })] })] }, lang.code));
-                                }) })) })] })] }) }));
+                                    }, 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) => {
+                            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
+                                            ? "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));
+                        }) })) })] }) }));
 }

package/dist/steps/WizardStepShell.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+type WizardStepShellProps = {
+    /** Right-aligned content above the body (badges, counts, actions). */
+    meta?: ReactNode;
+    /** When true, the body section flex-grows and content can overflow internally. */
+    fillHeight?: boolean;
+    testId?: string;
+    children: ReactNode;
+};
+/**
+ * Body-only scaffold for translation-wizard steps. Step title/description
+ * 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 {};
+//# sourceMappingURL=WizardStepShell.d.ts.map

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

@@ -0,0 +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"}

package/dist/steps/WizardStepShell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Body-only scaffold for translation-wizard steps. Step title/description
+ * live in the wizard's stepper bar, so this just gives a consistent
+ * padding + optional meta row + flex/scroll behavior for the content.
+ */
+export function WizardStepShell({ meta, fillHeight = false, testId, children, }) {
+    return (_jsxs("div", { className: "flex h-full flex-col gap-4 p-6", "data-testid": testId, children: [meta && (_jsx("div", { className: "flex items-center justify-end gap-2", children: meta })), _jsx("div", { className: fillHeight
+                    ? "flex min-h-0 flex-1 flex-col gap-4"
+                    : "flex flex-col gap-5", children: children })] }));
+}

package/dist/steps/types.d.ts

@@ -1,4 +1,4 @@
-import { FullItem, ItemDescriptor, EditContextType } from "@parhelia/core";
+import { FullItem, ItemDescriptor, EditContextType, ItemWithSubtree, SubitemCountState } from "@parhelia/core";
 export type TranslationProviderInfo = {
     name: string;
     displayName: string;
@@ -13,6 +13,7 @@ export type TranslationStatus = {
     hash?: string;
     message?: string;
     batchId?: string;
+    totalCost?: number | null;
 };
 export type LanguageData = {
     name: string;
@@ -25,6 +26,8 @@ export type TranslationDialogResult = {
     targetLanguages: string[];
     includeSubitems: boolean;
     discoveredItems: FullItem[];
+    selectionTreeItems?: ItemWithSubtree[];
+    batchName?: string;
     metadata?: any;
     batchId?: string;
 };
@@ -38,8 +41,21 @@ export type TranslationWizardData = {
     items: FullItem[];
     targetLanguages: string[];
     translationProvider: string;
+    /** Legacy flag: true when ANY item in selectionTreeItems has includeSubitems on. */
     includeSubitems: boolean;
+    /** Flattened list of items to translate (root selections + expanded subtrees). */
     discoveredItems: FullItem[];
+    /** User's tree selection with per-item subitem flags. Authoritative for the UI. */
+    selectionTreeItems?: ItemWithSubtree[];
+    /**
+     * Live subitem counts streamed from the backend, keyed by item id.
+     * Populated by ItemSelectionTree so later steps (e.g. the Start
+     * Translation button) can show a running total with a "+" while
+     * streams are still in flight.
+     */
+    subitemCounts?: Record<string, SubitemCountState>;
+    /** User-editable batch name (AI-suggested initially). */
+    batchName?: string;
     languageData: Map<string, LanguageData>;
     translationProviders: TranslationProviderInfo[];
     itemMetadata: Map<string, Map<string, string>>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/steps/types.ts"],"names":[],"mappings":"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"}

package/dist/translation-center/TranslationBatches.d.ts

@@ -0,0 +1,2 @@
+export declare function TranslationBatches(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TranslationBatches.d.ts.map

package/dist/translation-center/TranslationBatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationBatches.d.ts","sourceRoot":"","sources":["../../src/translation-center/TranslationBatches.tsx"],"names":[],"mappings":"AAwPA,wBAAgB,kBAAkB,4CA6uCjC"}