@fewchurs/react 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -4,7 +4,7 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 // src/client/version.ts
-var SDK_VERSION = "1.4.0";
+var SDK_VERSION = "1.6.0";
 
 // src/client/constants.ts
 var SDK_HEADER = `react/${SDK_VERSION}`;
@@ -22,17 +22,28 @@ var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 var ROADMAP_STATUSES = ["planned", "in_progress", "done"];
 
 // src/client/errors.ts
+var NOT_CONFIGURED_MESSAGE = "Fewchurs is not configured.";
 var USER_MESSAGES = {
-  invalid_key: "Feedback is unavailable right now.",
-  validation_failed: "Please check what you entered and try again.",
-  rate_limited: "You have reached today's limit. Try again tomorrow.",
-  not_found: "That request no longer exists.",
-  limit_reached: "Feedback is unavailable right now.",
-  server: "Something went wrong. Please try again.",
-  network: "Could not reach the server. Check your connection."
+  invalid_key: "Invalid API key. Check the key in your Fewchurs dashboard.",
+  validation_failed: "Invalid input.",
+  rate_limited: "You've reached today's limit. Try again tomorrow.",
+  not_found: "This request no longer exists.",
+  limit_reached: "This board isn't accepting requests right now.",
+  server: "Something went wrong. Try again.",
+  network: "You're offline."
 };
+function isWrongApp(error) {
+  return error.code === "invalid_key" && error.status === 403;
+}
+function isNotConfigured(error) {
+  return error.code === "server" && error.message === NOT_CONFIGURED_MESSAGE;
+}
+function notConfiguredError() {
+  return { code: "server", status: 500, message: NOT_CONFIGURED_MESSAGE };
+}
 function userMessage(error) {
   if (error.code === "validation_failed" && error.message) return error.message;
+  if (isWrongApp(error) && error.message) return error.message;
   return USER_MESSAGES[error.code];
 }
 function networkError(message = "Network request failed.") {
@@ -43,17 +54,17 @@ function validationError(message) {
 }
 function errorFromResponse(status, body) {
   const code = body?.error?.code;
-  const message = body?.error?.message ?? `Request failed (${status}).`;
+  const serverMessage = body?.error?.message;
+  const message = serverMessage ?? `Request failed (${status}).`;
   switch (code) {
     case "invalid_key":
       return { code: "invalid_key", status: 401, message };
     case "wrong_app":
       return { code: "invalid_key", status: 403, message };
-    // missing_device_id is a client mistake the caller fixes the same way a bad field is fixed,
-    // so it collapses into validation_failed rather than widening the public union.
     case "missing_device_id":
+      return { code: "server", status: 400, message };
     case "validation_failed":
-      return { code: "validation_failed", status: 400, message };
+      return { code: "validation_failed", status: 400, message: serverMessage ?? "Invalid input." };
     case "rate_limited":
       return { code: "rate_limited", status: 429, message };
     case "not_found":
@@ -147,11 +158,8 @@ function normalizeVote(value) {
 // src/client/validate.ts
 function validateFeatureInput(input) {
   const title = input.title.trim();
-  if (title.length < LIMITS.titleMin) {
-    return validationError(`Title must be at least ${LIMITS.titleMin} characters.`);
-  }
-  if (title.length > LIMITS.titleMax) {
-    return validationError(`Title must be at most ${LIMITS.titleMax} characters.`);
+  if (title.length < LIMITS.titleMin || title.length > LIMITS.titleMax) {
+    return validationError(`Title must be ${LIMITS.titleMin}\u2013${LIMITS.titleMax} characters.`);
   }
   if ((input.description ?? "").trim().length > LIMITS.descriptionMax) {
     return validationError(`Description must be at most ${LIMITS.descriptionMax} characters.`);
@@ -163,9 +171,8 @@ function validateFeatureInput(input) {
 }
 function validateCommentInput(input) {
   const text = input.text.trim();
-  if (text.length < LIMITS.commentMin) return validationError("Write a comment first.");
-  if (text.length > LIMITS.commentMax) {
-    return validationError(`Comment must be at most ${LIMITS.commentMax} characters.`);
+  if (text.length < LIMITS.commentMin || text.length > LIMITS.commentMax) {
+    return validationError(`Comment must be ${LIMITS.commentMin}\u2013${LIMITS.commentMax} characters.`);
   }
   if ((input.authorName ?? "").trim().length > LIMITS.authorNameMax) {
     return validationError(`Name must be at most ${LIMITS.authorNameMax} characters.`);
@@ -185,6 +192,7 @@ function createFewchursClient(options = {}) {
   const doFetch = options.fetch ?? globalThis.fetch?.bind(globalThis);
   const retries = options.retries ?? 1;
   const retryDelayMs = options.retryDelayMs ?? 250;
+  if (options.apiKey && !options.apiKey.startsWith("fr_")) logOnce(BAD_KEY_PREFIX);
   function getDeviceId() {
     return typeof options.deviceId === "function" ? options.deviceId() : options.deviceId ?? null;
   }
@@ -211,6 +219,11 @@ function createFewchursClient(options = {}) {
   }
   async function request(path, map, { method = "GET", body, query, signal } = {}) {
     if (!doFetch) return { ok: false, error: networkError("No fetch implementation available.") };
+    if (!options.apiKey && options.baseUrl === void 0) {
+      const failure = notConfiguredError();
+      logError(failure);
+      return { ok: false, error: failure };
+    }
     const target = url(path, query);
     const init = { method, headers: headers(body !== void 0) };
     if (body !== void 0) init.body = JSON.stringify(body);
@@ -330,16 +343,21 @@ function delay(ms) {
 function messageOf(error) {
   return error instanceof Error ? error.message : "Network request failed.";
 }
-var INVALID_KEY_HELP = "The API key was rejected. Check FEWCHURS_API_KEY (server) or the apiKey passed to FewchursProvider, and that the key is active in your Fewchurs dashboard.";
+var INVALID_KEY_HELP = "Fewchurs rejected the API key. Check the key in your dashboard (Apps \u2192 API keys).";
+var NOT_CONFIGURED_HELP = "Fewchurs is not configured. Pass apiKey to FewchursProvider, or set FEWCHURS_API_KEY on your server.";
+var BAD_KEY_PREFIX = 'The Fewchurs API key should start with "fr_". Copy it from your dashboard.';
 var loggedErrors = /* @__PURE__ */ new Set();
-function logError(error) {
+function logOnce(detail) {
   if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
-  const isInvalidKey = error.code === "invalid_key" && error.status === 401;
-  const detail = isInvalidKey ? INVALID_KEY_HELP : error.message;
   if (loggedErrors.has(detail)) return;
   loggedErrors.add(detail);
   console.warn(`[fewchurs] : ${detail}`);
 }
+function logError(error) {
+  if (isNotConfigured(error)) return logOnce(NOT_CONFIGURED_HELP);
+  const isInvalidKey = error.code === "invalid_key" && error.status === 401;
+  logOnce(isInvalidKey ? INVALID_KEY_HELP : error.message);
+}
 
 // src/identity/deviceId.ts
 var COOKIE_NAME = "fewchurs_did";
@@ -715,7 +733,8 @@ function useFewchurs() {
 }
 
 // src/components/Board.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useState as useState10 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef2, useState as useState10 } from "react";
+import { flushSync } from "react-dom";
 
 // src/hooks/useFewchursConfig.ts
 import { useEffect as useEffect2 } from "react";
@@ -769,11 +788,19 @@ var DEFAULT_LABELS = {
   loadMore: "Load more",
   retry: "Try again",
   errorInvalidKeyTitle: "Invalid API key",
-  errorInvalidKeyDetail: "We can't connect to this board right now. The owner of this site needs to check its setup.",
-  errorWrongAppTitle: "Wrong platform",
-  errorWrongAppDetail: "This board isn't set up for this site or app yet. Its owner needs to add it in Fewchurs.",
-  errorTitle: "Something went wrong",
-  errorDetail: "We couldn't load the requests. Please try again.",
+  errorInvalidKeyDetail: "Copy the key from your Fewchurs dashboard (Apps \u2192 API keys) and pass it to FewchursProvider, or set FEWCHURS_API_KEY on your server.",
+  errorWrongAppTitle: "Invalid API key",
+  errorWrongAppDetail: "",
+  errorTitle: "Couldn't load requests",
+  errorDetail: "Something went wrong. Try again.",
+  errorOfflineTitle: "You're offline",
+  errorOfflineDetail: "Check your connection and try again.",
+  errorNotSetUpTitle: "Fewchurs isn't set up",
+  errorNotSetUpDetail: "Pass apiKey to FewchursProvider, or set FEWCHURS_API_KEY on your server.",
+  errorLoadMore: "Couldn't load more.",
+  errorComments: "Couldn't load comments.",
+  fieldTitleTooShort: "At least 3 characters.",
+  fieldEmailInvalid: "Enter a valid email address.",
   comments: "Comments",
   commentPlaceholder: "Add a comment",
   postComment: "Post",
@@ -972,6 +999,7 @@ function useComments(featureId, { enabled = true } = {}) {
     store.ensureComments(featureId);
   }, [store, featureId, enabled, isReady]);
   const loadMore = useCallback5(() => store.loadMoreComments(featureId), [store, featureId]);
+  const refresh = useCallback5(() => store.refreshComments(featureId), [store, featureId]);
   const add = useCallback5(
     async (text, authorName) => {
       setIsSubmitting(true);
@@ -992,6 +1020,7 @@ function useComments(featureId, { enabled = true } = {}) {
     submitError,
     hasMore: comments.cursor !== null,
     loadMore,
+    refresh,
     add
   };
 }
@@ -1011,10 +1040,15 @@ function formatDate(iso) {
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function CommentList({ featureId }) {
   const { labels, cx } = useBoard();
-  const { comments, isLoading, isLoadingMore, error, hasMore, loadMore } = useComments(featureId);
+  const { comments, isLoading, isLoadingMore, error, hasMore, loadMore, refresh } = useComments(featureId);
   return /* @__PURE__ */ jsxs("div", { className: cx("fw-comments"), children: [
     isLoading && /* @__PURE__ */ jsx3("p", { className: cx("fw-muted"), children: labels.loading }),
-    error && /* @__PURE__ */ jsx3("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
+    error && comments.length === 0 && /* @__PURE__ */ jsxs("div", { className: cx("fw-empty", "fw-empty--compact"), role: "alert", children: [
+      /* @__PURE__ */ jsx3("p", { className: cx("fw-empty__title"), children: labels.errorComments }),
+      /* @__PURE__ */ jsx3("p", { className: cx("fw-empty__detail"), children: isNotConfigured(error) ? labels.errorNotSetUpTitle : userMessage(error) }),
+      /* @__PURE__ */ jsx3("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
+    ] }),
+    error && comments.length > 0 && /* @__PURE__ */ jsx3("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
     !isLoading && !error && comments.length === 0 && /* @__PURE__ */ jsx3("p", { className: cx("fw-muted"), children: labels.noComments }),
     /* @__PURE__ */ jsx3("ul", { className: cx("fw-comment-list"), children: comments.map((comment) => /* @__PURE__ */ jsxs("li", { className: cx("fw-comment"), children: [
       /* @__PURE__ */ jsx3("span", { className: cx("fw-comment__author"), children: comment.authorName }),
@@ -1085,7 +1119,7 @@ function CommentForm({ featureId }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx3("button", { type: "submit", className: cx("fw-btn"), disabled: isSubmitting, children: labels.postComment }),
+        /* @__PURE__ */ jsx3("button", { type: "submit", className: cx("fw-btn"), disabled: isSubmitting || !text.trim(), children: labels.postComment }),
         submitError && /* @__PURE__ */ jsx3("p", { className: cx("fw-error"), role: "alert", children: userMessage(submitError) })
       ]
     }
@@ -1094,27 +1128,31 @@ function CommentForm({ featureId }) {
 
 // src/components/FollowForm.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function FollowForm({ feature }) {
   const { labels, userEmail, cx } = useBoard();
   const { isFollowing, isPending, error, follow, unfollow } = useFollow(feature.id);
   const [email, setEmail] = useState6(userEmail ?? "");
   const [isOpen, setIsOpen] = useState6(false);
   if (isFollowing) {
-    return /* @__PURE__ */ jsx4(
-      "button",
-      {
-        type: "button",
-        className: cx("fw-link"),
-        disabled: isPending,
-        onClick: () => void unfollow(),
-        children: labels.following
-      }
-    );
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: cx("fw-link"),
+          disabled: isPending,
+          onClick: () => void unfollow(),
+          children: labels.following
+        }
+      ),
+      error && /* @__PURE__ */ jsx4("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) })
+    ] });
   }
   if (!isOpen) {
     return /* @__PURE__ */ jsx4("button", { type: "button", className: cx("fw-link"), onClick: () => setIsOpen(true), children: labels.follow });
   }
+  const isEmailValid = EMAIL_PATTERN.test(email.trim());
   return /* @__PURE__ */ jsxs2(
     "form",
     {
@@ -1138,7 +1176,8 @@ function FollowForm({ feature }) {
             required: true
           }
         ),
-        /* @__PURE__ */ jsx4("button", { type: "submit", className: cx("fw-btn"), disabled: isPending, children: labels.follow }),
+        email !== "" && !isEmailValid && /* @__PURE__ */ jsx4("p", { className: cx("fw-error"), children: labels.fieldEmailInvalid }),
+        /* @__PURE__ */ jsx4("button", { type: "submit", className: cx("fw-btn"), disabled: isPending || !isEmailValid, children: labels.follow }),
         error && /* @__PURE__ */ jsx4("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) })
       ]
     }
@@ -1181,7 +1220,7 @@ function FeatureCard({
   defaultCommentsOpen = false
 }) {
   const { labels, allowComments, cx } = useBoard();
-  const { isPending, toggle } = useVote(feature.id);
+  const { isPending, toggle, error: voteError } = useVote(feature.id);
   const [showComments, setShowComments] = useState7(defaultCommentsOpen);
   return /* @__PURE__ */ jsxs4("li", { className: cx("fw-card"), children: [
     /* @__PURE__ */ jsx7(VoteButton, { feature, isPending, onToggle: () => void toggle() }),
@@ -1209,6 +1248,7 @@ function FeatureCard({
         ),
         /* @__PURE__ */ jsx7(FollowForm, { feature })
       ] }),
+      voteError && /* @__PURE__ */ jsx7("p", { className: cx("fw-error"), role: "alert", children: userMessage(voteError) }),
       allowComments && showComments && /* @__PURE__ */ jsx7("div", { id: `fw-comments-${feature.id}`, children: /* @__PURE__ */ jsx7(CommentList, { featureId: feature.id }) })
     ] })
   ] });
@@ -1248,24 +1288,42 @@ function Bar({ width, height }) {
 }
 
 // src/components/FeatureList.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function errorCopy(error, labels) {
-  if (error.code !== "invalid_key") {
-    return { title: labels.errorTitle, detail: labels.errorDetail };
+  if (isNotConfigured(error)) {
+    return { title: labels.errorNotSetUpTitle, detail: labels.errorNotSetUpDetail };
+  }
+  if (error.code === "network") {
+    return { title: labels.errorOfflineTitle, detail: labels.errorOfflineDetail };
+  }
+  if (isWrongApp(error)) {
+    return {
+      title: labels.errorWrongAppTitle,
+      detail: labels.errorWrongAppDetail || userMessage(error)
+    };
+  }
+  if (error.code === "invalid_key") {
+    return { title: labels.errorInvalidKeyTitle, detail: labels.errorInvalidKeyDetail };
   }
-  return error.status === 403 ? { title: labels.errorWrongAppTitle, detail: labels.errorWrongAppDetail } : { title: labels.errorInvalidKeyTitle, detail: labels.errorInvalidKeyDetail };
+  return {
+    title: labels.errorTitle,
+    detail: error.code === "server" ? labels.errorDetail : userMessage(error)
+  };
 }
 function FeatureList() {
   const { initialFeatureId } = useBoard();
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     initialFeatureId && /* @__PURE__ */ jsx9(PinnedFeature, { featureId: initialFeatureId }),
     /* @__PURE__ */ jsx9(Listing, { excludeId: initialFeatureId })
   ] });
 }
 function PinnedFeature({ featureId }) {
   const { cx } = useBoard();
-  const { feature, isLoading } = useFeature(featureId);
+  const { feature, isLoading, error } = useFeature(featureId);
   if (isLoading) return /* @__PURE__ */ jsx9(FeatureListSkeleton, { rows: 1 });
+  if (!feature && error) {
+    return /* @__PURE__ */ jsx9("p", { className: cx("fw-error", "fw-pinned"), role: "alert", children: userMessage(error) });
+  }
   if (!feature) return null;
   return /* @__PURE__ */ jsx9("div", { className: cx("fw-pinned"), children: /* @__PURE__ */ jsx9("ul", { className: cx("fw-list"), children: /* @__PURE__ */ jsx9(FeatureCard, { feature, defaultCommentsOpen: true }) }) });
 }
@@ -1288,22 +1346,26 @@ function Listing({ excludeId }) {
     return /* @__PURE__ */ jsxs6("div", { className: cx("fw-empty"), role: "alert", children: [
       /* @__PURE__ */ jsx9("p", { className: cx("fw-empty__title"), children: title }),
       /* @__PURE__ */ jsx9("p", { className: cx("fw-empty__detail"), children: detail }),
-      /* @__PURE__ */ jsx9("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
+      !isNotConfigured(error) && /* @__PURE__ */ jsx9("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
     ] });
   }
   if (isLoading && visible.length === 0) {
     return /* @__PURE__ */ jsx9(FeatureListSkeleton, { roadmap: isRoadmap });
   }
   if (visible.length === 0) {
-    if (renderEmpty) return /* @__PURE__ */ jsx9(Fragment, { children: renderEmpty() });
+    if (renderEmpty) return /* @__PURE__ */ jsx9(Fragment2, { children: renderEmpty() });
     return /* @__PURE__ */ jsxs6("div", { className: cx("fw-empty"), children: [
       /* @__PURE__ */ jsx9("p", { className: cx("fw-empty__title"), children: labels.emptyTitle }),
       /* @__PURE__ */ jsx9("p", { children: labels.emptyBody })
     ] });
   }
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     isRoadmap ? /* @__PURE__ */ jsx9(RoadmapColumns, { features: visible }) : /* @__PURE__ */ jsx9(Rows2, { features: visible }),
-    hasMore && /* @__PURE__ */ jsx9("div", { className: cx("fw-pagination"), children: /* @__PURE__ */ jsx9(
+    hasMore && error && /* @__PURE__ */ jsxs6("div", { className: cx("fw-pagination"), role: "alert", children: [
+      /* @__PURE__ */ jsx9("span", { children: labels.errorLoadMore }),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void loadMore(), children: labels.retry })
+    ] }),
+    hasMore && !error && /* @__PURE__ */ jsx9("div", { className: cx("fw-pagination"), children: /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -1346,7 +1408,7 @@ function FeatureSlot({ feature }) {
   const { renderFeature } = useBoard();
   const { toggle } = useVote(feature.id);
   const { follow, unfollow } = useFollow(feature.id);
-  return /* @__PURE__ */ jsx9(Fragment, { children: renderFeature?.(feature, { toggleVote: toggle, follow, unfollow }) });
+  return /* @__PURE__ */ jsx9(Fragment2, { children: renderFeature?.(feature, { toggleVote: toggle, follow, unfollow }) });
 }
 
 // src/components/SubmitForm.tsx
@@ -1379,11 +1441,24 @@ function useSubmitFeature() {
 // src/components/SubmitForm.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function SubmitForm() {
-  const { labels, emailField, userEmail, isSubscriber, setFormOpen, setJustSubmitted, cx } = useBoard();
+  const {
+    labels,
+    emailField,
+    userEmail,
+    isSubscriber,
+    isFormOpen,
+    setFormOpen,
+    setJustSubmitted,
+    cx
+  } = useBoard();
   const { submit, isPending, error } = useSubmitFeature();
   const [title, setTitle] = useState9("");
   const [description, setDescription] = useState9("");
   const [email, setEmail] = useState9(userEmail ?? "");
+  const isTitleValid = title.trim().length >= LIMITS.titleMin;
+  const isEmailInvalid = emailField !== "off" && email !== "" && !EMAIL_PATTERN.test(email.trim());
+  const isEmailMissing = emailField === "required" && !email.trim();
+  const canSubmit = isTitleValid && !isEmailInvalid && !isEmailMissing;
   return /* @__PURE__ */ jsxs7(
     "form",
     {
@@ -1397,8 +1472,10 @@ function SubmitForm() {
           isSubscriber
         });
         if (!created) return;
-        setTitle("");
-        setDescription("");
+        if (!isFormOpen) {
+          setTitle("");
+          setDescription("");
+        }
         setJustSubmitted(true);
         setFormOpen(false);
       },
@@ -1417,7 +1494,15 @@ function SubmitForm() {
               onChange: (event) => setTitle(event.target.value),
               required: true
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: cx("fw-field__foot"), children: [
+            /* @__PURE__ */ jsx10("span", { className: cx("fw-error"), children: title !== "" && !isTitleValid ? labels.fieldTitleTooShort : "" }),
+            /* @__PURE__ */ jsxs7("span", { className: cx("fw-muted"), children: [
+              title.length,
+              "/",
+              LIMITS.titleMax
+            ] })
+          ] })
         ] }),
         /* @__PURE__ */ jsxs7("div", { className: cx("fw-field"), children: [
           /* @__PURE__ */ jsx10("label", { className: cx("fw-label"), htmlFor: "fw-description", children: labels.fieldDescription }),
@@ -1431,7 +1516,15 @@ function SubmitForm() {
               placeholder: labels.fieldDescriptionPlaceholder,
               onChange: (event) => setDescription(event.target.value)
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: cx("fw-field__foot"), children: [
+            /* @__PURE__ */ jsx10("span", {}),
+            /* @__PURE__ */ jsxs7("span", { className: cx("fw-muted"), children: [
+              description.length,
+              "/",
+              LIMITS.descriptionMax
+            ] })
+          ] })
         ] }),
         emailField !== "off" && /* @__PURE__ */ jsxs7("div", { className: cx("fw-field"), children: [
           /* @__PURE__ */ jsx10("label", { className: cx("fw-label"), htmlFor: "fw-email", children: labels.fieldEmail }),
@@ -1448,11 +1541,11 @@ function SubmitForm() {
               required: emailField === "required"
             }
           ),
-          /* @__PURE__ */ jsx10("p", { id: "fw-email-hint", className: cx("fw-muted"), children: labels.fieldEmailHint })
+          isEmailInvalid ? /* @__PURE__ */ jsx10("p", { id: "fw-email-hint", className: cx("fw-error"), children: labels.fieldEmailInvalid }) : /* @__PURE__ */ jsx10("p", { id: "fw-email-hint", className: cx("fw-muted"), children: labels.fieldEmailHint })
         ] }),
         error && /* @__PURE__ */ jsx10("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
         /* @__PURE__ */ jsxs7("div", { className: cx("fw-form__actions"), children: [
-          /* @__PURE__ */ jsx10("button", { type: "submit", className: cx("fw-btn"), disabled: isPending, children: isPending ? labels.submitting : labels.submit }),
+          /* @__PURE__ */ jsx10("button", { type: "submit", className: cx("fw-btn"), disabled: isPending || !canSubmit, children: isPending ? labels.submitting : labels.submit }),
           /* @__PURE__ */ jsx10(
             "button",
             {
@@ -1490,7 +1583,7 @@ function themeToStyle(theme) {
 }
 
 // src/components/Board.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_TABS = ["top", "new"];
 function BoardRoot({
   tabs = DEFAULT_TABS,
@@ -1576,19 +1669,92 @@ function BoardRoot({
   ) });
 }
 function DefaultBoard() {
-  const { isFormOpen, justSubmitted, labels, renderHeader, cx } = useBoard();
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+  const { renderHeader } = useBoard();
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
     renderHeader ? renderHeader() : /* @__PURE__ */ jsx11(BoardHeading, {}),
-    /* @__PURE__ */ jsxs8("div", { className: cx("fw-toolbar"), children: [
-      /* @__PURE__ */ jsx11(BoardTabs, {}),
-      /* @__PURE__ */ jsx11(SubmitTrigger, {})
-    ] }),
-    justSubmitted && /* @__PURE__ */ jsx11("p", { className: cx("fw-alert"), role: "status", children: labels.submitted }),
-    isFormOpen && /* @__PURE__ */ jsx11(SubmitForm, {}),
-    /* @__PURE__ */ jsx11(FeatureList, {}),
+    /* @__PURE__ */ jsx11(BoardPanels, {}),
     /* @__PURE__ */ jsx11(Branding, {})
   ] });
 }
+var LEAVE_MS = 110;
+var ENTER_MS = 300;
+var ENTER_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+function canAnimate(element) {
+  if (!element || typeof element.animate !== "function") return false;
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function BoardPanels() {
+  const { isFormOpen, setFormOpen, justSubmitted, setJustSubmitted, labels, unstyled, cx } = useBoard();
+  const [showForm, setShowForm] = useState10(isFormOpen);
+  const panel = useRef2(null);
+  const trigger = useRef2(null);
+  const entering = useRef2(null);
+  const hasSwapped = useRef2(false);
+  useEffect6(() => {
+    if (isFormOpen === showForm) return;
+    hasSwapped.current = true;
+    const element = panel.current;
+    if (unstyled || !canAnimate(element)) {
+      setShowForm(isFormOpen);
+      return;
+    }
+    entering.current?.cancel();
+    const leaving = element.animate(
+      { opacity: [1, 0], transform: ["translateY(0)", "translateY(-4px)"] },
+      { duration: LEAVE_MS, easing: "ease-in", fill: "forwards" }
+    );
+    leaving.onfinish = () => {
+      const from = element.offsetHeight;
+      flushSync(() => setShowForm(isFormOpen));
+      leaving.cancel();
+      const to = element.offsetHeight;
+      element.style.overflow = "hidden";
+      const enter = element.animate(
+        {
+          opacity: [0, 1],
+          transform: ["translateY(6px)", "translateY(0)"],
+          height: [`${from}px`, `${to}px`]
+        },
+        { duration: ENTER_MS, easing: ENTER_EASING }
+      );
+      const finish = () => {
+        element.style.overflow = "";
+      };
+      enter.onfinish = finish;
+      enter.oncancel = finish;
+      entering.current = enter;
+    };
+    return () => leaving.cancel();
+  }, [isFormOpen, showForm, unstyled]);
+  useEffect6(() => {
+    if (!hasSwapped.current) return;
+    const target = showForm ? panel.current?.querySelector("#fw-title") : trigger.current;
+    target?.focus({ preventScroll: true });
+  }, [showForm]);
+  return /* @__PURE__ */ jsxs8("div", { ref: panel, children: [
+    /* @__PURE__ */ jsxs8("div", { hidden: showForm, children: [
+      /* @__PURE__ */ jsxs8("div", { className: cx("fw-toolbar"), children: [
+        /* @__PURE__ */ jsx11(BoardTabs, {}),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            ref: trigger,
+            type: "button",
+            className: cx("fw-btn"),
+            onClick: () => {
+              setJustSubmitted(false);
+              setFormOpen(true);
+            },
+            children: labels.newRequest
+          }
+        )
+      ] }),
+      justSubmitted && /* @__PURE__ */ jsx11("p", { className: cx("fw-alert"), role: "status", children: labels.submitted }),
+      /* @__PURE__ */ jsx11(FeatureList, {})
+    ] }),
+    showForm && /* @__PURE__ */ jsx11(SubmitForm, {})
+  ] });
+}
 function BoardHeading() {
   const { labels, cx } = useBoard();
   return /* @__PURE__ */ jsx11("h2", { className: cx("fw-heading"), children: labels.title });
@@ -1652,7 +1818,7 @@ var FewchursBoard = Object.assign(BoardRoot, {
 });
 
 // src/components/BoardDialog.tsx
-import { useEffect as useEffect7, useRef as useRef2 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function FewchursBoardDialog({
   open,
@@ -1661,8 +1827,8 @@ function FewchursBoardDialog({
   variant = "dialog",
   ...boardProps
 }) {
-  const dialogRef = useRef2(null);
-  const openerRef = useRef2(null);
+  const dialogRef = useRef3(null);
+  const openerRef = useRef3(null);
   useEffect7(() => {
     if (!open) return;
     openerRef.current = document.activeElement;
@@ -1701,7 +1867,7 @@ function FewchursBoardDialog({
 // src/components/BoardButton.tsx
 import { useCallback as useCallback7, useState as useState11 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function launcherClasses(floating) {
   if (!floating) return "fw-launcher";
   const side = floating === "left" ? " fw-launcher--left" : "";
@@ -1718,7 +1884,7 @@ function FewchursButton({
   const [open, setOpen] = useState11(false);
   const close = useCallback7(() => setOpen(false), []);
   const classes = [board.unstyled ? "" : launcherClasses(floating), className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
     /* @__PURE__ */ jsx13(
       "button",
       {
@@ -1764,6 +1930,7 @@ export {
   FewchursProvider,
   FollowForm,
   LIMITS,
+  NOT_CONFIGURED_MESSAGE,
   ROADMAP_STATUSES,
   SDK_HEADER,
   SDK_VERSION,