@fewchurs/react 1.4.0 → 1.6.0

package/dist/index.js

@@ -38,6 +38,7 @@ __export(src_exports, {
   FewchursProvider: () => FewchursProvider,
   FollowForm: () => FollowForm,
   LIMITS: () => LIMITS,
+  NOT_CONFIGURED_MESSAGE: () => NOT_CONFIGURED_MESSAGE,
   ROADMAP_STATUSES: () => ROADMAP_STATUSES,
   SDK_HEADER: () => SDK_HEADER,
   SDK_VERSION: () => SDK_VERSION,
@@ -85,7 +86,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = require("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}`;
@@ -103,17 +104,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.") {
@@ -124,17 +136,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":
@@ -228,11 +240,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.`);
@@ -244,9 +253,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.`);
@@ -266,6 +274,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;
   }
@@ -292,6 +301,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);
@@ -411,16 +425,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";
@@ -797,6 +816,7 @@ function useFewchurs() {
 
 // src/components/Board.tsx
 var import_react15 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/hooks/useFewchursConfig.ts
 var import_react3 = require("react");
@@ -850,11 +870,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",
@@ -1053,6 +1081,7 @@ function useComments(featureId, { enabled = true } = {}) {
     store.ensureComments(featureId);
   }, [store, featureId, enabled, isReady]);
   const loadMore = (0, import_react9.useCallback)(() => store.loadMoreComments(featureId), [store, featureId]);
+  const refresh = (0, import_react9.useCallback)(() => store.refreshComments(featureId), [store, featureId]);
   const add = (0, import_react9.useCallback)(
     async (text, authorName) => {
       setIsSubmitting(true);
@@ -1073,6 +1102,7 @@ function useComments(featureId, { enabled = true } = {}) {
     submitError,
     hasMore: comments.cursor !== null,
     loadMore,
+    refresh,
     add
   };
 }
@@ -1092,10 +1122,15 @@ function formatDate(iso) {
 var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("fw-comments"), children: [
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-muted"), children: labels.loading }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
+    error && comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("fw-empty", "fw-empty--compact"), role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-empty__title"), children: labels.errorComments }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-empty__detail"), children: isNotConfigured(error) ? labels.errorNotSetUpTitle : userMessage(error) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
+    ] }),
+    error && comments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
     !isLoading && !error && comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-muted"), children: labels.noComments }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: cx("fw-comment-list"), children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { className: cx("fw-comment"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("fw-comment__author"), children: comment.authorName }),
@@ -1166,7 +1201,7 @@ function CommentForm({ featureId }) {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isSubmitting, children: labels.postComment }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isSubmitting || !text.trim(), children: labels.postComment }),
         submitError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(submitError) })
       ]
     }
@@ -1182,20 +1217,24 @@ function FollowForm({ feature }) {
   const [email, setEmail] = (0, import_react11.useState)(userEmail ?? "");
   const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
   if (isFollowing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "button",
-      {
-        type: "button",
-        className: cx("fw-link"),
-        disabled: isPending,
-        onClick: () => void unfollow(),
-        children: labels.following
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cx("fw-link"),
+          disabled: isPending,
+          onClick: () => void unfollow(),
+          children: labels.following
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) })
+    ] });
   }
   if (!isOpen) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: cx("fw-link"), onClick: () => setIsOpen(true), children: labels.follow });
   }
+  const isEmailValid = EMAIL_PATTERN.test(email.trim());
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "form",
     {
@@ -1219,7 +1258,8 @@ function FollowForm({ feature }) {
             required: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending, children: labels.follow }),
+        email !== "" && !isEmailValid && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cx("fw-error"), children: labels.fieldEmailInvalid }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending || !isEmailValid, children: labels.follow }),
         error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) })
       ]
     }
@@ -1262,7 +1302,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] = (0, import_react12.useState)(defaultCommentsOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: cx("fw-card"), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VoteButton, { feature, isPending, onToggle: () => void toggle() }),
@@ -1290,6 +1330,7 @@ function FeatureCard({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FollowForm, { feature })
       ] }),
+      voteError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(voteError) }),
       allowComments && showComments && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: `fw-comments-${feature.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CommentList, { featureId: feature.id }) })
     ] })
   ] });
@@ -1331,10 +1372,25 @@ function Bar({ width, height }) {
 // src/components/FeatureList.tsx
 var import_jsx_runtime9 = require("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();
@@ -1345,8 +1401,11 @@ function FeatureList() {
 }
 function PinnedFeature({ featureId }) {
   const { cx } = useBoard();
-  const { feature, isLoading } = useFeature(featureId);
+  const { feature, isLoading, error } = useFeature(featureId);
   if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeatureListSkeleton, { rows: 1 });
+  if (!feature && error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cx("fw-error", "fw-pinned"), role: "alert", children: userMessage(error) });
+  }
   if (!feature) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cx("fw-pinned"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: cx("fw-list"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FeatureCard, { feature, defaultCommentsOpen: true }) }) });
 }
@@ -1369,7 +1428,7 @@ function Listing({ excludeId }) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("fw-empty"), role: "alert", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cx("fw-empty__title"), children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cx("fw-empty__detail"), children: detail }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
+      !isNotConfigured(error) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void refresh(), children: labels.retry })
     ] });
   }
   if (isLoading && visible.length === 0) {
@@ -1384,7 +1443,11 @@ function Listing({ excludeId }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
     isRoadmap ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RoadmapColumns, { features: visible }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Rows2, { features: visible }),
-    hasMore && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cx("fw-pagination"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    hasMore && error && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("fw-pagination"), role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: labels.errorLoadMore }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: cx("fw-btn-text"), onClick: () => void loadMore(), children: labels.retry })
+    ] }),
+    hasMore && !error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cx("fw-pagination"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         type: "button",
@@ -1460,11 +1523,24 @@ function useSubmitFeature() {
 // src/components/SubmitForm.tsx
 var import_jsx_runtime10 = require("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] = (0, import_react14.useState)("");
   const [description, setDescription] = (0, import_react14.useState)("");
   const [email, setEmail] = (0, import_react14.useState)(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__ */ (0, import_jsx_runtime10.jsxs)(
     "form",
     {
@@ -1478,8 +1554,10 @@ function SubmitForm() {
           isSubscriber
         });
         if (!created) return;
-        setTitle("");
-        setDescription("");
+        if (!isFormOpen) {
+          setTitle("");
+          setDescription("");
+        }
         setJustSubmitted(true);
         setFormOpen(false);
       },
@@ -1498,7 +1576,15 @@ function SubmitForm() {
               onChange: (event) => setTitle(event.target.value),
               required: true
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field__foot"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cx("fw-error"), children: title !== "" && !isTitleValid ? labels.fieldTitleTooShort : "" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: cx("fw-muted"), children: [
+              title.length,
+              "/",
+              LIMITS.titleMax
+            ] })
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: cx("fw-label"), htmlFor: "fw-description", children: labels.fieldDescription }),
@@ -1512,7 +1598,15 @@ function SubmitForm() {
               placeholder: labels.fieldDescriptionPlaceholder,
               onChange: (event) => setDescription(event.target.value)
             }
-          )
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field__foot"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: cx("fw-muted"), children: [
+              description.length,
+              "/",
+              LIMITS.descriptionMax
+            ] })
+          ] })
         ] }),
         emailField !== "off" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-field"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: cx("fw-label"), htmlFor: "fw-email", children: labels.fieldEmail }),
@@ -1529,11 +1623,11 @@ function SubmitForm() {
               required: emailField === "required"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: "fw-email-hint", className: cx("fw-muted"), children: labels.fieldEmailHint })
+          isEmailInvalid ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: "fw-email-hint", className: cx("fw-error"), children: labels.fieldEmailInvalid }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: "fw-email-hint", className: cx("fw-muted"), children: labels.fieldEmailHint })
         ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cx("fw-error"), role: "alert", children: userMessage(error) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx("fw-form__actions"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending, children: isPending ? labels.submitting : labels.submit }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "submit", className: cx("fw-btn"), disabled: isPending || !canSubmit, children: isPending ? labels.submitting : labels.submit }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
@@ -1657,19 +1751,92 @@ function BoardRoot({
   ) });
 }
 function DefaultBoard() {
-  const { isFormOpen, justSubmitted, labels, renderHeader, cx } = useBoard();
+  const { renderHeader } = useBoard();
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
     renderHeader ? renderHeader() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoardHeading, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx("fw-toolbar"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoardTabs, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SubmitTrigger, {})
-    ] }),
-    justSubmitted && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cx("fw-alert"), role: "status", children: labels.submitted }),
-    isFormOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SubmitForm, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FeatureList, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoardPanels, {}),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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] = (0, import_react15.useState)(isFormOpen);
+  const panel = (0, import_react15.useRef)(null);
+  const trigger = (0, import_react15.useRef)(null);
+  const entering = (0, import_react15.useRef)(null);
+  const hasSwapped = (0, import_react15.useRef)(false);
+  (0, import_react15.useEffect)(() => {
+    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;
+      (0, import_react_dom.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]);
+  (0, import_react15.useEffect)(() => {
+    if (!hasSwapped.current) return;
+    const target = showForm ? panel.current?.querySelector("#fw-title") : trigger.current;
+    target?.focus({ preventScroll: true });
+  }, [showForm]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: panel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { hidden: showForm, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx("fw-toolbar"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoardTabs, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            ref: trigger,
+            type: "button",
+            className: cx("fw-btn"),
+            onClick: () => {
+              setJustSubmitted(false);
+              setFormOpen(true);
+            },
+            children: labels.newRequest
+          }
+        )
+      ] }),
+      justSubmitted && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cx("fw-alert"), role: "status", children: labels.submitted }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FeatureList, {})
+    ] }),
+    showForm && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SubmitForm, {})
+  ] });
+}
 function BoardHeading() {
   const { labels, cx } = useBoard();
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: cx("fw-heading"), children: labels.title });
@@ -1781,7 +1948,7 @@ function FewchursBoardDialog({
 
 // src/components/BoardButton.tsx
 var import_react17 = require("react");
-var import_react_dom = require("react-dom");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function launcherClasses(floating) {
   if (!floating) return "fw-launcher";
@@ -1812,7 +1979,7 @@ function FewchursButton({
         children
       }
     ),
-    open ? (0, import_react_dom.createPortal)(
+    open ? (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         FewchursBoardDialog,
         {
@@ -1846,6 +2013,7 @@ function FewchursButton({
   FewchursProvider,
   FollowForm,
   LIMITS,
+  NOT_CONFIGURED_MESSAGE,
   ROADMAP_STATUSES,
   SDK_HEADER,
   SDK_VERSION,