@groveback/ui 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -15,10 +15,12 @@ import { MarkdownField, renderMarkdown } from './MarkdownField';
 import { RelationSelect } from './RelationSelect';
 import { GroveRoutes, RouteIndex, matchRoute, resolveRoute } from './routes';
 import { SignIn } from './SignIn';
-import { GroveUiProvider, detectLocale, formatValue, resolveHref, useAction, useGroveUi, useMessages } from './runtime';
-export { Button, DataTable, Detail, Divider, Form, Grid, GroveRoutes, GroveUiProvider, Header, Heading, MarkdownField, renderMarkdown, RelationSelect, RouteIndex, SignIn, Stack, Text, detectLocale, formatValue, matchRoute, resolveHref, resolveRoute, useAction, useGroveUi, useMessages, };
+import { uiMessagesFor } from './messages';
+import { GroveUiProvider, detectLocale, formatValue, resolveHref, useAction, useGroveUi, useMessages, usePageTitle, useUiMessages, useUiText } from './runtime';
+export { Button, DataTable, Detail, Divider, Form, Grid, GroveRoutes, GroveUiProvider, Header, Heading, MarkdownField, renderMarkdown, RelationSelect, RouteIndex, SignIn, Stack, Text, detectLocale, formatValue, matchRoute, resolveHref, resolveRoute, useAction, useGroveUi, useMessages, usePageTitle, uiMessagesFor, useUiMessages, useUiText, };
 export type { RelationSelectProps } from './RelationSelect';
 export type { GroveUiContext } from './runtime';
+export type { UiMessageKey, UiMessages } from './messages';
 export type { GroveRoute } from './routes';
 export type { AuthLike, SignInProps } from './SignIn';
 export type { Action, AnyCollection, ButtonVariant, CollectionLike, Doc, FieldRef, Format, RowAction } from './types';

package/dist/index.js

@@ -1,9 +1,257 @@
 // src/components.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/MarkdownField.tsx
 import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/runtime.tsx
+import { createContext, useContext, useCallback, useEffect, useMemo } from "react";
+
+// src/messages.ts
+var EN = {
+  "common.loading": "Loading…",
+  "common.notFound": "Not found.",
+  "common.home": "Home",
+  "common.pages": "Pages",
+  "common.yes": "Yes",
+  "common.no": "No",
+  "header.openMenu": "Open menu",
+  "header.closeMenu": "Close menu",
+  "table.empty": "Nothing here yet.",
+  "form.save": "Save",
+  "form.saving": "Saving…",
+  "form.created": "Saved.",
+  "form.updated": "Changes saved.",
+  "action.confirmDelete": "Delete this item? This cannot be undone.",
+  "relation.select": "Select…",
+  "relation.search": "Search…",
+  "relation.noMatches": "No matches.",
+  "relation.none": "None",
+  "signIn.title": "Sign in",
+  "signIn.register": "Create account",
+  "signIn.mfa": "Two-factor code",
+  "signIn.name": "Name",
+  "signIn.email": "Email",
+  "signIn.password": "Password",
+  "signIn.code": "Code from your authenticator app, or a backup code",
+  "signIn.mfaUnsupported": "This account requires a second factor, which this app does not support.",
+  "signIn.submit": "Sign in",
+  "signIn.submitRegister": "Create account",
+  "signIn.submitMfa": "Verify",
+  "signIn.wait": "Please wait…",
+  "signIn.toRegister": "Create an account",
+  "signIn.toSignIn": "Have an account? Sign in",
+  "signIn.registerUnavailable": "Registration is not available.",
+  "markdown.bold": "Bold",
+  "markdown.italic": "Italic",
+  "markdown.heading": "Heading",
+  "markdown.listItem": "List item",
+  "markdown.code": "Code",
+  "markdown.link": "Link",
+  "markdown.placeholder": "Write Markdown…",
+  "markdown.write": "Write",
+  "markdown.preview": "Preview",
+  "markdown.nothingToPreview": "Nothing to preview"
+};
+var ES = {
+  "common.loading": "Cargando…",
+  "common.notFound": "No encontrado.",
+  "common.home": "Inicio",
+  "common.pages": "Páginas",
+  "common.yes": "Sí",
+  "common.no": "No",
+  "header.openMenu": "Abrir menú",
+  "header.closeMenu": "Cerrar menú",
+  "table.empty": "Todavía no hay nada.",
+  "form.save": "Guardar",
+  "form.saving": "Guardando…",
+  "form.created": "Guardado.",
+  "form.updated": "Cambios guardados.",
+  "action.confirmDelete": "¿Eliminar este elemento? No se puede deshacer.",
+  "relation.select": "Selecciona…",
+  "relation.search": "Buscar…",
+  "relation.noMatches": "Sin resultados.",
+  "relation.none": "Ninguno",
+  "signIn.title": "Iniciar sesión",
+  "signIn.register": "Crear cuenta",
+  "signIn.mfa": "Código de dos factores",
+  "signIn.name": "Nombre",
+  "signIn.email": "Correo",
+  "signIn.password": "Contraseña",
+  "signIn.code": "Código de tu app de autenticación, o un código de respaldo",
+  "signIn.mfaUnsupported": "Esta cuenta requiere un segundo factor, que esta app no admite.",
+  "signIn.submit": "Iniciar sesión",
+  "signIn.submitRegister": "Crear cuenta",
+  "signIn.submitMfa": "Verificar",
+  "signIn.wait": "Un momento…",
+  "signIn.toRegister": "Crear una cuenta",
+  "signIn.toSignIn": "¿Ya tienes cuenta? Inicia sesión",
+  "signIn.registerUnavailable": "El registro no está disponible.",
+  "markdown.bold": "Negrita",
+  "markdown.italic": "Cursiva",
+  "markdown.heading": "Encabezado",
+  "markdown.listItem": "Elemento de lista",
+  "markdown.code": "Código",
+  "markdown.link": "Enlace",
+  "markdown.placeholder": "Escribe en Markdown…",
+  "markdown.write": "Escribir",
+  "markdown.preview": "Vista previa",
+  "markdown.nothingToPreview": "Nada que previsualizar"
+};
+var UI_LOCALES = { en: EN, es: ES };
+function uiMessagesFor(locale) {
+  if (!locale)
+    return EN;
+  const exact = UI_LOCALES[locale];
+  if (exact)
+    return exact;
+  const lang = locale.split("-")[0]?.toLowerCase();
+  return (lang ? UI_LOCALES[lang] : undefined) ?? EN;
+}
+
+// src/runtime.tsx
+import { jsx } from "react/jsx-runtime";
+var Ctx = createContext(null);
+function GroveUiProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(Ctx.Provider, {
+    value,
+    children
+  });
+}
+var DEFAULT_CONTEXT = {
+  navigate: (href) => {
+    window.history.pushState({}, "", href);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }
+};
+function useGroveUi() {
+  return useContext(Ctx) ?? DEFAULT_CONTEXT;
+}
+function uiText(ctx, key) {
+  return ctx.messages?.[key] ?? uiMessagesFor(ctx.locale)[key];
+}
+function useUiText() {
+  const ctx = useGroveUi();
+  return useCallback((key) => uiText(ctx, key), [ctx]);
+}
+function useUiMessages() {
+  const ctx = useGroveUi();
+  return useMemo(() => ({ ...uiMessagesFor(ctx.locale), ...ctx.messages }), [ctx]);
+}
+function resolveHref(href, doc) {
+  if (!doc)
+    return href;
+  return href.replace(/:([A-Za-z_][A-Za-z0-9_]*)/g, (whole, name) => {
+    const value = doc[name];
+    return value === undefined || value === null ? whole : String(value);
+  });
+}
+function useAction() {
+  const ctx = useGroveUi();
+  return useCallback(async (action, opts = {}) => {
+    switch (action.kind) {
+      case "navigate":
+        ctx.navigate(resolveHref(action.href, opts.doc));
+        return;
+      case "delete": {
+        const id = opts.doc?.["id"];
+        if (typeof id !== "string" || !opts.collection)
+          return;
+        const ask = ctx.confirm ?? ((m) => window.confirm(m));
+        const message = action.confirm ?? uiText(ctx, "action.confirmDelete");
+        if (!await ask(message))
+          return;
+        await opts.collection.delete(id);
+        opts.onDone?.();
+        return;
+      }
+      case "endpoint": {
+        const href = resolveHref(action.path, opts.doc);
+        const method = action.method ?? "POST";
+        if (ctx.callEndpoint)
+          await ctx.callEndpoint(href, method);
+        else
+          await fetch(`${ctx.endpointBase ?? ""}${href}`, { method });
+        opts.onDone?.();
+        return;
+      }
+    }
+  }, [ctx]);
+}
+var MARKDOWN_CELL_MAX = 80;
+function formatValue(value, format, opts = {}) {
+  if (value === null || value === undefined)
+    return "";
+  switch (format) {
+    case "boolean":
+      return value ? opts.messages?.["common.yes"] ?? "Yes" : opts.messages?.["common.no"] ?? "No";
+    case "currency": {
+      const n = Number(value);
+      if (!Number.isFinite(n))
+        return String(value);
+      return new Intl.NumberFormat(opts.locale, {
+        style: "currency",
+        currency: opts.currency ?? "USD"
+      }).format(n);
+    }
+    case "number": {
+      const n = Number(value);
+      return Number.isFinite(n) ? new Intl.NumberFormat(opts.locale).format(n) : String(value);
+    }
+    case "date": {
+      const text = String(value);
+      const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
+      const d = day ? new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3])) : new Date(text);
+      return Number.isNaN(d.getTime()) ? text : d.toLocaleDateString(opts.locale);
+    }
+    case "markdown": {
+      const text = String(value).replace(/\s+/g, " ").trim();
+      if (text.length <= MARKDOWN_CELL_MAX)
+        return text;
+      const cut = text.slice(0, MARKDOWN_CELL_MAX);
+      const lastSpace = cut.lastIndexOf(" ");
+      return `${(lastSpace > MARKDOWN_CELL_MAX / 2 ? cut.slice(0, lastSpace) : cut).trimEnd()}…`;
+    }
+    default:
+      return typeof value === "object" ? JSON.stringify(value) : String(value);
+  }
+}
+function useMessages(messages, fallback) {
+  const { locale } = useGroveUi();
+  return useCallback((key) => {
+    const entry = messages[key];
+    if (!entry)
+      return key;
+    return (locale !== undefined ? entry[locale] : undefined) ?? entry[fallback] ?? key;
+  }, [messages, locale, fallback]);
+}
+function usePageTitle(title) {
+  useEffect(() => {
+    if (typeof document === "undefined" || !title)
+      return;
+    const previous = document.title;
+    document.title = title;
+    return () => {
+      document.title = previous;
+    };
+  }, [title]);
+}
+function detectLocale(locales, preferred = typeof navigator !== "undefined" ? navigator.languages : []) {
+  const first = locales[0] ?? "en";
+  for (const want of preferred) {
+    const exact = locales.find((l) => l.toLowerCase() === want.toLowerCase());
+    if (exact)
+      return exact;
+    const lang = want.split("-")[0]?.toLowerCase();
+    const loose = locales.find((l) => l.split("-")[0]?.toLowerCase() === lang);
+    if (loose)
+      return loose;
+  }
+  return first;
+}
+
+// src/MarkdownField.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -46,12 +294,12 @@ function renderMarkdown(src) {
 `);
 }
 var TOOLS = [
-  { key: "b", label: "Bold", glyph: "B", wrap: { before: "**", after: "**", placeholder: "bold" } },
-  { key: "i", label: "Italic", glyph: "I", wrap: { before: "*", after: "*", placeholder: "italic" } },
-  { key: "h", label: "Heading", glyph: "H", wrap: { before: "## ", after: "", placeholder: "Heading" } },
-  { key: "ul", label: "List item", glyph: "•", wrap: { before: "- ", after: "", placeholder: "item" } },
-  { key: "code", label: "Code", glyph: "</>", wrap: { before: "`", after: "`", placeholder: "code" } },
-  { key: "a", label: "Link", glyph: "\uD83D\uDD17", wrap: { before: "[", after: "](https://)", placeholder: "text" } }
+  { key: "b", label: "markdown.bold", glyph: "B", wrap: { before: "**", after: "**", placeholder: "bold" } },
+  { key: "i", label: "markdown.italic", glyph: "I", wrap: { before: "*", after: "*", placeholder: "italic" } },
+  { key: "h", label: "markdown.heading", glyph: "H", wrap: { before: "## ", after: "", placeholder: "Heading" } },
+  { key: "ul", label: "markdown.listItem", glyph: "•", wrap: { before: "- ", after: "", placeholder: "item" } },
+  { key: "code", label: "markdown.code", glyph: "</>", wrap: { before: "`", after: "`", placeholder: "code" } },
+  { key: "a", label: "markdown.link", glyph: "\uD83D\uDD17", wrap: { before: "[", after: "](https://)", placeholder: "text" } }
 ];
 var TOOL_BUTTON = "inline-flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-xs text-neutral-600 " + "hover:bg-neutral-100 hover:text-neutral-900 disabled:opacity-40 " + "dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100";
 var PREVIEW_TYPOGRAPHY = "min-h-40 px-3 py-2 text-sm [&_a]:underline [&_code]:rounded [&_code]:bg-neutral-100 [&_code]:px-1 " + "[&_h1]:text-lg [&_h1]:font-semibold [&_h2]:text-base [&_h2]:font-semibold [&_h3]:font-semibold " + "[&_p]:my-2 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 dark:[&_code]:bg-neutral-800";
@@ -59,6 +307,7 @@ function MarkdownField({
   value,
   onChange
 }) {
+  const t = useUiText();
   const [mode, setMode] = useState("write");
   const [el, setEl] = useState(null);
   function apply(wrap) {
@@ -81,53 +330,53 @@ function MarkdownField({
       /* @__PURE__ */ jsxs("div", {
         className: "flex items-center gap-0.5 border-b border-neutral-200 px-1 py-1 dark:border-neutral-800",
         children: [
-          TOOLS.map((t) => /* @__PURE__ */ jsx("button", {
+          TOOLS.map((tool) => /* @__PURE__ */ jsx2("button", {
             type: "button",
-            title: t.label,
-            "aria-label": t.label,
+            title: t(tool.label),
+            "aria-label": t(tool.label),
             disabled: mode === "preview",
-            onClick: () => apply(t.wrap),
+            onClick: () => apply(tool.wrap),
             className: TOOL_BUTTON,
-            children: t.glyph
-          }, t.key)),
+            children: tool.glyph
+          }, tool.key)),
           /* @__PURE__ */ jsxs("div", {
             className: "ml-auto flex gap-0.5",
             children: [
-              /* @__PURE__ */ jsx("button", {
+              /* @__PURE__ */ jsx2("button", {
                 type: "button",
                 onClick: () => setMode("write"),
                 className: tab(mode === "write"),
-                children: "Write"
+                children: t("markdown.write")
               }),
-              /* @__PURE__ */ jsx("button", {
+              /* @__PURE__ */ jsx2("button", {
                 type: "button",
                 onClick: () => setMode("preview"),
                 className: tab(mode === "preview"),
-                children: "Preview"
+                children: t("markdown.preview")
               })
             ]
           })
         ]
       }),
-      mode === "write" ? /* @__PURE__ */ jsx("textarea", {
+      mode === "write" ? /* @__PURE__ */ jsx2("textarea", {
         ref: setEl,
         rows: 8,
         value,
         spellCheck: false,
-        placeholder: "Write Markdown…",
+        placeholder: t("markdown.placeholder"),
         onChange: (e) => onChange(e.target.value),
         className: "w-full resize-y rounded-b-md border-0 bg-transparent px-3 py-2 font-mono text-sm text-neutral-900 outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-500"
-      }) : /* @__PURE__ */ jsx("div", {
+      }) : /* @__PURE__ */ jsx2("div", {
         className: PREVIEW_TYPOGRAPHY,
-        dangerouslySetInnerHTML: { __html: renderMarkdown(value || "_Nothing to preview_") }
+        dangerouslySetInnerHTML: { __html: renderMarkdown(value || `_${t("markdown.nothingToPreview")}_`) }
       })
     ]
   });
 }
 
 // src/RelationSelect.tsx
-import { useEffect, useMemo, useRef, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var PAGE = 200;
 function labelOf(doc, field) {
   const raw = doc[field];
@@ -139,13 +388,14 @@ function labelOf(doc, field) {
 }
 function RelationSelect(props) {
   const { collection, displayField, value, onChange, placeholder, required } = props;
+  const t = useUiText();
   const [docs, setDocs] = useState2(null);
   const [error, setError] = useState2(null);
   const [query, setQuery] = useState2("");
   const [open, setOpen] = useState2(false);
   const [truncated, setTruncated] = useState2(false);
   const boxRef = useRef(null);
-  useEffect(() => {
+  useEffect2(() => {
     let live = true;
     collection.find({ limit: PAGE }).then((found) => {
       if (!live)
@@ -160,7 +410,7 @@ function RelationSelect(props) {
       live = false;
     };
   }, [collection]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open)
       return;
     const onDown = (e) => {
@@ -170,8 +420,8 @@ function RelationSelect(props) {
     document.addEventListener("mousedown", onDown);
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
-  const selected = useMemo(() => (docs ?? []).find((d) => d["id"] === value) ?? null, [docs, value]);
-  const matches = useMemo(() => {
+  const selected = useMemo2(() => (docs ?? []).find((d) => d["id"] === value) ?? null, [docs, value]);
+  const matches = useMemo2(() => {
     const all = docs ?? [];
     const q = query.trim().toLowerCase();
     if (q === "")
@@ -179,12 +429,12 @@ function RelationSelect(props) {
     return all.filter((d) => labelOf(d, displayField).toLowerCase().includes(q));
   }, [docs, displayField, query]);
   if (error) {
-    return /* @__PURE__ */ jsx2("p", {
+    return /* @__PURE__ */ jsx3("p", {
       className: "text-xs text-red-600",
       children: error
     });
   }
-  const buttonLabel = selected ? labelOf(selected, displayField) : value !== "" ? value : placeholder ?? "Select…";
+  const buttonLabel = selected ? labelOf(selected, displayField) : value !== "" ? value : placeholder ?? t("relation.select");
   return /* @__PURE__ */ jsxs2("div", {
     ref: boxRef,
     className: "relative",
@@ -194,11 +444,11 @@ function RelationSelect(props) {
         onClick: () => setOpen((v) => !v),
         className: "flex w-full items-center justify-between rounded-md border border-neutral-300 px-3 py-1.5 text-left text-sm dark:border-neutral-700 dark:bg-neutral-950",
         children: [
-          /* @__PURE__ */ jsx2("span", {
+          /* @__PURE__ */ jsx3("span", {
             className: selected || value ? "" : "text-neutral-400",
-            children: docs === null ? "Loading…" : buttonLabel
+            children: docs === null ? t("common.loading") : buttonLabel
           }),
-          /* @__PURE__ */ jsx2("span", {
+          /* @__PURE__ */ jsx3("span", {
             "aria-hidden": true,
             className: "ml-2 text-neutral-400",
             children: "▾"
@@ -208,18 +458,18 @@ function RelationSelect(props) {
       open ? /* @__PURE__ */ jsxs2("div", {
         className: "absolute z-20 mt-1 w-full rounded-md border border-neutral-200 bg-white shadow-lg dark:border-neutral-800 dark:bg-neutral-950",
         children: [
-          /* @__PURE__ */ jsx2("input", {
+          /* @__PURE__ */ jsx3("input", {
             autoFocus: true,
             value: query,
             onChange: (e) => setQuery(e.target.value),
-            placeholder: "Search…",
+            placeholder: t("relation.search"),
             className: "w-full rounded-t-md border-b border-neutral-200 px-3 py-1.5 text-sm outline-none dark:border-neutral-800 dark:bg-neutral-950"
           }),
           /* @__PURE__ */ jsxs2("ul", {
             className: "max-h-56 overflow-auto py-1",
             children: [
-              !required ? /* @__PURE__ */ jsx2("li", {
-                children: /* @__PURE__ */ jsx2("button", {
+              !required ? /* @__PURE__ */ jsx3("li", {
+                children: /* @__PURE__ */ jsx3("button", {
                   type: "button",
                   onClick: () => {
                     onChange("");
@@ -227,16 +477,16 @@ function RelationSelect(props) {
                     setQuery("");
                   },
                   className: "w-full px-3 py-1.5 text-left text-sm text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-900",
-                  children: "None"
+                  children: t("relation.none")
                 })
               }) : null,
-              matches.length === 0 ? /* @__PURE__ */ jsx2("li", {
+              matches.length === 0 ? /* @__PURE__ */ jsx3("li", {
                 className: "px-3 py-2 text-xs text-neutral-500",
-                children: "No matches."
+                children: t("relation.noMatches")
               }) : matches.map((doc) => {
                 const id = typeof doc["id"] === "string" ? doc["id"] : "";
-                return /* @__PURE__ */ jsx2("li", {
-                  children: /* @__PURE__ */ jsx2("button", {
+                return /* @__PURE__ */ jsx3("li", {
+                  children: /* @__PURE__ */ jsx3("button", {
                     type: "button",
                     onClick: () => {
                       onChange(id);
@@ -264,126 +514,6 @@ function RelationSelect(props) {
   });
 }
 
-// src/runtime.tsx
-import { createContext, useContext, useCallback } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Ctx = createContext(null);
-function GroveUiProvider({ value, children }) {
-  return /* @__PURE__ */ jsx3(Ctx.Provider, {
-    value,
-    children
-  });
-}
-var DEFAULT_CONTEXT = {
-  navigate: (href) => {
-    window.history.pushState({}, "", href);
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  }
-};
-function useGroveUi() {
-  return useContext(Ctx) ?? DEFAULT_CONTEXT;
-}
-function resolveHref(href, doc) {
-  if (!doc)
-    return href;
-  return href.replace(/:([A-Za-z_][A-Za-z0-9_]*)/g, (whole, name) => {
-    const value = doc[name];
-    return value === undefined || value === null ? whole : String(value);
-  });
-}
-function useAction() {
-  const ctx = useGroveUi();
-  return useCallback(async (action, opts = {}) => {
-    switch (action.kind) {
-      case "navigate":
-        ctx.navigate(resolveHref(action.href, opts.doc));
-        return;
-      case "delete": {
-        const id = opts.doc?.["id"];
-        if (typeof id !== "string" || !opts.collection)
-          return;
-        const ask = ctx.confirm ?? ((m) => window.confirm(m));
-        const message = action.confirm ?? "Delete this item? This cannot be undone.";
-        if (!await ask(message))
-          return;
-        await opts.collection.delete(id);
-        opts.onDone?.();
-        return;
-      }
-      case "endpoint": {
-        const href = resolveHref(action.path, opts.doc);
-        const method = action.method ?? "POST";
-        if (ctx.callEndpoint)
-          await ctx.callEndpoint(href, method);
-        else
-          await fetch(`${ctx.endpointBase ?? ""}${href}`, { method });
-        opts.onDone?.();
-        return;
-      }
-    }
-  }, [ctx]);
-}
-var MARKDOWN_CELL_MAX = 80;
-function formatValue(value, format, opts = {}) {
-  if (value === null || value === undefined)
-    return "";
-  switch (format) {
-    case "boolean":
-      return value ? "Yes" : "No";
-    case "currency": {
-      const n = Number(value);
-      if (!Number.isFinite(n))
-        return String(value);
-      return new Intl.NumberFormat(opts.locale, {
-        style: "currency",
-        currency: opts.currency ?? "USD"
-      }).format(n);
-    }
-    case "number": {
-      const n = Number(value);
-      return Number.isFinite(n) ? new Intl.NumberFormat(opts.locale).format(n) : String(value);
-    }
-    case "date": {
-      const text = String(value);
-      const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
-      const d = day ? new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3])) : new Date(text);
-      return Number.isNaN(d.getTime()) ? text : d.toLocaleDateString(opts.locale);
-    }
-    case "markdown": {
-      const text = String(value).replace(/\s+/g, " ").trim();
-      if (text.length <= MARKDOWN_CELL_MAX)
-        return text;
-      const cut = text.slice(0, MARKDOWN_CELL_MAX);
-      const lastSpace = cut.lastIndexOf(" ");
-      return `${(lastSpace > MARKDOWN_CELL_MAX / 2 ? cut.slice(0, lastSpace) : cut).trimEnd()}…`;
-    }
-    default:
-      return typeof value === "object" ? JSON.stringify(value) : String(value);
-  }
-}
-function useMessages(messages, fallback) {
-  const { locale } = useGroveUi();
-  return useCallback((key) => {
-    const entry = messages[key];
-    if (!entry)
-      return key;
-    return (locale !== undefined ? entry[locale] : undefined) ?? entry[fallback] ?? key;
-  }, [messages, locale, fallback]);
-}
-function detectLocale(locales, preferred = typeof navigator !== "undefined" ? navigator.languages : []) {
-  const first = locales[0] ?? "en";
-  for (const want of preferred) {
-    const exact = locales.find((l) => l.toLowerCase() === want.toLowerCase());
-    if (exact)
-      return exact;
-    const lang = want.split("-")[0]?.toLowerCase();
-    const loose = locales.find((l) => l.split("-")[0]?.toLowerCase() === lang);
-    if (loose)
-      return loose;
-  }
-  return first;
-}
-
 // src/styles.ts
 function cx(...parts) {
   return parts.filter(Boolean).join(" ");
@@ -447,6 +577,7 @@ function Text({ muted, children }) {
 function Header(props) {
   const { brand, brandHref = "/", links, actions, sticky } = props;
   const dispatch = useAction();
+  const t = useUiText();
   const [open, setOpen] = useState3(false);
   const go = useCallback2((href) => (e) => {
     if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0)
@@ -490,7 +621,7 @@ function Header(props) {
           hasNav ? /* @__PURE__ */ jsx4("button", {
             type: "button",
             "data-grove-nav-toggle": true,
-            "aria-label": open ? "Close menu" : "Open menu",
+            "aria-label": t(open ? "header.closeMenu" : "header.openMenu"),
             "aria-expanded": open,
             onClick: () => setOpen((v) => !v),
             className: "ml-auto inline-flex items-center justify-center rounded-md p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 md:hidden dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100",
@@ -595,7 +726,7 @@ function useAsync(load, deps) {
   const [error, setError] = useState3(null);
   const [loading, setLoading] = useState3(true);
   const [nonce, setNonce] = useState3(0);
-  useEffect2(() => {
+  useEffect3(() => {
     let live = true;
     setLoading(true);
     setError(null);
@@ -626,7 +757,7 @@ function useRelations(fields, docs, resolveCollection) {
   const [map, setMap] = useState3({});
   const relations = fields.filter((f) => f.display);
   const key = JSON.stringify(relations.map((f) => f.field)) + (docs?.length ?? 0);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!docs || relations.length === 0 || !resolveCollection)
       return;
     let live = true;
@@ -650,25 +781,26 @@ function useRelations(fields, docs, resolveCollection) {
   }, [key, resolveCollection]);
   return map;
 }
-function cellValue(doc, field, relations, locale, currency) {
+function cellValue(doc, field, relations, locale, currency, messages) {
   const raw = doc[field.field];
   if (field.display) {
     const id = typeof raw === "string" ? raw : "";
     const referenced = relations[field.field]?.[id];
     if (referenced)
-      return formatValue(referenced[field.display.field], "text", { locale, currency });
+      return formatValue(referenced[field.display.field], "text", { locale, currency, messages });
   }
-  return formatValue(raw, field.format, { locale, currency });
+  return formatValue(raw, field.format, { locale, currency, messages });
 }
 function DataTable(props) {
   const { collection, options, columns, rowHref, rowActions, emptyText, resolveRelation } = props;
   const ctx = useGroveUi();
+  const messages = useUiMessages();
   const { data, error, loading, reload } = useAsync(() => collection.find(options), [JSON.stringify(options)]);
   const relations = useRelations(columns, data, resolveRelation);
   if (loading)
     return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
-      children: "Loading…"
+      children: messages["common.loading"]
     });
   if (error)
     return /* @__PURE__ */ jsx4(Message, {
@@ -678,7 +810,7 @@ function DataTable(props) {
   if (!data || data.length === 0)
     return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
-      children: emptyText ?? "Nothing here yet."
+      children: emptyText ?? messages["table.empty"]
     });
   return /* @__PURE__ */ jsx4("div", {
     className: "w-full overflow-x-auto rounded-md border border-neutral-200 dark:border-neutral-800",
@@ -706,7 +838,7 @@ function DataTable(props) {
             children: [
               columns.map((c) => /* @__PURE__ */ jsx4("td", {
                 className: "px-3 py-2",
-                children: cellValue(doc, c, relations, ctx.locale, ctx.currency)
+                children: cellValue(doc, c, relations, ctx.locale, ctx.currency, messages)
               }, c.field)),
               rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx4("td", {
                 className: "px-3 py-2",
@@ -733,12 +865,13 @@ function DataTable(props) {
 function Detail(props) {
   const { collection, id, fields, resolveRelation } = props;
   const ctx = useGroveUi();
+  const messages = useUiMessages();
   const { data, error, loading } = useAsync(() => collection.get(id), [id]);
   const relations = useRelations(fields, data ? [data] : null, resolveRelation);
   if (loading)
     return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
-      children: "Loading…"
+      children: messages["common.loading"]
     });
   if (error)
     return /* @__PURE__ */ jsx4(Message, {
@@ -748,7 +881,7 @@ function Detail(props) {
   if (!data)
     return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
-      children: "Not found."
+      children: messages["common.notFound"]
     });
   return /* @__PURE__ */ jsx4("dl", {
     className: "divide-y divide-neutral-200 rounded-md border border-neutral-200 dark:divide-neutral-800 dark:border-neutral-800",
@@ -764,7 +897,7 @@ function Detail(props) {
           children: String(data[f.field] ?? "")
         }) : /* @__PURE__ */ jsx4("dd", {
           className: "col-span-2 text-sm",
-          children: cellValue(data, f, relations, ctx.locale, ctx.currency)
+          children: cellValue(data, f, relations, ctx.locale, ctx.currency, messages)
         })
       ]
     }, f.field))
@@ -795,13 +928,14 @@ function coerce(raw, format) {
 function Form(props) {
   const { collection, mode, id, fields, submitLabel, onSuccess, resolveRelation } = props;
   const dispatch = useAction();
+  const t = useUiText();
   const [values, setValues] = useState3({});
   const [error, setError] = useState3(null);
   const [busy, setBusy] = useState3(false);
   const [done, setDone] = useState3(false);
   const submitting = useRef2(false);
   const [loading, setLoading] = useState3(mode === "update");
-  useEffect2(() => {
+  useEffect3(() => {
     if (mode !== "update" || !id)
       return;
     let live = true;
@@ -865,7 +999,7 @@ function Form(props) {
   if (loading)
     return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
-      children: "Loading…"
+      children: t("common.loading")
     });
   return /* @__PURE__ */ jsxs3("form", {
     onSubmit: submit,
@@ -919,14 +1053,14 @@ function Form(props) {
       }) : null,
       done && !error ? /* @__PURE__ */ jsx4(Message, {
         tone: "success",
-        children: mode === "create" ? "Saved." : "Changes saved."
+        children: t(mode === "create" ? "form.created" : "form.updated")
       }) : null,
       /* @__PURE__ */ jsx4("div", {
         children: /* @__PURE__ */ jsx4("button", {
           type: "submit",
           disabled: busy,
           className: cx(BUTTON_BASE, VARIANT.default),
-          children: busy ? "Saving…" : submitLabel ?? "Save"
+          children: busy ? t("form.saving") : submitLabel ?? t("form.save")
         })
       })
     ]
@@ -934,7 +1068,7 @@ function Form(props) {
 }
 
 // src/routes.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function matchRoute(path, pattern) {
   const clean = (path.split(/[?#]/)[0] ?? "").replace(/\/+$/, "") || "/";
@@ -971,7 +1105,7 @@ function resolveRoute(routes, path) {
 function GroveRoutes(props) {
   const { routes, context, fallback, children, gate } = props;
   const [path, setPath] = useState4(() => window.location.pathname);
-  useEffect3(() => {
+  useEffect4(() => {
     const onPop = () => setPath(window.location.pathname);
     window.addEventListener("popstate", onPop);
     return () => window.removeEventListener("popstate", onPop);
@@ -980,7 +1114,7 @@ function GroveRoutes(props) {
     window.history.pushState({}, "", href);
     setPath(href.split(/[?#]/)[0] ?? href);
   }, []);
-  const value = useMemo2(() => ({ ...context, navigate }), [context, navigate]);
+  const value = useMemo3(() => ({ ...context, navigate }), [context, navigate]);
   const hit = resolveRoute(routes, path);
   const isRoot = (path.replace(/\/+$/, "") || "/") === "/";
   const matched = hit ? hit.route.render(hit.params) : fallback ?? (isRoot ? /* @__PURE__ */ jsx5(RouteIndex, {
@@ -997,12 +1131,13 @@ function GroveRoutes(props) {
 }
 function NotFound() {
   const { navigate } = useGroveUi();
+  const t = useUiText();
   return /* @__PURE__ */ jsxs4("div", {
     className: "flex flex-col gap-2 p-6",
     children: [
       /* @__PURE__ */ jsx5("p", {
         className: "text-sm text-neutral-500",
-        children: "Not found."
+        children: t("common.notFound")
       }),
       /* @__PURE__ */ jsx5("a", {
         href: "/",
@@ -1011,21 +1146,22 @@ function NotFound() {
           e.preventDefault();
           navigate("/");
         },
-        children: "Home"
+        children: t("common.home")
       })
     ]
   });
 }
 function RouteIndex({ routes }) {
   const { navigate } = useGroveUi();
+  const t = useUiText();
   const pages = routes.filter((r) => !r.path.split("/").some((seg) => seg.startsWith(":")));
   return /* @__PURE__ */ jsxs4("nav", {
     className: "flex flex-col gap-3 p-6",
-    "aria-label": "Pages",
+    "aria-label": t("common.pages"),
     children: [
       /* @__PURE__ */ jsx5("h1", {
         className: "text-2xl font-semibold",
-        children: "Pages"
+        children: t("common.pages")
       }),
       /* @__PURE__ */ jsx5("ul", {
         className: "flex flex-col gap-1",
@@ -1056,6 +1192,7 @@ import { useCallback as useCallback4, useRef as useRef3, useState as useState5 }
 import { jsx as jsx6, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
 function SignIn(props) {
   const { auth, title, allowRegister = typeof auth.register === "function", onSignedIn, children } = props;
+  const t = useUiText();
   const [signedIn, setSignedIn] = useState5(() => auth.getTokens() !== null);
   const [mode, setMode] = useState5("login");
   const [email, setEmail] = useState5("");
@@ -1079,13 +1216,13 @@ function SignIn(props) {
     try {
       if (mode === "mfa") {
         if (!auth.verifyMfa)
-          throw new Error("This account requires a second factor, which this app does not support.");
+          throw new Error(t("signIn.mfaUnsupported"));
         finish(await auth.verifyMfa(code));
         return;
       }
       if (mode === "register") {
         if (!auth.register)
-          throw new Error("Registration is not available.");
+          throw new Error(t("signIn.registerUnavailable"));
         await auth.register(email, password, name.trim().length > 0 ? name.trim() : undefined);
       }
       const user = await auth.login(email, password);
@@ -1100,12 +1237,12 @@ function SignIn(props) {
       submitting.current = false;
       setBusy(false);
     }
-  }, [auth, code, email, finish, mode, name, password]);
+  }, [auth, code, email, finish, mode, name, password, t]);
   if (signedIn)
     return /* @__PURE__ */ jsx6(Fragment2, {
       children
     });
-  const heading = mode === "register" ? "Create account" : mode === "mfa" ? "Two-factor code" : title ?? "Sign in";
+  const heading = mode === "register" ? t("signIn.register") : mode === "mfa" ? t("signIn.mfa") : title ?? t("signIn.title");
   const label = "text-sm text-neutral-600 dark:text-neutral-400";
   return /* @__PURE__ */ jsx6("div", {
     className: "flex min-h-screen items-center justify-center p-6",
@@ -1123,7 +1260,7 @@ function SignIn(props) {
           children: [
             /* @__PURE__ */ jsx6("span", {
               className: label,
-              children: "Code from your authenticator app, or a backup code"
+              children: t("signIn.code")
             }),
             /* @__PURE__ */ jsx6("input", {
               className: INPUT_CLASS,
@@ -1142,7 +1279,7 @@ function SignIn(props) {
               children: [
                 /* @__PURE__ */ jsx6("span", {
                   className: label,
-                  children: "Name"
+                  children: t("signIn.name")
                 }),
                 /* @__PURE__ */ jsx6("input", {
                   className: INPUT_CLASS,
@@ -1157,7 +1294,7 @@ function SignIn(props) {
               children: [
                 /* @__PURE__ */ jsx6("span", {
                   className: label,
-                  children: "Email"
+                  children: t("signIn.email")
                 }),
                 /* @__PURE__ */ jsx6("input", {
                   className: INPUT_CLASS,
@@ -1174,7 +1311,7 @@ function SignIn(props) {
               children: [
                 /* @__PURE__ */ jsx6("span", {
                   className: label,
-                  children: "Password"
+                  children: t("signIn.password")
                 }),
                 /* @__PURE__ */ jsx6("input", {
                   className: INPUT_CLASS,
@@ -1200,7 +1337,7 @@ function SignIn(props) {
               type: "submit",
               disabled: busy,
               className: cx(BUTTON_BASE, VARIANT.default),
-              children: busy ? "Please wait…" : mode === "register" ? "Create account" : mode === "mfa" ? "Verify" : "Sign in"
+              children: busy ? t("signIn.wait") : mode === "register" ? t("signIn.submitRegister") : mode === "mfa" ? t("signIn.submitMfa") : t("signIn.submit")
             }),
             allowRegister && mode !== "mfa" ? /* @__PURE__ */ jsx6("button", {
               type: "button",
@@ -1209,7 +1346,7 @@ function SignIn(props) {
                 setError(null);
                 setMode(mode === "register" ? "login" : "register");
               },
-              children: mode === "register" ? "Have an account? Sign in" : "Create an account"
+              children: t(mode === "register" ? "signIn.toSignIn" : "signIn.toRegister")
             }) : null
           ]
         })
@@ -1240,7 +1377,11 @@ export {
   renderMarkdown,
   resolveHref,
   resolveRoute,
+  uiMessagesFor,
   useAction,
   useGroveUi,
-  useMessages
+  useMessages,
+  usePageTitle,
+  useUiMessages,
+  useUiText
 };

package/dist/messages.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The primitives' OWN strings — the chrome a generated app never authored.
+ *
+ * A screen's text is translated by the compiler: it ships a `MESSAGES` catalogue and looks it
+ * up with `useMessages`. Nothing did that for the words the primitives supply themselves —
+ * "Loading…", "Save", "Sign in", the empty-table line, the sign-in form's labels — so a
+ * Spanish app rendered Spanish headings above English chrome. These are that missing half.
+ *
+ * `en` is the complete catalogue and the fallback; every other locale may be partial, since a
+ * missing key falls back to English rather than showing a raw key. Locale matching is the same
+ * rule `detectLocale` uses for the document's own locales: exact first, then by language, so a
+ * viewer on `es-MX` gets the `es` chrome.
+ *
+ * An app that wants different wording — or a language not shipped here — passes `messages`
+ * on the provider context; those entries win over everything below. That is the extension
+ * point, and it is why this catalogue can stay small rather than trying to cover every
+ * language a generated app might be published in.
+ */
+/** Every string the primitives render. Keys are dotted by the primitive that owns them. */
+export interface UiMessages {
+    'common.loading': string;
+    'common.notFound': string;
+    'common.home': string;
+    'common.pages': string;
+    'common.yes': string;
+    'common.no': string;
+    'header.openMenu': string;
+    'header.closeMenu': string;
+    'table.empty': string;
+    'form.save': string;
+    'form.saving': string;
+    'form.created': string;
+    'form.updated': string;
+    'action.confirmDelete': string;
+    'relation.select': string;
+    'relation.search': string;
+    'relation.noMatches': string;
+    'relation.none': string;
+    'signIn.title': string;
+    'signIn.register': string;
+    'signIn.mfa': string;
+    'signIn.name': string;
+    'signIn.email': string;
+    'signIn.password': string;
+    'signIn.code': string;
+    'signIn.mfaUnsupported': string;
+    'signIn.submit': string;
+    'signIn.submitRegister': string;
+    'signIn.submitMfa': string;
+    'signIn.wait': string;
+    'signIn.toRegister': string;
+    'signIn.toSignIn': string;
+    'signIn.registerUnavailable': string;
+    'markdown.bold': string;
+    'markdown.italic': string;
+    'markdown.heading': string;
+    'markdown.listItem': string;
+    'markdown.code': string;
+    'markdown.link': string;
+    'markdown.placeholder': string;
+    'markdown.write': string;
+    'markdown.preview': string;
+    'markdown.nothingToPreview': string;
+}
+/** A message key — what `useUiText()` accepts. */
+export type UiMessageKey = keyof UiMessages;
+/** The locales this package ships chrome for. Anything else falls back to English. */
+export declare const UI_LOCALES: Record<string, UiMessages>;
+/**
+ * The built-in catalogue for a locale: exact match, then by language (`es-MX` → `es`), then
+ * English. Exported for the tests and for an app that wants to read the shipped wording
+ * before overriding part of it.
+ */
+export declare function uiMessagesFor(locale: string | undefined): UiMessages;

package/dist/runtime.d.ts

@@ -5,6 +5,7 @@
  * under any of them (Next, React Router, plain history). The default uses the History API.
  */
 import type { ReactNode } from 'react';
+import { type UiMessageKey, type UiMessages } from './messages';
 import type { Action, CollectionLike, Doc, Format } from './types';
 export interface GroveUiContext {
     /** Navigate to a route. */
@@ -21,12 +22,35 @@ export interface GroveUiContext {
     confirm?: (message: string) => boolean | Promise<boolean>;
     locale?: string;
     currency?: string;
+    /**
+     * Overrides for the primitives' OWN strings (`messages.ts`) — the chrome an app never
+     * authored. Partial: whatever is not given falls back to the shipped catalogue for the
+     * active locale, and then to English. This is how an app reaches a language the package
+     * does not ship, or changes wording it does ship.
+     */
+    messages?: Partial<UiMessages>;
 }
 export declare function GroveUiProvider({ value, children }: {
     value: GroveUiContext;
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useGroveUi(): GroveUiContext;
+/**
+ * One chrome string, resolved against a context: the app's own override first, then the
+ * catalogue shipped for the active locale, then English. Takes the context rather than
+ * reading it, so the non-hook call sites (`useAction`'s confirm) share exactly this rule.
+ */
+export declare function uiText(ctx: GroveUiContext, key: UiMessageKey): string;
+/**
+ * The primitives' translator — `t` for the words the package supplies itself, as opposed to
+ * `useMessages`, which is a screen's translator for the words its author wrote.
+ *
+ * Returned as a function rather than the whole catalogue so a primitive reads one key at a
+ * time and a missing key is a type error, not a blank on the page.
+ */
+export declare function useUiText(): (key: UiMessageKey) => string;
+/** The chrome catalogue in force — for the few places that need several keys at once. */
+export declare function useUiMessages(): UiMessages;
 /** Substitute `:param` segments in an href with a document's values. */
 export declare function resolveHref(href: string, doc?: Doc): string;
 export interface DispatchOptions {
@@ -52,6 +76,8 @@ export declare function useAction(): (action: Action, opts?: DispatchOptions) =>
 export declare function formatValue(value: unknown, format: Format | undefined, opts?: {
     locale?: string | undefined;
     currency?: string | undefined;
+    /** The chrome catalogue, for the one format that renders words rather than digits. */
+    messages?: Pick<UiMessages, 'common.yes' | 'common.no'> | undefined;
 }): string;
 /**
  * A translation lookup over the catalogue a multilingual screen carries, reading the active
@@ -60,6 +86,17 @@ export declare function formatValue(value: unknown, format: Format | undefined,
  * set for all of them at once.
  */
 export declare function useMessages(messages: Record<string, Record<string, string>>, fallback: string): (key: string) => string;
+/**
+ * Sets the browser tab's title while a screen is mounted, restoring the previous one when it
+ * unmounts (a screen with no title of its own must not inherit the last one's).
+ *
+ * A generated screen calls this with its OWN translated title, which is why the title is not
+ * taken from the `ROUTES` table: the table is module data, evaluated before any locale is
+ * known, so a title read from there is frozen in the document's default language. The route's
+ * `title` stays as the index's label and as what an external router reads; the tab follows
+ * the viewer's language.
+ */
+export declare function usePageTitle(title: string | undefined): void;
 /**
  * The locale to start in: the first of the viewer's preferred languages the document has,
  * matched exactly and then by language (`es-MX` finds `es`), else the document's first —

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groveback/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React primitives for Groveback Studio screens — tables, forms, detail views and relation pickers that read through the Groveback SDK, so every query passes the policy engine.",
   "type": "module",
   "main": "./dist/index.js",