@scalemule/news-publication 0.0.53 → 0.0.55

package/dist/pets-forms.js

@@ -1,9 +1,9 @@
 "use client";
-import { PawMark } from './chunk-KNO2LIDQ.js';
+import { PawMark } from './chunk-ZALGE4PF.js';
 import './chunk-4JRWZXAP.js';
 import './chunk-66GI2IX6.js';
 import { PET_PHOTO_CATEGORIES, PET_CELEBRATIONS, PET_SAFETY } from './chunk-AFJ6S5WJ.js';
-import { useState, useEffect, useRef } from 'react';
+import React, { createContext, useState, useRef, useEffect, useId, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function localDateTime(value) {
@@ -65,6 +65,56 @@ function PetSignIn({ returnTo = "/account" }) {
     /* @__PURE__ */ jsx("p", { className: "paw-safety", children: "Your existing network sign-in works here. Public browsing is always open." })
   ] });
 }
+var FieldErrors = createContext({ errors: {}, clear: () => {
+} });
+function PetField({
+  children,
+  className = ""
+}) {
+  const id = useId();
+  const { errors, clear } = useContext(FieldErrors);
+  const error = errors[id];
+  const nodes = React.Children.toArray(children);
+  const label = nodes.filter((node) => typeof node === "string").join(" ").trim();
+  return /* @__PURE__ */ jsxs("label", { className: `paw-field ${className}`, htmlFor: id, children: [
+    nodes.map((node) => {
+      if (!React.isValidElement(node) || !["input", "select", "textarea", "progress"].includes(
+        String(node.type)
+      ))
+        return node;
+      const original = node.props.onChange;
+      return React.cloneElement(node, {
+        id,
+        "data-field-label": label,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": [node.props["aria-describedby"], error ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0,
+        onChange: (event) => {
+          clear(id);
+          original?.(event);
+        }
+      });
+    }),
+    error && /* @__PURE__ */ jsx("span", { className: "paw-field-error", id: `${id}-error`, children: error })
+  ] });
+}
+function fieldMessage(control, blank = false) {
+  const label = control.dataset.fieldLabel || "this field";
+  if (control.validity.valueMissing || blank) {
+    if (control instanceof HTMLInputElement && control.type === "checkbox")
+      return "Accept the publication permission to continue.";
+    if (control instanceof HTMLInputElement && control.type === "file")
+      return "Add at least one photograph of your pet.";
+    if (label === "Pet name") return "Add your pet\u2019s name.";
+    if (label === "Home community") return "Choose your home community.";
+    if (label === "Your story") return "Tell us a little about your pet.";
+    return `Add ${label.toLowerCase()} to continue.`;
+  }
+  if (control.validity.typeMismatch || control.validity.patternMismatch)
+    return "Enter a complete, valid link, including https://.";
+  if (control.validity.rangeUnderflow || control.validity.rangeOverflow)
+    return "Choose a value within the allowed range.";
+  return `Check ${label.toLowerCase()} and try again.`;
+}
 function PetSubmissionForm({
   communities,
   policy,
@@ -75,6 +125,8 @@ function PetSubmissionForm({
   accountUrl = "/account",
   onSaved
 }) {
+  const [fieldErrors, setFieldErrors] = useState({});
+  const formRef = useRef(null);
   const [deviceReady, setDeviceReady] = useState(false);
   useEffect(() => setDeviceReady(true), []);
   const [kind, setKind] = useState(initial?.kind || "spotlight"), [content, setContent] = useState(initial?.content || empty);
@@ -187,499 +239,608 @@ function PetSubmissionForm({
       /* @__PURE__ */ jsx("p", { children: kind === "profile" && visibility === "private" ? "Your profile is saved privately. Only you can see it." : "Your contribution is saved for editorial review. It will appear publicly only after approval." }),
       /* @__PURE__ */ jsx("a", { href: accountUrl, children: "View your pets and submissions" })
     ] });
-  return /* @__PURE__ */ jsxs(
-    "form",
+  return /* @__PURE__ */ jsx(
+    FieldErrors.Provider,
     {
-      className: "paw-form",
-      onSubmit: (event) => {
-        event.preventDefault();
-        if (step === 0) {
-          setError("");
-          setStep(1);
-        } else void save();
+      value: {
+        errors: fieldErrors,
+        clear: (id) => setFieldErrors((old) => {
+          const next = { ...old };
+          delete next[id];
+          return next;
+        })
       },
-      children: [
-        /* @__PURE__ */ jsxs("ol", { className: "paw-form-steps", "aria-label": "Submission progress", children: [
-          /* @__PURE__ */ jsx("li", { "aria-current": step === 0 ? "step" : void 0, children: "1. Their story" }),
-          /* @__PURE__ */ jsx("li", { "aria-current": step === 1 ? "step" : void 0, children: "2. Preview & permission" })
-        ] }),
-        /* @__PURE__ */ jsx("h1", { children: kind === "celebration" && content.category === "memorial" ? "Remember a beloved companion." : "Someone worth meeting." }),
-        /* @__PURE__ */ jsx("p", { className: "paw-safety", children: "Choose a community, never a home address. Keep phone numbers, email addresses and microchip details out of your story." }),
-        step === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          !initial && /* @__PURE__ */ jsxs("label", { children: [
-            "What would you like to share?",
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                value: kind,
-                onChange: (e) => {
-                  const k = e.target.value;
-                  setKind(k);
-                  setContent((c) => ({
-                    ...c,
-                    source: ["event", "adoption"].includes(k) ? {
-                      organization: "",
-                      official_url: "",
-                      availability_confirmed: false
-                    } : null,
-                    event: k === "event" ? {
-                      starts_at: "",
-                      ends_at: "",
-                      event_type: "adoption",
-                      cost: "unknown",
-                      cost_verified: false
-                    } : null
-                  }));
-                  change(
-                    "category",
-                    k === "celebration" ? "birthday" : k === "photo" ? "cute" : ""
-                  );
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "spotlight", children: "Paw of the Week submission" }),
-                  /* @__PURE__ */ jsx("option", { value: "profile", children: "Pet profile" }),
-                  /* @__PURE__ */ jsx("option", { value: "photo", children: "Photo board" }),
-                  /* @__PURE__ */ jsx("option", { value: "celebration", children: "Pet celebration" }),
-                  /* @__PURE__ */ jsx("option", { value: "lost", children: "Lost pet report" }),
-                  /* @__PURE__ */ jsx("option", { value: "found", children: "Found pet report" }),
-                  /* @__PURE__ */ jsx("option", { value: "event", children: "Organization event" }),
-                  /* @__PURE__ */ jsx("option", { value: "adoption", children: "Shelter or rescue adoption listing" })
-                ]
-              }
-            )
-          ] }),
-          !initial && kind !== "profile" && profiles.length > 0 && /* @__PURE__ */ jsxs("label", { children: [
-            "Start with one of your pets",
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                value: profileId || "",
-                onChange: (e) => {
-                  const p = profiles.find((p2) => p2.id === e.target.value);
-                  setProfileId(p?.id || null);
-                  if (p) {
-                    setContent({
-                      ...p.content,
-                      category: content.category,
-                      source: content.source,
-                      event: content.event
-                    });
-                    setCommunity(
-                      communities.some((c) => c.id === p.area_id) ? p.area_id : defaultCommunity || ""
-                    );
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "Enter pet details" }),
-                  profiles.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.content.name }, p.id))
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            kind === "event" ? "Event title" : "Pet name",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                required: true,
-                maxLength: 100,
-                value: content.name,
-                onChange: (e) => change("name", e.target.value),
-                autoComplete: "off"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            "Species",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                required: true,
-                maxLength: 50,
-                value: content.species,
-                onChange: (e) => change("species", e.target.value)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            "Home community",
-            /* @__PURE__ */ jsxs(
-              "select",
-              {
-                required: true,
-                value: community,
-                onChange: (e) => setCommunity(e.target.value),
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "Choose a community" }),
-                  communities.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, children: c.name }, c.id))
-                ]
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          ref: formRef,
+          noValidate: true,
+          className: "paw-form paw-submission",
+          onSubmit: (event) => {
+            event.preventDefault();
+            const errors = {};
+            let first;
+            for (const element of Array.from(event.currentTarget.elements)) {
+              if (!(element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement))
+                continue;
+              const blank = element.required && element.type !== "checkbox" && element.type !== "file" && !element.value.trim();
+              if (element.willValidate && (!element.validity.valid || blank)) {
+                errors[element.id] = fieldMessage(element, blank);
+                first ||= element;
               }
-            )
-          ] }),
-          kind === "profile" && /* @__PURE__ */ jsxs("fieldset", { children: [
-            /* @__PURE__ */ jsx("legend", { children: "A few favorite things" }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Breed or mix (optional)",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: content.breed,
-                  maxLength: 100,
-                  onChange: (e) => change("breed", e.target.value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Birthday (optional)",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "date",
-                  value: content.birthday || "",
-                  onChange: (e) => change("birthday", e.target.value || null)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Adoption anniversary (optional)",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "date",
-                  value: content.adoption_anniversary || "",
-                  onChange: (e) => change("adoption_anniversary", e.target.value || null)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Personality",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  maxLength: 300,
-                  value: content.personality,
-                  onChange: (e) => change("personality", e.target.value)
-                }
-              )
+            }
+            setFieldErrors(errors);
+            if (first) {
+              first.focus();
+              return;
+            }
+            if (step === 0) {
+              setError("");
+              setStep(1);
+              requestAnimationFrame(() => {
+                formRef.current?.querySelector("h1")?.focus({ preventScroll: true });
+                formRef.current?.scrollIntoView({ block: "start" });
+              });
+            } else void save();
+          },
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "paw-form-intro", children: [
+              /* @__PURE__ */ jsxs("ol", { className: "paw-form-steps", "aria-label": "Submission progress", children: [
+                /* @__PURE__ */ jsx("li", { "aria-current": step === 0 ? "step" : void 0, children: "1. Their story" }),
+                /* @__PURE__ */ jsx("li", { "aria-current": step === 1 ? "step" : void 0, children: "2. Preview & permission" })
+              ] }),
+              /* @__PURE__ */ jsx("h1", { tabIndex: -1, children: kind === "celebration" && content.category === "memorial" ? "Remember a beloved companion." : ["lost", "found"].includes(kind) ? "Help them find home." : step === 1 ? "Looking good." : "Tell their story." }),
+              /* @__PURE__ */ jsx("p", { className: "paw-form-description", children: step === 0 ? content.category === "memorial" ? "Share a memory of a companion you\u2019ll always remember." : ["lost", "found"].includes(kind) ? "A clear description and an approximate location can help neighbors recognize a missing pet." : kind === "event" ? "Help neighbors discover your organization\u2019s pet community event." : "A favorite photograph. A little personality. A story your neighbors will love." : "Take a moment to check the details. You can always go back and make changes." }),
+              /* @__PURE__ */ jsx("p", { className: "paw-safety", children: "Choose a community, never a home address. Keep phone numbers, email addresses and microchip details out of your story." }),
+              /* @__PURE__ */ jsxs("div", { className: "paw-form-assurance", children: [
+                /* @__PURE__ */ jsx(PawMark, { size: 28 }),
+                /* @__PURE__ */ jsxs("p", { children: [
+                  "Yours to share.",
+                  /* @__PURE__ */ jsx("br", {}),
+                  "Reviewed with care."
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Favorite activities, separated by commas",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  value: content.activities.join(", "),
-                  onChange: (e) => change(
-                    "activities",
-                    e.target.value.split(",").map((v) => v.trim()).slice(0, 8)
+            /* @__PURE__ */ jsxs("div", { className: "paw-form-body", children: [
+              step === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                !initial && /* @__PURE__ */ jsxs(PetField, { children: [
+                  "What would you like to share?",
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: kind,
+                      onChange: (e) => {
+                        const k = e.target.value;
+                        setKind(k);
+                        setFieldErrors({});
+                        setContent((c) => ({
+                          ...c,
+                          source: ["event", "adoption"].includes(k) ? {
+                            organization: "",
+                            official_url: "",
+                            availability_confirmed: false
+                          } : null,
+                          event: k === "event" ? {
+                            starts_at: "",
+                            ends_at: "",
+                            event_type: "adoption",
+                            cost: "unknown",
+                            cost_verified: false
+                          } : null
+                        }));
+                        change(
+                          "category",
+                          k === "celebration" ? "birthday" : k === "photo" ? "cute" : ""
+                        );
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "spotlight", children: "Paw of the Week submission" }),
+                        /* @__PURE__ */ jsx("option", { value: "profile", children: "Pet profile" }),
+                        /* @__PURE__ */ jsx("option", { value: "photo", children: "Photo board" }),
+                        /* @__PURE__ */ jsx("option", { value: "celebration", children: "Pet celebration" }),
+                        /* @__PURE__ */ jsx("option", { value: "lost", children: "Lost pet report" }),
+                        /* @__PURE__ */ jsx("option", { value: "found", children: "Found pet report" }),
+                        /* @__PURE__ */ jsx("option", { value: "event", children: "Organization event" }),
+                        /* @__PURE__ */ jsx("option", { value: "adoption", children: "Shelter or rescue adoption listing" })
+                      ]
+                    }
                   )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Profile privacy",
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  value: visibility,
-                  onChange: (e) => setVisibility(e.target.value),
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "private", children: "Private \u2014 only me" }),
-                    /* @__PURE__ */ jsx("option", { value: "public", children: "Public \u2014 after editorial review" })
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          (kind === "photo" || kind === "celebration") && /* @__PURE__ */ jsxs("label", { children: [
-            kind === "photo" ? "Photo category" : "Celebration",
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: content.category,
-                onChange: (e) => change("category", e.target.value),
-                children: (kind === "photo" ? PET_PHOTO_CATEGORIES : PET_CELEBRATIONS).map(([value, label]) => /* @__PURE__ */ jsx("option", { value, children: label }, value))
-              }
-            )
-          ] }),
-          ["lost", "found", "celebration"].includes(kind) && /* @__PURE__ */ jsxs("label", { children: [
-            kind === "lost" ? "Date last seen" : kind === "found" ? "Date found" : "Celebration date (optional)",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                required: kind !== "celebration",
-                type: "date",
-                value: content.date || "",
-                onChange: (e) => change("date", e.target.value || null)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            kind === "profile" ? "A little biography" : "Your story",
-            /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                required: kind !== "profile",
-                maxLength: 4e3,
-                value: content.story,
-                onChange: (e) => change("story", e.target.value)
-              }
-            )
-          ] }),
-          kind === "adoption" && /* @__PURE__ */ jsxs("label", { children: [
-            "Approximate age (optional)",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                value: content.age_description || "",
-                maxLength: 80,
-                onChange: (e) => change("age_description", e.target.value)
-              }
-            )
-          ] }),
-          content.source && /* @__PURE__ */ jsxs("fieldset", { children: [
-            /* @__PURE__ */ jsx("legend", { children: "Official organization and source" }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Organization name",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  required: true,
-                  maxLength: 200,
-                  value: content.source.organization,
-                  onChange: (e) => change("source", {
-                    ...content.source,
-                    organization: e.target.value
-                  })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Official listing or registration link",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  required: true,
-                  type: "url",
-                  pattern: "https://.*",
-                  value: content.source.official_url,
-                  onChange: (e) => change("source", {
-                    ...content.source,
-                    official_url: e.target.value
-                  })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("p", { children: "Editors verify the organization, permission to use photographs, and listing information. Availability and event costs are never assumed." })
-          ] }),
-          content.event && /* @__PURE__ */ jsxs("fieldset", { children: [
-            /* @__PURE__ */ jsx("legend", { children: "Event schedule" }),
-            /* @__PURE__ */ jsxs("p", { children: [
-              "Enter times in your device\u2019s timezone (",
-              deviceReady ? Intl.DateTimeFormat().resolvedOptions().timeZone : "your device timezone",
-              "). They display in Pacific time."
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Starts",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "datetime-local",
-                  required: true,
-                  value: deviceReady ? localDateTime(content.event.starts_at) : "",
-                  onChange: (e) => {
-                    if (e.target.value)
-                      change("event", {
-                        ...content.event,
-                        starts_at: new Date(e.target.value).toISOString()
-                      });
-                  }
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Ends",
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "datetime-local",
-                  required: true,
-                  value: deviceReady ? localDateTime(content.event.ends_at) : "",
-                  onChange: (e) => {
-                    if (e.target.value)
-                      change("event", {
-                        ...content.event,
-                        ends_at: new Date(e.target.value).toISOString()
-                      });
-                  }
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Event type",
-              /* @__PURE__ */ jsx(
-                "select",
-                {
-                  value: content.event.event_type,
-                  onChange: (e) => change("event", {
-                    ...content.event,
-                    event_type: e.target.value
-                  }),
-                  children: [
-                    "adoption",
-                    "veterinary",
-                    "vaccination",
-                    "walk",
-                    "festival",
-                    "fundraiser",
-                    "workshop",
-                    "celebration"
-                  ].map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("label", { children: [
-              "Reported cost",
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  value: content.event.cost,
-                  onChange: (e) => change("event", {
-                    ...content.event,
-                    cost: e.target.value
-                  }),
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "unknown", children: "Check with organization" }),
-                    /* @__PURE__ */ jsx("option", { value: "free", children: "Submitted as free \u2014 requires verification" }),
-                    /* @__PURE__ */ jsx("option", { value: "paid", children: "Paid registration" })
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("label", { children: [
-            "Your public photo credit",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                maxLength: 100,
-                value: content.attribution,
-                onChange: (e) => change("attribution", e.target.value),
-                placeholder: "Name you want published"
-              }
-            )
-          ] }),
-          initial?.media.map((photo) => /* @__PURE__ */ jsxs("figure", { className: "paw-photo", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: `${apiPath}/submissions/${initial.id}/media/${photo.id}`,
-                alt: photo.caption || content.name,
-                width: 640,
-                height: 480
-              }
-            ),
-            /* @__PURE__ */ jsx("figcaption", { children: photo.attribution })
-          ] }, photo.id)),
-          /* @__PURE__ */ jsxs("label", { children: [
-            "Authentic photographs",
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "file",
-                accept: "image/jpeg,image/png,image/webp",
-                multiple: true,
-                onChange: (e) => {
-                  const selected = Array.from(e.target.files || []);
-                  if (selected.length + (initial?.media.length || 0) > 10 || selected.some((f) => f.size > 8 * 1024 * 1024)) {
-                    setError(
-                      "Choose up to ten JPEG, PNG or WebP photographs, each under 8 MB."
-                    );
-                    return;
-                  }
-                  setError("");
-                  setFiles(
-                    selected.map((file) => ({
-                      file,
-                      key: crypto.randomUUID(),
-                      preview: URL.createObjectURL(file)
-                    }))
-                  );
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("small", { children: "JPEG, PNG or WebP, up to 8 MB each. Photos are checked before publication and location metadata is removed." }),
-          ["lost", "found"].includes(kind) && /* @__PURE__ */ jsxs("p", { className: "paw-safety", children: [
-            PET_SAFETY.recovery,
-            " Private recovery contact is not available yet."
-          ] })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            "article",
-            {
-              className: content.category === "memorial" ? "paw-memorial" : "",
-              children: [
-                /* @__PURE__ */ jsx("p", { className: "paw-context", children: communities.find((c) => c.id === community)?.name }),
-                /* @__PURE__ */ jsx("h2", { children: content.name }),
-                !files.length && initial?.media[0] && /* @__PURE__ */ jsxs("figure", { className: "paw-photo", children: [
+                ] }),
+                !initial && kind !== "profile" && profiles.length > 0 && /* @__PURE__ */ jsxs(PetField, { children: [
+                  "Start with one of your pets",
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: profileId || "",
+                      onChange: (e) => {
+                        const p = profiles.find((p2) => p2.id === e.target.value);
+                        setProfileId(p?.id || null);
+                        if (p) {
+                          setContent({
+                            ...p.content,
+                            category: content.category,
+                            source: content.source,
+                            event: content.event
+                          });
+                          setCommunity(
+                            communities.some((c) => c.id === p.area_id) ? p.area_id : defaultCommunity || ""
+                          );
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: "Enter pet details" }),
+                        profiles.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.content.name }, p.id))
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(PetField, { children: [
+                  kind === "event" ? "Event title" : "Pet name",
                   /* @__PURE__ */ jsx(
-                    "img",
+                    "input",
                     {
-                      src: `${apiPath}/submissions/${initial.id}/media/${initial.media[0].id}`,
-                      alt: initial.media[0].caption || content.name,
-                      width: 800,
-                      height: 600
+                      required: true,
+                      maxLength: 100,
+                      value: content.name,
+                      onChange: (e) => change("name", e.target.value),
+                      autoComplete: "off"
                     }
-                  ),
-                  /* @__PURE__ */ jsx("figcaption", { children: initial.media[0].attribution })
+                  )
                 ] }),
-                files[0] && /* @__PURE__ */ jsxs("figure", { className: "paw-photo", children: [
+                /* @__PURE__ */ jsxs(PetField, { children: [
+                  "Species",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      required: true,
+                      maxLength: 50,
+                      value: content.species,
+                      onChange: (e) => change("species", e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(PetField, { children: [
+                  "Home community",
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      required: true,
+                      value: community,
+                      onChange: (e) => setCommunity(e.target.value),
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: "Choose a community" }),
+                        communities.map((c) => /* @__PURE__ */ jsx("option", { value: c.id, children: c.name }, c.id))
+                      ]
+                    }
+                  )
+                ] }),
+                kind === "profile" && /* @__PURE__ */ jsxs("fieldset", { children: [
+                  /* @__PURE__ */ jsx("legend", { children: "A few favorite things" }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Breed or mix (optional)",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        value: content.breed,
+                        maxLength: 100,
+                        onChange: (e) => change("breed", e.target.value)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Birthday (optional)",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "date",
+                        value: content.birthday || "",
+                        onChange: (e) => change("birthday", e.target.value || null)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Adoption anniversary (optional)",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "date",
+                        value: content.adoption_anniversary || "",
+                        onChange: (e) => change("adoption_anniversary", e.target.value || null)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Personality",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        maxLength: 300,
+                        value: content.personality,
+                        onChange: (e) => change("personality", e.target.value)
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Favorite activities, separated by commas",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        value: content.activities.join(", "),
+                        onChange: (e) => change(
+                          "activities",
+                          e.target.value.split(",").map((v) => v.trim()).slice(0, 8)
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Profile privacy",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: visibility,
+                        onChange: (e) => setVisibility(e.target.value),
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "private", children: "Private \u2014 only me" }),
+                          /* @__PURE__ */ jsx("option", { value: "public", children: "Public \u2014 after editorial review" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                (kind === "photo" || kind === "celebration") && /* @__PURE__ */ jsxs(PetField, { children: [
+                  kind === "photo" ? "Photo category" : "Celebration",
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: content.category,
+                      onChange: (e) => change("category", e.target.value),
+                      children: (kind === "photo" ? PET_PHOTO_CATEGORIES : PET_CELEBRATIONS).map(([value, label]) => /* @__PURE__ */ jsx("option", { value, children: label }, value))
+                    }
+                  )
+                ] }),
+                ["lost", "found", "celebration"].includes(kind) && /* @__PURE__ */ jsxs(PetField, { children: [
+                  kind === "lost" ? "Date last seen" : kind === "found" ? "Date found" : "Celebration date (optional)",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      required: kind !== "celebration",
+                      type: "date",
+                      value: content.date || "",
+                      onChange: (e) => change("date", e.target.value || null)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(PetField, { children: [
+                  kind === "profile" ? "A little biography" : "Your story",
+                  /* @__PURE__ */ jsx(
+                    "textarea",
+                    {
+                      required: kind !== "profile",
+                      maxLength: 4e3,
+                      value: content.story,
+                      onChange: (e) => change("story", e.target.value)
+                    }
+                  )
+                ] }),
+                kind === "adoption" && /* @__PURE__ */ jsxs(PetField, { children: [
+                  "Approximate age (optional)",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: content.age_description || "",
+                      maxLength: 80,
+                      onChange: (e) => change("age_description", e.target.value)
+                    }
+                  )
+                ] }),
+                content.source && /* @__PURE__ */ jsxs("fieldset", { children: [
+                  /* @__PURE__ */ jsx("legend", { children: "Official organization and source" }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Organization name",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        required: true,
+                        maxLength: 200,
+                        value: content.source.organization,
+                        onChange: (e) => change("source", {
+                          ...content.source,
+                          organization: e.target.value
+                        })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Official listing or registration link",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        required: true,
+                        type: "url",
+                        pattern: "https://.*",
+                        value: content.source.official_url,
+                        onChange: (e) => change("source", {
+                          ...content.source,
+                          official_url: e.target.value
+                        })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { children: "Editors verify the organization, permission to use photographs, and listing information. Availability and event costs are never assumed." })
+                ] }),
+                content.event && /* @__PURE__ */ jsxs("fieldset", { children: [
+                  /* @__PURE__ */ jsx("legend", { children: "Event schedule" }),
+                  /* @__PURE__ */ jsxs("p", { children: [
+                    "Enter times in your device\u2019s timezone (",
+                    deviceReady ? Intl.DateTimeFormat().resolvedOptions().timeZone : "your device timezone",
+                    "). They display in Pacific time."
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Starts",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "datetime-local",
+                        required: true,
+                        value: deviceReady ? localDateTime(content.event.starts_at) : "",
+                        onChange: (e) => {
+                          if (e.target.value)
+                            change("event", {
+                              ...content.event,
+                              starts_at: new Date(e.target.value).toISOString()
+                            });
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Ends",
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "datetime-local",
+                        required: true,
+                        value: deviceReady ? localDateTime(content.event.ends_at) : "",
+                        onChange: (e) => {
+                          if (e.target.value)
+                            change("event", {
+                              ...content.event,
+                              ends_at: new Date(e.target.value).toISOString()
+                            });
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Event type",
+                    /* @__PURE__ */ jsx(
+                      "select",
+                      {
+                        value: content.event.event_type,
+                        onChange: (e) => change("event", {
+                          ...content.event,
+                          event_type: e.target.value
+                        }),
+                        children: [
+                          "adoption",
+                          "veterinary",
+                          "vaccination",
+                          "walk",
+                          "festival",
+                          "fundraiser",
+                          "workshop",
+                          "celebration"
+                        ].map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { children: [
+                    "Reported cost",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: content.event.cost,
+                        onChange: (e) => change("event", {
+                          ...content.event,
+                          cost: e.target.value
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "unknown", children: "Check with organization" }),
+                          /* @__PURE__ */ jsx("option", { value: "free", children: "Submitted as free \u2014 requires verification" }),
+                          /* @__PURE__ */ jsx("option", { value: "paid", children: "Paid registration" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(PetField, { children: [
+                  "Your public photo credit",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      maxLength: 100,
+                      value: content.attribution,
+                      onChange: (e) => change("attribution", e.target.value),
+                      placeholder: "Name you want published"
+                    }
+                  )
+                ] }),
+                initial?.media.map((photo) => /* @__PURE__ */ jsxs("figure", { className: "paw-photo", children: [
                   /* @__PURE__ */ jsx(
                     "img",
                     {
-                      src: files[0].preview,
-                      alt: `Private preview of ${content.name}`,
-                      width: 800,
-                      height: 600
+                      src: `${apiPath}/submissions/${initial.id}/media/${photo.id}`,
+                      alt: photo.caption || content.name,
+                      width: 640,
+                      height: 480
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("figcaption", { children: photo.attribution })
+                ] }, photo.id)),
+                /* @__PURE__ */ jsxs(PetField, { className: "paw-photo-picker", children: [
+                  "Authentic photographs",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "file",
+                      className: "paw-upload-input",
+                      required: ["spotlight", "photo", "adoption"].includes(kind) && !files.length && !initial?.media.length,
+                      "aria-describedby": "paw-photo-guidance",
+                      accept: "image/jpeg,image/png,image/webp",
+                      multiple: true,
+                      onChange: (e) => {
+                        const selected = Array.from(e.target.files || []);
+                        if (selected.length + (initial?.media.length || 0) > 10 || selected.some(
+                          (f) => f.size > 8 * 1024 * 1024 || !["image/jpeg", "image/png", "image/webp"].includes(
+                            f.type
+                          )
+                        )) {
+                          setError(
+                            "Choose up to ten JPEG, PNG or WebP photographs, each under 8 MB."
+                          );
+                          return;
+                        }
+                        setError("");
+                        setFiles(
+                          selected.map((file) => ({
+                            file,
+                            key: crypto.randomUUID(),
+                            preview: URL.createObjectURL(file)
+                          }))
+                        );
+                      }
                     }
                   ),
-                  /* @__PURE__ */ jsx("figcaption", { children: content.attribution })
+                  /* @__PURE__ */ jsxs("span", { className: "paw-upload-prompt", children: [
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        viewBox: "0 0 32 32",
+                        width: "32",
+                        height: "32",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M11 8l2-3h6l2 3h5a3 3 0 013 3v13a3 3 0 01-3 3H6a3 3 0 01-3-3V11a3 3 0 013-3z" }),
+                          /* @__PURE__ */ jsx("circle", { cx: "16", cy: "17", r: "6" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("strong", { children: files.length ? `${files.length} ${files.length === 1 ? "photo" : "photos"} selected` : content.category === "memorial" ? "A photograph to remember them by." : ["lost", "found"].includes(kind) ? "A clear photograph helps neighbors recognize them." : "Their best angle. Their biggest personality." }),
+                    /* @__PURE__ */ jsx("span", { children: files.length ? "Choose different photos" : "Choose photos from your device" })
+                  ] })
                 ] }),
-                /* @__PURE__ */ jsx("p", { style: { whiteSpace: "pre-wrap" }, children: content.story })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("p", { children: kind === "profile" && visibility === "private" ? "This profile will remain private." : "This is a private preview. Editors will review your contribution before anyone else can see it." }),
-          needsPermission && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("details", { children: [
-              /* @__PURE__ */ jsx("summary", { children: "Publication permission and guidelines" }),
-              /* @__PURE__ */ jsx("p", { children: policy.text }),
-              /* @__PURE__ */ jsx("p", { children: policy.guidelines })
-            ] }),
-            /* @__PURE__ */ jsxs("label", { className: "paw-consent", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  required: true,
-                  checked: consent,
-                  onChange: (e) => setConsent(e.target.checked)
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: "I have read and accept the publication permission. These are authentic photographs I have permission to share." })
+                /* @__PURE__ */ jsx("small", { id: "paw-photo-guidance", children: "JPEG, PNG or WebP, up to 8 MB each. Photos are checked before publication and location metadata is removed." }),
+                files.length > 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "paw-upload-previews",
+                    "aria-label": "Selected photographs",
+                    children: files.map((file) => /* @__PURE__ */ jsxs("figure", { children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: file.preview,
+                          alt: `Selected photograph: ${file.file.name}`,
+                          width: 160,
+                          height: 160
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("figcaption", { children: file.file.name })
+                    ] }, file.key))
+                  }
+                ),
+                ["lost", "found"].includes(kind) && /* @__PURE__ */ jsxs("p", { className: "paw-safety", children: [
+                  PET_SAFETY.recovery,
+                  " Private recovery contact is not available yet."
+                ] })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "article",
+                  {
+                    className: content.category === "memorial" ? "paw-memorial" : "",
+                    children: [
+                      /* @__PURE__ */ jsx("p", { className: "paw-context", children: communities.find((c) => c.id === community)?.name }),
+                      /* @__PURE__ */ jsx("h2", { children: content.name }),
+                      !files.length && initial?.media[0] && /* @__PURE__ */ jsxs("figure", { className: "paw-photo", children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: `${apiPath}/submissions/${initial.id}/media/${initial.media[0].id}`,
+                            alt: initial.media[0].caption || content.name,
+                            width: 800,
+                            height: 600
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("figcaption", { children: initial.media[0].attribution })
+                      ] }),
+                      files[0] && /* @__PURE__ */ jsxs("figure", { className: "paw-photo", children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: files[0].preview,
+                            alt: `Private preview of ${content.name}`,
+                            width: 800,
+                            height: 600
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("figcaption", { children: content.attribution })
+                      ] }),
+                      /* @__PURE__ */ jsx("p", { style: { whiteSpace: "pre-wrap" }, children: content.story })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { children: kind === "profile" && visibility === "private" ? "This profile will remain private." : "This is a private preview. Editors will review your contribution before anyone else can see it." }),
+                needsPermission && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("details", { children: [
+                    /* @__PURE__ */ jsx("summary", { children: "Publication permission and guidelines" }),
+                    /* @__PURE__ */ jsx("p", { children: policy.text }),
+                    /* @__PURE__ */ jsx("p", { children: policy.guidelines })
+                  ] }),
+                  /* @__PURE__ */ jsxs(PetField, { className: "paw-consent", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        required: true,
+                        checked: consent,
+                        onChange: (e) => setConsent(e.target.checked)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: "I have read and accept the publication permission. These are authentic photographs I have permission to share." })
+                  ] })
+                ] })
+              ] }),
+              Object.keys(fieldErrors).length > 0 && /* @__PURE__ */ jsx("p", { role: "alert", className: "paw-validation-summary", children: "A few details need your attention. Check the fields above." }),
+              error && /* @__PURE__ */ jsx("p", { role: "alert", className: "paw-error", children: error }),
+              busy && /* @__PURE__ */ jsxs(PetField, { children: [
+                "Saving your contribution",
+                /* @__PURE__ */ jsx("progress", { value: progress, max: files.length + 2 })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "paw-form-actions", children: [
+                step === 1 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: busy,
+                    onClick: () => {
+                      setFieldErrors({});
+                      setStep(0);
+                      formRef.current?.scrollIntoView({ block: "start" });
+                    },
+                    children: "Keep editing"
+                  }
+                ),
+                /* @__PURE__ */ jsx("button", { disabled: busy, type: "submit", children: busy ? "Saving\u2026" : step === 0 ? "Preview your story" : kind === "profile" && visibility === "private" ? "Save private profile" : "Submit for editorial review" })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "paw-form-endnote", children: step === 0 ? "Next: a private preview. Nothing is published yet." : kind === "profile" && visibility === "private" ? "Only you can see this private profile." : "Your contribution stays private until editorial approval." })
             ] })
-          ] })
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "paw-error", children: error }),
-        busy && /* @__PURE__ */ jsxs("label", { children: [
-          "Saving your contribution",
-          /* @__PURE__ */ jsx("progress", { value: progress, max: files.length + 2 })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "paw-form-actions", children: [
-          step === 1 && /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: () => setStep(0), children: "Keep editing" }),
-          /* @__PURE__ */ jsx("button", { disabled: busy, type: "submit", children: busy ? "Saving\u2026" : step === 0 ? "Preview your story" : kind === "profile" && visibility === "private" ? "Save private profile" : "Submit for editorial review" })
-        ] })
-      ]
+          ]
+        }
+      )
     }
   );
 }