From 30d05db03a3cbf9b9358e838850bcecf7af0866e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:54:31 +0200
Subject: [PATCH 01/12] feat: duplicate a question from its menu

The copy goes right after the question and opens with the cursor in
its text. A change still waiting to save in the open question is sent
first, so the copy has it. Groups have no Duplicate: the server can't
copy them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/api/blocks.ts                    |  7 +++
 .../Factory/Document/BlockMenu.test.ts        | 18 ++++++
 .../components/Factory/Document/BlockMenu.vue |  9 ++-
 .../components/Factory/Document/blockFocus.ts | 16 +++--
 resources/js/stores/form.test.ts              | 63 ++++++++++++++++++-
 resources/js/stores/form.ts                   | 29 +++++++++
 resources/js/stores/workbench.ts              |  8 +++
 7 files changed, 142 insertions(+), 8 deletions(-)

diff --git a/resources/js/api/blocks.ts b/resources/js/api/blocks.ts
index 10b359c0..65029179 100644
--- a/resources/js/api/blocks.ts
+++ b/resources/js/api/blocks.ts
@@ -63,6 +63,13 @@ export function callUpdateFormBlock(
     });
 }
 
+// the copy goes right after the original; the server renumbers the form
+export function callDuplicateFormBlock(
+    id: number
+): Promise<AxiosResponse<FormBlockModel>> {
+    return handler.post(window.route("api.blocks.duplicate", { block: id }));
+}
+
 export function callDeleteFormBlock(id: number): Promise<AxiosResponse> {
     return new Promise(async (resolve, reject) => {
         try {
diff --git a/resources/js/components/Factory/Document/BlockMenu.test.ts b/resources/js/components/Factory/Document/BlockMenu.test.ts
index df16bedb..d22cf12e 100644
--- a/resources/js/components/Factory/Document/BlockMenu.test.ts
+++ b/resources/js/components/Factory/Document/BlockMenu.test.ts
@@ -8,6 +8,8 @@ const blocks = [
     { id: 2, uuid: "q2", type: "radio" },
 ] as FormBlockModel[];
 
+const group = { id: 3, uuid: "g1", type: "group" } as FormBlockModel;
+
 let wrapper: VueWrapper | undefined;
 
 const openMenu = async (block: FormBlockModel) => {
@@ -62,4 +64,20 @@ describe("a block's menu", () => {
         expect(item("Move up")?.getAttribute("aria-disabled")).toBeNull();
         expect(item("Move down")?.getAttribute("aria-disabled")).toBe("true");
     });
+
+    it("duplicates a question", async () => {
+        await openMenu(blocks[0]);
+
+        item("Duplicate")!.click();
+        await flushPromises();
+
+        expect(useForm().duplicateFormBlock).toHaveBeenCalledWith(blocks[0]);
+    });
+
+    it("has no Duplicate for a group, which the server can't copy", async () => {
+        await openMenu(group);
+
+        expect(item("Duplicate")).toBeUndefined();
+        expect(item("Add question to this group")).toBeDefined();
+    });
 });
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 230b0bfe..7c078da6 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -13,6 +13,13 @@
       </span>
     </template>
 
+    <D9MenuLink
+      v-if="!isGroup"
+      as="button"
+      :class="item"
+      label="Duplicate"
+      @click="duplicateBlock(block)"
+    />
     <D9MenuLink
       v-if="isGroup"
       as="button"
@@ -80,7 +87,7 @@ const emit = defineEmits<{ addToGroup: [] }>();
 
 const store = useForm();
 const workbench = useWorkbench();
-const { addBlock } = useAddBlock();
+const { addBlock, duplicateBlock } = useAddBlock();
 const { canMove, moveBlock } = useMoveBlock();
 
 const item = "w-full min-h-11 text-left text-sm lg:min-h-0";
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index f8dcf4c6..b7a86f77 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -31,16 +31,14 @@ export async function scrollToBlock(
     document.getElementById(`row-${uuid}`)?.scrollIntoView({ block });
 }
 
-// a new block opens with the cursor in it
+// a new block or a copy opens with the cursor in it
 export function useAddBlock() {
     const store = useForm();
     const workbench = useWorkbench();
 
-    const addBlock = async (
-        ...args: Parameters<typeof store.createFormBlock>
-    ) => {
+    const opens = async (create: () => Promise<void>) => {
         const before = workbench.block;
-        await store.createFormBlock(...args);
+        await create();
 
         // a failed create keeps the open block: leave the cursor where it is
         if (workbench.block !== before) {
@@ -48,5 +46,11 @@ export function useAddBlock() {
         }
     };
 
-    return { addBlock };
+    const addBlock = (...args: Parameters<typeof store.createFormBlock>) =>
+        opens(() => store.createFormBlock(...args));
+
+    const duplicateBlock = (block: FormBlockModel) =>
+        opens(() => store.duplicateFormBlock(block));
+
+    return { addBlock, duplicateBlock };
 }
diff --git a/resources/js/stores/form.test.ts b/resources/js/stores/form.test.ts
index 51828c2a..b804e262 100644
--- a/resources/js/stores/form.test.ts
+++ b/resources/js/stores/form.test.ts
@@ -1,8 +1,11 @@
+import { PiniaDebounce } from "@pinia/plugin-debounce";
 import { AxiosError, AxiosResponse } from "axios";
+import debounce from "lodash/debounce";
 import { createPinia, setActivePinia } from "pinia";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createApp } from "vue";
 import handler from "@/api/handler";
-import { useForm } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 
 vi.mock("@/api/handler", () => ({ default: { get: vi.fn(), post: vi.fn() } }));
 
@@ -122,3 +125,61 @@ describe("loading the questions", () => {
         expect(useForm().blocks).toBeNull();
     });
 });
+
+describe("duplicating a question", () => {
+    const question = (id: number, uuid: string) =>
+        ({ id, uuid, type: "radio", message: "<p>Hi</p>" }) as FormBlockModel;
+
+    let posted: string[];
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+        // the debounce the app uses (plugins run only once pinia is in an app)
+        const pinia = createPinia();
+        pinia.use(PiniaDebounce(debounce));
+        createApp({}).use(pinia);
+        setActivePinia(pinia);
+
+        window.route = vi.fn(
+            (name: string) => name,
+        ) as unknown as typeof window.route;
+        posted = [];
+        vi.mocked(handler.post).mockImplementation(async (url: string) => {
+            posted.push(url);
+            return {
+                status: 201,
+                data: url === "api.blocks.duplicate" ? question(4, "copy") : {},
+            } as AxiosResponse;
+        });
+
+        useForm().form = { ...saved };
+        useForm().blocks = [
+            question(1, "q1"),
+            question(2, "q2"),
+            question(3, "q3"),
+        ];
+    });
+
+    it("puts the copy right after the question and opens it", async () => {
+        await useForm().duplicateFormBlock(useForm().blocks![1]);
+
+        expect(posted).toEqual(["api.blocks.duplicate"]);
+        expect(useForm().blocks!.map((block) => block.uuid)).toEqual([
+            "q1",
+            "q2",
+            "copy",
+            "q3",
+        ]);
+        expect(useWorkbench().block?.uuid).toBe("copy");
+    });
+
+    it("saves a change still waiting in the open question first, so the copy has it", async () => {
+        const workbench = useWorkbench();
+        workbench.block = useForm().blocks![1];
+        workbench.updateBlock({ message: "<p>Hi there</p>" });
+
+        await useForm().duplicateFormBlock(workbench.block);
+
+        expect(posted).toEqual(["api.blocks.update", "api.blocks.duplicate"]);
+    });
+});
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index 0429d4d8..f1335395 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -14,6 +14,7 @@ import {
     callCreateFormBlock,
     callUpdateBlockSequence,
     callDeleteFormBlock,
+    callDuplicateFormBlock,
     callUpdateFormBlock,
 } from "@/api/blocks";
 import { useWorkbench } from ".";
@@ -231,6 +232,34 @@ export const useForm = defineStore("form", {
             });
         },
 
+        // the copy goes right after the question and opens
+        async duplicateFormBlock(block: FormBlockModel) {
+            const workbench = useWorkbench();
+
+            // the copy must have the last change to the open question
+            if (workbench.block?.id === block.id) {
+                await workbench.sendWaitingSaves();
+            }
+
+            const request = async () => {
+                const copy = (await callDuplicateFormBlock(block.id)).data;
+                const index =
+                    this.blocks?.findIndex((item) => item.id === block.id) ??
+                    -1;
+
+                if (index !== -1) {
+                    this.blocks?.splice(index + 1, 0, copy);
+                    workbench.putOnWorkbench(copy);
+                }
+            };
+
+            await useNotice().send(
+                `duplicateFormBlock:${block.id}`,
+                request,
+                block,
+            );
+        },
+
         async deleteFormBlock(block: FormBlockModel) {
             if (!this.form) {
                 return;
diff --git a/resources/js/stores/workbench.ts b/resources/js/stores/workbench.ts
index adbb47ed..2d61c2a3 100644
--- a/resources/js/stores/workbench.ts
+++ b/resources/js/stores/workbench.ts
@@ -108,6 +108,14 @@ export const useWorkbench = defineStore("workbench", {
             );
         },
 
+        // sends the saves that wait for their debounce now, and waits for them
+        async sendWaitingSaves() {
+            await Promise.all([
+                (this.saveBlock as DebouncedFunc<any>).flush(),
+                (this.saveInteraction as DebouncedFunc<any>).flush(),
+            ]);
+        },
+
         // sends the saves that wait for their debounce now, as the page closes
         flushSaves() {
             isLeaving = true;

From 96553ea9e26c801ae62e610880b75fd71d223596 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:57:35 +0200
Subject: [PATCH 02/12] feat: ask before deleting a question or group from its
 menu

The menu's Delete opens the delete dialog that names the answers and
the rules that stop working. After the delete, focus goes to the next
row, else the one above, else Add question; a failed delete keeps it
on the row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/BlockMenu.test.ts        | 101 ++++++++++++++++++
 .../components/Factory/Document/BlockMenu.vue |  34 +++---
 .../Factory/Document/FormDocument.vue         |   6 +-
 .../components/Factory/Document/blockFocus.ts |  28 +++++
 .../Factory/Shared/useDeleteBlock.ts          |   7 +-
 5 files changed, 161 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/Factory/Document/BlockMenu.test.ts b/resources/js/components/Factory/Document/BlockMenu.test.ts
index d22cf12e..4b70fa55 100644
--- a/resources/js/components/Factory/Document/BlockMenu.test.ts
+++ b/resources/js/components/Factory/Document/BlockMenu.test.ts
@@ -1,8 +1,15 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { AxiosResponse } from "axios";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { callGetFormBlocks } from "@/api/blocks";
 import { useForm, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 
+vi.mock("@/api/blocks", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callGetFormBlocks: vi.fn(),
+}));
+
 const blocks = [
     { id: 1, uuid: "q1", type: "radio" },
     { id: 2, uuid: "q2", type: "radio" },
@@ -81,3 +88,97 @@ describe("a block's menu", () => {
         expect(item("Add question to this group")).toBeDefined();
     });
 });
+
+describe("deleting from a block's menu", () => {
+    const q1 = { id: 1, uuid: "q1", type: "radio" } as FormBlockModel;
+    const g1 = { id: 2, uuid: "g1", type: "group" } as FormBlockModel;
+    const q3 = { id: 3, uuid: "q3", type: "radio", parent_block: "g1" };
+    const q2 = { id: 4, uuid: "q2", type: "radio" } as FormBlockModel;
+
+    // the rows FormDocument shows, and its Add question button
+    const showRows = (...uuids: string[]) => {
+        document.body.innerHTML = uuids
+            .map(
+                (uuid) =>
+                    `<div id="row-${uuid}"><button>${uuid}</button></div>`,
+            )
+            .join("");
+        document.body.insertAdjacentHTML(
+            "beforeend",
+            '<div id="add-buttons"><button>Add question</button></div>',
+        );
+    };
+
+    const deleteFrom = async (block: FormBlockModel) => {
+        await openMenu(block);
+        item(block.type === "group" ? "Delete group…" : "Delete…")!.click();
+        await flushPromises();
+        // the dialog asks first: nothing is deleted yet
+        expect(useForm().deleteFormBlock).not.toHaveBeenCalled();
+
+        document
+            .querySelector<HTMLElement>("[role=alertdialog] button.bg-red-600")!
+            .click();
+        await flushPromises();
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        const form = useForm();
+        form.$reset();
+        form.form = { uuid: "form1" } as FormModel;
+        form.blocks = [q1, g1, q3 as FormBlockModel, q2];
+        vi.mocked(callGetFormBlocks).mockResolvedValue({
+            data: form.blocks,
+        } as AxiosResponse<FormBlockModel[]>);
+        vi.mocked(form.deleteFormBlock).mockImplementation(async (block) => {
+            form.blocks = form.blocks!.filter(
+                (item) =>
+                    item.id !== block.id && item.parent_block !== block.uuid,
+            );
+        });
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        document.body.innerHTML = "";
+    });
+
+    it("moves focus to the next row, past a deleted group's questions", async () => {
+        showRows("q1", "g1", "q3", "q2");
+
+        await deleteFrom(g1);
+
+        expect(useForm().deleteFormBlock).toHaveBeenCalledWith(g1);
+        expect(document.activeElement?.textContent).toBe("q2");
+    });
+
+    it("moves focus to the row above when the last one is deleted", async () => {
+        showRows("q1", "g1", "q3", "q2");
+
+        await deleteFrom(q2);
+
+        expect(document.activeElement?.closest("[id^=row-]")?.id).toBe(
+            "row-q3",
+        );
+    });
+
+    it("moves focus to Add question when no block is left", async () => {
+        useForm().blocks = [q1];
+        showRows("q1");
+
+        await deleteFrom(q1);
+
+        expect(document.activeElement?.textContent).toBe("Add question");
+    });
+
+    it("keeps focus on the row when the delete fails", async () => {
+        vi.mocked(useForm().deleteFormBlock).mockResolvedValue();
+        showRows("q1", "g1", "q3", "q2");
+
+        await deleteFrom(q1);
+
+        expect(document.activeElement?.textContent).toBe("q1");
+    });
+});
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 7c078da6..ddcbc273 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -65,9 +65,15 @@
       as="button"
       :class="[item, 'text-red-700']"
       :label="isGroup ? 'Delete group…' : 'Delete…'"
-      @click="deleteBlock"
+      @click="ask"
     />
   </D9Menu>
+
+  <DeleteBlockDialog
+    v-bind="{ block, check }"
+    @close="cancel"
+    @confirm="deleteBlock"
+  />
 </template>
 
 <script setup lang="ts">
@@ -75,7 +81,9 @@ import { computed } from "vue";
 import { D9Icon, D9Menu, D9MenuLink } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
 import { useForm, useWorkbench } from "@/stores";
-import { useAddBlock } from "./blockFocus";
+import DeleteBlockDialog from "@/components/Factory/Shared/DeleteBlockDialog.vue";
+import { useDeleteBlock } from "@/components/Factory/Shared/useDeleteBlock";
+import { blocksAround, focusRow, useAddBlock } from "./blockFocus";
 import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
@@ -104,19 +112,21 @@ const toggleHidden = () => {
   }
 };
 
-const deleteBlock = () => {
-  const question = isGroup.value
-    ? "Do you really want to delete this group? All blocks inside this group will be deleted as well."
-    : "Do you really want to delete this block?";
+const { check, ask, cancel, confirm } = useDeleteBlock(props.block);
 
-  if (!window.confirm(question)) {
-    return;
-  }
+// focus never falls to the page: the next row, else the one before, else Add question
+const deleteBlock = async () => {
+  const near = blocksAround(props.block);
+  await confirm();
 
-  store.deleteFormBlock(props.block);
+  const left = new Set((store.blocks ?? []).map((item) => item.id));
+  // a failed delete keeps the block: back to its row
+  const target = left.has(props.block.id)
+    ? props.block
+    : near.find((item) => left.has(item.id));
 
-  if (workbench.block?.id === props.block.id) {
-    workbench.clearWorkbench();
+  if (!target || !(await focusRow(target))) {
+    document.querySelector<HTMLElement>("#add-buttons button")?.focus();
   }
 };
 </script>
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index fe991a6d..da46d875 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -47,7 +47,11 @@
             description="Add your first question below."
           />
 
-          <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
+          <div
+            id="add-buttons"
+            ref="addButtons"
+            class="mt-4 flex flex-wrap gap-2 pl-12"
+          >
             <D9Button
               label="Add question"
               class="min-h-11 lg:min-h-0"
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index b7a86f77..c1be464c 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -54,3 +54,31 @@ export function useAddBlock() {
 
     return { addBlock, duplicateBlock };
 }
+
+// the blocks around one as the document shows them, nearest first: those
+// after it, then those before it. A group's own questions go with it.
+export function blocksAround(block: FormBlockModel): FormBlockModel[] {
+    const shown = (nodes: TreeNode[]): FormBlockModel[] =>
+        nodes.flatMap((node) => [node.block, ...shown(node.children)]);
+    const order = shown(useForm().blocksTree).filter(
+        (item) => item.parent_block !== block.uuid,
+    );
+    const at = order.findIndex((item) => item.id === block.id);
+
+    return [...order.slice(at + 1), ...order.slice(0, at).reverse()];
+}
+
+// focuses a block's row: a closed question's button, an open one's text, a group's name
+export async function focusRow(block: FormBlockModel): Promise<boolean> {
+    if (block.type === "group" || useWorkbench().block?.id === block.id) {
+        return focusBlock(block);
+    }
+
+    await nextTick();
+    const button = document.querySelector<HTMLElement>(
+        `#row-${block.uuid} > button`,
+    );
+    button?.focus();
+
+    return button !== null;
+}
diff --git a/resources/js/components/Factory/Shared/useDeleteBlock.ts b/resources/js/components/Factory/Shared/useDeleteBlock.ts
index 78993d5c..18819377 100644
--- a/resources/js/components/Factory/Shared/useDeleteBlock.ts
+++ b/resources/js/components/Factory/Shared/useDeleteBlock.ts
@@ -57,14 +57,17 @@ export function useDeleteBlock(block: FormBlockModel) {
         check.value = null;
     };
 
-    const confirm = () => {
+    // resolves once the server answered, so focus can move after it
+    const confirm = async () => {
         const workbench = useWorkbench();
         check.value = null;
-        useForm().deleteFormBlock(block);
+        const deleting = useForm().deleteFormBlock(block);
 
         if (workbench.block?.id === block.id) {
             workbench.clearWorkbench();
         }
+
+        await deleting;
     };
 
     return { check, ask, cancel, confirm };

From fef51c5c4cec388f0e3a7c343b30debc633242d0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:59:11 +0200
Subject: [PATCH 03/12] feat: show the save status in the form's top bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The editor's "Saving…", "Saved" and "Not saved" with Retry now sit in
the top bar, in its light grey as in the board; under 1280 px only the
icons show and Retry is 44 px tall on touch screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.vue                 |  2 ++
 .../js/components/Factory/Shared/SaveStatus.vue   | 15 ++++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 27a60fea..69dc5b44 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -1,5 +1,6 @@
 <template>
   <app-layout title="Edit Form" limit-height>
+    <template #save-status><SaveStatus /></template>
     <FormDocument :status="status" @retry="loadBlocks" />
   </app-layout>
 </template>
@@ -8,6 +9,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
+import SaveStatus from "@/components/Factory/Shared/SaveStatus.vue";
 import { useSaveOnLeave } from "@/components/Factory/Shared/useSaveOnLeave";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
diff --git a/resources/js/components/Factory/Shared/SaveStatus.vue b/resources/js/components/Factory/Shared/SaveStatus.vue
index eb9ff8ae..0d3ff5ac 100644
--- a/resources/js/components/Factory/Shared/SaveStatus.vue
+++ b/resources/js/components/Factory/Shared/SaveStatus.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="flex items-center justify-end gap-1 text-xs text-grey-600">
+  <!-- sits in the dark top bar; under xl only the icons show, as in the board -->
+  <div class="flex items-center justify-end gap-1 text-xs text-grey-400">
     <p role="status" aria-live="polite" class="flex items-center gap-1.5">
       <template v-if="shown === 'saving'">
         <svg
@@ -13,12 +14,12 @@
         >
           <path d="M21 12a9 9 0 1 1-6.2-8.6" />
         </svg>
-        <span>Saving…</span>
+        <span class="sr-only xl:not-sr-only">Saving…</span>
       </template>
       <template v-else-if="shown === 'saved'">
         <svg
           aria-hidden="true"
-          class="h-3.5 w-3.5 text-green-700"
+          class="h-3.5 w-3.5"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -28,11 +29,11 @@
         >
           <path d="M5 12l5 5L20 7" />
         </svg>
-        <span>Saved</span>
+        <span class="sr-only xl:not-sr-only">Saved</span>
       </template>
       <span
         v-else-if="shown === 'failed'"
-        class="flex items-center gap-1 font-medium text-red-700"
+        class="flex items-center gap-1 font-medium text-red-300"
       >
         <svg
           aria-hidden="true"
@@ -48,13 +49,13 @@
             d="M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"
           />
         </svg>
-        Not saved
+        <span class="sr-only xl:not-sr-only">Not saved</span>
       </span>
     </p>
     <button
       v-if="shown === 'failed' && notice.canRetry"
       type="button"
-      class="h-6 rounded px-1 font-medium text-blue-700 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600"
+      class="h-11 rounded px-2 font-medium text-blue-300 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-6 lg:px-1"
       @click="notice.retrySaves()"
     >
       Retry

From 5b3693f53a098126716f02611102fa2d6a358ed2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:00:39 +0200
Subject: [PATCH 04/12] docs: describe the editor as one document with an
 outline

The editor, outline (was Storyboard, same address), block and logic
pages now describe the document, the open question, its menu, moving
by keyboard and touch, the delete dialog and the save status.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .vitepress/config.mts               |  4 +-
 docs/workbench/conditional-logic.md |  8 ++--
 docs/workbench/form-blocks.md       | 12 +++---
 docs/workbench/storyboard.md        | 50 +++++-----------------
 docs/workbench/workbench.md         | 66 +++++++++++++++--------------
 5 files changed, 56 insertions(+), 84 deletions(-)

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index d1dee7d2..f89acea2 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -29,8 +29,8 @@ export default defineConfig({
                         text: "Managing Forms",
                         link: "/workbench/managing-forms",
                     },
-                    { text: "Workbench", link: "/workbench/workbench" },
-                    { text: "Storyboard", link: "/workbench/storyboard" },
+                    { text: "Form Editor", link: "/workbench/workbench" },
+                    { text: "Outline", link: "/workbench/storyboard" },
                     { text: "Form Blocks", link: "/workbench/form-blocks" },
                     {
                         text: "Conditional Logic",
diff --git a/docs/workbench/conditional-logic.md b/docs/workbench/conditional-logic.md
index 3a938cce..b40ca2a3 100644
--- a/docs/workbench/conditional-logic.md
+++ b/docs/workbench/conditional-logic.md
@@ -14,8 +14,8 @@ Conditional logic lets you control the flow of your form based on how users resp
 
 To add logic to any block in your form:
 
-1. Select the block you want to apply logic to
-2. Click the **Block Logic** button in the block footer
+1. Open the question you want to apply logic to (for a group: use its header)
+2. Click **Rules** at the bottom of the question
 3. In the slide-out panel that appears, click the **Rule** button to add a new rule
 4. Give your rule a descriptive name (e.g., "Skip to payment if premium selected")
 5. Configure your conditions and actions (detailed below)
@@ -73,9 +73,7 @@ Go to logic is evaluated after a user interacts with the current block. When sel
 
 ## Logic Visualization
 
-Blocks with logic rules applied are indicated by a blue highlight on the **Block Logic** button. If a block has multiple rules, a counter will show the number of applied rules (e.g., "Block Logic (2)").
-
-When viewing the Storyboard with logic visualization enabled, you can see a visual representation of all logic rules, making it easier to understand your form's conditional flow.
+In the editor, the line below each question shows how many rules it has (e.g., "2 rules"), and its **Rules** button shows the same count (e.g., "Rules (2)").
 
 ## Best Practices
 
diff --git a/docs/workbench/form-blocks.md b/docs/workbench/form-blocks.md
index 5422a717..6d035ed4 100644
--- a/docs/workbench/form-blocks.md
+++ b/docs/workbench/form-blocks.md
@@ -37,14 +37,14 @@ Input offers a variety of block types to gather different kinds of information:
 
 To add a new block to your form:
 
-1. Click the "+" button at the bottom of an existing block
-2. Choose the block type from the dropdown menu
-3. The new block will be inserted below the current block
+1. Click **Add question** at the end of the form, or **Add question below** in a question's menu (…)
+2. The new question opens with the cursor in its text
+3. Choose its answer type at the bottom of the question
 
 ## Block Groups
 
 Organize related blocks together:
 
-1. **Creating a Group**: Select multiple blocks and click "Group"
-2. **Group Settings**: Add a group title and description
-3. **Collapsing/Expanding**: Control group visibility in the editor
+1. **Creating a Group**: Click **Add group** at the end of the form and give it a name
+2. **Filling a Group**: Use **Add question to this group** in the group's menu, or drag questions into it
+3. **Hiding a Group**: **Hide group** in its menu hides all its questions at once, and a rule on the group shows or hides them together
diff --git a/docs/workbench/storyboard.md b/docs/workbench/storyboard.md
index 4dc4472f..3097bc21 100644
--- a/docs/workbench/storyboard.md
+++ b/docs/workbench/storyboard.md
@@ -1,46 +1,16 @@
-# Storyboard: Form Block Overview
+# Outline
 
-The Storyboard is the sidebar component of the Workbench that provides a scrollable overview of all the blocks in your form. It helps you navigate through your form blocks quickly and efficiently.
+The outline is a short list of your form's questions and groups. Use it to jump to a question in a long form. It replaces the Storyboard of earlier versions.
 
-## What is the Storyboard?
+## Where to find it
 
-The Storyboard is essentially a compact representation of your form structure that:
+-   **Wide screens (1280 px and up)** - The outline sits on the left of the editor
+-   **Tablets and phones** - Click **Outline** above the questions to open it as a panel. Close it with the close button or Escape
 
--   Shows all blocks in your form in sequential order
--   Allows quick navigation between blocks
--   Provides a way to reorder blocks through drag and drop
--   Displays visual indicators for blocks with conditional logic
+## Using the outline
 
-## Using the Storyboard
+-   Each question shows its number and the start of its text. Groups show their name, with their questions below
+-   Click a question to open it in the document, scrolled into view, with the cursor in its text
+-   The open question is marked, and the outline keeps it in view
 
-### Navigating Your Form
-
-The Storyboard makes it easy to move through your form:
-
-1. **Scrolling**: Scroll up and down to see all the blocks in your form
-2. **Block Selection**: Click on any block to select it and display its properties in the main Workbench area
-3. **Visual Overview**: Quickly see your entire form structure without having to navigate through the form itself
-
-### Managing Blocks
-
-The Storyboard provides essential block management capabilities:
-
-1. **Reordering**: Drag and drop blocks to change their order in the form
-2. **Adding Blocks**: Use the "+" button at the bottom of blocks to add new blocks
-3. **Removing Blocks**: Select a block and use the delete option to remove it
-4. **Block Status**: See visual indicators for required fields or blocks with conditional logic
-
-### Logic Indicators
-
-When you've added conditional logic to blocks, the Storyboard helps you keep track:
-
--   Blocks with conditional logic have visual indicators
--   You can quickly identify which blocks have special behavior
-
-### Form Organization
-
-For forms with multiple questions, the Storyboard helps you:
-
--   Keep track of the overall structure
--   Ensure a logical question sequence
--   Easily navigate to specific sections
+To add, move or delete questions, use the document itself. See [The Form Editor](./workbench.md).
diff --git a/docs/workbench/workbench.md b/docs/workbench/workbench.md
index 53cf41eb..76e22a63 100644
--- a/docs/workbench/workbench.md
+++ b/docs/workbench/workbench.md
@@ -1,47 +1,51 @@
-# Workbench Overview
+# The Form Editor
 
-The Workbench is the core interface of Input where you build and design your forms. It provides a powerful, intuitive environment for creating engaging form experiences without requiring any coding knowledge.
+The editor is where you build your form. It shows the whole form as one document: every question in order, with groups as sections. You edit a question right where it sits in the form, on a computer, a tablet or a phone.
 
-## Workbench Layout
+## Layout
 
-The Workbench is divided into several key areas:
+1. **Top bar** - The form's name and menu, Draft or Live, the form's pages (Editor, Settings, Integrations, Submissions), the save status, Preview and Publish
+2. **Outline** - A short list of all questions and groups to jump to one. On wide screens it sits on the left; on smaller screens the **Outline** button opens it as a panel. See [Outline](./storyboard.md)
+3. **Document** - Your questions in the order people answer them
 
-1. **Main Workbench Area** - The central area where you can see and interact with the currently selected form block
-2. **Sidebar** - Contains a list of all form blocks and tools for adding new blocks
-3. **Top Navigation** - Access to form settings, preview, and publishing options
+## Reading the document
 
-## Working with Blocks
+Each question shows:
 
-The building blocks of your form are called "blocks." Each block represents a question, content, or interaction in your form:
+-   Its number and an icon for its answer type
+-   Its text, on up to two lines
+-   A line below with the answer type, the number of choices, **Required**, the number of rules, **Hidden**, and its identifier if you gave it one
 
-1. **Adding Blocks** - Click the "+" button at the bottom of any block to add a new block below it
-2. **Selecting Blocks** - Click on any block in the sidebar to select it and edit its properties in the main workbench area
-3. **Rearranging Blocks** - Drag and drop blocks in the sidebar to reorder them in your form
-4. **Deleting Blocks** - Select a block and click the trash icon to remove it
+Groups show their name with their questions inside. An empty group says how to add a question to it.
 
-## Block Configuration
+## Editing a question
 
-When you select a block, you can configure its properties in the main workbench area:
+Click a question, or move to it with Tab and press Enter, to open it in place. The open question shows:
 
-1. **Block Type** - Choose the type of interaction (text, multiple choice, etc.)
-2. **Question Text** - The main prompt or question for the user
-3. **Description** - Optional additional information about the question
-4. **Required Setting** - Toggle whether the user must complete this block
-5. **Advanced Settings** - Access additional options specific to each block type
+1. **Text** - The question with a toolbar for bold, links, images, headings, lists and more
+2. **Choices** - For multiple choice and checkboxes. Each row has a grip to drag it and a delete button. Alt+Up and Alt+Down move a choice
+3. **Answer type** - Change what kind of answer the question takes
+4. **Required** - Whether people must answer it
+5. **Settings** - The settings of this answer type, the identifier and **Hide this question**. On a phone they open as a sheet from the bottom
+6. **Rules** - Logic rules for this question, see [Conditional Logic](./conditional-logic.md)
+7. **Menu (…)** - Duplicate, Add question below, Move up, Move down, Copy question ID and Delete
 
-## Preview Mode
+Press Escape to close the question. A link with `?block=` opens that question and scrolls it into view.
 
-To see how your form will appear to users:
+## Adding, moving and deleting
 
-1. Click the "Preview" button in the top navigation
-2. A new browser tab will open showing your form as users will see it
-3. Navigate through your form as a user would
-4. Test interactions, conditional logic, and overall flow
-5. Close the preview tab to return to the Workbench
+-   **Add** - Use **Add question** or **Add group** at the end of the form, or **Add question below** in a question's menu
+-   **Duplicate** - The copy goes right below the question and opens
+-   **Move** - Drag a question by its grip; the page scrolls when you drag near its edge. With the keyboard, press Alt+Up or Alt+Down. On touch screens, use **Move up** and **Move down** in the menu. A screen reader hears the new position, for example "Moved to position 3 of 34"
+-   **Delete** - The editor asks first. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working
 
-## Auto-Save
+## Preview
 
-Input automatically saves your work as you make changes, so you never have to worry about losing progress. The saving status is indicated in the top navigation bar.
+Click **Preview** in the top bar to open your form in a new tab, as people will see it. Test the questions, the rules and the flow, then close the tab to return to the editor.
+
+## Saving
+
+Every change saves on its own. The top bar shows "Saving…", then "Saved" for a moment. When a change can't be saved, it says "Not saved" and offers **Retry**. On smaller screens only the icon shows.
 
 ## Published vs. Unpublished Forms
 
@@ -50,6 +54,6 @@ Forms in Input can be either published or unpublished:
 - **Published** - The form is visible to the public and can receive submissions
 - **Unpublished** - The form is only visible to you and team members with access
 
-When you make changes to a form in the Workbench, these changes are saved immediately. If the form is published, these changes will be visible to users right away. There is no separate draft state - any changes you make to a published form will be live immediately.
+When you make changes to a form in the editor, these changes are saved immediately. If the form is published, these changes will be visible to users right away. There is no separate draft state - any changes you make to a published form will be live immediately.
 
-You can toggle a form between published and unpublished states using the publish/unpublish controls in the form settings.
\ No newline at end of file
+Use **Publish** in the top bar to publish a form. Once it is live, **Share** has its link, Open form and Unpublish.

From fd0536e04980b7a3df9daf39ff5cddf6d124763b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:11:07 +0200
Subject: [PATCH 05/12] fix: leave Retry to the red save bar on phones and
 tablets

Under 1024 px the top bar showed "Retry" next to the warning icon and
squeezed the form's name to one letter. The red bar above has Retry
and stays while a save failed, so the top bar keeps only the icon.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Shared/SaveStatus.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Shared/SaveStatus.vue b/resources/js/components/Factory/Shared/SaveStatus.vue
index 0d3ff5ac..caadf0d7 100644
--- a/resources/js/components/Factory/Shared/SaveStatus.vue
+++ b/resources/js/components/Factory/Shared/SaveStatus.vue
@@ -1,5 +1,6 @@
 <template>
-  <!-- sits in the dark top bar; under xl only the icons show, as in the board -->
+  <!-- sits in the dark top bar; under xl only the icons show, as in the board.
+    Under lg the red save bar has Retry and stays while a save failed -->
   <div class="flex items-center justify-end gap-1 text-xs text-grey-400">
     <p role="status" aria-live="polite" class="flex items-center gap-1.5">
       <template v-if="shown === 'saving'">
@@ -55,7 +56,7 @@
     <button
       v-if="shown === 'failed' && notice.canRetry"
       type="button"
-      class="h-11 rounded px-2 font-medium text-blue-300 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-6 lg:px-1"
+      class="hidden h-6 rounded px-1 font-medium text-blue-300 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:block"
       @click="notice.retrySaves()"
     >
       Retry

From 4c262ff0e79ae6d7fc1c534f83c93dafb700fae7 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:13:19 +0200
Subject: [PATCH 06/12] docs: add duplicating a question to the changelog line
 (#277)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 80654d07..20b452f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,7 +23,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The form list loads faster when a team has many forms. It now needs the same few database queries for one form or a hundred. Before, every form added 3 queries. (#256)
 -   On screens narrower than 1280 px, a form's editor bar now sits in two rows under the app header: the form with Dashboard and Preview, then Editor, Settings, Integrations and Submissions as tabs. Nothing in it scrolls sideways any more, and the header keeps the logo and your team name. On every screen, keyboard focus in the editor bar and the account menu now shows a blue ring. (#257)
 -   A form's pages have one top bar instead of two: the form's name with its menu, a Draft or Live label, the pages, Preview, Publish and your account. Publish first checks for questions without text, rules that point to a deleted question and a missing privacy link. Once the form is live, Share has its link, Open form and Unpublish. On a phone the pages sit in a tab bar at the bottom. (#265)
--   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. Move a question with Alt+Up/Down, with Move up and Move down in its menu, or by dragging. (#268, #272, #275)
+-   The form editor shows your whole form as one column. Each question shows its number, answer type, text, and if it is required, has rules or is hidden. The question you work on opens right there, also on a phone, where you couldn't edit questions before. Hiding a question, random order and custom answers are now under the question's Settings. An outline next to the form jumps to any question, and on a phone a question's Settings open from the bottom of the screen. Move a question with Alt+Up/Down, with Move up and Move down in its menu, or by dragging. Duplicate in a question's menu puts a copy right below it. (#268, #272, #275, #277)
 -   Deleting a question, a group, an answer choice, a consent policy or a logic rule in the form editor now asks first in the app's own dialog. It names the question, how many answers will be deleted with it, and the questions whose rules will stop working. A choice nobody picked, or a policy nobody agreed to, is still deleted at once. (#269)
 
 ### Fixed

From 76aee729003b9a496b6d6cf4243e35de6ce604dd Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:34:26 +0200
Subject: [PATCH 07/12] fix: keep the save status width so the top bar doesn't
 move on each save

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Shared/SaveStatus.test.ts         | 19 +++++++++++++++++++
 .../components/Factory/Shared/SaveStatus.vue  |  8 +++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Shared/SaveStatus.test.ts b/resources/js/components/Factory/Shared/SaveStatus.test.ts
index acbf6d3b..8046b52c 100644
--- a/resources/js/components/Factory/Shared/SaveStatus.test.ts
+++ b/resources/js/components/Factory/Shared/SaveStatus.test.ts
@@ -48,6 +48,25 @@ describe("save status", () => {
         expect(useNotice().retrySaves).toHaveBeenCalled();
     });
 
+    it("keeps its width in every state, so the top bar doesn't move", async () => {
+        const states: [string, object][] = [
+            ["", {}],
+            ["Saving…", { runningSaves: 1 }],
+            ["Saved", { runningSaves: 0 }],
+            ["Not saved", { failedSaves: { "saveBlock:1": "Not saved." } }],
+        ];
+
+        for (const [text, state] of states) {
+            useNotice().$patch(state);
+            await wrapper.vm.$nextTick();
+
+            expect(live().text()).toBe(text);
+            expect(live().classes()).toEqual(
+                expect.arrayContaining(["min-w-3.5", "xl:min-w-[4.25rem]"]),
+            );
+        }
+    });
+
     it("shows no Saved after a failed save", async () => {
         useNotice().$patch({ runningSaves: 1 });
         await wrapper.vm.$nextTick();
diff --git a/resources/js/components/Factory/Shared/SaveStatus.vue b/resources/js/components/Factory/Shared/SaveStatus.vue
index caadf0d7..75b58849 100644
--- a/resources/js/components/Factory/Shared/SaveStatus.vue
+++ b/resources/js/components/Factory/Shared/SaveStatus.vue
@@ -2,7 +2,13 @@
   <!-- sits in the dark top bar; under xl only the icons show, as in the board.
     Under lg the red save bar has Retry and stays while a save failed -->
   <div class="flex items-center justify-end gap-1 text-xs text-grey-400">
-    <p role="status" aria-live="polite" class="flex items-center gap-1.5">
+    <!-- keeps its width while empty, so the top bar doesn't move on each save:
+      the icon under xl, "Saving…" from xl -->
+    <p
+      role="status"
+      aria-live="polite"
+      class="flex min-w-3.5 items-center justify-end gap-1.5 xl:min-w-[4.25rem]"
+    >
       <template v-if="shown === 'saving'">
         <svg
           aria-hidden="true"

From 936115b74174f7e872ce08f087c75b2d71672f81 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:34:44 +0200
Subject: [PATCH 08/12] feat: name the save status in a tooltip when only its
 icon shows

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Shared/SaveStatus.test.ts      | 2 ++
 resources/js/components/Factory/Shared/SaveStatus.vue    | 9 +++++++++
 2 files changed, 11 insertions(+)

diff --git a/resources/js/components/Factory/Shared/SaveStatus.test.ts b/resources/js/components/Factory/Shared/SaveStatus.test.ts
index 8046b52c..ce373e30 100644
--- a/resources/js/components/Factory/Shared/SaveStatus.test.ts
+++ b/resources/js/components/Factory/Shared/SaveStatus.test.ts
@@ -64,6 +64,8 @@ describe("save status", () => {
             expect(live().classes()).toEqual(
                 expect.arrayContaining(["min-w-3.5", "xl:min-w-[4.25rem]"]),
             );
+            // the tooltip for the icon alone under xl
+            expect(live().attributes("title")).toBe(text || undefined);
         }
     });
 
diff --git a/resources/js/components/Factory/Shared/SaveStatus.vue b/resources/js/components/Factory/Shared/SaveStatus.vue
index 75b58849..e7d8f1e3 100644
--- a/resources/js/components/Factory/Shared/SaveStatus.vue
+++ b/resources/js/components/Factory/Shared/SaveStatus.vue
@@ -8,6 +8,7 @@
       role="status"
       aria-live="polite"
       class="flex min-w-3.5 items-center justify-end gap-1.5 xl:min-w-[4.25rem]"
+      :title="words[shown]"
     >
       <template v-if="shown === 'saving'">
         <svg
@@ -95,4 +96,12 @@ watch(
 onBeforeUnmount(() => clearTimeout(timer));
 
 const shown = computed(() => (justSaved.value ? "saved" : notice.saveStatus));
+
+// a tooltip for the icon alone under xl
+const words: Record<typeof shown.value, string | undefined> = {
+  saving: "Saving…",
+  saved: "Saved",
+  failed: "Not saved",
+  idle: undefined,
+};
 </script>

From 7bef7abb4a4098aa6fccf6d4fafa5e2f7c7d0728 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:35:36 +0200
Subject: [PATCH 09/12] fix: put the cursor at the end of a question's text
 when it opens

A copy from Duplicate opened with the cursor before its text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts      | 18 ++++++++++++++++++
 .../Factory/Document/QuestionCard.vue          |  3 ++-
 .../js/components/Factory/Shared/Editor.vue    |  6 ++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index 66914e25..78ce0fc9 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -2,6 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import QuestionCard from "./QuestionCard.vue";
+import { cursorFor } from "./blockFocus";
 
 const block = {
     id: 4,
@@ -151,4 +152,21 @@ describe("an open question", () => {
         ).toBe(true);
         expect(document.activeElement).toBe(settingsButton().element);
     });
+
+    it("puts the cursor at the end of its text, e.g. in a copy", async () => {
+        // jsdom has no layout, and the editor scrolls to the cursor
+        Range.prototype.getClientRects = () => [] as unknown as DOMRectList;
+        Range.prototype.getBoundingClientRect = () => new DOMRect();
+        cursorFor.value = "q4";
+        mountCard(false, { ...stubs, Editor: false });
+
+        await vi.waitFor(() =>
+            expect(document.activeElement?.getAttribute("role")).toBe(
+                "textbox",
+            ),
+        );
+        const selection = document.getSelection()!;
+        expect(selection.anchorNode?.textContent).toBe("Your name?");
+        expect(selection.anchorOffset).toBe("Your name?".length);
+    });
 });
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index a81c38ef..34d61918 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -175,7 +175,8 @@ watch(type, (value) => {
 const takeCursor = () => {
   if (cursorFor.value === props.block.uuid) {
     cursorFor.value = null;
-    editor.value?.focus();
+    // at the end, so typing adds to the text, e.g. in a copy
+    editor.value?.focus("end");
   }
 };
 
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index e0660f38..d60d7874 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useEditor, EditorContent } from "@tiptap/vue-3";
+import { useEditor, EditorContent, type FocusPosition } from "@tiptap/vue-3";
 import StarterKit from "@tiptap/starter-kit";
 import Image from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
@@ -203,7 +203,9 @@ const editor = useEditor({
 });
 
 // a label's for= can't focus a contenteditable, so its page calls this
-defineExpose({ focus: () => editor.value?.commands.focus() });
+defineExpose({
+  focus: (at?: FocusPosition) => editor.value?.commands.focus(at),
+});
 
 const setLink = () => {
   if (typeof editor.value === "undefined") {

From 70e2ae5abf5b1f60cb9eafba7ea59af4c24c176d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:35:59 +0200
Subject: [PATCH 10/12] fix: name a question by its number in the delete dialog

A copy from Duplicate has the same text, so the text alone can't tell
the two apart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Shared/DeleteBlockDialog.vue |  9 ++++++---
 .../js/components/Factory/Shared/DeleteDialogs.test.ts | 10 +++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/Factory/Shared/DeleteBlockDialog.vue b/resources/js/components/Factory/Shared/DeleteBlockDialog.vue
index 309a671c..f27ebd42 100644
--- a/resources/js/components/Factory/Shared/DeleteBlockDialog.vue
+++ b/resources/js/components/Factory/Shared/DeleteBlockDialog.vue
@@ -72,9 +72,12 @@ const text = computed(() => {
 
   const plain = getTextFromHtml(props.block.message ?? "").trim();
   const short = plain.length > 80 ? `${plain.slice(0, 78).trim()}…` : plain;
-  const name = short
-    ? `“${short}”`
-    : `Question ${numberOf(props.block.uuid) || ""}`.trim();
+  const quoted = short ? `“${short}”` : "";
+  const number = numberOf(props.block.uuid);
+  // the number first: a copy from Duplicate has the same text
+  const name = number
+    ? `Question ${number}${quoted ? ` (${quoted})` : ""}`
+    : quoted || "The question";
   const answers = props.check?.answers;
   // unknown when the counts couldn't load: there may still be answers
   const withAnswers =
diff --git a/resources/js/components/Factory/Shared/DeleteDialogs.test.ts b/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
index ff604c5f..828bcb5a 100644
--- a/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
+++ b/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
@@ -144,14 +144,14 @@ describe("asking before a delete", () => {
                 global: { plugins: [pinia], stubs },
             });
 
-        it("names the question, its answers and the questions whose rules stop working", async () => {
+        it("names the question by number and text, its answers and the questions whose rules stop working", async () => {
             const wrapper = await open("q1");
 
             expect(wrapper.find("[role=alertdialog]").text()).toContain(
                 "Delete question?",
             );
             expect(wrapper.text()).toContain(
-                "“Will you come to the meetup?” and its 40 answers will be deleted. This can't be undone.",
+                "Question 1 (“Will you come to the meetup?”) and its 40 answers will be deleted. This can't be undone.",
             );
             expect(wrapper.text()).toContain(
                 "2 rules use this question and will stop working: question 3, group “Food and drinks”.",
@@ -165,7 +165,7 @@ describe("asking before a delete", () => {
             const wrapper = await open("q2");
 
             expect(wrapper.text()).toContain(
-                "“Any allergies?” will be deleted. This can't be undone.",
+                "Question 2 (“Any allergies?”) will be deleted. This can't be undone.",
             );
             expect(wrapper.text()).toContain(
                 "1 rule uses this question and will stop working: question 3.",
@@ -187,7 +187,7 @@ describe("asking before a delete", () => {
             });
 
             expect(wrapper.text()).toContain(
-                "“Will you come to the meetup?” and its 1 answer will be deleted.",
+                "Question 1 (“Will you come to the meetup?”) and its 1 answer will be deleted.",
             );
             expect(wrapper.text()).not.toContain("rule");
         });
@@ -202,7 +202,7 @@ describe("asking before a delete", () => {
             });
 
             expect(wrapper.text()).toContain(
-                "“Will you come to the meetup?” and its answers will be deleted. This can't be undone.",
+                "Question 1 (“Will you come to the meetup?”) and its answers will be deleted. This can't be undone.",
             );
         });
 

From c3a81812fc75a561e11548b5901ebb3d58b9edcc Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:36:39 +0200
Subject: [PATCH 11/12] fix: say a question couldn't be duplicated when the
 copy fails

It said "Your change to question N wasn't saved", but Duplicate isn't a
change to that question.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/stores/form.test.ts | 14 ++++++++++++++
 resources/js/stores/form.ts      |  1 +
 resources/js/stores/notice.ts    | 20 +++++++++++++-------
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/resources/js/stores/form.test.ts b/resources/js/stores/form.test.ts
index b804e262..5b2fcf3f 100644
--- a/resources/js/stores/form.test.ts
+++ b/resources/js/stores/form.test.ts
@@ -6,6 +6,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { createApp } from "vue";
 import handler from "@/api/handler";
 import { useForm, useWorkbench } from "@/stores";
+import { useNotice } from "./notice";
 
 vi.mock("@/api/handler", () => ({ default: { get: vi.fn(), post: vi.fn() } }));
 
@@ -182,4 +183,17 @@ describe("duplicating a question", () => {
 
         expect(posted).toEqual(["api.blocks.update", "api.blocks.duplicate"]);
     });
+
+    it("says the question couldn't be duplicated when the copy fails", async () => {
+        vi.mocked(handler.post).mockRejectedValue(
+            new AxiosError("Network Error", "ERR_NETWORK"),
+        );
+
+        await useForm().duplicateFormBlock(useForm().blocks![1]);
+
+        expect(useNotice().message).toBe(
+            "Question 2 (“Hi”) couldn't be duplicated. Check your connection and try again.",
+        );
+        expect(useForm().blocks).toHaveLength(3);
+    });
 });
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index f1335395..200b7657 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -257,6 +257,7 @@ export const useForm = defineStore("form", {
                 `duplicateFormBlock:${block.id}`,
                 request,
                 block,
+                "duplicated",
             );
         },
 
diff --git a/resources/js/stores/notice.ts b/resources/js/stores/notice.ts
index 80a38a05..04ae4505 100644
--- a/resources/js/stores/notice.ts
+++ b/resources/js/stores/notice.ts
@@ -74,11 +74,13 @@ export const useNotice = defineStore("notice", {
             this.waitingSaves[save] = true;
         },
 
-        // runs a save, and keeps it to send again if it fails
+        // runs a save, and keeps it to send again if it fails. A failed
+        // change "wasn't saved"; an action says what else failed, e.g. "duplicated"
         async send<T>(
             save: string,
             request: () => Promise<T>,
             block?: FormBlockModel | null,
+            action?: string,
         ): Promise<T | undefined> {
             delete this.waitingSaves[save];
             this.runningSaves++;
@@ -89,8 +91,9 @@ export const useNotice = defineStore("notice", {
 
                 return result;
             } catch (error) {
-                this.showSaveError(error, save, block);
-                this.retries[save] = () => this.send(save, request, block);
+                this.showSaveError(error, save, block, action);
+                this.retries[save] = () =>
+                    this.send(save, request, block, action);
             } finally {
                 this.runningSaves--;
             }
@@ -108,9 +111,12 @@ export const useNotice = defineStore("notice", {
             error: unknown,
             save: string,
             block?: FormBlockModel | null,
+            action?: string,
         ) {
             const name = block ? questionName(block) : "";
-            const change = name ? `Your change to ${name}` : "Your change";
+            const failed = action
+                ? `${name.charAt(0).toUpperCase()}${name.slice(1)} couldn't be ${action}`
+                : `Your change${name ? ` to ${name}` : ""} wasn't saved`;
             const response =
                 error instanceof AxiosError ? error.response : undefined;
 
@@ -120,17 +126,17 @@ export const useNotice = defineStore("notice", {
 
             if (response?.status === 401 || response?.status === 419) {
                 this.failedSaves[save] =
-                    `${change} wasn't saved: your session has expired. Reload the page and try again.`;
+                    `${failed}: your session has expired. Reload the page and try again.`;
             } else if (
                 response &&
                 response.status < 500 &&
                 response.data?.message
             ) {
                 this.failedSaves[save] =
-                    `${change} wasn't saved: ${response.data.message}`;
+                    `${failed}: ${response.data.message}`;
             } else {
                 this.failedSaves[save] =
-                    `${change} wasn't saved. Check your connection and try again.`;
+                    `${failed}. Check your connection and try again.`;
             }
         },
 

From e859a308071e80ea3d8b2a4d8d3f6f2a1fa31075 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:44:58 +0200
Subject: [PATCH 12/12] fix: say a question couldn't be deleted when the delete
 fails

It said "Your change to question N wasn't saved", but Delete isn't a
change to that question.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/stores/form.test.ts | 28 +++++++++++++++++++++++++++-
 resources/js/stores/form.ts      |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/resources/js/stores/form.test.ts b/resources/js/stores/form.test.ts
index 5b2fcf3f..1ed52d70 100644
--- a/resources/js/stores/form.test.ts
+++ b/resources/js/stores/form.test.ts
@@ -8,7 +8,9 @@ import handler from "@/api/handler";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "./notice";
 
-vi.mock("@/api/handler", () => ({ default: { get: vi.fn(), post: vi.fn() } }));
+vi.mock("@/api/handler", () => ({
+    default: { get: vi.fn(), post: vi.fn(), delete: vi.fn() },
+}));
 
 const saved = {
     uuid: "form1",
@@ -197,3 +199,27 @@ describe("duplicating a question", () => {
         expect(useForm().blocks).toHaveLength(3);
     });
 });
+
+describe("deleting a question", () => {
+    beforeEach(() => {
+        setActivePinia(createPinia());
+        useForm().form = { ...saved };
+        useForm().blocks = [
+            { id: 1, uuid: "q1", type: "radio", message: "<p>Hi</p>" },
+            { id: 2, uuid: "q2", type: "radio", message: "<p>Bye</p>" },
+        ] as FormBlockModel[];
+    });
+
+    it("says the question couldn't be deleted when the delete fails", async () => {
+        vi.mocked(handler.delete).mockRejectedValue(
+            new AxiosError("Network Error", "ERR_NETWORK"),
+        );
+
+        await useForm().deleteFormBlock(useForm().blocks![1]);
+
+        expect(useNotice().message).toBe(
+            "Question 2 (“Bye”) couldn't be deleted. Check your connection and try again.",
+        );
+        expect(useForm().blocks).toHaveLength(2);
+    });
+});
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index 200b7657..4883399a 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -293,7 +293,7 @@ export const useForm = defineStore("form", {
                 }
             };
 
-            await useNotice().send(save, request, block);
+            await useNotice().send(save, request, block, "deleted");
         },
 
         async updateFormBlockProperty(