@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/src/backoffice/FormEditorView.tsx

@@ -15,6 +15,8 @@ import { InspectorSection, LocalizedField, TextField } from "./inspectors/fields
 import { RuleSimulator } from "./forms/RuleSimulator";
 import { ConditionBuilder } from "./forms/ConditionBuilder";
 import { SmartTagTextField, SmartTagLocalizedField } from "./forms/SmartTags";
+import { EDIT_LOCK_TYPES } from "../cms/edit-lock";
+import { EditLockBanner, EditLockFence, useEditLock } from "./EditLock";
 
 /** One managed form row as the host's list server function returns it. */
 export type FormEditorRow = {
@@ -40,6 +42,8 @@ export type FormEditorDeps = {
   saveForm: (input: {
     data: {
       id: string;
+      /** Editing session holding the lock; the server checks it before writing. */
+      editSessionId?: string;
       key: string;
       name: string;
       form_type: string;
@@ -86,6 +90,7 @@ export type FormEditorDeps = {
   VersionHistoryComponent: (props: {
     formKey: string;
     defaults?: FormDefaults | null;
+    editSessionId?: string;
   }) => React.ReactNode;
   ActivityLogComponent: (props: { formKey?: string }) => React.ReactNode;
   /** Backoffice route paths, so hosts keep control over their URL scheme. */
@@ -152,6 +157,11 @@ export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
   const [busy, setBusy] = useState(false);
   const [tab, setTab] = useState<TabId>("fields");
 
+  const lock = useEditLock({
+    resourceType: EDIT_LOCK_TYPES.form,
+    resourceId: deps.form?.id,
+  });
+
   /** Removed built-in fields stay in state as tombstones but never render. */
   const activeFields = useMemo(() => fields.filter((f) => !f.removed), [fields]);
 
@@ -189,6 +199,7 @@ export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
       await saveForm({
         data: {
           id: form.id,
+          editSessionId: lock.sessionId,
           key: form.key,
           name,
           form_type: form.form_type,
@@ -263,7 +274,7 @@ export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
           </Link>
           <button
             onClick={onSave}
-            disabled={busy}
+            disabled={busy || lock.blocked}
             className="inline-flex items-center gap-2 bg-ink px-5 py-2.5 text-xs uppercase tracking-[0.2em] text-paper hover:bg-sea hover:text-ink disabled:opacity-50"
           >
             <Save className="size-4" />
@@ -286,554 +297,562 @@ export function FormEditorView({ deps }: { deps: FormEditorDeps }) {
         ))}
       </div>
 
-      {tab === "fields" ? (
-        <div className="mt-6 grid gap-6 lg:grid-cols-[320px_1fr]">
-          <div className="border border-ink/10 bg-white p-6 space-y-4 h-fit">
-            <InspectorSection title="General">
-              <TextField label="Name" value={name} onChange={setName} />
-              <label className="flex items-center gap-3 text-sm text-ink/70">
-                <input
-                  type="checkbox"
-                  checked={active}
-                  onChange={(e) => setActive(e.target.checked)}
-                  className="size-4 accent-sea"
-                />
-                Active (visible on the site)
-              </label>
-              <p className="text-xs text-ink/45">
-                Inactive forms stop accepting submissions but keep everything already received.
-              </p>
-            </InspectorSection>
+      <EditLockBanner lock={lock} className="mt-6" />
+
+      <EditLockFence lock={lock} className="block">
+        {tab === "fields" ? (
+          <div className="mt-6 grid gap-6 lg:grid-cols-[320px_1fr]">
+            <div className="border border-ink/10 bg-white p-6 space-y-4 h-fit">
+              <InspectorSection title="General">
+                <TextField label="Name" value={name} onChange={setName} />
+                <label className="flex items-center gap-3 text-sm text-ink/70">
+                  <input
+                    type="checkbox"
+                    checked={active}
+                    onChange={(e) => setActive(e.target.checked)}
+                    className="size-4 accent-sea"
+                  />
+                  Active (visible on the site)
+                </label>
+                <p className="text-xs text-ink/45">
+                  Inactive forms stop accepting submissions but keep everything already received.
+                </p>
+              </InspectorSection>
+            </div>
+            <div className="space-y-6">
+              <div className="border border-ink/10 bg-white p-6">
+                <FieldEditor fields={fields} usedKeys={form.usedFieldKeys} onChange={setFields} />
+              </div>
+              <div className="border border-ink/10 bg-white p-6">
+                <RuleSimulator fields={activeFields} />
+              </div>
+            </div>
           </div>
-          <div className="space-y-6">
+        ) : null}
+
+        {tab === "preview" ? (
+          <div className="mt-6 grid gap-6 lg:grid-cols-2">
             <div className="border border-ink/10 bg-white p-6">
-              <FieldEditor fields={fields} usedKeys={form.usedFieldKeys} onChange={setFields} />
+              <FormPreview
+                formKey={form.key}
+                name={name}
+                formType={form.form_type}
+                fields={activeFields}
+                pub={pub}
+                priv={priv}
+                defaults={d}
+              />
             </div>
             <div className="border border-ink/10 bg-white p-6">
-              <RuleSimulator fields={activeFields} />
+              <TestDeliveryPanel formKey={form.key} fields={activeFields} priv={priv} />
             </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
 
-      {tab === "preview" ? (
-        <div className="mt-6 grid gap-6 lg:grid-cols-2">
-          <div className="border border-ink/10 bg-white p-6">
-            <FormPreview
-              formKey={form.key}
-              name={name}
-              formType={form.form_type}
-              fields={activeFields}
-              pub={pub}
-              priv={priv}
-              defaults={d}
-            />
-          </div>
-          <div className="border border-ink/10 bg-white p-6">
-            <TestDeliveryPanel formKey={form.key} fields={activeFields} priv={priv} />
-          </div>
-        </div>
-      ) : null}
-
-      {tab === "presentation" ? (
-        <div className="mt-6 grid gap-6 lg:grid-cols-2">
-          <div className="border border-ink/10 bg-white p-6 space-y-4">
-            <InspectorSection title="Copy">
-              <LocalizedField
-                label="Title"
-                value={pub.title}
-                onChange={(v) => setPub({ ...pub, title: v })}
-              />
-              <LocalizedField
-                label="Intro"
-                value={pub.intro}
-                multiline
-                onChange={(v) => setPub({ ...pub, intro: v })}
-              />
-              <LocalizedField
-                label="Submit button"
-                value={pub.submitLabel}
-                onChange={(v) => setPub({ ...pub, submitLabel: v })}
-              />
-            </InspectorSection>
-
-            <InspectorSection title="Consent">
-              <label className="flex items-center gap-3 text-sm text-ink/70">
-                <input
-                  type="checkbox"
-                  checked={pub.requireConsent !== false}
-                  onChange={(e) => setPub({ ...pub, requireConsent: e.target.checked })}
-                  className="size-4 accent-sea"
+        {tab === "presentation" ? (
+          <div className="mt-6 grid gap-6 lg:grid-cols-2">
+            <div className="border border-ink/10 bg-white p-6 space-y-4">
+              <InspectorSection title="Copy">
+                <LocalizedField
+                  label="Title"
+                  value={pub.title}
+                  onChange={(v) => setPub({ ...pub, title: v })}
                 />
-                Require GDPR consent checkbox
-              </label>
-              <LocalizedField
-                label="Consent text"
-                value={pub.consentText}
-                multiline
-                onChange={(v) => setPub({ ...pub, consentText: v })}
-              />
-              <p className="text-xs text-ink/50">
-                Link the policy with <code>[integritetspolicyn](privacy)</code> (uses the shared
-                privacy policy URL) or a path like <code>[privacy policy](/integritetspolicy)</code>
-                .
-              </p>
-              {isInherited(pub.consentText) ? <Inherited from={d?.consent_text?.sv ?? ""} /> : null}
-            </InspectorSection>
-          </div>
+                <LocalizedField
+                  label="Intro"
+                  value={pub.intro}
+                  multiline
+                  onChange={(v) => setPub({ ...pub, intro: v })}
+                />
+                <LocalizedField
+                  label="Submit button"
+                  value={pub.submitLabel}
+                  onChange={(v) => setPub({ ...pub, submitLabel: v })}
+                />
+              </InspectorSection>
 
-          <div className="border border-ink/10 bg-white p-6 space-y-4">
-            <InspectorSection title="After submit">
-              <label className="block">
-                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Mode</span>
-                <select
-                  value={pub.thankyouMode ?? ""}
-                  onChange={(e) =>
-                    setPub({
-                      ...pub,
-                      thankyouMode: (e.target.value || undefined) as
-                        | "inline"
-                        | "redirect"
-                        | undefined,
-                    })
-                  }
-                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
-                >
-                  <option value="">Use shared default ({d?.thankyou_mode ?? "inline"})</option>
-                  <option value="inline">Show thank-you message</option>
-                  <option value="redirect">Redirect to a page</option>
-                </select>
-              </label>
-              <LocalizedField
-                label="Thank-you message"
-                value={pub.thankyouMessage}
-                multiline
-                onChange={(v) => setPub({ ...pub, thankyouMessage: v })}
-              />
-              {isInherited(pub.thankyouMessage) ? (
-                <Inherited from={d?.thankyou_message?.sv ?? ""} />
-              ) : null}
-              <TextField
-                label="Redirect URL"
-                value={pub.thankyouRedirect ?? ""}
-                onChange={(v) => setPub({ ...pub, thankyouRedirect: v })}
-              />
-              {isInherited(pub.thankyouRedirect) ? (
-                <Inherited from={d?.thankyou_redirect ?? ""} />
-              ) : null}
-              {(pub.thankyouMode ?? d?.thankyou_mode) === "redirect" &&
-              !(pub.thankyouRedirect ?? d?.thankyou_redirect ?? "").trim() ? (
-                <p className="text-xs text-red-600">
-                  Redirect mode needs a URL — without one the thank-you message is shown instead.
+              <InspectorSection title="Consent">
+                <label className="flex items-center gap-3 text-sm text-ink/70">
+                  <input
+                    type="checkbox"
+                    checked={pub.requireConsent !== false}
+                    onChange={(e) => setPub({ ...pub, requireConsent: e.target.checked })}
+                    className="size-4 accent-sea"
+                  />
+                  Require GDPR consent checkbox
+                </label>
+                <LocalizedField
+                  label="Consent text"
+                  value={pub.consentText}
+                  multiline
+                  onChange={(v) => setPub({ ...pub, consentText: v })}
+                />
+                <p className="text-xs text-ink/50">
+                  Link the policy with <code>[integritetspolicyn](privacy)</code> (uses the shared
+                  privacy policy URL) or a path like <code>[privacy policy](/integritetspolicy)</code>
+                  .
                 </p>
-              ) : null}
-            </InspectorSection>
+                {isInherited(pub.consentText) ? <Inherited from={d?.consent_text?.sv ?? ""} /> : null}
+              </InspectorSection>
+            </div>
 
-            <InspectorSection title="Spam protection">
-              <TextField
-                label="Minimum seconds before submit (empty = shared default)"
-                value={priv.spamMinSeconds ? String(priv.spamMinSeconds) : ""}
-                onChange={(v) =>
-                  setPriv({ ...priv, spamMinSeconds: v ? Number(v) || undefined : undefined })
-                }
-              />
-              {priv.spamMinSeconds == null ? (
-                <Inherited from={String(d?.spam_min_seconds ?? 3)} />
-              ) : null}
-              <TextField
-                label="Max submissions per IP per hour (empty = shared default)"
-                value={priv.spamMaxPerHour ? String(priv.spamMaxPerHour) : ""}
-                onChange={(v) =>
-                  setPriv({ ...priv, spamMaxPerHour: v ? Number(v) || undefined : undefined })
-                }
-              />
-              {priv.spamMaxPerHour == null ? (
-                <Inherited from={String(d?.spam_max_per_hour ?? 10)} />
-              ) : null}
-            </InspectorSection>
+            <div className="border border-ink/10 bg-white p-6 space-y-4">
+              <InspectorSection title="After submit">
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Mode</span>
+                  <select
+                    value={pub.thankyouMode ?? ""}
+                    onChange={(e) =>
+                      setPub({
+                        ...pub,
+                        thankyouMode: (e.target.value || undefined) as
+                          | "inline"
+                          | "redirect"
+                          | undefined,
+                      })
+                    }
+                    className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                  >
+                    <option value="">Use shared default ({d?.thankyou_mode ?? "inline"})</option>
+                    <option value="inline">Show thank-you message</option>
+                    <option value="redirect">Redirect to a page</option>
+                  </select>
+                </label>
+                <LocalizedField
+                  label="Thank-you message"
+                  value={pub.thankyouMessage}
+                  multiline
+                  onChange={(v) => setPub({ ...pub, thankyouMessage: v })}
+                />
+                {isInherited(pub.thankyouMessage) ? (
+                  <Inherited from={d?.thankyou_message?.sv ?? ""} />
+                ) : null}
+                <TextField
+                  label="Redirect URL"
+                  value={pub.thankyouRedirect ?? ""}
+                  onChange={(v) => setPub({ ...pub, thankyouRedirect: v })}
+                />
+                {isInherited(pub.thankyouRedirect) ? (
+                  <Inherited from={d?.thankyou_redirect ?? ""} />
+                ) : null}
+                {(pub.thankyouMode ?? d?.thankyou_mode) === "redirect" &&
+                !(pub.thankyouRedirect ?? d?.thankyou_redirect ?? "").trim() ? (
+                  <p className="text-xs text-red-600">
+                    Redirect mode needs a URL — without one the thank-you message is shown instead.
+                  </p>
+                ) : null}
+              </InspectorSection>
 
-            <InspectorSection title="Incomplete submissions">
-              <label className="block">
-                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
-                  Save what visitors type even if they never submit
-                </span>
-                <select
-                  value={priv.savePartials === undefined ? "" : priv.savePartials ? "on" : "off"}
-                  onChange={(e) =>
-                    setPriv({
-                      ...priv,
-                      savePartials: e.target.value === "" ? undefined : e.target.value === "on",
-                    })
+              <InspectorSection title="Spam protection">
+                <TextField
+                  label="Minimum seconds before submit (empty = shared default)"
+                  value={priv.spamMinSeconds ? String(priv.spamMinSeconds) : ""}
+                  onChange={(v) =>
+                    setPriv({ ...priv, spamMinSeconds: v ? Number(v) || undefined : undefined })
                   }
-                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
-                >
-                  <option value="">
-                    Use shared default ({d?.save_partials === false ? "off" : "on"})
-                  </option>
-                  <option value="on">On</option>
-                  <option value="off">Off</option>
-                </select>
-              </label>
-              <p className="text-xs text-ink/45">
-                Drafts are stored separately from real submissions and are marked as completed when
-                the visitor finally sends the form. See them under Submissions → Incomplete.
-              </p>
-            </InspectorSection>
+                />
+                {priv.spamMinSeconds == null ? (
+                  <Inherited from={String(d?.spam_min_seconds ?? 3)} />
+                ) : null}
+                <TextField
+                  label="Max submissions per IP per hour (empty = shared default)"
+                  value={priv.spamMaxPerHour ? String(priv.spamMaxPerHour) : ""}
+                  onChange={(v) =>
+                    setPriv({ ...priv, spamMaxPerHour: v ? Number(v) || undefined : undefined })
+                  }
+                />
+                {priv.spamMaxPerHour == null ? (
+                  <Inherited from={String(d?.spam_max_per_hour ?? 10)} />
+                ) : null}
+              </InspectorSection>
+
+              <InspectorSection title="Incomplete submissions">
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                    Save what visitors type even if they never submit
+                  </span>
+                  <select
+                    value={priv.savePartials === undefined ? "" : priv.savePartials ? "on" : "off"}
+                    onChange={(e) =>
+                      setPriv({
+                        ...priv,
+                        savePartials: e.target.value === "" ? undefined : e.target.value === "on",
+                      })
+                    }
+                    className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                  >
+                    <option value="">
+                      Use shared default ({d?.save_partials === false ? "off" : "on"})
+                    </option>
+                    <option value="on">On</option>
+                    <option value="off">Off</option>
+                  </select>
+                </label>
+                <p className="text-xs text-ink/45">
+                  Drafts are stored separately from real submissions and are marked as completed when
+                  the visitor finally sends the form. See them under Submissions → Incomplete.
+                </p>
+              </InspectorSection>
+            </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
 
-      {tab === "delivery" ? (
-        <div className="mt-6 grid gap-6 lg:grid-cols-2">
-          <div className="border border-ink/10 bg-white p-6 space-y-4">
-            <InspectorSection title="Admin notification">
-              <label className="block">
-                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
-                  Send notification
-                </span>
-                <select
-                  value={priv.notifyEnabled === undefined ? "" : priv.notifyEnabled ? "on" : "off"}
-                  onChange={(e) =>
-                    setPriv({
-                      ...priv,
-                      notifyEnabled: e.target.value === "" ? undefined : e.target.value === "on",
-                    })
-                  }
-                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
-                >
-                  <option value="">
-                    Use shared default ({d?.notify_enabled === false ? "off" : "on"})
-                  </option>
-                  <option value="on">On</option>
-                  <option value="off">Off</option>
-                </select>
-              </label>
-              <TextField
-                label="Notify these addresses (comma separated)"
-                value={priv.notifyTo ?? ""}
-                onChange={(v) => setPriv({ ...priv, notifyTo: v })}
-              />
-              {isInherited(priv.notifyTo) ? <Inherited from={d?.notify_to ?? ""} /> : null}
-              <div className="grid gap-3 sm:grid-cols-2">
+        {tab === "delivery" ? (
+          <div className="mt-6 grid gap-6 lg:grid-cols-2">
+            <div className="border border-ink/10 bg-white p-6 space-y-4">
+              <InspectorSection title="Admin notification">
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                    Send notification
+                  </span>
+                  <select
+                    value={priv.notifyEnabled === undefined ? "" : priv.notifyEnabled ? "on" : "off"}
+                    onChange={(e) =>
+                      setPriv({
+                        ...priv,
+                        notifyEnabled: e.target.value === "" ? undefined : e.target.value === "on",
+                      })
+                    }
+                    className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                  >
+                    <option value="">
+                      Use shared default ({d?.notify_enabled === false ? "off" : "on"})
+                    </option>
+                    <option value="on">On</option>
+                    <option value="off">Off</option>
+                  </select>
+                </label>
+                <TextField
+                  label="Notify these addresses (comma separated)"
+                  value={priv.notifyTo ?? ""}
+                  onChange={(v) => setPriv({ ...priv, notifyTo: v })}
+                />
+                {isInherited(priv.notifyTo) ? <Inherited from={d?.notify_to ?? ""} /> : null}
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <SmartTagTextField
+                    label="Sender name"
+                    value={priv.notifyFromName ?? ""}
+                    fields={activeFields}
+                    onChange={(v) => setPriv({ ...priv, notifyFromName: v })}
+                  />
+                  <TextField
+                    label="Sender address"
+                    value={priv.notifyFromEmail ?? ""}
+                    onChange={(v) => setPriv({ ...priv, notifyFromEmail: v })}
+                  />
+                </div>
                 <SmartTagTextField
-                  label="Sender name"
-                  value={priv.notifyFromName ?? ""}
+                  label="Reply-to"
+                  value={priv.notifyReplyTo ?? ""}
                   fields={activeFields}
-                  onChange={(v) => setPriv({ ...priv, notifyFromName: v })}
+                  placeholder="{{email}}"
+                  onChange={(v) => setPriv({ ...priv, notifyReplyTo: v })}
                 />
-                <TextField
-                  label="Sender address"
-                  value={priv.notifyFromEmail ?? ""}
-                  onChange={(v) => setPriv({ ...priv, notifyFromEmail: v })}
+                <p className="text-xs text-ink/45">
+                  Use {"{{"}email{"}}"} to reply straight to the person who submitted the form.
+                </p>
+                {isInherited(priv.notifyReplyTo) ? (
+                  <Inherited from={d?.notify_reply_to ?? ""} />
+                ) : null}
+                <SmartTagLocalizedField
+                  label="Subject"
+                  value={priv.notifySubject}
+                  fields={activeFields}
+                  onChange={(v) => setPriv({ ...priv, notifySubject: v })}
                 />
-              </div>
-              <SmartTagTextField
-                label="Reply-to"
-                value={priv.notifyReplyTo ?? ""}
-                fields={activeFields}
-                placeholder="{{email}}"
-                onChange={(v) => setPriv({ ...priv, notifyReplyTo: v })}
-              />
-              <p className="text-xs text-ink/45">
-                Use {"{{"}email{"}}"} to reply straight to the person who submitted the form.
-              </p>
-              {isInherited(priv.notifyReplyTo) ? (
-                <Inherited from={d?.notify_reply_to ?? ""} />
-              ) : null}
-              <SmartTagLocalizedField
-                label="Subject"
-                value={priv.notifySubject}
-                fields={activeFields}
-                onChange={(v) => setPriv({ ...priv, notifySubject: v })}
-              />
-              {isInherited(priv.notifySubject) ? (
-                <Inherited from={d?.notify_subject?.sv ?? ""} />
-              ) : null}
-              <SmartTagLocalizedField
-                label="Body (empty = standard answer table)"
-                value={priv.notifyBody}
-                fields={activeFields}
-                multiline
-                onChange={(v) => setPriv({ ...priv, notifyBody: v })}
-              />
-              {isInherited(priv.notifyBody) ? (
-                <Inherited from={(d?.notify_body?.sv ?? "").slice(0, 60)} />
-              ) : null}
-            </InspectorSection>
+                {isInherited(priv.notifySubject) ? (
+                  <Inherited from={d?.notify_subject?.sv ?? ""} />
+                ) : null}
+                <SmartTagLocalizedField
+                  label="Body (empty = standard answer table)"
+                  value={priv.notifyBody}
+                  fields={activeFields}
+                  multiline
+                  onChange={(v) => setPriv({ ...priv, notifyBody: v })}
+                />
+                {isInherited(priv.notifyBody) ? (
+                  <Inherited from={(d?.notify_body?.sv ?? "").slice(0, 60)} />
+                ) : null}
+              </InspectorSection>
 
-            <InspectorSection title="Conditional routing">
-              <p className="text-xs text-ink/50">
-                Send this form to different people depending on the answers. Rules add recipients; a
-                rule marked “only these” replaces the addresses above.
-              </p>
-              {(priv.notificationRules ?? []).map((rule, i) => (
-                <div key={i} className="space-y-2 border border-ink/10 p-3">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <input
-                      value={rule.to}
-                      placeholder="who@example.com"
-                      onChange={(v) => patchRule(i, { to: v.target.value })}
-                      className="min-w-[180px] flex-1 border border-ink/15 px-2 py-1 text-xs"
-                    />
-                    <label className="flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.16em] text-ink/55">
-                      <input
-                        type="checkbox"
-                        checked={rule.exclusive ?? false}
-                        onChange={(e) => patchRule(i, { exclusive: e.target.checked })}
-                        className="size-3.5 accent-sea"
-                      />
-                      Only these
-                    </label>
-                    <label className="flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.16em] text-ink/55">
+              <InspectorSection title="Conditional routing">
+                <p className="text-xs text-ink/50">
+                  Send this form to different people depending on the answers. Rules add recipients; a
+                  rule marked “only these” replaces the addresses above.
+                </p>
+                {(priv.notificationRules ?? []).map((rule, i) => (
+                  <div key={i} className="space-y-2 border border-ink/10 p-3">
+                    <div className="flex flex-wrap items-center gap-2">
                       <input
-                        type="checkbox"
-                        checked={rule.enabled !== false}
-                        onChange={(e) => patchRule(i, { enabled: e.target.checked })}
-                        className="size-3.5 accent-sea"
+                        value={rule.to}
+                        placeholder="who@example.com"
+                        onChange={(v) => patchRule(i, { to: v.target.value })}
+                        className="min-w-[180px] flex-1 border border-ink/15 px-2 py-1 text-xs"
                       />
-                      Active
-                    </label>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setPriv({
-                          ...priv,
-                          notificationRules: (priv.notificationRules ?? []).filter(
-                            (_, idx) => idx !== i,
-                          ),
-                        })
-                      }
-                      className="text-[0.65rem] uppercase tracking-[0.16em] text-ink/45 hover:text-red-500"
-                    >
-                      Remove
-                    </button>
+                      <label className="flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.16em] text-ink/55">
+                        <input
+                          type="checkbox"
+                          checked={rule.exclusive ?? false}
+                          onChange={(e) => patchRule(i, { exclusive: e.target.checked })}
+                          className="size-3.5 accent-sea"
+                        />
+                        Only these
+                      </label>
+                      <label className="flex items-center gap-1.5 text-[0.65rem] uppercase tracking-[0.16em] text-ink/55">
+                        <input
+                          type="checkbox"
+                          checked={rule.enabled !== false}
+                          onChange={(e) => patchRule(i, { enabled: e.target.checked })}
+                          className="size-3.5 accent-sea"
+                        />
+                        Active
+                      </label>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          setPriv({
+                            ...priv,
+                            notificationRules: (priv.notificationRules ?? []).filter(
+                              (_, idx) => idx !== i,
+                            ),
+                          })
+                        }
+                        className="text-[0.65rem] uppercase tracking-[0.16em] text-ink/45 hover:text-red-500"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                    <ConditionBuilder
+                      title="When"
+                      description="Rule applies while these answers match."
+                      rule={rule.when}
+                      fields={activeFields}
+                      onChange={(r) => patchRule(i, { when: r })}
+                    />
                   </div>
-                  <ConditionBuilder
-                    title="When"
-                    description="Rule applies while these answers match."
-                    rule={rule.when}
-                    fields={activeFields}
-                    onChange={(r) => patchRule(i, { when: r })}
-                  />
-                </div>
-              ))}
-              <button
-                type="button"
-                onClick={() =>
-                  setPriv({
-                    ...priv,
-                    notificationRules: [
-                      ...(priv.notificationRules ?? []),
-                      {
-                        id:
-                          typeof crypto !== "undefined" && crypto.randomUUID
-                            ? crypto.randomUUID()
-                            : String(Date.now()),
-                        to: "",
-                        enabled: true,
-                        exclusive: false,
-                      },
-                    ],
-                  })
-                }
-                className="border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
-              >
-                Add routing rule
-              </button>
-            </InspectorSection>
-
-            <InspectorSection title="Autoreply to the sender">
-              <label className="block">
-                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
-                  Autoreply
-                </span>
-                <select
-                  value={
-                    priv.autoreplyEnabled === undefined ? "" : priv.autoreplyEnabled ? "on" : "off"
-                  }
-                  onChange={(e) =>
+                ))}
+                <button
+                  type="button"
+                  onClick={() =>
                     setPriv({
                       ...priv,
-                      autoreplyEnabled: e.target.value === "" ? undefined : e.target.value === "on",
+                      notificationRules: [
+                        ...(priv.notificationRules ?? []),
+                        {
+                          id:
+                            typeof crypto !== "undefined" && crypto.randomUUID
+                              ? crypto.randomUUID()
+                              : String(Date.now()),
+                          to: "",
+                          enabled: true,
+                          exclusive: false,
+                        },
+                      ],
                     })
                   }
-                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                  className="border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
                 >
-                  <option value="">
-                    Use shared default ({d?.autoreply_enabled ? "on" : "off"})
-                  </option>
-                  <option value="on">On</option>
-                  <option value="off">Off</option>
-                </select>
-              </label>
-              <SmartTagLocalizedField
-                label="Subject"
-                value={priv.autoreplySubject}
-                fields={activeFields}
-                onChange={(v) => setPriv({ ...priv, autoreplySubject: v })}
-              />
-              {isInherited(priv.autoreplySubject) ? (
-                <Inherited from={d?.autoreply_subject?.sv ?? ""} />
-              ) : null}
-              <SmartTagLocalizedField
-                label="Body"
-                value={priv.autoreplyBody}
-                fields={activeFields}
-                multiline
-                onChange={(v) => setPriv({ ...priv, autoreplyBody: v })}
-              />
+                  Add routing rule
+                </button>
+              </InspectorSection>
 
-              {isInherited(priv.autoreplyBody) ? (
-                <Inherited from={(d?.autoreply_body?.sv ?? "").slice(0, 60)} />
-              ) : null}
-              <p className="text-xs text-ink/45">
-                Use {"{{"}field_key{"}}"} to insert an answer, for example {"{{"}name{"}}"} or{" "}
-                {"{{"}email{"}}"}. Available keys:{" "}
-                {fields
-                  .filter((f) => f.enabled)
-                  .map((f) => f.key)
-                  .join(", ")}
-                .
-              </p>
-            </InspectorSection>
-          </div>
+              <InspectorSection title="Autoreply to the sender">
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                    Autoreply
+                  </span>
+                  <select
+                    value={
+                      priv.autoreplyEnabled === undefined ? "" : priv.autoreplyEnabled ? "on" : "off"
+                    }
+                    onChange={(e) =>
+                      setPriv({
+                        ...priv,
+                        autoreplyEnabled: e.target.value === "" ? undefined : e.target.value === "on",
+                      })
+                    }
+                    className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                  >
+                    <option value="">
+                      Use shared default ({d?.autoreply_enabled ? "on" : "off"})
+                    </option>
+                    <option value="on">On</option>
+                    <option value="off">Off</option>
+                  </select>
+                </label>
+                <SmartTagLocalizedField
+                  label="Subject"
+                  value={priv.autoreplySubject}
+                  fields={activeFields}
+                  onChange={(v) => setPriv({ ...priv, autoreplySubject: v })}
+                />
+                {isInherited(priv.autoreplySubject) ? (
+                  <Inherited from={d?.autoreply_subject?.sv ?? ""} />
+                ) : null}
+                <SmartTagLocalizedField
+                  label="Body"
+                  value={priv.autoreplyBody}
+                  fields={activeFields}
+                  multiline
+                  onChange={(v) => setPriv({ ...priv, autoreplyBody: v })}
+                />
 
-          <div className="border border-ink/10 bg-white p-6 space-y-4">
-            <InspectorSection title="Google Sheets">
-              <TextField
-                label="Spreadsheet ID"
-                value={priv.sheetId ?? ""}
-                onChange={(v) => setPriv({ ...priv, sheetId: v })}
-              />
-              {isInherited(priv.sheetId) ? <Inherited from={d?.sheet_id ?? ""} /> : null}
-              <TextField
-                label="Tab name"
-                value={priv.sheetTab ?? ""}
-                onChange={(v) => setPriv({ ...priv, sheetTab: v })}
-              />
-              {isInherited(priv.sheetTab) ? <Inherited from={d?.sheet_tab ?? ""} /> : null}
-              <label className="block">
-                <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
-                  Append every new submission live
-                </span>
-                <select
-                  value={
-                    priv.sheetLiveAppend === undefined ? "" : priv.sheetLiveAppend ? "on" : "off"
-                  }
-                  onChange={(e) =>
-                    setPriv({
-                      ...priv,
-                      sheetLiveAppend: e.target.value === "" ? undefined : e.target.value === "on",
-                    })
-                  }
-                  className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                {isInherited(priv.autoreplyBody) ? (
+                  <Inherited from={(d?.autoreply_body?.sv ?? "").slice(0, 60)} />
+                ) : null}
+                <p className="text-xs text-ink/45">
+                  Use {"{{"}field_key{"}}"} to insert an answer, for example {"{{"}name{"}}"} or{" "}
+                  {"{{"}email{"}}"}. Available keys:{" "}
+                  {fields
+                    .filter((f) => f.enabled)
+                    .map((f) => f.key)
+                    .join(", ")}
+                  .
+                </p>
+              </InspectorSection>
+            </div>
+
+            <div className="border border-ink/10 bg-white p-6 space-y-4">
+              <InspectorSection title="Google Sheets">
+                <TextField
+                  label="Spreadsheet ID"
+                  value={priv.sheetId ?? ""}
+                  onChange={(v) => setPriv({ ...priv, sheetId: v })}
+                />
+                {isInherited(priv.sheetId) ? <Inherited from={d?.sheet_id ?? ""} /> : null}
+                <TextField
+                  label="Tab name"
+                  value={priv.sheetTab ?? ""}
+                  onChange={(v) => setPriv({ ...priv, sheetTab: v })}
+                />
+                {isInherited(priv.sheetTab) ? <Inherited from={d?.sheet_tab ?? ""} /> : null}
+                <label className="block">
+                  <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                    Append every new submission live
+                  </span>
+                  <select
+                    value={
+                      priv.sheetLiveAppend === undefined ? "" : priv.sheetLiveAppend ? "on" : "off"
+                    }
+                    onChange={(e) =>
+                      setPriv({
+                        ...priv,
+                        sheetLiveAppend: e.target.value === "" ? undefined : e.target.value === "on",
+                      })
+                    }
+                    className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                  >
+                    <option value="">
+                      Use shared default ({d?.sheet_live_append ? "on" : "off"})
+                    </option>
+                    <option value="on">On</option>
+                    <option value="off">Off</option>
+                  </select>
+                </label>
+                {(priv.sheetLiveAppend ?? d?.sheet_live_append) &&
+                !(priv.sheetId ?? d?.sheet_id ?? "").trim() ? (
+                  <p className="text-xs text-red-600">
+                    Live append does nothing until a spreadsheet ID is set here or in the shared
+                    settings.
+                  </p>
+                ) : null}
+                <button
+                  onClick={async () => {
+                    try {
+                      const res = await syncSubmissions({ data: { formKey: form.key } });
+                      toast.success(`Synced ${res.synced} submission(s)`);
+                      await qc.invalidateQueries({ queryKey: ["form-submissions"] });
+                    } catch (e) {
+                      toast.error(e instanceof Error ? e.message : "Sync failed");
+                    }
+                  }}
+                  className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
                 >
-                  <option value="">
-                    Use shared default ({d?.sheet_live_append ? "on" : "off"})
-                  </option>
-                  <option value="on">On</option>
-                  <option value="off">Off</option>
-                </select>
-              </label>
-              {(priv.sheetLiveAppend ?? d?.sheet_live_append) &&
-              !(priv.sheetId ?? d?.sheet_id ?? "").trim() ? (
-                <p className="text-xs text-red-600">
-                  Live append does nothing until a spreadsheet ID is set here or in the shared
-                  settings.
+                  <RefreshCw className="size-4" />
+                  Sync pending submissions now
+                </button>
+                <p className="text-xs text-ink/45">
+                  Submissions are always stored first — a Sheets outage never loses data.
                 </p>
-              ) : null}
-              <button
-                onClick={async () => {
-                  try {
-                    const res = await syncSubmissions({ data: { formKey: form.key } });
-                    toast.success(`Synced ${res.synced} submission(s)`);
-                    await qc.invalidateQueries({ queryKey: ["form-submissions"] });
-                  } catch (e) {
-                    toast.error(e instanceof Error ? e.message : "Sync failed");
-                  }
-                }}
-                className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
-              >
-                <RefreshCw className="size-4" />
-                Sync pending submissions now
-              </button>
-              <p className="text-xs text-ink/45">
-                Submissions are always stored first — a Sheets outage never loses data.
-              </p>
-            </InspectorSection>
-          </div>
+              </InspectorSection>
+            </div>
 
-          <div className="border border-ink/10 bg-white p-6 space-y-4">
-            <InspectorSection title="Webhook">
-              <label className="flex items-center gap-3 text-sm text-ink/70">
-                <input
-                  type="checkbox"
-                  checked={priv.webhookEnabled ?? false}
-                  onChange={(e) => setPriv({ ...priv, webhookEnabled: e.target.checked })}
-                  className="size-4 accent-sea"
+            <div className="border border-ink/10 bg-white p-6 space-y-4">
+              <InspectorSection title="Webhook">
+                <label className="flex items-center gap-3 text-sm text-ink/70">
+                  <input
+                    type="checkbox"
+                    checked={priv.webhookEnabled ?? false}
+                    onChange={(e) => setPriv({ ...priv, webhookEnabled: e.target.checked })}
+                    className="size-4 accent-sea"
+                  />
+                  POST every new submission to an external endpoint
+                </label>
+                <TextField
+                  label="Endpoint URL"
+                  value={priv.webhookUrl ?? ""}
+                  onChange={(v) => setPriv({ ...priv, webhookUrl: v })}
                 />
-                POST every new submission to an external endpoint
-              </label>
-              <TextField
-                label="Endpoint URL"
-                value={priv.webhookUrl ?? ""}
-                onChange={(v) => setPriv({ ...priv, webhookUrl: v })}
-              />
-              <TextField
-                label="Signing secret (optional)"
-                value={priv.webhookSecret ?? ""}
-                onChange={(v) => setPriv({ ...priv, webhookSecret: v })}
-              />
-              <button
-                onClick={async () => {
-                  try {
-                    const res = await testWebhook({
-                      data: {
-                        formKey: form.key,
-                        url: priv.webhookUrl || undefined,
-                        secret: priv.webhookSecret || undefined,
-                      },
-                    });
-                    if (res.ok) toast.success(`Webhook responded ${res.status ?? 200}`);
-                    else
-                      toast.error(res.error ?? `Webhook failed (${res.status ?? "no response"})`);
-                    await qc.invalidateQueries({ queryKey: ["form-deliveries"] });
-                  } catch (e) {
-                    toast.error(e instanceof Error ? e.message : "Webhook test failed");
-                  }
-                }}
-                className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
-              >
-                <RefreshCw className="size-4" />
-                Send test payload
-              </button>
-              <p className="text-xs text-ink/45">
-                Requests are signed with HMAC-SHA256 in the <code>X-Signature</code> header. Failed
-                calls appear in the delivery monitor and can be retried there.
-              </p>
-              <Link
-                to={paths.deliveries}
-                className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-ink/50 hover:text-ink"
-              >
-                <ExternalLink className="size-4" />
-                Delivery monitor
-              </Link>
-            </InspectorSection>
+                <TextField
+                  label="Signing secret (optional)"
+                  value={priv.webhookSecret ?? ""}
+                  onChange={(v) => setPriv({ ...priv, webhookSecret: v })}
+                />
+                <button
+                  onClick={async () => {
+                    try {
+                      const res = await testWebhook({
+                        data: {
+                          formKey: form.key,
+                          url: priv.webhookUrl || undefined,
+                          secret: priv.webhookSecret || undefined,
+                        },
+                      });
+                      if (res.ok) toast.success(`Webhook responded ${res.status ?? 200}`);
+                      else
+                        toast.error(res.error ?? `Webhook failed (${res.status ?? "no response"})`);
+                      await qc.invalidateQueries({ queryKey: ["form-deliveries"] });
+                    } catch (e) {
+                      toast.error(e instanceof Error ? e.message : "Webhook test failed");
+                    }
+                  }}
+                  className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea"
+                >
+                  <RefreshCw className="size-4" />
+                  Send test payload
+                </button>
+                <p className="text-xs text-ink/45">
+                  Requests are signed with HMAC-SHA256 in the <code>X-Signature</code> header. Failed
+                  calls appear in the delivery monitor and can be retried there.
+                </p>
+                <Link
+                  to={paths.deliveries}
+                  className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-ink/50 hover:text-ink"
+                >
+                  <ExternalLink className="size-4" />
+                  Delivery monitor
+                </Link>
+              </InspectorSection>
+            </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
 
-      {tab === "history" ? (
-        <div className="mt-6">
-          <VersionHistory formKey={form.key} defaults={d ?? null} />
-        </div>
-      ) : null}
+        {tab === "history" ? (
+          <div className="mt-6">
+            <VersionHistory
+              formKey={form.key}
+              defaults={d ?? null}
+              editSessionId={lock.sessionId}
+            />
+          </div>
+        ) : null}
 
-      {tab === "activity" ? (
-        <div className="mt-6">
-          <ActivityLog formKey={form.key} />
-        </div>
-      ) : null}
+        {tab === "activity" ? (
+          <div className="mt-6">
+            <ActivityLog formKey={form.key} />
+          </div>
+        ) : null}
+      </EditLockFence>
     </div>
   );
 }