@parhelia/localization 0.4.12796 → 0.4.12800

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

@@ -1 +1 @@
-{"version":3,"file":"TranslationBatches.d.ts","sourceRoot":"","sources":["../../src/translation-center/TranslationBatches.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyV1B,wBAAgB,kBAAkB,sBAwnCjC;AAED,eAAO,MAAM,oCAAoC,8BAA8B,CAAC;AAEhF,wBAAgB,8BAA8B,sBA0Y7C"}
+{"version":3,"file":"TranslationBatches.d.ts","sourceRoot":"","sources":["../../src/translation-center/TranslationBatches.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAyV1B,wBAAgB,kBAAkB,sBAspCjC;AAED,eAAO,MAAM,oCAAoC,8BAA8B,CAAC;AAEhF,wBAAgB,8BAA8B,sBA0Y7C"}

package/dist/translation-center/TranslationBatches.js

@@ -798,8 +798,13 @@ export function TranslationBatches() {
                                             const anyError = errorJobs > 0;
                                             const anyInProgress = isActiveBatchStatus(info?.status);
                                             const anyAborted = info?.status === "Aborted";
+                                            const jobs = batchJobs[b.id];
+                                            const statusCounts = computeBatchStatusCounts(info, jobs);
+                                            const processedJobs = statusCounts.succeeded +
+                                                statusCounts.failed +
+                                                statusCounts.aborted;
                                             const metaParts = [];
-                                            metaParts.push(_jsxs("span", { className: "text-neutral-grey-100", children: [totalJobs, " translation", totalJobs !== 1 ? "s" : ""] }, "trans"));
+                                            metaParts.push(_jsx("span", { className: "text-neutral-grey-100", children: info?.status === "Pending" ? (_jsxs(_Fragment, { children: [totalJobs, " translation", totalJobs !== 1 ? "s" : "", " queued"] })) : anyInProgress ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "tabular-nums", children: [processedJobs, " of ", totalJobs] }), " ", "translation", totalJobs !== 1 ? "s" : "", " done"] })) : (_jsxs(_Fragment, { children: [totalJobs, " translation", totalJobs !== 1 ? "s" : ""] })) }, "trans"));
                                             if (typeof itemsCount === "number") {
                                                 metaParts.push(_jsxs("span", { children: [itemsCount, " item", itemsCount !== 1 ? "s" : ""] }, "items"));
                                             }
@@ -850,8 +855,6 @@ export function TranslationBatches() {
                                                     `Translation Batch · ${formattedBatchDate}`);
                                             })();
                                             const isExpanded = expandedBatchId === b.id;
-                                            const jobs = batchJobs[b.id];
-                                            const statusCounts = computeBatchStatusCounts(info, jobs);
                                             const isLoadingThis = loadingJobs.has(b.id);
                                             const canRetry = anyError;
                                             const canAbort = isActiveBatchStatus(info?.status);
@@ -880,19 +883,19 @@ export function TranslationBatches() {
                                                             if (!canAbort)
                                                                 return;
                                                             handleAbortBatch(b.id);
-                                                        }, icon: _jsx(AbortIcon, { className: `h-3.5 w-3.5 ${isAborting ? "animate-spin" : ""}`, strokeWidth: 1 }), label: "Abort translation batch", disabled: !canAbort || isAborting }))] }));
+                                                        }, icon: isAborting ? (_jsx(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin", strokeWidth: 1 })) : (_jsx(AbortIcon, { className: "h-3.5 w-3.5", strokeWidth: 1 })), label: "Abort translation batch", disabled: !canAbort || isAborting }))] }));
                                             return (_jsxs("div", { "data-testid": `batch-row-${b.id}`, "data-batch-status": testStatus, children: [_jsx("div", { role: "button", tabIndex: 0, className: `group w-full cursor-pointer py-3 text-left transition-colors hover:bg-neutral-grey-5 ${isCompactBatches ? "px-2.5" : "px-4"}`, onClick: () => toggleBatch(b.id), onKeyDown: (e) => {
                                                             if (e.key === "Enter" || e.key === " ") {
                                                                 e.preventDefault();
                                                                 toggleBatch(b.id);
                                                             }
-                                                        }, children: _jsxs("div", { className: `flex items-start ${isCompactBatches ? "gap-2" : "gap-4"}`, children: [_jsx("div", { className: `shrink-0 text-neutral-grey-100 transition-transform ${isCompactBatches ? "mt-0.5" : "mt-3"} ${isExpanded ? "rotate-180" : ""}`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) }), !isCompactBatches && totalJobs > 0 && (_jsx(BatchProgressIndicator, { counts: statusCounts, testId: `batch-progress-${b.id}` })), _jsxs("div", { className: `flex min-w-0 flex-1 ${isCompactBatches
+                                                        }, children: _jsxs("div", { className: `flex items-start ${isCompactBatches ? "gap-2" : "gap-4"}`, children: [_jsx("div", { className: `shrink-0 text-neutral-grey-100 transition-transform ${isCompactBatches ? "mt-0.5" : "mt-3"} ${isExpanded ? "rotate-180" : ""}`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) }), !isCompactBatches && totalJobs > 0 && (_jsx(BatchProgressIndicator, { counts: statusCounts, status: info?.status, testId: `batch-progress-${b.id}` })), _jsxs("div", { className: `flex min-w-0 flex-1 ${isCompactBatches
                                                                         ? "flex-col gap-2"
                                                                         : "items-center justify-between gap-3"}`, children: [_jsxs("div", { className: "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)]", children: [_jsx("span", { className: `min-w-0 text-[14px] font-medium text-neutral-grey-100 ${isCompactBatches
                                                                                         ? "whitespace-normal break-words leading-5"
                                                                                         : "truncate"}`, style: isCompactBatches
                                                                                         ? { overflowWrap: "anywhere" }
-                                                                                        : undefined, title: formattedBatchDate, children: batchDisplayName }), _jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: desktopMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, i))) }), mobileFooterMetaParts.length > 0 && (_jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: mobileFooterMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, `footer-${i}`))) }))] }), isCompactBatches && (_jsxs("div", { className: "mt-2 flex min-w-0 items-center gap-2", children: [totalJobs > 0 && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(BatchProgressIndicator, { counts: statusCounts, testId: `batch-progress-${b.id}`, variant: "bar" }) })), hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: batchActions }))] })), !isCompactBatches && hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: batchActions }))] })] }) }), isExpanded && (_jsxs("div", { className: "border-t border-border-default/50", children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, currentLanguage: editContext?.item?.language, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, isMobile: isMobile, onToggleItem: toggleItem, onOpenItem: openItemInEditor, onAbortJob: handleAbortJob, onRetryJobs: handleRetryJobs })] }))] }, b.id));
+                                                                                        : undefined, title: formattedBatchDate, children: batchDisplayName }), _jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: desktopMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, i))) }), mobileFooterMetaParts.length > 0 && (_jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: mobileFooterMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, `footer-${i}`))) }))] }), isCompactBatches && (_jsxs("div", { className: "mt-2 flex min-w-0 items-center gap-2", children: [totalJobs > 0 && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(BatchProgressIndicator, { counts: statusCounts, status: info?.status, testId: `batch-progress-${b.id}`, variant: "bar" }) })), hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: batchActions }))] })), !isCompactBatches && hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: batchActions }))] })] }) }), isExpanded && (_jsxs("div", { className: "border-t border-border-default/50", children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, currentLanguage: editContext?.item?.language, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, isMobile: isMobile, onToggleItem: toggleItem, onOpenItem: openItemInEditor, onAbortJob: handleAbortJob, onRetryJobs: handleRetryJobs })] }))] }, b.id));
                                         }) })] }, dateGroup.label))), hasMore && (_jsx("div", { className: "flex justify-center pt-6", children: _jsx(Button, { variant: "outline", size: "sm", onClick: loadMore, disabled: isLoadingMore, children: isLoadingMore ? (_jsxs(_Fragment, { children: [_jsx(LoaderIcon, { className: "h-4 w-4 animate-spin text-highlight-100" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDownIcon, { className: "h-4 w-4" }), "Load More Batches"] })) }) }))] })) }) })] }));
 }
 export const TRANSLATION_BATCH_FILTERS_SIDEBAR_ID = "translation-batch-filters";
@@ -1206,22 +1209,66 @@ function computeBatchStatusCounts(info, jobs) {
     const pending = info?.status === "Aborted" ? 0 : remaining;
     return { total, succeeded, failed, aborted, running: 0, pending };
 }
-function BatchProgressIndicator({ counts, testId, variant = "circle", }) {
-    const { total, succeeded, failed, aborted, running } = counts;
+// One outcome per batch, shared by the ring, the bar and the status badge so
+// the three never disagree about what colour/state a batch is in.
+function resolveBatchOutcome(status, counts) {
+    const { total, succeeded, failed } = counts;
+    if (isActiveBatchStatus(status))
+        return "active";
+    if (total > 0 && succeeded === total)
+        return "succeeded";
+    if (total > 0 && failed === total)
+        return "failed";
+    if (status === "Aborted")
+        return "aborted";
+    return "mixed";
+}
+function BatchProgressIndicator({ counts, status, testId, variant = "circle", }) {
+    const { total, succeeded, failed, aborted, running, pending } = counts;
+    const outcome = resolveBatchOutcome(status, counts);
+    const isActive = outcome === "active";
+    const processed = succeeded + failed + aborted;
+    // SVG filter ids are document-global; derive a safe one per instance.
+    const glowId = `batch-glow-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    // While the batch is running the number is "how far along are we", so it
+    // counts every finished job. Once terminal it is the success rate.
+    const percentBase = isActive ? processed : succeeded;
     const percent = total > 0
-        ? Math.max(0, Math.min(100, Math.round((succeeded / total) * 100)))
+        ? Math.max(0, Math.min(100, Math.round((percentBase / total) * 100)))
         : 0;
-    const allSucceeded = total > 0 && succeeded === total;
-    // Colour-carrying segments in tooltip order; pending stays in the track.
+    // Colour-carrying segments in tooltip order; queued work stays in the
+    // track. "Still running" is conveyed by the soft halo around the ring (and
+    // bar) rather than by a segment, so the ring stays calm and readable.
     const segments = [
         { key: "succeeded", count: succeeded, color: BATCH_SEGMENT_COLORS.succeeded },
         { key: "failed", count: failed, color: BATCH_SEGMENT_COLORS.failed },
         { key: "aborted", count: aborted, color: BATCH_SEGMENT_COLORS.aborted },
         { key: "running", count: running, color: BATCH_SEGMENT_COLORS.running },
     ].filter((seg) => seg.count > 0);
-    // The centre number is the success rate, so it always reads in the success
-    // colour; failed/aborted/running are conveyed by the ring segments instead.
-    const textToneClass = "text-feedback-green";
+    // Breathing halo shown only while the batch is active.
+    const glowShadow = "0 0 6px 1px color-mix(in srgb, var(--color-feedback-green) 45%, transparent)";
+    // The centre glyph/number follows the batch outcome so it never contradicts
+    // the ring: green only when everything succeeded, red only when everything
+    // failed, orange when aborted, neutral for running and mixed results.
+    const centreFill = outcome === "succeeded"
+        ? "var(--color-feedback-green-light)"
+        : outcome === "failed"
+            ? "var(--color-feedback-red-light)"
+            : outcome === "aborted"
+                ? "var(--color-feedback-orange-light)"
+                : null;
+    const renderCentreGlyph = (sizeClass) => {
+        if (outcome === "succeeded") {
+            return (_jsx(CheckIcon, { className: `text-feedback-green ${sizeClass}`, style: { strokeWidth: 3 }, "aria-hidden": "true" }));
+        }
+        if (outcome === "failed") {
+            return (_jsx(AlertCircleIcon, { className: `text-feedback-red ${sizeClass}`, style: { strokeWidth: 2.5 }, "aria-hidden": "true" }));
+        }
+        if (outcome === "aborted") {
+            return (_jsx(AbortIcon, { className: `text-feedback-orange ${sizeClass}`, style: { strokeWidth: 2.5 }, "aria-hidden": "true" }));
+        }
+        return null;
+    };
     const parts = [`${succeeded}/${total} succeeded`];
     if (failed > 0)
         parts.push(`${failed} failed`);
@@ -1229,20 +1276,24 @@ function BatchProgressIndicator({ counts, testId, variant = "circle", }) {
         parts.push(`${aborted} aborted`);
     if (running > 0)
         parts.push(`${running} running`);
+    if (isActive && pending > 0)
+        parts.push(`${pending} queued`);
     const label = parts.join(", ");
     if (variant === "bar") {
-        return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", "aria-label": label, "data-testid": testId, children: [_jsx("div", { className: "bg-neutral-grey-15 flex h-1.5 min-w-0 flex-1 overflow-hidden rounded-full", children: total > 0 &&
-                                    segments.map((seg) => (_jsx("div", { className: "h-full", style: {
-                                            width: `${(seg.count / total) * 100}%`,
-                                            backgroundColor: seg.color,
-                                        } }, seg.key))) }), allSucceeded ? (_jsx(CheckIcon, { className: "text-feedback-green h-3 w-3 shrink-0", style: { strokeWidth: 3 } })) : (_jsxs("span", { className: `shrink-0 text-[11px] leading-none font-medium tabular-nums ${textToneClass}`, children: [percent, "%"] }))] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
+        const glyph = renderCentreGlyph("h-3 w-3 shrink-0");
+        return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", "aria-label": label, "data-testid": testId, "data-outcome": outcome, children: [_jsxs("div", { className: "relative min-w-0 flex-1", children: [isActive && (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-full animate-pulse", style: { boxShadow: glowShadow } })), _jsx("div", { className: "bg-neutral-grey-15 flex h-1.5 min-w-0 overflow-hidden rounded-full", children: total > 0 &&
+                                            segments.map((seg) => (_jsx("div", { className: "h-full", style: {
+                                                    width: `${(seg.count / total) * 100}%`,
+                                                    backgroundColor: seg.color,
+                                                } }, seg.key))) })] }), glyph ?? (_jsxs("span", { className: "shrink-0 text-[11px] leading-none font-medium tabular-nums text-neutral-grey-100", children: [percent, "%"] }))] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
     }
     const radius = 16;
     const strokeWidth = 3;
     const circumference = 2 * Math.PI * radius;
     const gap = segments.length > 1 ? circumference * 0.02 : 0;
     let segStart = 0;
-    return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full", "aria-label": label, "data-testid": testId, children: [_jsxs("svg", { className: "h-10 w-10 -rotate-90", viewBox: "0 0 40 40", children: [allSucceeded && (_jsx("circle", { cx: "20", cy: "20", r: radius - strokeWidth / 2, fill: "var(--color-feedback-green-light)" })), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--color-neutral-grey-15)", strokeWidth: strokeWidth }), total > 0 &&
+    const glyph = renderCentreGlyph("h-4 w-4");
+    return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full", "aria-label": label, "data-testid": testId, "data-outcome": outcome, children: [_jsxs("svg", { className: "h-10 w-10 -rotate-90 overflow-visible", viewBox: "0 0 40 40", children: [isActive && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("filter", { id: glowId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feGaussianBlur", { stdDeviation: "2" }) }) }), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--color-feedback-green)", strokeWidth: strokeWidth + 4, filter: `url(#${glowId})`, opacity: 0.35, children: _jsx("animate", { attributeName: "opacity", values: "0.15;0.5;0.15", dur: "1.8s", repeatCount: "indefinite" }) })] })), centreFill && (_jsx("circle", { cx: "20", cy: "20", r: radius - strokeWidth / 2, fill: centreFill })), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--color-neutral-grey-15)", strokeWidth: strokeWidth }), total > 0 &&
                                     segments.map((seg) => {
                                         const segLen = (seg.count / total) * circumference;
                                         const dash = Math.max(0, segLen - gap);
@@ -1252,7 +1303,7 @@ function BatchProgressIndicator({ counts, testId, variant = "circle", }) {
                                                 strokeDasharray: `${dash} ${circumference}`,
                                                 strokeDashoffset: dashOffset,
                                             } }, seg.key));
-                                    })] }), _jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: allSucceeded ? (_jsx(CheckIcon, { className: "text-feedback-green h-4 w-4", style: { strokeWidth: 3 } })) : (_jsxs("span", { className: `text-[10px] leading-none font-medium tabular-nums ${textToneClass}`, children: [percent, "%"] })) })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
+                                    })] }), _jsx("span", { className: "absolute inset-0 flex items-center justify-center", children: glyph ?? (_jsxs("span", { className: "text-[10px] leading-none font-medium tabular-nums text-neutral-grey-100", children: [percent, "%"] })) })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
 }
 function itemStatusDot(jobs) {
     const hasError = jobs.some((j) => j.status === "Error");
@@ -1269,7 +1320,44 @@ function itemStatusDot(jobs) {
         return { cls: "bg-feedback-orange", label: "Aborted" };
     return { cls: "bg-feedback-green/70", label: "Completed" };
 }
-function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isExpanded, batchStartedAtUtc, abortingJobIds, retryingKeys, singleLine = false, onToggle, onOpenItem, onAbortJob, onRetryJobs, }) {
+// Fallback one-row cap used until the first chip row has been measured.
+const COLLAPSED_CHIP_ROW_HEIGHT_PX = 28;
+function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isExpanded, batchStartedAtUtc, abortingJobIds, retryingKeys, onToggle, onOpenItem, onAbortJob, onRetryJobs, }) {
+    const chipAreaRef = React.useRef(null);
+    const [hiddenCount, setHiddenCount] = React.useState(0);
+    const [firstRowHeight, setFirstRowHeight] = React.useState(null);
+    // Chips always wrap so they can never run into the neighbouring column.
+    // When the item is collapsed only the first line is shown; count the chips
+    // that wrapped onto later lines so a "+N" chip can stand in for them.
+    React.useLayoutEffect(() => {
+        const el = chipAreaRef.current;
+        if (!el || isExpanded) {
+            setHiddenCount(0);
+            return;
+        }
+        const measure = () => {
+            const children = Array.from(el.children);
+            if (children.length === 0) {
+                setHiddenCount(0);
+                return;
+            }
+            const firstTop = children[0]?.offsetTop ?? 0;
+            let hidden = 0;
+            for (const child of children) {
+                if (child.offsetTop > firstTop)
+                    hidden += 1;
+            }
+            setHiddenCount(hidden);
+            setFirstRowHeight(children[0]?.offsetHeight ?? null);
+        };
+        measure();
+        let observer;
+        if (typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(measure);
+            observer.observe(el);
+        }
+        return () => observer?.disconnect();
+    }, [isExpanded, jobs.length]);
     if (jobs.length === 0)
         return null;
     const handleCellClick = (event) => {
@@ -1283,15 +1371,20 @@ function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isE
             onToggle();
         }
     };
-    return (_jsx("div", { role: "button", tabIndex: 0, className: `flex min-w-0 cursor-pointer items-start justify-start gap-1.5 ${singleLine
-            ? "flex-nowrap"
-            : isExpanded
-                ? "flex-wrap"
-                : "max-h-7 flex-wrap overflow-hidden"}`, "aria-label": `${jobs.length} target language${jobs.length !== 1 ? "s" : ""}`, "aria-expanded": isExpanded, onClick: handleCellClick, onKeyDown: handleCellKeyDown, children: jobs.map((job, idx) => {
-            const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
-            const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
-            return (_jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: _jsx(LanguageJobChip, { job: job, language: lang, provider: batchProvider, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage), isAborting: !!job.id && abortingJobIds.has(job.id), onAbort: () => onAbortJob(job), isRetrying: retryingKeys.has(retryKey), onRetry: () => onRetryJobs(batchId, batchProvider, [job], retryKey) }) }, `${job.id ?? idx}-${job.targetLanguage}`));
-        }) }));
+    return (_jsxs("div", { role: "button", tabIndex: 0, className: "flex cursor-pointer items-start gap-1.5", "aria-label": `${jobs.length} target language${jobs.length !== 1 ? "s" : ""}`, "aria-expanded": isExpanded, onClick: handleCellClick, onKeyDown: handleCellKeyDown, children: [_jsx("div", { ref: chipAreaRef, className: `flex flex-1 flex-wrap items-start gap-1.5 ${isExpanded ? "" : "overflow-hidden"}`, 
+                // The cap is the measured height of one chip row, applied inline so
+                // the clip does not depend on a Tailwind max-height utility being
+                // emitted for this file.
+                style: isExpanded
+                    ? undefined
+                    : { maxHeight: firstRowHeight ?? COLLAPSED_CHIP_ROW_HEIGHT_PX }, children: jobs.map((job, idx) => {
+                    const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
+                    const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
+                    return (_jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: _jsx(LanguageJobChip, { job: job, language: lang, provider: batchProvider, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage), isAborting: !!job.id && abortingJobIds.has(job.id), onAbort: () => onAbortJob(job), isRetrying: retryingKeys.has(retryKey), onRetry: () => onRetryJobs(batchId, batchProvider, [job], retryKey) }) }, `${job.id ?? idx}-${job.targetLanguage}`));
+                }) }), !isExpanded && hiddenCount > 0 && (_jsxs("button", { type: "button", className: "mt-px shrink-0 rounded border border-border-default bg-neutral-grey-5 badge-pad-sm text-[12px] leading-none tabular-nums text-neutral-grey-50 transition-colors hover:bg-neutral-grey-15 hover:text-neutral-grey-100", "aria-label": `Show ${hiddenCount} more language${hiddenCount !== 1 ? "s" : ""}`, title: `${hiddenCount} more language${hiddenCount !== 1 ? "s" : ""}`, onClick: (event) => {
+                    event.stopPropagation();
+                    onToggle();
+                }, children: ["+", hiddenCount] }))] }));
 }
 function CustomPromptPanel({ prompts }) {
     const [openProvider, setOpenProvider] = React.useState(null);
@@ -1431,7 +1524,10 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             }
             if (stackLanguageChips) {
                 const normalMinWidth = normalTableMinWidthRef.current;
-                if (normalMinWidth && availableWidth >= normalMinWidth) {
+                // Unstack once the columns layout fits again. Before that layout has
+                // ever been measured, fall back to the threshold that forced stacking
+                // so a narrow-then-wide resize does not stay stacked forever.
+                if (availableWidth >= (normalMinWidth ?? 640)) {
                     setStackLanguageChips(false);
                 }
                 return;
@@ -1476,7 +1572,7 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             byItem.set(key, []);
         byItem.get(key).push(job);
     }
-    return (_jsx("div", { ref: itemTableContainerRef, className: "w-full overflow-hidden", "data-language-layout": stackLanguageChips ? "stacked" : "columns", children: _jsxs("table", { ref: itemTableRef, className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [!stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "px-3 pt-3 pb-1 md:px-4" })), _jsx("th", { scope: "col", className: `pt-3 pb-1 text-left align-top text-[11px] font-medium text-neutral-grey-50 ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Pages / Items" })] }) }), !stackLanguageChips && (_jsx("th", { scope: "col", className: "pt-3 pb-1 pr-2 text-left align-top text-[11px] font-medium text-neutral-grey-50", children: "Languages" })), !stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "pt-3 pr-3 pb-1 md:pr-4" }))] }) }), _jsx("tbody", { children: Array.from(byItem.entries()).map(([itemId, itemJobs], itemIndex) => {
+    return (_jsx("div", { ref: itemTableContainerRef, className: "w-full overflow-hidden", "data-language-layout": stackLanguageChips ? "stacked" : "columns", children: _jsxs("table", { ref: itemTableRef, className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [!stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "px-3 pt-3 pb-1 md:px-4" })), _jsx("th", { scope: "col", className: `pt-3 pb-1 text-left align-top text-[11px] font-medium text-neutral-grey-50 ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Pages / Items" })] }) }), !stackLanguageChips && (_jsx("th", { scope: "col", className: "pt-3 pb-1 pr-2 text-left align-top text-[11px] font-medium text-neutral-grey-50", children: "Languages" })), !stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "w-12 pt-3 pr-3 pb-1 md:pr-4" }))] }) }), _jsx("tbody", { children: Array.from(byItem.entries()).map(([itemId, itemJobs], itemIndex) => {
                         const isItemExpanded = expandedItems.has(itemId);
                         const itemAnyInProgress = itemJobs.some((j) => j.status === "In Progress");
                         const itemAnyPending = itemJobs.some((j) => j.status === "Pending");
@@ -1496,7 +1592,7 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
                             .filter((language) => Boolean(language));
                         const normalizedCurrentLanguage = normalizeLanguageCode(currentLanguage);
                         const rowOpenLanguage = rowLanguages.find((language) => normalizeLanguageCode(language) === normalizedCurrentLanguage) ?? rowLanguages[0];
-                        const languageChips = (_jsx(InlineLanguageJobChips, { batchId: batchId, batchProvider: batchProvider, jobs: itemJobs, languageMap: languageMap, isExpanded: isItemExpanded, batchStartedAtUtc: batchStartedAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, singleLine: !stackLanguageChips, onToggle: () => onToggleItem(itemId), onOpenItem: onOpenItem, onAbortJob: onAbortJob, onRetryJobs: onRetryJobs }));
+                        const languageChips = (_jsx(InlineLanguageJobChips, { batchId: batchId, batchProvider: batchProvider, jobs: itemJobs, languageMap: languageMap, isExpanded: isItemExpanded, batchStartedAtUtc: batchStartedAtUtc, abortingJobIds: abortingJobIds, retryingKeys: retryingKeys, onToggle: () => onToggleItem(itemId), onOpenItem: onOpenItem, onAbortJob: onAbortJob, onRetryJobs: onRetryJobs }));
                         const showRetryAction = itemErrorJobs.length > 0;
                         const retryAction = showRetryAction ? (_jsx("div", { className: "flex shrink-0 items-center justify-end", children: _jsx(SimpleIconButton, { onClick: (event) => {
                                     event.stopPropagation();
@@ -1514,7 +1610,7 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
                                     e.preventDefault();
                                     void onOpenItem(itemId, rowOpenLanguage);
                                 }
-                            }, children: [!stackLanguageChips && (_jsx("td", { "aria-hidden": "true", className: "px-3 py-2 md:px-4" })), _jsx("td", { className: `py-2 align-top ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: itemContent }), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-2 align-top", children: languageChips })), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-3 align-top md:pr-4", children: retryAction }))] }, itemId));
+                            }, children: [!stackLanguageChips && (_jsx("td", { "aria-hidden": "true", className: "px-3 py-2 md:px-4" })), _jsx("td", { className: `py-2 align-top ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: itemContent }), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-2 align-top", children: languageChips })), !stackLanguageChips && (_jsx("td", { className: "w-12 py-2 pr-3 align-top whitespace-nowrap md:pr-4", children: retryAction }))] }, itemId));
                     }) })] }) }));
 }
 function LanguageJobChip({ job, language, provider, batchStartedAtUtc, onOpen, isAborting = false, onAbort, isRetrying = false, onRetry, }) {
@@ -1627,7 +1723,7 @@ function LanguageJobChip({ job, language, provider, batchStartedAtUtc, onOpen, i
                                     e.stopPropagation();
                                     void onAbort?.();
                                     setOpen(false);
-                                }, className: "gap-1.5 text-feedback-orange hover:text-feedback-orange", children: [_jsx(AbortIcon, { className: `h-3.5 w-3.5 ${isAborting ? "animate-spin" : ""}` }), "Abort"] })), jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
+                                }, className: "gap-1.5 text-feedback-orange hover:text-feedback-orange", children: [isAborting ? (_jsx(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsx(AbortIcon, { className: "h-3.5 w-3.5" })), "Abort"] })), jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
                                     e.stopPropagation();
                                     void onRetry();
                                     setOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parhelia/localization",
-  "version": "0.4.12796",
+  "version": "0.4.12800",
   "type": "module",
   "publishConfig": {
     "access": "public"