@groveback/ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,9 +1,133 @@
 // src/components.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 
-// src/RelationSelect.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+// src/MarkdownField.tsx
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function renderInline(s) {
+  return escapeHtml(s).replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
+}
+function renderMarkdown(src) {
+  const lines = src.split(`
+`);
+  const html = [];
+  let inList = false;
+  const closeList = () => {
+    if (inList) {
+      html.push("</ul>");
+      inList = false;
+    }
+  };
+  for (const line of lines) {
+    const heading = /^(#{1,3})\s+(.*)$/.exec(line);
+    const item = /^[-*]\s+(.*)$/.exec(line);
+    if (heading) {
+      closeList();
+      const level = heading[1].length;
+      html.push(`<h${level}>${renderInline(heading[2])}</h${level}>`);
+    } else if (item) {
+      if (!inList) {
+        html.push("<ul>");
+        inList = true;
+      }
+      html.push(`<li>${renderInline(item[1])}</li>`);
+    } else if (line.trim() === "") {
+      closeList();
+    } else {
+      closeList();
+      html.push(`<p>${renderInline(line)}</p>`);
+    }
+  }
+  closeList();
+  return html.join(`
+`);
+}
+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" } }
+];
+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";
+function MarkdownField({
+  value,
+  onChange
+}) {
+  const [mode, setMode] = useState("write");
+  const [el, setEl] = useState(null);
+  function apply(wrap) {
+    if (!el)
+      return;
+    const start = el.selectionStart;
+    const end = el.selectionEnd;
+    const selected = value.slice(start, end) || wrap.placeholder;
+    onChange(value.slice(0, start) + wrap.before + selected + wrap.after + value.slice(end));
+    requestAnimationFrame(() => {
+      el.focus();
+      const caret = start + wrap.before.length;
+      el.setSelectionRange(caret, caret + selected.length);
+    });
+  }
+  const tab = (active) => `inline-flex h-7 items-center rounded px-2 text-xs ${active ? "bg-neutral-100 font-medium text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100" : "text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"}`;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "rounded-md border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100",
+    children: [
+      /* @__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", {
+            type: "button",
+            title: t.label,
+            "aria-label": t.label,
+            disabled: mode === "preview",
+            onClick: () => apply(t.wrap),
+            className: TOOL_BUTTON,
+            children: t.glyph
+          }, t.key)),
+          /* @__PURE__ */ jsxs("div", {
+            className: "ml-auto flex gap-0.5",
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                onClick: () => setMode("write"),
+                className: tab(mode === "write"),
+                children: "Write"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                onClick: () => setMode("preview"),
+                className: tab(mode === "preview"),
+                children: "Preview"
+              })
+            ]
+          })
+        ]
+      }),
+      mode === "write" ? /* @__PURE__ */ jsx("textarea", {
+        ref: setEl,
+        rows: 8,
+        value,
+        spellCheck: false,
+        placeholder: "Write Markdown…",
+        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", {
+        className: PREVIEW_TYPOGRAPHY,
+        dangerouslySetInnerHTML: { __html: renderMarkdown(value || "_Nothing to preview_") }
+      })
+    ]
+  });
+}
+
+// src/RelationSelect.tsx
+import { useEffect, useMemo, useRef, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var PAGE = 200;
 function labelOf(doc, field) {
   const raw = doc[field];
@@ -15,11 +139,11 @@ function labelOf(doc, field) {
 }
 function RelationSelect(props) {
   const { collection, displayField, value, onChange, placeholder, required } = props;
-  const [docs, setDocs] = useState(null);
-  const [error, setError] = useState(null);
-  const [query, setQuery] = useState("");
-  const [open, setOpen] = useState(false);
-  const [truncated, setTruncated] = useState(false);
+  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(() => {
     let live = true;
@@ -55,47 +179,47 @@ function RelationSelect(props) {
     return all.filter((d) => labelOf(d, displayField).toLowerCase().includes(q));
   }, [docs, displayField, query]);
   if (error) {
-    return /* @__PURE__ */ jsx("p", {
+    return /* @__PURE__ */ jsx2("p", {
       className: "text-xs text-red-600",
       children: error
     });
   }
   const buttonLabel = selected ? labelOf(selected, displayField) : value !== "" ? value : placeholder ?? "Select…";
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     ref: boxRef,
     className: "relative",
     children: [
-      /* @__PURE__ */ jsxs("button", {
+      /* @__PURE__ */ jsxs2("button", {
         type: "button",
         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__ */ jsx("span", {
+          /* @__PURE__ */ jsx2("span", {
             className: selected || value ? "" : "text-neutral-400",
             children: docs === null ? "Loading…" : buttonLabel
           }),
-          /* @__PURE__ */ jsx("span", {
+          /* @__PURE__ */ jsx2("span", {
             "aria-hidden": true,
             className: "ml-2 text-neutral-400",
             children: "▾"
           })
         ]
       }),
-      open ? /* @__PURE__ */ jsxs("div", {
+      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__ */ jsx("input", {
+          /* @__PURE__ */ jsx2("input", {
             autoFocus: true,
             value: query,
             onChange: (e) => setQuery(e.target.value),
             placeholder: "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__ */ jsxs("ul", {
+          /* @__PURE__ */ jsxs2("ul", {
             className: "max-h-56 overflow-auto py-1",
             children: [
-              !required ? /* @__PURE__ */ jsx("li", {
-                children: /* @__PURE__ */ jsx("button", {
+              !required ? /* @__PURE__ */ jsx2("li", {
+                children: /* @__PURE__ */ jsx2("button", {
                   type: "button",
                   onClick: () => {
                     onChange("");
@@ -106,13 +230,13 @@ function RelationSelect(props) {
                   children: "None"
                 })
               }) : null,
-              matches.length === 0 ? /* @__PURE__ */ jsx("li", {
+              matches.length === 0 ? /* @__PURE__ */ jsx2("li", {
                 className: "px-3 py-2 text-xs text-neutral-500",
                 children: "No matches."
               }) : matches.map((doc) => {
                 const id = typeof doc["id"] === "string" ? doc["id"] : "";
-                return /* @__PURE__ */ jsx("li", {
-                  children: /* @__PURE__ */ jsx("button", {
+                return /* @__PURE__ */ jsx2("li", {
+                  children: /* @__PURE__ */ jsx2("button", {
                     type: "button",
                     onClick: () => {
                       onChange(id);
@@ -126,7 +250,7 @@ function RelationSelect(props) {
               })
             ]
           }),
-          truncated ? /* @__PURE__ */ jsxs("p", {
+          truncated ? /* @__PURE__ */ jsxs2("p", {
             className: "border-t border-neutral-200 px-3 py-1.5 text-[11px] text-neutral-500 dark:border-neutral-800",
             children: [
               "Showing the first ",
@@ -142,10 +266,10 @@ function RelationSelect(props) {
 
 // src/runtime.tsx
 import { createContext, useContext, useCallback } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var Ctx = createContext(null);
 function GroveUiProvider({ value, children }) {
-  return /* @__PURE__ */ jsx2(Ctx.Provider, {
+  return /* @__PURE__ */ jsx3(Ctx.Provider, {
     value,
     children
   });
@@ -187,15 +311,19 @@ function useAction() {
         return;
       }
       case "endpoint": {
-        const base = ctx.endpointBase ?? "";
         const href = resolveHref(action.path, opts.doc);
-        await fetch(`${base}${href}`, { method: action.method ?? "POST" });
+        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 "";
@@ -216,74 +344,245 @@ function formatValue(value, format, opts = {}) {
       return Number.isFinite(n) ? new Intl.NumberFormat(opts.locale).format(n) : String(value);
     }
     case "date": {
-      const d = new Date(String(value));
-      return Number.isNaN(d.getTime()) ? String(value) : d.toLocaleDateString(opts.locale);
+      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(" ");
+}
+var INPUT_CLASS = "rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm text-neutral-900 " + "dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-100";
+var BUTTON_BASE = "inline-flex w-fit self-start items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium " + "transition-colors disabled:opacity-50 disabled:pointer-events-none";
+var VARIANT = {
+  default: "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900",
+  secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-100",
+  destructive: "bg-red-600 text-white hover:bg-red-700",
+  outline: "border border-neutral-300 text-neutral-900 hover:bg-neutral-50 " + "dark:border-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-900",
+  ghost: "text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-800"
+};
+var TONE = {
+  error: "text-sm text-red-600",
+  success: "text-sm text-green-700 dark:text-green-500",
+  muted: "text-sm text-neutral-500"
+};
 
 // src/components.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var WIDTH_CLASS = { narrow: "w-[12%]", normal: "", wide: "w-[45%]" };
 var GAP = ["gap-0", "gap-1", "gap-2", "gap-3", "gap-4", "gap-5", "gap-6", "gap-7", "gap-8", "gap-9", "gap-10", "gap-11", "gap-12"];
 var COLUMNS = ["", "md:grid-cols-1", "md:grid-cols-2", "md:grid-cols-3", "md:grid-cols-4", "md:grid-cols-5", "md:grid-cols-6"];
 var WIDTH = { full: "w-full", container: "w-full max-w-5xl mx-auto", narrow: "w-full max-w-xl mx-auto" };
 var ALIGN = { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" };
 var JUSTIFY = { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between" };
-function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
 function Stack(props) {
   const { direction = "vertical", gap = 4, align, justify, width, wrap, children } = props;
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx4("div", {
     className: cx("flex", direction === "vertical" ? "flex-col" : "flex-row", GAP[Math.min(Math.max(gap, 0), 12)], align && ALIGN[align], justify && JUSTIFY[justify], width && WIDTH[width], wrap && "flex-wrap"),
     children
   });
 }
 function Grid(props) {
   const { columns, gap = 4, width, children } = props;
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx4("div", {
     className: cx("grid grid-cols-1", COLUMNS[Math.min(Math.max(columns, 1), 6)], GAP[Math.min(Math.max(gap, 0), 12)], width && WIDTH[width]),
     children
   });
 }
 function Divider() {
-  return /* @__PURE__ */ jsx3("hr", {
+  return /* @__PURE__ */ jsx4("hr", {
     className: "border-t border-neutral-200 dark:border-neutral-800"
   });
 }
 var HEADING = { 1: "text-3xl font-semibold tracking-tight", 2: "text-2xl font-semibold", 3: "text-lg font-medium" };
 function Heading({ level = 1, children }) {
   const Tag = ["h1", "h2", "h3"][level - 1] ?? "h1";
-  return /* @__PURE__ */ jsx3(Tag, {
+  return /* @__PURE__ */ jsx4(Tag, {
     className: HEADING[level],
     children
   });
 }
 function Text({ muted, children }) {
-  return /* @__PURE__ */ jsx3("p", {
+  return /* @__PURE__ */ jsx4("p", {
     className: muted ? "text-sm text-neutral-500" : "text-sm",
     children
   });
 }
-var VARIANT = {
-  default: "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900",
-  secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-100",
-  destructive: "bg-red-600 text-white hover:bg-red-700",
-  outline: "border border-neutral-300 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-900",
-  ghost: "hover:bg-neutral-100 dark:hover:bg-neutral-800"
-};
-var BUTTON_BASE = "inline-flex w-fit self-start items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium " + "transition-colors disabled:opacity-50 disabled:pointer-events-none";
+function Header(props) {
+  const { brand, brandHref = "/", links, actions, sticky } = props;
+  const dispatch = useAction();
+  const [open, setOpen] = useState3(false);
+  const go = useCallback2((href) => (e) => {
+    if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0)
+      return;
+    e.preventDefault();
+    setOpen(false);
+    dispatch({ kind: "navigate", href }, {});
+  }, [dispatch]);
+  const hasNav = links && links.length > 0 || actions && actions.length > 0;
+  return /* @__PURE__ */ jsxs3("header", {
+    className: cx("border-b border-neutral-200 bg-white px-4 py-3 text-neutral-900", "dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100", sticky ? "sticky top-0 z-40" : ""),
+    children: [
+      /* @__PURE__ */ jsxs3("div", {
+        className: "flex items-center gap-6",
+        children: [
+          brand !== undefined && brand !== null && brand !== "" ? /* @__PURE__ */ jsx4("a", {
+            href: brandHref,
+            onClick: go(brandHref),
+            className: "text-sm font-semibold tracking-tight",
+            children: brand
+          }) : null,
+          links && links.length > 0 ? /* @__PURE__ */ jsx4("nav", {
+            "data-grove-nav": true,
+            className: "hidden items-center gap-4 md:flex",
+            children: links.map((link, i) => /* @__PURE__ */ jsx4("a", {
+              href: link.href,
+              onClick: go(link.href),
+              className: "text-sm text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100",
+              children: link.label
+            }, i))
+          }) : null,
+          actions && actions.length > 0 ? /* @__PURE__ */ jsx4("div", {
+            "data-grove-nav-actions": true,
+            className: "ml-auto hidden items-center gap-2 md:flex",
+            children: actions.map((a, i) => /* @__PURE__ */ jsx4(Button, {
+              action: a.action,
+              variant: a.variant,
+              children: a.label
+            }, i))
+          }) : null,
+          hasNav ? /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            "data-grove-nav-toggle": true,
+            "aria-label": open ? "Close menu" : "Open menu",
+            "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",
+            children: /* @__PURE__ */ jsx4("svg", {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              "aria-hidden": "true",
+              children: open ? /* @__PURE__ */ jsxs3(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx4("line", {
+                    x1: "18",
+                    y1: "6",
+                    x2: "6",
+                    y2: "18"
+                  }),
+                  /* @__PURE__ */ jsx4("line", {
+                    x1: "6",
+                    y1: "6",
+                    x2: "18",
+                    y2: "18"
+                  })
+                ]
+              }) : /* @__PURE__ */ jsxs3(Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx4("line", {
+                    x1: "3",
+                    y1: "6",
+                    x2: "21",
+                    y2: "6"
+                  }),
+                  /* @__PURE__ */ jsx4("line", {
+                    x1: "3",
+                    y1: "12",
+                    x2: "21",
+                    y2: "12"
+                  }),
+                  /* @__PURE__ */ jsx4("line", {
+                    x1: "3",
+                    y1: "18",
+                    x2: "21",
+                    y2: "18"
+                  })
+                ]
+              })
+            })
+          }) : null
+        ]
+      }),
+      hasNav && open ? /* @__PURE__ */ jsxs3("div", {
+        "data-grove-nav-drawer": true,
+        className: "mt-3 flex flex-col gap-1 border-t border-neutral-200 pt-3 md:hidden dark:border-neutral-800",
+        children: [
+          links?.map((link, i) => /* @__PURE__ */ jsx4("a", {
+            href: link.href,
+            onClick: go(link.href),
+            className: "rounded-md px-2 py-2 text-sm text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100",
+            children: link.label
+          }, i)),
+          actions && actions.length > 0 ? /* @__PURE__ */ jsx4("div", {
+            className: "mt-2 flex flex-col gap-2",
+            children: actions.map((a, i) => /* @__PURE__ */ jsx4(Button, {
+              action: a.action,
+              variant: a.variant,
+              children: a.label
+            }, i))
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+}
 function Button(props) {
   const { action, variant = "default", doc, collection, onDone, children } = props;
   const dispatch = useAction();
-  const [busy, setBusy] = useState2(false);
+  const [busy, setBusy] = useState3(false);
+  const running = useRef2(false);
   const onClick = useCallback2(() => {
+    if (running.current)
+      return;
+    running.current = true;
     setBusy(true);
-    dispatch(action, { doc, collection, onDone }).finally(() => setBusy(false));
+    dispatch(action, { doc, collection, onDone }).finally(() => {
+      running.current = false;
+      setBusy(false);
+    });
   }, [action, dispatch, doc, collection, onDone]);
-  return /* @__PURE__ */ jsx3("button", {
+  return /* @__PURE__ */ jsx4("button", {
     type: "button",
     disabled: busy,
     onClick,
@@ -292,10 +591,10 @@ function Button(props) {
   });
 }
 function useAsync(load, deps) {
-  const [data, setData] = useState2(null);
-  const [error, setError] = useState2(null);
-  const [loading, setLoading] = useState2(true);
-  const [nonce, setNonce] = useState2(0);
+  const [data, setData] = useState3(null);
+  const [error, setError] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  const [nonce, setNonce] = useState3(0);
   useEffect2(() => {
     let live = true;
     setLoading(true);
@@ -317,14 +616,14 @@ function useAsync(load, deps) {
   return { data, error, loading, reload: () => setNonce((n) => n + 1) };
 }
 function Message({ tone, children }) {
-  const cls = tone === "error" ? "text-sm text-red-600" : "text-sm text-neutral-500";
-  return /* @__PURE__ */ jsx3("p", {
-    className: cls,
+  return /* @__PURE__ */ jsx4("p", {
+    className: TONE[tone],
+    ...tone === "success" ? { role: "status" } : {},
     children
   });
 }
 function useRelations(fields, docs, resolveCollection) {
-  const [map, setMap] = useState2({});
+  const [map, setMap] = useState3({});
   const relations = fields.filter((f) => f.display);
   const key = JSON.stringify(relations.map((f) => f.field)) + (docs?.length ?? 0);
   useEffect2(() => {
@@ -367,54 +666,54 @@ function DataTable(props) {
   const { data, error, loading, reload } = useAsync(() => collection.find(options), [JSON.stringify(options)]);
   const relations = useRelations(columns, data, resolveRelation);
   if (loading)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
       children: "Loading…"
     });
   if (error)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "error",
       children: error
     });
   if (!data || data.length === 0)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
       children: emptyText ?? "Nothing here yet."
     });
-  return /* @__PURE__ */ jsx3("div", {
+  return /* @__PURE__ */ jsx4("div", {
     className: "w-full overflow-x-auto rounded-md border border-neutral-200 dark:border-neutral-800",
-    children: /* @__PURE__ */ jsxs2("table", {
+    children: /* @__PURE__ */ jsxs3("table", {
       className: "w-full text-sm",
       children: [
-        /* @__PURE__ */ jsx3("thead", {
-          className: "bg-neutral-50 dark:bg-neutral-900",
-          children: /* @__PURE__ */ jsxs2("tr", {
+        /* @__PURE__ */ jsx4("thead", {
+          className: "bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100",
+          children: /* @__PURE__ */ jsxs3("tr", {
             children: [
-              columns.map((c) => /* @__PURE__ */ jsx3("th", {
-                className: "px-3 py-2 text-left font-medium text-neutral-600 dark:text-neutral-400",
+              columns.map((c) => /* @__PURE__ */ jsx4("th", {
+                className: `px-3 py-2 text-left font-medium text-neutral-600 dark:text-neutral-400 ${WIDTH_CLASS[c.width ?? "normal"]}`,
                 children: c.label
               }, c.field)),
-              rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx3("th", {
+              rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx4("th", {
                 className: "px-3 py-2"
               }) : null
             ]
           })
         }),
-        /* @__PURE__ */ jsx3("tbody", {
-          children: data.map((doc, i) => /* @__PURE__ */ jsxs2("tr", {
+        /* @__PURE__ */ jsx4("tbody", {
+          children: data.map((doc, i) => /* @__PURE__ */ jsxs3("tr", {
             className: cx("border-t border-neutral-200 dark:border-neutral-800", rowHref && "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900"),
             onClick: rowHref ? () => ctx.navigate(resolveHref(rowHref, doc)) : undefined,
             children: [
-              columns.map((c) => /* @__PURE__ */ jsx3("td", {
+              columns.map((c) => /* @__PURE__ */ jsx4("td", {
                 className: "px-3 py-2",
                 children: cellValue(doc, c, relations, ctx.locale, ctx.currency)
               }, c.field)),
-              rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx3("td", {
+              rowActions && rowActions.length > 0 ? /* @__PURE__ */ jsx4("td", {
                 className: "px-3 py-2",
-                children: /* @__PURE__ */ jsx3("div", {
+                children: /* @__PURE__ */ jsx4("div", {
                   className: "flex justify-end gap-2",
                   onClick: (e) => e.stopPropagation(),
-                  children: rowActions.map((a) => /* @__PURE__ */ jsx3(Button, {
+                  children: rowActions.map((a) => /* @__PURE__ */ jsx4(Button, {
                     action: a.action,
                     variant: a.variant,
                     doc,
@@ -437,30 +736,33 @@ function Detail(props) {
   const { data, error, loading } = useAsync(() => collection.get(id), [id]);
   const relations = useRelations(fields, data ? [data] : null, resolveRelation);
   if (loading)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
       children: "Loading…"
     });
   if (error)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "error",
       children: error
     });
   if (!data)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
       children: "Not found."
     });
-  return /* @__PURE__ */ jsx3("dl", {
+  return /* @__PURE__ */ jsx4("dl", {
     className: "divide-y divide-neutral-200 rounded-md border border-neutral-200 dark:divide-neutral-800 dark:border-neutral-800",
-    children: fields.map((f) => /* @__PURE__ */ jsxs2("div", {
+    children: fields.map((f) => /* @__PURE__ */ jsxs3("div", {
       className: "grid grid-cols-3 gap-4 px-3 py-2",
       children: [
-        /* @__PURE__ */ jsx3("dt", {
+        /* @__PURE__ */ jsx4("dt", {
           className: "text-sm text-neutral-500",
           children: f.label
         }),
-        /* @__PURE__ */ jsx3("dd", {
+        f.format === "markdown" && !f.display ? /* @__PURE__ */ jsx4("dd", {
+          className: "col-span-2 whitespace-pre-wrap text-sm",
+          children: String(data[f.field] ?? "")
+        }) : /* @__PURE__ */ jsx4("dd", {
           className: "col-span-2 text-sm",
           children: cellValue(data, f, relations, ctx.locale, ctx.currency)
         })
@@ -493,10 +795,12 @@ function coerce(raw, format) {
 function Form(props) {
   const { collection, mode, id, fields, submitLabel, onSuccess, resolveRelation } = props;
   const dispatch = useAction();
-  const [values, setValues] = useState2({});
-  const [error, setError] = useState2(null);
-  const [busy, setBusy] = useState2(false);
-  const [loading, setLoading] = useState2(mode === "update");
+  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(() => {
     if (mode !== "update" || !id)
       return;
@@ -523,10 +827,18 @@ function Form(props) {
       live = false;
     };
   }, [id, mode]);
+  const setField = useCallback2((field, value) => {
+    setDone(false);
+    setValues((v) => ({ ...v, [field]: value }));
+  }, []);
   const submit = useCallback2(async (e) => {
     e.preventDefault();
+    if (submitting.current)
+      return;
+    submitting.current = true;
     setBusy(true);
     setError(null);
+    setDone(false);
     try {
       const payload = {};
       for (const f of fields) {
@@ -538,53 +850,79 @@ function Form(props) {
       if (onSuccess) {
         const doc = mode === "create" ? saved : { id, ...payload };
         await dispatch(onSuccess, { doc });
+      } else {
+        setDone(true);
+        if (mode === "create")
+          setValues({});
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {
+      submitting.current = false;
       setBusy(false);
     }
   }, [collection, dispatch, fields, id, mode, onSuccess, values]);
   if (loading)
-    return /* @__PURE__ */ jsx3(Message, {
+    return /* @__PURE__ */ jsx4(Message, {
       tone: "muted",
       children: "Loading…"
     });
-  return /* @__PURE__ */ jsxs2("form", {
+  return /* @__PURE__ */ jsxs3("form", {
     onSubmit: submit,
     className: "flex w-full max-w-xl flex-col gap-3",
     children: [
-      fields.map((f) => /* @__PURE__ */ jsxs2("label", {
+      fields.map((f) => /* @__PURE__ */ jsxs3("label", {
         className: "flex flex-col gap-1",
         children: [
-          /* @__PURE__ */ jsx3("span", {
+          /* @__PURE__ */ jsx4("span", {
             className: "text-sm text-neutral-600 dark:text-neutral-400",
             children: f.label
           }),
-          f.display && resolveRelation ? /* @__PURE__ */ jsx3(RelationSelect, {
+          f.display && resolveRelation ? /* @__PURE__ */ jsx4(RelationSelect, {
             collection: resolveRelation(f.field),
             displayField: f.display.field,
             value: String(values[f.field] ?? ""),
-            onChange: (next) => setValues((v) => ({ ...v, [f.field]: next }))
-          }) : f.format === "boolean" ? /* @__PURE__ */ jsx3("input", {
+            onChange: (next) => setField(f.field, next)
+          }) : f.format === "boolean" ? /* @__PURE__ */ jsx4("input", {
             type: "checkbox",
             className: "h-4 w-4",
             checked: Boolean(values[f.field]),
-            onChange: (e) => setValues((v) => ({ ...v, [f.field]: e.target.checked }))
-          }) : /* @__PURE__ */ jsx3("input", {
+            onChange: (e) => setField(f.field, e.target.checked)
+          }) : f.options && f.options.length > 0 ? /* @__PURE__ */ jsxs3("select", {
+            className: INPUT_CLASS,
+            value: String(values[f.field] ?? ""),
+            onChange: (e) => setField(f.field, e.target.value),
+            children: [
+              /* @__PURE__ */ jsx4("option", {
+                value: "",
+                children: "—"
+              }),
+              f.options.map((opt) => /* @__PURE__ */ jsx4("option", {
+                value: opt,
+                children: opt
+              }, opt))
+            ]
+          }) : f.format === "markdown" ? /* @__PURE__ */ jsx4(MarkdownField, {
+            value: String(values[f.field] ?? ""),
+            onChange: (next) => setField(f.field, next)
+          }) : /* @__PURE__ */ jsx4("input", {
             type: inputType(f.format),
-            className: "rounded-md border border-neutral-300 px-3 py-1.5 text-sm dark:border-neutral-700 dark:bg-neutral-950",
+            className: INPUT_CLASS,
             value: String(values[f.field] ?? ""),
-            onChange: (e) => setValues((v) => ({ ...v, [f.field]: e.target.value }))
+            onChange: (e) => setField(f.field, e.target.value)
           })
         ]
       }, f.field)),
-      error ? /* @__PURE__ */ jsx3(Message, {
+      error ? /* @__PURE__ */ jsx4(Message, {
         tone: "error",
         children: error
       }) : null,
-      /* @__PURE__ */ jsx3("div", {
-        children: /* @__PURE__ */ jsx3("button", {
+      done && !error ? /* @__PURE__ */ jsx4(Message, {
+        tone: "success",
+        children: mode === "create" ? "Saved." : "Changes saved."
+      }) : null,
+      /* @__PURE__ */ jsx4("div", {
+        children: /* @__PURE__ */ jsx4("button", {
           type: "submit",
           disabled: busy,
           className: cx(BUTTON_BASE, VARIANT.default),
@@ -594,6 +932,291 @@ function Form(props) {
     ]
   });
 }
+
+// src/routes.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, 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(/\/+$/, "") || "/";
+  const given = clean.split("/");
+  const parts = pattern.split("/");
+  if (given.length !== parts.length)
+    return null;
+  const params = {};
+  for (let i = 0;i < parts.length; i++) {
+    const seg = parts[i];
+    const value = given[i];
+    if (seg.startsWith(":")) {
+      if (value.length === 0)
+        return null;
+      params[seg.slice(1)] = value;
+    } else if (seg !== value) {
+      return null;
+    }
+  }
+  return params;
+}
+function paramCount(pattern) {
+  return pattern.split("/").filter((s) => s.startsWith(":")).length;
+}
+function resolveRoute(routes, path) {
+  const ordered = [...routes].sort((a, b) => paramCount(a.path) - paramCount(b.path));
+  for (const route of ordered) {
+    const params = matchRoute(path, route.path);
+    if (params !== null)
+      return { route, params };
+  }
+  return null;
+}
+function GroveRoutes(props) {
+  const { routes, context, fallback, children, gate } = props;
+  const [path, setPath] = useState4(() => window.location.pathname);
+  useEffect3(() => {
+    const onPop = () => setPath(window.location.pathname);
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, []);
+  const navigate = useCallback3((href) => {
+    window.history.pushState({}, "", href);
+    setPath(href.split(/[?#]/)[0] ?? href);
+  }, []);
+  const value = useMemo2(() => ({ ...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, {
+    routes
+  }) : /* @__PURE__ */ jsx5(NotFound, {}));
+  const screen = gate && hit && hit.route.requiresAuth !== false ? gate(matched) : matched;
+  return /* @__PURE__ */ jsxs4(GroveUiProvider, {
+    value,
+    children: [
+      children,
+      screen
+    ]
+  });
+}
+function NotFound() {
+  const { navigate } = useGroveUi();
+  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."
+      }),
+      /* @__PURE__ */ jsx5("a", {
+        href: "/",
+        className: "w-fit text-sm underline",
+        onClick: (e) => {
+          e.preventDefault();
+          navigate("/");
+        },
+        children: "Home"
+      })
+    ]
+  });
+}
+function RouteIndex({ routes }) {
+  const { navigate } = useGroveUi();
+  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",
+    children: [
+      /* @__PURE__ */ jsx5("h1", {
+        className: "text-2xl font-semibold",
+        children: "Pages"
+      }),
+      /* @__PURE__ */ jsx5("ul", {
+        className: "flex flex-col gap-1",
+        children: pages.map((r) => /* @__PURE__ */ jsxs4("li", {
+          children: [
+            /* @__PURE__ */ jsx5("a", {
+              href: r.path,
+              className: "text-sm underline",
+              onClick: (e) => {
+                e.preventDefault();
+                navigate(r.path);
+              },
+              children: r.title ?? r.path
+            }),
+            /* @__PURE__ */ jsx5("span", {
+              className: "ml-2 text-xs text-neutral-500",
+              children: r.path
+            })
+          ]
+        }, r.path))
+      })
+    ]
+  });
+}
+
+// src/SignIn.tsx
+import { useCallback as useCallback4, useRef as useRef3, useState as useState5 } from "react";
+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 [signedIn, setSignedIn] = useState5(() => auth.getTokens() !== null);
+  const [mode, setMode] = useState5("login");
+  const [email, setEmail] = useState5("");
+  const [password, setPassword] = useState5("");
+  const [name, setName] = useState5("");
+  const [code, setCode] = useState5("");
+  const [error, setError] = useState5(null);
+  const [busy, setBusy] = useState5(false);
+  const submitting = useRef3(false);
+  const finish = useCallback4((user) => {
+    setSignedIn(true);
+    onSignedIn?.(user);
+  }, [onSignedIn]);
+  const submit = useCallback4(async (e) => {
+    e.preventDefault();
+    if (submitting.current)
+      return;
+    submitting.current = true;
+    setBusy(true);
+    setError(null);
+    try {
+      if (mode === "mfa") {
+        if (!auth.verifyMfa)
+          throw new Error("This account requires a second factor, which this app does not support.");
+        finish(await auth.verifyMfa(code));
+        return;
+      }
+      if (mode === "register") {
+        if (!auth.register)
+          throw new Error("Registration is not available.");
+        await auth.register(email, password, name.trim().length > 0 ? name.trim() : undefined);
+      }
+      const user = await auth.login(email, password);
+      if (user["mfaRequired"] === true) {
+        setMode("mfa");
+        return;
+      }
+      finish(user);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      submitting.current = false;
+      setBusy(false);
+    }
+  }, [auth, code, email, finish, mode, name, password]);
+  if (signedIn)
+    return /* @__PURE__ */ jsx6(Fragment2, {
+      children
+    });
+  const heading = mode === "register" ? "Create account" : mode === "mfa" ? "Two-factor code" : title ?? "Sign in";
+  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",
+    children: /* @__PURE__ */ jsxs5("form", {
+      onSubmit: submit,
+      className: "flex w-full max-w-sm flex-col gap-3",
+      "aria-busy": busy,
+      children: [
+        /* @__PURE__ */ jsx6("h1", {
+          className: "text-2xl font-semibold",
+          children: heading
+        }),
+        mode === "mfa" ? /* @__PURE__ */ jsxs5("label", {
+          className: "flex flex-col gap-1",
+          children: [
+            /* @__PURE__ */ jsx6("span", {
+              className: label,
+              children: "Code from your authenticator app, or a backup code"
+            }),
+            /* @__PURE__ */ jsx6("input", {
+              className: INPUT_CLASS,
+              autoComplete: "one-time-code",
+              inputMode: "numeric",
+              required: true,
+              autoFocus: true,
+              value: code,
+              onChange: (e) => setCode(e.target.value)
+            })
+          ]
+        }) : /* @__PURE__ */ jsxs5(Fragment2, {
+          children: [
+            mode === "register" ? /* @__PURE__ */ jsxs5("label", {
+              className: "flex flex-col gap-1",
+              children: [
+                /* @__PURE__ */ jsx6("span", {
+                  className: label,
+                  children: "Name"
+                }),
+                /* @__PURE__ */ jsx6("input", {
+                  className: INPUT_CLASS,
+                  autoComplete: "name",
+                  value: name,
+                  onChange: (e) => setName(e.target.value)
+                })
+              ]
+            }) : null,
+            /* @__PURE__ */ jsxs5("label", {
+              className: "flex flex-col gap-1",
+              children: [
+                /* @__PURE__ */ jsx6("span", {
+                  className: label,
+                  children: "Email"
+                }),
+                /* @__PURE__ */ jsx6("input", {
+                  className: INPUT_CLASS,
+                  type: "email",
+                  autoComplete: "email",
+                  required: true,
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value)
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs5("label", {
+              className: "flex flex-col gap-1",
+              children: [
+                /* @__PURE__ */ jsx6("span", {
+                  className: label,
+                  children: "Password"
+                }),
+                /* @__PURE__ */ jsx6("input", {
+                  className: INPUT_CLASS,
+                  type: "password",
+                  autoComplete: mode === "register" ? "new-password" : "current-password",
+                  required: true,
+                  value: password,
+                  onChange: (e) => setPassword(e.target.value)
+                })
+              ]
+            })
+          ]
+        }),
+        error ? /* @__PURE__ */ jsx6("p", {
+          className: TONE.error,
+          role: "alert",
+          children: error
+        }) : null,
+        /* @__PURE__ */ jsxs5("div", {
+          className: "flex items-center justify-between gap-3 pt-1",
+          children: [
+            /* @__PURE__ */ jsx6("button", {
+              type: "submit",
+              disabled: busy,
+              className: cx(BUTTON_BASE, VARIANT.default),
+              children: busy ? "Please wait…" : mode === "register" ? "Create account" : mode === "mfa" ? "Verify" : "Sign in"
+            }),
+            allowRegister && mode !== "mfa" ? /* @__PURE__ */ jsx6("button", {
+              type: "button",
+              className: cx(BUTTON_BASE, VARIANT.ghost),
+              onClick: () => {
+                setError(null);
+                setMode(mode === "register" ? "login" : "register");
+              },
+              children: mode === "register" ? "Have an account? Sign in" : "Create an account"
+            }) : null
+          ]
+        })
+      ]
+    })
+  });
+}
 export {
   Button,
   DataTable,
@@ -601,13 +1224,23 @@ export {
   Divider,
   Form,
   Grid,
+  GroveRoutes,
   GroveUiProvider,
+  Header,
   Heading,
+  MarkdownField,
   RelationSelect,
+  RouteIndex,
+  SignIn,
   Stack,
   Text,
+  detectLocale,
   formatValue,
+  matchRoute,
+  renderMarkdown,
   resolveHref,
+  resolveRoute,
   useAction,
-  useGroveUi
+  useGroveUi,
+  useMessages
 };