mui-atelier 0.1.0

package/dist/components/SubCard.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+function SubCard({ title, help, action = null, children, sx }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: [
+        // The theme's base corner, as a px string — a bare number here would
+        // MULTIPLY the theme's radius (DESIGN.md, the sx Radius Rule).
+        (t) => ({ border: "1px solid", borderColor: "divider", borderRadius: `${t.rt?.radii?.base ?? 8}px`, p: { xs: 2, sm: 2.5 } }),
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children: [
+        title || action ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "flex-start", mb: 2 }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+            title ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", component: "p", sx: { fontWeight: 600 }, children: title }) : null,
+            help ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.25 }, children: help }) : null
+          ] }),
+          action
+        ] }) : null,
+        children
+      ]
+    }
+  );
+}
+export {
+  SubCard as default
+};

package/dist/components/TabbedCard.js

@@ -0,0 +1,20 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Divider from "@mui/material/Divider";
+import { useTheme } from "@mui/material/styles";
+function TabbedCard({ head = null, tabs, children, sx }) {
+  const underline = useTheme().rt?.ui?.tabs === "underline";
+  return /* @__PURE__ */ jsxs(Card, { sx, children: [
+    head ? /* @__PURE__ */ jsx(Box, { sx: { p: { xs: 2, sm: 3 }, pb: { xs: 2, sm: 2.5 } }, children: head }) : null,
+    underline ? /* @__PURE__ */ jsx(Box, { sx: { "& .MuiTabs-list": { px: { xs: 2, sm: 3 } } }, children: tabs }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Box, { sx: { p: { xs: 1.5, sm: 2 }, pb: { xs: 1.5, sm: 2 } }, children: tabs }),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    children ? /* @__PURE__ */ jsx(Box, { sx: { p: { xs: 2, sm: 3 } }, children }) : null
+  ] });
+}
+export {
+  TabbedCard as default
+};

package/dist/components/TableFilters.js

@@ -0,0 +1,247 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Checkbox from "@mui/material/Checkbox";
+import Chip from "@mui/material/Chip";
+import Collapse from "@mui/material/Collapse";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import ListItemText from "@mui/material/ListItemText";
+import MenuItem from "@mui/material/MenuItem";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import { activeCount, filterableColumns, optionsFor } from "../lib/tableFilter.js";
+import LabeledField, { LabeledSelect } from "./LabeledField.js";
+const EMPTY_RANGE = { from: "", to: "" };
+const CLEARED = { select: [], daterange: EMPTY_RANGE, number: EMPTY_RANGE, text: "" };
+const isRangeValue = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function TableFilters({
+  columns,
+  rows,
+  filters,
+  onChange,
+  searchPlaceholder,
+  // The free-text box that spans every column. On by default; a table whose
+  // narrowing is all dropdowns (see DataTable's `searchable`) turns it off so the
+  // bar is just its selects.
+  searchable = true,
+  resultCount,
+  totalCount,
+  // The card's own heading and its action, when the table IS the page's list
+  // (see DataTable's `title`). They ride in this row rather than in a header
+  // row of their own, so the card has one head, not two stacked bars.
+  lead = null,
+  trailing = null
+}) {
+  const t = useTranslations("uikit.table");
+  const [open, setOpen] = useState(false);
+  const filterable = filterableColumns(columns);
+  const active = activeCount(filters);
+  const setQuery = (query) => onChange({ ...filters, query });
+  const setColumn = (id, value) => onChange({
+    ...filters,
+    byColumn: { ...filters.byColumn, [id]: value }
+  });
+  const isSet = (v) => {
+    if (isRangeValue(v)) return v.from !== "" && v.from !== void 0 ? true : v.to !== "" && v.to !== void 0;
+    return Array.isArray(v) ? v.length > 0 : v !== void 0 && v !== null && v !== "";
+  };
+  const chips = filterable.flatMap((column) => {
+    const value = filters.byColumn?.[column.id];
+    if (!isSet(value)) return [];
+    let shown;
+    if (column.kind === "select") {
+      const options = optionsFor(column, rows);
+      const names = value.map((v) => options.find((o) => o.value === v)?.label ?? v);
+      shown = names.length > 3 ? t("countSelected", { count: names.length }) : names.join(", ");
+    } else if (column.kind === "number") {
+      shown = value.from !== "" && value.to !== "" ? t("numberBetween", { from: value.from, to: value.to }) : value.from !== "" ? t("numberFrom", { from: value.from }) : t("numberTo", { to: value.to });
+    } else if (column.kind === "daterange") {
+      shown = value.from && value.to ? t("dateBetween", { from: value.from, to: value.to }) : value.from ? t("dateFrom", { from: value.from }) : t("dateTo", { to: value.to });
+    } else {
+      shown = `\u201C${value}\u201D`;
+    }
+    return [{ id: column.id, label: `${column.header}: ${shown}`, kind: column.kind }];
+  });
+  return /* @__PURE__ */ jsxs(Box, { sx: { px: 2, py: 1.5 }, children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, sx: { alignItems: "center", flexWrap: "wrap", rowGap: 1 }, children: [
+      lead,
+      searchable ? /* @__PURE__ */ jsx(
+        TextField,
+        {
+          size: "small",
+          type: "search",
+          value: filters.query ?? "",
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: searchPlaceholder ?? t("search"),
+          slotProps: {
+            input: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchRoundedIcon, { fontSize: "small" }) }),
+              /*
+               * An explicit × rather than the browser's own, which Safari and
+               * Firefox do not draw at all. Clearing a search was otherwise
+               * select-all-and-delete — and the "Clear all" button beside it
+               * only appears once a per-COLUMN filter is set, so a table
+               * narrowed by the search box alone had no clear at all.
+               */
+              endAdornment: (filters.query ?? "") !== "" ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", edge: "end", "aria-label": t("clearSearch"), onClick: () => setQuery(""), children: /* @__PURE__ */ jsx(CloseRoundedIcon, { fontSize: "small" }) }) }) : null
+            },
+            htmlInput: { "aria-label": t("search") }
+          },
+          sx: {
+            width: { xs: "100%", sm: 320 },
+            // Chrome draws its own × for type=search; two is one too many.
+            "& input::-webkit-search-cancel-button": { display: "none" }
+          }
+        }
+      ) : null,
+      filterable.length > 0 ? /* @__PURE__ */ jsx(Badge, { badgeContent: active, color: "primary", overlap: "circular", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          startIcon: /* @__PURE__ */ jsx(FilterListRoundedIcon, {}),
+          onClick: () => setOpen((v) => !v),
+          "aria-expanded": open,
+          children: open ? t("hideFilters") : t("filters")
+        }
+      ) }) : null,
+      chips.map((chip) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          size: "small",
+          label: chip.label,
+          onDelete: () => setColumn(chip.id, CLEARED[chip.kind] ?? "")
+        },
+        chip.id
+      )),
+      /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+      active > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, role: "status", "aria-live": "polite", children: t("countOf", { count: resultCount, total: totalCount }) }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => onChange({ query: "", byColumn: {} }), children: t("clearAll") })
+      ] }) : null,
+      trailing
+    ] }),
+    /* @__PURE__ */ jsx(Collapse, { in: open, unmountOnExit: true, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          mt: 1.5,
+          pt: 1.5,
+          borderTop: 1,
+          borderColor: "divider",
+          display: "grid",
+          gap: 1.5,
+          gridTemplateColumns: { xs: "1fr", sm: "repeat(2, 1fr)", md: "repeat(3, 1fr)" }
+        },
+        children: filterable.map((column) => {
+          const value = filters.byColumn?.[column.id] ?? CLEARED[column.kind] ?? "";
+          if (column.kind === "select") {
+            const options = optionsFor(column, rows);
+            return /* @__PURE__ */ jsx(LabeledField, { label: column.header, children: ({ labelId }) => /* @__PURE__ */ jsx(
+              LabeledSelect,
+              {
+                labelId,
+                size: "small",
+                value: Array.isArray(value) ? value : [],
+                onChange: (e) => setColumn(column.id, e.target.value),
+                multiple: true,
+                renderValue: (picked) => picked.map((v) => options.find((o) => o.value === v)?.label ?? v).join(", "),
+                children: options.map((o) => (
+                  // `disabled` is for an option that is coming rather than
+                  // one that matches nothing today: the campaign recipients
+                  // table offers Authors and Reviewers greyed out, because
+                  // hiding them would leave an admin wondering whether the
+                  // product can do it at all.
+                  /* @__PURE__ */ jsxs(MenuItem, { value: o.value, disabled: Boolean(o.disabled), children: [
+                    /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: (Array.isArray(value) ? value : []).includes(o.value) }),
+                    /* @__PURE__ */ jsx(ListItemText, { primary: o.label })
+                  ] }, o.value)
+                ))
+              }
+            ) }, column.id);
+          }
+          if (column.kind === "number") {
+            const range = isRangeValue(value) ? value : EMPTY_RANGE;
+            return /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr" }, children: [
+              /* @__PURE__ */ jsx(LabeledField, { label: t("numberFromLabel", { column: column.header }), children: ({ id }) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  id,
+                  type: "number",
+                  size: "small",
+                  fullWidth: true,
+                  value: range.from ?? "",
+                  onChange: (e) => setColumn(column.id, { ...range, from: e.target.value }),
+                  slotProps: { htmlInput: { min: 0, inputMode: "numeric" } }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(LabeledField, { label: t("numberToLabel", { column: column.header }), children: ({ id }) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  id,
+                  type: "number",
+                  size: "small",
+                  fullWidth: true,
+                  value: range.to ?? "",
+                  onChange: (e) => setColumn(column.id, { ...range, to: e.target.value }),
+                  slotProps: { htmlInput: { min: 0, inputMode: "numeric" } }
+                }
+              ) })
+            ] }, column.id);
+          }
+          if (column.kind === "daterange") {
+            const range = isRangeValue(value) ? value : EMPTY_RANGE;
+            return /* @__PURE__ */ jsxs(Box, { sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr" }, children: [
+              /* @__PURE__ */ jsx(LabeledField, { label: t("dateFromLabel", { column: column.header }), children: ({ id }) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  id,
+                  type: "date",
+                  size: "small",
+                  fullWidth: true,
+                  value: range.from ?? "",
+                  onChange: (e) => setColumn(column.id, { ...range, from: e.target.value }),
+                  slotProps: { inputLabel: { shrink: true } }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(LabeledField, { label: t("dateToLabel", { column: column.header }), children: ({ id }) => /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  id,
+                  type: "date",
+                  size: "small",
+                  fullWidth: true,
+                  value: range.to ?? "",
+                  onChange: (e) => setColumn(column.id, { ...range, to: e.target.value }),
+                  slotProps: { inputLabel: { shrink: true } }
+                }
+              ) })
+            ] }, column.id);
+          }
+          return /* @__PURE__ */ jsx(LabeledField, { label: column.header, children: ({ id }) => /* @__PURE__ */ jsx(
+            TextField,
+            {
+              id,
+              size: "small",
+              fullWidth: true,
+              value,
+              onChange: (e) => setColumn(column.id, e.target.value),
+              placeholder: column.match === "exact" ? t("exactPlaceholder") : t("containsPlaceholder")
+            }
+          ) }, column.id);
+        })
+      }
+    ) })
+  ] });
+}
+export {
+  TableFilters as default
+};

package/dist/components/ToastProvider.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import Alert from "@mui/material/Alert";
+import Snackbar from "@mui/material/Snackbar";
+import { useOrgThemeScope } from "../theme/OrgThemeRegistry.js";
+const ToastContext = createContext(null);
+const NOOP = {
+  success: () => {
+  },
+  error: () => {
+  },
+  info: () => {
+  }
+};
+function useToast() {
+  return useContext(ToastContext) ?? NOOP;
+}
+const AUTO_HIDE = { success: 4e3, info: 5e3, error: 9e3 };
+function ToastProvider({ children }) {
+  const [toast, setToast] = useState(null);
+  const themeScope = useOrgThemeScope();
+  const seq = useRef(0);
+  const show = useCallback((severity, message) => {
+    seq.current += 1;
+    setToast({ severity, message, key: seq.current });
+  }, []);
+  const api = useMemo(() => ({
+    success: (message) => show("success", message),
+    error: (message) => show("error", message),
+    info: (message) => show("info", message)
+  }), [show]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open: toast !== null,
+        autoHideDuration: toast ? AUTO_HIDE[toast.severity] : null,
+        onClose: (_e, reason) => {
+          if (reason === "clickaway") return;
+          setToast(null);
+        },
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        className: themeScope,
+        children: /* @__PURE__ */ jsx(
+          Alert,
+          {
+            severity: toast?.severity ?? "success",
+            variant: "filled",
+            onClose: () => setToast(null),
+            ...toast?.severity === "error" ? {} : { role: "status", "aria-live": "polite" },
+            sx: { width: "100%" },
+            children: toast?.message
+          }
+        )
+      },
+      toast?.key
+    )
+  ] });
+}
+export {
+  ToastProvider as default,
+  useToast
+};

package/dist/eslint/chipRules.mjs

@@ -0,0 +1,65 @@
+/*
+ * A STATUS CHIP STATES A ROLE; THE THEME SUPPLIES THE COLOUR.
+ *
+ * `<Chip color="success">` is a palette chosen for every theme by a call site
+ * that can only see one of them. Use StatusChip with a `role`
+ * (progress | done | caution | bad | idle | tag) and let each theme answer.
+ *
+ * A LINT RULE rather than a review note because the drift is invisible: nothing
+ * throws, no test fails, and the chip just quietly wears somebody else's
+ * colour, sometimes two different ones for the same chip in adjacent cells.
+ *
+ * `default` is allowed — it asks for no colour at all, which an unstyled chip
+ * already is.
+ *
+ * This file is the ONE copy: an app's eslint config imports it (see
+ * `chipRules` below) rather than restating it.
+ */
+export const chipColorRule = {
+  selector: "JSXOpeningElement[name.name='Chip'] > JSXAttribute[name.name='color'][value.value!='default']",
+  message: 'Chips state a ROLE, not a colour: use StatusChip with role={progress|done|caution|bad|idle|tag}, and let the theme choose the colour.',
+};
+
+/*
+ * A DOTTED PALETTE PATH IN A `color` PROP IS DEAD TEXT.
+ *
+ * `<Typography color="text.secondary">` does not render secondary text. MUI
+ * reads palette NAMES from that prop ("primary", "textSecondary") and ignores a
+ * dotted path, and an unread prop is FORWARDED TO THE DOM rather than rejected
+ * — so nothing throws, no test fails, and the line quietly renders in
+ * text.primary. Write it as `sx={{ color: 'text.secondary' }}`, which goes
+ * through the sx palette resolver and actually applies.
+ *
+ * It is an easy mistake to repeat hundreds of times before anyone measures one
+ * in a browser: every "muted" caption written this way renders as body text.
+ * It looks plausible, which is why it survives — grey-ish next to a black
+ * heading reads as grey.
+ *
+ * Matched as a Literal ANYWHERE inside the attribute, so the conditional form
+ * (`color={value ? 'text.primary' : 'text.secondary'}`) is caught too. The sx
+ * system components are exempt: Box, Stack and Grid DO resolve a dotted path
+ * through the same system props, and passing one to them is correct.
+ *
+ * In `sx`, remember, the path must be complete: `color: 'error'` resolves to
+ * the palette OBJECT, where the prop accepted the bare name. It is 'error.main'.
+ */
+export const colorPathRule = {
+  selector: "JSXOpeningElement:not([name.name='Box']):not([name.name='Stack']):not([name.name='Grid']):not([name.name='Container']) > JSXAttribute[name.name='color'] Literal[value=/^[a-z][A-Za-z]*\\.[A-Za-z]+$/]",
+  message: "A dotted palette path in a `color` prop is ignored and rendered as text.primary. Use sx={{ color: '…' }} instead (and a COMPLETE path — 'error.main', not 'error').",
+};
+
+/**
+ * The flat-config block an app spreads into its eslint config:
+ *
+ *   import { chipRules } from 'mui-atelier/eslint';
+ *   export default defineConfig([...nextVitals, chipRules]);
+ *
+ * Both selectors live in ONE `no-restricted-syntax` entry on purpose: flat
+ * config REPLACES a rule's options rather than merging them, so a second block
+ * naming the same rule would silently switch the first one off. An app that has
+ * its own `no-restricted-syntax` selectors adds them to this same entry.
+ */
+export const chipRules = {
+  files: ['**/*.{js,jsx}'],
+  rules: { 'no-restricted-syntax': ['error', chipColorRule, colorPathRule] },
+};

package/dist/hooks/useDocumentTitle.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect } from "react";
+let appName = typeof document === "undefined" ? "" : document.title;
+function baseName() {
+  if (!appName) appName = document.title;
+  return appName;
+}
+function useDocumentTitle(...parts) {
+  const key = parts.join("\0");
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (!parts[0]) return;
+    const suffix = baseName();
+    document.title = [...parts.filter(Boolean), suffix].filter(Boolean).join(" \xB7 ");
+  }, [key]);
+}
+export {
+  useDocumentTitle as default
+};

package/dist/hooks/useOverflowTabs.js

@@ -0,0 +1,53 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+function useOverflowTabs(count, activeIndex) {
+  const containerRef = useRef(null);
+  const measureRef = useRef(null);
+  const [visibleCount, setVisibleCount] = useState(count);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const row = measureRef.current;
+    if (!container || !row) return void 0;
+    const fit = () => {
+      const available = container.clientWidth;
+      const children = Array.from(row.children);
+      const more = children[children.length - 1];
+      const tabs = children.slice(0, count);
+      if (available === 0 || tabs.length === 0) {
+        setVisibleCount(count);
+        return;
+      }
+      const gap = parseFloat(getComputedStyle(row).columnGap || getComputedStyle(row).gap) || 0;
+      const widths = tabs.map((el) => el.offsetWidth);
+      const total = widths.reduce((sum, w) => sum + w, 0) + gap * (tabs.length - 1);
+      const chrome = row.offsetWidth - row.clientWidth;
+      if (total + chrome <= available) {
+        setVisibleCount(count);
+        return;
+      }
+      const moreWidth = (more?.offsetWidth ?? 0) + gap;
+      const active = activeIndex >= 0 && activeIndex < count ? activeIndex : -1;
+      let used = moreWidth + chrome + (active >= 0 ? widths[active] + gap : 0);
+      let n = 0;
+      for (let i = 0; i < count; i += 1) {
+        if (i === active) {
+          n = i + 1;
+          continue;
+        }
+        const next = used + widths[i] + (i > 0 ? gap : 0);
+        if (next > available) break;
+        used = next;
+        n = i + 1;
+      }
+      setVisibleCount(Math.max(1, n));
+    };
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [count, activeIndex]);
+  return { containerRef, measureRef, visibleCount: Math.min(visibleCount, count) };
+}
+export {
+  useOverflowTabs as default
+};

package/dist/hooks/useUnsavedChanges.js

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useRef } from "react";
+function useUnsavedChanges(dirty, confirmDiscard, router) {
+  const state = useRef({ dirty, confirmDiscard, router });
+  useEffect(() => {
+    state.current = { dirty, confirmDiscard, router };
+  });
+  const confirmLeave = () => dirty ? confirmDiscard() : Promise.resolve(true);
+  useEffect(() => {
+    const handler = (e) => {
+      if (!state.current.dirty) return;
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, []);
+  useEffect(() => {
+    const onClick = (e) => {
+      if (!state.current.dirty || !state.current.router) return;
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      const a = e.target.closest?.("a[href]");
+      if (!a || a.target === "_blank" || a.hasAttribute("download")) return;
+      if (a.closest(".ProseMirror") || a.closest('[contenteditable="true"]')) return;
+      let url;
+      try {
+        url = new URL(a.href, window.location.href);
+      } catch {
+        return;
+      }
+      if (url.origin !== window.location.origin) return;
+      if (url.pathname === window.location.pathname && url.search === window.location.search) return;
+      e.preventDefault();
+      e.stopPropagation();
+      state.current.confirmDiscard().then((ok) => {
+        if (ok) state.current.router.push(`${url.pathname}${url.search}${url.hash}`);
+      });
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, []);
+  return confirmLeave;
+}
+export {
+  useUnsavedChanges as default
+};

package/dist/i18n/loadMessages.js

@@ -0,0 +1,15 @@
+import en from "./messages/en.json";
+import { mergeMessages } from "./mergeMessages.js";
+const LOCALES = ["en", "es", "zh"];
+const LOADERS = {
+  es: () => import("./messages/es.json"),
+  zh: () => import("./messages/zh.json")
+};
+async function loadUikitMessages(locale) {
+  const over = LOADERS[locale] ? (await LOADERS[locale]()).default : null;
+  return mergeMessages(en, over);
+}
+export {
+  LOCALES,
+  loadUikitMessages
+};

package/dist/i18n/mergeMessages.js

@@ -0,0 +1,13 @@
+function mergeMessages(base, over) {
+  if (!over) return base;
+  const out = { ...base };
+  for (const key of Object.keys(over)) {
+    const b = base ? base[key] : void 0;
+    const o = over[key];
+    out[key] = b && o && typeof b === "object" && typeof o === "object" && !Array.isArray(b) && !Array.isArray(o) ? mergeMessages(b, o) : o;
+  }
+  return out;
+}
+export {
+  mergeMessages
+};