@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/translation-manager/translation-manager.js

@@ -0,0 +1,719 @@
+import { useActionRunner, useDirection, useFormatter, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Card, CardContent, CardHeader } from "../ui/card.js";
+import { Input } from "../ui/input.js";
+import { Textarea } from "../ui/textarea.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { TranslationManagerController, clientErrorNotification } from "@alfakit/core";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, HistoryIcon, LanguagesIcon, SearchIcon, SparklesIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+//#region src/components/translation-manager/translation-manager.tsx
+const SELECT = "border-input focus-visible:border-ring focus-visible:ring-ring/50 h-9 min-w-0 rounded-md border bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:ring-[3px]";
+const cellKey = (ref) => `${ref.row}\u0000${ref.locale}`;
+/**
+* The translation editor of alfasix/alfakit-translation-manager: keys by locale with search,
+* filters, inline editing (plural forms, right-to-left inputs), keyboard navigation, AI
+* suggestion review and history. Everything is computed and saved by the server.
+*/
+function TranslationManager({ component }) {
+	return component ? /* @__PURE__ */ jsx(TranslationManagerView, { schema: component }, component.actionComponent) : null;
+}
+function TranslationManagerView({ schema }) {
+	const runner = useActionRunner();
+	const page = usePageActionContext();
+	const t = useT();
+	const direction = useDirection();
+	const formatter = useFormatter();
+	const labelId = useId();
+	const hintId = useId();
+	const environment = () => ({
+		runner,
+		token: page.token,
+		t,
+		notify: (notifications) => notifications.forEach((notification) => showToast(notification)),
+		error: (message) => showToast(clientErrorNotification("translation-manager", message))
+	});
+	const [controller] = useState(() => new TranslationManagerController(schema, environment()));
+	useEffect(() => {
+		controller.setEnvironment(environment());
+	});
+	const first = useRef(true);
+	useEffect(() => {
+		if (first.current) {
+			first.current = false;
+			return;
+		}
+		controller.setSchema(schema);
+	}, [controller, schema]);
+	useEffect(() => () => controller.dispose(), [controller]);
+	const state = useStore(controller.store);
+	const cells = useRef(/* @__PURE__ */ new Map());
+	const editor = useRef(null);
+	const locales = controller.visibleLocales();
+	const active = state.active && state.rows.some((row) => row.id === state.active?.row) ? state.active : state.rows[0] && locales[0] ? {
+		row: state.rows[0].id,
+		locale: locales[0].code
+	} : null;
+	const focusCell = (ref) => {
+		if (!ref) return;
+		controller.focus(ref);
+		requestAnimationFrame(() => cells.current.get(cellKey(ref))?.focus());
+	};
+	useEffect(() => {
+		if (state.editing) requestAnimationFrame(() => editor.current?.focus());
+	}, [state.editing]);
+	const onCellKeyDown = (ref) => (event) => {
+		if (event.target !== event.currentTarget) return;
+		const result = controller.handleCellKey(ref, event, direction);
+		if (result.handled) {
+			event.preventDefault();
+			if (!controller.state.editing) focusCell(result.focus);
+		}
+	};
+	const onEditorKeyDown = (event) => {
+		if (event.key === "Escape" || event.key === "Enter" && !event.shiftKey || event.key === "Tab") {
+			event.preventDefault();
+			controller.handleEditorKey({
+				key: event.key,
+				shiftKey: event.shiftKey,
+				isComposing: event.nativeEvent.isComposing
+			}).then((result) => focusCell(result.focus));
+		}
+	};
+	const range = controller.range();
+	const suggestionLocales = controller.suggestionLocales();
+	const activeRow = active ? controller.row(active.row) : void 0;
+	const activeLocale = active ? controller.locale(active.locale) : void 0;
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "gap-4 py-4",
+		"data-slot": "translation-manager",
+		children: [/* @__PURE__ */ jsxs(CardHeader, {
+			className: "flex flex-col gap-4 px-5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: "sr-only",
+					children: t("translation-manager.label", {}, "Translations")
+				}),
+				/* @__PURE__ */ jsx("ul", {
+					className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6",
+					"data-slot": "translation-progress",
+					children: schema.locales.map((locale) => {
+						const progress = state.progress[locale.code];
+						const percent = progress ? progress.percent : 0;
+						return /* @__PURE__ */ jsxs("li", {
+							className: "flex min-w-0 flex-col gap-1 rounded-md border px-3 py-2",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-between gap-2 text-sm",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "truncate font-medium",
+										lang: locale.code,
+										children: locale.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground font-mono text-xs",
+										children: locale.code
+									})]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									role: "progressbar",
+									"aria-valuemin": 0,
+									"aria-valuemax": 100,
+									"aria-valuenow": Math.round(percent * 100),
+									"aria-label": t("translation-manager.progress_label", {
+										locale: locale.label,
+										translated: progress?.translated ?? 0,
+										total: progress?.total ?? 0
+									}, ":locale: :translated of :total translated"),
+									className: "bg-muted h-1.5 overflow-hidden rounded-full",
+									children: /* @__PURE__ */ jsx("div", {
+										className: "bg-primary h-full rounded-full transition-[width]",
+										style: { width: `${percent * 100}%` }
+									})
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-xs",
+									children: t("translation-manager.progress", { percent: formatter.percent(percent) }, ":percent translated")
+								})
+							]
+						}, locale.code);
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					"data-slot": "translation-toolbar",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative min-w-48 flex-1",
+							children: [/* @__PURE__ */ jsx(SearchIcon, {
+								className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ jsx(Input, {
+								type: "search",
+								value: state.search,
+								onChange: (event) => controller.setSearch(event.target.value),
+								placeholder: t("translation-manager.search", {}, "Search keys and texts…"),
+								"aria-label": t("translation-manager.search_label", {}, "Search translations"),
+								className: "ps-8"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 text-sm",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("translation-manager.filter_label", {}, "Show")
+							}), /* @__PURE__ */ jsx("select", {
+								className: SELECT,
+								value: state.filter,
+								onChange: (event) => controller.setFilter(event.target.value),
+								children: schema.filters.map((filter) => /* @__PURE__ */ jsx("option", {
+									value: filter,
+									children: t(`translation-manager.filters.${filter}`, {}, filter)
+								}, filter))
+							})]
+						}),
+						/* @__PURE__ */ jsxs("label", {
+							className: "flex items-center gap-2 text-sm",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("translation-manager.group_label", {}, "Group")
+							}), /* @__PURE__ */ jsxs("select", {
+								className: SELECT,
+								value: state.group,
+								onChange: (event) => controller.setGroup(event.target.value),
+								children: [/* @__PURE__ */ jsx("option", {
+									value: "",
+									children: t("translation-manager.all_groups", {}, "All groups")
+								}), schema.groups.map((group) => /* @__PURE__ */ jsx("option", {
+									value: group.value,
+									children: group.label
+								}, group.value))]
+							})]
+						}),
+						/* @__PURE__ */ jsxs(DropdownMenu, {
+							dir: direction,
+							children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									className: "h-9",
+									children: [/* @__PURE__ */ jsx(LanguagesIcon, { "aria-hidden": "true" }), t("translation-manager.locales_label", {}, "Languages")]
+								})
+							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+								align: "end",
+								children: schema.locales.map((locale) => /* @__PURE__ */ jsxs(DropdownMenuCheckboxItem, {
+									checked: state.visibleLocales.includes(locale.code),
+									onCheckedChange: (checked) => controller.toggleLocale(locale.code, checked === true),
+									onSelect: (event) => event.preventDefault(),
+									children: [
+										locale.label,
+										" ",
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground ms-auto font-mono text-xs",
+											children: locale.code
+										})
+									]
+								}, locale.code))
+							})]
+						})
+					]
+				}),
+				suggestionLocales.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "bg-muted/50 flex flex-col gap-2 rounded-md border px-3 py-2 text-sm",
+					"data-slot": "translation-suggestions",
+					children: suggestionLocales.map((code) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx(SparklesIcon, {
+								className: "text-primary size-4",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "flex-1 font-medium",
+								children: [
+									t("translation-manager.suggestion", {}, "AI suggestion"),
+									" ·",
+									" ",
+									controller.locale(code)?.label
+								]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "sm",
+								variant: "outline",
+								onClick: () => void controller.decideAll(code, "reject"),
+								children: t("translation-manager.reject_all", {}, "Reject all")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "sm",
+								onClick: () => void controller.decideAll(code, "accept"),
+								children: t("translation-manager.accept_all", {}, "Accept all without warnings")
+							})
+						]
+					}, code))
+				})
+			]
+		}), /* @__PURE__ */ jsxs(CardContent, {
+			className: "flex flex-col gap-4 px-5",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					id: hintId,
+					className: "text-muted-foreground text-xs",
+					children: t("translation-manager.keyboard", {}, "Arrow keys move between texts. Enter edits and saves, Shift + Enter adds a line break, Escape cancels.")
+				}),
+				state.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground py-10 text-center text-sm",
+					children: t("translation-manager.empty", {}, "No translations match your search.")
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "overflow-x-auto rounded-md border",
+					"data-slot": "translation-grid-scroll",
+					children: /* @__PURE__ */ jsxs("table", {
+						role: "grid",
+						"aria-labelledby": labelId,
+						"aria-describedby": hintId,
+						"aria-busy": state.loading || void 0,
+						"aria-rowcount": state.total + 1,
+						className: cn("w-full border-collapse text-sm", state.loading && "opacity-60"),
+						"data-slot": "translation-grid",
+						children: [/* @__PURE__ */ jsx("thead", {
+							className: "bg-muted/50",
+							children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "bg-muted sticky start-0 z-10 min-w-56 border-b px-3 py-2 text-start font-medium",
+								children: t("translation-manager.key", {}, "Key")
+							}), locales.map((locale) => /* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "min-w-64 border-s border-b px-3 py-2 text-start font-medium",
+								children: /* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											lang: locale.code,
+											children: locale.label
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground font-mono text-xs",
+											children: locale.code
+										}),
+										locale.base && /* @__PURE__ */ jsx(Badge, {
+											variant: "secondary",
+											children: t("translation-manager.base", {}, "Base")
+										}),
+										!locale.editable && /* @__PURE__ */ jsx(Badge, {
+											variant: "outline",
+											children: t("translation-manager.read_only", {}, "Read only")
+										})
+									]
+								})
+							}, locale.code))] })
+						}), /* @__PURE__ */ jsx("tbody", { children: state.rows.map((row) => /* @__PURE__ */ jsxs("tr", {
+							className: "border-b last:border-b-0",
+							"data-slot": "translation-row",
+							children: [/* @__PURE__ */ jsx("th", {
+								scope: "row",
+								className: "bg-card sticky start-0 z-10 px-3 py-2 text-start align-top font-normal",
+								children: /* @__PURE__ */ jsx(KeyCell, { row })
+							}), locales.map((locale) => {
+								const ref = {
+									row: row.id,
+									locale: locale.code
+								};
+								const cell = row.cells[locale.code];
+								const isActive = active?.row === row.id && active.locale === locale.code;
+								const isEditing = state.editing?.row === row.id && state.editing.locale === locale.code;
+								return /* @__PURE__ */ jsx("td", {
+									ref: (element) => {
+										if (element) cells.current.set(cellKey(ref), element);
+										else cells.current.delete(cellKey(ref));
+									},
+									role: "gridcell",
+									tabIndex: isActive && !isEditing ? 0 : -1,
+									"aria-selected": isActive,
+									"aria-readonly": !controller.isEditable(ref) || void 0,
+									"aria-label": isEditing ? void 0 : t("translation-manager.edit", {
+										key: row.key,
+										locale: locale.label
+									}, "Edit :key in :locale"),
+									"data-slot": "translation-cell",
+									"data-missing": cell?.value ? void 0 : "",
+									"data-changed": cell?.changed ? "" : void 0,
+									"data-active": isActive ? "" : void 0,
+									onFocus: (event) => event.target === event.currentTarget && controller.focus(ref),
+									onClick: () => {
+										if (!isEditing) {
+											controller.focus(ref);
+											if (isActive) controller.startEdit(ref);
+										}
+									},
+									onDoubleClick: () => controller.startEdit(ref),
+									onKeyDown: onCellKeyDown(ref),
+									className: cn("hover:bg-accent/40 border-s px-3 py-2 align-top outline-none", isActive && "ring-ring/50 ring-2 ring-inset", controller.isEditable(ref) && "cursor-text"),
+									children: isEditing ? /* @__PURE__ */ jsx(CellEditor, {
+										row,
+										locale,
+										draft: state.draft,
+										forms: state.draftForms,
+										labels: cell?.formLabels,
+										saving: state.saving,
+										error: state.error,
+										editorRef: editor,
+										onDraft: (value) => controller.setDraft(value),
+										onForm: (index, value) => controller.setDraftForm(index, value),
+										onKeyDown: onEditorKeyDown,
+										onSave: () => void controller.save().then((saved) => saved && focusCell(ref)),
+										onCancel: () => {
+											controller.cancelEdit();
+											focusCell(ref);
+										},
+										onCopyBase: () => controller.copyBase()
+									}) : /* @__PURE__ */ jsx(CellValue, {
+										locale,
+										cell
+									})
+								}, locale.code);
+							})]
+						}, row.id)) })]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center justify-between gap-2 text-sm",
+					"data-slot": "translation-pagination",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: t("translation-manager.pagination", {
+							...range,
+							total: formatter.number(state.total)
+						}, ":from–:to of :total")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								size: "icon-sm",
+								"aria-label": t("translation-manager.previous", {}, "Previous page"),
+								disabled: state.page <= 1 || state.loading,
+								onClick: () => controller.goToPage(state.page - 1),
+								children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+									className: "rtl:rotate-180",
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "px-2 tabular-nums",
+								children: t("translation-manager.page", {
+									page: state.page,
+									pages: state.lastPage
+								}, "Page :page of :pages")
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "outline",
+								size: "icon-sm",
+								"aria-label": t("translation-manager.next", {}, "Next page"),
+								disabled: state.page >= state.lastPage || state.loading,
+								onClick: () => controller.goToPage(state.page + 1),
+								children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+									className: "rtl:rotate-180",
+									"aria-hidden": "true"
+								})
+							})
+						]
+					})]
+				}),
+				activeRow && activeLocale ? /* @__PURE__ */ jsxs("section", {
+					className: "flex flex-col gap-3 rounded-md border p-4 text-sm",
+					"data-slot": "translation-details",
+					"aria-label": t("translation-manager.details", {}, "Details"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-baseline gap-2",
+							children: [/* @__PURE__ */ jsx("code", {
+								className: "font-mono text-xs break-all",
+								children: activeRow.key
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "text-muted-foreground",
+								children: ["· ", activeLocale.label]
+							})]
+						}),
+						activeRow.placeholders && activeRow.placeholders.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground me-1",
+								children: t("translation-manager.placeholders", {}, "Placeholders")
+							}), activeRow.placeholders.map((placeholder) => /* @__PURE__ */ jsx(Badge, {
+								variant: "outline",
+								className: "font-mono",
+								children: placeholder
+							}, placeholder))]
+						}),
+						activeRow.files && activeRow.files.length > 0 && /* @__PURE__ */ jsxs("p", {
+							className: "text-muted-foreground",
+							children: [
+								t("translation-manager.used_in", {}, "Used in"),
+								":",
+								" ",
+								/* @__PURE__ */ jsx("span", {
+									className: "font-mono text-xs",
+									children: activeRow.files.join(", ")
+								})
+							]
+						}),
+						activeRow.cells[activeLocale.code]?.warnings?.map((warning) => /* @__PURE__ */ jsxs("p", {
+							className: "text-destructive flex items-start gap-2",
+							children: [/* @__PURE__ */ jsx(TriangleAlertIcon, {
+								className: "mt-0.5 size-4 shrink-0",
+								"aria-hidden": "true"
+							}), warning]
+						}, warning)),
+						activeRow.cells[activeLocale.code]?.suggestion && /* @__PURE__ */ jsxs("div", {
+							className: "bg-muted/50 flex flex-col gap-2 rounded-md p-3",
+							"data-slot": "translation-suggestion",
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-2 font-medium",
+									children: [/* @__PURE__ */ jsx(SparklesIcon, {
+										className: "text-primary size-4",
+										"aria-hidden": "true"
+									}), t("translation-manager.suggestion", {}, "AI suggestion")]
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "whitespace-pre-wrap",
+									dir: activeLocale.direction,
+									lang: activeLocale.code,
+									children: activeRow.cells[activeLocale.code]?.suggestion?.value
+								}),
+								activeRow.cells[activeLocale.code]?.suggestion?.warnings?.map((warning) => /* @__PURE__ */ jsx("p", {
+									className: "text-destructive text-xs",
+									children: warning
+								}, warning)),
+								activeLocale.editable && /* @__PURE__ */ jsxs("div", {
+									className: "flex gap-2",
+									children: [/* @__PURE__ */ jsxs(Button, {
+										type: "button",
+										size: "sm",
+										onClick: () => void controller.decide({
+											row: activeRow.id,
+											locale: activeLocale.code
+										}, "accept"),
+										children: [/* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }), t("translation-manager.accept", {}, "Accept")]
+									}), /* @__PURE__ */ jsxs(Button, {
+										type: "button",
+										size: "sm",
+										variant: "outline",
+										onClick: () => void controller.decide({
+											row: activeRow.id,
+											locale: activeLocale.code
+										}, "reject"),
+										children: [/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }), t("translation-manager.reject", {}, "Reject")]
+									})]
+								})
+							]
+						}),
+						state.history?.row === activeRow.id && state.history.locale === activeLocale.code ? /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							"data-slot": "translation-history",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "font-medium",
+									children: t("translation-manager.history", {}, "History")
+								}),
+								state.history.entries?.length === 0 && /* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground",
+									children: t("translation-manager.history_empty", {}, "No changes yet.")
+								}),
+								/* @__PURE__ */ jsx("ol", {
+									className: "flex flex-col gap-2",
+									children: state.history.entries?.map((entry) => /* @__PURE__ */ jsxs("li", {
+										className: "border-s-2 ps-3",
+										children: [/* @__PURE__ */ jsxs("span", {
+											className: "text-muted-foreground text-xs",
+											children: [
+												t(`translation-manager.sources.${entry.source}`, {}, entry.source),
+												entry.user ? ` · ${t("translation-manager.by", { name: entry.user }, "by :name")}` : "",
+												entry.at ? ` · ${formatter.relative(entry.at)}` : ""
+											]
+										}), /* @__PURE__ */ jsx("p", {
+											className: "whitespace-pre-wrap",
+											dir: activeLocale.direction,
+											lang: activeLocale.code,
+											children: entry.new ?? /* @__PURE__ */ jsx("em", {
+												className: "text-muted-foreground",
+												children: t("translation-manager.empty_value", {}, "Empty")
+											})
+										})]
+									}, entry.id))
+								})
+							]
+						}) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							variant: "ghost",
+							onClick: () => void controller.loadHistory({
+								row: activeRow.id,
+								locale: activeLocale.code
+							}),
+							children: [/* @__PURE__ */ jsx(HistoryIcon, { "aria-hidden": "true" }), t("translation-manager.show_history", {}, "Show history")]
+						}) })
+					]
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "sr-only",
+					role: "status",
+					"aria-live": "polite",
+					children: state.announcement
+				})
+			]
+		})]
+	});
+}
+function KeyCell({ row }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("code", {
+			className: "font-mono text-xs break-all",
+			children: row.key
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: row.groupLabel
+				}),
+				row.undefined && /* @__PURE__ */ jsx(Badge, {
+					variant: "destructive",
+					children: t("translation-manager.undefined", {}, "Not defined")
+				}),
+				row.unused && /* @__PURE__ */ jsx(Badge, {
+					variant: "outline",
+					children: t("translation-manager.unused", {}, "Unused")
+				})
+			]
+		})]
+	});
+}
+function CellValue({ locale, cell }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [cell?.value ? /* @__PURE__ */ jsx("span", {
+			className: "line-clamp-4 whitespace-pre-wrap",
+			dir: locale.direction,
+			lang: locale.code,
+			children: cell.value
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground italic",
+			children: t("translation-manager.missing", {}, "Missing")
+		}), (cell?.changed || cell?.warnings || cell?.suggestion) && /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-wrap gap-1",
+			children: [
+				cell.changed && /* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					children: t("translation-manager.changed", {}, "Changed in the panel")
+				}),
+				cell.warnings && /* @__PURE__ */ jsxs(Badge, {
+					variant: "destructive",
+					title: cell.warnings.join("\n"),
+					children: [/* @__PURE__ */ jsx(TriangleAlertIcon, { "aria-hidden": "true" }), t("translation-manager.warnings", {}, "Warnings")]
+				}),
+				cell.suggestion && /* @__PURE__ */ jsxs(Badge, {
+					variant: "outline",
+					children: [/* @__PURE__ */ jsx(SparklesIcon, { "aria-hidden": "true" }), t("translation-manager.suggestion", {}, "AI suggestion")]
+				})
+			]
+		})]
+	});
+}
+function CellEditor({ row, locale, draft, forms, labels, saving, error, editorRef, onDraft, onForm, onKeyDown, onSave, onCancel, onCopyBase }) {
+	const t = useT();
+	const errorId = useId();
+	const label = t("translation-manager.edit", {
+		key: row.key,
+		locale: locale.label
+	}, "Edit :key in :locale");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		"data-slot": "translation-editor",
+		onClick: (event) => event.stopPropagation(),
+		children: [
+			forms ? forms.map((form, index) => /* @__PURE__ */ jsxs("label", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: t("translation-manager.plural_form", { numbers: labels?.[index] ?? String(index + 1) }, "For :numbers")
+				}), /* @__PURE__ */ jsx(Textarea, {
+					ref: index === 0 ? editorRef : void 0,
+					value: form,
+					rows: 1,
+					dir: locale.direction,
+					lang: locale.code,
+					"aria-label": `${label} (${labels?.[index] ?? index + 1})`,
+					"aria-invalid": error ? true : void 0,
+					"aria-describedby": error ? errorId : void 0,
+					className: "min-h-9",
+					onChange: (event) => onForm(index, event.target.value),
+					onKeyDown
+				})]
+			}, index)) : /* @__PURE__ */ jsx(Textarea, {
+				ref: editorRef,
+				value: draft,
+				rows: Math.min(8, Math.max(2, draft.split("\n").length)),
+				dir: locale.direction,
+				lang: locale.code,
+				"aria-label": label,
+				"aria-invalid": error ? true : void 0,
+				"aria-describedby": error ? errorId : void 0,
+				onChange: (event) => onDraft(event.target.value),
+				onKeyDown
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: errorId,
+				className: "text-destructive text-xs",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						disabled: saving,
+						onClick: onSave,
+						children: saving ? t("translation-manager.saving", {}, "Saving…") : t("translation-manager.save", {}, "Save")
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						disabled: saving,
+						onClick: onCancel,
+						children: t("translation-manager.cancel", {}, "Cancel")
+					}),
+					!locale.base && /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						size: "sm",
+						variant: "ghost",
+						className: "ms-auto",
+						disabled: saving,
+						onClick: onCopyBase,
+						children: [/* @__PURE__ */ jsx(CopyIcon, { "aria-hidden": "true" }), t("translation-manager.copy_base", {}, "Copy the base text")]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { TranslationManager };
+
+//# sourceMappingURL=translation-manager.js.map