@marktiderman/genesis-ui 2.16.0 → 2.17.0

package/dist/components/data/index.js

@@ -1,6 +1,6 @@
 "use client";
-import { AppShell, PageHeader } from '../../chunk-C2IPSMNE.js';
-export { ViewSettings, ViewToggle } from '../../chunk-46TZGMFW.js';
+import { AppShell, PageHeader } from '../../chunk-3FKF2SN4.js';
+export { ViewSettings, ViewToggle } from '../../chunk-24NUW3QN.js';
 import { slots_exports } from '../../chunk-WALJMVEF.js';
 import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../chunk-N2ZFNOOT.js';
 import { Progress } from '../../chunk-W5Y3LG5K.js';
@@ -30,8 +30,8 @@ import '../../chunk-F47U5KNW.js';
 import { DetailPage } from '../../chunk-AFZ76Q26.js';
 import '../../chunk-D2LIXA2Y.js';
 import '../../chunk-AVFZ4P4B.js';
-import { showUndoToast, showWriteErrorToast, useResourceTableModel } from '../../chunk-STZVZUYO.js';
-export { showUndoToast, showWriteErrorToast, useResourceTable } from '../../chunk-STZVZUYO.js';
+import { showUndoToast, showWriteErrorToast, useResourceTableModel } from '../../chunk-TQ7OJDSU.js';
+export { showUndoToast, showWriteErrorToast, useResourceTable } from '../../chunk-TQ7OJDSU.js';
 import { titleCase } from '../../chunk-RKPS7ERS.js';
 import '../../chunk-DIV4BYXX.js';
 export { useSavedViews } from '../../chunk-GCQFVMPI.js';
@@ -41,6 +41,7 @@ export { CommandPalette, useCommandPaletteHotkey } from '../../chunk-CNTWQSUT.js
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from '../../chunk-SEFK4NZV.js';
 import '../../chunk-4RAZJ6LL.js';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '../../chunk-7XMZVISM.js';
+import { useUiMessages, fillMessage } from '../../chunk-YCQAYWMX.js';
 import { cn } from '../../chunk-NZ5WBA4R.js';
 import { DefaultLink } from '../../chunk-J45FHL7D.js';
 export { DefaultLink, defaultNavigate, isPathActive, resolveNavigation } from '../../chunk-J45FHL7D.js';
@@ -98,6 +99,7 @@ function DataPageShell({
   className,
   header
 }) {
+  const m = useUiMessages();
   const entity = entityName || title.toLowerCase();
   const collapseFilters = filtersCollapsible && filters != null && header !== null;
   const toolbarOnly = header === "toolbar";
@@ -148,7 +150,7 @@ function DataPageShell({
       // Shaped like the view it stands in for, so a list inside a panel or
       // tab doesn't reserve a page of card placeholders.
       /* @__PURE__ */ jsxs("div", { "data-testid": "page-loader", role: "status", "aria-busy": "true", children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading\u2026" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: m.common.loading }),
         viewMode === "grid" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(
           Skeleton,
           {
@@ -172,11 +174,12 @@ function DataPageShell({
         className: "flex flex-col items-center justify-center py-16 text-center",
         children: [
           /* @__PURE__ */ jsx(AlertTriangle, { className: "h-10 w-10 text-destructive mb-3", "aria-hidden": true }),
-          /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Something went wrong" }),
-          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage2 || `Failed to load ${entity}s. Please try again.` }),
+          /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: m.page.errorTitle }),
+          /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: errorMessage2 || fillMessage(m.page.errorBody, { entity }) }),
           onRetry && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
             /* @__PURE__ */ jsx(RefreshCw, { className: "mr-1 h-4 w-4", "aria-hidden": true }),
-            " Retry"
+            " ",
+            m.page.retry
           ] })
         ]
       }
@@ -294,7 +297,7 @@ function FilterCombobox({
 function DataFilters({
   search,
   onSearchChange,
-  searchPlaceholder = "Search...",
+  searchPlaceholder: searchPlaceholderProp,
   sort,
   onSortChange,
   sortOptions,
@@ -311,6 +314,8 @@ function DataFilters({
   showSearch = true,
   showSort = true
 }) {
+  const m = useUiMessages();
+  const searchPlaceholder = searchPlaceholderProp ?? m.filters.search;
   const internalSearchRef = useRef(null);
   const effectiveSearchRef = searchInputRef || internalSearchRef;
   const [viewsOpen, setViewsOpen] = useState(false);
@@ -341,7 +346,7 @@ function DataFilters({
       {
         className: "flex items-center border rounded-lg overflow-x-auto w-fit max-w-full",
         role: "group",
-        "aria-label": "Status",
+        "aria-label": m.filters.status,
         "data-testid": "status-tabs",
         children: statusOptions.map((o) => {
           const pressed = statusChips.selected.includes(o.value);
@@ -390,7 +395,7 @@ function DataFilters({
       showSort && /* @__PURE__ */ jsxs(Select, { value: sort, onValueChange: onSortChange, children: [
         /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-full sm:w-[180px] shrink-0", children: [
           /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 mr-1.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort by..." })
+          /* @__PURE__ */ jsx(SelectValue, { placeholder: m.filters.sortBy })
         ] }),
         /* @__PURE__ */ jsx(SelectContent, { className: "bg-popover z-50", children: sortOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
       ] })
@@ -405,12 +410,8 @@ function DataFilters({
             className: "text-xs h-7 gap-1.5",
             children: [
               /* @__PURE__ */ jsx(Bookmark, { className: "h-3 w-3" }),
-              "Views",
-              savedViews.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground ml-0.5", children: [
-                "(",
-                savedViews.length,
-                ")"
-              ] }),
+              m.filters.views,
+              savedViews.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground ml-0.5", children: fillMessage(m.filters.viewCount, { count: savedViews.length }) }),
               /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 ml-0.5 opacity-60" })
             ]
           }
@@ -442,7 +443,7 @@ function DataFilters({
                   }
                 )
               ] }, view.id)),
-              savedViews.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-2 py-1", children: "No saved views yet" }),
+              savedViews.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground px-2 py-1", children: m.filters.noViews }),
               canSaveViews && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("div", { className: "border-t my-1" }),
                 /* @__PURE__ */ jsxs(
@@ -455,7 +456,7 @@ function DataFilters({
                     },
                     children: [
                       /* @__PURE__ */ jsx(BookmarkPlus, { className: "h-3.5 w-3.5" }),
-                      "Save current view"
+                      m.filters.saveCurrent
                     ]
                   }
                 )
@@ -525,18 +526,18 @@ function DataFilters({
           onClick: onClearAll,
           children: [
             /* @__PURE__ */ jsx(X, { className: "h-3 w-3 mr-1" }),
-            "Clear all"
+            m.filters.clearAll
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsx(Dialog, { open: saveDialogOpen, onOpenChange: setSaveDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
-      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "font-display", children: "Save Current View" }) }),
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "font-display", children: m.filters.saveViewTitle }) }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx(
           Input,
           {
-            placeholder: "View name (e.g. 'Active Sessions')",
+            placeholder: m.filters.viewNamePlaceholder,
             value: newViewName,
             onChange: (e) => setNewViewName(e.target.value),
             onKeyDown: (e) => e.key === "Enter" && handleSaveView(),
@@ -550,7 +551,7 @@ function DataFilters({
               variant: "outline",
               size: "sm",
               onClick: () => setSaveDialogOpen(false),
-              children: "Cancel"
+              children: m.common.cancel
             }
           ),
           /* @__PURE__ */ jsx(
@@ -559,7 +560,7 @@ function DataFilters({
               size: "sm",
               onClick: handleSaveView,
               disabled: !newViewName.trim(),
-              children: "Save"
+              children: m.common.save
             }
           )
         ] })
@@ -762,6 +763,7 @@ function EditableCell({
   column,
   value
 }) {
+  const m = useUiMessages();
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(String(value ?? ""));
   const [saving, setSaving] = useState(false);
@@ -820,7 +822,7 @@ function EditableCell({
           failedDraft.current = null;
           setEditing(true);
         },
-        children: column.render ? column.render(item, value) : String(value ?? "\u2014")
+        children: column.render ? column.render(item, value) : String(value ?? m.common.empty)
       }
     );
   }
@@ -857,7 +859,7 @@ function EditableCell({
               type: "button",
               className: "mt-0.5 text-[11px] text-muted-foreground underline-offset-2 hover:underline",
               onClick: close,
-              children: "Cancel"
+              children: m.common.cancel
             }
           )
         ]
@@ -886,7 +888,7 @@ function EditableCell({
           }
         }
       ),
-      saving && /* @__PURE__ */ jsx(Spinner, { className: "absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2", "aria-label": "Saving" })
+      saving && /* @__PURE__ */ jsx(Spinner, { className: "absolute right-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2", "aria-label": m.common.saving })
     ] }),
     feedback
   ] });
@@ -945,7 +947,7 @@ function DataTable({
   onToggleSelect,
   onToggleAll,
   renderActions,
-  emptyMessage = "No records found",
+  emptyMessage: emptyMessageProp,
   columnVisibility = true,
   columnVisibilityKey,
   resizableColumns = true,
@@ -965,6 +967,8 @@ function DataTable({
   sort: sortProp,
   onSortChange
 }) {
+  const m = useUiMessages();
+  const emptyMessage = emptyMessageProp ?? m.table.noRecords;
   const rowKeys = keyboardNavigation && !!onRowClick;
   const [activeRowKey, setActiveRowKey] = useState(null);
   const cellDensity = DENSITY_CELL[density];
@@ -1254,7 +1258,7 @@ function DataTable({
               children: /* @__PURE__ */ jsx(
                 Checkbox,
                 {
-                  "aria-label": `Select ${rowLabel(item, id)}`,
+                  "aria-label": fillMessage(m.table.selectRow, { name: rowLabel(item, id) }),
                   checked: selected?.has(id),
                   onCheckedChange: () => onToggleSelect?.(id)
                 }
@@ -1284,7 +1288,7 @@ function DataTable({
                       column: col,
                       value
                     }
-                  ) : col.render ? col.render(item, value) : /* @__PURE__ */ jsx("span", { className: "truncate block max-w-[300px]", children: String(value ?? "\u2014") });
+                  ) : col.render ? col.render(item, value) : /* @__PURE__ */ jsx("span", { className: "truncate block max-w-[300px]", children: String(value ?? m.common.empty) });
                   if (col.key !== openKey) return content;
                   const openProps = {
                     type: "button",
@@ -1328,9 +1332,9 @@ function DataTable({
                       "button",
                       {
                         ...openProps,
-                        "aria-label": `Open ${rowLabel(item, id)}`,
+                        "aria-label": fillMessage(m.common.openItem, { name: rowLabel(item, id) }),
                         className: "sr-only shrink-0 rounded px-1 text-xs text-muted-foreground focus-visible:not-sr-only focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-                        children: "Open"
+                        children: m.common.open
                       }
                     )
                   ] });
@@ -1363,7 +1367,7 @@ function DataTable({
           className: "h-7 text-xs gap-1.5",
           children: [
             /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
-            "Columns"
+            m.table.columns
           ]
         }
       ) }),
@@ -1385,7 +1389,7 @@ function DataTable({
               ) : null
             ),
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: resetColumnVisibility, children: "Reset to defaults" })
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: resetColumnVisibility, children: m.table.resetColumns })
           ]
         }
       )
@@ -1430,7 +1434,7 @@ function DataTable({
                         children: /* @__PURE__ */ jsx(
                           Checkbox,
                           {
-                            "aria-label": "Select all rows",
+                            "aria-label": m.table.selectAll,
                             checked: items.length > 0 && selected?.size === items.length,
                             onCheckedChange: onToggleAll
                           }
@@ -1506,7 +1510,11 @@ function DataTable({
                                     e.preventDefault();
                                     moveColumn(col.key, e.key === "ArrowLeft" ? { before: neighbour.key } : { after: neighbour.key });
                                   },
-                                  "aria-label": sortEntry && sortIndex > 0 ? `${col.header}, sorted ${sortEntry.dir === "asc" ? "ascending" : "descending"}, sort ${sortIndex + 1}` : void 0,
+                                  "aria-label": sortEntry && sortIndex > 0 ? fillMessage(m.table.sortedBy, {
+                                    header: String(col.header),
+                                    direction: sortEntry.dir === "asc" ? m.table.ascending : m.table.descending,
+                                    n: sortIndex + 1
+                                  }) : void 0,
                                   children: label
                                 }
                               ) : label;
@@ -1566,10 +1574,10 @@ function DataTable({
       }
     ),
     pagination && /* @__PURE__ */ jsxs("div", { className: "sticky bottom-0 z-10 flex flex-col sm:flex-row items-center justify-between gap-2 px-4 py-3 border-t bg-muted/30 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx("span", { children: totalItems === 0 ? "No records" : `Showing ${showingFrom}\u2013${showingTo} of ${totalItems}` }),
+      /* @__PURE__ */ jsx("span", { children: totalItems === 0 ? m.table.noRows : fillMessage(m.table.range, { from: showingFrom, to: showingTo, total: totalItems }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { children: "Rows:" }),
+          /* @__PURE__ */ jsx("span", { children: m.table.rows }),
           /* @__PURE__ */ jsxs(
             Select,
             {
@@ -1594,11 +1602,7 @@ function DataTable({
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "px-2 tabular-nums", children: [
-            currentPage + 1,
-            " / ",
-            totalPages
-          ] }),
+          /* @__PURE__ */ jsx("span", { className: "px-2 tabular-nums", children: fillMessage(m.table.pageOf, { page: currentPage + 1, pages: totalPages }) }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -1619,8 +1623,9 @@ function ThumbnailCell({
   src,
   alt
 }) {
+  const m = useUiMessages();
   if (!src) {
-    return /* @__PURE__ */ jsx("div", { className: "h-10 w-14 rounded bg-muted flex items-center justify-center text-[10px] text-muted-foreground", children: "\u2014" });
+    return /* @__PURE__ */ jsx("div", { className: "h-10 w-14 rounded bg-muted flex items-center justify-center text-[10px] text-muted-foreground", children: m.common.empty });
   }
   return /* @__PURE__ */ jsx(
     "img",
@@ -1636,7 +1641,8 @@ function LinkCell({
   href,
   label
 }) {
-  if (!href) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+  const m = useUiMessages();
+  if (!href) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: m.common.empty });
   return /* @__PURE__ */ jsxs(
     "a",
     {
@@ -1660,6 +1666,7 @@ function DataBulkBar({
   actions,
   className
 }) {
+  const m = useUiMessages();
   if (selected.size === 0) return null;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1676,10 +1683,7 @@ function DataBulkBar({
             onCheckedChange: onToggleAll
           }
         ),
-        /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
-          selected.size,
-          " selected"
-        ] }),
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: fillMessage(m.bulk.selected, { count: selected.size }) }),
         actions.map((action) => {
           const ActionIcon = action.icon;
           return /* @__PURE__ */ jsxs(
@@ -1705,7 +1709,7 @@ function DataBulkBar({
             variant: "ghost",
             onClick: onClearSelection,
             className: "ml-auto text-xs text-muted-foreground",
-            children: "Clear"
+            children: m.common.clear
           }
         )
       ]
@@ -1816,7 +1820,7 @@ var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useL
 function KanbanBoard({
   columns,
   renderCard,
-  emptyMessage = "No items",
+  emptyMessage: emptyMessageProp,
   className,
   getKey,
   onMoveItem,
@@ -1826,9 +1830,17 @@ function KanbanBoard({
   const [dragging, setDragging] = useState(null);
   const [over, setOver] = useState(null);
   const [grabbed, setGrabbed] = useState(null);
+  const m = useUiMessages();
+  const k = m.kanban;
+  const emptyMessage = emptyMessageProp ?? k.noItems;
   const { message: announcement, announce } = useAnnouncer();
   const handles = useRef(/* @__PURE__ */ new Map());
   const refocus = useRef(null);
+  const refocusMove = useRef(0);
+  const [, setSettledTick] = useState(0);
+  const refocusFrom = useRef(null);
+  const refocusSettled = useRef(false);
+  const moves = useRef(0);
   const instructionsId = useId();
   const keyOf = (item, index) => getKey ? getKey(item) : String(index);
   const movable = Boolean(onMoveItem && getKey);
@@ -1842,10 +1854,17 @@ function KanbanBoard({
   };
   const labelOf = (key) => {
     const found = find(key);
-    return found && getItemLabel ? getItemLabel(found.item) : "Card";
+    return found && getItemLabel ? getItemLabel(found.item) : k.card;
   };
   const columnLabel = (key) => columns.find((c) => c.key === key)?.label ?? key;
   const move = (item, to, name) => {
+    const id = ++moves.current;
+    const key = getKey?.(item);
+    if (key !== void 0 && refocus.current === key) {
+      refocusMove.current = id;
+      refocusFrom.current = find(key)?.column.key ?? null;
+      refocusSettled.current = false;
+    }
     let result;
     try {
       result = onMoveItem?.(item, to);
@@ -1853,8 +1872,19 @@ function KanbanBoard({
       result = Promise.reject(error);
     }
     void Promise.resolve(result).then(
-      () => announce(`${name} moved to ${columnLabel(to)}.`),
-      () => announce(`Couldn\u2019t move ${name}.`)
+      () => {
+        if (key !== void 0 && refocus.current === key && refocusMove.current === id) {
+          refocusSettled.current = true;
+          setSettledTick((n) => n + 1);
+        }
+        announce(fillMessage(k.moved, { name, column: columnLabel(to) }));
+      },
+      () => {
+        if (key !== void 0 && refocus.current === key && refocusMove.current === id) {
+          refocus.current = null;
+        }
+        announce(fillMessage(k.moveFailed, { name }));
+      }
     );
   };
   const moveKey = (key, to) => {
@@ -1871,22 +1901,20 @@ function KanbanBoard({
   };
   const pickUp = (key, from) => {
     setGrabbed({ key, from, target: from });
-    announce(
-      `${labelOf(key)} picked up in ${columnLabel(from)}. Use the left and right arrow keys to choose a column, Space to drop, Escape to cancel.`
-    );
+    announce(fillMessage(k.pickedUp, { name: labelOf(key), column: columnLabel(from) }));
   };
   const aim = (index) => {
     if (!grabbed) return;
     const column = columns[Math.max(0, Math.min(columns.length - 1, index))];
     if (!column || column.key === grabbed.target) return;
     setGrabbed({ ...grabbed, target: column.key });
-    announce(`Over ${column.label}, column ${columns.indexOf(column) + 1} of ${columns.length}.`);
+    announce(fillMessage(k.over, { column: column.label, n: columns.indexOf(column) + 1, count: columns.length }));
   };
   const drop = () => {
     if (!grabbed) return;
     setGrabbed(null);
     if (grabbed.target === grabbed.from) {
-      announce(`${labelOf(grabbed.key)} dropped back in ${columnLabel(grabbed.from)}.`);
+      announce(fillMessage(k.droppedBack, { name: labelOf(grabbed.key), column: columnLabel(grabbed.from) }));
       return;
     }
     refocus.current = grabbed.key;
@@ -1895,7 +1923,7 @@ function KanbanBoard({
   const cancel = () => {
     if (!grabbed) return;
     setGrabbed(null);
-    announce(`Move cancelled. ${labelOf(grabbed.key)} stays in ${columnLabel(grabbed.from)}.`);
+    announce(fillMessage(k.cancelled, { name: labelOf(grabbed.key), column: columnLabel(grabbed.from) }));
   };
   useEffect(() => {
     if (!grabbed) return;
@@ -1918,17 +1946,20 @@ function KanbanBoard({
   useIsomorphicLayoutEffect(() => {
     const key = refocus.current;
     if (!key) return;
-    const handle = handles.current.get(key);
-    if (!handle) return;
-    if (handle.isConnected && document.activeElement === handle) {
+    const found = find(key);
+    if (!found) {
       refocus.current = null;
       return;
     }
-    const active = document.activeElement;
-    if (active === null || active === document.body) {
-      handle.focus();
-      refocus.current = null;
+    if (found.column.key === refocusFrom.current) {
+      if (refocusSettled.current) refocus.current = null;
+      return;
     }
+    const handle = handles.current.get(key);
+    if (!handle) return;
+    const active = document.activeElement;
+    if (active === null || active === document.body) handle.focus();
+    refocus.current = null;
   });
   const onHandleKeyDown = (event, key, from) => {
     const delta = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
@@ -1962,7 +1993,7 @@ function KanbanBoard({
     if (event.pointerType === "mouse" || grabbed || dragging) return;
     event.currentTarget.setPointerCapture?.(event.pointerId);
     setDragging({ key, from, pointer: event.pointerId });
-    announce(`${labelOf(key)} picked up in ${columnLabel(from)}.`);
+    announce(fillMessage(k.pickedUpTouch, { name: labelOf(key), column: columnLabel(from) }));
   };
   const onHandlePointerMove = (event) => {
     if (dragging?.pointer !== event.pointerId) return;
@@ -1976,7 +2007,7 @@ function KanbanBoard({
     setDragging(null);
     setOver(null);
     if (to && to !== from) moveKey(key, to);
-    else announce(`${labelOf(key)} dropped back in ${columnLabel(from)}.`);
+    else announce(fillMessage(k.droppedBack, { name: labelOf(key), column: columnLabel(from) }));
   };
   const onHandlePointerCancel = (event) => {
     if (dragging?.pointer !== event.pointerId) return;
@@ -2026,7 +2057,7 @@ function KanbanBoard({
                 ] }),
                 /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 min-h-[80px]", children: column.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg border border-dashed border-border p-6 text-xs text-muted-foreground", children: emptyMessage }) : column.items.map((item, i) => {
                   const key = keyOf(item, i);
-                  const name = getItemLabel?.(item) ?? "card";
+                  const name = getItemLabel?.(item) ?? k.cardInLabel;
                   const isGrabbed = grabbed?.key === key;
                   return /* @__PURE__ */ jsxs(
                     "div",
@@ -2058,7 +2089,7 @@ function KanbanBoard({
                               if (node) handles.current.set(key, node);
                               else handles.current.delete(key);
                             },
-                            "aria-label": `Pick up ${name}`,
+                            "aria-label": fillMessage(k.pickUp, { name }),
                             "aria-describedby": instructionsId,
                             "data-grabbed": isGrabbed || void 0,
                             className: cn(
@@ -2082,19 +2113,19 @@ function KanbanBoard({
                           /* @__PURE__ */ jsx(
                             DropdownMenuTrigger,
                             {
-                              "aria-label": `Move ${name}`,
+                              "aria-label": fillMessage(k.move, { name }),
                               className: "absolute right-1.5 top-1.5 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                               children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5", "aria-hidden": true })
                             }
                           ),
                           /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
-                            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Move to" }),
+                            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: k.moveTo }),
                             columns.filter((c) => c.key !== column.key).map((c) => /* @__PURE__ */ jsx(
                               DropdownMenuItem,
                               {
                                 onSelect: () => {
                                   refocus.current = key;
-                                  move(item, c.key, getItemLabel?.(item) ?? "Card");
+                                  move(item, c.key, getItemLabel?.(item) ?? k.card);
                                 },
                                 children: c.label
                               },
@@ -2116,7 +2147,7 @@ function KanbanBoard({
       }
     ),
     movable && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { id: instructionsId, hidden: true, children: "Space or Enter picks the card up. Left and right arrows, Home and End choose a column. Space or Enter drops it, Escape puts it back. Alt with an arrow moves it one column." }),
+      /* @__PURE__ */ jsx("p", { id: instructionsId, hidden: true, children: k.instructions }),
       /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: announcement })
     ] })
   ] });
@@ -2152,15 +2183,15 @@ var dialogMaxWidthClasses = {
 function keyToLabel(key) {
   return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase());
 }
-function formatValue(value) {
-  if (value === null || value === void 0) return "\u2014";
-  if (typeof value === "boolean") return value ? "Yes" : "No";
+function formatValue(value, m) {
+  if (value === null || value === void 0) return m.common.empty;
+  if (typeof value === "boolean") return value ? m.common.yes : m.common.no;
   if (value instanceof Date) return value.toLocaleDateString();
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
-function renderTitleBlock(layout, title, subtitle) {
-  const titleText = title || "Detail panel";
+function renderTitleBlock(layout, title, subtitle, fallbackTitle) {
+  const titleText = title || fallbackTitle;
   if (layout === "dialog") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-sm font-semibold truncate", !title && "sr-only"), children: titleText }),
@@ -2203,6 +2234,7 @@ function DetailPanel({
   width = "md",
   layout = "sheet"
 }) {
+  const m = useUiMessages();
   if (!open || !item) return null;
   const renderContent = () => {
     if (children) {
@@ -2213,7 +2245,7 @@ function DetailPanel({
         index > 0 && /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsxs("div", { className: "py-3", children: [
           /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: field.label }),
-          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: field.render ? field.render(item[field.key], item) : formatValue(item[field.key]) })
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: field.render ? field.render(item[field.key], item) : formatValue(item[field.key], m) })
         ] })
       ] }, field.key)) });
     }
@@ -2222,12 +2254,12 @@ function DetailPanel({
       index > 0 && /* @__PURE__ */ jsx(Separator, {}),
       /* @__PURE__ */ jsxs("div", { className: "py-3", children: [
         /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: keyToLabel(key) }),
-        /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: formatValue(value) })
+        /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: formatValue(value, m) })
       ] })
     ] }, key)) });
   };
   const header = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: renderTitleBlock(layout, title, subtitle) }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: renderTitleBlock(layout, title, subtitle, m.detail.fallbackTitle) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
       onEdit && /* @__PURE__ */ jsx(
         Button,
@@ -2237,7 +2269,7 @@ function DetailPanel({
           size: "icon",
           className: "h-8 w-8",
           onClick: () => onEdit(item),
-          "aria-label": "Edit",
+          "aria-label": m.common.edit,
           children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
         }
       ),
@@ -2249,7 +2281,7 @@ function DetailPanel({
           size: "icon",
           className: "h-8 w-8 text-destructive hover:text-destructive",
           onClick: () => onDelete(item),
-          "aria-label": "Delete",
+          "aria-label": m.common.delete,
           children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
         }
       ),
@@ -2261,7 +2293,7 @@ function DetailPanel({
           size: "icon",
           className: "h-8 w-8",
           onClick: onClose,
-          "aria-label": "Close",
+          "aria-label": m.common.close,
           children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
       )
@@ -2323,7 +2355,7 @@ function DetailPanel({
     "div",
     {
       role: "region",
-      "aria-label": title || "Detail panel",
+      "aria-label": title || m.detail.fallbackTitle,
       className: cn(
         "flex flex-col rounded-lg border border-border bg-card",
         widthClasses[width]
@@ -3329,12 +3361,17 @@ function ConfirmDeleteDialog({
   open,
   onOpenChange,
   onConfirm,
-  title = "Delete this record?",
+  title: titleProp,
   kind = "permanent",
-  description = kind === "recycle" ? "It moves to the recycle bin, where it can be restored." : "This can't be undone.",
-  confirmLabel = "Delete",
-  cancelLabel = "Cancel"
+  description: descriptionProp,
+  confirmLabel: confirmLabelProp,
+  cancelLabel: cancelLabelProp
 }) {
+  const m = useUiMessages();
+  const title = titleProp ?? m.confirmDelete.title;
+  const description = descriptionProp ?? (kind === "recycle" ? m.confirmDelete.recycle : m.confirmDelete.permanent);
+  const confirmLabel = confirmLabelProp ?? m.common.delete;
+  const cancelLabel = cancelLabelProp ?? m.common.cancel;
   const [pending, setPending] = useState(false);
   const [error, setError] = useState(null);
   useEffect(() => {
@@ -3407,7 +3444,7 @@ function ResourcePage(props) {
     className,
     columnVisibility,
     columnVisibilityKey,
-    createLabel = "New",
+    createLabel: createLabelProp,
     detail = "panel",
     detailFields,
     detailWidth = "md",
@@ -3422,9 +3459,9 @@ function ResourcePage(props) {
     formMode,
     formSteps,
     gridCols: gridColsProp,
-    header: headerMode = "page",
+    header: headerProp,
     icon,
-    keyboardNavigation = true,
+    keyboardNavigation = props.variant !== "embedded",
     mutationMode: mutationModeProp,
     onCreate,
     onDelete,
@@ -3457,6 +3494,10 @@ function ResourcePage(props) {
     title,
     toolbar
   } = props;
+  const m = useUiMessages();
+  const createLabel = createLabelProp ?? m.page.create;
+  const embedded = props.variant === "embedded";
+  const headerMode = headerProp ?? (embedded ? "toolbar" : "page");
   const {
     actions,
     allows,
@@ -3525,6 +3566,8 @@ function ResourcePage(props) {
     useBuiltInDelete,
     useBuiltInEdit
   } = useResourceTableModel(props);
+  const wantsFilters = !!(filtersProp?.length || props.statusFilter || props.searchFields?.length || savedViews?.length || onSaveView || // Search or a status filter; a sort (a column click) isn't a filter.
+  page.search !== "" || page.statusValue.length > 0);
   const showCreateButton = (onCreate || useBuiltInCreate) && allows("create");
   const createButton = showCreateButton ? /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handleCreate, children: [
     /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-1" }),
@@ -3574,7 +3617,7 @@ function ResourcePage(props) {
           /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base truncate", children: titleVal }) }),
           /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              badgeCol && /* @__PURE__ */ jsx("span", { children: badgeCol.render ? badgeCol.render(item, badgeVal, actions) : badgeVal != null ? String(badgeVal) : "\u2014" }),
+              badgeCol && /* @__PURE__ */ jsx("span", { children: badgeCol.render ? badgeCol.render(item, badgeVal, actions) : badgeVal != null ? String(badgeVal) : m.common.empty }),
               priceVal != null && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: String(priceVal) })
             ] }),
             metaCols.map((col) => {
@@ -3583,7 +3626,7 @@ function ResourcePage(props) {
                 "p",
                 {
                   className: "text-xs text-muted-foreground truncate",
-                  children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014"
+                  children: col.render ? col.render(item, val, actions) : val != null ? String(val) : m.common.empty
                 },
                 col.key
               );
@@ -3606,7 +3649,7 @@ function ResourcePage(props) {
           /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate", children: titleVal }),
           /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: cols.slice(1, 4).map((col) => {
             const val = item[col.key];
-            return /* @__PURE__ */ jsx("span", { children: col.render ? col.render(item, val, actions) : val != null ? String(val) : "\u2014" }, col.key);
+            return /* @__PURE__ */ jsx("span", { children: col.render ? col.render(item, val, actions) : val != null ? String(val) : m.common.empty }, col.key);
           }) })
         ]
       }
@@ -3645,7 +3688,7 @@ function ResourcePage(props) {
       ...headerMode === "toolbar" ? { header: "toolbar" } : {},
       filters: (0, slots_exports.renderSlot)(
         DataFilters,
-        slots?.filters,
+        slots?.filters !== void 0 ? slots.filters : embedded && !wantsFilters ? null : void 0,
         {
           search: page.filterConfig.search,
           onSearchChange: handleSearchChange,
@@ -3667,6 +3710,16 @@ function ResourcePage(props) {
         slotProps?.filters
       ),
       ...shellSlotProps,
+      ...embedded && headerMode === "toolbar" ? {
+        // Only with the toolbar header: an explicit `header="page"` keeps the full header.
+        headerOptions: {
+          showCount: false,
+          showViewSettings: false,
+          showViewToggle: !!renderCardProp,
+          configurable: false,
+          ...shellSlotProps?.headerOptions
+        }
+      } : {},
       className: cn(className, shellSlotProps?.className),
       children: [
         bulkActions && bulkActions.length > 0 && (0, slots_exports.renderSlot)(
@@ -3733,7 +3786,7 @@ function ResourcePage(props) {
             ),
             ...openOnCardClick && renderCardProp && detail !== "none" ? {
               onItemClick: handleRowClick,
-              getItemLabel: (item) => `Open ${titleOf(item)}`.trim()
+              getItemLabel: (item) => fillMessage(m.common.openItem, { name: titleOf(item) }).trim()
             } : {},
             renderCard: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultCard(item),
             renderListItem: (item, index) => renderCardProp ? renderCardProp(item, index, cardActionsFor(item)) : renderDefaultListItem(item)
@@ -3750,7 +3803,7 @@ function ResourcePage(props) {
               "aria-busy": loadMore.loading || void 0,
               onClick: loadMore.hasMore && !loadMore.loading ? loadMore.load : void 0,
               testID: "resource-page-load-more",
-              children: loadMore.loading ? "Loading\u2026" : loadMore.hasMore ? "Load more" : `All ${loadMore.loaded.toLocaleString()} loaded`
+              children: loadMore.loading ? m.common.loading : loadMore.hasMore ? m.page.loadMore : fillMessage(m.page.allLoaded, { loaded: loadMore.loaded.toLocaleString() })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -3760,24 +3813,23 @@ function ResourcePage(props) {
               "aria-live": "polite",
               className: "sr-only",
               "data-testid": "resource-page-load-status",
-              children: loadMore.lastLoaded > 0 ? `Loaded ${loadMore.lastLoaded.toLocaleString()} more. ${loadMore.loaded.toLocaleString()} shown.` : ""
+              children: loadMore.lastLoaded > 0 ? fillMessage(m.page.loadedMore, {
+                added: loadMore.lastLoaded.toLocaleString(),
+                loaded: loadMore.loaded.toLocaleString()
+              }) : ""
             }
           )
         ] }),
-        clientTruncated && /* @__PURE__ */ jsxs(
+        clientTruncated && /* @__PURE__ */ jsx(
           "p",
           {
             role: "status",
             className: "px-3 py-2 text-sm text-muted-foreground",
             "data-testid": "resource-page-truncated",
-            children: [
-              "Showing the first ",
-              displayData.length.toLocaleString(),
-              " of",
-              " ",
-              displayTotal.toLocaleString(),
-              " records."
-            ]
+            children: fillMessage(m.page.truncated, {
+              shown: displayData.length.toLocaleString(),
+              total: displayTotal.toLocaleString()
+            })
           }
         ),
         isServerControlled && pagerOnPageChange && pagerMisconfigured && /* @__PURE__ */ jsxs(
@@ -3808,7 +3860,7 @@ function ResourcePage(props) {
         isServerControlled && pagerOnPageChange && !pagerMisconfigured && /* @__PURE__ */ jsxs(
           "nav",
           {
-            "aria-label": "Pagination",
+            "aria-label": m.page.pagination,
             "aria-busy": resourceServerPaging && resourceHook.list.isPlaceholderData || void 0,
             className: "flex flex-col sm:flex-row items-center justify-between gap-2 px-3 py-2 text-sm",
             "data-testid": "resource-page-pagination",
@@ -3819,7 +3871,7 @@ function ResourcePage(props) {
                   className: "text-muted-foreground",
                   "data-testid": "resource-page-range",
                   "aria-live": "polite",
-                  children: displayTotal === 0 ? "No records" : `Showing ${rangeFrom}-${rangeTo} of ${displayTotal}`
+                  children: displayTotal === 0 ? m.page.noRecords : fillMessage(m.page.range, { from: rangeFrom, to: rangeTo, total: displayTotal })
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -3833,21 +3885,16 @@ function ResourcePage(props) {
                     testID: "resource-page-prev",
                     children: [
                       /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 mr-1", "aria-hidden": "true" }),
-                      "Previous"
+                      m.page.previous
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: "text-muted-foreground",
                     "data-testid": "resource-page-indicator",
-                    children: [
-                      "Page ",
-                      currentPage,
-                      " of ",
-                      totalPages
-                    ]
+                    children: fillMessage(m.page.pageOf, { page: currentPage, pages: totalPages })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -3859,7 +3906,7 @@ function ResourcePage(props) {
                     onClick: () => pagerOnPageChange(currentPage + 1),
                     testID: "resource-page-next",
                     children: [
-                      "Next",
+                      m.page.next,
                       /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 ml-1", "aria-hidden": "true" })
                     ]
                   }
@@ -3876,10 +3923,10 @@ function ResourcePage(props) {
             item: {},
             open: detailOpen,
             onClose: closeDetail,
-            title: "Record not found",
+            title: m.page.notFoundTitle,
             width: detailWidth,
             layout: detail === "modal" ? "dialog" : "sheet",
-            children: () => /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": "resource-page-link-missing", children: isDataReadError(linked.error) && linked.error.outcome === "forbidden" ? linked.error.message : "This record doesn't exist, or you don't have access to it." })
+            children: () => /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": "resource-page-link-missing", children: isDataReadError(linked.error) && linked.error.outcome === "forbidden" ? linked.error.message : m.page.notFoundBody })
           } : {
             item: selectedItem,
             open: detailOpen,