@mendylanda/ui 0.3.2-dev.56.581b055ea0a9 → 0.3.2-dev.58.0ef9785a4046

package/dist/filters/filter-definition.d.ts

@@ -1,3 +1,4 @@
+import type { MendyMessages } from "../locale.js";
 import type { ReactNode } from "react";
 export interface FilterCodec<V> {
     parse(raw: string): V | null;
@@ -74,7 +75,7 @@ export interface FieldConfig<V> {
     clearValue?: V;
     isActive?: (value: V) => boolean;
     normalize?: (value: V) => V;
-    validate?: (value: V) => string | undefined;
+    validate?: (value: V, messages?: MendyMessages) => string | undefined;
     codec?: FilterCodec<V>;
     suggestion?: {
         value?: V;
@@ -133,7 +134,7 @@ export interface RuntimeField {
     clearValue: unknown;
     isActive(value: unknown): boolean;
     normalize(value: unknown): unknown;
-    validate(value: unknown): string | undefined;
+    validate(value: unknown, messages?: MendyMessages): string | undefined;
     codec: FilterCodec<unknown>;
     suggestion?: {
         value?: unknown;

package/dist/filters/filter-definition.js

@@ -1,3 +1,4 @@
+import { englishMessages } from "../locales/en.js";
 export function remoteOptions(source) {
     return { ...source, kind: "remote" };
 }
@@ -40,7 +41,7 @@ function makeField(kind, config, fallback, codec) {
         clearValue: config.clearValue === undefined ? fallback : config.clearValue,
         normalize,
         isActive: (value) => (config.isActive ? config.isActive(value) : valueIsActive(value)),
-        validate: (value) => config.validate?.(value),
+        validate: (value, messages) => config.validate?.(value, messages),
         codec: {
             parse: (raw) => {
                 const value = (config.codec ?? codec).parse(raw);
@@ -178,8 +179,8 @@ export const filter = {
     numberRange(config) {
         return makeField("numberRange", {
             normalize: (value) => (value?.some((bound) => bound !== null) ? value : null),
-            validate: (value) => value && value[0] !== null && value[1] !== null && value[0] > value[1]
-                ? "Minimum must not exceed maximum."
+            validate: (value, messages = englishMessages) => value && value[0] !== null && value[1] !== null && value[0] > value[1]
+                ? messages.numberRangeError
                 : undefined,
             ...config,
         }, null, jsonCodec((value) => value === null ||
@@ -191,9 +192,7 @@ export const filter = {
         return makeField("dateRange", {
             normalize: (value) => (value?.from || value?.to ? value : null),
             isActive: (value) => Boolean(value?.from || value?.to),
-            validate: (value) => value?.from && value.to && value.from > value.to
-                ? "Start date must not follow end date."
-                : undefined,
+            validate: (value, messages = englishMessages) => value?.from && value.to && value.from > value.to ? messages.dateRangeError : undefined,
             ...config,
         }, null, jsonCodec((value) => value === null ||
             (typeof value === "object" &&

package/dist/filters/filter-menu-focus.js

@@ -49,7 +49,7 @@ export function handleMenuTab(event, { trigger, editor, onClose, hasSelection, }
         (element.matches('[role^="menuitem"]') ? menuStops.has(element) : element.tabIndex >= 0));
     const index = stops.indexOf(target);
     const next = index < 0 ? undefined : stops[index + (event.shiftKey ? -1 : 1)];
-    if (target.closest('[aria-label="Filter types"]') &&
+    if (target.closest('[data-slot="filter-menu-list"]') &&
         !event.shiftKey &&
         hasSelection &&
         (!next || editor?.contains(next)))

package/dist/filters/filter-menu-panel.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { ArrowLeft, ChevronRight } from "lucide-react";
 import { Button, Input } from "../customization.js";
@@ -32,6 +33,7 @@ function selectedSection(sections, selectedId) {
 /** One dialog contains the filter list and its editor, with a single-panel layout on phones. */
 export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, anchor, trigger, }) {
     const { classNames, menuLayout } = useMendyUI();
+    const { t } = useMendyLocale();
     const desktop = useSyncExternalStore(subscribeViewport, isDesktop, serverDesktop);
     const selected = selectedSection(sections, selectedId);
     const content = useRef(null);
@@ -93,7 +95,7 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
     }
     const showList = desktop || !selected;
     const sideBySide = desktop && Boolean(selected);
-    return (_jsx(DropdownMenuContent, { ref: setContent, "data-mendy-ui": "", "data-slot": "filter-menu-panel", role: "dialog", "aria-label": "Filters", "aria-labelledby": undefined, "aria-orientation": undefined, align: desktop ? "start" : "end", alignOffset: alignOffset, side: side, style: anchorStyle, sideOffset: 7, collisionPadding: 16, onEscapeKeyDown: (event) => {
+    return (_jsx(DropdownMenuContent, { ref: setContent, "data-mendy-ui": "", "data-slot": "filter-menu-panel", role: "dialog", "aria-label": t("filters"), "aria-labelledby": undefined, "aria-orientation": undefined, align: desktop ? "start" : "end", alignOffset: alignOffset, side: side, style: anchorStyle, sideOffset: 7, collisionPadding: 16, onEscapeKeyDown: (event) => {
             if (selected && !desktop) {
                 event.preventDefault();
                 back();
@@ -136,10 +138,11 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
 }
 function EditorHeading({ section, desktop, back, onCleared, }) {
     const { classNames } = useMendyUI();
-    return (_jsxs("div", { className: cn("mui-222f930b8752 mui-8423dc94ee06 mui-27ead27a81df mui-71556df3b421 mui-074569488cca mui-bbe39cfb5cc6 mui-0f9e6672913a mui-b5edc3ea7c91 mui-3992de70b033 mui-daaac3fbf55e mui-aa0e3c036805 mui-0288c4ea71ea", classNames?.menuHeader), children: [!desktop && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: back, className: "mui-958e2cfcf5b6 mui-70007b876865 mui-e7e01cc7f4df mui-3992de70b033 mui-52101fc7d8bb", children: [_jsx(ArrowLeft, { "aria-hidden": "true", className: "mui-61c000c8a98a mui-36b12e8339c7" }), "Filters"] }), _jsx("span", { "aria-hidden": "true", className: "mui-35f35c41d134", children: "/" })] })), _jsx(MenuHeading, { label: section.label }), section.clear && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+    const { t } = useMendyLocale();
+    return (_jsxs("div", { className: cn("mui-222f930b8752 mui-8423dc94ee06 mui-27ead27a81df mui-71556df3b421 mui-074569488cca mui-bbe39cfb5cc6 mui-0f9e6672913a mui-b5edc3ea7c91 mui-3992de70b033 mui-daaac3fbf55e mui-aa0e3c036805 mui-0288c4ea71ea", classNames?.menuHeader), children: [!desktop && (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: back, className: "mui-958e2cfcf5b6 mui-70007b876865 mui-e7e01cc7f4df mui-3992de70b033 mui-52101fc7d8bb", children: [_jsx(ArrowLeft, { "aria-hidden": "true", className: "mui-61c000c8a98a mui-36b12e8339c7" }), t("filters")] }), _jsx("span", { "aria-hidden": "true", className: "mui-35f35c41d134", children: "/" })] })), _jsx(MenuHeading, { label: section.label }), section.clear && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
                     section.clear?.();
                     requestAnimationFrame(onCleared);
-                }, "aria-label": `Clear ${section.label} filter`, className: "mui-8cc46fa87f41 mui-ce1945804664 mui-1da2e8f173c5 mui-3992de70b033 mui-52101fc7d8bb mui-35f35c41d134", children: "Clear" }))] }));
+                }, "aria-label": t("clearFilter", { label: section.label }), className: "mui-8cc46fa87f41 mui-ce1945804664 mui-1da2e8f173c5 mui-3992de70b033 mui-52101fc7d8bb mui-35f35c41d134", children: t("clear") }))] }));
 }
 function MenuHeading({ label }) {
     const ref = useRef(null);
@@ -167,30 +170,31 @@ function MenuHeading({ label }) {
 function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, detached, rows, choose, keyboardNavigation, onPointerMove, }) {
     const { classNames } = useMendyUI();
     const [query, setQuery] = useValueDraft("types", () => "", "__menu:query");
+    const { t, code } = useMendyLocale();
     const collection = useRef(null);
     const matches = [];
-    const term = query.toLocaleLowerCase();
+    const term = query.toLocaleLowerCase(code);
     for (const section of sections) {
-        if (section.label.toLocaleLowerCase().includes(term))
+        if (section.label.toLocaleLowerCase(code).includes(term))
             matches.push({ ...section, key: section.id });
     }
-    return (_jsxs("div", { "data-slot": "filter-menu-list", className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94", desktop && selectedId && !detached && "mui-3b6d5fc7b061", detached && "mui-cb20bd519346 mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), children: [sections.length > 20 && (_jsx("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-b97db4a9f432", children: _jsx(Input, { type: "search", "aria-label": "Find a filter", placeholder: "Find a filter\u2026", value: query, className: "mui-b51243872d85", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+    return (_jsxs("div", { "data-slot": "filter-menu-list", className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94", desktop && selectedId && !detached && "mui-3b6d5fc7b061", detached && "mui-cb20bd519346 mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), children: [sections.length > 20 && (_jsx("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-b97db4a9f432", children: _jsx(Input, { type: "search", "aria-label": t("findFilter"), placeholder: t("findFilterPlaceholder"), value: query, className: "mui-b51243872d85", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
                         if (event.key === "ArrowDown") {
                             event.preventDefault();
                             collection.current?.focusFirst();
                         }
                         if (event.key !== "Escape" && event.key !== "Tab")
                             event.stopPropagation();
-                    } }) })), matches.length === 0 && (_jsx("p", { className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: sections.length ? "No matching filters." : "No filters available." })), _jsx(FilterCollection, { items: matches, role: "group", label: "Filter types", collectionRef: collection, initialKey: initialKey, renderBefore: (section, index) => index > 0 && section.separatorBefore && !query ? (_jsx("div", { "data-slot": "filter-menu-separator", className: "mui-1fcf28756bb1", children: _jsx("hr", { className: "mui-a2526bc2efa3 mui-c7d5500b77ab mui-dad556abfe15 mui-894c3815a57f" }) })) : null, className: cn("mui-80baa5d03af7", classNames?.menuList), children: (section, index, row) => (_jsxs(Button, { ...row, ref: (node) => {
+                    } }) })), matches.length === 0 && (_jsx("p", { className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: t(sections.length ? "noMatchingFilters" : "noFilters") })), _jsx(FilterCollection, { items: matches, role: "group", label: t("filterTypes"), collectionRef: collection, initialKey: initialKey, renderBefore: (section, index) => index > 0 && section.separatorBefore && !query ? (_jsx("div", { "data-slot": "filter-menu-separator", className: "mui-1fcf28756bb1", children: _jsx("hr", { className: "mui-a2526bc2efa3 mui-c7d5500b77ab mui-dad556abfe15 mui-894c3815a57f" }) })) : null, className: cn("mui-80baa5d03af7", classNames?.menuList), children: (section, index, row) => (_jsxs(Button, { ...row, ref: (node) => {
                         row.ref(node);
                         if (node)
                             rows.current.set(section.id, node);
                         else
                             rows.current.delete(section.id);
                     }, variant: "ghost", type: "button", "aria-label": section.label, "aria-description": matches.length > 100
-                        ? `${section.active ? "Filter applied. " : ""}${index + 1} of ${matches.length}`
+                        ? `${section.active ? t("filterApplied") + ". " : ""}${t("position", { index: index + 1, count: matches.length })}`
                         : section.active
-                            ? "Filter applied"
+                            ? t("filterApplied")
                             : undefined, "aria-expanded": selectedId === section.id, "aria-controls": selectedId === section.id ? `${panelId}-${section.id}` : undefined, "data-navigation": keyboardNavigation ? "keyboard" : "pointer", "data-separator": section.separatorBefore && !query ? "true" : undefined, disabled: section.disabled, className: cn("mui-a66e9985b093 mui-8423dc94ee06 mui-58d0413dd93c mui-c62ec162662e mui-074569488cca mui-02e603944040 mui-e7e01cc7f4df mui-b5edc3ea7c91 mui-c74ab393b96d mui-52101fc7d8bb mui-aa0e3c036805 mui-41d1475cf71a mui-dfc89afd7885", selectedId === section.id && "mui-292affc1f780 mui-cc209238d847", classNames?.menuRow), onPointerMove: (event) => {
                         if (!section.disabled)
                             onPointerMove(section.id, event);

package/dist/filters/filter-select-editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { useEffect, useRef, useState } from "react";
 import { FilterOptionSearch } from "./filter-option-search.js";
 import { DropdownMenuRadioGroup, DropdownMenuRadioItem } from "../primitives/dropdown-menu.js";
@@ -15,8 +16,9 @@ function handleSearchKey(event) {
     if (event.key !== "Escape" && event.key !== "Tab")
         event.stopPropagation();
 }
-function SearchableOptions({ label, options, searchable = true, searchPlaceholder, emptyMessage = "No options found.", autoFocus = true, children, }) {
+function SearchableOptions({ label, options, searchable = true, searchPlaceholder, emptyMessage, autoFocus = true, children, }) {
     const [query, setQuery] = useState("");
+    const { t, direction, code, configured } = useMendyLocale();
     const inputRef = useRef(null);
     useEffect(() => {
         if (!searchable || !autoFocus)
@@ -26,11 +28,11 @@ function SearchableOptions({ label, options, searchable = true, searchPlaceholde
     }, [searchable, autoFocus]);
     const filtered = !searchable
         ? options
-        : options.filter((option) => option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
-    return (_jsxs("div", { className: "mui-58d0413dd93c", "data-mendy-ui": "", "data-slot": "filter-options", onKeyDown: (event) => {
+        : options.filter((option) => option.label.toLocaleLowerCase(code).includes(query.toLocaleLowerCase(code)));
+    return (_jsxs("div", { className: "mui-58d0413dd93c", "data-mendy-ui": "", "data-slot": "filter-options", dir: configured ? direction : undefined, lang: code, onKeyDown: (event) => {
             if (event.key === "Tab")
                 event.stopPropagation();
-        }, children: [searchable && (_jsx(FilterOptionSearch, { ref: inputRef, "aria-label": label, placeholder: searchPlaceholder ?? label, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: handleSearchKey })), filtered.length ? (_jsx("div", { role: "menu", "aria-label": label, className: "mui-1dee6e3ec67d", children: children(filtered) })) : (_jsx("p", { role: "status", className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: emptyMessage }))] }));
+        }, children: [searchable && (_jsx(FilterOptionSearch, { ref: inputRef, "aria-label": label, placeholder: searchPlaceholder ?? label, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: handleSearchKey })), filtered.length ? (_jsx("div", { role: "menu", "aria-label": label, className: "mui-1dee6e3ec67d", children: children(filtered) })) : (_jsx("p", { role: "status", className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: emptyMessage ?? t("noOptions") }))] }));
 }
 /** Apply immediately, toggle the current choice off, and keep the dropdown open by default. */
 export function FilterSelectEditor({ value, onValueChange, clearValue = "", removable = true, closeOnSelect = false, ...props }) {

package/dist/filters/filter-text-editor.js

@@ -1,13 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "../customization.js";
 import { Label } from "../customization.js";
 import { Textarea } from "../customization.js";
 /** A draft is local to the open editor. Enter commits it by default; explicit button submission is optional. */
-export function FilterTextEditor({ label, defaultValue, onApply, validate, applyLabel = "Apply", commitMode = "enter", placeholder, }) {
+export function FilterTextEditor({ label, defaultValue, onApply, validate, applyLabel, commitMode = "enter", placeholder, }) {
     const id = useId();
     const inputRef = useRef(null);
+    const { t, direction, code, configured } = useMendyLocale();
     const [draft, setDraft] = useState(defaultValue);
     const error = validate?.(draft);
     useEffect(() => {
@@ -15,7 +17,7 @@ export function FilterTextEditor({ label, defaultValue, onApply, validate, apply
         const frame = requestAnimationFrame(() => inputRef.current?.focus());
         return () => cancelAnimationFrame(frame);
     }, []);
-    return (_jsxs("div", { "data-mendy-ui": "", className: "mui-37535002f0f7 mui-81b198a2db84 mui-267171770524 mui-094f5333853b", onKeyDown: (event) => {
+    return (_jsxs("div", { "data-mendy-ui": "", dir: configured ? direction : undefined, lang: code, className: "mui-37535002f0f7 mui-81b198a2db84 mui-267171770524 mui-094f5333853b", onKeyDown: (event) => {
             if (event.key === "Tab")
                 event.stopPropagation();
         }, children: [_jsx(Label, { htmlFor: id, className: "mui-c74ab393b96d mui-daaac3fbf55e", children: label }), _jsx(Textarea, { ref: inputRef, id: id, value: draft, placeholder: placeholder, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
@@ -30,5 +32,5 @@ export function FilterTextEditor({ label, defaultValue, onApply, validate, apply
                     // Let the textarea handle typing and cursor movement, not menu typeahead.
                     if (event.key !== "Escape" && event.key !== "Tab")
                         event.stopPropagation();
-                } }), error && (_jsx("p", { id: `${id}-error`, className: "mui-c74ab393b96d mui-887b9502d5c7", children: error })), commitMode === "apply" ? (_jsx(Button, { type: "button", size: "sm", disabled: Boolean(error), onClick: () => onApply(draft), children: applyLabel })) : (_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: "Enter to save. Shift+Enter for a new line." }))] }));
+                } }), error && (_jsx("p", { id: `${id}-error`, className: "mui-c74ab393b96d mui-887b9502d5c7", children: error })), commitMode === "apply" ? (_jsx(Button, { type: "button", size: "sm", disabled: Boolean(error), onClick: () => onApply(draft), children: applyLabel ?? t("apply") })) : (_jsx("p", { className: "mui-3992de70b033 mui-35f35c41d134", children: t("saveHint") }))] }));
 }

package/dist/filters/filters.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMendyLocale } from "../locale-context.js";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { m, LazyMotion, domAnimation, useReducedMotion } from "motion/react";
 import { XIcon } from "lucide-react";
@@ -32,9 +33,10 @@ export function FilterChipList({ children }) {
     return (_jsx(LazyMotion, { features: domAnimation, children: _jsx(ChipListContext.Provider, { value: true, children: _jsx(m.div, { variants: reducedMotion ? reducedVariant : listVariant, initial: "hidden", animate: "show", className: "mui-d1b2a59fbea7", children: children }) }) }));
 }
 export function FilterChip({ className, entranceDelay, ...props }) {
+    const locale = useMendyLocale();
     const inList = useContext(ChipListContext);
     const reducedMotion = useReducedMotion();
-    const content = (_jsx(m.div, { "data-mendy-ui": "", "data-slot": "filter-chip-entrance", variants: reducedMotion ? reducedVariant : itemVariant, initial: inList ? undefined : "hidden", animate: inList ? undefined : "show", transition: entranceDelay === undefined || reducedMotion ? undefined : { delay: entranceDelay }, className: "mui-184ddc11e5f9 mui-81b198a2db84", children: _jsx("div", { "data-mendy-ui": "", "data-slot": "filter-chip", className: cn("mui-123306850fe1 mui-539ae144f076 mui-81b198a2db84 mui-d5111d0e9f48 mui-3fa8c572949b mui-71556df3b421 mui-d191cb569aac mui-c74ab393b96d mui-35f35c41d134", className), ...props }) }));
+    const content = (_jsx(m.div, { "data-mendy-ui": "", "data-slot": "filter-chip-entrance", variants: reducedMotion ? reducedVariant : itemVariant, initial: inList ? undefined : "hidden", animate: inList ? undefined : "show", transition: entranceDelay === undefined || reducedMotion ? undefined : { delay: entranceDelay }, className: "mui-184ddc11e5f9 mui-81b198a2db84", children: _jsx("div", { "data-mendy-ui": "", "data-slot": "filter-chip", dir: locale.configured ? locale.direction : undefined, lang: locale.code, className: cn("mui-123306850fe1 mui-539ae144f076 mui-81b198a2db84 mui-d5111d0e9f48 mui-3fa8c572949b mui-71556df3b421 mui-d191cb569aac mui-c74ab393b96d mui-35f35c41d134", className), ...props }) }));
     return inList ? content : _jsx(LazyMotion, { features: domAnimation, children: content });
 }
 export function FilterEditorTrigger({ className, asChild, ...props }) {
@@ -51,14 +53,15 @@ export function FilterRemove({ className, children, ...props }) {
     return (_jsx(Button, { variant: "ghost", type: "button", "data-mendy-ui": "", "data-slot": "filter-remove", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-52417259a4f5 mui-04760bcd507f mui-8867d85ed290 mui-27ead27a81df mui-71556df3b421 mui-a503dd374cca mui-55860251be20 mui-163a623b3716 mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6", className), ...props, children: children ?? _jsx(XIcon, { className: "mui-61c000c8a98a", "aria-hidden": "true" }) }));
 }
 /** Editing and removal are independent. Values remain owned by the caller. */
-export function AppliedFilter({ label, editor, onRemove, disabled, open, onOpenChange, editLabel = `Edit ${label} filter`, removeLabel = `Remove ${label} filter`, contentProps, triggerProps, removeProps, children, ...props }) {
-    return (_jsx(FilterEditor, { open: open, onOpenChange: onOpenChange, children: _jsxs(FilterChip, { ...props, children: [editor ? (_jsx(FilterEditorTrigger, { disabled: disabled, "aria-label": editLabel, ...triggerProps, onClick: (event) => {
+export function AppliedFilter({ label, editor, onRemove, disabled, open, onOpenChange, editLabel, removeLabel, contentProps, triggerProps, removeProps, children, ...props }) {
+    const { t } = useMendyLocale();
+    return (_jsx(FilterEditor, { open: open, onOpenChange: onOpenChange, children: _jsxs(FilterChip, { ...props, children: [editor ? (_jsx(FilterEditorTrigger, { disabled: disabled, "aria-label": editLabel ?? t("editFilter", { label }), ...triggerProps, onClick: (event) => {
                         event.stopPropagation();
                         triggerProps?.onClick?.(event);
-                    }, children: children })) : (_jsx("span", { className: "mui-184ddc11e5f9 mui-e7e01cc7f4df", children: children })), onRemove && (_jsx(FilterRemove, { ...removeProps, disabled: disabled, "aria-label": removeLabel, onClick: (event) => {
+                    }, children: children })) : (_jsx("span", { className: "mui-184ddc11e5f9 mui-e7e01cc7f4df", children: children })), onRemove && (_jsx(FilterRemove, { ...removeProps, disabled: disabled, "aria-label": removeLabel ?? t("removeFilter", { label }), onClick: (event) => {
                         event.stopPropagation();
                         onRemove();
-                    } })), editor && (_jsx(FilterEditorContent, { "aria-label": `${label} filter`, ...contentProps, children: editor }))] }) }));
+                    } })), editor && (_jsx(FilterEditorContent, { "aria-label": t("filterLabel", { label }), ...contentProps, children: editor }))] }) }));
 }
 export function FilterMenuItem({ label, icon, children, contentProps, open, defaultOpen, onOpenChange, ...props }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);

package/dist/filters/index.d.ts

@@ -9,3 +9,6 @@ export * from "./filter-text-editor.js";
 export * from "./filter-select-editor.js";
 export * from "../customization.js";
 export * from "./use-filter-search.js";
+export { defineLocale } from "../locale.js";
+export type { MendyLocale, MendyMessages } from "../locale.js";
+export { useMendyLocale } from "../locale-context.js";

package/dist/filters/index.js

@@ -9,3 +9,5 @@ export * from "./filter-text-editor.js";
 export * from "./filter-select-editor.js";
 export * from "../customization.js";
 export * from "./use-filter-search.js";
+export { defineLocale } from "../locale.js";
+export { useMendyLocale } from "../locale-context.js";

package/dist/filters/use-filter-options.d.ts

@@ -16,7 +16,7 @@ export declare function useFilterOptions(id: string, field: RuntimeField, value:
     selected: Choice[];
     loading: boolean;
     resolving: boolean;
-    error: string | null | undefined;
+    error: string | undefined;
     retry(): void;
     hasMore: boolean;
     loadMore(): void;

package/dist/filters/use-filter-options.js

@@ -1,4 +1,5 @@
 "use client";
+import { useMendyLocale } from "../locale-context.js";
 import { useValueDraft } from "./use-value-draft.js";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 export const FilterOptionCache = createContext(null);
@@ -55,7 +56,7 @@ function acquire(cache, key, load) {
     };
 }
 function errorMessage(error) {
-    return error instanceof Error ? error.message : "Options could not be loaded.";
+    return error instanceof Error ? error.message : null;
 }
 export function selectedIds(value) {
     return Array.isArray(value)
@@ -70,6 +71,7 @@ function optionSearchQuery(field, localQuery) {
 }
 export function useFilterOptions(id, field, value, enabled) {
     const sharedCache = useContext(FilterOptionCache);
+    const { t, code } = useMendyLocale();
     const privateCache = useRef(new Map());
     const cache = sharedCache ?? privateCache.current;
     const source = field.source;
@@ -160,7 +162,7 @@ export function useFilterOptions(id, field, value, enabled) {
         : { items: [], loading: enabled, cursor: null, error: undefined };
     const matchingResolved = resolved.key === resolveKey;
     const items = remote ? currentPage.items : (source?.items ?? []);
-    const { selected, shown, knownSelected, missingLabels } = optionPresentation(source, items, ids, resolved, matchingResolved, resolved.identity === identity, remote, query, retainedSelection.current.identity === identity ? retainedSelection.current.choices : []);
+    const { selected, shown, knownSelected, missingLabels } = optionPresentation(source, items, ids, resolved, matchingResolved, resolved.identity === identity, remote, query, retainedSelection.current.identity === identity ? retainedSelection.current.choices : [], t, code);
     useLayoutEffect(() => {
         // Keep only actual labels for the current selection, never synthesized ID fallbacks.
         retainedSelection.current = { identity, choices: knownSelected };
@@ -177,7 +179,11 @@ export function useFilterOptions(id, field, value, enabled) {
         selected,
         loading: remote ? currentPage.loading : (source?.loading ?? false),
         resolving: missingLabels && (remote ? !matchingResolved : Boolean(source?.loading)),
-        error: currentPage.error ?? (matchingResolved ? resolved.error : undefined) ?? source?.error,
+        error: [currentPage.error, matchingResolved ? resolved.error : undefined]
+            .map((error) => (error === null ? t("optionsError") : error))
+            .find((error) => error !== undefined) ??
+            source?.error ??
+            undefined,
         retry() {
             source?.retry?.();
             retry((key) => key + 1);
@@ -214,7 +220,7 @@ export function useFilterOptions(id, field, value, enabled) {
         },
     };
 }
-function optionPresentation(source, items, ids, resolved, matchingResolved, retainedLabels, remote, query, previousSelection) {
+function optionPresentation(source, items, ids, resolved, matchingResolved, retainedLabels, remote, query, previousSelection, t, code) {
     const known = new Map();
     for (const item of [
         ...previousSelection,
@@ -225,13 +231,13 @@ function optionPresentation(source, items, ids, resolved, matchingResolved, reta
         known.set(item.value, item);
     const selected = ids.map((id) => known.get(id) ?? {
         value: id,
-        label: remote && matchingResolved && resolved.done && !resolved.error
-            ? `Unavailable (${id})`
+        label: remote && matchingResolved && resolved.done && resolved.error === undefined
+            ? t("unavailable", { id })
             : id,
     });
     const shown = remote || source?.onQueryChange
         ? items
-        : items.filter((item) => item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+        : items.filter((item) => item.label.toLocaleLowerCase(code).includes(query.toLocaleLowerCase(code)));
     return {
         selected,
         shown,

package/dist/filters/use-filters.js

@@ -1,7 +1,9 @@
 "use client";
+import { useMendyLocale } from "../locale-context.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { classifyPaste, initialValues } from "./filter-state.js";
 export function useFilterController(options) {
+    const { t, messages } = useMendyLocale();
     const [menuOpen, setMenuOpen] = useState(false);
     const [openField, setOpenField] = useState(null);
     const [editField, edit] = useState(null);
@@ -15,7 +17,9 @@ export function useFilterController(options) {
                 continue;
             try {
                 const next = entry.field.normalize(value);
-                const message = source === "clear" || source === "remove" ? undefined : entry.field.validate(next);
+                const message = source === "clear" || source === "remove"
+                    ? undefined
+                    : entry.field.validate(next, messages);
                 if (message) {
                     setError(message);
                     return message;
@@ -23,7 +27,7 @@ export function useFilterController(options) {
                 normalized[id] = next;
             }
             catch {
-                const message = "This filter value is invalid.";
+                const message = t("invalidFilter");
                 setError(message);
                 return message;
             }

package/dist/filters/use-url-filters.js

@@ -1,4 +1,5 @@
 "use client";
+import { useMendyLocale } from "../locale-context.js";
 import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { parseAsString, useQueryStates } from "nuqs";
 import { decodeFilters, encodeFilters, validateDefinitions } from "./filter-state.js";
@@ -28,6 +29,7 @@ function readSnapshot(key) {
 }
 /** Uses nuqs as the applied state owner. Only overflow values live outside the URL. */
 export function useUrlFilters(definitions, options) {
+    const { t } = useMendyLocale();
     const searchKey = options.searchKey ?? "q";
     const markerKey = options.markerKey ?? "_filters";
     validateDefinitions(definitions, searchKey, markerKey);
@@ -69,7 +71,7 @@ export function useUrlFilters(definitions, options) {
             return true;
         }
         catch {
-            report("Filters could not be saved in this browser. Keep this page open to retain them.");
+            report(t("persistError"));
             return false;
         }
     }
@@ -117,13 +119,13 @@ export function useUrlFilters(definitions, options) {
                     sessionStorage.removeItem(storageKey);
                 }
                 catch {
-                    report("Remembered filters could not be cleared in this browser.");
+                    report(t("clearPersistError"));
                 }
             }
             else
                 writeSnapshot(storageKey, owned.toString());
         }
-        void setRaw(next).catch(() => report("The URL could not be updated. Filters may not survive a reload."));
+        void setRaw(next).catch(() => report(t("urlError")));
     }
     useEffect(() => {
         setReady(true);
@@ -157,7 +159,7 @@ export function useUrlFilters(definitions, options) {
         ...controller,
         ready,
         shareable: !marker,
-        persistenceMessage: persistenceNotice(ready, marker, storedQuery, overflow?.marker, message),
+        persistenceMessage: persistenceNotice(ready, marker, storedQuery, overflow?.marker, message, t),
         set(key, value) {
             return controller.commit(key, value);
         },
@@ -176,13 +178,13 @@ export function useUrlFilters(definitions, options) {
         },
     };
 }
-function persistenceNotice(ready, marker, storedQuery, memoryMarker, message) {
+function persistenceNotice(ready, marker, storedQuery, memoryMarker, message, t) {
     if (ready && marker && storedQuery === null && memoryMarker !== marker)
-        return "This link refers to filters saved in another browser session. The full selection is unavailable.";
+        return t("missingSession");
     if (message)
         return message;
     if (marker)
-        return "This selection is saved in this browser session. The URL does not contain the full filters.";
+        return t("sessionOnly");
 }
 function appliedParams(raw, keys, marker, overflow, stored, scope) {
     if (overflow && overflow.marker === marker && overflow.scope === scope)

package/dist/locale-context.d.ts

@@ -0,0 +1,29 @@
+export declare const LocaleContext: import("react").Context<{
+    configured: boolean;
+    t: import("./locale.js").Translate;
+    number: {
+        (value: number): string;
+        (value: number | bigint): string;
+    };
+    date: (date?: Date | number) => string;
+    code: string;
+    direction: "ltr" | "rtl";
+    messages: import("./locale.js").MendyMessages;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: 1 | 4;
+}>;
+/** Use the same translations and formatting in custom editors and table controls. */
+export declare function useMendyLocale(): {
+    configured: boolean;
+    t: import("./locale.js").Translate;
+    number: {
+        (value: number): string;
+        (value: number | bigint): string;
+    };
+    date: (date?: Date | number) => string;
+    code: string;
+    direction: "ltr" | "rtl";
+    messages: import("./locale.js").MendyMessages;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: 1 | 4;
+};

package/dist/locale-context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext, useContext } from "react";
+import { createLocale } from "./locale.js";
+export const LocaleContext = createContext({ ...createLocale(), configured: false });
+/** Use the same translations and formatting in custom editors and table controls. */
+export function useMendyLocale() {
+    return useContext(LocaleContext);
+}

package/dist/locale.d.ts

@@ -0,0 +1,37 @@
+import { englishMessages } from "./locales/en.js";
+/** Dictionaries are plain data, including when passed across a server/client boundary. */
+export type MendyMessages = {
+    [K in keyof typeof englishMessages]: string;
+};
+export interface MendyLocale {
+    /** BCP 47 language tag used by Intl. */
+    code: string;
+    direction: "ltr" | "rtl";
+    messages: MendyMessages;
+    /** Gregorian calendar week convention; Sunday by default. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: 1 | 4;
+}
+/** Missing messages fall back to English; private locales need no registration. */
+export declare function defineLocale(locale: Omit<MendyLocale, "messages"> & {
+    messages?: Partial<MendyMessages>;
+}): MendyLocale;
+type Placeholders<S extends string> = S extends `${string}{${infer P}}${infer Rest}` ? P | Placeholders<Rest> : never;
+type Params<K extends keyof MendyMessages> = Placeholders<(typeof englishMessages)[K]>;
+export type Translate = <K extends keyof MendyMessages>(key: K, ...args: [Params<K>] extends [never] ? [] : [Record<Params<K>, string | number>]) => string;
+export declare function createLocale(locale?: MendyLocale): {
+    t: Translate;
+    number: {
+        (value: number): string;
+        (value: number | bigint): string;
+    };
+    date: (date?: Date | number) => string;
+    /** BCP 47 language tag used by Intl. */
+    code: string;
+    direction: "ltr" | "rtl";
+    messages: MendyMessages;
+    /** Gregorian calendar week convention; Sunday by default. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: 1 | 4;
+};
+export {};

package/dist/locale.js

@@ -0,0 +1,26 @@
+import { en, englishMessages } from "./locales/en.js";
+/** Missing messages fall back to English; private locales need no registration. */
+export function defineLocale(locale) {
+    return { ...locale, messages: { ...englishMessages, ...locale.messages } };
+}
+export function createLocale(locale = en) {
+    const numbers = new Intl.NumberFormat(locale.code);
+    const dates = new Intl.DateTimeFormat(locale.code, {
+        calendar: "gregory",
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+    const t = (key, ...args) => {
+        const params = args[0];
+        return (locale.messages[key] ?? englishMessages[key]).replace(/\{(\w+)\}/g, (token, name) => {
+            const value = params?.[name];
+            return value === undefined
+                ? token
+                : typeof value === "number"
+                    ? numbers.format(value)
+                    : value;
+        });
+    };
+    return { ...locale, t, number: numbers.format, date: dates.format };
+}