From e9005ee33ab573061f3b6071bfb47d9a6e982ea8 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:04:39 +0200
Subject: [PATCH 001/153] feat: edit the whole form as one document

The question list and the workbench become one column. Each question is a
compact row (number, type icon, text on up to 2 lines, a meta line with
Required, rules, Hidden and the identifier), groups are sections. The open
question is a card in place: text with its format toolbar, choices, then
answer type, Required, Settings (this type's settings inline), Rules and a
menu. A new question opens with the cursor in its text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.vue             |  12 +-
 resources/js/components/AdvancedSettings.vue  |  23 ---
 .../components/Factory/Document/BlockMenu.vue |  99 +++++++++++++
 .../Factory/Document/DocumentGroup.vue        | 109 ++++++++++++++
 .../Factory/Document/DocumentList.vue         |  64 ++++++++
 .../Factory/Document/DocumentQuestion.vue     | 110 ++++++++++++++
 .../Factory/Document/FormDocument.vue         |  86 +++++++++++
 .../Factory/Document/QuestionCard.vue         | 123 ++++++++++++++++
 .../Factory/Document/QuestionSettings.vue     |  91 ++++++++++++
 .../Factory/Document/questionSummary.test.ts  |  38 +++++
 .../Factory/Document/questionSummary.ts       |  32 ++++
 .../Factory/Document/useAddBlock.ts           |  25 ++++
 .../Factory/Main/BlockInteractions.vue        |  26 ----
 .../components/Factory/Main/BlockMessage.vue  |  22 ---
 .../Factory/Main/BlockMetaHeader.vue          |  34 -----
 .../js/components/Factory/Main/BlockType.vue  |  65 ---------
 .../Factory/Main/ConfigureClicks.vue          |  19 +--
 .../Factory/Main/ConfigureConsents.vue        |   2 +-
 .../components/Factory/Main/GroupSettings.vue |  24 ---
 .../js/components/Factory/Main/Workbench.vue  |  33 -----
 .../Factory/Main/WorkbenchEmpty.vue           |  34 -----
 .../js/components/Factory/Sidebar/Block.vue   | 119 ---------------
 .../Factory/Sidebar/BlockContainer.vue        | 104 -------------
 .../Factory/Sidebar/BlockFooter.vue           |  89 -----------
 .../Factory/Sidebar/BlockInteraction.test.ts  |  20 ---
 .../Factory/Sidebar/BlockInteraction.vue      |  33 -----
 .../Factory/Sidebar/BlockLogicVisualizer.vue  |  79 ----------
 .../Factory/Sidebar/ConsentBlockMessage.vue   |  11 --
 .../Factory/Sidebar/DefaultBlockMessage.vue   |  14 --
 .../js/components/Factory/Sidebar/Group.vue   | 127 ----------------
 .../Factory/Sidebar/InsertAfterButton.vue     |  21 ---
 .../components/Factory/Sidebar/Storyboard.vue | 138 ------------------
 .../js/components/Factory/sanitize.test.ts    |  51 ++++---
 resources/js/stores/form.ts                   |   8 +
 resources/js/utils/useActiveCard.ts           |  15 --
 35 files changed, 820 insertions(+), 1080 deletions(-)
 delete mode 100644 resources/js/components/AdvancedSettings.vue
 create mode 100644 resources/js/components/Factory/Document/BlockMenu.vue
 create mode 100644 resources/js/components/Factory/Document/DocumentGroup.vue
 create mode 100644 resources/js/components/Factory/Document/DocumentList.vue
 create mode 100644 resources/js/components/Factory/Document/DocumentQuestion.vue
 create mode 100644 resources/js/components/Factory/Document/FormDocument.vue
 create mode 100644 resources/js/components/Factory/Document/QuestionCard.vue
 create mode 100644 resources/js/components/Factory/Document/QuestionSettings.vue
 create mode 100644 resources/js/components/Factory/Document/questionSummary.test.ts
 create mode 100644 resources/js/components/Factory/Document/questionSummary.ts
 create mode 100644 resources/js/components/Factory/Document/useAddBlock.ts
 delete mode 100644 resources/js/components/Factory/Main/BlockInteractions.vue
 delete mode 100644 resources/js/components/Factory/Main/BlockMessage.vue
 delete mode 100644 resources/js/components/Factory/Main/BlockMetaHeader.vue
 delete mode 100644 resources/js/components/Factory/Main/BlockType.vue
 delete mode 100644 resources/js/components/Factory/Main/GroupSettings.vue
 delete mode 100644 resources/js/components/Factory/Main/Workbench.vue
 delete mode 100644 resources/js/components/Factory/Main/WorkbenchEmpty.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/Block.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockContainer.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockFooter.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockInteraction.test.ts
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockInteraction.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/ConsentBlockMessage.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/DefaultBlockMessage.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/Group.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/InsertAfterButton.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/Storyboard.vue
 delete mode 100644 resources/js/utils/useActiveCard.ts

diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 35004bde..38120b96 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -1,20 +1,12 @@
 <template>
   <app-layout title="Edit Form" limit-height>
-    <div class="flex w-full">
-      <Storyboard />
-      <div class="w-full overflow-y-auto">
-        <Workbench v-if="workbench.block" :key="workbench.block.id" />
-        <WorkbenchEmpty v-else />
-      </div>
-    </div>
+    <FormDocument />
   </app-layout>
 </template>
 
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
-import Storyboard from "@/components/Factory/Sidebar/Storyboard.vue";
-import Workbench from "@/components/Factory/Main/Workbench.vue";
-import WorkbenchEmpty from "@/components/Factory/Main/WorkbenchEmpty.vue";
+import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
 import { onBeforeUnmount, onMounted } from "vue";
 
diff --git a/resources/js/components/AdvancedSettings.vue b/resources/js/components/AdvancedSettings.vue
deleted file mode 100644
index db5d9cc2..00000000
--- a/resources/js/components/AdvancedSettings.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div>
-    <button class="text-xs font-medium text-grey-800" @click="open = !open">
-      {{ title }}
-      <D9Icon size="xs" :name="open ? 'chevron-down' : 'chevron-right'" />
-    </button>
-
-    <div class="mt-4" v-show="open">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { D9Icon } from "@deck9/ui";
-import { ref } from "vue";
-
-defineProps<{
-  title: string;
-}>();
-
-const open = ref(false);
-</script>
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
new file mode 100644
index 00000000..d4c9ed2e
--- /dev/null
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -0,0 +1,99 @@
+<template>
+  <D9Menu
+    position="left"
+    :use-portal="true"
+    class="[&>button:focus-visible]:ring-2 [&>button:focus-visible]:ring-blue-500 [&>button]:rounded-md"
+  >
+    <template #button>
+      <span
+        class="grid h-9 w-9 place-items-center rounded-md border border-grey-300 bg-white text-grey-700 hover:bg-grey-100"
+      >
+        <D9Icon name="ellipsis-h" />
+        <span class="sr-only">{{ label }}</span>
+      </span>
+    </template>
+
+    <D9MenuLink
+      v-if="isGroup"
+      as="button"
+      :class="item"
+      label="Add question to this group"
+      @click="emit('addToGroup')"
+    />
+    <D9MenuLink
+      v-else
+      as="button"
+      :class="item"
+      label="Add question below"
+      @click="addBlock(block)"
+    />
+    <D9MenuLink
+      v-if="isGroup"
+      as="button"
+      :class="item"
+      :label="block.is_disabled ? 'Show group' : 'Hide group'"
+      @click="toggleHidden"
+    />
+    <D9MenuLink
+      as="button"
+      :class="item"
+      :label="isGroup ? 'Copy group ID' : 'Copy question ID'"
+      @click="copy(block.uuid)"
+    />
+    <D9MenuLink
+      as="button"
+      :class="[item, 'text-red-700']"
+      :label="isGroup ? 'Delete group…' : 'Delete…'"
+      @click="deleteBlock"
+    />
+  </D9Menu>
+</template>
+
+<script setup lang="ts">
+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 "./useAddBlock";
+
+const props = defineProps<{
+  block: FormBlockModel;
+  label: string;
+}>();
+
+const emit = defineEmits<{ addToGroup: [] }>();
+
+const store = useForm();
+const workbench = useWorkbench();
+const { addBlock } = useAddBlock();
+
+const item = "w-full text-left text-sm";
+const isGroup = computed(() => props.block.type === "group");
+
+// the open block saves through the workbench: a store save swaps its object, and its next save would send the old value
+const toggleHidden = () => {
+  const hidden = !props.block.is_disabled;
+
+  if (workbench.block?.id === props.block.id) {
+    workbench.updateBlock({ is_disabled: hidden });
+  } else {
+    store.updateFormBlockProperty(props.block, "is_disabled", hidden);
+  }
+};
+
+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?";
+
+  if (!window.confirm(question)) {
+    return;
+  }
+
+  store.deleteFormBlock(props.block);
+
+  if (workbench.block?.id === props.block.id) {
+    workbench.clearWorkbench();
+  }
+};
+</script>
diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
new file mode 100644
index 00000000..e7d8c5eb
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -0,0 +1,109 @@
+<template>
+  <section
+    :aria-labelledby="`${id}-label`"
+    class="rounded-lg border border-grey-200 bg-grey-50 py-2 pr-2"
+    :class="isOpen && 'ring-1 ring-blue-500'"
+  >
+    <div class="flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3">
+      <D9Icon name="layer-group" aria-hidden="true" class="text-grey-600" />
+      <label :id="`${id}-label`" :for="`${id}-name`" class="sr-only"
+        >Group name</label
+      >
+      <input
+        :id="`${id}-name`"
+        v-model="name"
+        type="text"
+        placeholder="Group"
+        title="Use a group to show or hide several questions with one rule."
+        class="h-9 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-sm font-semibold text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
+      />
+      <span v-if="group.is_disabled" class="text-xs text-grey-600">Hidden</span>
+      <button
+        type="button"
+        class="flex h-9 items-center rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        @click="logic.showLogicEditor(group)"
+      >
+        Rules<span v-if="group.logics?.length" class="tabular-nums"
+          >&nbsp;({{ group.logics.length }})</span
+        >
+      </button>
+      <BlockMenu
+        :block="group"
+        :label="`Options for group ${group.title || 'Group'}`"
+        @add-to-group="addQuestion"
+      />
+    </div>
+
+    <div class="relative">
+      <DocumentList
+        :group-id="group.uuid"
+        :numbers="numbers"
+        :class="isEmpty && 'min-h-16'"
+      />
+      <div
+        v-if="isEmpty"
+        class="pointer-events-none absolute inset-0 ml-12 grid place-items-center rounded-md border-2 border-dashed border-grey-300 px-3 text-center text-sm text-grey-600"
+      >
+        <p>
+          Drag questions here, or
+          <button
+            type="button"
+            class="pointer-events-auto rounded font-semibold text-blue-700 underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            @click="addQuestion"
+          >
+            add a question</button
+          >.
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { D9Icon } from "@deck9/ui";
+import { useForm, useLogic, useWorkbench } from "@/stores";
+import BlockMenu from "./BlockMenu.vue";
+import DocumentList from "./DocumentList.vue";
+import { useAddBlock } from "./useAddBlock";
+
+const props = defineProps<{
+  group: FormBlockModel;
+  numbers: Record<string, number>;
+}>();
+
+const store = useForm();
+const workbench = useWorkbench();
+const logic = useLogic();
+const { addBlock } = useAddBlock();
+
+const id = computed(() => `group-${props.group.uuid}`);
+const isOpen = computed(() => workbench.block?.id === props.group.id);
+const children = computed(() =>
+  (store.blocks ?? []).filter(
+    (block) => block.parent_block === props.group.uuid,
+  ),
+);
+const isEmpty = computed(() => children.value.length === 0);
+
+const name = ref(props.group.title ?? "");
+
+// the name saves like any open block, so typing opens the group
+watch(name, (value) => {
+  if (!isOpen.value) {
+    workbench.putOnWorkbench(props.group);
+  }
+
+  workbench.updateBlock({ title: value });
+});
+
+const addQuestion = () => {
+  const last = children.value.at(-1);
+
+  if (last) {
+    addBlock(last);
+  } else {
+    addBlock(null, null, props.group.uuid);
+  }
+};
+</script>
diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
new file mode 100644
index 00000000..5c7f9ba9
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -0,0 +1,64 @@
+<template>
+  <Container
+    :data-group="groupId"
+    group-name="document"
+    lock-axis="y"
+    orientation="vertical"
+    drag-handle-selector=".document-grip"
+    :get-child-payload="getChildPayload"
+    :should-accept-drop="shouldAcceptDrop"
+    :drop-placeholder="{
+      animationDuration: 150,
+      showOnTop: false,
+      className: 'cards-drop-preview',
+    }"
+    @drop="onDrop"
+  >
+    <Draggable v-for="block in blocks" :key="block.uuid">
+      <div class="pb-2">
+        <DocumentGroup
+          v-if="block.type === 'group'"
+          :group="block"
+          :numbers="numbers"
+        />
+        <DocumentQuestion v-else :block="block" :number="numbers[block.uuid]" />
+      </div>
+    </Draggable>
+  </Container>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Container, Draggable } from "vue3-smooth-dnd";
+import { useForm } from "@/stores";
+import DocumentGroup from "./DocumentGroup.vue";
+import DocumentQuestion from "./DocumentQuestion.vue";
+
+const props = defineProps<{
+  groupId?: string;
+  numbers: Record<string, number>;
+}>();
+
+const store = useForm();
+
+const blocks = computed(() =>
+  (store.blocks ?? []).filter(
+    (block) => (block.parent_block ?? undefined) === props.groupId,
+  ),
+);
+
+const getChildPayload = (index: number) => blocks.value[index];
+
+const shouldAcceptDrop = (source: any, payload?: FormBlockModel) => {
+  if (source.groupName !== "document") return false;
+
+  // a group can't go inside a group
+  return !(props.groupId && payload?.type === "group");
+};
+
+const onDrop = ({ addedIndex, payload }: any): void => {
+  if (addedIndex !== null) {
+    store.changeBlockSequence(props.groupId ?? false, addedIndex, payload);
+  }
+};
+</script>
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
new file mode 100644
index 00000000..b6d13989
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -0,0 +1,110 @@
+<template>
+  <div :id="`row-${block.uuid}`" class="group/question flex items-start">
+    <div class="flex w-12 shrink-0 flex-col items-end gap-1 pr-2 pt-3">
+      <span
+        aria-hidden="true"
+        class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
+        >{{ number }}</span
+      >
+      <span
+        aria-hidden="true"
+        title="Drag to reorder"
+        class="document-grip grid h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
+      >
+        <D9Icon name="grip-vertical" />
+      </span>
+    </div>
+
+    <QuestionCard
+      v-if="isOpen"
+      :block="block"
+      :number="number"
+      :autofocus="openedHere"
+    />
+    <button
+      v-else
+      type="button"
+      class="min-h-14 min-w-0 flex-1 rounded-lg px-3 py-2.5 text-left hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="open"
+    >
+      <span class="flex items-start gap-2">
+        <D9Icon
+          :name="blockType?.icon ?? 'question'"
+          aria-hidden="true"
+          class="mt-1 h-4 w-4 shrink-0 text-grey-500"
+        />
+        <span
+          dir="auto"
+          class="line-clamp-2 break-words text-base"
+          :class="
+            text
+              ? 'font-medium text-grey-900'
+              : 'font-normal italic text-grey-600'
+          "
+          ><span class="sr-only">Question {{ number }}:&nbsp;</span
+          >{{ text || "No question text yet" }}</span
+        >
+      </span>
+      <span class="mt-1 flex flex-wrap gap-x-2 pl-6 text-xs text-grey-600">
+        <span
+          >{{ blockType?.label ?? block.type
+          }}<template v-if="choiceCount !== null">
+            · {{ choiceCount }} {{ choiceCount === 1 ? "choice" : "choices" }}
+          </template></span
+        >
+        <span v-if="block.is_required" class="text-red-700">Required</span>
+        <span v-if="ruleCount" class="tabular-nums"
+          >{{ ruleCount }} {{ ruleCount === 1 ? "rule" : "rules" }}</span
+        >
+        <span v-if="block.is_disabled">Hidden</span>
+        <span v-if="block.title" class="break-all font-mono">{{
+          block.title
+        }}</span>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { D9Icon } from "@deck9/ui";
+import { useWorkbench } from "@/stores";
+import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
+import { plainText } from "./questionSummary";
+import QuestionCard from "./QuestionCard.vue";
+
+const props = defineProps<{
+  block: FormBlockModel;
+  number: number;
+}>();
+
+const workbench = useWorkbench();
+const { types } = useBlockTypes();
+
+const isOpen = computed(() => workbench.block?.id === props.block.id);
+const openedHere = ref(false);
+
+watch(isOpen, (value) => {
+  if (!value) {
+    openedHere.value = false;
+  }
+});
+
+const text = computed(() => plainText(props.block.message));
+const blockType = computed(() =>
+  types.value.find((type) => type.value === props.block.type),
+);
+const choiceCount = computed(() =>
+  ["radio", "checkbox"].includes(props.block.type)
+    ? (props.block.interactions ?? []).filter(
+        (item) => item.type === "button" && item.is_editable,
+      ).length
+    : null,
+);
+const ruleCount = computed(() => props.block.logics?.length ?? 0);
+
+const open = () => {
+  openedHere.value = true;
+  workbench.putOnWorkbench(props.block);
+};
+</script>
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
new file mode 100644
index 00000000..7bc8b322
--- /dev/null
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -0,0 +1,86 @@
+<template>
+  <div id="form-document" class="h-full w-full overflow-y-auto bg-white">
+    <div class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10">
+      <div v-if="!isLoaded" class="flex justify-center py-12">
+        <D9Spinner class="text-blue-300 opacity-50" label="Loading questions" />
+      </div>
+
+      <template v-else>
+        <h1 class="sr-only">Questions</h1>
+        <p class="mb-4 pl-12 text-sm tabular-nums text-grey-600">
+          {{ countLine }}
+        </p>
+
+        <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
+        <EmptyState
+          v-else
+          title="No questions yet"
+          description="Add your first question below."
+        />
+
+        <div class="mt-4 flex flex-wrap gap-2 pl-12">
+          <D9Button
+            label="Add question"
+            color="dark"
+            icon="plus"
+            icon-position="left"
+            @click="addBlock()"
+          />
+          <D9Button
+            label="Add group"
+            color="light"
+            icon="layer-group"
+            icon-position="left"
+            @click="addBlock(null, 'group')"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+  <BlockLogicEditor />
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { D9Button, D9Spinner } from "@deck9/ui";
+import { useForm, useWorkbench } from "@/stores";
+import EmptyState from "@/components/EmptyState.vue";
+import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
+import DocumentList from "./DocumentList.vue";
+import { questionNumbers } from "./questionSummary";
+import { useAddBlock } from "./useAddBlock";
+
+const store = useForm();
+const workbench = useWorkbench();
+const isLoaded = ref(false);
+const { addBlock } = useAddBlock();
+
+const numbers = computed(() => questionNumbers(store.blocks ?? []));
+
+const countLine = computed(() => {
+  const questions = Object.keys(numbers.value).length;
+  const groups = (store.blocks ?? []).filter(
+    (block) => block.type === "group",
+  ).length;
+  const parts = [`${questions} ${questions === 1 ? "question" : "questions"}`];
+
+  if (groups) {
+    parts.push(`${groups} ${groups === 1 ? "group" : "groups"}`);
+  }
+
+  return parts.join(" · ");
+});
+
+onMounted(async () => {
+  await store.getBlocks();
+
+  if (!workbench.block && store.blocks?.length) {
+    const wanted = new URLSearchParams(window.location.search).get("block");
+    const found = store.blocks.find((block) => block.uuid === wanted);
+
+    workbench.putOnWorkbench(found ?? store.blocks[0]);
+  }
+
+  isLoaded.value = true;
+});
+</script>
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
new file mode 100644
index 00000000..adb59563
--- /dev/null
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -0,0 +1,123 @@
+<template>
+  <div
+    class="min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+  >
+    <span :id="`${id}-text-label`" class="sr-only"
+      >Question {{ number }} text</span
+    >
+    <Editor :id="`${id}-text`" ref="editor" v-model="message" counter />
+
+    <ConfigureClicks v-if="interactionType === 'button'" />
+    <ConfigureConsents v-else-if="interactionType === 'consent'" />
+
+    <div
+      class="flex flex-wrap items-center gap-x-4 gap-y-3 border-t border-grey-200 pt-3"
+    >
+      <div class="w-full sm:w-56">
+        <label :for="`${id}-type`" class="sr-only">Answer type</label>
+        <D9Select
+          :id="`${id}-type`"
+          v-model="type"
+          :options="types"
+          placeholder="Answer type"
+        />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <label :for="`${id}-required`" class="text-sm text-grey-700">
+          Required
+        </label>
+        <D9Switch
+          :id="`${id}-required`"
+          v-model="required"
+          label="Required"
+          onLabel="Yes"
+          offLabel="No"
+        />
+      </div>
+
+      <div class="ml-auto flex items-center gap-1">
+        <button
+          type="button"
+          class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          :aria-expanded="settingsOpen"
+          :aria-controls="`${id}-settings`"
+          @click="settingsOpen = !settingsOpen"
+        >
+          Settings
+          <D9Icon
+            name="chevron-down"
+            class="transition-transform"
+            :class="settingsOpen && 'rotate-180'"
+          />
+        </button>
+        <button
+          type="button"
+          class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          @click="logic.showLogicEditor(block)"
+        >
+          Rules<span v-if="block.logics?.length" class="tabular-nums"
+            >&nbsp;({{ block.logics.length }})</span
+          >
+        </button>
+        <BlockMenu :block="block" :label="`Options for question ${number}`" />
+      </div>
+    </div>
+
+    <QuestionSettings
+      v-if="settingsOpen"
+      :id="`${id}-settings`"
+      :block="block"
+      :interaction-type="interactionType"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, provide, ref, watch } from "vue";
+import { D9Icon, D9Select, D9Switch } from "@deck9/ui";
+import { useLogic, useWorkbench } from "@/stores";
+import Editor from "@/components/Factory/Shared/Editor.vue";
+import ConfigureClicks from "@/components/Factory/Main/ConfigureClicks.vue";
+import ConfigureConsents from "@/components/Factory/Main/ConfigureConsents.vue";
+import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
+import BlockMenu from "./BlockMenu.vue";
+import QuestionSettings from "./QuestionSettings.vue";
+
+const props = defineProps<{
+  block: FormBlockModel;
+  number: number;
+  // set when the owner opened it, not when the page opened the first question
+  autofocus?: boolean;
+}>();
+
+// Configure* and IndexItem read the open block from here
+provide("block", props.block);
+
+const workbench = useWorkbench();
+const logic = useLogic();
+const { types } = useBlockTypes();
+
+const id = computed(() => `question-${props.block.uuid}`);
+const interactionType = computed(() => workbench.usesInteractionType);
+
+const editor = ref<InstanceType<typeof Editor> | null>(null);
+const message = ref(props.block.message ?? "");
+const type = ref(types.value.find((item) => item.value === props.block.type));
+const required = ref(props.block.is_required ?? false);
+const settingsOpen = ref(false);
+
+watch(message, (value) => workbench.updateBlock({ message: value }));
+watch(required, (value) => workbench.updateBlock({ is_required: value }));
+watch(type, (value) => {
+  if (value?.value) {
+    workbench.updateBlock({ type: value.value });
+  }
+});
+
+onMounted(() => {
+  if (props.autofocus) {
+    editor.value?.focus();
+  }
+});
+</script>
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
new file mode 100644
index 00000000..0afbb7f7
--- /dev/null
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -0,0 +1,91 @@
+<template>
+  <div
+    role="group"
+    :aria-labelledby="`${id}-title`"
+    class="space-y-6 rounded-md border border-grey-200 bg-grey-50 p-3 sm:p-4"
+  >
+    <h3 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
+      Settings
+    </h3>
+
+    <ConfigureInput v-if="interactionType === 'input'" />
+    <ConfigureTextarea v-else-if="interactionType === 'textarea'" />
+    <ConfigureRange v-else-if="interactionType === 'range'" />
+    <ConfigureDate v-else-if="interactionType === 'date'" />
+    <ConfigureFile v-else-if="interactionType === 'file'" />
+    <template v-else-if="interactionType === 'button'">
+      <RandomizeResponsesSetting />
+      <CustomResponseSettings
+        v-if="
+          editableInteractions?.length &&
+          ['radio', 'checkbox'].includes(block.type)
+        "
+      />
+    </template>
+
+    <div>
+      <label
+        :for="`${id}-identifier`"
+        class="block text-sm font-medium text-grey-900"
+        >Identifier</label
+      >
+      <p :id="`${id}-identifier-help`" class="mb-1 text-xs text-grey-600">
+        This name is used when submitting your form through webhooks and in the
+        export.
+      </p>
+      <D9Input
+        :id="`${id}-identifier`"
+        v-model="title"
+        :aria-describedby="`${id}-identifier-help`"
+        block
+      />
+    </div>
+
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <label :for="`${id}-hidden`" class="text-sm font-medium text-grey-900">
+          Hide this question
+        </label>
+        <p class="text-xs text-grey-600">
+          Hidden questions don't show in the form.
+        </p>
+      </div>
+      <D9Switch
+        :id="`${id}-hidden`"
+        v-model="hidden"
+        label="Hide this question"
+        onLabel="Yes"
+        offLabel="No"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { D9Input, D9Switch } from "@deck9/ui";
+import { useWorkbench } from "@/stores";
+import useActiveInteractions from "@/components/Factory/Shared/useActiveInteractions";
+import ConfigureDate from "@/components/Factory/Main/ConfigureDate.vue";
+import ConfigureFile from "@/components/Factory/Main/ConfigureFile.vue";
+import ConfigureInput from "@/components/Factory/Main/ConfigureInput.vue";
+import ConfigureRange from "@/components/Factory/Main/ConfigureRange.vue";
+import ConfigureTextarea from "@/components/Factory/Main/ConfigureTextarea.vue";
+import CustomResponseSettings from "@/components/Factory/Main/Interactions/CustomResponseSettings.vue";
+import RandomizeResponsesSetting from "@/components/Factory/Main/Interactions/RandomizeResponsesSetting.vue";
+
+const props = defineProps<{
+  id: string;
+  block: FormBlockModel;
+  interactionType?: FormBlockInteractionType;
+}>();
+
+const workbench = useWorkbench();
+const { editableInteractions } = useActiveInteractions(props.block);
+
+const title = ref(props.block.title ?? "");
+const hidden = ref(props.block.is_disabled ?? false);
+
+watch(title, (value) => workbench.updateBlock({ title: value }));
+watch(hidden, (value) => workbench.updateBlock({ is_disabled: value }));
+</script>
diff --git a/resources/js/components/Factory/Document/questionSummary.test.ts b/resources/js/components/Factory/Document/questionSummary.test.ts
new file mode 100644
index 00000000..309eccd6
--- /dev/null
+++ b/resources/js/components/Factory/Document/questionSummary.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { plainText, questionNumbers } from "./questionSummary";
+
+const block = (uuid: string, type = "radio", parent_block: string | null = null) =>
+    ({ uuid, type, parent_block }) as FormBlockModel;
+
+describe("plain question text", () => {
+    it("drops tags and keeps a space between paragraphs", () => {
+        expect(
+            plainText("<h2>Hi &amp; welcome</h2><p>How was <strong>it</strong>?</p>"),
+        ).toBe("Hi & welcome How was it?");
+    });
+
+    it("is empty for no text or only an image", () => {
+        expect(plainText(null)).toBe("");
+        expect(plainText('<img src="https://example.com/a.png">')).toBe("");
+    });
+});
+
+describe("question numbers", () => {
+    it("counts on through groups and skips the group itself", () => {
+        const numbers = questionNumbers([
+            block("a"),
+            block("g", "group"),
+            block("c"),
+            block("b", "radio", "g"),
+            block("b2", "date", "g"),
+        ]);
+
+        expect(numbers).toEqual({ a: 1, b: 2, b2: 3, c: 4 });
+    });
+
+    it("gives an empty group nothing", () => {
+        expect(questionNumbers([block("g", "group"), block("a")])).toEqual({
+            a: 1,
+        });
+    });
+});
diff --git a/resources/js/components/Factory/Document/questionSummary.ts b/resources/js/components/Factory/Document/questionSummary.ts
new file mode 100644
index 00000000..a34648a0
--- /dev/null
+++ b/resources/js/components/Factory/Document/questionSummary.ts
@@ -0,0 +1,32 @@
+// the text a closed question shows: no HTML, one space where a paragraph ended
+export function plainText(html: string | null): string {
+    if (!html) {
+        return "";
+    }
+
+    const spaced = html.replace(/<\/(p|h[1-6]|li|blockquote)>|<br\s*\/?>/gi, "$& ");
+    const doc = new DOMParser().parseFromString(spaced, "text/html");
+
+    return (doc.body.textContent ?? "").replace(/\s+/g, " ").trim();
+}
+
+// questions count on through groups; a group itself gets no number
+export function questionNumbers(
+    blocks: FormBlockModel[],
+): Record<string, number> {
+    const numbers: Record<string, number> = {};
+    const inScope = (parent: string | null) =>
+        blocks.filter((block) => (block.parent_block ?? null) === parent);
+    let next = 1;
+
+    for (const block of inScope(null)) {
+        const questions =
+            block.type === "group" ? inScope(block.uuid) : [block];
+
+        for (const question of questions) {
+            numbers[question.uuid] = next++;
+        }
+    }
+
+    return numbers;
+}
diff --git a/resources/js/components/Factory/Document/useAddBlock.ts b/resources/js/components/Factory/Document/useAddBlock.ts
new file mode 100644
index 00000000..54571c32
--- /dev/null
+++ b/resources/js/components/Factory/Document/useAddBlock.ts
@@ -0,0 +1,25 @@
+import { nextTick } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+
+// a new block opens with the cursor in its text, or in its name for a group
+export function useAddBlock() {
+    const store = useForm();
+    const workbench = useWorkbench();
+
+    const addBlock = async (
+        ...args: Parameters<typeof store.createFormBlock>
+    ) => {
+        await store.createFormBlock(...args);
+        await nextTick();
+
+        const block = workbench.block;
+        const field =
+            block?.type === "group"
+                ? `group-${block.uuid}-name`
+                : `question-${block?.uuid}-text`;
+
+        document.getElementById(field)?.focus();
+    };
+
+    return { addBlock };
+}
diff --git a/resources/js/components/Factory/Main/BlockInteractions.vue b/resources/js/components/Factory/Main/BlockInteractions.vue
deleted file mode 100644
index 36828819..00000000
--- a/resources/js/components/Factory/Main/BlockInteractions.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div>
-    <h2 class="mb-2 text-base font-bold">Input Settings</h2>
-
-    <ConfigureClicks v-if="workbench.usesInteractionType === 'button'" />
-    <ConfigureConsents v-if="workbench.usesInteractionType === 'consent'" />
-    <ConfigureDate v-if="workbench.usesInteractionType === 'date'" />
-    <ConfigureInput v-if="workbench.usesInteractionType === 'input'" />
-    <ConfigureRange v-if="workbench.usesInteractionType === 'range'" />
-    <ConfigureTextarea v-if="workbench.usesInteractionType === 'textarea'" />
-    <ConfigureFile v-if="workbench.usesInteractionType === 'file'" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useWorkbench } from "@/stores";
-import ConfigureClicks from "./ConfigureClicks.vue";
-import ConfigureConsents from "./ConfigureConsents.vue";
-import ConfigureDate from "./ConfigureDate.vue";
-import ConfigureInput from "./ConfigureInput.vue";
-import ConfigureRange from "./ConfigureRange.vue";
-import ConfigureTextarea from "./ConfigureTextarea.vue";
-import ConfigureFile from "./ConfigureFile.vue";
-
-const workbench = useWorkbench();
-</script>
diff --git a/resources/js/components/Factory/Main/BlockMessage.vue b/resources/js/components/Factory/Main/BlockMessage.vue
deleted file mode 100644
index 71061471..00000000
--- a/resources/js/components/Factory/Main/BlockMessage.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <h2 class="mb-4 text-base font-bold">Message</h2>
-    <Editor v-model="content" v-bind="{ counter: true }" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useWorkbench } from "@/stores";
-import { ref } from "vue";
-import Editor from "@/components/Factory/Shared/Editor.vue";
-import { watch } from "vue";
-
-const workbench = useWorkbench();
-const content = ref(workbench.block?.message ?? "");
-
-watch(content, (newValue) => {
-  workbench.updateBlock({
-    message: newValue,
-  });
-});
-</script>
diff --git a/resources/js/components/Factory/Main/BlockMetaHeader.vue b/resources/js/components/Factory/Main/BlockMetaHeader.vue
deleted file mode 100644
index 597ba426..00000000
--- a/resources/js/components/Factory/Main/BlockMetaHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="flex justify-between font-mono text-xs text-grey-400">
-    <div>
-      <span class="mr-1 text-xs">ID</span>
-      <span
-        class="inline-block rounded px-2 italic leading-normal text-grey-400"
-      >
-        {{ block.uuid }}
-      </span>
-    </div>
-    <div>
-      <span class="mr-1 text-xs">Last Change</span>
-      <span
-        class="inline-block rounded px-2 italic leading-normal text-grey-400"
-        >{{ formattedUpdatedAt }}</span
-      >
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps<{
-  block: FormBlockModel;
-}>();
-
-const formattedUpdatedAt = computed(() => {
-  return new Date(props.block?.updated_at).toLocaleString(navigator.language, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  });
-});
-</script>
diff --git a/resources/js/components/Factory/Main/BlockType.vue b/resources/js/components/Factory/Main/BlockType.vue
deleted file mode 100644
index 2de35c6b..00000000
--- a/resources/js/components/Factory/Main/BlockType.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="z-20">
-    <h2 class="mb-2 text-base font-bold">
-      <label for="block-type">Type</label>
-    </h2>
-    <D9Select
-      id="block-type"
-      class="mb-2"
-      v-model="selected"
-      placeholder="Please select a type"
-      size="large"
-      :options="types"
-      icon="chevron-right"
-    />
-
-    <AdvancedSettings title="More Settings">
-      <div>
-        <D9Label
-          id="block-identifier"
-          label="Identifier"
-          description="This name is used when submitting your form through webhooks and in the export."
-        />
-        <D9Input id="block-identifier" v-model="title" block />
-      </div>
-    </AdvancedSettings>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useWorkbench } from "@/stores";
-import { D9Select, D9Label, D9Input } from "@deck9/ui";
-import { ref, Ref, watch } from "vue";
-import { useBlockTypes } from "../utils/useBlockTypes";
-import AdvancedSettings from "@/components/AdvancedSettings.vue";
-
-const workbench = useWorkbench();
-
-const { types } = useBlockTypes();
-
-const matched = types.value.find((type) => {
-  return type.value === workbench.block?.type;
-});
-
-const selected: Ref<InteractionOption | undefined> = matched
-  ? ref(matched)
-  : ref(undefined);
-
-watch(selected, (newValue) => {
-  if (newValue?.value) {
-    workbench.updateBlock({
-      type: newValue.value,
-    });
-  }
-});
-
-const title = ref(workbench.block?.title || "");
-
-watch([title], (newValue) => {
-  if (newValue) {
-    workbench.updateBlock({
-      title: newValue[0],
-    });
-  }
-});
-</script>
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index 140dbd03..c8286a2e 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -9,7 +9,7 @@
     <Container
       v-else
       lock-axis="y"
-      drag-handle-selector="button.handle"
+      drag-handle-selector=".handle"
       orientation="vertical"
       @drop="onDrop"
     >
@@ -26,7 +26,7 @@
       </Draggable>
     </Container>
 
-    <div class="mt-2">
+    <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
       <D9Button
         label="Add new option"
         icon="plus"
@@ -35,19 +35,8 @@
         :isLoading="isCreatingInteraction"
         @click="createClickInteraction"
       />
+      <span class="text-xs text-grey-600">Enter adds a choice.</span>
     </div>
-
-    <RandomizeResponsesSetting class="my-4" />
-
-    <CustomResponseSettings
-      v-if="
-        editableInteractions &&
-        editableInteractions.length > 0 &&
-        workbench.block &&
-        ['radio', 'checkbox'].includes(workbench.block.type)
-      "
-      class=""
-    />
   </div>
 </template>
 
@@ -60,8 +49,6 @@ import { Container, Draggable } from "vue3-smooth-dnd";
 import EmptyState from "@/components/EmptyState.vue";
 import { useKeyboardNavigation } from "@/components/Factory/utils/useKeyboardNavigation";
 import useActiveInteractions from "../Shared/useActiveInteractions";
-import CustomResponseSettings from "./Interactions/CustomResponseSettings.vue";
-import RandomizeResponsesSetting from "./Interactions/RandomizeResponsesSetting.vue";
 
 const workbench = useWorkbench();
 const { activeInteractions, editableInteractions } = useActiveInteractions(
diff --git a/resources/js/components/Factory/Main/ConfigureConsents.vue b/resources/js/components/Factory/Main/ConfigureConsents.vue
index 34b4916e..4fcf211d 100644
--- a/resources/js/components/Factory/Main/ConfigureConsents.vue
+++ b/resources/js/components/Factory/Main/ConfigureConsents.vue
@@ -9,7 +9,7 @@
     <Container
       v-else
       lock-axis="y"
-      drag-handle-selector="button.handle"
+      drag-handle-selector=".handle"
       orientation="vertical"
       @drop="onDrop"
     >
diff --git a/resources/js/components/Factory/Main/GroupSettings.vue b/resources/js/components/Factory/Main/GroupSettings.vue
deleted file mode 100644
index d67fd920..00000000
--- a/resources/js/components/Factory/Main/GroupSettings.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="z-20">
-    <h2 class="mb-2 text-base font-bold">Group Name</h2>
-    <D9Input v-model="title" block placeholder="Group" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useWorkbench } from "@/stores";
-import { D9Input } from "@deck9/ui";
-import { ref, watch } from "vue";
-
-const workbench = useWorkbench();
-
-const title = ref(workbench.block?.title || "");
-
-watch([title], (newValue) => {
-  if (newValue) {
-    workbench.updateBlock({
-      title: newValue[0],
-    });
-  }
-});
-</script>
diff --git a/resources/js/components/Factory/Main/Workbench.vue b/resources/js/components/Factory/Main/Workbench.vue
deleted file mode 100644
index b3d855c9..00000000
--- a/resources/js/components/Factory/Main/Workbench.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div
-    v-if="workbench.block"
-    class="relative mx-12 flex h-full max-w-xl flex-col justify-between px-4 pt-8 xl:mx-24"
-  >
-    <div class="space-y-8 pb-24">
-      <template v-if="workbench.block.type === 'group'">
-        <GroupSettings />
-      </template>
-      <template v-else>
-        <BlockMessage />
-        <BlockType />
-        <BlockInteractions v-if="workbench.needsInteractionSetup" />
-      </template>
-    </div>
-
-    <BlockMetaHeader class="py-4" :block="workbench.block" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useWorkbench } from "@/stores";
-import BlockMetaHeader from "./BlockMetaHeader.vue";
-import BlockMessage from "./BlockMessage.vue";
-import BlockType from "./BlockType.vue";
-import BlockInteractions from "./BlockInteractions.vue";
-import GroupSettings from "./GroupSettings.vue";
-import { provide } from "vue";
-
-const workbench = useWorkbench();
-
-provide("block", workbench.block);
-</script>
diff --git a/resources/js/components/Factory/Main/WorkbenchEmpty.vue b/resources/js/components/Factory/Main/WorkbenchEmpty.vue
deleted file mode 100644
index fffedd28..00000000
--- a/resources/js/components/Factory/Main/WorkbenchEmpty.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="flex h-full items-center justify-center">
-    <div
-      class="form-message-prose w-full max-w-xl rounded bg-white px-6 py-8 shadow"
-    >
-      <h2><D9Icon class="" name="circle-info" /> Welcome to the Editor</h2>
-
-      <h3>Storyboard</h3>
-      <p>
-        On the left side, you see the Storyboard, which shows all blocks
-        belonging to your form. It might be empty now, but you can start right
-        away by creating your first block by
-        <strong> clicking the button on the bottom left of this page </strong>.
-      </p>
-
-      <h3>Workbench</h3>
-      <p>
-        Next to the Storyboard, you find the Workbench. On the Workbench, you
-        can configure the message and interactions of a single block. Just
-        select the block you want to edit on the storyboard.
-      </p>
-
-      <h3>More Help</h3>
-      <p>
-        To find out more, you can visit our
-        <a href="https://help.getinput.co" target="_blank">help center</a>.
-      </p>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Icon } from "@deck9/ui";
-</script>
diff --git a/resources/js/components/Factory/Sidebar/Block.vue b/resources/js/components/Factory/Sidebar/Block.vue
deleted file mode 100644
index d9be24dd..00000000
--- a/resources/js/components/Factory/Sidebar/Block.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div class="relative pb-6 text-sm">
-    <InsertAfterButton v-bind="{ block }" />
-
-    <div
-      class="group relative block w-full overflow-visible rounded-md p-4 text-left"
-      :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
-      @click.stop="workbench.putOnWorkbench(block)"
-    >
-      <div
-        v-if="showBlockMenus"
-        class="absolute right-3 top-3 hover:opacity-100 z-10"
-        :class="isActive ? 'opacity-100' : 'opacity-25'"
-      >
-        <D9Menu
-          class="text-grey-400"
-          label="Block options"
-          position="right"
-          :use-portal="true"
-          :key="`${block.sequence}-position-menu`"
-        >
-          <D9MenuLink
-            as="button"
-            class="block w-full text-left"
-            :meta="block.uuid"
-            label="Copy ID"
-            @click="copyId"
-          />
-          <D9MenuLink
-            as="button"
-            class="block w-full text-left"
-            label="Delete"
-            @click.stop="deleteBlock"
-          />
-        </D9Menu>
-      </div>
-
-      <div class="relative flex items-start">
-        <div class="pr-4">
-          <div
-            class="bg-grey-700 text-grey-100 inline-block px-2 text-xxs leading-5 rounded mb-1"
-          >
-            {{ block.title && block.title.length ? block.title : block.uuid }}
-          </div>
-
-          <ConsentBlockMessage v-if="block.type === 'consent'" />
-
-          <DefaultBlockMessage v-if="block.message" :content="block.message" />
-          <div v-else class="mb-2 font-light text-grey-400">--empty--</div>
-        </div>
-      </div>
-
-      <BlockInteraction
-        v-for="(interaction, index) in editableInteractions"
-        v-bind="{ interaction, index }"
-        :key="interaction.id"
-      />
-
-      <!-- Block Status -->
-      <BlockFooter class="mt-4" :block="block" />
-
-      <!-- Block Logic -->
-      <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, provide } from "vue";
-import ConsentBlockMessage from "./ConsentBlockMessage.vue";
-import DefaultBlockMessage from "./DefaultBlockMessage.vue";
-import BlockInteraction from "./BlockInteraction.vue";
-import BlockFooter from "./BlockFooter.vue";
-import BlockLogicVisualizer from "./BlockLogicVisualizer.vue";
-import InsertAfterButton from "./InsertAfterButton.vue";
-import { useWorkbench, useForm } from "@/stores";
-import { D9Menu, D9MenuLink } from "@deck9/ui";
-import copy from "copy-text-to-clipboard";
-import useActiveInteractions from "../Shared/useActiveInteractions";
-import { useActiveCard } from "@/utils/useActiveCard";
-import { storeToRefs } from "pinia";
-
-const workbench = useWorkbench();
-const store = useForm();
-
-const { showBlockMenus } = storeToRefs(store);
-
-const props = defineProps<{
-  block: FormBlockModel;
-}>();
-
-provide("block", props.block);
-
-const { editableInteractions } = useActiveInteractions(props.block);
-
-const isActive = computed((): boolean => {
-  return workbench.block && workbench.block.id === props.block.id
-    ? true
-    : false;
-});
-
-const { cardStyle } = useActiveCard(isActive);
-
-const deleteBlock = () => {
-  const result = window.confirm("Do you really want to delete this block?");
-
-  if (result) {
-    store.deleteFormBlock(props.block);
-
-    if (workbench.block?.id === props.block.id) {
-      workbench.clearWorkbench();
-    }
-  }
-};
-
-const copyId = () => {
-  copy(props.block.uuid);
-};
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockContainer.vue b/resources/js/components/Factory/Sidebar/BlockContainer.vue
deleted file mode 100644
index 7c417030..00000000
--- a/resources/js/components/Factory/Sidebar/BlockContainer.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <Container
-    :data-group="groupId"
-    group-name="storyboard"
-    lock-axis="y"
-    orientation="vertical"
-    :get-child-payload="getChildPayload"
-    :get-ghost-parent="getGhostParent"
-    :should-accept-drop="shouldAcceptDrop"
-    :drop-placeholder="{
-      animationDuration: 150,
-      showOnTop: false,
-      className: 'cards-drop-preview',
-    }"
-    @drag-start="store.disableBlockMenu"
-    @drag-end="store.enableBlockMenu"
-    @drop="onDrop"
-  >
-    <TransitionGroup v-bind="transitionClasses">
-      <Draggable v-for="block in groupBlocks" :key="block.uuid">
-        <component
-          :is="block.type === 'group' ? Group : Block"
-          :block="block"
-          :key="`${block.sequence}-${block.uuid}`"
-        />
-      </Draggable>
-    </TransitionGroup>
-  </Container>
-</template>
-
-<script setup lang="ts">
-import Block from "./Block.vue";
-import Group from "./Group.vue";
-import { Container, Draggable } from "vue3-smooth-dnd";
-import { computed, nextTick } from "vue";
-import { useForm } from "@/stores";
-
-const props = defineProps<{
-  groupId?: string;
-}>();
-
-const store = useForm();
-
-const transitionClasses = computed((): Record<string, string> => {
-  if (store.isCssTransitionEnabled) {
-    return {
-      moveClass: "transition duration-200",
-      leaveToClass: "opacity-0 -translate-y-2",
-      leaveActiveClass: "absolute inset-x-0 transition duration-150 ease-out",
-    };
-  }
-
-  return {};
-});
-
-const groupBlocks = computed(() => {
-  if (props.groupId) {
-    return store.blocks?.filter((block) => {
-      return block.parent_block && block.parent_block === props.groupId;
-    });
-  }
-
-  return store.blocks?.filter((block) => {
-    return !block.parent_block;
-  });
-});
-
-const getChildPayload = (index: number) => {
-  if (!groupBlocks.value) {
-    return false;
-  }
-
-  return groupBlocks.value[index];
-};
-
-const getGhostParent = () => {
-  return document.getElementById("smooth-dnd-container");
-};
-
-const shouldAcceptDrop = (sourceContainerOptions: any, payload: any) => {
-  if (sourceContainerOptions.groupName !== "storyboard") return false;
-
-  if (props.groupId && payload) {
-    // do not allow groups to be dropped into groups
-    return payload.type !== "group";
-  }
-
-  return true;
-};
-
-const onDrop = (dropResult: any): void => {
-  const { addedIndex, payload } = dropResult;
-
-  if (addedIndex !== null) {
-    store.setCssTransition(false);
-
-    store.changeBlockSequence(props.groupId ?? false, addedIndex, payload);
-
-    nextTick(() => {
-      store.setCssTransition(true);
-    });
-  }
-};
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockFooter.vue b/resources/js/components/Factory/Sidebar/BlockFooter.vue
deleted file mode 100644
index 6b3e8f24..00000000
--- a/resources/js/components/Factory/Sidebar/BlockFooter.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <div class="flex space-x-1">
-    <button
-      class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
-      :class="[
-        block.has_logic
-          ? 'bg-blue-100 outline-blue-200'
-          : 'bg-grey-100 outline-grey-200',
-      ]"
-      @click="showLogicEditor"
-    >
-      <D9Icon name="code-branch" size="sm" />
-      <span>Block Logic</span>
-      <span v-if="block?.logics && block.logics.length > 0"
-        >(<strong>{{ block.logics?.length }}</strong
-        >)</span
-      >
-    </button>
-    <button
-      v-if="block.type !== 'group'"
-      class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
-      :class="[
-        block.is_required
-          ? 'bg-red-100 outline-red-200'
-          : 'bg-grey-100 outline-grey-200',
-      ]"
-      @click="toggleRequired()"
-    >
-      <template v-if="block.is_required">
-        <D9Icon name="asterisk" size="sm" />
-        <span>Required</span>
-      </template>
-      <template v-else>
-        <D9Icon name="question" size="sm" />
-        <span>Optional</span>
-      </template>
-    </button>
-    <button
-      class="flex items-center space-x-1 rounded-lg px-2 py-1 leading-none text-xs hover:text-black hover:outline text-grey-700"
-      :class="[
-        block.is_disabled
-          ? 'bg-grey-100 outline-grey-200'
-          : 'bg-green-50 outline-green-100',
-      ]"
-      @click="disableBlock()"
-    >
-      <template v-if="block.is_disabled">
-        <D9Icon name="circle-dot" size="sm" />
-        <span>Disabled</span>
-      </template>
-      <template v-else>
-        <D9Icon name="circle-check" size="sm" />
-        <span>Enabled</span>
-      </template>
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useForm, useLogic } from "@/stores";
-import { D9Icon } from "@deck9/ui";
-
-const store = useForm();
-const logicStore = useLogic();
-
-const props = defineProps<{
-  block: FormBlockModel;
-}>();
-
-const toggleRequired = () => {
-  store.updateFormBlockProperty(
-    props.block,
-    "is_required",
-    !props.block.is_required,
-  );
-};
-
-const showLogicEditor = () => {
-  logicStore.showLogicEditor(props.block);
-};
-
-const disableBlock = () => {
-  store.updateFormBlockProperty(
-    props.block,
-    "is_disabled",
-    !props.block.is_disabled,
-  );
-};
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockInteraction.test.ts b/resources/js/components/Factory/Sidebar/BlockInteraction.test.ts
deleted file mode 100644
index 3f6a1229..00000000
--- a/resources/js/components/Factory/Sidebar/BlockInteraction.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import BlockInteraction from "./BlockInteraction.vue";
-
-describe("BlockInteraction", () => {
-    it.each(["range", "file"])(
-        "mounts a new %s interaction whose options are still null",
-        (type) => {
-            const interaction = {
-                type,
-                label: null,
-                options: null,
-            } as unknown as FormBlockInteractionModel;
-
-            expect(() =>
-                mount(BlockInteraction, { props: { interaction } }),
-            ).not.toThrow();
-        },
-    );
-});
diff --git a/resources/js/components/Factory/Sidebar/BlockInteraction.vue b/resources/js/components/Factory/Sidebar/BlockInteraction.vue
deleted file mode 100644
index cc2f3242..00000000
--- a/resources/js/components/Factory/Sidebar/BlockInteraction.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div class="relative ml-[3px] flex items-center py-1">
-    <IndexItem class="shrink-0" :type="interaction.type" :index="index" />
-    <div
-      class="ml-2 text-sm"
-      v-if="interaction.type === 'file' && interaction.options"
-    >
-      <span>up to {{ interaction.options.allowedFiles }} files</span>,
-      <span class="ml-px"
-        >max {{ interaction.options.allowedFileSize }} MB</span
-      >
-    </div>
-    <div
-      class="ml-2 text-sm"
-      v-else-if="interaction.type === 'range' && interaction.options"
-    >
-      <span
-        >rate from <strong>{{ interaction.options.start }}</strong> to
-        <strong>{{ interaction.options.end }}</strong></span
-      >
-    </div>
-    <div v-else class="ml-3 text-sm">{{ interaction.label ?? "-" }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import IndexItem from "@/components/Factory/Shared/IndexItem.vue";
-
-defineProps<{
-  index?: number;
-  interaction: FormBlockInteractionModel;
-}>();
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue b/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
deleted file mode 100644
index 69c3738f..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicVisualizer.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div
-    class="mt-4 space-y-4"
-    v-if="showBlockLogic && block && block.logics && block.logics.length > 0"
-  >
-    <div
-      class="grid grid-cols-6 text-xs leading-none items-center gap-1 border-l-2 border-blue-200"
-      v-for="rule in block.logics"
-      :key="rule.id"
-    >
-      <!-- Rule Conditions -->
-      <template
-        v-for="(condition, index) in rule.conditions"
-        :key="`${rule.id}-condition-${index}`"
-      >
-        <!-- Operator -->
-        <div class="text-right pr-3">
-          <span v-if="index !== 0">{{ condition.chainOperator }}</span>
-          <span v-else>If</span>
-        </div>
-
-        <!-- Condition -->
-        <div class="flex col-span-5 -space-x-px">
-          <div
-            class="text-grey-700 font-base border border-grey-400 bg-white px-2 py-1 text-center rounded-l"
-          >
-            {{ condition.source }}
-          </div>
-          <div
-            class="border border-grey-400 border-l-grey-300 bg-white px-2 py-1 text-center font-semibold text-grey-500"
-          >
-            {{ condition.operator }}
-          </div>
-          <div
-            class="text-grey-700 font-base border border-grey-400 border-l-grey-300 bg-white px-2 py-1 text-center rounded-r"
-            :class="[index === 0 ? 'rounded-tr-md' : '']"
-          >
-            {{ condition.value }}
-          </div>
-        </div>
-      </template>
-
-      <!-- Rule Action -->
-
-      <div class="text-right pr-3">
-        <span>then</span>
-      </div>
-
-      <div class="col-span-5">
-        <div
-          class="inline-block text-grey-700 font-base border border-grey-400 bg-white px-2 py-1 rounded"
-        >
-          <template v-if="rule.action === 'show'">
-            <D9Icon name="eye" size="sm" />
-            show this block
-          </template>
-          <template v-else-if="rule.action === 'hide'">
-            <D9Icon name="eye-slash" size="sm" />
-            hide this block
-          </template>
-          <template v-else-if="rule.action === 'goto'">
-            <D9Icon name="location-arrow" size="sm" />
-            go to block
-            <span class="font-bold font-mono">{{ rule.action_payload }}</span>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Icon } from "@deck9/ui";
-import { inject, ref } from "vue";
-
-const block: FormBlockModel | null = inject("block") ?? null;
-
-const showBlockLogic = ref(true);
-</script>
diff --git a/resources/js/components/Factory/Sidebar/ConsentBlockMessage.vue b/resources/js/components/Factory/Sidebar/ConsentBlockMessage.vue
deleted file mode 100644
index c9f795d1..00000000
--- a/resources/js/components/Factory/Sidebar/ConsentBlockMessage.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div>
-    <h3 class="mb-2 text-sm font-bold text-grey-700">
-      <D9Icon class="mr-2" name="shield" />Data Processing Consent
-    </h3>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { D9Icon } from "@deck9/ui";
-</script>
diff --git a/resources/js/components/Factory/Sidebar/DefaultBlockMessage.vue b/resources/js/components/Factory/Sidebar/DefaultBlockMessage.vue
deleted file mode 100644
index a6c98afc..00000000
--- a/resources/js/components/Factory/Sidebar/DefaultBlockMessage.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div
-    class="form-message-prose conversation-theme mb-4"
-    v-html="sanitizeHtml(content)"
-  ></div>
-</template>
-
-<script lang="ts" setup>
-import { sanitizeHtml } from "@/utils/sanitize";
-
-defineProps<{
-  content: string;
-}>();
-</script>
diff --git a/resources/js/components/Factory/Sidebar/Group.vue b/resources/js/components/Factory/Sidebar/Group.vue
deleted file mode 100644
index 13c152bf..00000000
--- a/resources/js/components/Factory/Sidebar/Group.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div class="relative pb-6 text-sm">
-    <InsertAfterButton v-bind="{ block }" />
-    <div
-      class="relative block w-full rounded-md border-dotted px-4 py-3 text-left"
-      :class="[cardStyle, { 'opacity-50': block.is_disabled }]"
-      @click.stop="workbench.putOnWorkbench(block)"
-    >
-      <button
-        class="rounded pl-2 pr-5 py-1 font-bold text-grey-400 hover:bg-grey-100 block text-left"
-        :class="[{ 'mb-3': !isCollapsed }]"
-        @click.prevent="toggleGroup"
-      >
-        <D9Icon
-          class="transition-transform duration-150 mr-2"
-          :class="[{ '-rotate-90': isCollapsed }]"
-          name="chevron-down"
-        />
-        <D9Icon name="layer-group" size="sm" />
-        {{ block.title ?? "Group" }}
-        <span class="font-light italic" v-show="isCollapsed"
-          >({{ t("admin.blocks", groupCount) }})</span
-        >
-      </button>
-      <div
-        v-if="showBlockMenus"
-        class="absolute right-3 top-2 hover:opacity-100"
-        :class="isActive ? 'opacity-100' : 'opacity-25'"
-      >
-        <D9Menu
-          class="text-grey-400"
-          label="Group options"
-          position="right"
-          :use-portal="true"
-          :key="`${block.sequence}-position-menu`"
-        >
-          <D9MenuLink
-            as="button"
-            class="block w-full text-left"
-            :meta="block.uuid"
-            label="Copy ID"
-            @click="copyId"
-          />
-          <D9MenuLink
-            as="button"
-            class="block w-full text-left"
-            label="Delete"
-            @click.stop="deleteBlock"
-          />
-        </D9Menu>
-      </div>
-      <BlockContainer
-        v-show="!isCollapsed"
-        :groupId="block.uuid"
-        class="transition duration-200"
-      />
-
-      <!-- Block Status -->
-      <BlockFooter class="mt-2" :block="block" />
-
-      <!-- Block Logic -->
-      <BlockLogicVisualizer v-if="store.showLogicInStoryboard" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BlockContainer from "@/components/Factory/Sidebar/BlockContainer.vue";
-import InsertAfterButton from "./InsertAfterButton.vue";
-import BlockFooter from "./BlockFooter.vue";
-import BlockLogicVisualizer from "./BlockLogicVisualizer.vue";
-import copy from "copy-text-to-clipboard";
-import { D9Menu, D9MenuLink, D9Icon } from "@deck9/ui";
-import { useActiveCard } from "@/utils/useActiveCard";
-import { useWorkbench, useForm } from "@/stores";
-import { computed, provide, ref } from "vue";
-import { useI18n } from "vue-i18n";
-import { storeToRefs } from "pinia";
-
-const props = defineProps<{
-  block: FormBlockModel;
-}>();
-
-provide("block", props.block);
-
-const { t } = useI18n();
-
-const workbench = useWorkbench();
-const store = useForm();
-
-const { showBlockMenus } = storeToRefs(store);
-
-const isCollapsed = ref(props.block.is_disabled ?? false);
-
-const isActive = computed((): boolean => {
-  return workbench.block && workbench.block.id === props.block.id
-    ? true
-    : false;
-});
-const { cardStyle } = useActiveCard(isActive);
-
-const groupCount = computed(() => {
-  return store.countGroups[props.block.uuid];
-});
-
-const deleteBlock = () => {
-  let result = window.confirm(
-    "Do you really want to delete this group? All blocks inside this group will be deleted as well.",
-  );
-
-  if (result) {
-    store.deleteFormBlock(props.block);
-
-    if (workbench.block?.id === props.block.id) {
-      workbench.clearWorkbench();
-    }
-  }
-};
-
-const copyId = () => {
-  copy(props.block.uuid);
-};
-
-const toggleGroup = () => {
-  isCollapsed.value = !isCollapsed.value;
-};
-</script>
diff --git a/resources/js/components/Factory/Sidebar/InsertAfterButton.vue b/resources/js/components/Factory/Sidebar/InsertAfterButton.vue
deleted file mode 100644
index 7dd11cb4..00000000
--- a/resources/js/components/Factory/Sidebar/InsertAfterButton.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div class="group absolute inset-x-0 bottom-0 top-0 flex justify-center">
-    <button
-      class="absolute inset-x-0 bottom-[4px] rounded bg-grey-200 h-4 leading-none opacity-0 transition-opacity duration-150 group-hover:opacity-100"
-      @click="store.createFormBlock(block)"
-    >
-      <D9Icon class="text-grey-900" name="plus-circle" size="xs" />
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Icon } from "@deck9/ui";
-import { useForm } from "@/stores";
-
-const store = useForm();
-
-defineProps<{
-  block: FormBlockModel;
-}>();
-</script>
diff --git a/resources/js/components/Factory/Sidebar/Storyboard.vue b/resources/js/components/Factory/Sidebar/Storyboard.vue
deleted file mode 100644
index dcf43ea1..00000000
--- a/resources/js/components/Factory/Sidebar/Storyboard.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div
-    class="relative flex min-h-full max-w-full shrink-0 flex-grow flex-col border-r border-grey-200 transition duration-100"
-    :class="isResizing ? 'pointer-events-none select-none' : ''"
-    :style="`width: ${sidebarWidth}px`"
-    ref="sidebar"
-  >
-    <div
-      class="group absolute inset-y-0 left-full hidden items-center border-l-2 border-transparent transition duration-200 sm:flex"
-    >
-      <div
-        @mousedown="enableResize"
-        class="-ml-[7px] flex h-9 w-3 cursor-[ew-resize] flex-col items-center justify-around rounded border border-grey-200 bg-grey-100 py-2 z-10"
-      >
-        <span
-          class="block h-1 w-1 rounded bg-grey-300 transition duration-200 group-hover:bg-blue-400"
-        ></span>
-        <span
-          class="block h-1 w-1 rounded bg-grey-300 transition duration-200 group-hover:bg-blue-400"
-        ></span>
-        <span
-          class="block h-1 w-1 rounded bg-grey-300 transition duration-200 group-hover:bg-blue-400"
-        ></span>
-      </div>
-    </div>
-
-    <div
-      v-if="!isLoaded"
-      class="flex w-full items-center justify-center px-4 py-12"
-    >
-      <D9Spinner class="text-blue-300 opacity-50" label="Loading blocks" />
-    </div>
-
-    <div v-else-if="store.hasBlocks" class="relative flex-grow">
-      <ScrollShadow class="absolute inset-0">
-        <BlockContainer id="smooth-dnd-container" class="py-4 px-4" />
-      </ScrollShadow>
-    </div>
-
-    <div v-else class="flex flex-grow items-center px-4">
-      <EmptyState
-        title="No blocks found"
-        description="Create your first block now"
-      />
-    </div>
-
-    <div
-      v-if="isLoaded"
-      class="flex items-center justify-center gap-x-2 border-t border-grey-200 bg-white px-4 py-3"
-    >
-      <D9Button
-        label="Block"
-        color="dark"
-        icon="plus"
-        icon-position="right"
-        @click="store.createFormBlock()"
-      />
-      <D9Button
-        label="Group"
-        color="light"
-        icon="layer-group"
-        icon-position="right"
-        @click="store.createFormBlock(null, 'group')"
-      />
-    </div>
-  </div>
-  <BlockLogicEditor />
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useForm, useWorkbench } from "@/stores";
-import { D9Spinner, D9Button } from "@deck9/ui";
-import { useStorage } from "@vueuse/core";
-import BlockContainer from "./BlockContainer.vue";
-import EmptyState from "@/components/EmptyState.vue";
-import ScrollShadow from "@/components/ScrollShadow.vue";
-import _throttle from "lodash/throttle";
-import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
-
-const isLoaded = ref(false);
-const store = useForm();
-const workbench = useWorkbench();
-
-const isResizing = ref(false);
-const sidebarWidth = useStorage("sidebar-width", 380, localStorage);
-const maxSidebarWidth = 680;
-const sidebarWidthStart = ref(0);
-const mouseStart = ref(0);
-
-const resize = _throttle((event) => {
-  const delta = event.screenX - mouseStart.value;
-
-  sidebarWidth.value = Math.min(
-    maxSidebarWidth,
-    Math.max(380, sidebarWidthStart.value + delta),
-  );
-}, 30);
-
-const disableResize = () => {
-  isResizing.value = false;
-
-  document.body.style.removeProperty("cursor");
-
-  document.removeEventListener("mousemove", resize);
-  document.removeEventListener("mouseup", disableResize);
-};
-
-const enableResize = (event) => {
-  isResizing.value = true;
-
-  mouseStart.value = event.screenX;
-  sidebarWidthStart.value = sidebarWidth.value;
-
-  document.body.style.cursor = "ew-resize";
-
-  document.addEventListener("mousemove", resize);
-  document.addEventListener("mouseup", disableResize);
-};
-
-onMounted(async () => {
-  await store.getBlocks();
-
-  if (!workbench.block && store.hasBlocks && store.blocks) {
-    const params = new URLSearchParams(window.location.search);
-    const values = Object.fromEntries(params.entries());
-    const found = store.blocks.find((i) => i.uuid === values["block"]);
-
-    if (found) {
-      workbench.putOnWorkbench(found);
-    } else {
-      workbench.putOnWorkbench(store.blocks[0]);
-    }
-  }
-
-  isLoaded.value = true;
-});
-</script>
diff --git a/resources/js/components/Factory/sanitize.test.ts b/resources/js/components/Factory/sanitize.test.ts
index e2c6d6e6..b0d98de9 100644
--- a/resources/js/components/Factory/sanitize.test.ts
+++ b/resources/js/components/Factory/sanitize.test.ts
@@ -1,34 +1,41 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
-import DefaultBlockMessage from "./Sidebar/DefaultBlockMessage.vue";
+import DocumentQuestion from "./Document/DocumentQuestion.vue";
 import BlockSubmissionItem from "./Submissions/BlockSubmissionItem.vue";
 
 const unsafeHtml = '<p>Hello</p><img src="x" onerror="window.ran = true">';
 
 describe("question texts in the admin", () => {
-    it.each([
-        [
-            "builder sidebar",
-            () =>
-                mount(DefaultBlockMessage, { props: { content: unsafeHtml } }),
-        ],
-        [
-            "results",
-            () =>
-                mount(BlockSubmissionItem, {
-                    props: {
-                        block: {
-                            message: unsafeHtml,
-                            session_count: 1,
-                            interactions: [],
-                        } as Partial<FormBlockModel> as FormBlockModel,
-                    },
-                }),
-        ],
-    ])("%s renders without event handlers", (_, mountText) => {
-        const wrapper = mountText();
+    it("results render without event handlers", () => {
+        const wrapper = mount(BlockSubmissionItem, {
+            props: {
+                block: {
+                    message: unsafeHtml,
+                    session_count: 1,
+                    interactions: [],
+                } as Partial<FormBlockModel> as FormBlockModel,
+            },
+        });
 
         expect(wrapper.text()).toContain("Hello");
         expect(wrapper.find("img").attributes()).not.toHaveProperty("onerror");
     });
+
+    it("the editor's document shows the text as plain text", () => {
+        const wrapper = mount(DocumentQuestion, {
+            props: {
+                block: {
+                    id: 1,
+                    uuid: "a",
+                    type: "radio",
+                    message: unsafeHtml,
+                    interactions: [],
+                } as Partial<FormBlockModel> as FormBlockModel,
+                number: 1,
+            },
+        });
+
+        expect(wrapper.text()).toContain("Hello");
+        expect(wrapper.find("img").exists()).toBe(false);
+    });
 });
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index 59053ec3..8cc39946 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -238,6 +238,8 @@ export const useForm = defineStore("form", {
         async createFormBlock(
             insertAfter: FormBlockModel | null = null,
             type: FormBlockType | null = null,
+            // for an empty group: there's no block to insert after
+            parentBlock: string | null = null,
         ) {
             if (!this.form) {
                 return;
@@ -260,6 +262,12 @@ export const useForm = defineStore("form", {
 
                         this.blocks.splice(index + 1, 0, newBlock);
 
+                        this.saveBlockSequence();
+                    } else if (parentBlock) {
+                        newBlock.parent_block = parentBlock;
+
+                        this.blocks.push(newBlock);
+
                         this.saveBlockSequence();
                     } else {
                         this.blocks.push(newBlock);
diff --git a/resources/js/utils/useActiveCard.ts b/resources/js/utils/useActiveCard.ts
deleted file mode 100644
index 713a1ca9..00000000
--- a/resources/js/utils/useActiveCard.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { computed, ComputedRef, Ref } from "vue";
-
-export function useActiveCard(isActive: Ref<boolean>): {
-    cardStyle: ComputedRef<string>;
-} {
-    const cardStyle = computed(() => {
-        if (isActive.value === true) {
-            return "border-2 border-grey-500 bg-white";
-        } else {
-            return "border-2 border-grey-200 bg-white";
-        }
-    });
-
-    return { cardStyle };
-}

From ef0663e288c1c33a3d6826abbdae12c3fa5e9e64 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:04:45 +0200
Subject: [PATCH 002/153] feat: put grip and delete inside each choice row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Delete and the drag grip showed only on hover, 96 px left of the row and
outside the tab order. Now they sit at the end of the row, always visible;
delete is a named button ("Delete choice “Yes”").

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ChoiceRowActions.vue         | 33 +++++++++++++++++++
 .../Factory/Main/InteractionHoverActions.vue  | 24 --------------
 .../Main/Interactions/ClickInteraction.vue    | 14 ++++----
 .../Main/Interactions/ConsentInteraction.vue  |  8 +++--
 4 files changed, 47 insertions(+), 32 deletions(-)
 create mode 100644 resources/js/components/Factory/Main/ChoiceRowActions.vue
 delete mode 100644 resources/js/components/Factory/Main/InteractionHoverActions.vue

diff --git a/resources/js/components/Factory/Main/ChoiceRowActions.vue b/resources/js/components/Factory/Main/ChoiceRowActions.vue
new file mode 100644
index 00000000..58b546a6
--- /dev/null
+++ b/resources/js/components/Factory/Main/ChoiceRowActions.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="flex shrink-0 items-center">
+    <span
+      aria-hidden="true"
+      title="Drag to reorder"
+      class="handle grid h-9 w-6 cursor-grab place-items-center text-grey-500 hover:text-grey-900"
+    >
+      <D9Icon name="grip-vertical" />
+    </span>
+    <button
+      type="button"
+      :aria-label="`Delete ${label}`"
+      :title="`Delete ${label}`"
+      class="grid h-9 w-9 place-items-center rounded-md text-grey-500 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="$emit('onDelete')"
+    >
+      <D9Icon name="trash" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { D9Icon } from "@deck9/ui";
+
+defineProps<{
+  // names the delete button, e.g. 'choice "Yes"'
+  label: string;
+}>();
+
+defineEmits<{
+  (e: "onDelete"): void;
+}>();
+</script>
diff --git a/resources/js/components/Factory/Main/InteractionHoverActions.vue b/resources/js/components/Factory/Main/InteractionHoverActions.vue
deleted file mode 100644
index cde6c160..00000000
--- a/resources/js/components/Factory/Main/InteractionHoverActions.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div
-    class="absolute inset-y-2 -left-24 flex w-24 items-center justify-end space-x-2 pr-2 text-grey-400 opacity-0 transition duration-200 group-hover:opacity-100"
-  >
-    <button
-      tabindex="-1"
-      class="hover:text-grey-600"
-      @click="$emit('onDelete')"
-    >
-      <D9Icon name="trash" />
-    </button>
-    <button tabindex="-1" class="handle hover:text-grey-600">
-      <D9Icon name="grip-vertical" />
-    </button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Icon } from "@deck9/ui";
-
-defineEmits<{
-  (e: "onDelete"): void;
-}>();
-</script>
diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index ba678267..2a6c02ff 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="group relative py-1 transition duration-200">
-    <div class="flex items-center">
-      <section class="grid w-full grid-cols-2 gap-x-2">
+  <div class="py-1">
+    <div class="flex items-center gap-1">
+      <section class="grid min-w-0 flex-1 grid-cols-2 gap-x-2">
         <div :class="{ 'col-span-2': !showReply }">
           <div class="relative">
             <D9Input
@@ -35,15 +35,17 @@
           />
         </div>
       </section>
+      <ChoiceRowActions
+        :label="label ? `choice “${label}”` : `choice ${index + 1}`"
+        @onDelete="workbench.deleteInteraction(item)"
+      />
     </div>
-
-    <InteractionHoverActions @onDelete="workbench.deleteInteraction(item)" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { D9Input } from "@deck9/ui";
-import InteractionHoverActions from "@/components/Factory/Main/InteractionHoverActions.vue";
+import ChoiceRowActions from "@/components/Factory/Main/ChoiceRowActions.vue";
 import IndexItem from "@/components/Factory/Shared/IndexItem.vue";
 import { useWorkbench } from "@/stores";
 import { Ref, ref, watch } from "vue";
diff --git a/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue b/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
index fd8151cb..1d83f1fb 100644
--- a/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
@@ -6,6 +6,11 @@
     <div class="flex items-center">
       <h3 class="font-medium">Consent Policy</h3>
       <IndexItem class="ml-2" type="button" v-bind="{ index }" />
+      <ChoiceRowActions
+        class="ml-auto"
+        :label="label ? `policy “${label}”` : `policy ${index + 1}`"
+        @onDelete="workbench.deleteInteraction(item)"
+      />
     </div>
     <div class="mt-2 flex items-center">
       <section class="w-full space-y-2">
@@ -45,13 +50,12 @@
       </section>
     </div>
 
-    <InteractionHoverActions @onDelete="workbench.deleteInteraction(item)" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { D9Input, D9Textarea, D9Switch } from "@deck9/ui";
-import InteractionHoverActions from "@/components/Factory/Main/InteractionHoverActions.vue";
+import ChoiceRowActions from "@/components/Factory/Main/ChoiceRowActions.vue";
 import IndexItem from "@/components/Factory/Shared/IndexItem.vue";
 import { useWorkbench } from "@/stores";
 import { Ref, ref, watch } from "vue";

From d32b49cacd077327dad3cfd376e942d2bd99d5e1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:04:45 +0200
Subject: [PATCH 003/153] fix: name the text format buttons

The toolbar buttons had their name only in a tooltip. They now have an
aria-label, aria-pressed and type="button", in a group named "Text format".

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

diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 8264e918..5a5b6649 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
     <div
+      role="group"
+      aria-label="Text format"
       class="mb-1 py-1 bg-white border border-grey-300 rounded-lg flex flex-wrap gap-y-2 items-center"
     >
       <div class="px-1">
diff --git a/resources/js/components/Factory/Shared/EditorButton.vue b/resources/js/components/Factory/Shared/EditorButton.vue
index 56871eac..81d3fce4 100644
--- a/resources/js/components/Factory/Shared/EditorButton.vue
+++ b/resources/js/components/Factory/Shared/EditorButton.vue
@@ -1,5 +1,8 @@
 <template>
   <button
+    type="button"
+    :aria-label="label"
+    :aria-pressed="isActive"
     :class="[
       'rounded px-2 mx-px py-1 relative text-sm',
       isActive

From 4bcf889c6a77c52edd7999df767c6378f6426835 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:10:47 +0200
Subject: [PATCH 004/153] fix: focus after Try again, and drop a late question
 load

After Try again loads the questions, the cursor goes into the open
question's text (or onto Add question); when it fails again, back onto Try
again. Before, focus fell to the page. A question load that answers after
the editor closed or switched forms no longer fills the store or opens a
question (which also changed the next page's address). A question opened by
click or added now takes the cursor through one shared value, because its
text editor shows up a moment after the card.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         | 38 +++++++++++++-
 resources/js/Pages/Forms/Edit.vue             | 12 ++++-
 .../components/Factory/Document/BlockMenu.vue |  2 +-
 .../Factory/Document/DocumentGroup.vue        |  2 +-
 .../Factory/Document/DocumentQuestion.vue     | 19 ++-----
 .../Factory/Document/FormDocument.vue         | 50 ++++++++++++++++---
 .../Factory/Document/QuestionCard.vue         | 13 +++--
 .../components/Factory/Document/blockFocus.ts | 38 ++++++++++++++
 .../Factory/Document/useAddBlock.ts           | 25 ----------
 resources/js/stores/form.test.ts              | 39 ++++++++++++++-
 resources/js/stores/form.ts                   | 10 ++--
 11 files changed, 187 insertions(+), 61 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/blockFocus.ts
 delete mode 100644 resources/js/components/Factory/Document/useAddBlock.ts

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index e7cd72c3..fba82d18 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -20,10 +20,16 @@ let wrapper: VueWrapper | undefined;
 // the test pinia stubs actions: getBlocks does what each test tells it to
 const mountEditor = async (load: () => Promise<void>) => {
     vi.mocked(useForm().getBlocks).mockImplementation(load);
-    wrapper = mount(Edit, { props: { form }, global: { stubs } });
+    wrapper = mount(Edit, {
+        props: { form },
+        global: { stubs },
+        attachTo: document.body,
+    });
     await flushPromises();
     return wrapper;
 };
+const focused = () =>
+    document.activeElement?.closest("button")?.textContent?.trim();
 const loads = (result: FormBlockModel[]) => async () => {
     useForm().blocks = result;
 };
@@ -81,4 +87,34 @@ describe("editor loading", () => {
         expect(editor.text()).toContain("questions");
         expect(editor.text()).not.toContain("No questions yet");
     });
+
+    it("puts focus on Add question after Try again loads, and back on Try again when it fails again", async () => {
+        const getBlocks = vi.mocked(useForm().getBlocks);
+        const editor = await mountEditor(() => Promise.reject(new Error("500")));
+
+        await editor.get("[role=alert] button").trigger("click");
+        await flushPromises();
+        expect(focused()).toBe("Try again");
+
+        // putOnWorkbench is a stub, so no question is open to take the focus
+        getBlocks.mockImplementation(loads(blocks));
+        await editor.get("[role=alert] button").trigger("click");
+        await flushPromises();
+        expect(focused()).toBe("Add question");
+    });
+
+    it("opens no question when the questions arrive after the editor closed", async () => {
+        let arrive!: () => void;
+        const editor = await mountEditor(
+            () => new Promise<void>((resolve) => (arrive = resolve)),
+        );
+
+        editor.unmount();
+        wrapper = undefined;
+        useForm().blocks = blocks;
+        arrive();
+        await flushPromises();
+
+        expect(useWorkbench().putOnWorkbench).not.toHaveBeenCalled();
+    });
 });
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index afd589f3..29c8a279 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -24,7 +24,14 @@ const loadBlocks = async () => {
   try {
     await store.getBlocks();
   } catch {
-    status.value = "failed";
+    if (!left) {
+      status.value = "failed";
+    }
+    return;
+  }
+
+  // a late reply must not open a question, and so change the address, on the next page
+  if (left) {
     return;
   }
 
@@ -43,7 +50,10 @@ const loadBlocks = async () => {
   status.value = "loaded";
 };
 
+let left = false;
+
 onBeforeUnmount(() => {
+  left = true;
   store.clearForm();
 });
 
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index d4c9ed2e..6c351edb 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -54,7 +54,7 @@ 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 "./useAddBlock";
+import { useAddBlock } from "./blockFocus";
 
 const props = defineProps<{
   block: FormBlockModel;
diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index e7d8c5eb..7dc4f658 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -65,7 +65,7 @@ import { D9Icon } from "@deck9/ui";
 import { useForm, useLogic, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 import DocumentList from "./DocumentList.vue";
-import { useAddBlock } from "./useAddBlock";
+import { useAddBlock } from "./blockFocus";
 
 const props = defineProps<{
   group: FormBlockModel;
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index b6d13989..37f8d992 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -15,12 +15,7 @@
       </span>
     </div>
 
-    <QuestionCard
-      v-if="isOpen"
-      :block="block"
-      :number="number"
-      :autofocus="openedHere"
-    />
+    <QuestionCard v-if="isOpen" :block="block" :number="number" />
     <button
       v-else
       type="button"
@@ -66,12 +61,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 import { D9Icon } from "@deck9/ui";
 import { useWorkbench } from "@/stores";
 import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import { plainText } from "./questionSummary";
 import QuestionCard from "./QuestionCard.vue";
+import { cursorFor } from "./blockFocus";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -82,13 +78,6 @@ const workbench = useWorkbench();
 const { types } = useBlockTypes();
 
 const isOpen = computed(() => workbench.block?.id === props.block.id);
-const openedHere = ref(false);
-
-watch(isOpen, (value) => {
-  if (!value) {
-    openedHere.value = false;
-  }
-});
 
 const text = computed(() => plainText(props.block.message));
 const blockType = computed(() =>
@@ -104,7 +93,7 @@ const choiceCount = computed(() =>
 const ruleCount = computed(() => props.block.logics?.length ?? 0);
 
 const open = () => {
-  openedHere.value = true;
+  cursorFor.value = props.block.uuid;
   workbench.putOnWorkbench(props.block);
 };
 </script>
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 915f6433..58ac1ce4 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -1,8 +1,12 @@
 <template>
-  <div id="form-document" class="h-full w-full overflow-y-auto bg-white">
+  <div
+    id="form-document"
+    ref="root"
+    class="h-full w-full overflow-y-auto bg-white"
+  >
     <div class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10">
       <div v-if="status !== 'loaded'" class="pl-12">
-        <QuestionsLoadState :status="status" @retry="emit('retry')" />
+        <QuestionsLoadState :status="status" @retry="retry" />
       </div>
 
       <template v-else>
@@ -18,7 +22,7 @@
           description="Add your first question below."
         />
 
-        <div class="mt-4 flex flex-wrap gap-2 pl-12">
+        <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
             color="dark"
@@ -41,23 +45,55 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { D9Button } from "@deck9/ui";
-import { useForm } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
 import { questionNumbers } from "./questionSummary";
-import { useAddBlock } from "./useAddBlock";
+import { focusBlock, useAddBlock } from "./blockFocus";
 
-defineProps<{
+const props = defineProps<{
   status: "loading" | "failed" | "loaded";
 }>();
 const emit = defineEmits<{ retry: [] }>();
 
 const store = useForm();
+const workbench = useWorkbench();
 const { addBlock } = useAddBlock();
+const root = ref<HTMLElement | null>(null);
+const addButtons = ref<HTMLElement | null>(null);
+
+// Try again leaves the page: its button is gone once the load ends
+let retried = false;
+const retry = () => {
+  retried = true;
+  emit("retry");
+};
+
+watch(
+  () => props.status,
+  async (status) => {
+    if (!retried || status === "loading") {
+      return;
+    }
+
+    retried = false;
+
+    if (status === "loaded" && (await focusBlock(workbench.block))) {
+      return;
+    }
+
+    await nextTick();
+    const fallback =
+      status === "failed"
+        ? root.value?.querySelector<HTMLElement>("[role=alert] button")
+        : addButtons.value?.querySelector("button");
+    fallback?.focus();
+  },
+);
 
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index adb59563..a651d573 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -83,12 +83,11 @@ import ConfigureConsents from "@/components/Factory/Main/ConfigureConsents.vue";
 import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import BlockMenu from "./BlockMenu.vue";
 import QuestionSettings from "./QuestionSettings.vue";
+import { cursorFor } from "./blockFocus";
 
 const props = defineProps<{
   block: FormBlockModel;
   number: number;
-  // set when the owner opened it, not when the page opened the first question
-  autofocus?: boolean;
 }>();
 
 // Configure* and IndexItem read the open block from here
@@ -115,9 +114,13 @@ watch(type, (value) => {
   }
 });
 
-onMounted(() => {
-  if (props.autofocus) {
+const takeCursor = () => {
+  if (cursorFor.value === props.block.uuid) {
+    cursorFor.value = null;
     editor.value?.focus();
   }
-});
+};
+
+onMounted(takeCursor);
+watch(cursorFor, takeCursor);
 </script>
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
new file mode 100644
index 00000000..ee244b86
--- /dev/null
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -0,0 +1,38 @@
+import { nextTick, ref } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+
+// the question whose card takes the cursor once it shows: its text editor isn't there at once
+export const cursorFor = ref<string | null>(null);
+
+// puts the cursor in a question's text, or in a group's name
+export async function focusBlock(block: FormBlockModel | null): Promise<boolean> {
+    if (!block) {
+        return false;
+    }
+
+    if (block.type !== "group") {
+        cursorFor.value = block.uuid;
+        return true;
+    }
+
+    await nextTick();
+    const name = document.getElementById(`group-${block.uuid}-name`);
+    name?.focus();
+
+    return name !== null;
+}
+
+// a new block opens with the cursor in it
+export function useAddBlock() {
+    const store = useForm();
+    const workbench = useWorkbench();
+
+    const addBlock = async (
+        ...args: Parameters<typeof store.createFormBlock>
+    ) => {
+        await store.createFormBlock(...args);
+        await focusBlock(workbench.block);
+    };
+
+    return { addBlock };
+}
diff --git a/resources/js/components/Factory/Document/useAddBlock.ts b/resources/js/components/Factory/Document/useAddBlock.ts
deleted file mode 100644
index 54571c32..00000000
--- a/resources/js/components/Factory/Document/useAddBlock.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { nextTick } from "vue";
-import { useForm, useWorkbench } from "@/stores";
-
-// a new block opens with the cursor in its text, or in its name for a group
-export function useAddBlock() {
-    const store = useForm();
-    const workbench = useWorkbench();
-
-    const addBlock = async (
-        ...args: Parameters<typeof store.createFormBlock>
-    ) => {
-        await store.createFormBlock(...args);
-        await nextTick();
-
-        const block = workbench.block;
-        const field =
-            block?.type === "group"
-                ? `group-${block.uuid}-name`
-                : `question-${block?.uuid}-text`;
-
-        document.getElementById(field)?.focus();
-    };
-
-    return { addBlock };
-}
diff --git a/resources/js/stores/form.test.ts b/resources/js/stores/form.test.ts
index 801ac1fc..51828c2a 100644
--- a/resources/js/stores/form.test.ts
+++ b/resources/js/stores/form.test.ts
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import handler from "@/api/handler";
 import { useForm } from "@/stores";
 
-vi.mock("@/api/handler", () => ({ default: { post: vi.fn() } }));
+vi.mock("@/api/handler", () => ({ default: { get: vi.fn(), post: vi.fn() } }));
 
 const saved = {
     uuid: "form1",
@@ -85,3 +85,40 @@ describe("saving form settings", () => {
         expect(useForm().form).toEqual(saved);
     });
 });
+
+describe("loading the questions", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        setActivePinia(createPinia());
+        window.route = vi.fn(() => "/api/forms/form1/blocks") as unknown as typeof window.route;
+        useForm().form = { ...saved };
+    });
+
+    it("drops a reply that comes in after the editor left the form", async () => {
+        let answer!: (reply: AxiosResponse) => void;
+        vi.mocked(handler.get).mockReturnValue(
+            new Promise((resolve) => (answer = resolve)),
+        );
+
+        const loading = useForm().getBlocks();
+        useForm().clearForm();
+        answer({ status: 200, data: [{ id: 1, uuid: "b1" }] } as AxiosResponse);
+        await loading;
+
+        expect(useForm().blocks).toBeNull();
+    });
+
+    it("keeps another form's questions from a late reply", async () => {
+        let answer!: (reply: AxiosResponse) => void;
+        vi.mocked(handler.get).mockReturnValue(
+            new Promise((resolve) => (answer = resolve)),
+        );
+
+        const loading = useForm().getBlocks();
+        useForm().form = { ...saved, uuid: "form2" };
+        answer({ status: 200, data: [{ id: 1, uuid: "b1" }] } as AxiosResponse);
+        await loading;
+
+        expect(useForm().blocks).toBeNull();
+    });
+});
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index 8cc39946..f77f3084 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -155,10 +155,12 @@ export const useForm = defineStore("form", {
                 return;
             }
 
-            const response = await callGetFormBlocks(
-                this.form.uuid,
-                includeSubmissions,
-            );
+            const uuid = this.form.uuid;
+            const response = await callGetFormBlocks(uuid, includeSubmissions);
+            // the editor may have left this form while it loaded
+            if (this.form?.uuid !== uuid) {
+                return;
+            }
 
             this.blocks = response.data;
         },

From c18216f9bee3dbff30f1c47ace6a0f99743e7e20 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:17:29 +0200
Subject: [PATCH 005/153] test: cover the closed question row and opening it

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentQuestion.test.ts | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/DocumentQuestion.test.ts

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
new file mode 100644
index 00000000..2d94d4ff
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -0,0 +1,65 @@
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it } from "vitest";
+import { useWorkbench } from "@/stores";
+import DocumentQuestion from "./DocumentQuestion.vue";
+
+const question = {
+    id: 7,
+    uuid: "hSV2gq81LmQyTz0a",
+    type: "checkbox",
+    message: "<p>Which days can you help?</p>",
+    is_required: true,
+    is_disabled: true,
+    title: "days",
+    logics: [{ id: 1 }],
+    interactions: [
+        { type: "button", is_editable: true },
+        { type: "button", is_editable: true },
+        { type: "button", is_editable: false },
+    ],
+} as unknown as FormBlockModel;
+
+const mountQuestion = (block = question) =>
+    mount(DocumentQuestion, {
+        props: { block, number: 3 },
+        global: { stubs: { QuestionCard: { template: "<div>card</div>" } } },
+    });
+
+describe("a closed question in the document", () => {
+    beforeEach(() => useWorkbench().$reset());
+
+    it("shows its number, text and a meta line, never its random id", () => {
+        const text = mountQuestion().find("button").text();
+
+        expect(text).toContain("Question 3:");
+        expect(text).toContain("Which days can you help?");
+        expect(text).toContain("Checkboxes · 2 choices");
+        expect(text).toContain("Required");
+        expect(text).toContain("1 rule");
+        expect(text).toContain("Hidden");
+        expect(text).toContain("days");
+        expect(text).not.toContain(question.uuid);
+    });
+
+    it("says when a question has no text yet instead of naming it by id", () => {
+        const text = mountQuestion({ ...question, message: "" })
+            .find("button")
+            .text();
+
+        expect(text).toContain("No question text yet");
+        expect(text).not.toContain(question.uuid);
+    });
+
+    it("opens as a card when clicked", async () => {
+        const workbench = useWorkbench();
+        const wrapper = mountQuestion();
+
+        await wrapper.find("button").trigger("click");
+        expect(workbench.putOnWorkbench).toHaveBeenCalledWith(question);
+
+        workbench.block = question;
+        await wrapper.vm.$nextTick();
+        expect(wrapper.text()).toContain("card");
+        expect(wrapper.find("button").exists()).toBe(false);
+    });
+});

From d32d1cdb4a11ba5c0680f6ff269d583a608b7527 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:18:08 +0200
Subject: [PATCH 006/153] docs: add changelog line for #268

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d769351..17a6cab0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Archiving a form now also unpublishes it, so Restore brings it back unpublished. This also goes for forms you archived before this update. (#247)
 -   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)
+-   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. (#268)
 
 ### Fixed
 

From d61a7c23f67e73a4b3c01f12f62f0e49a2847efa Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:23:36 +0200
Subject: [PATCH 007/153] fix: scroll a question opened by link into view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentGroup.vue        |  3 +-
 .../Factory/Document/DocumentQuestion.vue     |  2 +-
 .../Factory/Document/FormDocument.test.ts     | 47 +++++++++++++++++++
 .../Factory/Document/FormDocument.vue         | 12 ++++-
 .../components/Factory/Document/blockFocus.ts |  6 +++
 5 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/FormDocument.test.ts

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 7dc4f658..6143bb92 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -1,7 +1,8 @@
 <template>
   <section
+    :id="`row-${group.uuid}`"
     :aria-labelledby="`${id}-label`"
-    class="rounded-lg border border-grey-200 bg-grey-50 py-2 pr-2"
+    class="scroll-mt-4 rounded-lg border border-grey-200 bg-grey-50 py-2 pr-2"
     :class="isOpen && 'ring-1 ring-blue-500'"
   >
     <div class="flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3">
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 37f8d992..65bec435 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="`row-${block.uuid}`" class="group/question flex items-start">
+  <div :id="`row-${block.uuid}`" class="group/question flex scroll-mt-4 items-start">
     <div class="flex w-12 shrink-0 flex-col items-end gap-1 pr-2 pt-3">
       <span
         aria-hidden="true"
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
new file mode 100644
index 00000000..978ec579
--- /dev/null
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -0,0 +1,47 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import FormDocument from "./FormDocument.vue";
+
+const blocks = [
+    { id: 1, uuid: "b1", type: "none", message: "<p>Welcome</p>" },
+    { id: 2, uuid: "b2", type: "none", message: "<p>Second</p>" },
+] as FormBlockModel[];
+
+const stubs = {
+    DocumentList: {
+        template: `<div><div id="row-b1" /><div id="row-b2" /></div>`,
+    },
+    BlockLogicEditor: true,
+};
+
+let wrapper: VueWrapper | undefined;
+const scrolled = vi.fn();
+
+describe("the form document", () => {
+    beforeEach(() => {
+        Element.prototype.scrollIntoView = function (this: Element) {
+            scrolled(this.id);
+        };
+        scrolled.mockClear();
+        useForm().$reset();
+        useWorkbench().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("scrolls the question opened by link into view once it loads", async () => {
+        wrapper = mount(FormDocument, {
+            props: { status: "loading" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        useForm().blocks = blocks;
+        useWorkbench().block = blocks[1];
+        await wrapper.setProps({ status: "loaded" });
+        await wrapper.vm.$nextTick();
+
+        expect(scrolled).toHaveBeenCalledWith("row-b2");
+    });
+});
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..04128151 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -53,7 +53,7 @@ import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.v
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
 import { questionNumbers } from "./questionSummary";
-import { focusBlock, useAddBlock } from "./blockFocus";
+import { focusBlock, scrollToBlock, useAddBlock } from "./blockFocus";
 
 const props = defineProps<{
   status: "loading" | "failed" | "loaded";
@@ -95,6 +95,16 @@ watch(
   },
 );
 
+// a question opened by link (?block=) may sit far down
+watch(
+  () => props.status,
+  (status) => {
+    if (status === "loaded" && workbench.block) {
+      scrollToBlock(workbench.block.uuid);
+    }
+  },
+);
+
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
 const countLine = computed(() => {
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index ee244b86..c2cf383f 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -22,6 +22,12 @@ export async function focusBlock(block: FormBlockModel | null): Promise<boolean>
     return name !== null;
 }
 
+// brings a question or group to the top of the document
+export async function scrollToBlock(uuid: string) {
+    await nextTick();
+    document.getElementById(`row-${uuid}`)?.scrollIntoView({ block: "start" });
+}
+
 // a new block opens with the cursor in it
 export function useAddBlock() {
     const store = useForm();

From 3943fa4cac45c3d6a98fae02fb68a3e89ba8740b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:25:47 +0200
Subject: [PATCH 008/153] feat: add an outline to jump to a question

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentOutline.test.ts  | 44 +++++++++
 .../Factory/Document/DocumentOutline.vue      | 78 ++++++++++++++++
 .../Factory/Document/FormDocument.test.ts     | 17 +++-
 .../Factory/Document/FormDocument.vue         | 92 ++++++++++++++++---
 4 files changed, 219 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/DocumentOutline.test.ts
 create mode 100644 resources/js/components/Factory/Document/DocumentOutline.vue

diff --git a/resources/js/components/Factory/Document/DocumentOutline.test.ts b/resources/js/components/Factory/Document/DocumentOutline.test.ts
new file mode 100644
index 00000000..20a8cf47
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentOutline.test.ts
@@ -0,0 +1,44 @@
+import { mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import DocumentOutline from "./DocumentOutline.vue";
+
+const blocks = [
+    { id: 1, uuid: "q1", type: "none", message: "<p>Welcome</p>" },
+    { id: 2, uuid: "g1", type: "group", title: "Food" },
+    { id: 3, uuid: "q2", type: "radio", message: "", parent_block: "g1" },
+    { id: 4, uuid: "q3", type: "input-short", message: "<p>Name?</p>" },
+] as FormBlockModel[];
+
+const numbers = { q1: 1, q2: 2, q3: 3 };
+
+describe("the outline", () => {
+    beforeEach(() => {
+        useForm().$reset();
+        useWorkbench().$reset();
+        useForm().blocks = blocks;
+    });
+
+    it("lists questions in document order under their group, never by id", () => {
+        const wrapper = mount(DocumentOutline, { props: { numbers } });
+        const lines = wrapper.findAll("li").map((li) => li.text());
+
+        expect(lines).toEqual([
+            "1Welcome",
+            "Food",
+            "2No question text yet",
+            "3Name?",
+        ]);
+    });
+
+    it("marks the open question and says which one was picked", async () => {
+        useWorkbench().block = blocks[3];
+        const wrapper = mount(DocumentOutline, { props: { numbers } });
+        const current = wrapper.find("[aria-current=true]");
+
+        expect(current.text()).toBe("3Name?");
+
+        await wrapper.findAll("button")[0].trigger("click");
+        expect(wrapper.emitted("pick")?.[0]).toEqual([blocks[0]]);
+    });
+});
diff --git a/resources/js/components/Factory/Document/DocumentOutline.vue b/resources/js/components/Factory/Document/DocumentOutline.vue
new file mode 100644
index 00000000..7adedab8
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentOutline.vue
@@ -0,0 +1,78 @@
+<template>
+  <nav :aria-labelledby="`${id}-title`" class="px-2 py-3">
+    <div class="flex h-8 items-center justify-between pl-2">
+      <h2 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
+        Outline
+      </h2>
+      <slot name="close" />
+    </div>
+    <ul class="mt-1 flex flex-col gap-px">
+      <li v-for="item in items" :key="item.block.uuid">
+        <div
+          v-if="item.block.type === 'group'"
+          class="mt-1.5 flex h-7 items-center gap-1.5 px-2 text-xs font-semibold text-grey-700"
+        >
+          <D9Icon name="layer-group" aria-hidden="true" />
+          <span class="truncate">{{ item.block.title || "Group" }}</span>
+        </div>
+        <button
+          v-else
+          type="button"
+          class="flex h-8 w-full items-center gap-2 rounded-md pr-2 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          :class="[
+            item.inGroup ? 'pl-5' : 'pl-2',
+            isCurrent(item.block)
+              ? 'bg-blue-50 font-medium text-blue-700 hover:bg-blue-100'
+              : 'text-grey-800 hover:bg-grey-100',
+          ]"
+          :aria-current="isCurrent(item.block) ? 'true' : undefined"
+          @click="emit('pick', item.block)"
+        >
+          <span
+            class="w-5 shrink-0 text-right tabular-nums"
+            :class="isCurrent(item.block) ? 'text-blue-700' : 'text-grey-600'"
+            >{{ numbers[item.block.uuid] }}</span
+          >
+          <span dir="auto" class="truncate">{{
+            plainText(item.block.message) || "No question text yet"
+          }}</span>
+        </button>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, useId } from "vue";
+import { D9Icon } from "@deck9/ui";
+import { useForm, useWorkbench } from "@/stores";
+import { plainText } from "./questionSummary";
+
+defineProps<{
+  numbers: Record<string, number>;
+}>();
+const emit = defineEmits<{ pick: [block: FormBlockModel] }>();
+
+const store = useForm();
+const workbench = useWorkbench();
+const id = useId();
+
+// the document's order: each group, then its questions
+const items = computed(() => {
+  const blocks = store.blocks ?? [];
+
+  return blocks
+    .filter((block) => !block.parent_block)
+    .flatMap((block) => [
+      { block, inGroup: false },
+      ...(block.type === "group"
+        ? blocks
+            .filter((child) => child.parent_block === block.uuid)
+            .map((child) => ({ block: child, inGroup: true }))
+        : []),
+    ]);
+});
+
+const isCurrent = (block: FormBlockModel) =>
+  workbench.block?.uuid === block.uuid;
+</script>
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 978ec579..d04ceae5 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -1,4 +1,4 @@
-import { mount, VueWrapper } from "@vue/test-utils";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import FormDocument from "./FormDocument.vue";
@@ -44,4 +44,19 @@ describe("the form document", () => {
 
         expect(scrolled).toHaveBeenCalledWith("row-b2");
     });
+
+    it("opens and scrolls to a question picked in the outline", async () => {
+        useForm().blocks = blocks;
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        await wrapper.findAll("nav li button")[1].trigger("click");
+        await flushPromises();
+
+        expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
+        expect(scrolled).toHaveBeenCalledWith("row-b2");
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 04128151..1cd299e2 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -1,19 +1,44 @@
 <template>
-  <div
-    id="form-document"
-    ref="root"
-    class="h-full w-full overflow-y-auto bg-white"
-  >
-    <div class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10">
+  <div class="relative flex h-full w-full">
+    <div
+      class="hidden w-[232px] shrink-0 overflow-y-auto border-r border-grey-200 bg-grey-50 xl:block"
+    >
+      <DocumentOutline
+        v-if="status === 'loaded'"
+        :numbers="numbers"
+        @pick="pick"
+      />
+    </div>
+
+    <div
+      id="form-document"
+      ref="root"
+      class="h-full min-w-0 flex-1 overflow-y-auto bg-white"
+    >
+      <div
+        class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10"
+      >
       <div v-if="status !== 'loaded'" class="pl-12">
         <QuestionsLoadState :status="status" @retry="retry" />
       </div>
 
       <template v-else>
         <h1 class="sr-only">Questions</h1>
-        <p class="mb-4 pl-12 text-sm tabular-nums text-grey-600">
-          {{ countLine }}
-        </p>
+        <div class="mb-4 flex items-center justify-between gap-2 pl-12">
+          <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
+          <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view -->
+          <button
+            v-if="store.hasBlocks"
+            type="button"
+            class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:h-8 lg:absolute lg:left-4 lg:top-3 lg:z-10 xl:hidden"
+            aria-haspopup="dialog"
+            :aria-expanded="outlineOpen"
+            @click="outlineOpen = true"
+          >
+            <D9Icon name="list-ul" aria-hidden="true" />
+            Outline
+          </button>
+        </div>
 
         <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
         <EmptyState
@@ -39,21 +64,54 @@
           />
         </div>
       </template>
+      </div>
     </div>
   </div>
+
+  <Dialog
+    :open="outlineOpen"
+    class="relative z-50 xl:hidden"
+    aria-label="Outline"
+    @close="outlineOpen = false"
+  >
+    <div class="fixed inset-0 bg-grey-900/20" aria-hidden="true" />
+    <DialogPanel
+      class="fixed inset-y-0 left-0 w-[232px] overflow-y-auto border-r border-grey-200 bg-grey-50 shadow-xl"
+    >
+      <DocumentOutline :numbers="numbers" @pick="pick">
+        <template #close>
+          <button
+            type="button"
+            aria-label="Close outline"
+            class="grid h-11 w-11 place-items-center rounded-md text-grey-600 hover:bg-grey-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:h-8 sm:w-8"
+            @click="outlineOpen = false"
+          >
+            <D9Icon name="xmark" />
+          </button>
+        </template>
+      </DocumentOutline>
+    </DialogPanel>
+  </Dialog>
   <BlockLogicEditor />
 </template>
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
-import { D9Button } from "@deck9/ui";
+import { Dialog, DialogPanel } from "@headlessui/vue";
+import { D9Button, D9Icon } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
 import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
+import DocumentOutline from "./DocumentOutline.vue";
 import { questionNumbers } from "./questionSummary";
-import { focusBlock, scrollToBlock, useAddBlock } from "./blockFocus";
+import {
+  cursorFor,
+  focusBlock,
+  scrollToBlock,
+  useAddBlock,
+} from "./blockFocus";
 
 const props = defineProps<{
   status: "loading" | "failed" | "loaded";
@@ -105,6 +163,18 @@ watch(
   },
 );
 
+const outlineOpen = ref(false);
+
+// jumps to a question and puts the cursor in it
+const pick = async (block: FormBlockModel) => {
+  outlineOpen.value = false;
+  // the closing panel gives focus back to its button first
+  await nextTick();
+  cursorFor.value = block.uuid;
+  workbench.putOnWorkbench(block);
+  scrollToBlock(block.uuid);
+};
+
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
 const countLine = computed(() => {

From 1c57ee6a262a5be835e43efe773238ef1f6e05da Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:26:55 +0200
Subject: [PATCH 009/153] feat: open a question's settings as a bottom sheet on
 phones

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts     | 74 +++++++++++++++++++
 .../Factory/Document/QuestionCard.vue         | 43 ++++++++++-
 .../Factory/Document/QuestionSettings.vue     | 11 ++-
 3 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/QuestionCard.test.ts

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
new file mode 100644
index 00000000..28f89cd6
--- /dev/null
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -0,0 +1,74 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useWorkbench } from "@/stores";
+import QuestionCard from "./QuestionCard.vue";
+
+const block = {
+    id: 4,
+    uuid: "q4",
+    type: "input-short",
+    message: "<p>Your name?</p>",
+} as FormBlockModel;
+
+const stubs = {
+    Editor: true,
+    BlockMenu: true,
+    QuestionSettings: { props: ["id"], template: `<div :id="id">settings</div>` },
+};
+
+let wrapper: VueWrapper | undefined;
+
+const mountCard = (phone: boolean) => {
+    window.matchMedia = vi.fn().mockReturnValue({
+        matches: phone,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+    });
+    wrapper = mount(QuestionCard, {
+        props: { block, number: 4 },
+        global: { stubs },
+        attachTo: document.body,
+    });
+    return wrapper;
+};
+const settingsButton = () =>
+    wrapper!.findAll("button").find((b) => b.text() === "Settings")!;
+
+describe("a question's settings", () => {
+    beforeEach(() => {
+        globalThis.ResizeObserver ??= class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        } as unknown as typeof ResizeObserver;
+        useWorkbench().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("open inside the card on a wider screen", async () => {
+        mountCard(false);
+        await settingsButton().trigger("click");
+
+        expect(wrapper!.text()).toContain("settings");
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+
+    it("open as a bottom sheet on a phone, and Done closes it", async () => {
+        mountCard(true);
+        await settingsButton().trigger("click");
+        await flushPromises();
+
+        const sheet = document.querySelector("[role=dialog]");
+        expect(sheet?.textContent).toContain("Question 4 settings");
+        expect(sheet?.textContent).toContain("settings");
+
+        const done = [...sheet!.querySelectorAll("button")].find(
+            (b) => b.textContent?.trim() === "Done",
+        );
+        done!.click();
+        await flushPromises();
+
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+});
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index a651d573..7f3eb8d4 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -42,6 +42,7 @@
           class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           :aria-expanded="settingsOpen"
           :aria-controls="`${id}-settings`"
+          :aria-haspopup="isPhone ? 'dialog' : undefined"
           @click="settingsOpen = !settingsOpen"
         >
           Settings
@@ -65,16 +66,54 @@
     </div>
 
     <QuestionSettings
-      v-if="settingsOpen"
+      v-if="settingsOpen && !isPhone"
       :id="`${id}-settings`"
       :block="block"
       :interaction-type="interactionType"
     />
+
+    <Dialog
+      :open="settingsOpen && isPhone"
+      class="relative z-50"
+      @close="settingsOpen = false"
+    >
+      <div class="fixed inset-0 bg-grey-900/40" aria-hidden="true" />
+      <DialogPanel
+        class="fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
+      >
+        <span
+          aria-hidden="true"
+          class="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-grey-300"
+        />
+        <div class="flex shrink-0 items-center justify-between pl-4 pr-1">
+          <DialogTitle class="text-base font-semibold text-grey-900">
+            Question {{ number }} settings
+          </DialogTitle>
+          <button
+            type="button"
+            class="h-11 rounded-md px-3 text-base font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            @click="settingsOpen = false"
+          >
+            Done
+          </button>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto px-4 pb-6 pt-1">
+          <QuestionSettings
+            :id="`${id}-settings`"
+            :block="block"
+            :interaction-type="interactionType"
+            sheet
+          />
+        </div>
+      </DialogPanel>
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, provide, ref, watch } from "vue";
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { useMediaQuery } from "@vueuse/core";
 import { D9Icon, D9Select, D9Switch } from "@deck9/ui";
 import { useLogic, useWorkbench } from "@/stores";
 import Editor from "@/components/Factory/Shared/Editor.vue";
@@ -105,6 +144,8 @@ const message = ref(props.block.message ?? "");
 const type = ref(types.value.find((item) => item.value === props.block.type));
 const required = ref(props.block.is_required ?? false);
 const settingsOpen = ref(false);
+// below Tailwind's sm, Settings opens as a bottom sheet
+const isPhone = useMediaQuery("(max-width: 639px)");
 
 watch(message, (value) => workbench.updateBlock({ message: value }));
 watch(required, (value) => workbench.updateBlock({ is_required: value }));
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index 0afbb7f7..0ef0090e 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -2,9 +2,14 @@
   <div
     role="group"
     :aria-labelledby="`${id}-title`"
-    class="space-y-6 rounded-md border border-grey-200 bg-grey-50 p-3 sm:p-4"
+    class="space-y-6"
+    :class="!sheet && 'rounded-md border border-grey-200 bg-grey-50 p-3 sm:p-4'"
   >
-    <h3 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
+    <h3
+      :id="`${id}-title`"
+      class="text-xs font-semibold text-grey-600"
+      :class="sheet && 'sr-only'"
+    >
       Settings
     </h3>
 
@@ -78,6 +83,8 @@ const props = defineProps<{
   id: string;
   block: FormBlockModel;
   interactionType?: FormBlockInteractionType;
+  // in the phone's bottom sheet, which has its own title
+  sheet?: boolean;
 }>();
 
 const workbench = useWorkbench();

From 91186a393403610d55e6a3a0751cfed959818c24 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:28:55 +0200
Subject: [PATCH 010/153] fix: make the editor's controls 44 px on phones

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/BlockMenu.vue   | 2 +-
 .../js/components/Factory/Document/DocumentQuestion.vue  | 2 +-
 .../js/components/Factory/Document/FormDocument.vue      | 2 ++
 .../js/components/Factory/Document/QuestionCard.vue      | 9 ++++++---
 .../js/components/Factory/Main/ChoiceRowActions.vue      | 4 ++--
 resources/js/components/Factory/Main/ConfigureClicks.vue | 1 +
 resources/js/components/Factory/Shared/Editor.vue        | 2 +-
 resources/js/components/Factory/Shared/EditorButton.vue  | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 6c351edb..2805dfd8 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -6,7 +6,7 @@
   >
     <template #button>
       <span
-        class="grid h-9 w-9 place-items-center rounded-md border border-grey-300 bg-white text-grey-700 hover:bg-grey-100"
+        class="grid h-11 w-11 place-items-center rounded-md border border-grey-300 sm:h-9 sm:w-9 bg-white text-grey-700 hover:bg-grey-100"
       >
         <D9Icon name="ellipsis-h" />
         <span class="sr-only">{{ label }}</span>
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 65bec435..89b77fae 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -9,7 +9,7 @@
       <span
         aria-hidden="true"
         title="Drag to reorder"
-        class="document-grip grid h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
+        class="document-grip hidden h-6 w-6 cursor-grab sm:grid place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
       >
         <D9Icon name="grip-vertical" />
       </span>
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1cd299e2..bfdc9a76 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -50,6 +50,7 @@
         <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
+            class="min-h-11 sm:min-h-0"
             color="dark"
             icon="plus"
             icon-position="left"
@@ -57,6 +58,7 @@
           />
           <D9Button
             label="Add group"
+            class="min-h-11 sm:min-h-0"
             color="light"
             icon="layer-group"
             icon-position="left"
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 7f3eb8d4..2fb1f694 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -24,7 +24,10 @@
       </div>
 
       <div class="flex items-center gap-2">
-        <label :for="`${id}-required`" class="text-sm text-grey-700">
+        <label
+          :for="`${id}-required`"
+          class="flex h-11 items-center text-sm text-grey-700 sm:h-auto"
+        >
           Required
         </label>
         <D9Switch
@@ -39,7 +42,7 @@
       <div class="ml-auto flex items-center gap-1">
         <button
           type="button"
-          class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 sm:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           :aria-expanded="settingsOpen"
           :aria-controls="`${id}-settings`"
           :aria-haspopup="isPhone ? 'dialog' : undefined"
@@ -54,7 +57,7 @@
         </button>
         <button
           type="button"
-          class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 sm:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           @click="logic.showLogicEditor(block)"
         >
           Rules<span v-if="block.logics?.length" class="tabular-nums"
diff --git a/resources/js/components/Factory/Main/ChoiceRowActions.vue b/resources/js/components/Factory/Main/ChoiceRowActions.vue
index 58b546a6..498d2466 100644
--- a/resources/js/components/Factory/Main/ChoiceRowActions.vue
+++ b/resources/js/components/Factory/Main/ChoiceRowActions.vue
@@ -3,7 +3,7 @@
     <span
       aria-hidden="true"
       title="Drag to reorder"
-      class="handle grid h-9 w-6 cursor-grab place-items-center text-grey-500 hover:text-grey-900"
+      class="handle grid h-11 w-11 cursor-grab sm:h-9 sm:w-6 place-items-center text-grey-500 hover:text-grey-900"
     >
       <D9Icon name="grip-vertical" />
     </span>
@@ -11,7 +11,7 @@
       type="button"
       :aria-label="`Delete ${label}`"
       :title="`Delete ${label}`"
-      class="grid h-9 w-9 place-items-center rounded-md text-grey-500 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="grid h-11 w-11 place-items-center rounded-md text-grey-500 sm:h-9 sm:w-9 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="$emit('onDelete')"
     >
       <D9Icon name="trash" />
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index c8286a2e..23a6a921 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -29,6 +29,7 @@
     <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
       <D9Button
         label="Add new option"
+        class="min-h-11 sm:min-h-0"
         icon="plus"
         icon-position="left"
         color="dark"
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 5a5b6649..c6cfda5d 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -3,7 +3,7 @@
     <div
       role="group"
       aria-label="Text format"
-      class="mb-1 py-1 bg-white border border-grey-300 rounded-lg flex flex-wrap gap-y-2 items-center"
+      class="mb-1 py-1 bg-white border border-grey-300 rounded-lg flex items-center overflow-x-auto [&>div]:shrink-0 sm:flex-wrap sm:gap-y-2"
     >
       <div class="px-1">
         <EditorButton
diff --git a/resources/js/components/Factory/Shared/EditorButton.vue b/resources/js/components/Factory/Shared/EditorButton.vue
index 81d3fce4..46409c99 100644
--- a/resources/js/components/Factory/Shared/EditorButton.vue
+++ b/resources/js/components/Factory/Shared/EditorButton.vue
@@ -4,7 +4,7 @@
     :aria-label="label"
     :aria-pressed="isActive"
     :class="[
-      'rounded px-2 mx-px py-1 relative text-sm',
+      'rounded px-2 mx-px py-1 relative text-sm min-h-11 min-w-11 sm:min-h-0 sm:min-w-0',
       isActive
         ? 'bg-grey-300 text-grey-700'
         : 'text-grey-500 hover:bg-grey-200 bg-white',
@@ -14,7 +14,7 @@
     <D9Icon :name="icon" />
     <small
       v-if="subLabel"
-      class="absolute bottom-1 text-xxs font-bold leading-none rounded-full"
+      class="absolute bottom-3 sm:bottom-1 text-xxs font-bold leading-none rounded-full"
       >{{ subLabel }}</small
     >
   </button>

From 8644f3dae8df492650f7f23a16609057c9235741 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:30:24 +0200
Subject: [PATCH 011/153] fix: keep the top of the document in view on load

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Document/FormDocument.test.ts | 12 ++++++++----
 .../js/components/Factory/Document/FormDocument.vue  |  4 ++--
 .../js/components/Factory/Document/blockFocus.ts     |  9 ++++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index d04ceae5..072f8a9f 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -20,8 +20,11 @@ const scrolled = vi.fn();
 
 describe("the form document", () => {
     beforeEach(() => {
-        Element.prototype.scrollIntoView = function (this: Element) {
-            scrolled(this.id);
+        Element.prototype.scrollIntoView = function (
+            this: Element,
+            options?: boolean | ScrollIntoViewOptions,
+        ) {
+            scrolled(this.id, (options as ScrollIntoViewOptions)?.block);
         };
         scrolled.mockClear();
         useForm().$reset();
@@ -42,7 +45,8 @@ describe("the form document", () => {
         await wrapper.setProps({ status: "loaded" });
         await wrapper.vm.$nextTick();
 
-        expect(scrolled).toHaveBeenCalledWith("row-b2");
+        // the smallest scroll, so a question already in view stays put
+        expect(scrolled).toHaveBeenCalledWith("row-b2", "nearest");
     });
 
     it("opens and scrolls to a question picked in the outline", async () => {
@@ -57,6 +61,6 @@ describe("the form document", () => {
         await flushPromises();
 
         expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
-        expect(scrolled).toHaveBeenCalledWith("row-b2");
+        expect(scrolled).toHaveBeenCalledWith("row-b2", "start");
     });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index bfdc9a76..f7b2eda5 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -155,12 +155,12 @@ watch(
   },
 );
 
-// a question opened by link (?block=) may sit far down
+// a question opened by link (?block=) may sit far down; one in view stays put
 watch(
   () => props.status,
   (status) => {
     if (status === "loaded" && workbench.block) {
-      scrollToBlock(workbench.block.uuid);
+      scrollToBlock(workbench.block.uuid, "nearest");
     }
   },
 );
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index c2cf383f..f635378b 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -22,10 +22,13 @@ export async function focusBlock(block: FormBlockModel | null): Promise<boolean>
     return name !== null;
 }
 
-// brings a question or group to the top of the document
-export async function scrollToBlock(uuid: string) {
+// brings a question or group into view, by default to the top of the document
+export async function scrollToBlock(
+    uuid: string,
+    block: ScrollLogicalPosition = "start",
+) {
     await nextTick();
-    document.getElementById(`row-${uuid}`)?.scrollIntoView({ block: "start" });
+    document.getElementById(`row-${uuid}`)?.scrollIntoView({ block });
 }
 
 // a new block opens with the cursor in it

From efc44072e09596a86891dbc13be794e87ac37e30 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:32:47 +0200
Subject: [PATCH 012/153] fix: make a question's answer field without opening
 Settings

The Configure* parts create the block's interaction when they mount.
Keep QuestionSettings mounted (v-show) so a new Short text, Email,
Number, Long text, File, Rating, Scale or Date question gets its field.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts     | 45 +++++++++++++++++++
 .../Factory/Document/QuestionCard.vue         |  3 +-
 2 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/Factory/Document/QuestionCard.test.ts

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
new file mode 100644
index 00000000..f2f638a8
--- /dev/null
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -0,0 +1,45 @@
+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";
+
+const block = {
+    id: 4,
+    uuid: "q4",
+    type: "input-short",
+    message: "<p>Your name?</p>",
+    interactions: [],
+} as unknown as FormBlockModel;
+
+let wrapper: VueWrapper | undefined;
+
+describe("an open question", () => {
+    beforeEach(() => {
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("makes its answer field without opening Settings", async () => {
+        const workbench = useWorkbench();
+        useForm().mapping = { "input-short": "input" } as Record<
+            FormBlockType,
+            FormBlockInteractionType
+        >;
+        workbench.block = { ...block, interactions: [] };
+        vi.mocked(workbench.createInteraction).mockResolvedValue({
+            id: 9,
+            type: "input",
+            label: "",
+        } as unknown as FormBlockInteractionModel);
+
+        wrapper = mount(QuestionCard, {
+            props: { block: workbench.block, number: 4 },
+            global: { stubs: { Editor: true, BlockMenu: true } },
+        });
+        await flushPromises();
+
+        expect(workbench.createInteraction).toHaveBeenCalledWith("input");
+    });
+});
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index a651d573..5fd7323a 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -64,8 +64,9 @@
       </div>
     </div>
 
+    <!-- v-show: the Configure* parts make the answer field when they mount -->
     <QuestionSettings
-      v-if="settingsOpen"
+      v-show="settingsOpen"
       :id="`${id}-settings`"
       :block="block"
       :interaction-type="interactionType"

From c00f13e3e11e2e22578473776621d54397cf861b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:33:00 +0200
Subject: [PATCH 013/153] fix: give the Settings panel the id its button points
 at

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts          | 14 ++++++++++++++
 .../Factory/Document/QuestionSettings.vue          |  1 +
 2 files changed, 15 insertions(+)

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index f2f638a8..f5ccdd51 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -42,4 +42,18 @@ describe("an open question", () => {
 
         expect(workbench.createInteraction).toHaveBeenCalledWith("input");
     });
+
+    it("points the Settings button at its panel", () => {
+        wrapper = mount(QuestionCard, {
+            props: { block, number: 4 },
+            global: { stubs: { Editor: true, BlockMenu: true } },
+        });
+        const button = wrapper
+            .findAll("button")
+            .find((b) => b.text() === "Settings")!;
+
+        const panel = wrapper.find(`#${button.attributes("aria-controls")}`);
+        expect(panel.exists()).toBe(true);
+        expect(panel.attributes("role")).toBe("group");
+    });
 });
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index 0afbb7f7..675c6149 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="id"
     role="group"
     :aria-labelledby="`${id}-title`"
     class="space-y-6 rounded-md border border-grey-200 bg-grey-50 p-3 sm:p-4"

From 651590b2e98cc89f7af266954f2d41bd07effc8c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:34:30 +0200
Subject: [PATCH 014/153] fix: let a group be dragged by a grip in its header

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/DocumentGroup.vue  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 7dc4f658..d6462098 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -4,7 +4,16 @@
     class="rounded-lg border border-grey-200 bg-grey-50 py-2 pr-2"
     :class="isOpen && 'ring-1 ring-blue-500'"
   >
-    <div class="flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3">
+    <div
+      class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-1"
+    >
+      <span
+        aria-hidden="true"
+        title="Drag to reorder"
+        class="document-grip grid h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/header:opacity-100 lg:group-hover/header:opacity-100"
+      >
+        <D9Icon name="grip-vertical" />
+      </span>
       <D9Icon name="layer-group" aria-hidden="true" class="text-grey-600" />
       <label :id="`${id}-label`" :for="`${id}-name`" class="sr-only"
         >Group name</label

From 20608c44e97438fe6e5909703bffbd6d93728279 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:35:35 +0200
Subject: [PATCH 015/153] fix: keep focus near a deleted choice or policy

The row's Delete button and Cmd+Backspace now ask the list to delete.
Once the row is gone, focus moves to the row above, the new first row,
or the Add button. A failed delete leaves focus where it was.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ConfigureClicks.test.ts      | 82 +++++++++++++++++++
 .../Factory/Main/ConfigureClicks.vue          | 19 ++++-
 .../Factory/Main/ConfigureConsents.vue        | 20 ++++-
 .../Main/Interactions/ClickInteraction.vue    |  3 +-
 .../Main/Interactions/ConsentInteraction.vue  |  6 +-
 .../Factory/utils/useKeyboardNavigation.ts    | 17 ++--
 6 files changed, 133 insertions(+), 14 deletions(-)
 create mode 100644 resources/js/components/Factory/Main/ConfigureClicks.test.ts

diff --git a/resources/js/components/Factory/Main/ConfigureClicks.test.ts b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
new file mode 100644
index 00000000..89e8a4f9
--- /dev/null
+++ b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
@@ -0,0 +1,82 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import ConfigureClicks from "./ConfigureClicks.vue";
+
+const choice = (id: number, label: string) =>
+    ({
+        id,
+        type: "button",
+        label,
+        sequence: id,
+        is_editable: true,
+    }) as FormBlockInteractionModel;
+
+let wrapper: VueWrapper | undefined;
+
+const mountChoices = (...labels: string[]) => {
+    const workbench = useWorkbench();
+    useForm().mapping = { radio: "button" } as Record<
+        FormBlockType,
+        FormBlockInteractionType
+    >;
+    workbench.block = {
+        id: 1,
+        uuid: "q1",
+        type: "radio",
+        interactions: labels.map((label, i) => choice(i + 1, label)),
+    } as unknown as FormBlockModel;
+    vi.mocked(workbench.deleteInteraction).mockImplementation(
+        async ({ id }) => {
+            const list = workbench.block!.interactions!;
+            list.splice(
+                list.findIndex((item) => item.id === id),
+                1,
+            );
+        },
+    );
+
+    wrapper = mount(ConfigureClicks, { attachTo: document.body });
+    return wrapper;
+};
+
+const deleteButton = (label: string) =>
+    wrapper!.find(`button[aria-label='Delete choice “${label}”']`);
+
+describe("deleting a choice in its row", () => {
+    beforeEach(() => {
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("moves focus to the choice above", async () => {
+        mountChoices("Yes", "No", "Maybe");
+
+        await deleteButton("No").trigger("click");
+        await flushPromises();
+
+        expect(document.activeElement?.id).toBe("1_label");
+    });
+
+    it("moves focus to the new first choice when the first is gone", async () => {
+        mountChoices("Yes", "No");
+
+        await deleteButton("Yes").trigger("click");
+        await flushPromises();
+
+        expect(document.activeElement?.id).toBe("2_label");
+    });
+
+    it("moves focus to Add new option when no choice is left", async () => {
+        mountChoices("Yes");
+
+        await deleteButton("Yes").trigger("click");
+        await flushPromises();
+
+        const focused = document.activeElement;
+        expect(focused?.tagName).toBe("BUTTON");
+        expect(focused?.textContent).toContain("Add new option");
+    });
+});
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index c8286a2e..d06d852a 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -21,12 +21,12 @@
           @next="focusNextItem"
           @nextSoft="focusNextItemSoft"
           @previous="focusPreviousItem"
-          @onDelete="focusNeighborItem"
+          @onDelete="deleteItem"
         />
       </Draggable>
     </Container>
 
-    <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+    <div ref="addRow" class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
       <D9Button
         label="Add new option"
         icon="plus"
@@ -56,6 +56,7 @@ const { activeInteractions, editableInteractions } = useActiveInteractions(
 );
 
 const isCreatingInteraction = ref(false);
+const addRow = ref<HTMLElement | null>(null);
 
 const onDrop = ({ removedIndex, addedIndex }: any): void => {
   if (removedIndex === null || addedIndex === null) {
@@ -83,6 +84,20 @@ const createClickInteraction = async () => {
   }
 };
 
+const deleteItem = async (index: number) => {
+  const item = editableInteractions.value?.[index];
+  if (!item) return;
+
+  await workbench.deleteInteraction(item);
+
+  // a failed delete keeps the row, and focus stays in it
+  if (editableInteractions.value?.includes(item)) return;
+
+  if (!(await focusNeighborItem(index))) {
+    addRow.value?.querySelector("button")?.focus();
+  }
+};
+
 const {
   bindTemplateRefsForTraversables,
   focusNextItem,
diff --git a/resources/js/components/Factory/Main/ConfigureConsents.vue b/resources/js/components/Factory/Main/ConfigureConsents.vue
index 4fcf211d..ae69b019 100644
--- a/resources/js/components/Factory/Main/ConfigureConsents.vue
+++ b/resources/js/components/Factory/Main/ConfigureConsents.vue
@@ -21,11 +21,12 @@
           v-bind="{ item, index }"
           :key="`${item.id}-${index}`"
           :ref="bindTemplateRefsForTraversables.bind(index)"
+          @onDelete="deleteItem"
         />
       </Draggable>
     </Container>
 
-    <div class="mt-8">
+    <div ref="addRow" class="mt-8">
       <D9Button
         label="Add new policy"
         icon="plus"
@@ -51,6 +52,7 @@ import { storeToRefs } from "pinia";
 const workbench = useWorkbench();
 const { currentInteractions } = storeToRefs(workbench);
 const isCreatingInteraction = ref(false);
+const addRow = ref<HTMLElement | null>(null);
 
 const onDrop = ({ removedIndex, addedIndex }: any): void => {
   if (removedIndex === null || addedIndex === null) {
@@ -78,7 +80,21 @@ const createConsentPolicy = async () => {
   }
 };
 
-const { bindTemplateRefsForTraversables, focusLastItem } =
+const deleteItem = async (index: number) => {
+  const item = currentInteractions.value?.[index];
+  if (!item) return;
+
+  await workbench.deleteInteraction(item);
+
+  // a failed delete keeps the policy, and focus stays in it
+  if (currentInteractions.value?.includes(item)) return;
+
+  if (!(await focusNeighborItem(index))) {
+    addRow.value?.querySelector("button")?.focus();
+  }
+};
+
+const { bindTemplateRefsForTraversables, focusLastItem, focusNeighborItem } =
   useKeyboardNavigation(currentInteractions, () => {
     return;
   });
diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index 2a6c02ff..5a8ce1bf 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -37,7 +37,7 @@
       </section>
       <ChoiceRowActions
         :label="label ? `choice “${label}”` : `choice ${index + 1}`"
-        @onDelete="workbench.deleteInteraction(item)"
+        @onDelete="emit('onDelete', index)"
       />
     </div>
   </div>
@@ -100,7 +100,6 @@ const keyboardCommands = async (event: KeyboardEvent) => {
     case "Backspace":
       if (event.metaKey) {
         emit("onDelete", props.index);
-        await workbench.deleteInteraction(props.item);
       }
       break;
 
diff --git a/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue b/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
index 1d83f1fb..9f272c30 100644
--- a/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
@@ -9,7 +9,7 @@
       <ChoiceRowActions
         class="ml-auto"
         :label="label ? `policy “${label}”` : `policy ${index + 1}`"
-        @onDelete="workbench.deleteInteraction(item)"
+        @onDelete="emit('onDelete', index)"
       />
     </div>
     <div class="mt-2 flex items-center">
@@ -67,6 +67,10 @@ const props = defineProps<{
   item: FormBlockInteractionModel;
 }>();
 
+const emit = defineEmits<{
+  (e: "onDelete", index: number): void;
+}>();
+
 const labelElement = ref(null) as unknown as Ref<HTMLElement>;
 
 const label: Ref<FormBlockInteractionModel["label"]> = ref(props.item.label);
diff --git a/resources/js/components/Factory/utils/useKeyboardNavigation.ts b/resources/js/components/Factory/utils/useKeyboardNavigation.ts
index 19c988ec..3ce87fa2 100644
--- a/resources/js/components/Factory/utils/useKeyboardNavigation.ts
+++ b/resources/js/components/Factory/utils/useKeyboardNavigation.ts
@@ -1,4 +1,4 @@
-import { Ref, ref } from "vue";
+import { nextTick, Ref, ref } from "vue";
 
 export function useKeyboardNavigation(
     currentInteractions,
@@ -19,13 +19,16 @@ export function useKeyboardNavigation(
     };
 
     // choose a next item
-    const focusNeighborItem = (fromIndex: number) => {
-        if (!currentInteractions.value) {
-            return;
-        }
+    // once the row at fromIndex is gone: focus the row before it, or the
+    // new first row. False when no row is left.
+    const focusNeighborItem = async (fromIndex: number) => {
+        await nextTick();
+
+        const destination =
+            currentInteractions.value?.[Math.max(fromIndex - 1, 0)];
+        traversables.value[destination?.id]?.focus();
 
-        const targetIndex = fromIndex === 0 ? 0 : fromIndex - 1;
-        focusNextItemSoft(targetIndex - 1);
+        return Boolean(destination);
     };
 
     const focusNextItem = async (fromIndex: number, create = true) => {

From 7bdefa3341562bb3d97f795f25c63ed4f9279baf Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:36:00 +0200
Subject: [PATCH 016/153] fix: leave the cursor alone when a new question can't
 be made

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/blockFocus.test.ts       | 35 +++++++++++++++++++
 .../components/Factory/Document/blockFocus.ts |  7 +++-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/Factory/Document/blockFocus.test.ts

diff --git a/resources/js/components/Factory/Document/blockFocus.test.ts b/resources/js/components/Factory/Document/blockFocus.test.ts
new file mode 100644
index 00000000..6b243339
--- /dev/null
+++ b/resources/js/components/Factory/Document/blockFocus.test.ts
@@ -0,0 +1,35 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import { cursorFor, useAddBlock } from "./blockFocus";
+
+const open = { id: 3, uuid: "q3", type: "radio" } as FormBlockModel;
+const added = { id: 4, uuid: "q4", type: "radio" } as FormBlockModel;
+
+describe("adding a question", () => {
+    beforeEach(() => {
+        useWorkbench().$reset();
+        cursorFor.value = null;
+    });
+
+    it("puts the cursor in the new question", async () => {
+        const workbench = useWorkbench();
+        workbench.block = open;
+        vi.mocked(useForm().createFormBlock).mockImplementation(async () => {
+            workbench.block = added;
+        });
+
+        await useAddBlock().addBlock(open);
+
+        expect(cursorFor.value).toBe("q4");
+    });
+
+    it("leaves the cursor alone when the question can't be made", async () => {
+        const workbench = useWorkbench();
+        workbench.block = open;
+        vi.mocked(useForm().createFormBlock).mockResolvedValue(undefined);
+
+        await useAddBlock().addBlock(open);
+
+        expect(cursorFor.value).toBeNull();
+    });
+});
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index ee244b86..3cf67911 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -30,8 +30,13 @@ export function useAddBlock() {
     const addBlock = async (
         ...args: Parameters<typeof store.createFormBlock>
     ) => {
+        const before = workbench.block;
         await store.createFormBlock(...args);
-        await focusBlock(workbench.block);
+
+        // a failed create keeps the open block: leave the cursor where it is
+        if (workbench.block !== before) {
+            await focusBlock(workbench.block);
+        }
     };
 
     return { addBlock };

From a7fa8d5735705e9606598e6b2e2360091c245d8d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:36:34 +0200
Subject: [PATCH 017/153] refactor: drop form store state the old storyboard
 used

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/stores/form.ts | 50 -------------------------------------
 1 file changed, 50 deletions(-)

diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index f77f3084..8bb77a1b 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -23,9 +23,6 @@ interface FormStore {
     form: FormModel | null;
     blocks: FormBlockModel[] | null;
     mapping: Record<FormBlockType, FormBlockInteractionType> | null;
-    isCssTransitionEnabled: boolean;
-    isBlockMenuEnabled: boolean;
-    showLogicInStoryboard: boolean;
 }
 
 export const useForm = defineStore("form", {
@@ -34,9 +31,6 @@ export const useForm = defineStore("form", {
             form: null,
             mapping: null,
             blocks: null,
-            isCssTransitionEnabled: true,
-            isBlockMenuEnabled: true,
-            showLogicInStoryboard: true,
         };
     },
 
@@ -49,30 +43,6 @@ export const useForm = defineStore("form", {
             return state.blocks && state.blocks.length ? true : false;
         },
 
-        countGroups: (state): Record<string, number> => {
-            if (!state.blocks) {
-                return {};
-            }
-
-            const containers = { root: 0 };
-
-            state.blocks
-                .filter((i) => i.type === "group")
-                .forEach((i) => (containers[i.uuid] = 0));
-
-            return state.blocks
-                ?.map((i) => i.parent_block)
-                .reduce((acc, item) => {
-                    if (item) {
-                        acc[item] = acc[item] ? acc[item] + 1 : 1;
-                    } else {
-                        acc["root"] += 1;
-                    }
-
-                    return acc;
-                }, containers);
-        },
-
         formUrl: (state): string => {
             if (state.form) {
                 return window.route("forms.show", { uuid: state.form?.uuid });
@@ -81,10 +51,6 @@ export const useForm = defineStore("form", {
             return "";
         },
 
-        showBlockMenus: (state): boolean => {
-            return state.isBlockMenuEnabled;
-        },
-
         blocksTree: (state): TreeNode[] => {
             const tree: TreeNode[] = [];
             const map: Record<string, TreeNode> = {};
@@ -114,22 +80,6 @@ export const useForm = defineStore("form", {
             this.blocks = null;
         },
 
-        setCssTransition(payload: boolean) {
-            this.isCssTransitionEnabled = payload;
-        },
-
-        enableBlockMenu() {
-            this.isBlockMenuEnabled = true;
-        },
-
-        disableBlockMenu() {
-            this.isBlockMenuEnabled = false;
-        },
-
-        toggleLogicInStoryboard() {
-            this.showLogicInStoryboard = !this.showLogicInStoryboard;
-        },
-
         async refreshForm(includeSubmissions = false) {
             if (this.form) {
                 const response = await callGetForm(this.form);

From 1949324b27458086778bf10ec178688b71f6294e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:42:29 +0200
Subject: [PATCH 018/153] fix: hide the group grip on phones, like the question
 grip

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

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 4e0237eb..16d7bfba 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -6,12 +6,12 @@
     :class="isOpen && 'ring-1 ring-blue-500'"
   >
     <div
-      class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-1"
+      class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3 sm:pl-1"
     >
       <span
         aria-hidden="true"
         title="Drag to reorder"
-        class="document-grip grid h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/header:opacity-100 lg:group-hover/header:opacity-100"
+        class="document-grip hidden h-6 w-6 cursor-grab place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 sm:grid lg:opacity-0 lg:group-focus-within/header:opacity-100 lg:group-hover/header:opacity-100"
       >
         <D9Icon name="grip-vertical" />
       </span>

From e1fed98b1fc4f1a98cb03b453b10ff8d83eff91a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:43:47 +0200
Subject: [PATCH 019/153] fix: move between visible choices only, with a custom
 answer on

The keyboard helper got the list with the hidden custom answer row, but
row numbers count only the visible choices. Focus after a delete could
land on the hidden row, and Enter on the last choice threw.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ConfigureClicks.test.ts      | 46 ++++++++++++++++++-
 .../Factory/Main/ConfigureClicks.vue          |  4 +-
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Main/ConfigureClicks.test.ts b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
index 89e8a4f9..fa546e55 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.test.ts
+++ b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
@@ -15,6 +15,20 @@ const choice = (id: number, label: string) =>
 let wrapper: VueWrapper | undefined;
 
 const mountChoices = (...labels: string[]) => {
+    return mountList(labels.map((label, i) => choice(i + 1, label)));
+};
+
+// a custom answer ("Other") is a hidden row in the same list
+const custom = (sequence: number) =>
+    ({
+        id: 99,
+        type: "button",
+        label: "Other",
+        sequence,
+        is_editable: false,
+    }) as FormBlockInteractionModel;
+
+const mountList = (interactions: FormBlockInteractionModel[]) => {
     const workbench = useWorkbench();
     useForm().mapping = { radio: "button" } as Record<
         FormBlockType,
@@ -24,7 +38,7 @@ const mountChoices = (...labels: string[]) => {
         id: 1,
         uuid: "q1",
         type: "radio",
-        interactions: labels.map((label, i) => choice(i + 1, label)),
+        interactions,
     } as unknown as FormBlockModel;
     vi.mocked(workbench.deleteInteraction).mockImplementation(
         async ({ id }) => {
@@ -69,6 +83,15 @@ describe("deleting a choice in its row", () => {
         expect(document.activeElement?.id).toBe("2_label");
     });
 
+    it("skips a custom answer row when it moves focus", async () => {
+        mountList([custom(0), choice(1, "Yes"), choice(2, "No")]);
+
+        await deleteButton("No").trigger("click");
+        await flushPromises();
+
+        expect(document.activeElement?.id).toBe("1_label");
+    });
+
     it("moves focus to Add new option when no choice is left", async () => {
         mountChoices("Yes");
 
@@ -80,3 +103,24 @@ describe("deleting a choice in its row", () => {
         expect(focused?.textContent).toContain("Add new option");
     });
 });
+
+describe("Enter on the last choice", () => {
+    beforeEach(() => {
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("adds a choice, also with a custom answer last", async () => {
+        mountList([choice(1, "Yes"), choice(2, "No"), custom(3)]);
+        vi.mocked(useWorkbench().createInteraction).mockResolvedValue(
+            undefined,
+        );
+
+        await wrapper!.find("[id='2_label']").trigger("keyup", { key: "Enter" });
+        await flushPromises();
+
+        expect(useWorkbench().createInteraction).toHaveBeenCalledWith("button");
+    });
+});
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index d06d852a..4994f92c 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -51,7 +51,7 @@ import { useKeyboardNavigation } from "@/components/Factory/utils/useKeyboardNav
 import useActiveInteractions from "../Shared/useActiveInteractions";
 
 const workbench = useWorkbench();
-const { activeInteractions, editableInteractions } = useActiveInteractions(
+const { editableInteractions } = useActiveInteractions(
   workbench.block,
 );
 
@@ -105,7 +105,7 @@ const {
   focusPreviousItem,
   focusLastItem,
   focusNeighborItem,
-} = useKeyboardNavigation(activeInteractions, async () => {
+} = useKeyboardNavigation(editableInteractions, async () => {
   await createClickInteraction();
 });
 </script>

From 359284d92d688eed96812c33e5b12c1ac284127d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:44:30 +0200
Subject: [PATCH 020/153] fix: show a question's text flat in its card, without
 boxes

Editor gets a bare prop: no border around the toolbar and the text.
The card uses it and drops the word counter.

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

diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 5fd7323a..d01d4340 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -5,7 +5,7 @@
     <span :id="`${id}-text-label`" class="sr-only"
       >Question {{ number }} text</span
     >
-    <Editor :id="`${id}-text`" ref="editor" v-model="message" counter />
+    <Editor :id="`${id}-text`" ref="editor" v-model="message" bare />
 
     <ConfigureClicks v-if="interactionType === 'button'" />
     <ConfigureConsents v-else-if="interactionType === 'consent'" />
diff --git a/resources/js/components/Factory/Shared/Editor.test.ts b/resources/js/components/Factory/Shared/Editor.test.ts
index 0cf34603..c0a8c4c2 100644
--- a/resources/js/components/Factory/Shared/Editor.test.ts
+++ b/resources/js/components/Factory/Shared/Editor.test.ts
@@ -100,3 +100,20 @@ describe("block text counter", () => {
     expect(counter(wrapper)).toBe("3 chars, 0 words");
   });
 });
+
+describe("a bare editor", () => {
+  it("draws no box around its toolbar and text", async () => {
+    const wrapper = mount(Editor, {
+      props: { modelValue: "<p>Hi</p>", bare: true },
+      global: { directives: { tooltip: {} } },
+    });
+    await nextTick();
+
+    expect(wrapper.find("[role=group]").classes()).not.toContain("border");
+    const editor = wrapper
+      .findComponent(EditorContent)
+      .props("editor") as TiptapEditor;
+    expect(editor.view.dom.classList).not.toContain("border");
+    expect(wrapper.text()).not.toContain("chars");
+  });
+});
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 5a5b6649..180df07a 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -3,7 +3,8 @@
     <div
       role="group"
       aria-label="Text format"
-      class="mb-1 py-1 bg-white border border-grey-300 rounded-lg flex flex-wrap gap-y-2 items-center"
+      class="mb-1 flex flex-wrap gap-y-2 items-center"
+      :class="!bare && 'py-1 bg-white border border-grey-300 rounded-lg'"
     >
       <div class="px-1">
         <EditorButton
@@ -134,10 +135,13 @@ import { ref } from "vue";
 const {
   modelValue,
   counter = false,
+  bare = false,
   id,
 } = defineProps<{
   modelValue?: string;
   counter?: boolean;
+  // no borders of its own, for a text that sits in a card
+  bare?: boolean;
   // names the text box after the D9Label with the same id
   id?: string;
 }>();
@@ -154,8 +158,9 @@ const editor = useEditor({
   content: modelValue,
   editorProps: {
     attributes: {
-      class:
-        "form-message-prose conversation-theme focus:outline-none border border-grey-300 bg-white text-grey-800 px-5 py-3 rounded-md",
+      class: `form-message-prose conversation-theme focus:outline-none text-grey-800 ${
+        bare ? "" : "border border-grey-300 bg-white px-5 py-3 rounded-md"
+      }`,
       ...(id ? { id, "aria-labelledby": `${id}-label` } : {}),
     },
   },

From 6ae1bd8c9c191e863aeef3691a9895569aba696c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:45:53 +0200
Subject: [PATCH 021/153] fix: draw each choice as one row, and name its fields

One border around the key, the text, the grip and delete. Screen
readers now say "Choice 2" and "Reply for choice 2" instead of the
placeholder "Label".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ChoiceRowActions.vue         |  4 +-
 .../Main/Interactions/ClickInteraction.vue    | 69 ++++++++++---------
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/resources/js/components/Factory/Main/ChoiceRowActions.vue b/resources/js/components/Factory/Main/ChoiceRowActions.vue
index 58b546a6..0c8b21dc 100644
--- a/resources/js/components/Factory/Main/ChoiceRowActions.vue
+++ b/resources/js/components/Factory/Main/ChoiceRowActions.vue
@@ -3,7 +3,7 @@
     <span
       aria-hidden="true"
       title="Drag to reorder"
-      class="handle grid h-9 w-6 cursor-grab place-items-center text-grey-500 hover:text-grey-900"
+      class="handle grid h-7 w-6 cursor-grab place-items-center text-grey-500 hover:text-grey-900"
     >
       <D9Icon name="grip-vertical" />
     </span>
@@ -11,7 +11,7 @@
       type="button"
       :aria-label="`Delete ${label}`"
       :title="`Delete ${label}`"
-      class="grid h-9 w-9 place-items-center rounded-md text-grey-500 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="grid h-7 w-7 place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="$emit('onDelete')"
     >
       <D9Icon name="trash" />
diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index 5a8ce1bf..ddbbf09c 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -1,39 +1,37 @@
 <template>
   <div class="py-1">
-    <div class="flex items-center gap-1">
-      <section class="grid min-w-0 flex-1 grid-cols-2 gap-x-2">
-        <div :class="{ 'col-span-2': !showReply }">
-          <div class="relative">
-            <D9Input
-              :id="item.id + '_label'"
-              class="!pl-12"
-              name="label"
-              ref="labelElement"
-              type="text"
-              v-model="label"
-              block
-              placeholder="Label"
-              @keyup.enter="keyboardCommands"
-              @keyup.up="keyboardCommands"
-              @keyup.down="keyboardCommands"
-              @keydown.meta.delete.prevent="keyboardCommands"
-            />
-            <span class="absolute inset-y-0 flex items-center px-3">
-              <IndexItem type="button" v-bind="{ index, showColors: false }" />
-            </span>
-          </div>
-        </div>
-        <div v-if="showReply">
-          <D9Input
-            :id="item.id + '_message'"
-            name="message"
-            type="text"
-            v-model="message"
-            block
-            placeholder="Reply"
-            @keyup.enter="keyboardCommands"
-          />
-        </div>
+    <div
+      class="flex min-h-9 items-center gap-2 rounded-md border border-grey-300 bg-white pl-2 pr-1 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500"
+    >
+      <IndexItem type="button" v-bind="{ index, showColors: false }" />
+      <section class="flex min-w-0 flex-1 gap-x-2 [&>*]:min-w-0">
+        <D9Input
+          :id="item.id + '_label'"
+          :class="field"
+          :aria-label="`Choice ${index + 1}`"
+          name="label"
+          ref="labelElement"
+          type="text"
+          v-model="label"
+          block
+          placeholder="Label"
+          @keyup.enter="keyboardCommands"
+          @keyup.up="keyboardCommands"
+          @keyup.down="keyboardCommands"
+          @keydown.meta.delete.prevent="keyboardCommands"
+        />
+        <D9Input
+          v-if="showReply"
+          :id="item.id + '_message'"
+          :class="[field, '!border-l !border-grey-200']"
+          :aria-label="`Reply for choice ${index + 1}`"
+          name="message"
+          type="text"
+          v-model="message"
+          block
+          placeholder="Reply"
+          @keyup.enter="keyboardCommands"
+        />
       </section>
       <ChoiceRowActions
         :label="label ? `choice “${label}”` : `choice ${index + 1}`"
@@ -70,6 +68,9 @@ const emit = defineEmits<{
   (e: "onDelete", index: number): void;
 }>();
 
+// the row draws the border, so its fields are bare
+const field = "!border-0 !bg-transparent !px-1 focus:!ring-0";
+
 const labelElement = ref<InstanceType<typeof D9Input> | null>(null);
 
 const label: Ref<FormBlockInteractionModel["label"]> = ref(props.item.label);

From a960f5c4d210fb7c0c5f4fe7bba759148a851ba8 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:45:59 +0200
Subject: [PATCH 022/153] fix: say "Add choice", as a dashed row like the
 concept

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ConfigureClicks.test.ts      |  4 +-
 .../Factory/Main/ConfigureClicks.vue          | 43 +++++++++++--------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/Factory/Main/ConfigureClicks.test.ts b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
index fa546e55..f8c9bbd7 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.test.ts
+++ b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
@@ -92,7 +92,7 @@ describe("deleting a choice in its row", () => {
         expect(document.activeElement?.id).toBe("1_label");
     });
 
-    it("moves focus to Add new option when no choice is left", async () => {
+    it("moves focus to Add choice when no choice is left", async () => {
         mountChoices("Yes");
 
         await deleteButton("Yes").trigger("click");
@@ -100,7 +100,7 @@ describe("deleting a choice in its row", () => {
 
         const focused = document.activeElement;
         expect(focused?.tagName).toBe("BUTTON");
-        expect(focused?.textContent).toContain("Add new option");
+        expect(focused?.textContent).toContain("Add choice");
     });
 });
 
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index 4994f92c..2c34a4b0 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -3,7 +3,7 @@
     <EmptyState
       v-if="editableInteractions?.length === 0"
       title="Nothing here yet."
-      description="Add your first option by clicking on the button below."
+      description="Add your first choice with the button below."
     />
 
     <Container
@@ -26,23 +26,29 @@
       </Draggable>
     </Container>
 
-    <div ref="addRow" class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
-      <D9Button
-        label="Add new option"
-        icon="plus"
-        icon-position="left"
-        color="dark"
-        :isLoading="isCreatingInteraction"
-        @click="createClickInteraction"
-      />
-      <span class="text-xs text-grey-600">Enter adds a choice.</span>
-    </div>
+    <button
+      ref="addButton"
+      type="button"
+      aria-label="Add choice"
+      aria-describedby="add-choice-hint"
+      :aria-busy="isCreatingInteraction"
+      class="mt-1 flex h-9 w-full items-center gap-2 rounded-md border border-dashed border-grey-300 px-2 text-sm font-medium text-grey-700 hover:border-grey-400 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="createClickInteraction"
+    >
+      <D9Icon name="plus" aria-hidden="true" />
+      Add choice
+      <span
+        id="add-choice-hint"
+        class="ml-auto text-xs font-normal text-grey-600"
+        >Enter adds a choice.</span
+      >
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useWorkbench } from "@/stores";
-import { D9Button } from "@deck9/ui";
+import { D9Icon } from "@deck9/ui";
 import { ref, nextTick } from "vue";
 import ClickInteraction from "./Interactions/ClickInteraction.vue";
 import { Container, Draggable } from "vue3-smooth-dnd";
@@ -51,12 +57,10 @@ import { useKeyboardNavigation } from "@/components/Factory/utils/useKeyboardNav
 import useActiveInteractions from "../Shared/useActiveInteractions";
 
 const workbench = useWorkbench();
-const { editableInteractions } = useActiveInteractions(
-  workbench.block,
-);
+const { editableInteractions } = useActiveInteractions(workbench.block);
 
 const isCreatingInteraction = ref(false);
-const addRow = ref<HTMLElement | null>(null);
+const addButton = ref<HTMLButtonElement | null>(null);
 
 const onDrop = ({ removedIndex, addedIndex }: any): void => {
   if (removedIndex === null || addedIndex === null) {
@@ -67,6 +71,9 @@ const onDrop = ({ removedIndex, addedIndex }: any): void => {
 };
 
 const createClickInteraction = async () => {
+  // the button has no disabled state: a second click waits for the first
+  if (isCreatingInteraction.value) return;
+
   isCreatingInteraction.value = true;
 
   try {
@@ -94,7 +101,7 @@ const deleteItem = async (index: number) => {
   if (editableInteractions.value?.includes(item)) return;
 
   if (!(await focusNeighborItem(index))) {
-    addRow.value?.querySelector("button")?.focus();
+    addButton.value?.focus();
   }
 };
 

From 79309245a8047de061590794964a387ddcb57d6b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:46:13 +0200
Subject: [PATCH 023/153] fix: hide Required on a No Input question

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts        | 16 ++++++++++++++++
 .../components/Factory/Document/QuestionCard.vue |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index f5ccdd51..6b058951 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -43,6 +43,22 @@ describe("an open question", () => {
         expect(workbench.createInteraction).toHaveBeenCalledWith("input");
     });
 
+    it("shows Required only when the question takes an answer", () => {
+        const stubs = { Editor: true, BlockMenu: true, QuestionSettings: true };
+        wrapper = mount(QuestionCard, {
+            props: { block: { ...block, type: "none" }, number: 1 },
+            global: { stubs },
+        });
+        expect(wrapper.text()).not.toContain("Required");
+
+        wrapper.unmount();
+        wrapper = mount(QuestionCard, {
+            props: { block, number: 4 },
+            global: { stubs },
+        });
+        expect(wrapper.text()).toContain("Required");
+    });
+
     it("points the Settings button at its panel", () => {
         wrapper = mount(QuestionCard, {
             props: { block, number: 4 },
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index d01d4340..f48cbae1 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -23,7 +23,7 @@
         />
       </div>
 
-      <div class="flex items-center gap-2">
+      <div v-if="type?.value !== 'none'" class="flex items-center gap-2">
         <label :for="`${id}-required`" class="text-sm text-grey-700">
           Required
         </label>

From 3938f6bc52760e49de8b08f02426d18d6d815f77 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:47:25 +0200
Subject: [PATCH 024/153] fix: make a choice row 36 px tall, like the concept

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Main/Interactions/ClickInteraction.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index ddbbf09c..65ad14dc 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -69,7 +69,7 @@ const emit = defineEmits<{
 }>();
 
 // the row draws the border, so its fields are bare
-const field = "!border-0 !bg-transparent !px-1 focus:!ring-0";
+const field = "!border-0 !bg-transparent !px-1 !py-2 focus:!ring-0";
 
 const labelElement = ref<InstanceType<typeof D9Input> | null>(null);
 

From c0d4a20430891e6664c04949aea90bcf8d492033 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 01:49:45 +0200
Subject: [PATCH 025/153] fix: keep 44 px targets up to 1024 px, and 44 px menu
 items

Phone sizes now hold below lg (Greetje's rule), not only below sm.
The number gutter is 32 px on phones, so the card gets 16 px back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/BlockMenu.vue        | 4 ++--
 resources/js/components/Factory/Document/DocumentQuestion.vue | 2 +-
 resources/js/components/Factory/Document/FormDocument.vue     | 4 ++--
 resources/js/components/Factory/Document/QuestionCard.vue     | 4 ++--
 resources/js/components/Factory/Shared/EditorButton.vue       | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 2805dfd8..6bfb93ec 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -6,7 +6,7 @@
   >
     <template #button>
       <span
-        class="grid h-11 w-11 place-items-center rounded-md border border-grey-300 sm:h-9 sm:w-9 bg-white text-grey-700 hover:bg-grey-100"
+        class="grid h-11 w-11 place-items-center rounded-md border border-grey-300 lg:h-9 lg:w-9 bg-white text-grey-700 hover:bg-grey-100"
       >
         <D9Icon name="ellipsis-h" />
         <span class="sr-only">{{ label }}</span>
@@ -67,7 +67,7 @@ const store = useForm();
 const workbench = useWorkbench();
 const { addBlock } = useAddBlock();
 
-const item = "w-full text-left text-sm";
+const item = "w-full min-h-11 text-left text-sm lg:min-h-0";
 const isGroup = computed(() => props.block.type === "group");
 
 // the open block saves through the workbench: a store save swaps its object, and its next save would send the old value
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 89b77fae..600974de 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="`row-${block.uuid}`" class="group/question flex scroll-mt-4 items-start">
-    <div class="flex w-12 shrink-0 flex-col items-end gap-1 pr-2 pt-3">
+    <div class="flex w-8 shrink-0 flex-col sm:w-12 items-end gap-1 pr-2 pt-3">
       <span
         aria-hidden="true"
         class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index f7b2eda5..2fa31f3c 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -50,7 +50,7 @@
         <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
-            class="min-h-11 sm:min-h-0"
+            class="min-h-11 lg:min-h-0"
             color="dark"
             icon="plus"
             icon-position="left"
@@ -58,7 +58,7 @@
           />
           <D9Button
             label="Add group"
-            class="min-h-11 sm:min-h-0"
+            class="min-h-11 lg:min-h-0"
             color="light"
             icon="layer-group"
             icon-position="left"
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index cf41f26e..67adbb44 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -45,7 +45,7 @@
       <div class="ml-auto flex items-center gap-1">
         <button
           type="button"
-          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 sm:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           :aria-expanded="settingsOpen"
           :aria-controls="`${id}-settings`"
           :aria-haspopup="isPhone ? 'dialog' : undefined"
@@ -60,7 +60,7 @@
         </button>
         <button
           type="button"
-          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 sm:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           @click="logic.showLogicEditor(block)"
         >
           Rules<span v-if="block.logics?.length" class="tabular-nums"
diff --git a/resources/js/components/Factory/Shared/EditorButton.vue b/resources/js/components/Factory/Shared/EditorButton.vue
index 46409c99..266b1cd5 100644
--- a/resources/js/components/Factory/Shared/EditorButton.vue
+++ b/resources/js/components/Factory/Shared/EditorButton.vue
@@ -4,7 +4,7 @@
     :aria-label="label"
     :aria-pressed="isActive"
     :class="[
-      'rounded px-2 mx-px py-1 relative text-sm min-h-11 min-w-11 sm:min-h-0 sm:min-w-0',
+      'rounded px-2 mx-px py-1 relative text-sm min-h-11 min-w-11 lg:min-h-0 lg:min-w-0',
       isActive
         ? 'bg-grey-300 text-grey-700'
         : 'text-grey-500 hover:bg-grey-200 bg-white',
@@ -14,7 +14,7 @@
     <D9Icon :name="icon" />
     <small
       v-if="subLabel"
-      class="absolute bottom-3 sm:bottom-1 text-xxs font-bold leading-none rounded-full"
+      class="absolute bottom-3 lg:bottom-1 text-xxs font-bold leading-none rounded-full"
       >{{ subLabel }}</small
     >
   </button>

From ac1aef3b48a113284ffd3ebd473574d1ab2139e3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:01:04 +0200
Subject: [PATCH 026/153] feat: show the end screen as the last block of the
 document

Headline, text and button are edited in place and saved through the
same form update as the Settings page, after a 1 s pause or when focus
leaves the block. While the form redirects, the block only names the
link and points to Settings.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/app.ts                           |   2 +
 .../Factory/Document/EndScreenBlock.test.ts   | 223 +++++++++++++++++
 .../Factory/Document/EndScreenBlock.vue       | 236 ++++++++++++++++++
 .../Factory/Document/FormDocument.test.ts     |  30 +++
 .../Factory/Document/FormDocument.vue         |   3 +
 5 files changed, 494 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/EndScreenBlock.test.ts
 create mode 100644 resources/js/components/Factory/Document/EndScreenBlock.vue
 create mode 100644 resources/js/components/Factory/Document/FormDocument.test.ts

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 4fcc4e6a..f84c89d7 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -36,6 +36,7 @@ import {
     faEnvelope,
     faEye,
     faEyeSlash,
+    faFlag,
     faGear,
     faGlobe,
     faGripVertical,
@@ -100,6 +101,7 @@ library.add(
     faEnvelope,
     faEye,
     faEyeSlash,
+    faFlag,
     faGear,
     faGlobe,
     faGripVertical,
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
new file mode 100644
index 00000000..686367f4
--- /dev/null
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -0,0 +1,223 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { AxiosError, AxiosResponse } from "axios";
+import { createPinia, setActivePinia } from "pinia";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { callUpdateForm } from "@/api/forms";
+import { useForm, useWorkbench } from "@/stores";
+import { useNotice } from "@/stores/notice";
+import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
+import EndScreenBlock from "./EndScreenBlock.vue";
+
+vi.mock("@/api/forms", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callUpdateForm: vi.fn(),
+}));
+
+const form = {
+    uuid: "form1",
+    eoc_headline: "See you on Thursday!",
+    eoc_text: "<p>We sent your ticket to your inbox.</p>",
+    show_cta_link: true,
+    cta_label: "Add to calendar",
+    cta_link: "https://example.com/cal",
+    use_cta_redirect: false,
+} as FormModel;
+
+let pinia: ReturnType<typeof createPinia>;
+let wrapper: VueWrapper | undefined;
+
+// real actions, not the stubs of the global testing pinia
+const mountBlock = () => {
+    wrapper = mount(EndScreenBlock, {
+        attachTo: document.body,
+        global: { plugins: [pinia], directives: { tooltip: {} } },
+    });
+    return wrapper;
+};
+
+const open = async () => {
+    const block = mountBlock();
+    await block.find("button").trigger("click");
+    await vi.waitFor(() =>
+        expect(block.find("[role=textbox]").exists()).toBe(true),
+    );
+    return block;
+};
+
+describe("the end screen in the document", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        window.route = (() => "/settings") as unknown as typeof window.route;
+        pinia = createPinia();
+        setActivePinia(pinia);
+        useForm().form = { ...form };
+        // the server answers with the form as it saved it
+        vi.mocked(callUpdateForm).mockImplementation(
+            async (_, values) =>
+                ({
+                    data: { ...useForm().form, ...values },
+                }) as AxiosResponse,
+        );
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = undefined;
+    });
+
+    it("shows its headline, text and button when closed", () => {
+        const text = mountBlock().find("button").text();
+
+        expect(text).toContain("See you on Thursday!");
+        expect(text).toContain("End screen");
+        expect(text).toContain("We sent your ticket to your inbox.");
+        expect(text).toContain("Button: Add to calendar");
+    });
+
+    it("says when it has no headline yet", () => {
+        useForm().form = { ...form, eoc_headline: null, show_cta_link: false };
+        const text = mountBlock().find("button").text();
+
+        expect(text).toContain("No headline yet");
+        expect(text).not.toContain("Button:");
+    });
+
+    it("opens in place, closes the open question, and closes when a question opens", async () => {
+        const workbench = useWorkbench();
+        workbench.block = { id: 4, uuid: "q4" } as FormBlockModel;
+
+        const block = await open();
+
+        expect(workbench.block).toBeNull();
+        const headline = block.find<HTMLInputElement>("#end-screen-headline");
+        expect(headline.element.value).toBe("See you on Thursday!");
+        expect(document.activeElement).toBe(headline.element);
+        expect(block.find("#end-screen-text-label").text()).toBe("Text");
+
+        workbench.block = { id: 5, uuid: "q5" } as FormBlockModel;
+        await flushPromises();
+
+        expect(block.find("#end-screen-headline").exists()).toBe(false);
+    });
+
+    it("saves only what changed, right away when you leave the block", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout", {
+            relatedTarget: block.find("#end-screen-button").element,
+        });
+        await flushPromises();
+        expect(callUpdateForm).not.toHaveBeenCalled();
+
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledTimes(1);
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.objectContaining({ uuid: "form1" }),
+            { eoc_headline: "Thanks!" },
+        );
+        expect(useForm().form?.eoc_headline).toBe("Thanks!");
+    });
+
+    it("saves on its own after a short pause while you type", async () => {
+        vi.useFakeTimers();
+        try {
+            const block = await open();
+
+            await block.find("#end-screen-headline").setValue("Thanks!");
+            vi.advanceTimersByTime(1000);
+            await flushPromises();
+
+            expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+                eoc_headline: "Thanks!",
+            });
+        } finally {
+            vi.useRealTimers();
+        }
+    });
+
+    it("edits the button: off hides its label and link", async () => {
+        const block = await open();
+
+        expect(
+            block.find<HTMLInputElement>("#end-screen-button-label").element
+                .value,
+        ).toBe("Add to calendar");
+        expect(
+            block.find<HTMLInputElement>("#end-screen-button-link").element
+                .value,
+        ).toBe("https://example.com/cal");
+
+        await block.find("#end-screen-button-link").setValue("mailto:a@b.co");
+        await block.find("#end-screen-button").trigger("click");
+        await block.find("#end-screen-button").trigger("focusout");
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+            cta_link: "mailto:a@b.co",
+            show_cta_link: false,
+        });
+        expect(block.find("#end-screen-button-label").exists()).toBe(false);
+    });
+
+    it("shows the server's reason when a save is refused", async () => {
+        const refused = new AxiosError(
+            "Unprocessable",
+            undefined,
+            undefined,
+            undefined,
+            {
+                status: 422,
+                data: { message: "The cta link field format is invalid." },
+            } as AxiosResponse,
+        );
+        vi.mocked(callUpdateForm).mockRejectedValue(refused);
+        const block = await open();
+
+        await block.find("#end-screen-button-link").setValue("example.com");
+        await block.find("#end-screen-button-link").trigger("focusout");
+        await flushPromises();
+
+        expect(useNotice().message).toBe(
+            "Your change was not saved: The cta link field format is invalid.",
+        );
+        expect(useForm().form?.cta_link).toBe("https://example.com/cal");
+    });
+
+    it("only links to Settings while the form sends people to a link instead", () => {
+        useForm().form = { ...form, use_cta_redirect: true };
+        const block = mountBlock();
+
+        expect(block.find("button").exists()).toBe(false);
+        expect(block.text()).toContain("https://example.com/cal");
+        expect(block.find("a").attributes("href")).toBe(
+            "/settings#completion-page",
+        );
+    });
+
+    it("stays in step with the Settings page through the form store", async () => {
+        const block = await open();
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+
+        const settings = mount(CompletionPage, {
+            global: { plugins: [pinia], directives: { tooltip: {} } },
+        });
+        expect(
+            settings.find<HTMLInputElement>("#eoc-headline").element.value,
+        ).toBe("Thanks!");
+
+        await settings.find("#eoc-headline").setValue("Bye!");
+        await settings.find("form").trigger("submit");
+        await flushPromises();
+        settings.unmount();
+
+        // closed, the block shows the saved headline without a reload
+        useWorkbench().block = { id: 5, uuid: "q5" } as FormBlockModel;
+        await flushPromises();
+        expect(block.find("button").text()).toContain("Bye!");
+    });
+});
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
new file mode 100644
index 00000000..3e387953
--- /dev/null
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -0,0 +1,236 @@
+<template>
+  <div id="row-end-screen" class="flex items-start">
+    <div class="flex w-12 shrink-0 justify-end pr-2 pt-3">
+      <span class="flex h-6 items-center text-grey-500">
+        <D9Icon name="flag" aria-hidden="true" />
+      </span>
+    </div>
+
+    <!-- the public form then skips the end screen -->
+    <div
+      v-if="store.form?.use_cta_redirect"
+      class="min-h-14 min-w-0 flex-1 px-3 py-2.5 text-sm text-grey-700"
+    >
+      <p class="break-words">
+        <span class="font-medium text-grey-900">No end screen:</span>
+        people go to {{ store.form.cta_link }}
+      </p>
+      <Link :href="settingsLink" class="text-xs text-grey-600 underline"
+        >Change in Settings</Link
+      >
+    </div>
+
+    <div
+      v-else-if="isOpen"
+      class="min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+      @focusout="leave"
+    >
+      <div class="flex items-center justify-between gap-3">
+        <span class="rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
+          >End screen</span
+        >
+        <Link
+          :href="settingsLink"
+          class="text-xs text-grey-600 underline hover:text-grey-900"
+          >Also in Settings</Link
+        >
+      </div>
+
+      <div>
+        <D9Label id="end-screen-headline" label="Headline" />
+        <D9Input
+          id="end-screen-headline"
+          v-model="draft.eoc_headline"
+          type="text"
+          block
+        />
+      </div>
+
+      <div>
+        <D9Label
+          id="end-screen-text"
+          label="Text"
+          @click="textEditor?.focus()"
+        />
+        <Editor
+          id="end-screen-text"
+          ref="textEditor"
+          v-model="draft.eoc_text"
+        />
+      </div>
+
+      <div class="space-y-3 border-t border-grey-200 pt-3">
+        <div class="flex items-center gap-2">
+          <label for="end-screen-button" class="text-sm text-grey-700">
+            Button
+          </label>
+          <D9Switch
+            id="end-screen-button"
+            v-model="draft.show_cta_link"
+            label="Button"
+            onLabel="Yes"
+            offLabel="No"
+          />
+        </div>
+        <div v-if="draft.show_cta_link" class="grid gap-3 sm:grid-cols-2">
+          <div>
+            <D9Label id="end-screen-button-label" label="Label" />
+            <D9Input
+              id="end-screen-button-label"
+              v-model="draft.cta_label"
+              type="text"
+              block
+            />
+          </div>
+          <div>
+            <D9Label id="end-screen-button-link" label="Link" />
+            <D9Input
+              id="end-screen-button-link"
+              v-model="draft.cta_link"
+              type="url"
+              block
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <button
+      v-else
+      type="button"
+      class="min-h-14 min-w-0 flex-1 rounded-lg px-3 py-2.5 text-left hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="open"
+    >
+      <span class="flex items-start gap-2">
+        <span
+          dir="auto"
+          class="line-clamp-2 min-w-0 flex-1 break-words text-base"
+          :class="
+            store.form?.eoc_headline
+              ? 'font-medium text-grey-900'
+              : 'font-normal italic text-grey-600'
+          "
+          ><span class="sr-only">End screen:&nbsp;</span
+          >{{ store.form?.eoc_headline || "No headline yet" }}</span
+        >
+        <span
+          aria-hidden="true"
+          class="shrink-0 rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
+          >End screen</span
+        >
+      </span>
+      <span
+        v-if="text"
+        dir="auto"
+        class="mt-1 line-clamp-2 break-words text-sm text-grey-700"
+        >{{ text }}</span
+      >
+      <span v-if="hasButton" class="mt-1 block text-xs text-grey-600"
+        >Button: {{ store.form?.cta_label || "Close" }}</span
+      >
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { D9Icon, D9Input, D9Label, D9Switch } from "@deck9/ui";
+import debounce from "lodash/debounce";
+import { useForm, useWorkbench } from "@/stores";
+import { useNotice } from "@/stores/notice";
+import Editor from "@/components/Factory/Shared/Editor.vue";
+import { plainText } from "./questionSummary";
+
+const store = useForm();
+const workbench = useWorkbench();
+const notice = useNotice();
+
+const isOpen = ref(false);
+const textEditor = ref<InstanceType<typeof Editor> | null>(null);
+
+const settingsLink = computed(
+  () =>
+    `${window.route("forms.settings", { uuid: store.form?.uuid })}#completion-page`,
+);
+const text = computed(() => plainText(store.form?.eoc_text ?? null));
+// the public form shows the button only with a link
+const hasButton = computed(
+  () => store.form?.show_cta_link && store.form?.cta_link,
+);
+
+const fields = [
+  "eoc_headline",
+  "eoc_text",
+  "show_cta_link",
+  "cta_label",
+  "cta_link",
+] as const;
+
+const saved = () => ({
+  eoc_headline: store.form?.eoc_headline ?? "",
+  eoc_text: store.form?.eoc_text ?? "",
+  show_cta_link: store.form?.show_cta_link ?? false,
+  cta_label: store.form?.cta_label ?? "",
+  cta_link: store.form?.cta_link ?? "",
+});
+
+const draft = reactive(saved());
+
+// sends what differs from the saved form, so a refused value is sent again until it's fixed
+const save = debounce(async () => {
+  const before = saved();
+  const changes = Object.fromEntries(
+    fields
+      .filter((key) => draft[key] !== before[key])
+      .map((key) => [key, draft[key]]),
+  );
+
+  if (!Object.keys(changes).length) {
+    return;
+  }
+
+  try {
+    await store.updateForm(changes);
+    notice.clearSaveError("saveEndScreen");
+  } catch (error) {
+    notice.showSaveError(error, "saveEndScreen");
+  }
+}, 1000);
+
+watch(draft, () => save());
+
+// save before a click on a link can load the next page
+const leave = (event: FocusEvent) => {
+  const card = event.currentTarget as HTMLElement;
+
+  if (!card.contains(event.relatedTarget as Node | null)) {
+    save.flush();
+  }
+};
+
+const open = async () => {
+  workbench.clearWorkbench();
+  // a change made before it closed may still be on its way
+  await save.flush();
+  Object.assign(draft, saved());
+  isOpen.value = true;
+
+  await nextTick();
+  document.getElementById("end-screen-headline")?.focus();
+};
+
+// one card is open at a time
+watch(
+  () => workbench.block,
+  (block) => {
+    if (block) {
+      save.flush();
+      isOpen.value = false;
+    }
+  },
+);
+
+// the page cleared the form before this unmounts: a later save would go to the next page's form
+onBeforeUnmount(() => save.cancel());
+</script>
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
new file mode 100644
index 00000000..e6fb0289
--- /dev/null
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -0,0 +1,30 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { useForm } from "@/stores";
+import FormDocument from "./FormDocument.vue";
+
+const mountDocument = () =>
+    mount(FormDocument, {
+        props: { status: "loaded" },
+        global: {
+            stubs: {
+                DocumentList: { template: "<div>questions</div>" },
+                EmptyState: { template: "<div>no questions</div>" },
+                EndScreenBlock: { template: "<div>end screen</div>" },
+                BlockLogicEditor: true,
+            },
+        },
+    });
+
+describe("the form document", () => {
+    it.each([
+        ["questions", [{ uuid: "q1", type: "input-short" }]],
+        ["no questions", []],
+    ])("shows the end screen after %s", (first, blocks) => {
+        useForm().blocks = blocks as FormBlockModel[];
+        const text = mountDocument().text();
+
+        expect(text.indexOf(first)).toBeGreaterThan(-1);
+        expect(text.indexOf("end screen")).toBeGreaterThan(text.indexOf(first));
+    });
+});
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..f5d7752b 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -22,6 +22,8 @@
           description="Add your first question below."
         />
 
+        <EndScreenBlock class="mt-2" />
+
         <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
           <D9Button
             label="Add question"
@@ -52,6 +54,7 @@ import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
+import EndScreenBlock from "./EndScreenBlock.vue";
 import { questionNumbers } from "./questionSummary";
 import { focusBlock, useAddBlock } from "./blockFocus";
 

From ec80e90c816fe8782104d1b652c25b3ad2f8d5f4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:03:04 +0200
Subject: [PATCH 027/153] docs: add the end screen block to the changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3bb6e06..82c2ee3a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The API can copy a question (`POST /api/blocks/{block}/duplicate`) with its text, settings, answers and Required, but not its rules. The copy goes right after the original. (#262)
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
+-   The form editor shows the end screen as the last block of your form. You can edit its headline, text and button right there, and the Completion Page in Settings shows the same values. (#271)
 
 ### Changed
 

From 2c535109d530bbb61fde81d5cfa0214f73a95d26 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 028/153] fix: 44 px fields with 16 px text in the question
 card below 1024 px

One CSS rule on the card and the phone's settings sheet: fields and the
answer type 44 px tall with 16 px text (iOS zooms into smaller text),
44 px tap areas on switches and file type checkboxes. Group name and
group Rules 44 px, Rating's "Use default" 44 px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/css/_touch-fields.css               | 33 +++++++++++++++++++
 resources/css/app.css                         |  1 +
 .../Factory/Document/DocumentGroup.vue        |  4 +--
 .../Factory/Document/QuestionCard.vue         |  4 +--
 .../components/Factory/Main/ConfigureFile.vue |  6 +++-
 .../Factory/Main/ConfigureRange.vue           |  6 +++-
 6 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 resources/css/_touch-fields.css

diff --git a/resources/css/_touch-fields.css b/resources/css/_touch-fields.css
new file mode 100644
index 00000000..360e2527
--- /dev/null
+++ b/resources/css/_touch-fields.css
@@ -0,0 +1,33 @@
+/* The form editor's question card below lg: every field 44 px tall with
+   16 px text (iOS zooms into a focused field under 16 px), and a 44 px tap
+   area on switches and checkboxes. One rule here instead of a class on
+   every D9 field in the Configure* parts. */
+@media (max-width: 1023px) {
+    .touch-fields
+        :is(
+            input:not([type="checkbox"], [type="radio"]),
+            textarea,
+            button[aria-haspopup="listbox"]
+        ) {
+        min-height: 2.75rem;
+        font-size: 1rem;
+    }
+
+    .touch-fields [role="option"] {
+        padding-block: 0.625rem;
+    }
+
+    /* D9Switch is relative and 24 px tall */
+    .touch-fields [role="switch"]::before {
+        content: "";
+        position: absolute;
+        inset: -10px 0;
+    }
+
+    /* D9Checkbox: its label covers the whole 20 px row, stretched to 44 px */
+    .touch-fields input[type="checkbox"] + div > label::before {
+        content: "";
+        position: absolute;
+        inset: -12px 0;
+    }
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index b2e81f72..4cb71eee 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,6 +12,7 @@
 @import "./_tooltip.css";
 @import "./_typography.css";
 @import "./_tiptap.css";
+@import "./_touch-fields.css";
 
 @import "tailwindcss/utilities";
 
diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 16d7bfba..715801ff 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -25,12 +25,12 @@
         type="text"
         placeholder="Group"
         title="Use a group to show or hide several questions with one rule."
-        class="h-9 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-sm font-semibold text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
+        class="h-11 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-base font-semibold lg:h-9 lg:text-sm text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
       />
       <span v-if="group.is_disabled" class="text-xs text-grey-600">Hidden</span>
       <button
         type="button"
-        class="flex h-9 items-center rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        class="flex h-11 items-center rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         @click="logic.showLogicEditor(group)"
       >
         Rules<span v-if="group.logics?.length" class="tabular-nums"
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 67adbb44..3a499a66 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+    class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
   >
     <span :id="`${id}-text-label`" class="sr-only"
       >Question {{ number }} text</span
@@ -90,7 +90,7 @@
     >
       <div class="fixed inset-0 bg-grey-900/40" aria-hidden="true" />
       <DialogPanel
-        class="fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
+        class="touch-fields fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
       >
         <span
           aria-hidden="true"
diff --git a/resources/js/components/Factory/Main/ConfigureFile.vue b/resources/js/components/Factory/Main/ConfigureFile.vue
index 57abb6f1..04ea2fd3 100644
--- a/resources/js/components/Factory/Main/ConfigureFile.vue
+++ b/resources/js/components/Factory/Main/ConfigureFile.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="mb-4">
     <D9Label label="Allowed File Types" />
-    <div v-for="fileType in availableFileTypes" :key="fileType.key">
+    <div
+      v-for="fileType in availableFileTypes"
+      :key="fileType.key"
+      class="flex min-h-11 items-center lg:min-h-0"
+    >
       <D9Checkbox
         :id="'check' + fileType.key"
         v-model="allowedFileTypes[fileType.key]"
diff --git a/resources/js/components/Factory/Main/ConfigureRange.vue b/resources/js/components/Factory/Main/ConfigureRange.vue
index 4ae32dcb..37e661a6 100644
--- a/resources/js/components/Factory/Main/ConfigureRange.vue
+++ b/resources/js/components/Factory/Main/ConfigureRange.vue
@@ -61,7 +61,11 @@
           block
           show-color-picker
         />
-        <button type="button" class="text-xs text-blue-600" @click="resetColor">
+        <button
+          type="button"
+          class="inline-flex min-h-11 items-center text-xs text-blue-600 lg:min-h-0"
+          @click="resetColor"
+        >
           Use default
         </button>
       </div>

From a9368ce475d8e5cf9b41bcfa5f6dfd26927938ba Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 029/153] fix: show a blue bar while the question text has
 focus

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

diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index 892e2335..e0660f38 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -159,7 +159,10 @@ const editor = useEditor({
   editorProps: {
     attributes: {
       class: `form-message-prose conversation-theme focus:outline-none text-grey-800 ${
-        bare ? "" : "border border-grey-300 bg-white px-5 py-3 rounded-md"
+        bare
+          ? // a 2 px bar shows focus; margin, border and padding add up to 0
+            "-ml-2 border-l-2 border-transparent pl-1.5 focus:border-blue-500"
+          : "border border-grey-300 bg-white px-5 py-3 rounded-md"
       }`,
       ...(id ? { id, "aria-labelledby": `${id}-label` } : {}),
     },

From d7d794f84061fe61a802131003cbdb126315b403 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 030/153] fix: add a policy with a dashed row, like Add choice

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Main/ConfigureConsents.vue        | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/Factory/Main/ConfigureConsents.vue b/resources/js/components/Factory/Main/ConfigureConsents.vue
index ae69b019..ccd1c473 100644
--- a/resources/js/components/Factory/Main/ConfigureConsents.vue
+++ b/resources/js/components/Factory/Main/ConfigureConsents.vue
@@ -3,7 +3,7 @@
     <EmptyState
       v-if="workbench.currentInteractions?.length === 0"
       title="Nothing here yet."
-      description="Add your first option by clicking on the button below."
+      description="Add your first policy with the button below."
     />
 
     <Container
@@ -26,22 +26,23 @@
       </Draggable>
     </Container>
 
-    <div ref="addRow" class="mt-8">
-      <D9Button
-        label="Add new policy"
-        icon="plus"
-        icon-position="left"
-        color="dark"
-        :isLoading="isCreatingInteraction"
+    <div ref="addRow" class="mt-1">
+      <button
+        type="button"
+        :aria-busy="isCreatingInteraction"
+        class="flex h-11 w-full items-center gap-2 rounded-md border border-dashed border-grey-300 px-2 text-sm font-medium text-grey-700 hover:border-grey-400 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-9"
         @click="createConsentPolicy"
-      />
+      >
+        <D9Icon name="plus" aria-hidden="true" />
+        Add policy
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useWorkbench } from "@/stores";
-import { D9Button } from "@deck9/ui";
+import { D9Icon } from "@deck9/ui";
 import { ref, nextTick } from "vue";
 import ConsentInteraction from "./Interactions/ConsentInteraction.vue";
 import { Container, Draggable } from "vue3-smooth-dnd";

From b516020dbfce1c4bca357d66ff16788f29b041eb Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:06:57 +0200
Subject: [PATCH 031/153] fix: size the app to the visible screen on iPhone
 Safari (100dvh)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Layouts/AppLayout.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index c8e59193..fe52d00f 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -4,7 +4,9 @@
 
     <jet-banner />
 
-    <div class="flex min-h-screen flex-col bg-grey-50">
+    <div
+      class="flex min-h-screen flex-col bg-grey-50 supports-[height:100dvh]:min-h-dvh"
+    >
       <FormTopBar v-if="form.formId">
         <template #save-status><slot name="save-status" /></template>
         <template #preview><slot name="preview" /></template>

From bc697189a7c6340888cf64f7ae3489068190c4ac Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:06 +0200
Subject: [PATCH 032/153] fix: keep the Outline button 44 px below 1024 px

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/FormDocument.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 2fa31f3c..db5f6564 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -30,7 +30,7 @@
           <button
             v-if="store.hasBlocks"
             type="button"
-            class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:h-8 lg:absolute lg:left-4 lg:top-3 lg:z-10 xl:hidden"
+            class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:absolute lg:left-4 lg:top-3 lg:z-10 lg:h-8 xl:hidden"
             aria-haspopup="dialog"
             :aria-expanded="outlineOpen"
             @click="outlineOpen = true"

From ea36e244f94c54769d6e563fa399af99ad8b80a5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:10 +0200
Subject: [PATCH 033/153] style: re-indent FormDocument's template (Prettier)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/FormDocument.vue         | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index db5f6564..1348e8b5 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -18,54 +18,54 @@
       <div
         class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10"
       >
-      <div v-if="status !== 'loaded'" class="pl-12">
-        <QuestionsLoadState :status="status" @retry="retry" />
-      </div>
-
-      <template v-else>
-        <h1 class="sr-only">Questions</h1>
-        <div class="mb-4 flex items-center justify-between gap-2 pl-12">
-          <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
-          <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view -->
-          <button
-            v-if="store.hasBlocks"
-            type="button"
-            class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:absolute lg:left-4 lg:top-3 lg:z-10 lg:h-8 xl:hidden"
-            aria-haspopup="dialog"
-            :aria-expanded="outlineOpen"
-            @click="outlineOpen = true"
-          >
-            <D9Icon name="list-ul" aria-hidden="true" />
-            Outline
-          </button>
+        <div v-if="status !== 'loaded'" class="pl-12">
+          <QuestionsLoadState :status="status" @retry="retry" />
         </div>
 
-        <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
-        <EmptyState
-          v-else
-          title="No questions yet"
-          description="Add your first question below."
-        />
-
-        <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
-          <D9Button
-            label="Add question"
-            class="min-h-11 lg:min-h-0"
-            color="dark"
-            icon="plus"
-            icon-position="left"
-            @click="addBlock()"
-          />
-          <D9Button
-            label="Add group"
-            class="min-h-11 lg:min-h-0"
-            color="light"
-            icon="layer-group"
-            icon-position="left"
-            @click="addBlock(null, 'group')"
+        <template v-else>
+          <h1 class="sr-only">Questions</h1>
+          <div class="mb-4 flex items-center justify-between gap-2 pl-12">
+            <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
+            <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view -->
+            <button
+              v-if="store.hasBlocks"
+              type="button"
+              class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:absolute lg:h-8 lg:left-4 lg:top-3 lg:z-10 xl:hidden"
+              aria-haspopup="dialog"
+              :aria-expanded="outlineOpen"
+              @click="outlineOpen = true"
+            >
+              <D9Icon name="list-ul" aria-hidden="true" />
+              Outline
+            </button>
+          </div>
+
+          <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
+          <EmptyState
+            v-else
+            title="No questions yet"
+            description="Add your first question below."
           />
-        </div>
-      </template>
+
+          <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
+            <D9Button
+              label="Add question"
+              class="min-h-11 lg:min-h-0"
+              color="dark"
+              icon="plus"
+              icon-position="left"
+              @click="addBlock()"
+            />
+            <D9Button
+              label="Add group"
+              class="min-h-11 lg:min-h-0"
+              color="light"
+              icon="layer-group"
+              icon-position="left"
+              @click="addBlock(null, 'group')"
+            />
+          </div>
+        </template>
       </div>
     </div>
   </div>

From 62c50240defb4df7f92b05b750ee13c92c8f3bad Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:23 +0200
Subject: [PATCH 034/153] style: wrap a long line in DocumentQuestion
 (Prettier)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/DocumentQuestion.vue      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 600974de..70333659 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :id="`row-${block.uuid}`" class="group/question flex scroll-mt-4 items-start">
+  <div
+    :id="`row-${block.uuid}`"
+    class="group/question flex scroll-mt-4 items-start"
+  >
     <div class="flex w-8 shrink-0 flex-col sm:w-12 items-end gap-1 pr-2 pt-3">
       <span
         aria-hidden="true"

From 3945f4cf35d3a5666331c2192eefdeb9f7ed9e25 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:52 +0200
Subject: [PATCH 035/153] docs: add the outline and phone Settings to the
 changelog line (#272)

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 c3bb6e06..1ba371a3 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. (#268)
+-   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. (#268, #272)
 
 ### Fixed
 

From a2f05134f0c1df4e5a00dcb0436b77c6f3551bce Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:17:09 +0200
Subject: [PATCH 036/153] feat: show a live preview beside the document

Preview in the top bar shows the public form in preview mode: beside
the document on a desktop, as a panel over it on tablet and phone.
It follows the open question, and the document follows Next and Back
in the preview. A saved change reloads it at the open question.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.vue             |   7 +
 .../Factory/Preview/FormPreview.test.ts       |  89 +++++++++
 .../Factory/Preview/FormPreview.vue           |  47 +++++
 .../Factory/Preview/PreviewFrame.test.ts      | 189 ++++++++++++++++++
 .../Factory/Preview/PreviewFrame.vue          | 125 ++++++++++++
 .../Factory/Preview/PreviewToggle.vue         |  18 ++
 6 files changed, 475 insertions(+)
 create mode 100644 resources/js/components/Factory/Preview/FormPreview.test.ts
 create mode 100644 resources/js/components/Factory/Preview/FormPreview.vue
 create mode 100644 resources/js/components/Factory/Preview/PreviewFrame.test.ts
 create mode 100644 resources/js/components/Factory/Preview/PreviewFrame.vue
 create mode 100644 resources/js/components/Factory/Preview/PreviewToggle.vue

diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 29c8a279..ab459972 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -1,14 +1,19 @@
 <template>
   <app-layout title="Edit Form" limit-height>
+    <template #preview><PreviewToggle v-model="isPreviewing" /></template>
     <FormDocument :status="status" @retry="loadBlocks" />
+    <FormPreview v-model="isPreviewing" />
   </app-layout>
 </template>
 
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
+import FormPreview from "@/components/Factory/Preview/FormPreview.vue";
+import PreviewToggle from "@/components/Factory/Preview/PreviewToggle.vue";
 import { useForm, useWorkbench } from "@/stores";
 import { onBeforeUnmount, onMounted, ref } from "vue";
+import { useMediaQuery } from "@vueuse/core";
 
 const props = defineProps<{
   form: FormModel;
@@ -17,6 +22,8 @@ const props = defineProps<{
 const store = useForm();
 const workbench = useWorkbench();
 const status = ref<"loading" | "failed" | "loaded">("loading");
+// on a desktop the preview sits beside the document, so it shows at once
+const isPreviewing = ref(useMediaQuery("(min-width: 1280px)").value);
 
 const loadBlocks = async () => {
   status.value = "loading";
diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
new file mode 100644
index 00000000..2b60e14e
--- /dev/null
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -0,0 +1,89 @@
+import { enableAutoUnmount, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import FormPreview from "./FormPreview.vue";
+import PreviewToggle from "./PreviewToggle.vue";
+
+// the headlessui dialog needs it, jsdom has none
+vi.stubGlobal(
+    "ResizeObserver",
+    class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    },
+);
+
+const screen = (wide: boolean) =>
+    vi.stubGlobal("matchMedia", (query: string) => ({
+        matches: wide && query === "(min-width: 1280px)",
+        addEventListener() {},
+        removeEventListener() {},
+    }));
+
+const mountPreview = (open = true) =>
+    mount(FormPreview, {
+        props: { modelValue: open },
+        attachTo: document.body,
+        global: { stubs: { PreviewFrame: { template: "<iframe />" } } },
+    });
+
+enableAutoUnmount(afterEach);
+
+describe("the preview panel", () => {
+    it("sits beside the document on a desktop", () => {
+        screen(true);
+        const wrapper = mountPreview();
+
+        const aside = wrapper.get("aside");
+        expect(aside.attributes("aria-labelledby")).toBe("preview-heading");
+        expect(aside.get("#preview-heading").text()).toBe("Preview");
+        expect(aside.find("iframe").exists()).toBe(true);
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+
+    it("opens over the document on a tablet or phone", async () => {
+        screen(false);
+        const wrapper = mountPreview();
+        await wrapper.vm.$nextTick();
+
+        const dialog = document.querySelector("[role=dialog]");
+        expect(dialog?.textContent).toContain("Preview");
+        expect(dialog?.querySelector("iframe")).not.toBeNull();
+
+        const close = [...document.querySelectorAll("button")].find(
+            (button) => button.textContent?.trim() === "Close preview",
+        );
+        close?.click();
+        expect(wrapper.emitted("update:modelValue")).toEqual([[false]]);
+    });
+
+    it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
+        screen(wide);
+        const wrapper = mountPreview(false);
+
+        expect(wrapper.find("aside").exists()).toBe(false);
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+    });
+});
+
+describe("the Preview button in the top bar", () => {
+    it("shows and hides the preview", async () => {
+        const wrapper = mount(PreviewToggle, {
+            props: {
+                modelValue: false,
+                "onUpdate:modelValue": (open: boolean) =>
+                    wrapper.setProps({ modelValue: open }),
+            },
+        });
+        const button = wrapper.get("button");
+
+        expect(button.text()).toBe("Preview");
+        expect(button.attributes("aria-pressed")).toBe("false");
+
+        await button.trigger("click");
+        expect(button.attributes("aria-pressed")).toBe("true");
+
+        await button.trigger("click");
+        expect(button.attributes("aria-pressed")).toBe("false");
+    });
+});
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
new file mode 100644
index 00000000..bdc0bd17
--- /dev/null
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -0,0 +1,47 @@
+<template>
+  <!-- desktop: a phone-sized preview beside the document -->
+  <aside
+    v-if="open && isWide"
+    aria-labelledby="preview-heading"
+    class="flex w-[380px] flex-none flex-col items-center gap-3 overflow-y-auto border-l border-grey-200 bg-grey-100 py-4"
+  >
+    <h2 id="preview-heading" class="w-80 text-xs font-semibold text-grey-600">
+      Preview
+    </h2>
+    <PreviewFrame />
+  </aside>
+
+  <!-- tablet and phone: over the document; closing it keeps it mounted, so focus goes back to Preview -->
+  <Dialog :open="open && !isWide" class="relative z-40" @close="open = false">
+    <div class="fixed inset-0 bg-grey-900/25" aria-hidden="true"></div>
+    <DialogPanel
+      class="fixed inset-y-0 right-0 flex w-full flex-col items-center gap-3 overflow-y-auto bg-grey-100 px-4 pb-4 pt-2 shadow-xl sm:w-[380px] sm:px-0"
+    >
+      <div class="flex w-80 max-w-full items-center justify-between">
+        <DialogTitle class="text-xs font-semibold text-grey-600"
+          >Preview</DialogTitle
+        >
+        <button
+          type="button"
+          class="-mr-3 flex h-11 w-11 items-center justify-center rounded-md text-grey-600 hover:bg-grey-200 hover:text-grey-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          @click="open = false"
+        >
+          <span class="sr-only">Close preview</span>
+          <D9Icon name="close" aria-hidden="true" />
+        </button>
+      </div>
+      <PreviewFrame />
+    </DialogPanel>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { D9Icon } from "@deck9/ui";
+import { useMediaQuery } from "@vueuse/core";
+import PreviewFrame from "./PreviewFrame.vue";
+
+const open = defineModel<boolean>({ required: true });
+
+const isWide = useMediaQuery("(min-width: 1280px)");
+</script>
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
new file mode 100644
index 00000000..a5574d87
--- /dev/null
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -0,0 +1,189 @@
+import { enableAutoUnmount, mount, type VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, getActivePinia, setActivePinia, type Pinia } from "pinia";
+import { nextTick } from "vue";
+import { useForm, useLogic, useWorkbench } from "@/stores";
+import { useNotice } from "@/stores/notice";
+import PreviewFrame from "./PreviewFrame.vue";
+
+// the form page is /<uuid>
+window.route = ((name: string, params?: { uuid?: string }) =>
+    `/${params?.uuid ?? name}`) as typeof window.route;
+
+const block = (id: number, uuid: string, type = "input-short") =>
+    ({ id, uuid, type, interactions: [{ options: [] }] }) as unknown as FormBlockModel;
+const first = block(1, "q1uuid");
+const second = block(2, "q2uuid");
+const group = block(3, "g3uuid", "group");
+
+// the testing pinia from the setup file: a test with a real one sets it back
+const testing = getActivePinia() as Pinia;
+
+enableAutoUnmount(afterEach);
+
+const mountFrame = (open: FormBlockModel | null = first, pinia?: Pinia) => {
+    useForm().form = { uuid: "form1" } as FormModel;
+    useForm().blocks = [{ ...first }, { ...second }, { ...group }];
+    useWorkbench().block = open;
+
+    return mount(PreviewFrame, {
+        attachTo: document.body,
+        global: pinia ? { plugins: [pinia] } : {},
+    });
+};
+
+const frameWindow = (wrapper: VueWrapper) =>
+    (wrapper.get("iframe").element as HTMLIFrameElement)
+        .contentWindow as Window;
+
+const fromFrame = (
+    wrapper: VueWrapper,
+    data: unknown,
+    init: MessageEventInit = {},
+) =>
+    window.dispatchEvent(
+        new MessageEvent("message", {
+            data,
+            origin: window.location.origin,
+            source: frameWindow(wrapper),
+            ...init,
+        }),
+    );
+
+describe("the preview frame", () => {
+    beforeEach(() => {
+        setActivePinia(testing);
+        vi.clearAllMocks();
+    });
+
+    it("runs the public form in preview mode at the open question", () => {
+        const iframe = mountFrame().get("iframe");
+
+        expect(iframe.attributes("src")).toBe("/form1?preview=1&block=q1uuid");
+        expect(iframe.attributes("title")).toBe("Preview of your form");
+    });
+
+    it("starts at the first question when none is open", () => {
+        expect(mountFrame(null).get("iframe").attributes("src")).toBe(
+            "/form1?preview=1",
+        );
+    });
+
+    it("goes to the question opened in the document", async () => {
+        const wrapper = mountFrame();
+        const post = vi.spyOn(frameWindow(wrapper), "postMessage");
+
+        useWorkbench().block = second;
+        await nextTick();
+
+        expect(post).toHaveBeenCalledWith(
+            { type: "input:preview:goto", block: "q2uuid" },
+            window.location.origin,
+        );
+    });
+
+    it("opens the question the preview moves on to", () => {
+        const wrapper = mountFrame();
+
+        fromFrame(wrapper, { type: "input:preview:block", block: "q1uuid" });
+        fromFrame(wrapper, { type: "input:preview:block", block: "q2uuid" });
+
+        expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(second);
+    });
+
+    it("doesn't send that question back to the preview", async () => {
+        const wrapper = mountFrame();
+        const post = vi.spyOn(frameWindow(wrapper), "postMessage");
+
+        fromFrame(wrapper, { type: "input:preview:block", block: "q1uuid" });
+        fromFrame(wrapper, { type: "input:preview:block", block: "q2uuid" });
+        // the stubbed action doesn't open it
+        useWorkbench().block = second;
+        await nextTick();
+
+        expect(post).not.toHaveBeenCalled();
+    });
+
+    it("keeps the open group where the preview starts", () => {
+        const wrapper = mountFrame(group);
+        const post = vi.spyOn(frameWindow(wrapper), "postMessage");
+
+        // a group is no page of the form: the preview starts at the first question
+        fromFrame(wrapper, { type: "input:preview:block", block: "q1uuid" });
+
+        expect(useWorkbench().putOnWorkbench).not.toHaveBeenCalled();
+        // and asks for the open block again, it may have missed it while loading
+        expect(post).toHaveBeenCalledWith(
+            { type: "input:preview:goto", block: "g3uuid" },
+            window.location.origin,
+        );
+    });
+
+    it.each([
+        ["another origin", { origin: "https://evil.example" }, {}],
+        ["another window", { source: window }, {}],
+        ["another type", {}, { type: "input:preview:goto" }],
+        ["no block id", {}, { block: 2 }],
+    ])("ignores a message from %s", (_, init, change) => {
+        const wrapper = mountFrame();
+        const data = { type: "input:preview:block", block: "q1uuid" };
+
+        fromFrame(wrapper, data);
+        fromFrame(wrapper, { ...data, block: "q2uuid", ...change }, init);
+
+        expect(useWorkbench().putOnWorkbench).not.toHaveBeenCalled();
+    });
+
+    it.each([
+        ["a save", () => useNotice().clearSaveError("saveBlock:1")],
+        ["saved rules", () => useLogic().saveBlockLogic()],
+    ])("loads the form again at the open question after %s", async (_, save) => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+        const wrapper = mountFrame(first, pinia);
+        const before = wrapper.get("iframe").element;
+
+        useWorkbench().block = second;
+        useForm().blocks![1].message = "<p>Changed</p>";
+        await save();
+        await nextTick();
+
+        const iframe = wrapper.get("iframe");
+        expect(iframe.element).not.toBe(before);
+        expect(iframe.attributes("src")).toBe("/form1?preview=1&block=q2uuid");
+    });
+
+    it("keeps running after a save that changed nothing", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+        const wrapper = mountFrame(first, pinia);
+        const before = wrapper.get("iframe").element;
+
+        // opening a card saves its answer field: empty settings come as [], go back as {}
+        useForm().blocks![0].interactions = [
+            { options: {} },
+        ] as unknown as FormBlockInteractionModel[];
+        useNotice().clearSaveError("saveInteraction:1");
+        await nextTick();
+
+        expect(wrapper.get("iframe").element).toBe(before);
+    });
+
+    it("compares with the questions as they load, after the preview", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+        useForm().form = { uuid: "form1" } as FormModel;
+        const wrapper = mount(PreviewFrame, {
+            attachTo: document.body,
+            global: { plugins: [pinia] },
+        });
+        const before = wrapper.get("iframe").element;
+
+        useForm().blocks = [{ ...first }];
+        await nextTick();
+        useNotice().clearSaveError("saveInteraction:1");
+        await nextTick();
+
+        expect(wrapper.get("iframe").element).toBe(before);
+    });
+});
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
new file mode 100644
index 00000000..474430fd
--- /dev/null
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -0,0 +1,125 @@
+<template>
+  <!-- the public form in preview mode: it saves no answers -->
+  <iframe
+    ref="frame"
+    :key="loads"
+    :src="src"
+    title="Preview of your form"
+    class="min-h-0 w-80 max-w-full flex-1 rounded-[28px] border border-grey-300 bg-white shadow-[0_12px_28px_rgba(15,23,42,0.14)] sm:max-h-[600px]"
+  ></iframe>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, watch } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { useForm, useLogic, useWorkbench } from "@/stores";
+import { useNotice } from "@/stores/notice";
+import type { PreviewMessage } from "@/forms/classic/usePreviewMessages";
+
+const store = useForm();
+const workbench = useWorkbench();
+const origin = window.location.origin;
+const frame = ref<HTMLIFrameElement | null>(null);
+
+const url = () => {
+  const query = new URLSearchParams({ preview: "1" });
+
+  if (workbench.block) {
+    query.set("block", workbench.block.uuid);
+  }
+
+  return `${window.route("forms.show", { uuid: store.form?.uuid }, false)}?${query}`;
+};
+
+const src = ref(url());
+const loads = ref(0);
+// the preview tells where it starts, then each question it moves on to
+let started = false;
+// the question the document opened because the preview showed it
+let followed: string | null = null;
+
+const send = (message: PreviewMessage) =>
+  frame.value?.contentWindow?.postMessage(message, origin);
+
+// the questions as the preview loaded them: a save that changed nothing,
+// like the one when a card opens, keeps the preview and its answers;
+// the server sends empty settings as [], a card saves them as {}
+const content = () =>
+  JSON.stringify(store.blocks, (_, value) =>
+    Array.isArray(value) && !value.length ? {} : value,
+  );
+let loaded: string | null = null;
+watch(
+  () => store.blocks,
+  (blocks) => {
+    loaded ??= blocks ? content() : null;
+  },
+  { immediate: true },
+);
+
+// a change reached the server: show it, at the open question
+const reload = () => {
+  if (content() === loaded) {
+    return;
+  }
+
+  loaded = content();
+  src.value = url();
+  loads.value++;
+  started = false;
+};
+// every save that works clears its error; rules save on their own
+useNotice().$onAction(({ name, after }) => {
+  if (name === "clearSaveError") after(reload);
+});
+useLogic().$onAction(({ name, after }) => {
+  if (name === "saveBlockLogic") after(reload);
+});
+
+watch(
+  () => workbench.block?.uuid,
+  (block) => {
+    if (block && block !== followed) {
+      send({ type: "input:preview:goto", block });
+    }
+    followed = null;
+  },
+);
+
+useEventListener(window, "message", async (event: MessageEvent) => {
+  const data = event.data as PreviewMessage | undefined;
+
+  if (
+    event.origin !== origin ||
+    !frame.value?.contentWindow ||
+    event.source !== frame.value.contentWindow ||
+    data?.type !== "input:preview:block" ||
+    typeof data.block !== "string"
+  ) {
+    return;
+  }
+
+  // where it starts isn't a move: the open block may be a group or a hidden question,
+  // or the preview loaded after the owner opened another one
+  if (!started) {
+    started = true;
+    if (workbench.block && workbench.block.uuid !== data.block) {
+      send({ type: "input:preview:goto", block: workbench.block.uuid });
+    }
+    return;
+  }
+
+  const block = store.blocks?.find((item) => item.uuid === data.block);
+
+  if (!block || block.id === workbench.block?.id) {
+    return;
+  }
+
+  followed = block.uuid;
+  workbench.putOnWorkbench(block);
+  await nextTick();
+  document
+    .getElementById(`row-${block.uuid}`)
+    ?.scrollIntoView({ block: "nearest" });
+});
+</script>
diff --git a/resources/js/components/Factory/Preview/PreviewToggle.vue b/resources/js/components/Factory/Preview/PreviewToggle.vue
new file mode 100644
index 00000000..1ee50b0f
--- /dev/null
+++ b/resources/js/components/Factory/Preview/PreviewToggle.vue
@@ -0,0 +1,18 @@
+<template>
+  <!-- shows and hides the preview; its name shows from xl -->
+  <button
+    type="button"
+    :aria-pressed="open"
+    class="flex h-11 w-11 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold text-white hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-9 lg:w-9 xl:w-auto xl:px-2.5"
+    :class="open ? 'border-grey-500 bg-grey-700' : 'border-grey-600'"
+    @click="open = !open"
+  >
+    <D9Icon name="eye" /><span class="sr-only xl:not-sr-only">Preview</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { D9Icon } from "@deck9/ui";
+
+const open = defineModel<boolean>({ required: true });
+</script>

From bbfa3ed7086f927ae532b1bf6c15d52c9b523590 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:17:09 +0200
Subject: [PATCH 037/153] feat: say in the form's preview that answers aren't
 saved

The preview shows a small note instead of the owner's orange bar, also
on a copied preview link.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/forms/classic/ClassicForm.vue | 7 +++++++
 resources/views/form.blade.php             | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index e2316082..a230da70 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -13,6 +13,13 @@
       }"
     >
       <div>
+        <!-- also on a copied preview link: nobody mistakes it for the real form -->
+        <p
+          v-if="isPreview"
+          class="mt-4 w-fit rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-semibold text-yellow-800"
+        >
+          Preview: answers aren't saved
+        </p>
         <Header v-if="!flags.hideTitle" :form="store.form" />
 
         <div class="h-full w-full max-w-screen-sm py-10">
diff --git a/resources/views/form.blade.php b/resources/views/form.blade.php
index f8917422..a4a5b967 100644
--- a/resources/views/form.blade.php
+++ b/resources/views/form.blade.php
@@ -73,7 +73,8 @@
     <body class="font-sans antialiased ">
 
         @auth
-        @if(!$form->is_published && auth()->user()->id === $form->user_id)
+        {{-- the editor's preview shows its own note --}}
+        @if(!$form->is_published && auth()->user()->id === $form->user_id && request()->query('preview') !== '1')
         <div class="bg-orange-600 py-2 absolute inset-x-0 top-0 px-4">
             <div class="max-w-screen-lg mx-auto text-orange-50 text-sm flex justify-center">
                 <span class="font-bold">You are viewing a preview of your form.</span>

From 32143ee4a3f487789bea2311196494af51c45f15 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:09:59 +0200
Subject: [PATCH 038/153] fix: load the form again when browser Back returns to
 Settings

Back restored the old props from history, so the tabs showed values from
before an edit in the document, and Save there undid that edit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Settings.test.ts | 80 +++++++++++++++++++++++
 resources/js/Pages/Forms/Settings.vue     | 24 +++++++
 2 files changed, 104 insertions(+)
 create mode 100644 resources/js/Pages/Forms/Settings.test.ts

diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
new file mode 100644
index 00000000..59b96310
--- /dev/null
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -0,0 +1,80 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { router } from "@inertiajs/vue3";
+import Settings from "./Settings.vue";
+
+vi.mock("@inertiajs/vue3", async (importOriginal) => ({
+    ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
+    router: { on: vi.fn(), visit: vi.fn() },
+}));
+// its code highlighter needs a global Vue
+vi.mock("@/components/Factory/Settings/Embed.vue", () => ({
+    default: { name: "Embed", template: "<div />" },
+}));
+
+const form = { uuid: "form1", name: "Customer feedback" } as FormModel;
+// Settings listens for Inertia visits once, when it loads
+const [listensTo, onVisit] = vi.mocked(router.on).mock.calls[0] ?? [];
+
+const stubs = {
+    AppLayout: { props: ["title"], template: "<main><slot /></main>" },
+    Options: true,
+    Privacy: true,
+    CompletionPage: true,
+    Appearance: true,
+    Embed: true,
+    TemplateExport: true,
+    Delete: true,
+};
+
+let wrapper: VueWrapper | undefined;
+
+const mountSettings = () => {
+    wrapper = mount(Settings, { props: { form }, global: { stubs } });
+};
+
+describe("settings page from history", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = undefined;
+    });
+
+    it("loads the form again when browser Back brings the page back", () => {
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+
+        mountSettings();
+
+        expect(router.visit).toHaveBeenCalledWith(window.location.href, {
+            only: ["form"],
+            replace: true,
+            preserveScroll: true,
+        });
+    });
+
+    it("loads nothing more on a normal visit, also one after a Back", () => {
+        // a Back to another page, then a link to Settings
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        expect(listensTo).toBe("before");
+        onVisit(new CustomEvent("inertia:before"));
+
+        mountSettings();
+
+        expect(router.visit).not.toHaveBeenCalled();
+    });
+
+    it("loads nothing more when only the tab in the address changes", () => {
+        window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+
+        mountSettings();
+
+        expect(router.visit).not.toHaveBeenCalled();
+    });
+});
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index c0ac0705..9649392a 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -61,6 +61,20 @@
   </app-layout>
 </template>
 
+<script lang="ts">
+import { router } from "@inertiajs/vue3";
+
+// browser Back and Forward show a page with its old props from history; a tab
+// change in the address has no state and keeps the page
+let fromHistory = false;
+window.addEventListener("popstate", (event) => {
+  fromHistory = event.state !== null;
+});
+router.on("before", () => {
+  fromHistory = false;
+});
+</script>
+
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
@@ -121,6 +135,16 @@ if (foundIndex !== -1) {
   tabChanged(0);
 }
 
+// load the form again, so the tabs show changes made in the editor
+if (fromHistory) {
+  fromHistory = false;
+  router.visit(location.href, {
+    only: ["form"],
+    replace: true,
+    preserveScroll: true,
+  });
+}
+
 onBeforeUnmount(() => {
   store.clearForm();
 });

From ab059624d2f233a70c2417c4a9498e7e55349ad3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:10:22 +0200
Subject: [PATCH 039/153] fix: save the end screen when its Settings link or
 browser Back leaves the page

A click on the link inside the card kept the focus in the card, and Back
moves no focus, so a change typed in the last second was lost.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 26 +++++++++++++++++++
 .../Factory/Document/EndScreenBlock.vue       |  9 +++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 686367f4..19875d57 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -121,6 +121,32 @@ describe("the end screen in the document", () => {
         expect(useForm().form?.eoc_headline).toBe("Thanks!");
     });
 
+    it("saves right away when the focus moves to the Settings link in the block", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout", {
+            relatedTarget: block.find("a").element,
+        });
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+            eoc_headline: "Thanks!",
+        });
+    });
+
+    it("saves right away on browser Back", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        window.dispatchEvent(new PopStateEvent("popstate"));
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
+            eoc_headline: "Thanks!",
+        });
+    });
+
     it("saves on its own after a short pause while you type", async () => {
         vi.useFakeTimers();
         try {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 3e387953..ba39559b 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -136,6 +136,7 @@
 import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
 import { Link } from "@inertiajs/vue3";
 import { D9Icon, D9Input, D9Label, D9Switch } from "@deck9/ui";
+import { useEventListener } from "@vueuse/core";
 import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
@@ -200,15 +201,19 @@ const save = debounce(async () => {
 
 watch(draft, () => save());
 
-// save before a click on a link can load the next page
+// save before a click on a link can load the next page, also "Also in Settings" in the card
 const leave = (event: FocusEvent) => {
   const card = event.currentTarget as HTMLElement;
+  const next = event.relatedTarget as HTMLElement | null;
 
-  if (!card.contains(event.relatedTarget as Node | null)) {
+  if (!card.contains(next) || next?.closest("a")) {
     save.flush();
   }
 };
 
+// browser Back moves no focus; the old page stays until the next one has loaded
+useEventListener(window, "popstate", () => save.flush());
+
 const open = async () => {
   workbench.clearWorkbench();
   // a change made before it closed may still be on its way

From c6a8d88b89609984276b1c9932318659014bf76d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:18 +0200
Subject: [PATCH 040/153] style: make the open end screen card flat like a
 question card

Bare headline with the chip on its right, bare text, hidden labels for
screen readers, "Also in Settings" next to the Button switch. The button
fields say "Button text" and show "Close" and "https://" when empty.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 13 ++++-
 .../Factory/Document/EndScreenBlock.vue       | 51 +++++++++----------
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 19875d57..cf03cd93 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -92,7 +92,12 @@ describe("the end screen in the document", () => {
         const headline = block.find<HTMLInputElement>("#end-screen-headline");
         expect(headline.element.value).toBe("See you on Thursday!");
         expect(document.activeElement).toBe(headline.element);
-        expect(block.find("#end-screen-text-label").text()).toBe("Text");
+        expect(block.find("label[for=end-screen-headline]").text()).toBe(
+            "End screen headline",
+        );
+        expect(block.find("#end-screen-text-label").text()).toBe(
+            "End screen text",
+        );
 
         workbench.block = { id: 5, uuid: "q5" } as FormBlockModel;
         await flushPromises();
@@ -164,9 +169,13 @@ describe("the end screen in the document", () => {
         }
     });
 
-    it("edits the button: off hides its label and link", async () => {
+    it("edits the button: off hides its text and link", async () => {
         const block = await open();
 
+        expect(block.find("#end-screen-button-label-label").text()).toBe(
+            "Button text",
+        );
+
         expect(
             block.find<HTMLInputElement>("#end-screen-button-label").element
                 .value,
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index ba39559b..e3342b7b 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -25,38 +25,29 @@
       class="min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
       @focusout="leave"
     >
-      <div class="flex items-center justify-between gap-3">
-        <span class="rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
-          >End screen</span
-        >
-        <Link
-          :href="settingsLink"
-          class="text-xs text-grey-600 underline hover:text-grey-900"
-          >Also in Settings</Link
+      <div class="flex items-center gap-3">
+        <label for="end-screen-headline" class="sr-only"
+          >End screen headline</label
         >
-      </div>
-
-      <div>
-        <D9Label id="end-screen-headline" label="Headline" />
-        <D9Input
+        <input
           id="end-screen-headline"
           v-model="draft.eoc_headline"
           type="text"
-          block
+          dir="auto"
+          class="-ml-2 min-w-0 flex-1 border-0 border-l-2 border-transparent bg-transparent p-0 pl-1.5 text-base font-medium text-grey-900 focus:border-blue-500 focus:ring-0"
         />
+        <span
+          class="shrink-0 rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
+          >End screen</span
+        >
       </div>
 
-      <div>
-        <D9Label
-          id="end-screen-text"
-          label="Text"
-          @click="textEditor?.focus()"
-        />
-        <Editor
-          id="end-screen-text"
-          ref="textEditor"
-          v-model="draft.eoc_text"
-        />
+      <!-- the same focus sign as the headline -->
+      <div
+        class="-ml-2 border-l-2 border-transparent pl-1.5 focus-within:border-blue-500"
+      >
+        <span id="end-screen-text-label" class="sr-only">End screen text</span>
+        <Editor id="end-screen-text" v-model="draft.eoc_text" bare />
       </div>
 
       <div class="space-y-3 border-t border-grey-200 pt-3">
@@ -71,14 +62,20 @@
             onLabel="Yes"
             offLabel="No"
           />
+          <Link
+            :href="settingsLink"
+            class="ml-auto text-xs text-grey-600 underline hover:text-grey-900"
+            >Also in Settings</Link
+          >
         </div>
         <div v-if="draft.show_cta_link" class="grid gap-3 sm:grid-cols-2">
           <div>
-            <D9Label id="end-screen-button-label" label="Label" />
+            <D9Label id="end-screen-button-label" label="Button text" />
             <D9Input
               id="end-screen-button-label"
               v-model="draft.cta_label"
               type="text"
+              placeholder="Close"
               block
             />
           </div>
@@ -88,6 +85,7 @@
               id="end-screen-button-link"
               v-model="draft.cta_link"
               type="url"
+              placeholder="https://"
               block
             />
           </div>
@@ -148,7 +146,6 @@ const workbench = useWorkbench();
 const notice = useNotice();
 
 const isOpen = ref(false);
-const textEditor = ref<InstanceType<typeof Editor> | null>(null);
 
 const settingsLink = computed(
   () =>

From f08f890998af21403bbad68e5a777e0be34deaab Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:12:28 +0200
Subject: [PATCH 041/153] fix: show the default end screen headline people see
 when it's empty
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The block said "No headline yet", but the public form shows
"Form Submitted". It now says "Form Submitted · default", and the open
card shows it as the placeholder.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Document/EndScreenBlock.test.ts   | 9 +++++++--
 .../js/components/Factory/Document/EndScreenBlock.vue    | 5 +++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index cf03cd93..39177729 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -74,12 +74,17 @@ describe("the end screen in the document", () => {
         expect(text).toContain("Button: Add to calendar");
     });
 
-    it("says when it has no headline yet", () => {
+    it("shows the default headline people see when it has none", async () => {
         useForm().form = { ...form, eoc_headline: null, show_cta_link: false };
         const text = mountBlock().find("button").text();
 
-        expect(text).toContain("No headline yet");
+        expect(text).toContain("Form Submitted · default");
         expect(text).not.toContain("Button:");
+
+        const block = await open();
+        expect(
+            block.find("#end-screen-headline").attributes("placeholder"),
+        ).toBe("Form Submitted");
     });
 
     it("opens in place, closes the open question, and closes when a question opens", async () => {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index e3342b7b..f811ce83 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -34,7 +34,8 @@
           v-model="draft.eoc_headline"
           type="text"
           dir="auto"
-          class="-ml-2 min-w-0 flex-1 border-0 border-l-2 border-transparent bg-transparent p-0 pl-1.5 text-base font-medium text-grey-900 focus:border-blue-500 focus:ring-0"
+          placeholder="Form Submitted"
+          class="-ml-2 min-w-0 flex-1 border-0 border-l-2 border-transparent bg-transparent p-0 pl-1.5 text-base font-medium text-grey-900 placeholder:font-normal placeholder:italic placeholder:text-grey-600 focus:border-blue-500 focus:ring-0"
         />
         <span
           class="shrink-0 rounded bg-grey-100 px-1.5 text-xs leading-5 text-grey-700"
@@ -109,7 +110,7 @@
               : 'font-normal italic text-grey-600'
           "
           ><span class="sr-only">End screen:&nbsp;</span
-          >{{ store.form?.eoc_headline || "No headline yet" }}</span
+          >{{ store.form?.eoc_headline || "Form Submitted · default" }}</span
         >
         <span
           aria-hidden="true"

From f750209942ff6ffd7d9804bad34797d9304b4be2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:20:48 +0200
Subject: [PATCH 042/153] feat: put Preview beside the question count on a
 phone

The phone's top bar keeps its room for the form name, as before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts           | 17 +++++++++++++++++
 resources/js/Pages/Forms/Edit.vue               | 15 ++++++++++++++-
 .../Factory/Document/FormDocument.vue           |  9 ++++++---
 .../Factory/Preview/PreviewToggle.vue           |  4 ++--
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index fba82d18..19d8215e 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -13,6 +13,10 @@ const stubs = {
     AppLayout: { props: ["title"], template: "<main><slot /></main>" },
     DocumentList: { template: "<ol><li>questions</li></ol>" },
     BlockLogicEditor: true,
+    FormPreview: {
+        props: ["modelValue"],
+        template: "<aside v-if='modelValue'>preview</aside>",
+    },
 };
 
 let wrapper: VueWrapper | undefined;
@@ -117,4 +121,17 @@ describe("editor loading", () => {
 
         expect(useWorkbench().putOnWorkbench).not.toHaveBeenCalled();
     });
+
+    // the top bar has its Preview from lg
+    it("opens the preview from the document on a phone", async () => {
+        const editor = await mountEditor(loads(blocks));
+        expect(editor.find("aside").exists()).toBe(false);
+
+        const preview = editor
+            .findAll("button")
+            .find((button) => button.text() === "Preview");
+        await preview?.trigger("click");
+
+        expect(editor.find("aside").exists()).toBe(true);
+    });
 });
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index ab459972..55f6d11b 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -1,7 +1,19 @@
 <template>
   <app-layout title="Edit Form" limit-height>
     <template #preview><PreviewToggle v-model="isPreviewing" /></template>
-    <FormDocument :status="status" @retry="loadBlocks" />
+    <FormDocument :status="status" @retry="loadBlocks">
+      <!-- a phone's top bar has no room for Preview -->
+      <template #actions>
+        <D9Button
+          class="lg:hidden"
+          label="Preview"
+          color="light"
+          icon="eye"
+          icon-position="left"
+          @click="isPreviewing = true"
+        />
+      </template>
+    </FormDocument>
     <FormPreview v-model="isPreviewing" />
   </app-layout>
 </template>
@@ -14,6 +26,7 @@ import PreviewToggle from "@/components/Factory/Preview/PreviewToggle.vue";
 import { useForm, useWorkbench } from "@/stores";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { useMediaQuery } from "@vueuse/core";
+import { D9Button } from "@deck9/ui";
 
 const props = defineProps<{
   form: FormModel;
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..9ce21967 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -11,9 +11,12 @@
 
       <template v-else>
         <h1 class="sr-only">Questions</h1>
-        <p class="mb-4 pl-12 text-sm tabular-nums text-grey-600">
-          {{ countLine }}
-        </p>
+        <div class="mb-4 flex items-center justify-between gap-2 pl-12">
+          <p class="text-sm tabular-nums text-grey-600">
+            {{ countLine }}
+          </p>
+          <slot name="actions" />
+        </div>
 
         <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
         <EmptyState
diff --git a/resources/js/components/Factory/Preview/PreviewToggle.vue b/resources/js/components/Factory/Preview/PreviewToggle.vue
index 1ee50b0f..d71073c6 100644
--- a/resources/js/components/Factory/Preview/PreviewToggle.vue
+++ b/resources/js/components/Factory/Preview/PreviewToggle.vue
@@ -1,9 +1,9 @@
 <template>
-  <!-- shows and hides the preview; its name shows from xl -->
+  <!-- shows and hides the preview; on phones it's in the document, so the form name keeps its room -->
   <button
     type="button"
     :aria-pressed="open"
-    class="flex h-11 w-11 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold text-white hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-9 lg:w-9 xl:w-auto xl:px-2.5"
+    class="hidden h-9 w-9 flex-none items-center justify-center gap-1.5 rounded-md border text-[13px] font-semibold text-white hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:flex xl:w-auto xl:px-2.5"
     :class="open ? 'border-grey-500 bg-grey-700' : 'border-grey-600'"
     @click="open = !open"
   >

From cbfd30d634b98eac1f91cbdf90ebd7432eed92cc Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:21:42 +0200
Subject: [PATCH 043/153] docs: add changelog line for #273

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3bb6e06..2ad1879e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The API can copy a question (`POST /api/blocks/{block}/duplicate`) with its text, settings, answers and Required, but not its rules. The copy goes right after the original. (#262)
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
+-   "Preview" in the editor shows your form beside the questions, on tablet and phone as a panel. It follows the question you edit, and the editor follows when you click Next in it. Answers in the preview aren't saved. (#273)
 
 ### Changed
 

From dd3ac2f600badbc317e9fcb9df9ccdeed72e7b67 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:23:27 +0200
Subject: [PATCH 044/153] fix: load the form again when browser Back returns to
 the editor

Back from Settings showed the end screen from before the Settings change,
and editing it there undid that change. The Settings check moves into
useFreshFormAfterBack, used by both pages.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts       | 24 +++++++++++++++++++
 resources/js/Pages/Forms/Edit.vue           |  2 ++
 resources/js/Pages/Forms/Settings.vue       | 26 +++------------------
 resources/js/utils/useFreshFormAfterBack.ts | 26 +++++++++++++++++++++
 4 files changed, 55 insertions(+), 23 deletions(-)
 create mode 100644 resources/js/utils/useFreshFormAfterBack.ts

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index fba82d18..80b8cf80 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -1,5 +1,6 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { router } from "@inertiajs/vue3";
 import Edit from "./Edit.vue";
 import { useForm, useWorkbench } from "@/stores";
 
@@ -118,3 +119,26 @@ describe("editor loading", () => {
         expect(useWorkbench().putOnWorkbench).not.toHaveBeenCalled();
     });
 });
+
+describe("editor from history", () => {
+    afterEach(() => {
+        wrapper?.unmount();
+        wrapper = undefined;
+        vi.restoreAllMocks();
+    });
+
+    it("loads the form again when browser Back brings the editor back", async () => {
+        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+
+        await mountEditor(loads(blocks));
+
+        expect(visit).toHaveBeenCalledWith(window.location.href, {
+            only: ["form"],
+            replace: true,
+            preserveScroll: true,
+        });
+    });
+});
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 29c8a279..d85caa80 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -8,6 +8,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
+import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
@@ -62,6 +63,7 @@ onMounted(async () => {
   await store.getFormBlockMapping();
 });
 
+useFreshFormAfterBack();
 workbench.clearWorkbench();
 store.$patch({
   form: props.form,
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index 9649392a..90325900 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -61,20 +61,6 @@
   </app-layout>
 </template>
 
-<script lang="ts">
-import { router } from "@inertiajs/vue3";
-
-// browser Back and Forward show a page with its old props from history; a tab
-// change in the address has no state and keeps the page
-let fromHistory = false;
-window.addEventListener("popstate", (event) => {
-  fromHistory = event.state !== null;
-});
-router.on("before", () => {
-  fromHistory = false;
-});
-</script>
-
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
 import { TabGroup, TabList, Tab, TabPanels, TabPanel } from "@headlessui/vue";
@@ -87,6 +73,7 @@ import Options from "@/components/Factory/Settings/Options.vue";
 import Privacy from "@/components/Factory/Settings/Privacy.vue";
 import TemplateExport from "@/components/Factory/Settings/TemplateExport.vue";
 import { useForm } from "@/stores";
+import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
 import { onBeforeUnmount, ref } from "vue";
 
 const props = defineProps<{
@@ -135,15 +122,8 @@ if (foundIndex !== -1) {
   tabChanged(0);
 }
 
-// load the form again, so the tabs show changes made in the editor
-if (fromHistory) {
-  fromHistory = false;
-  router.visit(location.href, {
-    only: ["form"],
-    replace: true,
-    preserveScroll: true,
-  });
-}
+// after the hash, so the reload keeps the tab
+useFreshFormAfterBack();
 
 onBeforeUnmount(() => {
   store.clearForm();
diff --git a/resources/js/utils/useFreshFormAfterBack.ts b/resources/js/utils/useFreshFormAfterBack.ts
new file mode 100644
index 00000000..abbb0c84
--- /dev/null
+++ b/resources/js/utils/useFreshFormAfterBack.ts
@@ -0,0 +1,26 @@
+import { router } from "@inertiajs/vue3";
+
+// browser Back and Forward show a page with its old props from history; a tab
+// change in the address has no state and keeps the page
+let fromHistory = false;
+window.addEventListener("popstate", (event) => {
+  fromHistory = event.state !== null;
+});
+router.on("before", () => {
+  fromHistory = false;
+});
+
+// call it in a page's setup: loads the form again when the page came from
+// history, so it shows changes made on the other page
+export function useFreshFormAfterBack() {
+  if (!fromHistory) {
+    return;
+  }
+
+  fromHistory = false;
+  router.visit(location.href, {
+    only: ["form"],
+    replace: true,
+    preserveScroll: true,
+  });
+}

From 4421fce7ca3be5ab9aef619593f73643f8764132 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:23:45 +0200
Subject: [PATCH 045/153] feat: move a block one step and read out where it
 went

A question steps into a group next to it and out at its ends; a group
steps over a whole block. A polite live region says the new position.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/FormDocument.test.ts     |  17 +++
 .../Factory/Document/FormDocument.vue         |   2 +
 .../Factory/Document/blockMove.test.ts        | 106 ++++++++++++++
 .../components/Factory/Document/blockMove.ts  | 130 ++++++++++++++++++
 4 files changed, 255 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/blockMove.test.ts
 create mode 100644 resources/js/components/Factory/Document/blockMove.ts

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 072f8a9f..847160e0 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.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 FormDocument from "./FormDocument.vue";
+import { moveNote } from "./blockMove";
 
 const blocks = [
     { id: 1, uuid: "b1", type: "none", message: "<p>Welcome</p>" },
@@ -63,4 +64,20 @@ describe("the form document", () => {
         expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
         expect(scrolled).toHaveBeenCalledWith("row-b2", "start");
     });
+
+    it("reads out where a moved question went", async () => {
+        useForm().blocks = blocks;
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        moveNote.value = "Moved to position 2 of 2";
+        await wrapper.vm.$nextTick();
+
+        expect(
+            document.querySelector("[aria-live=polite]")?.textContent,
+        ).toBe("Moved to position 2 of 2");
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1348e8b5..360e887a 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -95,6 +95,7 @@
     </DialogPanel>
   </Dialog>
   <BlockLogicEditor />
+  <p class="sr-only" aria-live="polite">{{ moveNote }}</p>
 </template>
 
 <script setup lang="ts">
@@ -108,6 +109,7 @@ import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue"
 import DocumentList from "./DocumentList.vue";
 import DocumentOutline from "./DocumentOutline.vue";
 import { questionNumbers } from "./questionSummary";
+import { moveNote } from "./blockMove";
 import {
   cursorFor,
   focusBlock,
diff --git a/resources/js/components/Factory/Document/blockMove.test.ts b/resources/js/components/Factory/Document/blockMove.test.ts
new file mode 100644
index 00000000..f6dfe996
--- /dev/null
+++ b/resources/js/components/Factory/Document/blockMove.test.ts
@@ -0,0 +1,106 @@
+import { createPinia, setActivePinia } from "pinia";
+import { nextTick } from "vue";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm } from "@/stores";
+import { moveNote, useMoveBlock } from "./blockMove";
+
+vi.mock("@/api/blocks", async (original) => ({
+    ...(await original<object>()),
+    callUpdateBlockSequence: vi.fn().mockResolvedValue({ status: 204 }),
+}));
+
+const make = () =>
+    [
+        { id: 1, uuid: "q1", type: "radio" },
+        { id: 2, uuid: "q2", type: "radio" },
+        { id: 3, uuid: "g1", type: "group", title: "Food" },
+        { id: 4, uuid: "c1", type: "radio", parent_block: "g1" },
+        { id: 5, uuid: "c2", type: "radio", parent_block: "g1" },
+        { id: 6, uuid: "q3", type: "radio" },
+    ] as FormBlockModel[];
+
+// the document's order: top-level blocks, a group's questions after it
+const order = () => {
+    const blocks = useForm().blocks ?? [];
+
+    return blocks
+        .filter((block) => !block.parent_block)
+        .map((block) =>
+            block.type === "group"
+                ? `${block.uuid}[${blocks
+                      .filter((child) => child.parent_block === block.uuid)
+                      .map((child) => child.uuid)
+                      .join(" ")}]`
+                : block.uuid,
+        )
+        .join(" ");
+};
+
+const move = async (uuid: string, step: -1 | 1) => {
+    const block = useForm().blocks!.find((item) => item.uuid === uuid)!;
+    const moved = await useMoveBlock().moveBlock(block, step);
+    await nextTick();
+
+    return moved;
+};
+
+describe("moving a block one step", () => {
+    beforeEach(() => {
+        setActivePinia(createPinia());
+        useForm().form = { uuid: "f1" } as FormModel;
+        useForm().blocks = make();
+    });
+
+    it("swaps a question with its neighbour and says where it went", async () => {
+        expect(await move("q1", 1)).toBe(true);
+
+        expect(order()).toBe("q2 q1 g1[c1 c2] q3");
+        expect(moveNote.value).toBe("Moved to position 2 of 5");
+    });
+
+    it("steps a question into a group next to it", async () => {
+        await move("q2", 1);
+        expect(order()).toBe("q1 g1[q2 c1 c2] q3");
+        expect(moveNote.value).toBe("Moved into group Food, to position 2 of 5");
+
+        await move("q3", -1);
+        expect(order()).toBe("q1 g1[q2 c1 c2 q3]");
+        expect(moveNote.value).toBe("Moved into group Food, to position 5 of 5");
+    });
+
+    it("steps a question out at the ends of its group", async () => {
+        await move("c1", -1);
+        expect(order()).toBe("q1 q2 c1 g1[c2] q3");
+        expect(moveNote.value).toBe(
+            "Moved out of group Food, to position 3 of 5",
+        );
+
+        await move("c2", 1);
+        expect(order()).toBe("q1 q2 c1 g1[] c2 q3");
+        expect(moveNote.value).toBe(
+            "Moved out of group Food, to position 4 of 5",
+        );
+    });
+
+    it("moves a group over a whole block, with its questions", async () => {
+        await move("g1", -1);
+
+        expect(order()).toBe("q1 g1[c1 c2] q2 q3");
+        expect(moveNote.value).toBe("Moved group Food to position 2 of 4");
+    });
+
+    it("stays put at the top and the bottom, and says so", async () => {
+        const { canMove } = useMoveBlock();
+        const [first, , , , , last] = useForm().blocks!;
+
+        expect(canMove(first, -1)).toBe(false);
+        expect(canMove(last, 1)).toBe(false);
+        expect(canMove(first, 1)).toBe(true);
+
+        expect(await move("q1", -1)).toBe(false);
+        expect(moveNote.value).toBe("Already at the top");
+        expect(await move("q3", 1)).toBe(false);
+        expect(moveNote.value).toBe("Already at the bottom");
+        expect(order()).toBe("q1 q2 g1[c1 c2] q3");
+    });
+});
diff --git a/resources/js/components/Factory/Document/blockMove.ts b/resources/js/components/Factory/Document/blockMove.ts
new file mode 100644
index 00000000..009451e4
--- /dev/null
+++ b/resources/js/components/Factory/Document/blockMove.ts
@@ -0,0 +1,130 @@
+import { nextTick, ref } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { questionNumbers } from "./questionSummary";
+import { cursorFor } from "./blockFocus";
+
+// what the document's live region says after a move
+export const moveNote = ref("");
+
+type Step = -1 | 1;
+
+// where one step takes a block: a question steps into a group next to it and
+// out at its ends, a group steps over a whole block
+function stepTarget(
+    blocks: FormBlockModel[],
+    block: FormBlockModel,
+    step: Step,
+): { scope: string | null; index: number } | null {
+    const inScope = (parent: string | null) =>
+        blocks.filter((item) => (item.parent_block ?? null) === parent);
+    const parent = block.parent_block ?? null;
+    const siblings = inScope(parent);
+    const index = siblings.findIndex((item) => item.id === block.id) + step;
+    const next = siblings[index];
+
+    if (block.type !== "group") {
+        if (parent && !next) {
+            const group = inScope(null).findIndex(
+                (item) => item.uuid === parent,
+            );
+
+            return { scope: null, index: group + (step > 0 ? 1 : 0) };
+        }
+
+        if (!parent && next?.type === "group") {
+            return {
+                scope: next.uuid,
+                index: step > 0 ? 0 : inScope(next.uuid).length,
+            };
+        }
+    }
+
+    return next ? { scope: parent, index } : null;
+}
+
+export function useMoveBlock() {
+    const store = useForm();
+    const workbench = useWorkbench();
+
+    const canMove = (block: FormBlockModel, step: Step) =>
+        stepTarget(store.blocks ?? [], block, step) !== null;
+
+    const say = async (text: string) => {
+        // a repeated text is only read out again after a change
+        moveNote.value = "";
+        await nextTick();
+        moveNote.value = text;
+    };
+
+    const moveBlock = async (block: FormBlockModel, step: Step) => {
+        const target = stepTarget(store.blocks ?? [], block, step);
+
+        if (!target) {
+            await say(step < 0 ? "Already at the top" : "Already at the bottom");
+            return false;
+        }
+
+        const from = block.parent_block ?? null;
+        const focused = document.activeElement as HTMLElement | null;
+
+        store.changeBlockSequence(target.scope ?? false, target.index, block);
+        await nextTick();
+
+        // a moved element loses focus; one in another list is a new element
+        if (focused?.isConnected) {
+            focused.focus();
+        } else if (workbench.block?.id === block.id) {
+            cursorFor.value = block.uuid;
+        } else {
+            document
+                .getElementById(`row-${block.uuid}`)
+                ?.querySelector<HTMLElement>(":scope > button")
+                ?.focus();
+        }
+
+        const blocks = store.blocks ?? [];
+        const numbers = questionNumbers(blocks);
+        const top = blocks.filter((item) => !item.parent_block);
+        const groupName = (uuid: string | null) =>
+            blocks.find((item) => item.uuid === uuid)?.title || "Group";
+
+        if (block.type === "group") {
+            await say(
+                `Moved group ${groupName(block.uuid)} to position ${top.findIndex((item) => item.id === block.id) + 1} of ${top.length}`,
+            );
+            return true;
+        }
+
+        const to = `to position ${numbers[block.uuid]} of ${Object.keys(numbers).length}`;
+
+        if (target.scope === from) {
+            await say(`Moved ${to}`);
+        } else if (target.scope) {
+            await say(`Moved into group ${groupName(target.scope)}, ${to}`);
+        } else {
+            await say(`Moved out of group ${groupName(from)}, ${to}`);
+        }
+
+        return true;
+    };
+
+    // Alt+Up/Down moves a block
+    const onMoveKey = (event: KeyboardEvent, block: FormBlockModel) => {
+        const step = { ArrowUp: -1, ArrowDown: 1 }[event.key] as Step;
+
+        if (
+            !step ||
+            !event.altKey ||
+            event.shiftKey ||
+            event.ctrlKey ||
+            event.metaKey
+        ) {
+            return;
+        }
+
+        event.preventDefault();
+        moveBlock(block, step);
+    };
+
+    return { canMove, moveBlock, onMoveKey };
+}

From 51aee378fbdb8a9708dadc87999afef400d0bcc0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:23:49 +0200
Subject: [PATCH 046/153] feat: move a question or group with Alt+Up/Down,
 close a question with Escape

Escape gives focus back to the question's row. A key a select or menu
inside the card already handled stays theirs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentGroup.vue        |  3 +
 .../Factory/Document/DocumentQuestion.test.ts | 96 ++++++++++++++++++-
 .../Factory/Document/DocumentQuestion.vue     | 24 ++++-
 3 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 715801ff..36a11dd4 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -7,6 +7,7 @@
   >
     <div
       class="group/header flex flex-wrap items-center gap-x-2 gap-y-1 pb-2 pl-3 sm:pl-1"
+      @keydown="!$event.defaultPrevented && onMoveKey($event, group)"
     >
       <span
         aria-hidden="true"
@@ -76,6 +77,7 @@ import { useForm, useLogic, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 import DocumentList from "./DocumentList.vue";
 import { useAddBlock } from "./blockFocus";
+import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
   group: FormBlockModel;
@@ -86,6 +88,7 @@ const store = useForm();
 const workbench = useWorkbench();
 const logic = useLogic();
 const { addBlock } = useAddBlock();
+const { onMoveKey } = useMoveBlock();
 
 const id = computed(() => `group-${props.group.uuid}`);
 const isOpen = computed(() => workbench.block?.id === props.group.id);
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 2d94d4ff..94ae68c5 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -1,6 +1,6 @@
-import { mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, it } from "vitest";
-import { useWorkbench } from "@/stores";
+import { flushPromises, mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
 import DocumentQuestion from "./DocumentQuestion.vue";
 
 const question = {
@@ -22,11 +22,27 @@ const question = {
 const mountQuestion = (block = question) =>
     mount(DocumentQuestion, {
         props: { block, number: 3 },
-        global: { stubs: { QuestionCard: { template: "<div>card</div>" } } },
+        global: {
+            stubs: {
+                QuestionCard: {
+                    template: `<div tabindex="-1" class="card">card</div>`,
+                },
+            },
+        },
+        attachTo: document.body,
     });
 
 describe("a closed question in the document", () => {
-    beforeEach(() => useWorkbench().$reset());
+    beforeEach(() => {
+        // the shared test store keeps its spies' calls
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
 
     it("shows its number, text and a meta line, never its random id", () => {
         const text = mountQuestion().find("button").text();
@@ -62,4 +78,74 @@ describe("a closed question in the document", () => {
         expect(wrapper.text()).toContain("card");
         expect(wrapper.find("button").exists()).toBe(false);
     });
+
+    it("moves with Alt+Up/Down, closed or open", async () => {
+        const store = useForm();
+        const workbench = useWorkbench();
+        const next = { id: 8, uuid: "next", type: "radio" } as FormBlockModel;
+        store.blocks = [question, next];
+        const wrapper = mountQuestion();
+
+        await wrapper.find("button").trigger("keydown", {
+            key: "ArrowDown",
+            altKey: true,
+        });
+        expect(store.changeBlockSequence).toHaveBeenCalledWith(
+            false,
+            1,
+            question,
+        );
+
+        workbench.block = question;
+        await wrapper.vm.$nextTick();
+        await wrapper.find(".card").trigger("keydown", {
+            key: "ArrowUp",
+            altKey: true,
+        });
+        // already first: nothing moves
+        expect(store.changeBlockSequence).toHaveBeenCalledTimes(1);
+
+        // a plain arrow or one with Shift is the text field's
+        await wrapper.find(".card").trigger("keydown", { key: "ArrowDown" });
+        await wrapper.find(".card").trigger("keydown", {
+            key: "ArrowDown",
+            altKey: true,
+            shiftKey: true,
+        });
+        expect(store.changeBlockSequence).toHaveBeenCalledTimes(1);
+    });
+
+    it("closes with Escape and gives focus back to its row", async () => {
+        const workbench = useWorkbench();
+        vi.mocked(workbench.clearWorkbench).mockImplementation(() => {
+            workbench.block = null;
+        });
+        workbench.block = question;
+        const wrapper = mountQuestion();
+
+        await wrapper.find(".card").trigger("keydown", { key: "Escape" });
+        await flushPromises();
+
+        expect(workbench.clearWorkbench).toHaveBeenCalled();
+        expect(document.activeElement?.tagName).toBe("BUTTON");
+        expect(document.activeElement?.textContent).toContain(
+            "Which days can you help?",
+        );
+    });
+
+    it("leaves Escape to a select or menu inside the card", async () => {
+        const workbench = useWorkbench();
+        workbench.block = question;
+        const wrapper = mountQuestion();
+        const card = wrapper.find(".card");
+        // like a listbox that closes on Escape
+        card.element.addEventListener("keydown", (event) =>
+            event.preventDefault(),
+        );
+
+        await card.trigger("keydown", { key: "Escape" });
+        await flushPromises();
+
+        expect(workbench.clearWorkbench).not.toHaveBeenCalled();
+    });
 });
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 70333659..de5a2090 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -2,6 +2,7 @@
   <div
     :id="`row-${block.uuid}`"
     class="group/question flex scroll-mt-4 items-start"
+    @keydown="onKeydown"
   >
     <div class="flex w-8 shrink-0 flex-col sm:w-12 items-end gap-1 pr-2 pt-3">
       <span
@@ -21,6 +22,7 @@
     <QuestionCard v-if="isOpen" :block="block" :number="number" />
     <button
       v-else
+      ref="row"
       type="button"
       class="min-h-14 min-w-0 flex-1 rounded-lg px-3 py-2.5 text-left hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="open"
@@ -64,13 +66,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, nextTick, ref } from "vue";
 import { D9Icon } from "@deck9/ui";
 import { useWorkbench } from "@/stores";
 import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import { plainText } from "./questionSummary";
 import QuestionCard from "./QuestionCard.vue";
 import { cursorFor } from "./blockFocus";
+import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -95,6 +98,25 @@ const choiceCount = computed(() =>
 );
 const ruleCount = computed(() => props.block.logics?.length ?? 0);
 
+const { onMoveKey } = useMoveBlock();
+const row = ref<HTMLButtonElement | null>(null);
+
+// Alt+Up/Down moves the question, open or not; Escape closes it
+const onKeydown = async (event: KeyboardEvent) => {
+  // a select or menu inside the card handled the key already
+  if (event.defaultPrevented) {
+    return;
+  }
+
+  onMoveKey(event, props.block);
+
+  if (event.key === "Escape" && isOpen.value) {
+    workbench.clearWorkbench();
+    await nextTick();
+    row.value?.focus();
+  }
+};
+
 const open = () => {
   cursorFor.value = props.block.uuid;
   workbench.putOnWorkbench(props.block);

From 06bc84b1ee48d827b99e330674c2ac6dbc0438b7 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:25:14 +0200
Subject: [PATCH 047/153] feat: read and edit logic rules as sentences

Each rule reads as a sentence: the question by number, the operator in
words, the answer in quotes, the target as a chip. Edit turns it into
pickers: answers come from the source question, operators fit its type,
and a rule whose question was deleted shows in red and can't be saved.
A thin gutter line runs from the open question to where it jumps.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/app.ts                           |   2 +
 .../Factory/Document/Rules/BlockRules.test.ts | 344 ++++++++++++++++
 .../Factory/Document/Rules/BlockRules.vue     |  49 +++
 .../Document/Rules/DeletedQuestion.vue        |  11 +
 .../Factory/Document/Rules/RuleEditor.vue     | 378 ++++++++++++++++++
 .../Factory/Document/Rules/RuleGutter.test.ts |  58 +++
 .../Factory/Document/Rules/RuleGutter.vue     |  84 ++++
 .../Factory/Document/Rules/RuleLine.vue       | 138 +++++++
 .../Factory/Document/Rules/ruleEditing.ts     |  88 ++++
 .../Factory/Document/Rules/ruleText.test.ts   |  79 ++++
 .../Factory/Document/Rules/ruleText.ts        | 119 ++++++
 11 files changed, 1350 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/Rules/BlockRules.test.ts
 create mode 100644 resources/js/components/Factory/Document/Rules/BlockRules.vue
 create mode 100644 resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
 create mode 100644 resources/js/components/Factory/Document/Rules/RuleEditor.vue
 create mode 100644 resources/js/components/Factory/Document/Rules/RuleGutter.test.ts
 create mode 100644 resources/js/components/Factory/Document/Rules/RuleGutter.vue
 create mode 100644 resources/js/components/Factory/Document/Rules/RuleLine.vue
 create mode 100644 resources/js/components/Factory/Document/Rules/ruleEditing.ts
 create mode 100644 resources/js/components/Factory/Document/Rules/ruleText.test.ts
 create mode 100644 resources/js/components/Factory/Document/Rules/ruleText.ts

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 4fcc4e6a..75ca8e12 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -65,6 +65,7 @@ import {
     faTextSlash,
     faTrash,
     faTree,
+    faTriangleExclamation,
     faTrophy,
     faUnderline,
     faUser,
@@ -129,6 +130,7 @@ library.add(
     faTextSlash,
     faTrash,
     faTree,
+    faTriangleExclamation,
     faTrophy,
     faUnderline,
     faUser,
diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
new file mode 100644
index 00000000..b5558eae
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
@@ -0,0 +1,344 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { D9Select } from "@deck9/ui";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useLogic } from "@/stores";
+import { questionNumbers } from "../questionSummary";
+import BlockRules from "./BlockRules.vue";
+import { addRule, editing } from "./ruleEditing";
+
+const choices = (...labels: string[]) =>
+    labels.map((label, sequence) => ({
+        type: "button",
+        is_editable: true,
+        label,
+        sequence,
+    }));
+
+const question = (
+    uuid: string,
+    type: string,
+    text: string,
+    extra: Partial<FormBlockModel> = {},
+) =>
+    ({
+        id: uuid.length,
+        uuid,
+        type,
+        message: `<p>${text}</p>`,
+        parent_block: null,
+        interactions: [],
+        logics: [],
+        ...extra,
+    }) as unknown as FormBlockModel;
+
+const rule = (
+    action: FormBlockLogic["action"],
+    conditions: Partial<FormBlockLogicCondition>[],
+    target: string | null = null,
+): FormBlockLogic => ({
+    id: 1,
+    uuid: "rule-1",
+    form_block_id: 1,
+    name: "Rule #1",
+    action,
+    action_payload: target,
+    evaluate: action === "goto" ? "after" : "before",
+    conditions: conditions.map((condition) => ({
+        operator: "equals",
+        value: "",
+        chainOperator: "and",
+        ...condition,
+    })) as FormBlockLogicCondition[],
+});
+
+let blocks: FormBlockModel[];
+const find = (uuid: string) =>
+    useForm().blocks!.find((block) => block.uuid === uuid)!;
+
+beforeEach(() => {
+    blocks = [
+        question("q-come", "radio", "Will you come?", {
+            interactions: choices("Yes", "No, not this time") as never,
+        }),
+        question("q-days", "checkbox", "Which days?", {
+            interactions: choices("Mon", "Tue") as never,
+        }),
+        question("q-rate", "rating", "How was it?"),
+        question("q-date", "date", "When?"),
+        question("q-num", "input-number", "How many?"),
+        question("q-name", "input-short", "Your name?"),
+        question("g-1", "group", "", { title: "Feedback" }),
+        question("q-diff", "input-long", "What should we do differently?", {
+            parent_block: "g-1",
+        }),
+    ];
+    useForm().blocks = blocks;
+    useLogic().$reset();
+    editing.value = null;
+});
+
+const mountRules = (uuid: string) =>
+    mount(BlockRules, {
+        props: { block: find(uuid), numbers: questionNumbers(blocks) },
+        attachTo: document.body,
+    });
+
+const text = (wrapper: VueWrapper) => wrapper.text().replace(/\s+/g, " ");
+
+const select = (wrapper: VueWrapper, name: string) =>
+    wrapper
+        .findAllComponents(D9Select)
+        .find((field) => String(field.props("id")).endsWith(name))!;
+
+const optionLabels = (wrapper: VueWrapper, name: string) =>
+    (select(wrapper, name).props("options") as { label: string }[]).map(
+        (option) => option.label,
+    );
+
+const pick = async (wrapper: VueWrapper, name: string, label: string) => {
+    const field = select(wrapper, name);
+    const option = (field.props("options") as { label: string }[]).find(
+        (item) => item.label === label,
+    );
+    field.vm.$emit("update:modelValue", option);
+    await wrapper.vm.$nextTick();
+};
+
+const button = (wrapper: VueWrapper, label: string) =>
+    wrapper.findAll("button").find((item) => item.text() === label)!;
+
+describe("a rule under its question", () => {
+    it("reads a jump on the question's own answer as a short sentence", () => {
+        find("q-come").logics = [
+            rule(
+                "goto",
+                [{ source: "q-come", value: "No, not this time" }],
+                "q-diff",
+            ),
+        ];
+
+        expect(text(mountRules("q-come"))).toContain(
+            "If “No, not this time”, go to 7 · What should we do differently?",
+        );
+    });
+
+    it("names another question by its number, never its id", () => {
+        find("q-name").logics = [
+            rule(
+                "goto",
+                [
+                    { source: "q-come", operator: "equalsNot", value: "Yes" },
+                    { source: "q-days", operator: "contains", value: "Mon" },
+                ],
+                "q-diff",
+            ),
+        ];
+
+        const sentence = text(mountRules("q-name"));
+
+        expect(sentence).toContain(
+            "If question 1 is not “Yes” and question 2 includes “Mon”, go to 7 · What should",
+        );
+        expect(sentence).not.toContain("q-come");
+    });
+
+    it("says when a group is hidden", () => {
+        find("g-1").logics = [
+            rule("hide", [{ source: "q-come", value: "No, not this time" }]),
+        ];
+
+        expect(text(mountRules("g-1"))).toContain(
+            "Hidden if question 1 is “No, not this time”",
+        );
+    });
+
+    it("ignores an old target on a hide rule", () => {
+        find("g-1").logics = [
+            rule("show", [{ source: "q-come", value: "Yes" }], "q-name"),
+        ];
+
+        const sentence = text(mountRules("g-1"));
+
+        expect(sentence).toContain("Shown only if question 1 is “Yes”");
+        expect(sentence).not.toContain("go to");
+    });
+
+    it("shows a rule whose question was deleted in red", () => {
+        find("q-name").logics = [
+            rule("goto", [{ source: "gone", value: "Yes" }], "gone-too"),
+        ];
+
+        const wrapper = mountRules("q-name");
+        const broken = wrapper.findAll(".text-red-700");
+
+        expect(broken).toHaveLength(2);
+        expect(broken[0].text()).toContain("Deleted question");
+    });
+});
+
+describe("editing a rule in place", () => {
+    beforeEach(() => {
+        find("q-name").logics = [
+            rule("goto", [{ source: "q-come", value: "Yes" }], "q-diff"),
+        ];
+    });
+
+    const edit = async () => {
+        const wrapper = mountRules("q-name");
+        await button(wrapper, "Edit").trigger("click");
+        return wrapper;
+    };
+
+    it("turns the sentence into pickers", async () => {
+        const wrapper = await edit();
+
+        expect(text(wrapper)).not.toContain("If question 1 is “Yes”");
+        expect(optionLabels(wrapper, "-0-source")).toEqual([
+            "1 · Will you come?",
+            "2 · Which days?",
+            "3 · How was it?",
+            "4 · When?",
+            "5 · How many?",
+            "6 · Your name?",
+        ]);
+        expect(optionLabels(wrapper, "-target")).toEqual([
+            "7 · What should we do differently?",
+        ]);
+    });
+
+    it("offers the choices of a single choice question", async () => {
+        const wrapper = await edit();
+
+        expect(optionLabels(wrapper, "-0-operator")).toEqual(["is", "is not"]);
+        expect(optionLabels(wrapper, "-0-answer")).toEqual([
+            "Yes",
+            "No, not this time",
+        ]);
+    });
+
+    it("offers the range of a rating", async () => {
+        const wrapper = await edit();
+        await pick(wrapper, "-0-source", "3 · How was it?");
+
+        expect(optionLabels(wrapper, "-0-operator")).toContain("is more than");
+        expect(optionLabels(wrapper, "-0-answer")).toEqual([
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+        ]);
+    });
+
+    it.each([
+        ["4 · When?", "date"],
+        ["5 · How many?", "number"],
+    ])("gives %s a %s field", async (source, type) => {
+        const wrapper = await edit();
+        await pick(wrapper, "-0-source", source);
+
+        expect(wrapper.find(`input[type=${type}]`).exists()).toBe(true);
+    });
+
+    it("keeps a text field for text, with a case hint", async () => {
+        const wrapper = await edit();
+        await pick(wrapper, "-0-source", "6 · Your name?");
+
+        expect(optionLabels(wrapper, "-0-operator")).toHaveLength(6);
+        expect(wrapper.find("input[type=text]").exists()).toBe(true);
+        expect(text(wrapper)).toContain("Upper and lower case must match.");
+    });
+
+    it("can't save a rule whose question was deleted until it's fixed", async () => {
+        find("q-name").logics = [
+            rule("goto", [{ source: "gone", value: "Yes" }], "q-diff"),
+        ];
+        const wrapper = await edit();
+        const save = () => button(wrapper, "Save rule");
+
+        expect(text(wrapper)).toContain("Deleted question");
+        expect(text(wrapper)).toContain(
+            "The question this rule used was deleted. Pick another one.",
+        );
+        expect(save().attributes("disabled")).toBeDefined();
+
+        await save().trigger("click");
+        expect(useLogic().saveSingleRule).not.toHaveBeenCalled();
+
+        await pick(wrapper, "-0-source", "1 · Will you come?");
+        expect(save().attributes("disabled")).toBeUndefined();
+    });
+
+    it("saves the picked answer and shows the sentence again", async () => {
+        const logic = useLogic();
+        vi.mocked(logic.saveSingleRule).mockImplementation(
+            async (saved) => saved,
+        );
+        const wrapper = await edit();
+
+        await pick(wrapper, "-0-answer", "No, not this time");
+        await button(wrapper, "Save rule").trigger("click");
+        await vi.waitFor(() => expect(editing.value).toBeNull());
+
+        expect(logic.saveSingleRule).toHaveBeenCalledWith(
+            expect.objectContaining({
+                action: "goto",
+                action_payload: "q-diff",
+                evaluate: "after",
+                conditions: [
+                    expect.objectContaining({
+                        source: "q-come",
+                        operator: "equals",
+                        value: "No, not this time",
+                    }),
+                ],
+            }),
+        );
+        expect(text(wrapper)).toContain("If question 1 is “No, not this time”");
+    });
+
+    it("shows why the server refused a rule", async () => {
+        vi.mocked(useLogic().saveSingleRule).mockRejectedValue({
+            response: {
+                status: 422,
+                data: { errors: { action_payload: ["Pick a question."] } },
+            },
+        });
+        const wrapper = await edit();
+
+        await button(wrapper, "Save rule").trigger("click");
+
+        await vi.waitFor(() =>
+            expect(wrapper.find("[role=alert]").text()).toContain(
+                "Pick a question.",
+            ),
+        );
+        expect(editing.value).not.toBeNull();
+    });
+});
+
+describe("adding a rule", () => {
+    it("starts a jump on the question's own answer, and Cancel drops it", async () => {
+        const owner = find("q-come");
+        addRule(owner);
+        const wrapper = mountRules("q-come");
+        await wrapper.vm.$nextTick();
+
+        expect(optionLabels(wrapper, "-0-source")).toEqual([
+            "1 · Will you come?",
+        ]);
+        expect(select(wrapper, "-0-source").props("modelValue")).toMatchObject({
+            id: "q-come",
+        });
+
+        await button(wrapper, "Cancel").trigger("click");
+        expect(owner.logics).toHaveLength(0);
+    });
+
+    it("hides a group by default", () => {
+        const group = find("g-1");
+        addRule(group);
+
+        expect(group.logics?.[0].action).toBe("hide");
+    });
+});
diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.vue b/resources/js/components/Factory/Document/Rules/BlockRules.vue
new file mode 100644
index 00000000..e97be7b6
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.vue
@@ -0,0 +1,49 @@
+<template>
+  <ul v-if="block.logics?.length" :aria-label="`Rules of ${owner}`">
+    <li
+      v-for="(rule, index) in block.logics"
+      :key="rule.uuid ?? `new-${index}`"
+    >
+      <RuleEditor
+        v-if="isEditing(index)"
+        v-bind="{ rule, index, owner, numbers, block }"
+        :id="`${id}-${index}`"
+        @close="returnTo(index)"
+      />
+      <RuleLine
+        v-else
+        v-bind="{ rule, index, owner, numbers, block }"
+        :id="`${id}-${index}`"
+        @edit="editRule(block, index)"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick } from "vue";
+import RuleEditor from "./RuleEditor.vue";
+import RuleLine from "./RuleLine.vue";
+import { editing, editRule, returnFocus } from "./ruleEditing";
+
+const props = defineProps<{
+  block: FormBlockModel;
+  numbers: Record<string, number>;
+}>();
+
+const id = computed(() => `rules-${props.block.uuid}`);
+const owner = computed(() =>
+  props.block.type === "group"
+    ? `group ${props.block.title || "Group"}`
+    : `question ${props.numbers[props.block.uuid]}`,
+);
+
+const isEditing = (index: number) =>
+  editing.value?.block === props.block.uuid && editing.value.index === index;
+
+// the cursor goes back to the rule's Edit, or where it was for a dropped rule
+const returnTo = async (index: number) => {
+  await nextTick();
+  returnFocus(document.getElementById(`${id.value}-${index}-edit`));
+};
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue b/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
new file mode 100644
index 00000000..40da58ec
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
@@ -0,0 +1,11 @@
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded bg-red-50 px-1.5 font-medium text-red-700 ring-1 ring-inset ring-red-200"
+  >
+    <D9Icon name="triangle-exclamation" aria-hidden="true" />Deleted question
+  </span>
+</template>
+
+<script setup lang="ts">
+import { D9Icon } from "@deck9/ui";
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/RuleEditor.vue b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
new file mode 100644
index 00000000..74201355
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
@@ -0,0 +1,378 @@
+<template>
+  <div
+    role="group"
+    :aria-label="`Rule ${index + 1} of ${owner}`"
+    class="my-1 space-y-3 rounded-lg border border-grey-200 bg-white p-3 text-[13px] text-grey-700 shadow-sm"
+    @keydown.esc="cancel"
+  >
+    <div v-for="(condition, i) in draft.conditions" :key="i" class="space-y-1">
+      <div class="flex flex-wrap items-center gap-2">
+        <span v-if="i === 0" class="w-12 shrink-0 font-medium">If</span>
+        <div v-else class="w-20 shrink-0">
+          <span :id="`${id}-${i}-chain-label`" class="sr-only"
+            >And or or, condition {{ i + 1 }}</span
+          >
+          <D9Select
+            :id="`${id}-${i}-chain`"
+            size="small"
+            :options="chains"
+            :model-value="optionOf(chains, condition.chainOperator)"
+            @update:model-value="
+              (option) => (condition.chainOperator = option.id as 'and' | 'or')
+            "
+          />
+        </div>
+
+        <div
+          class="w-full min-w-0 rounded-md sm:w-60"
+          :class="isDeleted(condition.source) && 'ring-2 ring-red-500'"
+        >
+          <span :id="`${id}-${i}-source-label`" class="sr-only"
+            >Question for condition {{ i + 1 }}</span
+          >
+          <D9Select
+            :id="`${id}-${i}-source`"
+            size="small"
+            :options="sourceOptions"
+            :model-value="optionOf(sourceOptions, condition.source)"
+            :placeholder="
+              isDeleted(condition.source)
+                ? 'Deleted question'
+                : 'Pick a question'
+            "
+            @update:model-value="
+              (option) => setSource(condition, option.id as string)
+            "
+          />
+        </div>
+
+        <div class="w-36 shrink-0">
+          <span :id="`${id}-${i}-operator-label`" class="sr-only"
+            >Comparison for condition {{ i + 1 }}</span
+          >
+          <D9Select
+            :id="`${id}-${i}-operator`"
+            size="small"
+            :options="operatorsFor(question(condition.source))"
+            :model-value="
+              optionOf(
+                operatorsFor(question(condition.source)),
+                condition.operator,
+              )
+            "
+            @update:model-value="
+              (option) => (condition.operator = option.id as Operator)
+            "
+          />
+        </div>
+
+        <div class="min-w-0 flex-1 basis-40">
+          <template v-if="answerOptions(question(condition.source)).length">
+            <span :id="`${id}-${i}-answer-label`" class="sr-only"
+              >Answer for condition {{ i + 1 }}</span
+            >
+            <D9Select
+              :id="`${id}-${i}-answer`"
+              size="small"
+              placeholder="Pick an answer"
+              :options="answersOf(condition)"
+              :model-value="optionOf(answersOf(condition), condition.value)"
+              @update:model-value="
+                (option) => (condition.value = String(option.id))
+              "
+            />
+          </template>
+          <template v-else>
+            <label :for="`${id}-${i}-answer`" class="sr-only"
+              >Answer for condition {{ i + 1 }}</label
+            >
+            <D9Input
+              :id="`${id}-${i}-answer`"
+              :type="fieldType(condition)"
+              size="small"
+              block
+              placeholder="Answer"
+              :aria-describedby="
+                isText(condition) ? `${id}-${i}-hint` : undefined
+              "
+              :model-value="condition.value"
+              @update:model-value="
+                (value) => (condition.value = String(value ?? ''))
+              "
+            />
+          </template>
+        </div>
+
+        <button
+          v-if="draft.conditions.length > 1"
+          type="button"
+          :aria-label="`Remove condition ${i + 1}`"
+          class="grid h-8 w-8 shrink-0 place-items-center rounded-md text-grey-600 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          @click="draft.conditions.splice(i, 1)"
+        >
+          <D9Icon name="trash" aria-hidden="true" />
+        </button>
+      </div>
+
+      <p v-if="isDeleted(condition.source)" class="text-xs text-red-700">
+        The question this rule used was deleted. Pick another one.
+      </p>
+      <p
+        v-if="isText(condition)"
+        :id="`${id}-${i}-hint`"
+        class="text-xs text-grey-600"
+      >
+        Upper and lower case must match.
+      </p>
+    </div>
+
+    <button
+      type="button"
+      class="flex h-8 items-center rounded-md px-2 font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="addCondition"
+    >
+      Add condition
+    </button>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="w-12 shrink-0 font-medium">then</span>
+      <div class="w-48 shrink-0">
+        <span :id="`${id}-action-label`" class="sr-only">Action</span>
+        <D9Select
+          :id="`${id}-action`"
+          size="small"
+          :options="actions"
+          :model-value="optionOf(actions, draft.action)"
+          @update:model-value="
+            (option) => (draft.action = option.id as FormBlockLogic['action'])
+          "
+        />
+      </div>
+      <div
+        v-if="draft.action === 'goto'"
+        class="min-w-0 flex-1 basis-60 rounded-md"
+        :class="targetDeleted && 'ring-2 ring-red-500'"
+      >
+        <span :id="`${id}-target-label`" class="sr-only">Go to question</span>
+        <D9Select
+          :id="`${id}-target`"
+          size="small"
+          :options="targetOptions"
+          :model-value="optionOf(targetOptions, draft.action_payload)"
+          :placeholder="targetDeleted ? 'Deleted question' : 'Pick a question'"
+          @update:model-value="
+            (option) => (draft.action_payload = option.id as string)
+          "
+        />
+      </div>
+    </div>
+    <p v-if="targetDeleted" class="text-xs text-red-700">
+      The question this rule went to was deleted. Pick another one.
+    </p>
+
+    <ul
+      v-if="errors.length"
+      role="alert"
+      class="space-y-1 text-xs text-red-700"
+    >
+      <li v-for="error in errors" :key="error">{{ error }}</li>
+    </ul>
+
+    <div
+      class="flex flex-wrap items-center gap-2 border-t border-grey-200 pt-3"
+    >
+      <button
+        v-if="rule.id !== undefined"
+        type="button"
+        class="flex h-8 items-center rounded-md px-2 font-semibold text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        @click="remove"
+      >
+        Remove rule
+      </button>
+      <span class="flex-1" />
+      <D9Button label="Cancel" color="light" size="small" @click="cancel" />
+      <D9Button
+        label="Save rule"
+        size="small"
+        :is-loading="saving"
+        :is-disabled="broken"
+        :disabled="broken"
+        @click="save"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from "vue";
+import { D9Button, D9Icon, D9Input, D9Select } from "@deck9/ui";
+import { useForm, useLogic } from "@/stores";
+import { findAllBlocksBeforeTarget } from "@/stores/helpers/queue";
+import { plainText } from "../questionSummary";
+import { answerKind, answerOptions, operatorsFor } from "./ruleText";
+import { editing, keepSaved, stopEditing } from "./ruleEditing";
+
+const props = defineProps<{
+  id: string;
+  block: FormBlockModel;
+  rule: FormBlockLogic;
+  index: number;
+  owner: string;
+  numbers: Record<string, number>;
+}>();
+const emit = defineEmits<{ close: [] }>();
+
+const store = useForm();
+const logic = useLogic();
+
+type Option = { id: string; label: string };
+
+// edits a copy: Cancel leaves the rule as it was
+const draft = reactive({
+  ...props.rule,
+  conditions: ((props.rule.conditions ?? []) as FormBlockLogicCondition[]).map(
+    (condition) => ({ ...condition }),
+  ),
+});
+const saving = ref(false);
+const errors = ref<string[]>([]);
+
+const isGroup = props.block.type === "group";
+const chains: Option[] = [
+  { id: "and", label: "And" },
+  { id: "or", label: "Or" },
+];
+const actions: Option[] = [
+  ...(isGroup ? [] : [{ id: "goto", label: "go to" }]),
+  { id: "hide", label: `hide this ${isGroup ? "group" : "question"}` },
+  { id: "show", label: `show this ${isGroup ? "group" : "question"}` },
+];
+
+const question = (uuid?: string | null) =>
+  (store.blocks ?? []).find(
+    (block) => block.uuid === uuid && block.type !== "group",
+  );
+const isDeleted = (uuid?: string | null) => !!uuid && !question(uuid);
+const optionOf = <T extends { id: string }>(options: T[], id?: string | null) =>
+  options.find((option) => option.id === id) ?? null;
+const toOption = (block: FormBlockModel): Option => ({
+  id: block.uuid,
+  label: `${props.numbers[block.uuid]} · ${plainText(block.message) || "No question text yet"}`,
+});
+
+// a jump can use the question's own answer; hide and show only earlier ones
+const sourceOptions = computed(() =>
+  findAllBlocksBeforeTarget(store.blocksTree, props.block.uuid, {
+    includeTarget: draft.action === "goto",
+  })
+    .filter((block) => answerKind(block))
+    .map(toOption),
+);
+
+// jumps go forward; an earlier target a rule already has stays
+const targetOptions = computed(() =>
+  (store.blocks ?? [])
+    .filter(
+      (block) =>
+        block.type !== "group" &&
+        (props.numbers[block.uuid] > props.numbers[props.block.uuid] ||
+          block.uuid === draft.action_payload),
+    )
+    .sort((a, b) => props.numbers[a.uuid] - props.numbers[b.uuid])
+    .map(toOption),
+);
+
+const targetDeleted = computed(
+  () => draft.action === "goto" && isDeleted(draft.action_payload),
+);
+const broken = computed(
+  () =>
+    targetDeleted.value ||
+    draft.conditions.some((condition) => isDeleted(condition.source)),
+);
+
+const answersOf = (condition: FormBlockLogicCondition): Option[] =>
+  answerOptions(question(condition.source)).map((answer) => ({
+    id: answer,
+    label: answer,
+  }));
+const isText = (condition: FormBlockLogicCondition) =>
+  answerKind(question(condition.source)) === "text";
+const fieldType = (condition: FormBlockLogicCondition) =>
+  ({ number: "number", date: "date" })[
+    answerKind(question(condition.source)) as string
+  ] ?? "text";
+
+const setSource = (condition: FormBlockLogicCondition, uuid: string) => {
+  condition.source = uuid;
+  condition.operator = operatorsFor(question(uuid))[0].id;
+  condition.value = "";
+};
+
+const addCondition = () => {
+  draft.conditions.push({
+    source: undefined,
+    operator: "equals",
+    value: "",
+    chainOperator: "and",
+  });
+};
+
+if (!draft.conditions.length) {
+  addCondition();
+}
+
+const close = () => {
+  emit("close");
+};
+
+const cancel = () => {
+  stopEditing();
+  close();
+};
+
+const save = async () => {
+  if (broken.value || saving.value) {
+    return;
+  }
+
+  saving.value = true;
+  errors.value = [];
+  // the store saves the rules of its block
+  logic.block = props.block;
+
+  try {
+    const isGoto = draft.action === "goto";
+    keepSaved(
+      await logic.saveSingleRule({
+        ...draft,
+        evaluate: isGoto ? "after" : "before",
+        action_payload: isGoto ? draft.action_payload : null,
+      }),
+    );
+    close();
+  } catch (error: any) {
+    const data = error?.response?.status === 422 ? error.response.data : null;
+    errors.value = data?.errors
+      ? (Object.values(data.errors).flat() as string[])
+      : ["The rule wasn't saved. Check your connection and try again."];
+  } finally {
+    saving.value = false;
+  }
+};
+
+const remove = async () => {
+  logic.block = props.block;
+  const count = props.block.logics?.length ?? 0;
+
+  await logic.removeRule(props.index);
+
+  // a failed delete keeps the rule and shows the save error
+  if ((props.block.logics?.length ?? 0) < count) {
+    editing.value = null;
+    close();
+  }
+};
+
+onMounted(() => document.getElementById(`${props.id}-0-source`)?.focus());
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/RuleGutter.test.ts b/resources/js/components/Factory/Document/Rules/RuleGutter.test.ts
new file mode 100644
index 00000000..4aa8b31d
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleGutter.test.ts
@@ -0,0 +1,58 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import RuleGutter from "./RuleGutter.vue";
+
+const block = (uuid: string, logics: Partial<FormBlockLogic>[] = []) =>
+    ({ uuid, type: "radio", logics }) as unknown as FormBlockModel;
+
+const row = (uuid: string, top: number) => {
+    const element = document.createElement("div");
+    element.id = `row-${uuid}`;
+    element.getBoundingClientRect = () => ({ top }) as DOMRect;
+    document.body.append(element);
+};
+
+const lines = () => document.querySelectorAll("[data-rule-line]");
+
+describe("the gutter line of the open question", () => {
+    beforeEach(() => {
+        row("q-1", 100);
+        row("q-2", 200);
+        row("q-3", 300);
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    const open = (source: FormBlockModel) => {
+        useForm().blocks = [source, block("q-2"), block("q-3")];
+        useWorkbench().block = source;
+        return mount(RuleGutter, { attachTo: document.body });
+    };
+
+    it("runs from the question down to where its rule jumps", async () => {
+        open(block("q-1", [{ action: "goto", action_payload: "q-3" }]));
+
+        await vi.waitFor(() => expect(lines()).toHaveLength(1));
+        const line = lines()[0] as HTMLElement;
+
+        expect(line.style.top).toBe("124px");
+        expect(line.style.height).toBe("200px");
+    });
+
+    it("draws nothing for hide rules, deleted targets or jumps back up", async () => {
+        const wrapper = open(
+            block("q-2", [
+                { action: "hide", action_payload: "q-3" },
+                { action: "goto", action_payload: "gone" },
+                { action: "goto", action_payload: "q-1" },
+            ]),
+        );
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        expect(lines()).toHaveLength(0);
+    });
+});
diff --git a/resources/js/components/Factory/Document/Rules/RuleGutter.vue b/resources/js/components/Factory/Document/Rules/RuleGutter.vue
new file mode 100644
index 00000000..7a3ac17f
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleGutter.vue
@@ -0,0 +1,84 @@
+<template>
+  <div
+    ref="anchor"
+    aria-hidden="true"
+    class="pointer-events-none relative z-10 h-0"
+  >
+    <template v-for="line in lines" :key="line.target">
+      <span
+        data-rule-line
+        class="absolute left-[3px] w-0.5 bg-blue-200"
+        :style="{ top: `${line.top}px`, height: `${line.height}px` }"
+      />
+      <span
+        class="absolute left-0 h-2 w-2 rounded-full bg-blue-500"
+        :style="{ top: `${line.top - 4}px` }"
+      />
+      <span
+        class="absolute left-[3px] h-0.5 w-4 bg-blue-200"
+        :style="{ top: `${line.top + line.height - 1}px` }"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import { useForm, useWorkbench } from "@/stores";
+
+const store = useForm();
+const workbench = useWorkbench();
+const anchor = ref<HTMLElement | null>(null);
+const lines = ref<{ target: string; top: number; height: number }[]>([]);
+
+// a row's number sits 24 px below the row's top
+const NUMBER_MIDDLE = 24;
+
+// where the open question's rules jump to
+const targets = computed(() =>
+  (workbench.block?.logics ?? [])
+    .filter((rule) => rule.action === "goto" && rule.action_payload)
+    .map((rule) => rule.action_payload as string),
+);
+
+const measure = () => {
+  const origin = anchor.value?.getBoundingClientRect().top;
+  const from = document
+    .getElementById(`row-${workbench.block?.uuid}`)
+    ?.getBoundingClientRect().top;
+
+  lines.value = [];
+
+  if (origin === undefined || from === undefined) {
+    return;
+  }
+
+  const top = from - origin + NUMBER_MIDDLE;
+
+  for (const target of new Set(targets.value)) {
+    const to = document
+      .getElementById(`row-${target}`)
+      ?.getBoundingClientRect().top;
+    const height = to === undefined ? 0 : to - origin + NUMBER_MIDDLE - top;
+
+    if (height > 0) {
+      lines.value.push({ target, top, height });
+    }
+  }
+};
+
+// the order of the rows: a move changes no height
+const order = computed(() =>
+  (store.blocks ?? [])
+    .map((block) => `${block.uuid}:${block.parent_block}`)
+    .join(),
+);
+
+watch([targets, order, () => workbench.block?.uuid], () => nextTick(measure), {
+  immediate: true,
+});
+
+// rows grow and shrink while typing, opening and moving
+useResizeObserver(() => anchor.value?.parentElement, measure);
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/RuleLine.vue b/resources/js/components/Factory/Document/Rules/RuleLine.vue
new file mode 100644
index 00000000..59b84a45
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/RuleLine.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="flex items-start gap-2 py-0.5">
+    <p class="min-w-0 flex-1 py-1 text-[13px] leading-6 text-grey-700">
+      <template v-for="(part, i) in parts" :key="i">
+        <DeletedQuestion v-if="part.deleted" />
+        <template v-else-if="part.number"
+          ><span class="sr-only">{{ "question " }}</span
+          ><span class="tabular-nums">{{ part.number }}</span></template
+        >
+        <span
+          v-else-if="part.value !== undefined"
+          class="font-medium text-grey-900"
+          >“{{ part.value }}”</span
+        >
+        <template v-else>{{ part.text }}</template>
+      </template>
+      <button
+        v-if="target"
+        type="button"
+        :title="targetLabel"
+        class="inline-flex h-6 max-w-full items-center rounded-md bg-blue-50 px-2 align-middle font-medium text-blue-700 hover:bg-blue-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:max-w-[22rem]"
+        @click="goToTarget"
+      >
+        <span class="truncate">{{ targetLabel }}</span>
+      </button>
+    </p>
+    <button
+      :id="`${id}-edit`"
+      type="button"
+      :aria-label="`Edit rule ${index + 1} of ${owner}`"
+      class="flex h-8 shrink-0 items-center rounded-md px-2 text-[13px] font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      @click="emit('edit')"
+    >
+      Edit
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { plainText } from "../questionSummary";
+import { focusBlock } from "../blockFocus";
+import { operatorLabel } from "./ruleText";
+import DeletedQuestion from "./DeletedQuestion.vue";
+
+const props = defineProps<{
+  id: string;
+  block: FormBlockModel;
+  rule: FormBlockLogic;
+  index: number;
+  // "question 4" or "group Feedback"
+  owner: string;
+  numbers: Record<string, number>;
+}>();
+const emit = defineEmits<{ edit: [] }>();
+
+const store = useForm();
+const workbench = useWorkbench();
+
+type Part = {
+  text?: string;
+  value?: string;
+  number?: number;
+  deleted?: boolean;
+};
+
+const question = (uuid?: string | null) =>
+  (store.blocks ?? []).find(
+    (block) => block.uuid === uuid && block.type !== "group",
+  );
+
+const isGoto = computed(() => props.rule.action === "goto");
+const target = computed(() =>
+  isGoto.value ? question(props.rule.action_payload) : undefined,
+);
+const targetLabel = computed(() => {
+  const block = target.value;
+  return block
+    ? `${props.numbers[block.uuid]} · ${plainText(block.message) || "No question text yet"}`
+    : "";
+});
+
+const lead = { goto: "If ", hide: "Hidden if ", show: "Shown only if " };
+
+const parts = computed(() => {
+  const conditions = (props.rule.conditions ?? []) as FormBlockLogicCondition[];
+  const [first] = conditions;
+  // "If “No”, go to …" when a question jumps on its own answer
+  const short =
+    isGoto.value &&
+    conditions.length === 1 &&
+    first.source === props.block.uuid &&
+    (first.operator === "equals" || first.operator === "contains");
+  const parts: Part[] = [{ text: lead[props.rule.action] }];
+
+  conditions.forEach((condition, i) => {
+    if (i > 0) {
+      parts.push({ text: condition.chainOperator === "or" ? " or " : " and " });
+    }
+
+    if (!short) {
+      const source = question(condition.source);
+
+      if (source) {
+        parts.push({ number: props.numbers[source.uuid] });
+      } else {
+        parts.push(condition.source ? { deleted: true } : { text: "…" });
+      }
+
+      parts.push({ text: ` ${operatorLabel(condition.operator, source)} ` });
+    }
+
+    parts.push({ value: condition.value ?? "" });
+  });
+
+  if (!conditions.length) {
+    parts.push({ text: "…" });
+  }
+
+  if (isGoto.value) {
+    parts.push({ text: ", go to " });
+
+    if (!target.value) {
+      parts.push(props.rule.action_payload ? { deleted: true } : { text: "…" });
+    }
+  }
+
+  return parts;
+});
+
+const goToTarget = () => {
+  if (target.value) {
+    workbench.putOnWorkbench(target.value);
+    focusBlock(target.value);
+  }
+};
+</script>
diff --git a/resources/js/components/Factory/Document/Rules/ruleEditing.ts b/resources/js/components/Factory/Document/Rules/ruleEditing.ts
new file mode 100644
index 00000000..df019ead
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/ruleEditing.ts
@@ -0,0 +1,88 @@
+import { ref } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { answerKind, operatorsFor } from "./ruleText";
+
+// the one rule that shows as pickers: its block and its place in the block's rules
+export const editing = ref<{ block: string; index: number } | null>(null);
+
+// where the cursor goes back to when a new rule is dropped
+let opener: HTMLElement | null = null;
+
+// ends editing; a new rule that was never saved goes with it
+export function stopEditing() {
+    const current = editing.value;
+    editing.value = null;
+
+    const block = useForm().blocks?.find(
+        (item) => item.uuid === current?.block,
+    );
+    const rule = current && block?.logics?.[current.index];
+
+    if (rule && rule.id === undefined) {
+        block.logics?.splice(current.index, 1);
+    }
+}
+
+function start(block: FormBlockModel, index: number) {
+    const workbench = useWorkbench();
+
+    opener = document.activeElement as HTMLElement | null;
+    editing.value = { block: block.uuid, index };
+
+    if (workbench.block?.id !== block.id) {
+        workbench.putOnWorkbench(block);
+    }
+}
+
+export function editRule(block: FormBlockModel, index: number) {
+    stopEditing();
+    start(block, index);
+}
+
+// a question jumps on its own answer; a group hides
+export function addRule(block: FormBlockModel) {
+    stopEditing();
+
+    const isGroup = block.type === "group";
+    const source = !isGroup && answerKind(block) ? block : null;
+    const logics = block.logics ?? [];
+
+    block.logics = [
+        ...logics,
+        {
+            form_block_id: block.id,
+            name: `Rule #${logics.length + 1}`,
+            action: isGroup ? "hide" : "goto",
+            action_payload: null,
+            evaluate: isGroup ? "before" : "after",
+            conditions: [
+                {
+                    source: source?.uuid,
+                    operator: operatorsFor(source)[0].id,
+                    value: "",
+                    chainOperator: "and",
+                },
+            ],
+        },
+    ];
+
+    start(block, logics.length);
+}
+
+// the saved rule takes the place of the one being edited
+export function keepSaved(rule: FormBlockLogic) {
+    const current = editing.value;
+    const block = useForm().blocks?.find(
+        (item) => item.uuid === current?.block,
+    );
+
+    if (current && block?.logics) {
+        block.logics[current.index] = rule;
+    }
+
+    editing.value = null;
+}
+
+export function returnFocus(fallback: HTMLElement | null) {
+    (fallback ?? (opener?.isConnected ? opener : null))?.focus();
+}
diff --git a/resources/js/components/Factory/Document/Rules/ruleText.test.ts b/resources/js/components/Factory/Document/Rules/ruleText.test.ts
new file mode 100644
index 00000000..23bcbc5b
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/ruleText.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { answerOptions, operatorLabel, operatorsFor } from "./ruleText";
+
+const block = (type: string, interactions: unknown[] = []) =>
+    ({ uuid: type, type, interactions }) as unknown as FormBlockModel;
+
+const labels = (type: string) => operatorsFor(block(type)).map((o) => o.label);
+
+describe("rule operators", () => {
+    it("offer is and is not for a single choice", () => {
+        expect(labels("radio")).toEqual(["is", "is not"]);
+    });
+
+    it("offer includes and doesn't include for checkboxes", () => {
+        expect(labels("checkbox")).toEqual(["includes", "doesn't include"]);
+    });
+
+    it.each(["input-number", "rating", "scale", "date"])(
+        "offer comparisons for %s",
+        (type) => {
+            expect(labels(type)).toEqual([
+                "is",
+                "is not",
+                "is less than",
+                "is more than",
+            ]);
+        },
+    );
+
+    it("offer all six for text", () => {
+        expect(labels("input-short")).toEqual([
+            "is",
+            "is not",
+            "contains",
+            "doesn't contain",
+            "is less than",
+            "is more than",
+        ]);
+    });
+
+    it("name a stored operator in words", () => {
+        expect(operatorLabel("equals", block("radio"))).toBe("is");
+        expect(operatorLabel("contains", block("checkbox"))).toBe("includes");
+        expect(operatorLabel("isGreaterThan", undefined)).toBe("is more than");
+    });
+});
+
+describe("rule answers", () => {
+    it("are the choices of a choice question, in order", () => {
+        const question = block("radio", [
+            { type: "button", is_editable: true, label: "No", sequence: 2 },
+            { type: "button", is_editable: true, label: "Yes", sequence: 1 },
+            { type: "button", is_editable: false, label: "Other", sequence: 3 },
+            { type: "button", is_editable: true, label: "", sequence: 4 },
+        ]);
+
+        expect(answerOptions(question)).toEqual(["Yes", "No"]);
+    });
+
+    it("are the range of a rating or scale", () => {
+        const scale = block("scale", [
+            { type: "range", options: { start: 0, end: 3 } },
+        ]);
+
+        expect(answerOptions(scale)).toEqual(["0", "1", "2", "3"]);
+        expect(answerOptions(block("rating"))).toEqual([
+            "1",
+            "2",
+            "3",
+            "4",
+            "5",
+        ]);
+    });
+
+    it("are free for text, number and date", () => {
+        expect(answerOptions(block("input-short"))).toEqual([]);
+        expect(answerOptions(block("date"))).toEqual([]);
+    });
+});
diff --git a/resources/js/components/Factory/Document/Rules/ruleText.ts b/resources/js/components/Factory/Document/Rules/ruleText.ts
new file mode 100644
index 00000000..184ac556
--- /dev/null
+++ b/resources/js/components/Factory/Document/Rules/ruleText.ts
@@ -0,0 +1,119 @@
+import sortBy from "lodash/sortBy";
+
+// what a rule can compare a question's answer with
+export type AnswerKind =
+    | "choice"
+    | "multi"
+    | "range"
+    | "number"
+    | "date"
+    | "text";
+
+const kinds: Partial<Record<FormBlockType, AnswerKind>> = {
+    radio: "choice",
+    checkbox: "multi",
+    rating: "range",
+    scale: "range",
+    "input-number": "number",
+    date: "date",
+    "input-short": "text",
+    "input-long": "text",
+    "input-email": "text",
+    "input-link": "text",
+    "input-phone": "text",
+    "input-secret": "text",
+};
+
+const comparisons: Operator[] = [
+    "equals",
+    "equalsNot",
+    "isLowerThan",
+    "isGreaterThan",
+];
+
+const operatorsByKind: Record<AnswerKind, Operator[]> = {
+    choice: ["equals", "equalsNot"],
+    // checkbox answers are joined into one text, so "includes" is a contains
+    multi: ["contains", "containsNot"],
+    range: comparisons,
+    number: comparisons,
+    date: comparisons,
+    text: [
+        "equals",
+        "equalsNot",
+        "contains",
+        "containsNot",
+        "isLowerThan",
+        "isGreaterThan",
+    ],
+};
+
+const words: Record<Operator, string> = {
+    equals: "is",
+    equalsNot: "is not",
+    contains: "contains",
+    containsNot: "doesn't contain",
+    isLowerThan: "is less than",
+    isGreaterThan: "is more than",
+};
+
+const checkboxWords: Partial<Record<Operator, string>> = {
+    contains: "includes",
+    containsNot: "doesn't include",
+};
+
+export function answerKind(block?: FormBlockModel | null): AnswerKind | null {
+    return (block && kinds[block.type]) ?? null;
+}
+
+export function operatorLabel(
+    operator: Operator | undefined,
+    block?: FormBlockModel | null,
+): string {
+    if (!operator) {
+        return "is";
+    }
+
+    return (
+        (answerKind(block) === "multi" && checkboxWords[operator]) ||
+        words[operator]
+    );
+}
+
+export function operatorsFor(block?: FormBlockModel | null) {
+    const kind = answerKind(block);
+
+    return (kind ? operatorsByKind[kind] : operatorsByKind.text).map((id) => ({
+        id,
+        label: operatorLabel(id, block),
+    }));
+}
+
+// the answers a choice, rating or scale question can give; free fields give none
+export function answerOptions(block?: FormBlockModel | null): string[] {
+    const interactions = block?.interactions ?? [];
+    const kind = answerKind(block);
+
+    if (kind === "choice" || kind === "multi") {
+        const labels = sortBy(interactions, "sequence")
+            .filter(
+                (item) =>
+                    item.type === "button" && item.is_editable && item.label,
+            )
+            .map((item) => item.label as string);
+
+        return [...new Set(labels)];
+    }
+
+    if (kind === "range") {
+        const range = interactions.find((item) => item.type === "range");
+        const start = Number(range?.options?.start ?? 1);
+        const end = Number(range?.options?.end ?? 5);
+
+        return Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) =>
+            String(start + i),
+        );
+    }
+
+    return [];
+}

From 2d8f4ba243907e263c8821379e5334a40c460d21 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:25:17 +0200
Subject: [PATCH 048/153] feat: show rules where they act in the document

Rules sit under their question, a group's rules under its header, and
Add rule starts one in place instead of opening the logic panel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/DocumentGroup.vue | 12 ++++++------
 .../js/components/Factory/Document/DocumentList.vue  |  7 +++++++
 .../js/components/Factory/Document/FormDocument.vue  |  4 ++--
 .../js/components/Factory/Document/QuestionCard.vue  | 10 ++++------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index d6462098..8eedc8ca 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -30,11 +30,9 @@
       <button
         type="button"
         class="flex h-9 items-center rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-        @click="logic.showLogicEditor(group)"
+        @click="addRule(group)"
       >
-        Rules<span v-if="group.logics?.length" class="tabular-nums"
-          >&nbsp;({{ group.logics.length }})</span
-        >
+        Add rule
       </button>
       <BlockMenu
         :block="group"
@@ -42,6 +40,7 @@
         @add-to-group="addQuestion"
       />
     </div>
+    <BlockRules :block="group" :numbers="numbers" class="pb-2 pl-9" />
 
     <div class="relative">
       <DocumentList
@@ -71,9 +70,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { D9Icon } from "@deck9/ui";
-import { useForm, useLogic, useWorkbench } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 import DocumentList from "./DocumentList.vue";
+import BlockRules from "./Rules/BlockRules.vue";
+import { addRule } from "./Rules/ruleEditing";
 import { useAddBlock } from "./blockFocus";
 
 const props = defineProps<{
@@ -83,7 +84,6 @@ const props = defineProps<{
 
 const store = useForm();
 const workbench = useWorkbench();
-const logic = useLogic();
 const { addBlock } = useAddBlock();
 
 const id = computed(() => `group-${props.group.uuid}`);
diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
index 5c7f9ba9..f2829595 100644
--- a/resources/js/components/Factory/Document/DocumentList.vue
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -22,6 +22,12 @@
           :numbers="numbers"
         />
         <DocumentQuestion v-else :block="block" :number="numbers[block.uuid]" />
+        <BlockRules
+          v-if="block.type !== 'group'"
+          :block="block"
+          :numbers="numbers"
+          class="pl-12"
+        />
       </div>
     </Draggable>
   </Container>
@@ -33,6 +39,7 @@ import { Container, Draggable } from "vue3-smooth-dnd";
 import { useForm } from "@/stores";
 import DocumentGroup from "./DocumentGroup.vue";
 import DocumentQuestion from "./DocumentQuestion.vue";
+import BlockRules from "./Rules/BlockRules.vue";
 
 const props = defineProps<{
   groupId?: string;
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 58ac1ce4..37decf5d 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -15,6 +15,7 @@
           {{ countLine }}
         </p>
 
+        <RuleGutter />
         <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
         <EmptyState
           v-else
@@ -41,7 +42,6 @@
       </template>
     </div>
   </div>
-  <BlockLogicEditor />
 </template>
 
 <script setup lang="ts">
@@ -50,8 +50,8 @@ import { D9Button } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
 import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
-import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
+import RuleGutter from "./Rules/RuleGutter.vue";
 import { questionNumbers } from "./questionSummary";
 import { focusBlock, useAddBlock } from "./blockFocus";
 
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index f48cbae1..c76ab4f1 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -54,11 +54,9 @@
         <button
           type="button"
           class="flex h-9 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-          @click="logic.showLogicEditor(block)"
+          @click="addRule(block)"
         >
-          Rules<span v-if="block.logics?.length" class="tabular-nums"
-            >&nbsp;({{ block.logics.length }})</span
-          >
+          Add rule
         </button>
         <BlockMenu :block="block" :label="`Options for question ${number}`" />
       </div>
@@ -77,7 +75,7 @@
 <script setup lang="ts">
 import { computed, onMounted, provide, ref, watch } from "vue";
 import { D9Icon, D9Select, D9Switch } from "@deck9/ui";
-import { useLogic, useWorkbench } from "@/stores";
+import { useWorkbench } from "@/stores";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import ConfigureClicks from "@/components/Factory/Main/ConfigureClicks.vue";
 import ConfigureConsents from "@/components/Factory/Main/ConfigureConsents.vue";
@@ -85,6 +83,7 @@ import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import BlockMenu from "./BlockMenu.vue";
 import QuestionSettings from "./QuestionSettings.vue";
 import { cursorFor } from "./blockFocus";
+import { addRule } from "./Rules/ruleEditing";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -95,7 +94,6 @@ const props = defineProps<{
 provide("block", props.block);
 
 const workbench = useWorkbench();
-const logic = useLogic();
 const { types } = useBlockTypes();
 
 const id = computed(() => `question-${props.block.uuid}`);

From ecc9d3aa5b5b9f092a67376b750c9f3ff3553be2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:25:24 +0200
Subject: [PATCH 049/153] fix: 44 px outline rows and Close below 1024, drop
 the sheet's drag handle

The outline panel's rows and Close were 32 px on phones and tablets. The
phone Settings sheet showed a handle that couldn't be dragged; Done and
the scrim close it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/DocumentOutline.vue      | 4 ++--
 resources/js/components/Factory/Document/FormDocument.vue   | 2 +-
 resources/js/components/Factory/Document/QuestionCard.vue   | 6 +-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentOutline.vue b/resources/js/components/Factory/Document/DocumentOutline.vue
index 7adedab8..693fa1bf 100644
--- a/resources/js/components/Factory/Document/DocumentOutline.vue
+++ b/resources/js/components/Factory/Document/DocumentOutline.vue
@@ -1,6 +1,6 @@
 <template>
   <nav :aria-labelledby="`${id}-title`" class="px-2 py-3">
-    <div class="flex h-8 items-center justify-between pl-2">
+    <div class="flex h-11 items-center justify-between pl-2 lg:h-8">
       <h2 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
         Outline
       </h2>
@@ -18,7 +18,7 @@
         <button
           v-else
           type="button"
-          class="flex h-8 w-full items-center gap-2 rounded-md pr-2 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="flex h-11 w-full items-center gap-2 rounded-md pr-2 lg:h-8 text-left text-[13px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           :class="[
             item.inGroup ? 'pl-5' : 'pl-2',
             isCurrent(item.block)
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1348e8b5..b9c6d3ae 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -85,7 +85,7 @@
           <button
             type="button"
             aria-label="Close outline"
-            class="grid h-11 w-11 place-items-center rounded-md text-grey-600 hover:bg-grey-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:h-8 sm:w-8"
+            class="grid h-11 w-11 place-items-center rounded-md text-grey-600 hover:bg-grey-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:h-8 lg:w-8"
             @click="outlineOpen = false"
           >
             <D9Icon name="xmark" />
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 3a499a66..4b1896e8 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -92,11 +92,7 @@
       <DialogPanel
         class="touch-fields fixed inset-x-0 bottom-0 flex h-[70%] flex-col rounded-t-2xl bg-white shadow-xl"
       >
-        <span
-          aria-hidden="true"
-          class="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-grey-300"
-        />
-        <div class="flex shrink-0 items-center justify-between pl-4 pr-1">
+        <div class="flex shrink-0 items-center justify-between pl-4 pr-1 pt-2">
           <DialogTitle class="text-base font-semibold text-grey-900">
             Question {{ number }} settings
           </DialogTitle>

From 652a9ced931013ffadeea7e1c34c24ac286cef8c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:26:13 +0200
Subject: [PATCH 050/153] feat: Move up and Move down in a question's and a
 group's menu

The way to move on a phone, where there is no grip, and for anyone who
can't drag.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/BlockMenu.test.ts        | 65 +++++++++++++++++++
 .../components/Factory/Document/BlockMenu.vue | 16 +++++
 2 files changed, 81 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/BlockMenu.test.ts

diff --git a/resources/js/components/Factory/Document/BlockMenu.test.ts b/resources/js/components/Factory/Document/BlockMenu.test.ts
new file mode 100644
index 00000000..df16bedb
--- /dev/null
+++ b/resources/js/components/Factory/Document/BlockMenu.test.ts
@@ -0,0 +1,65 @@
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import BlockMenu from "./BlockMenu.vue";
+
+const blocks = [
+    { id: 1, uuid: "q1", type: "radio" },
+    { id: 2, uuid: "q2", type: "radio" },
+] as FormBlockModel[];
+
+let wrapper: VueWrapper | undefined;
+
+const openMenu = async (block: FormBlockModel) => {
+    wrapper = mount(BlockMenu, {
+        props: { block, label: "Options for question 1" },
+        attachTo: document.body,
+    });
+    await wrapper.find("button").trigger("click");
+    await flushPromises();
+};
+
+// the menu opens in a portal
+const item = (label: string) =>
+    [...document.querySelectorAll<HTMLElement>("[role=menuitem]")].find(
+        (element) => element.textContent?.trim() === label,
+    );
+
+describe("a block's menu", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        useForm().$reset();
+        useForm().blocks = blocks;
+    });
+
+    afterEach(() => {
+        wrapper?.unmount();
+        document.body.innerHTML = "";
+    });
+
+    it("moves a question down, for touch and pointer users", async () => {
+        await openMenu(blocks[0]);
+
+        item("Move down")!.click();
+        await flushPromises();
+
+        expect(useForm().changeBlockSequence).toHaveBeenCalledWith(
+            false,
+            1,
+            blocks[0],
+        );
+    });
+
+    it("can't move the first block up or the last one down", async () => {
+        await openMenu(blocks[0]);
+        expect(item("Move up")?.getAttribute("aria-disabled")).toBe("true");
+        expect(item("Move down")?.getAttribute("aria-disabled")).toBeNull();
+        wrapper!.unmount();
+        document.body.innerHTML = "";
+
+        await openMenu(blocks[1]);
+        expect(item("Move up")?.getAttribute("aria-disabled")).toBeNull();
+        expect(item("Move down")?.getAttribute("aria-disabled")).toBe("true");
+    });
+});
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 6bfb93ec..230b0bfe 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -34,6 +34,20 @@
       :label="block.is_disabled ? 'Show group' : 'Hide group'"
       @click="toggleHidden"
     />
+    <D9MenuLink
+      as="button"
+      :class="item"
+      label="Move up"
+      :disabled="!canMove(block, -1)"
+      @click="moveBlock(block, -1)"
+    />
+    <D9MenuLink
+      as="button"
+      :class="item"
+      label="Move down"
+      :disabled="!canMove(block, 1)"
+      @click="moveBlock(block, 1)"
+    />
     <D9MenuLink
       as="button"
       :class="item"
@@ -55,6 +69,7 @@ import { D9Icon, D9Menu, D9MenuLink } from "@deck9/ui";
 import copy from "copy-text-to-clipboard";
 import { useForm, useWorkbench } from "@/stores";
 import { useAddBlock } from "./blockFocus";
+import { useMoveBlock } from "./blockMove";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -66,6 +81,7 @@ const emit = defineEmits<{ addToGroup: [] }>();
 const store = useForm();
 const workbench = useWorkbench();
 const { addBlock } = useAddBlock();
+const { canMove, moveBlock } = useMoveBlock();
 
 const item = "w-full min-h-11 text-left text-sm lg:min-h-0";
 const isGroup = computed(() => props.block.type === "group");

From 2a4f4c5149e7183038f8c93afb87a00017293ef6 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:26:56 +0200
Subject: [PATCH 051/153] feat: the outline scrolls to the open question

Also when the outline opens as a panel on a tablet or phone.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentOutline.test.ts  | 27 ++++++++++++++++++-
 .../Factory/Document/DocumentOutline.vue      | 15 +++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentOutline.test.ts b/resources/js/components/Factory/Document/DocumentOutline.test.ts
index 20a8cf47..98f1b267 100644
--- a/resources/js/components/Factory/Document/DocumentOutline.test.ts
+++ b/resources/js/components/Factory/Document/DocumentOutline.test.ts
@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import DocumentOutline from "./DocumentOutline.vue";
 
@@ -12,8 +12,17 @@ const blocks = [
 
 const numbers = { q1: 1, q2: 2, q3: 3 };
 
+const scrolled = vi.fn();
+
 describe("the outline", () => {
     beforeEach(() => {
+        // jsdom has no scrollIntoView
+        Element.prototype.scrollIntoView = function (
+            this: Element,
+            options?: boolean | ScrollIntoViewOptions,
+        ) {
+            scrolled(this.textContent, (options as ScrollIntoViewOptions)?.block);
+        };
         useForm().$reset();
         useWorkbench().$reset();
         useForm().blocks = blocks;
@@ -41,4 +50,20 @@ describe("the outline", () => {
         await wrapper.findAll("button")[0].trigger("click");
         expect(wrapper.emitted("pick")?.[0]).toEqual([blocks[0]]);
     });
+
+    it("keeps the open question in view, also when it opens as a panel", async () => {
+        useWorkbench().block = blocks[3];
+        const wrapper = mount(DocumentOutline, {
+            props: { numbers },
+            attachTo: document.body,
+        });
+        await wrapper.vm.$nextTick();
+        expect(scrolled).toHaveBeenLastCalledWith("3Name?", "nearest");
+
+        useWorkbench().block = blocks[0];
+        await wrapper.vm.$nextTick();
+        expect(scrolled).toHaveBeenLastCalledWith("1Welcome", "nearest");
+
+        wrapper.unmount();
+    });
 });
diff --git a/resources/js/components/Factory/Document/DocumentOutline.vue b/resources/js/components/Factory/Document/DocumentOutline.vue
index 693fa1bf..8b871d39 100644
--- a/resources/js/components/Factory/Document/DocumentOutline.vue
+++ b/resources/js/components/Factory/Document/DocumentOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav :aria-labelledby="`${id}-title`" class="px-2 py-3">
+  <nav ref="nav" :aria-labelledby="`${id}-title`" class="px-2 py-3">
     <div class="flex h-11 items-center justify-between pl-2 lg:h-8">
       <h2 :id="`${id}-title`" class="text-xs font-semibold text-grey-600">
         Outline
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useId } from "vue";
+import { computed, onMounted, ref, useId, watch } from "vue";
 import { D9Icon } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
 import { plainText } from "./questionSummary";
@@ -75,4 +75,15 @@ const items = computed(() => {
 
 const isCurrent = (block: FormBlockModel) =>
   workbench.block?.uuid === block.uuid;
+
+const nav = ref<HTMLElement | null>(null);
+
+// keeps the open question in view, also when the outline opens as a panel
+const showCurrent = () =>
+  nav.value
+    ?.querySelector("[aria-current=true]")
+    ?.scrollIntoView({ block: "nearest" });
+
+onMounted(showCurrent);
+watch(() => workbench.block?.uuid, showCurrent, { flush: "post" });
 </script>

From de485c2d0b0181507868ed1c36b36e413cd24756 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:27:51 +0200
Subject: [PATCH 052/153] fix: open the top bar's Preview links in preview mode

The phone form menu and the bar's default Preview link opened the real
form, so answers given there were stored. Both now add ?preview=1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Layouts/AppLayout.test.ts                    | 5 +++--
 resources/js/components/Factory/TopBar/FormMenu.vue       | 4 ++--
 resources/js/components/Factory/TopBar/FormTopBar.test.ts | 3 ++-
 resources/js/components/Factory/TopBar/FormTopBar.vue     | 7 ++++---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/js/Layouts/AppLayout.test.ts b/resources/js/Layouts/AppLayout.test.ts
index b0d1821d..f6b89efe 100644
--- a/resources/js/Layouts/AppLayout.test.ts
+++ b/resources/js/Layouts/AppLayout.test.ts
@@ -64,7 +64,7 @@ describe("app header", () => {
         );
     });
 
-    it("links a draft's bar to its form in a new tab, until the live preview fills the slot", async () => {
+    it("links a draft's bar to its form's preview in a new tab, where no live preview fills the slot", async () => {
         window.route = ((name: string) => `/${name}`) as typeof window.route;
         // the real bar, without its menus
         const wrapper = mount(AppLayout, {
@@ -86,7 +86,8 @@ describe("app header", () => {
         await wrapper.vm.$nextTick();
 
         const preview = wrapper.get("header a[target='_blank']");
-        expect(preview.attributes("href")).toBe("/forms.show");
+        // in preview mode: no answers are stored
+        expect(preview.attributes("href")).toBe("/forms.show?preview=1");
         expect(preview.get("span").text()).toBe("Preview");
         expect(preview.text()).toContain("(opens in a new tab)");
         // on phones it's in the form menu: the name keeps its room
diff --git a/resources/js/components/Factory/TopBar/FormMenu.vue b/resources/js/components/Factory/TopBar/FormMenu.vue
index f3700d07..b04f6f2a 100644
--- a/resources/js/components/Factory/TopBar/FormMenu.vue
+++ b/resources/js/components/Factory/TopBar/FormMenu.vue
@@ -15,11 +15,11 @@
         <D9Icon class="flex-none" name="chevron-down" />
       </span>
     </template>
-    <!-- from lg the bar has Preview -->
+    <!-- from lg the bar has Preview; preview mode stores no answers -->
     <D9MenuLink
       v-if="!isLarge"
       as="a"
-      :href="store.formUrl"
+      :href="`${store.formUrl}?preview=1`"
       target="_blank"
       :class="menuItem"
       label="Preview ↗"
diff --git a/resources/js/components/Factory/TopBar/FormTopBar.test.ts b/resources/js/components/Factory/TopBar/FormTopBar.test.ts
index 167cd72a..d42527a7 100644
--- a/resources/js/components/Factory/TopBar/FormTopBar.test.ts
+++ b/resources/js/components/Factory/TopBar/FormTopBar.test.ts
@@ -396,7 +396,8 @@ describe("form top bar", () => {
         const item = await previewItem(false);
         expect(text(item!)).toBe("Preview ↗");
         expect(item?.getAttribute("aria-label")).toBe("Preview (opens in a new tab)");
-        expect(item?.getAttribute("href")).toBe(`${location.origin}/forms.show`);
+        // in preview mode: no answers are stored
+        expect(item?.getAttribute("href")).toBe(`${location.origin}/forms.show?preview=1`);
         expect(item?.getAttribute("target")).toBe("_blank");
         // from 1024 px it's in the bar
         expect(await previewItem(true)).toBeUndefined();
diff --git a/resources/js/components/Factory/TopBar/FormTopBar.vue b/resources/js/components/Factory/TopBar/FormTopBar.vue
index 0a5f686f..76a0ac0e 100644
--- a/resources/js/components/Factory/TopBar/FormTopBar.vue
+++ b/resources/js/components/Factory/TopBar/FormTopBar.vue
@@ -55,10 +55,11 @@
     >
       <slot name="save-status" />
       <slot name="preview">
-        <!-- until the live preview lands: the form in a new tab;
-          on phones it's in the form menu, so the name keeps its room -->
+        <!-- pages without the live preview: the form in preview mode
+          (stores no answers) in a new tab; on phones it's in the form menu,
+          so the name keeps its room -->
         <a
-          :href="store.formUrl"
+          :href="`${store.formUrl}?preview=1`"
           target="_blank"
           rel="noopener"
           class="hidden h-9 w-9 flex-none items-center justify-center gap-1.5 rounded-md border border-grey-600 text-[13px] font-semibold text-white hover:bg-grey-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:flex xl:w-auto xl:px-2.5"

From 7f73be236f8ebdeb7da0d091247ca570f6f8b342 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:28:25 +0200
Subject: [PATCH 053/153] feat: move a choice with Alt+Up/Down

Focus stays on the moved choice and the live region says its new place.
The question around it doesn't move as well.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Document/blockMove.ts  | 27 +++++-----
 .../Factory/Main/ConfigureClicks.test.ts      | 52 +++++++++++++++++++
 .../Factory/Main/ConfigureClicks.vue          | 23 ++++++++
 .../Main/Interactions/ClickInteraction.vue    |  8 ++-
 .../Factory/utils/useKeyboardNavigation.ts    |  5 ++
 5 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/Factory/Document/blockMove.ts b/resources/js/components/Factory/Document/blockMove.ts
index 009451e4..807ea456 100644
--- a/resources/js/components/Factory/Document/blockMove.ts
+++ b/resources/js/components/Factory/Document/blockMove.ts
@@ -6,7 +6,15 @@ import { cursorFor } from "./blockFocus";
 // what the document's live region says after a move
 export const moveNote = ref("");
 
-type Step = -1 | 1;
+export type Step = -1 | 1;
+
+// reads a short text out in the document's live region
+export async function announce(text: string) {
+    // a repeated text is only read out again after a change
+    moveNote.value = "";
+    await nextTick();
+    moveNote.value = text;
+}
 
 // where one step takes a block: a question steps into a group next to it and
 // out at its ends, a group steps over a whole block
@@ -49,18 +57,11 @@ export function useMoveBlock() {
     const canMove = (block: FormBlockModel, step: Step) =>
         stepTarget(store.blocks ?? [], block, step) !== null;
 
-    const say = async (text: string) => {
-        // a repeated text is only read out again after a change
-        moveNote.value = "";
-        await nextTick();
-        moveNote.value = text;
-    };
-
     const moveBlock = async (block: FormBlockModel, step: Step) => {
         const target = stepTarget(store.blocks ?? [], block, step);
 
         if (!target) {
-            await say(step < 0 ? "Already at the top" : "Already at the bottom");
+            await announce(step < 0 ? "Already at the top" : "Already at the bottom");
             return false;
         }
 
@@ -89,7 +90,7 @@ export function useMoveBlock() {
             blocks.find((item) => item.uuid === uuid)?.title || "Group";
 
         if (block.type === "group") {
-            await say(
+            await announce(
                 `Moved group ${groupName(block.uuid)} to position ${top.findIndex((item) => item.id === block.id) + 1} of ${top.length}`,
             );
             return true;
@@ -98,11 +99,11 @@ export function useMoveBlock() {
         const to = `to position ${numbers[block.uuid]} of ${Object.keys(numbers).length}`;
 
         if (target.scope === from) {
-            await say(`Moved ${to}`);
+            await announce(`Moved ${to}`);
         } else if (target.scope) {
-            await say(`Moved into group ${groupName(target.scope)}, ${to}`);
+            await announce(`Moved into group ${groupName(target.scope)}, ${to}`);
         } else {
-            await say(`Moved out of group ${groupName(from)}, ${to}`);
+            await announce(`Moved out of group ${groupName(from)}, ${to}`);
         }
 
         return true;
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.test.ts b/resources/js/components/Factory/Main/ConfigureClicks.test.ts
index f8c9bbd7..402385c2 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.test.ts
+++ b/resources/js/components/Factory/Main/ConfigureClicks.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 ConfigureClicks from "./ConfigureClicks.vue";
+import { moveNote } from "@/components/Factory/Document/blockMove";
 
 const choice = (id: number, label: string) =>
     ({
@@ -124,3 +125,54 @@ describe("Enter on the last choice", () => {
         expect(useWorkbench().createInteraction).toHaveBeenCalledWith("button");
     });
 });
+
+describe("moving a choice with Alt+Up/Down", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        useWorkbench().$reset();
+        useForm().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    const label = (id: number) =>
+        wrapper!.find<HTMLInputElement>(`[id='${id}_label']`);
+
+    it("moves the choice, keeps focus on it and says where it went", async () => {
+        const workbench = useWorkbench();
+        mountChoices("Yes", "No", "Maybe");
+        vi.mocked(workbench.changeInteractionSequence).mockImplementation(
+            async (from, to) => {
+                const list = [...workbench.block!.interactions!].sort(
+                    (a, b) => a.sequence - b.sequence,
+                );
+                list.splice(to, 0, list.splice(from, 1)[0]);
+                list.forEach((item, index) => (item.sequence = index));
+            },
+        );
+        // the question around it must not move as well
+        const outside = vi.fn();
+        document.body.addEventListener("keydown", outside);
+
+        label(2).element.focus();
+        await label(2).trigger("keydown", { key: "ArrowUp", altKey: true });
+        await label(2).trigger("keyup", { key: "ArrowUp", altKey: true });
+        await flushPromises();
+
+        expect(workbench.changeInteractionSequence).toHaveBeenCalledWith(1, 0);
+        expect((document.activeElement as HTMLInputElement).value).toBe("No");
+        expect(moveNote.value).toBe("Moved choice to position 1 of 3");
+        expect(outside).not.toHaveBeenCalled();
+        document.body.removeEventListener("keydown", outside);
+    });
+
+    it("stays put at the top and says so", async () => {
+        mountChoices("Yes", "No");
+
+        await label(1).trigger("keydown", { key: "ArrowUp", altKey: true });
+        await flushPromises();
+
+        expect(useWorkbench().changeInteractionSequence).not.toHaveBeenCalled();
+        expect(moveNote.value).toBe("Already at the top");
+    });
+});
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index f7119135..ffa52296 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -22,6 +22,7 @@
           @nextSoft="focusNextItemSoft"
           @previous="focusPreviousItem"
           @onDelete="deleteItem"
+          @move="moveItem"
         />
       </Draggable>
     </Container>
@@ -55,6 +56,10 @@ import { Container, Draggable } from "vue3-smooth-dnd";
 import EmptyState from "@/components/EmptyState.vue";
 import { useKeyboardNavigation } from "@/components/Factory/utils/useKeyboardNavigation";
 import useActiveInteractions from "../Shared/useActiveInteractions";
+import {
+  announce,
+  type Step,
+} from "@/components/Factory/Document/blockMove";
 
 const workbench = useWorkbench();
 const { editableInteractions } = useActiveInteractions(workbench.block);
@@ -105,6 +110,23 @@ const deleteItem = async (index: number) => {
   }
 };
 
+// Alt+Up/Down moves a choice; focus stays on it
+const moveItem = async (index: number, step: Step) => {
+  const choices = editableInteractions.value ?? [];
+  const item = choices[index];
+  const to = index + step;
+
+  if (!item || !choices[to]) {
+    announce(step < 0 ? "Already at the top" : "Already at the bottom");
+    return;
+  }
+
+  workbench.changeInteractionSequence(index, to);
+  await nextTick();
+  focusItem(item);
+  announce(`Moved choice to position ${to + 1} of ${choices.length}`);
+};
+
 const {
   bindTemplateRefsForTraversables,
   focusNextItem,
@@ -112,6 +134,7 @@ const {
   focusPreviousItem,
   focusLastItem,
   focusNeighborItem,
+  focusItem,
 } = useKeyboardNavigation(editableInteractions, async () => {
   await createClickInteraction();
 });
diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index 65ad14dc..bc8a408e 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -16,8 +16,10 @@
           block
           placeholder="Label"
           @keyup.enter="keyboardCommands"
-          @keyup.up="keyboardCommands"
-          @keyup.down="keyboardCommands"
+          @keyup.up.exact="keyboardCommands"
+          @keyup.down.exact="keyboardCommands"
+          @keydown.alt.up.exact.prevent.stop="emit('move', index, -1)"
+          @keydown.alt.down.exact.prevent.stop="emit('move', index, 1)"
           @keydown.meta.delete.prevent="keyboardCommands"
         />
         <D9Input
@@ -47,6 +49,7 @@ import ChoiceRowActions from "@/components/Factory/Main/ChoiceRowActions.vue";
 import IndexItem from "@/components/Factory/Shared/IndexItem.vue";
 import { useWorkbench } from "@/stores";
 import { Ref, ref, watch } from "vue";
+import type { Step } from "@/components/Factory/Document/blockMove";
 
 const workbench = useWorkbench();
 
@@ -66,6 +69,7 @@ const emit = defineEmits<{
   (e: "nextSoft", index: number): void;
   (e: "previous", index: number): void;
   (e: "onDelete", index: number): void;
+  (e: "move", index: number, step: Step): void;
 }>();
 
 // the row draws the border, so its fields are bare
diff --git a/resources/js/components/Factory/utils/useKeyboardNavigation.ts b/resources/js/components/Factory/utils/useKeyboardNavigation.ts
index 3ce87fa2..0e600b3b 100644
--- a/resources/js/components/Factory/utils/useKeyboardNavigation.ts
+++ b/resources/js/components/Factory/utils/useKeyboardNavigation.ts
@@ -61,6 +61,10 @@ export function useKeyboardNavigation(
         traversables.value[destination.id].focus();
     };
 
+    const focusItem = (item: { id: number }) => {
+        traversables.value[item.id]?.focus();
+    };
+
     const focusLastItem = async () => {
         if (!currentInteractions.value) {
             return;
@@ -80,5 +84,6 @@ export function useKeyboardNavigation(
         focusNextItem,
         focusPreviousItem,
         focusLastItem,
+        focusItem,
     };
 }

From 711992ef9bf7e6e26252cd4b3bdc9f465c97e115 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:30:51 +0200
Subject: [PATCH 054/153] fix: give focus back to Settings when the phone sheet
 closes

Done and Esc left focus on the hidden sheet, so it fell to the page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts     | 20 +++++++++++++++++++
 .../Factory/Document/QuestionCard.vue         | 12 ++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index 5858d483..66914e25 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -130,5 +130,25 @@ describe("an open question", () => {
             document.querySelector<HTMLElement>("[role=dialog]")?.hidden,
         ).toBe(true);
         expect(document.getElementById("question-q4-settings")).not.toBeNull();
+        // the kept sheet doesn't give focus back by itself
+        expect(document.activeElement).toBe(settingsButton().element);
+    });
+
+    it("gives focus back to Settings when Esc closes the sheet", async () => {
+        mountCard(true);
+        await settingsButton().trigger("click");
+        await flushPromises();
+
+        document
+            .querySelector("[role=dialog]")!
+            .dispatchEvent(
+                new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+            );
+        await flushPromises();
+
+        expect(
+            document.querySelector<HTMLElement>("[role=dialog]")?.hidden,
+        ).toBe(true);
+        expect(document.activeElement).toBe(settingsButton().element);
     });
 });
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 4b1896e8..a81c38ef 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -44,6 +44,7 @@
 
       <div class="ml-auto flex items-center gap-1">
         <button
+          ref="settingsButton"
           type="button"
           class="flex h-11 items-center gap-1 rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           :aria-expanded="settingsOpen"
@@ -118,7 +119,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, provide, ref, watch } from "vue";
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 import { useMediaQuery } from "@vueuse/core";
 import { D9Icon, D9Select, D9Switch } from "@deck9/ui";
@@ -153,6 +154,15 @@ const required = ref(props.block.is_required ?? false);
 const settingsOpen = ref(false);
 // below Tailwind's sm, Settings opens as a bottom sheet
 const isPhone = useMediaQuery("(max-width: 639px)");
+const settingsButton = ref<HTMLButtonElement | null>(null);
+
+// the kept sheet doesn't give focus back when it closes
+watch(settingsOpen, async (open) => {
+  if (!open && isPhone.value) {
+    await nextTick();
+    settingsButton.value?.focus();
+  }
+});
 
 watch(message, (value) => workbench.updateBlock({ message: value }));
 watch(required, (value) => workbench.updateBlock({ is_required: value }));

From e75dc55ffc76efe52a0d242387268baddaaef9aa Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:30:54 +0200
Subject: [PATCH 055/153] fix: put focus back on the phone's Preview after the
 panel closes

A mouse click on the button's text landed on an inner span. On close the
dialog tried to focus that span, which can't take focus, so focus fell to
the page. The button's inside now lets clicks through to the button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts | 3 +++
 resources/js/Pages/Forms/Edit.vue     | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 19d8215e..1d25ab12 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -133,5 +133,8 @@ describe("editor loading", () => {
         await preview?.trigger("click");
 
         expect(editor.find("aside").exists()).toBe(true);
+        // a click on the text would land on a span, which the closing dialog
+        // can't focus again: the button's inside lets clicks through to it
+        expect(preview?.classes()).toContain("[&_*]:pointer-events-none");
     });
 });
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 55f6d11b..2a972242 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -2,10 +2,11 @@
   <app-layout title="Edit Form" limit-height>
     <template #preview><PreviewToggle v-model="isPreviewing" /></template>
     <FormDocument :status="status" @retry="loadBlocks">
-      <!-- a phone's top bar has no room for Preview -->
+      <!-- a phone's top bar has no room for Preview; a click inside lands on
+        the button, so closing the preview puts focus back on it -->
       <template #actions>
         <D9Button
-          class="lg:hidden"
+          class="lg:hidden [&_*]:pointer-events-none"
           label="Preview"
           color="light"
           icon="eye"

From 2de3109fd22b26078fe61f9cea43a8623706447a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:33:02 +0200
Subject: [PATCH 056/153] feat: name and group the answer types, one icon each

Short text, Long text, Email, Link, Phone, Number, Hidden text; Single
choice, Checkboxes; Rating, Scale; Date, File upload, Consent; Text only.
Text only no longer shares the envelope icon with Email.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/utils/useBlockTypes.ts | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/Factory/utils/useBlockTypes.ts b/resources/js/components/Factory/utils/useBlockTypes.ts
index d43a7261..025fd96d 100644
--- a/resources/js/components/Factory/utils/useBlockTypes.ts
+++ b/resources/js/components/Factory/utils/useBlockTypes.ts
@@ -1,24 +1,44 @@
 import { ref, Ref } from "vue";
 
+// the answer types as the type picker groups them, in the order of the list below
+export const typeGroups: Array<{ label: string; types: FormBlockType[] }> = [
+    {
+        label: "Text",
+        types: [
+            "input-short",
+            "input-long",
+            "input-email",
+            "input-link",
+            "input-phone",
+            "input-number",
+            "input-secret",
+        ],
+    },
+    { label: "Choice", types: ["radio", "checkbox"] },
+    { label: "Rating", types: ["rating", "scale"] },
+    { label: "Other", types: ["date", "input-file", "consent"] },
+    { label: "Content", types: ["none"] },
+];
+
 export const useBlockTypes = (): {
     types: Ref<Array<InteractionOption>>;
 } => {
     const rawTypes: Array<Omit<InteractionOption, "id">> = [
-        { label: "No Input", value: "none", icon: "envelope" },
-        { label: "Multiple Choice", value: "radio", icon: "check-circle" },
-        { label: "Checkboxes", value: "checkbox", icon: "check-square" },
-        { label: "Short Answer", value: "input-short", icon: "pencil" },
-        { label: "Long Answer", value: "input-long", icon: "message" },
-        { label: "Number", value: "input-number", icon: "sort-numeric-up" },
+        { label: "Short text", value: "input-short", icon: "pencil" },
+        { label: "Long text", value: "input-long", icon: "message" },
         { label: "Email", value: "input-email", icon: "envelope" },
         { label: "Link", value: "input-link", icon: "link" },
-        { label: "Phone Number", value: "input-phone", icon: "phone" },
-        { label: "Secret", value: "input-secret", icon: "lock" },
+        { label: "Phone", value: "input-phone", icon: "phone" },
+        { label: "Number", value: "input-number", icon: "sort-numeric-up" },
+        { label: "Hidden text", value: "input-secret", icon: "eye-slash" },
+        { label: "Single choice", value: "radio", icon: "circle-dot" },
+        { label: "Checkboxes", value: "checkbox", icon: "check-square" },
         { label: "Rating", value: "rating", icon: "star" },
         { label: "Scale", value: "scale", icon: "signal" },
         { label: "Date", value: "date", icon: "calendar" },
-        { label: "File", value: "input-file", icon: "cloud-arrow-up" },
+        { label: "File upload", value: "input-file", icon: "cloud-arrow-up" },
         { label: "Consent", value: "consent", icon: "user-shield" },
+        { label: "Text only", value: "none", icon: "heading" },
     ];
 
     const types: Ref<Array<InteractionOption>> = ref(

From 39d3850e88cc2555ff12807da228a5d5e5c63235 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:33:02 +0200
Subject: [PATCH 057/153] feat: add a type picker grouped as Text, Choice,
 Rating, Other, Content

A search field filters the types; arrow keys move, Enter adds, Esc closes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/TypePicker.test.ts       |  94 ++++++++++
 .../Factory/Document/TypePicker.vue           | 162 ++++++++++++++++++
 2 files changed, 256 insertions(+)
 create mode 100644 resources/js/components/Factory/Document/TypePicker.test.ts
 create mode 100644 resources/js/components/Factory/Document/TypePicker.vue

diff --git a/resources/js/components/Factory/Document/TypePicker.test.ts b/resources/js/components/Factory/Document/TypePicker.test.ts
new file mode 100644
index 00000000..df796882
--- /dev/null
+++ b/resources/js/components/Factory/Document/TypePicker.test.ts
@@ -0,0 +1,94 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import TypePicker from "./TypePicker.vue";
+
+let wrapper: VueWrapper | undefined;
+
+const mountPicker = () => {
+    wrapper = mount(TypePicker, {
+        props: { title: "Add a question" },
+        global: {
+            stubs: {
+                Icon: { props: ["name"], template: `<i :data-icon="name" />` },
+            },
+        },
+        attachTo: document.body,
+    });
+    return wrapper;
+};
+const options = () => wrapper!.findAll("[role=option]");
+const optionTexts = () => options().map((option) => option.text());
+
+describe("the answer type picker", () => {
+    afterEach(() => wrapper?.unmount());
+
+    it("groups the answer types, with one icon per type", () => {
+        const groups = mountPicker()
+            .findAll("[role=listbox] [role=group]")
+            .map((group) => [
+                group.attributes("aria-label"),
+                group.findAll("[role=option]").map((option) => option.text()),
+            ]);
+
+        expect(groups).toEqual([
+            [
+                "Text",
+                [
+                    "Short text",
+                    "Long text",
+                    "Email",
+                    "Link",
+                    "Phone",
+                    "Number",
+                    "Hidden text",
+                ],
+            ],
+            ["Choice", ["Single choice", "Checkboxes"]],
+            ["Rating", ["Rating", "Scale"]],
+            ["Other", ["Date", "File upload", "Consent"]],
+            ["Content", ["Text only"]],
+        ]);
+
+        const icons = options().map((option) =>
+            option.find("[data-icon]").attributes("data-icon"),
+        );
+        expect(new Set(icons).size).toBe(15);
+    });
+
+    it("takes the cursor, filters as you type and adds the highlighted type with Enter", async () => {
+        const input = mountPicker().find("input");
+        expect(document.activeElement).toBe(input.element);
+
+        await input.setValue("che");
+        expect(optionTexts()).toEqual(["Checkboxes"]);
+
+        await input.setValue("");
+        await input.trigger("keydown", { key: "ArrowDown" });
+        expect(input.attributes("aria-activedescendant")).toBe(
+            options()[1].attributes("id"),
+        );
+        expect(options()[1].attributes("aria-selected")).toBe("true");
+
+        await input.trigger("keydown", { key: "Enter" });
+        expect(wrapper!.emitted("pick")).toEqual([["input-long"]]);
+    });
+
+    it("adds a type on click and closes on Escape", async () => {
+        mountPicker();
+
+        await options()
+            .find((option) => option.text() === "Single choice")!
+            .trigger("click");
+        expect(wrapper!.emitted("pick")).toEqual([["radio"]]);
+
+        await wrapper!.find("input").trigger("keydown", { key: "Escape" });
+        expect(wrapper!.emitted("close")).toHaveLength(1);
+    });
+
+    it("says so when no type matches", async () => {
+        await mountPicker().find("input").setValue("xyz");
+
+        expect(options()).toHaveLength(0);
+        expect(wrapper!.text()).toContain("No answer type matches");
+    });
+});
diff --git a/resources/js/components/Factory/Document/TypePicker.vue b/resources/js/components/Factory/Document/TypePicker.vue
new file mode 100644
index 00000000..49cc9223
--- /dev/null
+++ b/resources/js/components/Factory/Document/TypePicker.vue
@@ -0,0 +1,162 @@
+<template>
+  <section
+    ref="root"
+    :aria-labelledby="`${id}-title`"
+    class="rounded-lg border border-grey-200 bg-white p-2 shadow-md"
+  >
+    <p
+      :id="`${id}-title`"
+      class="px-2 pb-2 pt-1 text-base font-semibold text-grey-900 lg:text-sm"
+    >
+      {{ title }}
+    </p>
+    <div class="relative">
+      <D9Icon
+        name="magnifying-glass"
+        aria-hidden="true"
+        class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-grey-600"
+      />
+      <input
+        ref="search"
+        v-model="filter"
+        type="text"
+        role="combobox"
+        aria-label="Find an answer type"
+        aria-autocomplete="list"
+        aria-expanded="true"
+        :aria-controls="`${id}-list`"
+        :aria-activedescendant="active ? `${id}-${active}` : undefined"
+        placeholder="Find an answer type"
+        autocomplete="off"
+        class="h-11 w-full rounded-md border border-grey-300 pl-9 pr-3 text-base text-grey-900 placeholder:text-grey-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 lg:h-9 lg:text-sm"
+        @keydown="onKey"
+      />
+    </div>
+
+    <div
+      :id="`${id}-list`"
+      role="listbox"
+      aria-label="Answer types"
+      class="mt-1 sm:columns-2 sm:gap-2"
+    >
+      <div
+        v-for="group in groups"
+        :key="group.label"
+        role="group"
+        :aria-label="group.label"
+        class="break-inside-avoid"
+      >
+        <p
+          aria-hidden="true"
+          class="px-2 pb-1 pt-2 text-xs font-medium text-grey-600"
+        >
+          {{ group.label }}
+        </p>
+        <div
+          v-for="type in group.types"
+          :id="`${id}-${type.value}`"
+          :key="type.value"
+          role="option"
+          :aria-selected="type.value === active"
+          class="flex h-11 cursor-pointer items-center gap-2.5 rounded-md px-2 text-base text-grey-900 hover:bg-grey-100 lg:h-9 lg:text-sm"
+          :class="type.value === active && 'bg-grey-100'"
+          @click="emit('pick', type.value)"
+        >
+          <D9Icon
+            :name="type.icon"
+            aria-hidden="true"
+            class="w-4 shrink-0 text-grey-600"
+          />
+          {{ type.label }}
+        </div>
+      </div>
+    </div>
+    <p v-if="!flat.length" class="px-2 py-3 text-sm text-grey-600">
+      No answer type matches “{{ filter.trim() }}”
+    </p>
+
+    <p
+      aria-hidden="true"
+      class="mt-1 hidden border-t border-grey-100 px-2 pb-0.5 pt-2 text-xs text-grey-600 lg:block"
+    >
+      ↑↓ to move · Enter to add · Esc to close
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, useId, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { D9Icon } from "@deck9/ui";
+import {
+  typeGroups,
+  useBlockTypes,
+} from "@/components/Factory/utils/useBlockTypes";
+
+const { autofocus = true } = defineProps<{
+  title: string;
+  // the empty form shows it at once: the cursor stays where it is
+  autofocus?: boolean;
+}>();
+
+const emit = defineEmits<{ pick: [type: FormBlockType]; close: [] }>();
+
+const id = useId();
+const { types } = useBlockTypes();
+const root = ref<HTMLElement | null>(null);
+const search = ref<HTMLInputElement | null>(null);
+const filter = ref("");
+
+const groups = computed(() => {
+  const needle = filter.value.trim().toLowerCase();
+
+  return typeGroups
+    .map((group) => ({
+      label: group.label,
+      types: group.types
+        .map((value) => types.value.find((type) => type.value === value)!)
+        .filter((type) => type.label.toLowerCase().includes(needle)),
+    }))
+    .filter((group) => group.types.length);
+});
+
+const flat = computed(() =>
+  groups.value.flatMap((group) => group.types.map((type) => type.value)),
+);
+
+// the highlighted type, which Enter adds
+const index = ref(0);
+const active = computed(() => flat.value[index.value]);
+watch(filter, () => (index.value = 0));
+
+const onKey = (event: KeyboardEvent) => {
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    event.preventDefault();
+    const step = event.key === "ArrowDown" ? 1 : -1;
+    index.value = Math.min(
+      Math.max(index.value + step, 0),
+      flat.value.length - 1,
+    );
+    document
+      .getElementById(`${id}-${active.value}`)
+      ?.scrollIntoView?.({ block: "nearest" });
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+
+    if (active.value) {
+      emit("pick", active.value);
+    }
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    emit("close");
+  }
+};
+
+onClickOutside(root, () => emit("close"));
+
+onMounted(() => {
+  if (autofocus) {
+    search.value?.focus();
+  }
+});
+</script>

From 68b2b3f6dd700b280ce26802a42e4f9b7a560cb0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:33:08 +0200
Subject: [PATCH 058/153] feat: add a question anywhere through the type picker

"Add question" adds after the open question; "+ Add question here"
between questions (hover and keyboard focus), the + in a question's
gutter and "Add question below" add right there. The new question
opens with the cursor in its text. An empty form shows "Add your first
question" with the picker.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         |  8 +--
 .../Factory/Document/AddQuestionLine.vue      | 30 ++++++++
 .../components/Factory/Document/BlockMenu.vue |  5 +-
 .../Factory/Document/DocumentGroup.vue        | 20 ++++--
 .../Factory/Document/DocumentList.test.ts     | 69 +++++++++++++++++++
 .../Factory/Document/DocumentList.vue         | 20 +++++-
 .../Factory/Document/DocumentQuestion.test.ts | 11 +--
 .../Factory/Document/DocumentQuestion.vue     | 27 ++++++--
 .../Factory/Document/FormDocument.test.ts     | 56 +++++++++++++++
 .../Factory/Document/FormDocument.vue         | 41 +++++++++--
 .../Factory/Document/addQuestion.ts           | 62 +++++++++++++++++
 11 files changed, 319 insertions(+), 30 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/AddQuestionLine.vue
 create mode 100644 resources/js/components/Factory/Document/DocumentList.test.ts
 create mode 100644 resources/js/components/Factory/Document/addQuestion.ts

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index fba82d18..10c11437 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -50,7 +50,7 @@ describe("editor loading", () => {
         const editor = await mountEditor(() => new Promise(() => {}));
 
         expect(editor.get("[role=status]").text()).toBe("Loading questions");
-        expect(editor.text()).not.toContain("No questions yet");
+        expect(editor.text()).not.toContain("Add your first question");
         expect(editor.find("[role=alert]").exists()).toBe(false);
     });
 
@@ -60,7 +60,7 @@ describe("editor loading", () => {
 
         const alert = editor.get("[role=alert]");
         expect(alert.text()).toContain("Couldn't load the questions.");
-        expect(editor.text()).not.toContain("No questions yet");
+        expect(editor.text()).not.toContain("Add your first question");
 
         getBlocks.mockImplementation(loads(blocks));
         await alert.get("button").trigger("click");
@@ -76,7 +76,7 @@ describe("editor loading", () => {
     it("shows the empty-form text for a loaded form without questions", async () => {
         const editor = await mountEditor(loads([]));
 
-        expect(editor.text()).toContain("No questions yet");
+        expect(editor.text()).toContain("Add your first question");
         expect(editor.find("[role=status]").exists()).toBe(false);
     });
 
@@ -85,7 +85,7 @@ describe("editor loading", () => {
         const editor = await mountEditor(loads(blocks));
 
         expect(editor.text()).toContain("questions");
-        expect(editor.text()).not.toContain("No questions yet");
+        expect(editor.text()).not.toContain("Add your first question");
     });
 
     it("puts focus on Add question after Try again loads, and back on Try again when it fails again", async () => {
diff --git a/resources/js/components/Factory/Document/AddQuestionLine.vue b/resources/js/components/Factory/Document/AddQuestionLine.vue
new file mode 100644
index 00000000..c7c3294d
--- /dev/null
+++ b/resources/js/components/Factory/Document/AddQuestionLine.vue
@@ -0,0 +1,30 @@
+<template>
+  <!-- sits in the gap below a block; it shows on hover and keyboard focus, not on touch -->
+  <div
+    class="group/add absolute -bottom-1 left-8 right-0 z-10 flex h-4 items-center justify-center sm:left-12 [@media(hover:none)]:hidden"
+  >
+    <span
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-blue-500 opacity-0 group-focus-within/add:opacity-100 group-hover/add:opacity-100"
+    />
+    <button
+      type="button"
+      class="relative flex h-6 items-center gap-1 rounded-full border border-blue-500 bg-blue-50 px-2.5 text-xs font-semibold text-blue-700 opacity-0 hover:bg-blue-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 group-hover/add:opacity-100"
+      @click="openPicker({ key: `after-${after.uuid}`, after })"
+    >
+      <D9Icon name="plus" aria-hidden="true" class="h-3 w-3" />
+      Add question here<span class="sr-only">, after {{ label }}</span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { D9Icon } from "@deck9/ui";
+import { openPicker } from "./addQuestion";
+
+defineProps<{
+  after: FormBlockModel;
+  // names the block above: "question 3"
+  label: string;
+}>();
+</script>
diff --git a/resources/js/components/Factory/Document/BlockMenu.vue b/resources/js/components/Factory/Document/BlockMenu.vue
index 6bfb93ec..f3e8e71d 100644
--- a/resources/js/components/Factory/Document/BlockMenu.vue
+++ b/resources/js/components/Factory/Document/BlockMenu.vue
@@ -25,7 +25,7 @@
       as="button"
       :class="item"
       label="Add question below"
-      @click="addBlock(block)"
+      @click="openPicker({ key: `after-${block.uuid}`, after: block })"
     />
     <D9MenuLink
       v-if="isGroup"
@@ -54,7 +54,7 @@ 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 { openPicker } from "./addQuestion";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -65,7 +65,6 @@ const emit = defineEmits<{ addToGroup: [] }>();
 
 const store = useForm();
 const workbench = useWorkbench();
-const { addBlock } = useAddBlock();
 
 const item = "w-full min-h-11 text-left text-sm lg:min-h-0";
 const isGroup = computed(() => props.block.type === "group");
diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 715801ff..f9b05b49 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -66,6 +66,13 @@
         </p>
       </div>
     </div>
+    <TypePicker
+      v-if="addAt?.key === `group-${group.uuid}`"
+      class="ml-12 mt-2"
+      title="Add a question to this group"
+      @pick="add"
+      @close="closePicker"
+    />
   </section>
 </template>
 
@@ -75,7 +82,8 @@ import { D9Icon } from "@deck9/ui";
 import { useForm, useLogic, useWorkbench } from "@/stores";
 import BlockMenu from "./BlockMenu.vue";
 import DocumentList from "./DocumentList.vue";
-import { useAddBlock } from "./blockFocus";
+import TypePicker from "./TypePicker.vue";
+import { addAt, closePicker, openPicker, useAddQuestion } from "./addQuestion";
 
 const props = defineProps<{
   group: FormBlockModel;
@@ -85,7 +93,7 @@ const props = defineProps<{
 const store = useForm();
 const workbench = useWorkbench();
 const logic = useLogic();
-const { addBlock } = useAddBlock();
+const { addQuestion: add } = useAddQuestion();
 
 const id = computed(() => `group-${props.group.uuid}`);
 const isOpen = computed(() => workbench.block?.id === props.group.id);
@@ -111,9 +119,13 @@ const addQuestion = () => {
   const last = children.value.at(-1);
 
   if (last) {
-    addBlock(last);
+    openPicker({ key: `after-${last.uuid}`, after: last });
   } else {
-    addBlock(null, null, props.group.uuid);
+    openPicker({
+      key: `group-${props.group.uuid}`,
+      after: null,
+      parent: props.group.uuid,
+    });
   }
 };
 </script>
diff --git a/resources/js/components/Factory/Document/DocumentList.test.ts b/resources/js/components/Factory/Document/DocumentList.test.ts
new file mode 100644
index 00000000..56b1f1c4
--- /dev/null
+++ b/resources/js/components/Factory/Document/DocumentList.test.ts
@@ -0,0 +1,69 @@
+import { mount, VueWrapper } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { useForm, useWorkbench } from "@/stores";
+import DocumentList from "./DocumentList.vue";
+import { addAt } from "./addQuestion";
+
+const blocks = [
+    { id: 1, uuid: "b1", type: "input-short", message: "<p>One</p>" },
+    { id: 2, uuid: "b2", type: "input-short", message: "<p>Two</p>" },
+    { id: 3, uuid: "b3", type: "input-short", message: "<p>Three</p>" },
+] as FormBlockModel[];
+
+let wrapper: VueWrapper | undefined;
+
+const mountList = () => {
+    useForm().blocks = blocks;
+    wrapper = mount(DocumentList, {
+        props: { numbers: { b1: 1, b2: 2, b3: 3 } },
+        global: { stubs: { QuestionCard: true } },
+        attachTo: document.body,
+    });
+    return wrapper;
+};
+const option = (name: string) =>
+    wrapper!.findAll("[role=option]").find((item) => item.text() === name)!;
+
+describe("adding a question inside the document", () => {
+    beforeEach(() => {
+        useForm().$reset();
+        useWorkbench().$reset();
+        addAt.value = null;
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("offers Add question here between questions, and adds there", async () => {
+        const lines = mountList()
+            .findAll("button")
+            .filter((button) => button.text().startsWith("Add question here"));
+
+        expect(lines.map((line) => line.text())).toEqual([
+            "Add question here, after question 1",
+            "Add question here, after question 2",
+        ]);
+
+        await lines[0].trigger("click");
+        await option("Single choice").trigger("click");
+
+        expect(useForm().createFormBlock).toHaveBeenCalledWith(
+            blocks[0],
+            "radio",
+            null,
+        );
+        expect(wrapper!.find("[role=listbox]").exists()).toBe(false);
+    });
+
+    it("adds after a question from the + in its gutter", async () => {
+        await mountList()
+            .get('button[aria-label="Add question after question 3"]')
+            .trigger("click");
+        await option("Date").trigger("click");
+
+        expect(useForm().createFormBlock).toHaveBeenCalledWith(
+            blocks[2],
+            "date",
+            null,
+        );
+    });
+});
diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
index 5c7f9ba9..20a042df 100644
--- a/resources/js/components/Factory/Document/DocumentList.vue
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -14,15 +14,27 @@
     }"
     @drop="onDrop"
   >
-    <Draggable v-for="block in blocks" :key="block.uuid">
-      <div class="pb-2">
+    <Draggable v-for="(block, index) in blocks" :key="block.uuid">
+      <div class="relative pb-2">
         <DocumentGroup
           v-if="block.type === 'group'"
           :group="block"
           :numbers="numbers"
         />
         <DocumentQuestion v-else :block="block" :number="numbers[block.uuid]" />
+        <AddQuestionLine
+          v-if="index < blocks.length - 1"
+          :after="block"
+          :label="blockName(block, numbers)"
+        />
       </div>
+      <TypePicker
+        v-if="addAt?.key === `after-${block.uuid}`"
+        class="mb-2 ml-8 sm:ml-12"
+        :title="`Add a question after ${blockName(block, numbers)}`"
+        @pick="addQuestion"
+        @close="closePicker"
+      />
     </Draggable>
   </Container>
 </template>
@@ -33,6 +45,9 @@ import { Container, Draggable } from "vue3-smooth-dnd";
 import { useForm } from "@/stores";
 import DocumentGroup from "./DocumentGroup.vue";
 import DocumentQuestion from "./DocumentQuestion.vue";
+import AddQuestionLine from "./AddQuestionLine.vue";
+import TypePicker from "./TypePicker.vue";
+import { addAt, blockName, closePicker, useAddQuestion } from "./addQuestion";
 
 const props = defineProps<{
   groupId?: string;
@@ -40,6 +55,7 @@ const props = defineProps<{
 }>();
 
 const store = useForm();
+const { addQuestion } = useAddQuestion();
 
 const blocks = computed(() =>
   (store.blocks ?? []).filter(
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 2d94d4ff..dd0cf918 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -19,6 +19,9 @@ const question = {
     ],
 } as unknown as FormBlockModel;
 
+// the closed question's own button; the gutter's + is named by aria-label
+const row = "button:not([aria-label])";
+
 const mountQuestion = (block = question) =>
     mount(DocumentQuestion, {
         props: { block, number: 3 },
@@ -29,7 +32,7 @@ describe("a closed question in the document", () => {
     beforeEach(() => useWorkbench().$reset());
 
     it("shows its number, text and a meta line, never its random id", () => {
-        const text = mountQuestion().find("button").text();
+        const text = mountQuestion().find(row).text();
 
         expect(text).toContain("Question 3:");
         expect(text).toContain("Which days can you help?");
@@ -43,7 +46,7 @@ describe("a closed question in the document", () => {
 
     it("says when a question has no text yet instead of naming it by id", () => {
         const text = mountQuestion({ ...question, message: "" })
-            .find("button")
+            .find(row)
             .text();
 
         expect(text).toContain("No question text yet");
@@ -54,12 +57,12 @@ describe("a closed question in the document", () => {
         const workbench = useWorkbench();
         const wrapper = mountQuestion();
 
-        await wrapper.find("button").trigger("click");
+        await wrapper.find(row).trigger("click");
         expect(workbench.putOnWorkbench).toHaveBeenCalledWith(question);
 
         workbench.block = question;
         await wrapper.vm.$nextTick();
         expect(wrapper.text()).toContain("card");
-        expect(wrapper.find("button").exists()).toBe(false);
+        expect(wrapper.find(row).exists()).toBe(false);
     });
 });
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 70333659..7bd06507 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -9,13 +9,25 @@
         class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
         >{{ number }}</span
       >
-      <span
-        aria-hidden="true"
-        title="Drag to reorder"
-        class="document-grip hidden h-6 w-6 cursor-grab sm:grid place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
-      >
-        <D9Icon name="grip-vertical" />
-      </span>
+      <!-- from lg the + sits left of the grip, out into the page margin -->
+      <div class="flex">
+        <button
+          type="button"
+          :aria-label="`Add question after question ${number}`"
+          :title="`Add question after question ${number}`"
+          class="hidden h-6 w-6 place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:grid lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
+          @click="openPicker({ key: `after-${block.uuid}`, after: block })"
+        >
+          <D9Icon name="plus" />
+        </button>
+        <span
+          aria-hidden="true"
+          title="Drag to reorder"
+          class="document-grip hidden h-6 w-6 cursor-grab sm:grid place-items-center rounded text-grey-500 hover:bg-grey-100 hover:text-grey-900 lg:opacity-0 lg:group-focus-within/question:opacity-100 lg:group-hover/question:opacity-100"
+        >
+          <D9Icon name="grip-vertical" />
+        </span>
+      </div>
     </div>
 
     <QuestionCard v-if="isOpen" :block="block" :number="number" />
@@ -71,6 +83,7 @@ import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import { plainText } from "./questionSummary";
 import QuestionCard from "./QuestionCard.vue";
 import { cursorFor } from "./blockFocus";
+import { openPicker } from "./addQuestion";
 
 const props = defineProps<{
   block: FormBlockModel;
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 072f8a9f..5ca7c14f 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -2,6 +2,8 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
 import FormDocument from "./FormDocument.vue";
+import { cursorFor } from "./blockFocus";
+import { addAt } from "./addQuestion";
 
 const blocks = [
     { id: 1, uuid: "b1", type: "none", message: "<p>Welcome</p>" },
@@ -16,6 +18,8 @@ const stubs = {
 };
 
 let wrapper: VueWrapper | undefined;
+const option = (name: string) =>
+    wrapper!.findAll("[role=option]").find((item) => item.text() === name)!;
 const scrolled = vi.fn();
 
 describe("the form document", () => {
@@ -29,6 +33,8 @@ describe("the form document", () => {
         scrolled.mockClear();
         useForm().$reset();
         useWorkbench().$reset();
+        addAt.value = null;
+        cursorFor.value = null;
     });
 
     afterEach(() => wrapper?.unmount());
@@ -63,4 +69,54 @@ describe("the form document", () => {
         expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
         expect(scrolled).toHaveBeenCalledWith("row-b2", "start");
     });
+
+    it("shows the picker on an empty form and adds the first question", async () => {
+        useForm().blocks = [];
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        expect(wrapper.text()).toContain("Add your first question");
+        await option("Short text").trigger("click");
+
+        expect(useForm().createFormBlock).toHaveBeenCalledWith(
+            null,
+            "input-short",
+            null,
+        );
+    });
+
+    it("adds a question after the open one, with the cursor in its text", async () => {
+        const added = {
+            id: 3,
+            uuid: "b3",
+            type: "input-email",
+        } as FormBlockModel;
+        useForm().blocks = blocks;
+        useWorkbench().block = blocks[0];
+        vi.mocked(useForm().createFormBlock).mockImplementation(async () => {
+            useWorkbench().block = added;
+        });
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+
+        await wrapper
+            .findAll("button")
+            .find((button) => button.text() === "Add question")!
+            .trigger("click");
+        await option("Email").trigger("click");
+        await flushPromises();
+
+        expect(useForm().createFormBlock).toHaveBeenCalledWith(
+            blocks[0],
+            "input-email",
+            null,
+        );
+        expect(cursorFor.value).toBe("b3");
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 1348e8b5..457d7154 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -41,20 +41,27 @@
           </div>
 
           <DocumentList v-if="store.hasBlocks" :numbers="numbers" />
-          <EmptyState
+          <TypePicker
             v-else
-            title="No questions yet"
-            description="Add your first question below."
+            class="ml-12"
+            title="Add your first question"
+            :autofocus="false"
+            @pick="addQuestion"
           />
 
-          <div ref="addButtons" class="mt-4 flex flex-wrap gap-2 pl-12">
+          <div
+            ref="addButtons"
+            class="mt-4 flex flex-wrap items-center gap-2 pl-12"
+          >
             <D9Button
+              v-if="store.hasBlocks"
               label="Add question"
               class="min-h-11 lg:min-h-0"
               color="dark"
               icon="plus"
               icon-position="left"
-              @click="addBlock()"
+              :aria-expanded="addAt?.key === 'end'"
+              @click="openPicker({ key: 'end', after: workbench.block })"
             />
             <D9Button
               label="Add group"
@@ -64,7 +71,21 @@
               icon-position="left"
               @click="addBlock(null, 'group')"
             />
+            <span v-if="store.hasBlocks" class="text-xs text-grey-600"
+              >or type / in an empty question</span
+            >
           </div>
+          <TypePicker
+            v-if="addAt?.key === 'end'"
+            class="ml-12 mt-2"
+            :title="
+              workbench.block
+                ? `Add a question after ${blockName(workbench.block, numbers)}`
+                : 'Add a question'
+            "
+            @pick="addQuestion"
+            @close="closePicker"
+          />
         </template>
       </div>
     </div>
@@ -102,11 +123,18 @@ import { computed, nextTick, ref, watch } from "vue";
 import { Dialog, DialogPanel } from "@headlessui/vue";
 import { D9Button, D9Icon } from "@deck9/ui";
 import { useForm, useWorkbench } from "@/stores";
-import EmptyState from "@/components/EmptyState.vue";
 import QuestionsLoadState from "@/components/Factory/Shared/QuestionsLoadState.vue";
 import BlockLogicEditor from "@/components/Factory/Sidebar/BlockLogicEditor.vue";
 import DocumentList from "./DocumentList.vue";
 import DocumentOutline from "./DocumentOutline.vue";
+import TypePicker from "./TypePicker.vue";
+import {
+  addAt,
+  blockName,
+  closePicker,
+  openPicker,
+  useAddQuestion,
+} from "./addQuestion";
 import { questionNumbers } from "./questionSummary";
 import {
   cursorFor,
@@ -123,6 +151,7 @@ const emit = defineEmits<{ retry: [] }>();
 const store = useForm();
 const workbench = useWorkbench();
 const { addBlock } = useAddBlock();
+const { addQuestion } = useAddQuestion();
 const root = ref<HTMLElement | null>(null);
 const addButtons = ref<HTMLElement | null>(null);
 
diff --git a/resources/js/components/Factory/Document/addQuestion.ts b/resources/js/components/Factory/Document/addQuestion.ts
new file mode 100644
index 00000000..ab2432be
--- /dev/null
+++ b/resources/js/components/Factory/Document/addQuestion.ts
@@ -0,0 +1,62 @@
+import { ref } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { focusBlock, useAddBlock } from "./blockFocus";
+
+// where the type picker shows (key), and where its question goes: after a block, or last in an empty group
+type AddSpot = { key: string; after: FormBlockModel | null; parent?: string };
+
+export const addAt = ref<AddSpot | null>(null);
+
+// the button that opened the picker gets the cursor back
+let opener: HTMLElement | null = null;
+
+// names a block in a label: "question 3", "the group Contact"
+export function blockName(
+    block: FormBlockModel,
+    numbers: Record<string, number>,
+) {
+    return block.type === "group"
+        ? `the group ${block.title ?? ""}`.trim()
+        : `question ${numbers[block.uuid]}`;
+}
+
+export function openPicker(spot: AddSpot) {
+    opener = document.activeElement as HTMLElement | null;
+    addAt.value = spot;
+}
+
+export function closePicker() {
+    const spot = addAt.value;
+    addAt.value = null;
+
+    if (opener?.isConnected) {
+        opener.focus();
+    } else if (spot) {
+        focusBlock(spot.after);
+    }
+}
+
+export function useAddQuestion() {
+    const store = useForm();
+    const workbench = useWorkbench();
+    const { addBlock } = useAddBlock();
+
+    const addQuestion = async (type: FormBlockType) => {
+        const spot = addAt.value;
+        const before = workbench.block;
+        addAt.value = null;
+
+        // the store places it by object, and a save may have swapped that object
+        const after =
+            store.blocks?.find((block) => block.uuid === spot?.after?.uuid) ??
+            null;
+        await addBlock(after, type, spot?.parent ?? null);
+
+        // a failed create opens nothing
+        if (spot && workbench.block === before && opener?.isConnected) {
+            opener.focus();
+        }
+    };
+
+    return { addQuestion };
+}

From 60690719b40feaea38b4d9f5ff878c7a260db25e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:33:08 +0200
Subject: [PATCH 059/153] feat: type / in an empty question to pick its answer
 type

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

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index 5858d483..cb56c493 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -131,4 +131,38 @@ describe("an open question", () => {
         ).toBe(true);
         expect(document.getElementById("question-q4-settings")).not.toBeNull();
     });
+
+    describe("typing / in its text", () => {
+        const editorStub = {
+            template: `<div><div contenteditable="true" /></div>`,
+            methods: { focus() {} },
+        };
+        const slash = async (message: string | null) => {
+            useWorkbench().block = { ...block, message };
+            mountCard(false, { ...stubs, Editor: editorStub });
+            const typed = await wrapper!
+                .find("[contenteditable]")
+                .trigger("keydown", { key: "/" });
+            return typed;
+        };
+
+        it("opens the picker in an empty question, and a pick changes its type", async () => {
+            await slash(null);
+            const option = wrapper!
+                .findAll("[role=option]")
+                .find((item) => item.text() === "Single choice")!;
+            await option.trigger("click");
+
+            expect(useWorkbench().updateBlock).toHaveBeenCalledWith({
+                type: "radio",
+            });
+            expect(wrapper!.find("[role=listbox]").exists()).toBe(false);
+        });
+
+        it("stays a / in a question with text", async () => {
+            await slash("<p>Your name?</p>");
+
+            expect(wrapper!.find("[role=listbox]").exists()).toBe(false);
+        });
+    });
 });
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 3a499a66..30d8b19f 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -5,7 +5,20 @@
     <span :id="`${id}-text-label`" class="sr-only"
       >Question {{ number }} text</span
     >
-    <Editor :id="`${id}-text`" ref="editor" v-model="message" bare />
+    <Editor
+      :id="`${id}-text`"
+      ref="editor"
+      v-model="message"
+      bare
+      placeholder="Type a question, or / for answer types"
+      @keydown="openTypes"
+    />
+    <TypePicker
+      v-if="typesOpen"
+      title="Change the answer type"
+      @pick="changeType"
+      @close="closeTypes"
+    />
 
     <ConfigureClicks v-if="interactionType === 'button'" />
     <ConfigureConsents v-else-if="interactionType === 'consent'" />
@@ -133,7 +146,9 @@ import ConfigureConsents from "@/components/Factory/Main/ConfigureConsents.vue";
 import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import BlockMenu from "./BlockMenu.vue";
 import QuestionSettings from "./QuestionSettings.vue";
+import TypePicker from "./TypePicker.vue";
 import { cursorFor } from "./blockFocus";
+import { plainText } from "./questionSummary";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -166,6 +181,25 @@ watch(type, (value) => {
   }
 });
 
+// "/" in an empty question picks its answer type
+const typesOpen = ref(false);
+const openTypes = (event: KeyboardEvent) => {
+  const inText = (event.target as HTMLElement).closest("[contenteditable]");
+
+  if (event.key === "/" && inText && !plainText(message.value)) {
+    event.preventDefault();
+    typesOpen.value = true;
+  }
+};
+const closeTypes = () => {
+  typesOpen.value = false;
+  editor.value?.focus();
+};
+const changeType = (value: FormBlockType) => {
+  type.value = types.value.find((item) => item.value === value);
+  closeTypes();
+};
+
 const takeCursor = () => {
   if (cursorFor.value === props.block.uuid) {
     cursorFor.value = null;
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index e0660f38..e4b18abb 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -137,6 +137,7 @@ const {
   counter = false,
   bare = false,
   id,
+  placeholder = "Type your message here...",
 } = defineProps<{
   modelValue?: string;
   counter?: boolean;
@@ -144,6 +145,7 @@ const {
   bare?: boolean;
   // names the text box after the D9Label with the same id
   id?: string;
+  placeholder?: string;
 }>();
 
 const content = ref("");
@@ -181,7 +183,7 @@ const editor = useEditor({
   extensions: [
     FontFamily,
     Placeholder.configure({
-      placeholder: "Type your message here...",
+      placeholder,
     }),
     StarterKit.configure({
       heading: {

From 986acfbcae983be05909ac98a329d7d705eb3847 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:34:14 +0200
Subject: [PATCH 060/153] fix: a tooltip no longer takes the keyboard focus

floating-vue focuses every popper it shows. A card that opens under the
mouse showed a toolbar tooltip, which took the cursor out of the
question text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/app.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 4fcc4e6a..29da4271 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -178,6 +178,8 @@ createInertiaApp({
                         autoHide: true,
                         placement: "auto",
                         html: true,
+                        // a tooltip shown on hover must not take the focus, e.g. from the question text
+                        noAutoFocus: true,
                     },
                 },
             })

From b9b36dec5a98f3ee872b09ad3faadb64267a4118 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:34:14 +0200
Subject: [PATCH 061/153] fix: Escape in the question text closes the question

ProseMirror cancels every Escape, so the card took it as handled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentQuestion.test.ts   | 17 ++++++++++++++++-
 .../Factory/Document/DocumentQuestion.vue       |  9 +++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 94ae68c5..f1a53f17 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -25,7 +25,7 @@ const mountQuestion = (block = question) =>
         global: {
             stubs: {
                 QuestionCard: {
-                    template: `<div tabindex="-1" class="card">card</div>`,
+                    template: `<div tabindex="-1" class="card">card<div contenteditable="true" class="text" /></div>`,
                 },
             },
         },
@@ -133,6 +133,21 @@ describe("a closed question in the document", () => {
         );
     });
 
+    it("closes with Escape from the question text, which cancels every Escape", async () => {
+        const workbench = useWorkbench();
+        workbench.block = question;
+        const wrapper = mountQuestion();
+        const text = wrapper.find(".text");
+        text.element.addEventListener("keydown", (event) =>
+            event.preventDefault(),
+        );
+
+        await text.trigger("keydown", { key: "Escape" });
+        await flushPromises();
+
+        expect(workbench.clearWorkbench).toHaveBeenCalled();
+    });
+
     it("leaves Escape to a select or menu inside the card", async () => {
         const workbench = useWorkbench();
         workbench.block = question;
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index de5a2090..df54b1a7 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -103,8 +103,13 @@ const row = ref<HTMLButtonElement | null>(null);
 
 // Alt+Up/Down moves the question, open or not; Escape closes it
 const onKeydown = async (event: KeyboardEvent) => {
-  // a select or menu inside the card handled the key already
-  if (event.defaultPrevented) {
+  // a select or menu inside the card handled the key already; the question
+  // text cancels every key it takes, also an Escape it doesn't use
+  const inText = (event.target as HTMLElement).closest?.(
+    "[contenteditable=true]",
+  );
+
+  if (event.defaultPrevented && !inText) {
     return;
   }
 

From 49640342867735d443ed8f5dd731593ea07c9d18 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:36:47 +0200
Subject: [PATCH 062/153] fix: give the phone's Preview a 44 px tap area

The button is 32 px high. An invisible edge 6 px above and below makes
the tap area 44 px without changing its look.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts | 4 ++++
 resources/js/Pages/Forms/Edit.vue     | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 1d25ab12..d856596a 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -136,5 +136,9 @@ describe("editor loading", () => {
         // a click on the text would land on a span, which the closing dialog
         // can't focus again: the button's inside lets clicks through to it
         expect(preview?.classes()).toContain("[&_*]:pointer-events-none");
+        // 32 px high, the tap area reaches 6 px above and below
+        expect(preview?.classes()).toEqual(
+            expect.arrayContaining(["before:absolute", "before:-inset-y-1.5"]),
+        );
     });
 });
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 2a972242..8042f59b 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -3,10 +3,11 @@
     <template #preview><PreviewToggle v-model="isPreviewing" /></template>
     <FormDocument :status="status" @retry="loadBlocks">
       <!-- a phone's top bar has no room for Preview; a click inside lands on
-        the button, so closing the preview puts focus back on it -->
+        the button, so closing the preview puts focus back on it;
+        an invisible edge makes the tap area 44 px high -->
       <template #actions>
         <D9Button
-          class="lg:hidden [&_*]:pointer-events-none"
+          class="lg:hidden [&_*]:pointer-events-none before:absolute before:inset-x-0 before:-inset-y-1.5 before:content-['']"
           label="Preview"
           color="light"
           icon="eye"

From 7baa89882ab57802cf984dfc40801466c2f2467e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:37:12 +0200
Subject: [PATCH 063/153] fix: close the preview when the window gets narrower
 than a desktop

Shrinking the window below 1280 px, or turning a tablet to portrait, opened
the preview as a panel over the document and moved focus into it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/FormPreview.test.ts          | 16 ++++++++++++++++
 .../components/Factory/Preview/FormPreview.vue   |  5 +++++
 2 files changed, 21 insertions(+)

diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index 2b60e14e..99103637 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -57,6 +57,22 @@ describe("the preview panel", () => {
         expect(wrapper.emitted("update:modelValue")).toEqual([[false]]);
     });
 
+    it("closes when the window gets narrower than a desktop, instead of popping over the document", async () => {
+        let change: (event: { matches: boolean }) => void = () => {};
+        vi.stubGlobal("matchMedia", () => ({
+            matches: true,
+            addEventListener: (_: string, listener: typeof change) => (change = listener),
+            removeEventListener() {},
+        }));
+        const wrapper = mountPreview();
+        expect(wrapper.find("aside").exists()).toBe(true);
+
+        change({ matches: false });
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.emitted("update:modelValue")).toEqual([[false]]);
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index bdc0bd17..c1ff0784 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -39,9 +39,14 @@
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 import { D9Icon } from "@deck9/ui";
 import { useMediaQuery } from "@vueuse/core";
+import { watch } from "vue";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
 
 const isWide = useMediaQuery("(min-width: 1280px)");
+// a narrower window or a turned tablet must not pop the panel over the document
+watch(isWide, (wide) => {
+  if (!wide) open.value = false;
+});
 </script>

From 92367af88ec12fbba26d7f269d4cb7fae38bafba Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:37:44 +0200
Subject: [PATCH 064/153] fix: rule editor details found in the browser
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- An update answers only true: keep the saved copy, so the sentence
  doesn't turn into "…" until reload.
- Escape in an open list closes the list, not the rule editor.
- A condition fits one row at desktop width; phones get 44 px buttons
  and no lone "If" row; long question texts are cut at 80 characters
  in the pickers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentGroup.vue        |  2 +-
 .../Factory/Document/Rules/BlockRules.test.ts | 22 ++++++-
 .../Factory/Document/Rules/RuleEditor.vue     | 59 ++++++++++++-------
 .../Factory/Document/Rules/RuleLine.vue       |  6 +-
 4 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 8eedc8ca..6b8e2356 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -40,7 +40,7 @@
         @add-to-group="addQuestion"
       />
     </div>
-    <BlockRules :block="group" :numbers="numbers" class="pb-2 pl-9" />
+    <BlockRules :block="group" :numbers="numbers" class="pb-2 pl-8" />
 
     <div class="relative">
       <DocumentList
diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
index b5558eae..223f1be2 100644
--- a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
@@ -271,9 +271,8 @@ describe("editing a rule in place", () => {
 
     it("saves the picked answer and shows the sentence again", async () => {
         const logic = useLogic();
-        vi.mocked(logic.saveSingleRule).mockImplementation(
-            async (saved) => saved,
-        );
+        // an update answers only true
+        vi.mocked(logic.saveSingleRule).mockResolvedValue(true as never);
         const wrapper = await edit();
 
         await pick(wrapper, "-0-answer", "No, not this time");
@@ -297,6 +296,23 @@ describe("editing a rule in place", () => {
         expect(text(wrapper)).toContain("If question 1 is “No, not this time”");
     });
 
+    it("closes on Escape, but not when an open list takes it", async () => {
+        const wrapper = await edit();
+        const editor = wrapper.find("[role=group]");
+        const listEscape = new KeyboardEvent("keydown", {
+            key: "Escape",
+            bubbles: true,
+            cancelable: true,
+        });
+        listEscape.preventDefault();
+
+        editor.element.dispatchEvent(listEscape);
+        expect(editing.value).not.toBeNull();
+
+        await editor.trigger("keydown", { key: "Escape" });
+        expect(editing.value).toBeNull();
+    });
+
     it("shows why the server refused a rule", async () => {
         vi.mocked(useLogic().saveSingleRule).mockRejectedValue({
             response: {
diff --git a/resources/js/components/Factory/Document/Rules/RuleEditor.vue b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
index 74201355..6d94daaa 100644
--- a/resources/js/components/Factory/Document/Rules/RuleEditor.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
@@ -3,11 +3,11 @@
     role="group"
     :aria-label="`Rule ${index + 1} of ${owner}`"
     class="my-1 space-y-3 rounded-lg border border-grey-200 bg-white p-3 text-[13px] text-grey-700 shadow-sm"
-    @keydown.esc="cancel"
+    @keydown.esc="onEscape"
   >
     <div v-for="(condition, i) in draft.conditions" :key="i" class="space-y-1">
       <div class="flex flex-wrap items-center gap-2">
-        <span v-if="i === 0" class="w-12 shrink-0 font-medium">If</span>
+        <span v-if="i === 0" class="shrink-0 font-medium sm:w-20">If</span>
         <div v-else class="w-20 shrink-0">
           <span :id="`${id}-${i}-chain-label`" class="sr-only"
             >And or or, condition {{ i + 1 }}</span
@@ -24,7 +24,7 @@
         </div>
 
         <div
-          class="w-full min-w-0 rounded-md sm:w-60"
+          class="min-w-0 flex-1 basis-48 rounded-md sm:flex-none"
           :class="isDeleted(condition.source) && 'ring-2 ring-red-500'"
         >
           <span :id="`${id}-${i}-source-label`" class="sr-only"
@@ -46,7 +46,7 @@
           />
         </div>
 
-        <div class="w-36 shrink-0">
+        <div class="w-32 shrink-0">
           <span :id="`${id}-${i}-operator-label`" class="sr-only"
             >Comparison for condition {{ i + 1 }}</span
           >
@@ -66,7 +66,7 @@
           />
         </div>
 
-        <div class="min-w-0 flex-1 basis-40">
+        <div class="min-w-0 flex-1 basis-28">
           <template v-if="answerOptions(question(condition.source)).length">
             <span :id="`${id}-${i}-answer-label`" class="sr-only"
               >Answer for condition {{ i + 1 }}</span
@@ -107,7 +107,7 @@
           v-if="draft.conditions.length > 1"
           type="button"
           :aria-label="`Remove condition ${i + 1}`"
-          class="grid h-8 w-8 shrink-0 place-items-center rounded-md text-grey-600 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="grid h-11 w-11 shrink-0 place-items-center rounded-md sm:h-8 sm:w-8 text-grey-600 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           @click="draft.conditions.splice(i, 1)"
         >
           <D9Icon name="trash" aria-hidden="true" />
@@ -128,14 +128,14 @@
 
     <button
       type="button"
-      class="flex h-8 items-center rounded-md px-2 font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="flex h-11 items-center rounded-md px-2 font-semibold sm:h-8 text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="addCondition"
     >
       Add condition
     </button>
 
     <div class="flex flex-wrap items-center gap-2">
-      <span class="w-12 shrink-0 font-medium">then</span>
+      <span class="shrink-0 font-medium sm:w-20">then</span>
       <div class="w-48 shrink-0">
         <span :id="`${id}-action-label`" class="sr-only">Action</span>
         <D9Select
@@ -184,7 +184,7 @@
       <button
         v-if="rule.id !== undefined"
         type="button"
-        class="flex h-8 items-center rounded-md px-2 font-semibold text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        class="flex h-11 items-center rounded-md px-2 font-semibold sm:h-8 text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         @click="remove"
       >
         Remove rule
@@ -205,6 +205,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
+import truncate from "lodash/truncate";
 import { D9Button, D9Icon, D9Input, D9Select } from "@deck9/ui";
 import { useForm, useLogic } from "@/stores";
 import { findAllBlocksBeforeTarget } from "@/stores/helpers/queue";
@@ -255,10 +256,17 @@ const question = (uuid?: string | null) =>
 const isDeleted = (uuid?: string | null) => !!uuid && !question(uuid);
 const optionOf = <T extends { id: string }>(options: T[], id?: string | null) =>
   options.find((option) => option.id === id) ?? null;
-const toOption = (block: FormBlockModel): Option => ({
-  id: block.uuid,
-  label: `${props.numbers[block.uuid]} · ${plainText(block.message) || "No question text yet"}`,
-});
+const toOption = (block: FormBlockModel): Option => {
+  const text = truncate(plainText(block.message), {
+    length: 80,
+    separator: " ",
+  });
+
+  return {
+    id: block.uuid,
+    label: `${props.numbers[block.uuid]} · ${text || "No question text yet"}`,
+  };
+};
 
 // a jump can use the question's own answer; hide and show only earlier ones
 const sourceOptions = computed(() =>
@@ -331,6 +339,15 @@ const cancel = () => {
   close();
 };
 
+// Escape in an open list only closes the list
+const onEscape = (event: KeyboardEvent) => {
+  const target = event.target as HTMLElement;
+
+  if (!event.defaultPrevented && !target.closest("[aria-expanded=true]")) {
+    cancel();
+  }
+};
+
 const save = async () => {
   if (broken.value || saving.value) {
     return;
@@ -343,13 +360,15 @@ const save = async () => {
 
   try {
     const isGoto = draft.action === "goto";
-    keepSaved(
-      await logic.saveSingleRule({
-        ...draft,
-        evaluate: isGoto ? "after" : "before",
-        action_payload: isGoto ? draft.action_payload : null,
-      }),
-    );
+    const rule: FormBlockLogic = {
+      ...draft,
+      evaluate: isGoto ? "after" : "before",
+      action_payload: isGoto ? draft.action_payload : null,
+    };
+    const saved = await logic.saveSingleRule(rule);
+
+    // a new rule comes back with its id; an update answers only true
+    keepSaved(typeof saved === "object" ? saved : rule);
     close();
   } catch (error: any) {
     const data = error?.response?.status === 422 ? error.response.data : null;
diff --git a/resources/js/components/Factory/Document/Rules/RuleLine.vue b/resources/js/components/Factory/Document/Rules/RuleLine.vue
index 59b84a45..986378b1 100644
--- a/resources/js/components/Factory/Document/Rules/RuleLine.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleLine.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex items-start gap-2 py-0.5">
-    <p class="min-w-0 flex-1 py-1 text-[13px] leading-6 text-grey-700">
+  <div class="flex flex-wrap items-center gap-x-1 py-0.5 pl-9">
+    <p class="min-w-0 py-1 text-[13px] leading-6 text-grey-700">
       <template v-for="(part, i) in parts" :key="i">
         <DeletedQuestion v-if="part.deleted" />
         <template v-else-if="part.number"
@@ -28,7 +28,7 @@
       :id="`${id}-edit`"
       type="button"
       :aria-label="`Edit rule ${index + 1} of ${owner}`"
-      class="flex h-8 shrink-0 items-center rounded-md px-2 text-[13px] font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="flex h-11 shrink-0 items-center rounded-md px-2 text-[13px] sm:h-8 font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="emit('edit')"
     >
       Edit

From 98562b3f79f09e6bb86febb6cc7b4f7225a13ba5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:37:44 +0200
Subject: [PATCH 065/153] feat: say "Add a question to see it here." in an
 empty form's preview

A form without questions showed a blank white frame, which looked broken.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/FormPreview.test.ts       | 19 ++++++++++++++++++-
 .../Factory/Preview/FormPreview.vue           | 14 +++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index 99103637..2d5c7ef3 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -1,5 +1,6 @@
-import { enableAutoUnmount, mount } from "@vue/test-utils";
+import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { useForm } from "@/stores";
 import FormPreview from "./FormPreview.vue";
 import PreviewToggle from "./PreviewToggle.vue";
 
@@ -73,6 +74,22 @@ describe("the preview panel", () => {
         expect(wrapper.emitted("update:modelValue")).toEqual([[false]]);
     });
 
+    it.each([true, false])("says what to do for a form without questions, not a blank frame (desktop: %s)", async (wide) => {
+        screen(wide);
+        useForm().blocks = [];
+        mountPreview();
+        await flushPromises();
+
+        expect(document.body.textContent).toContain("Add a question to see it here.");
+        expect(document.querySelector("iframe")).toBeNull();
+
+        // while the questions load, the frame
+        useForm().blocks = null;
+        await flushPromises();
+        expect(document.body.textContent).not.toContain("Add a question");
+        expect(document.querySelector("iframe")).not.toBeNull();
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index c1ff0784..152612ed 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -8,7 +8,8 @@
     <h2 id="preview-heading" class="w-80 text-xs font-semibold text-grey-600">
       Preview
     </h2>
-    <PreviewFrame />
+    <p v-if="isEmpty" :class="emptyText">Add a question to see it here.</p>
+    <PreviewFrame v-else />
   </aside>
 
   <!-- tablet and phone: over the document; closing it keeps it mounted, so focus goes back to Preview -->
@@ -30,7 +31,8 @@
           <D9Icon name="close" aria-hidden="true" />
         </button>
       </div>
-      <PreviewFrame />
+      <p v-if="isEmpty" :class="emptyText">Add a question to see it here.</p>
+      <PreviewFrame v-else />
     </DialogPanel>
   </Dialog>
 </template>
@@ -39,11 +41,17 @@
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 import { D9Icon } from "@deck9/ui";
 import { useMediaQuery } from "@vueuse/core";
-import { watch } from "vue";
+import { computed, watch } from "vue";
+import { useForm } from "@/stores";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
 
+const store = useForm();
+// loaded without questions (null while they load): a blank frame looks broken
+const isEmpty = computed(() => store.blocks?.length === 0);
+const emptyText = "w-80 max-w-full text-sm text-grey-600";
+
 const isWide = useMediaQuery("(min-width: 1280px)");
 // a narrower window or a turned tablet must not pop the panel over the document
 watch(isWide, (wide) => {

From 65b53c0bcecd1a54a77f9e3d6ed9df9094a1afa2 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:38:51 +0200
Subject: [PATCH 066/153] refactor: remove the old logic panel

Rules are edited in place now. The panel, its rule form and the store
parts only they used (editor state, backup, save-all, the old operator
list and condition transform) go.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         |   1 -
 .../Factory/Sidebar/BlockLogicEditor.vue      | 140 --------
 .../Factory/Sidebar/BlockLogicRule.test.ts    |  40 ---
 .../Factory/Sidebar/BlockLogicRule.vue        | 313 ------------------
 resources/js/components/FieldLabels.test.ts   |   3 -
 resources/js/stores/helpers/logic.ts          |  21 --
 resources/js/stores/logic.ts                  | 149 +--------
 7 files changed, 1 insertion(+), 666 deletions(-)
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts
 delete mode 100644 resources/js/components/Factory/Sidebar/BlockLogicRule.vue

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index fba82d18..2424201c 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -12,7 +12,6 @@ const blocks = [
 const stubs = {
     AppLayout: { props: ["title"], template: "<main><slot /></main>" },
     DocumentList: { template: "<ol><li>questions</li></ol>" },
-    BlockLogicEditor: true,
 };
 
 let wrapper: VueWrapper | undefined;
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue b/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
deleted file mode 100644
index 39ba8949..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicEditor.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="isShowingLogicEditor">
-    <Dialog as="div" class="relative z-10" @close="close">
-      <div class="fixed inset-0 bg-grey-900/25" />
-
-      <div class="fixed inset-0 overflow-hidden">
-        <div
-          class="pointer-events-none fixed inset-y-0 left-0 flex max-w-full pr-10"
-        >
-          <TransitionChild
-            as="template"
-            enter="transform transition ease-out duration-200 sm:duration-400 will-change-transform"
-            enter-from="-translate-x-full"
-            enter-to="translate-x-0"
-            leave="transform transition ease-in duration-200 sm:duration-300 will-change-transform"
-            leave-from="translate-x-0"
-            leave-to="-translate-x-full"
-          >
-            <DialogPanel class="pointer-events-auto w-screen max-w-xl">
-              <div
-                class="flex h-full flex-col divide-y divide-grey-200 bg-white shadow-xl"
-              >
-                <div
-                  class="flex min-h-0 flex-1 flex-col overflow-y-scroll py-6"
-                >
-                  <div class="px-4 sm:px-6">
-                    <div class="flex items-start justify-between">
-                      <DialogTitle
-                        class="text-base font-semibold leading-6 text-grey-900"
-                      >
-                        Block Logic
-                      </DialogTitle>
-
-                      <div class="ml-3 flex h-7 items-center">
-                        <button
-                          type="button"
-                          class="rounded-md bg-white px-2 text-grey-400 hover:text-grey-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                          @click="close"
-                        >
-                          <span class="sr-only">Close panel</span>
-                          <D9Icon name="close" aria-hidden="true" />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="relative mt-6 flex-1 px-4 sm:px-6" v-if="block">
-                    <BlockLogicRule
-                      class="mb-2"
-                      v-for="(rule, index) in block.logics"
-                      v-bind="{ rule, index }"
-                      :key="index"
-                    />
-
-                    <EmptyState
-                      v-if="!block.logics?.length"
-                      class="mb-4"
-                      title="No rules setup"
-                      description="Add a rule to get started"
-                    />
-
-                    <D9Button
-                      type="button"
-                      label="Rule"
-                      @click="store.addRule()"
-                      icon="plus"
-                      color="dark"
-                      icon-position="left"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="flex flex-shrink-0 justify-end px-4 py-4"
-                  :class="{ 'pointer-events-none opacity-50': isSaving }"
-                >
-                  <D9Button
-                    label="Cancel"
-                    type="button"
-                    @click="close"
-                    color="light"
-                  />
-                  <D9Button
-                    label="Save"
-                    type="button"
-                    @click="save"
-                    class="ml-4"
-                    :is-loading="isSaving"
-                  />
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import BlockLogicRule from "./BlockLogicRule.vue";
-import EmptyState from "@/components/EmptyState.vue";
-import { D9Button, D9Icon } from "@deck9/ui";
-
-import { useLogic } from "@/stores";
-import { storeToRefs } from "pinia";
-
-const store = useLogic();
-const isSaving = ref(false);
-
-const { isShowingLogicEditor, block } = storeToRefs(store);
-
-const save = async () => {
-  isSaving.value = true;
-
-  const result = await store.saveBlockLogic();
-
-  if (result && result.failed > 0) {
-    isSaving.value = false;
-    return;
-  }
-
-  setTimeout(() => {
-    isSaving.value = false;
-    store.backupLogic();
-    store.hideLogicEditor();
-  }, 250);
-};
-
-const close = () => {
-  store.restoreLogic();
-  store.hideLogicEditor();
-};
-</script>
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts b/resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts
deleted file mode 100644
index b52636e8..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.test.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { createPinia, setActivePinia } from "pinia";
-import { describe, expect, it } from "vitest";
-import BlockLogicRule from "./BlockLogicRule.vue";
-import { useForm } from "@/stores";
-
-describe("BlockLogicRule", () => {
-    it("shows the Identifier and question text as plain text", () => {
-        const pinia = createPinia();
-        setActivePinia(pinia);
-
-        useForm().blocks = [
-            {
-                uuid: "block1",
-                type: "input-short",
-                title: "<b>age</b>",
-                message: "<p>&lt;i&gt;How old are you?&lt;/i&gt;</p>",
-            } as FormBlockModel,
-        ];
-
-        const wrapper = mount(BlockLogicRule, {
-            props: {
-                index: 0,
-                rule: {
-                    name: "Rule",
-                    evaluate: "after",
-                    action: "goto",
-                    action_payload: "block1",
-                    conditions: [],
-                } as unknown as FormBlockLogic,
-            },
-            global: { plugins: [pinia] },
-        });
-
-        expect(wrapper.find("b").exists()).toBe(false);
-        expect(wrapper.find("i").exists()).toBe(false);
-        expect(wrapper.find("span.bg-grey-700").text()).toBe("<b>age</b>");
-        expect(wrapper.text()).toContain("<i>How old are you?</i>");
-    });
-});
diff --git a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue b/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
deleted file mode 100644
index dbc94627..00000000
--- a/resources/js/components/Factory/Sidebar/BlockLogicRule.vue
+++ /dev/null
@@ -1,313 +0,0 @@
-<template>
-  <div class="bg-grey-50 rounded">
-    <div
-      class="flex justify-between mb-1 bg-grey-100 border-b border-grey-200 px-4 py-2 rounded-t"
-    >
-      <span class="font-medium">
-        {{ rule.name }}
-      </span>
-      <button>
-        <D9Icon
-          name="trash"
-          class="text-grey-500 hover:text-red-700 text-sm"
-          @click="removeRule"
-        />
-      </button>
-    </div>
-
-    <div class="px-4 py-2">
-      <div class="mb-3 hidden">
-        <D9Label label="Rule Execution" />
-        <LabelToggle
-          v-bind="{
-            options: [
-              { label: 'Before', value: 'before' },
-              { label: 'After', value: 'after' },
-            ],
-          }"
-          v-model="evaluate"
-        />
-      </div>
-
-      <div class="mb-1">
-        <D9Label label="Conditions" />
-        <div
-          v-for="(condition, index) in conditions"
-          :key="index"
-          class="mt-2 relative"
-        >
-          <LabelToggle
-            v-if="index !== 0"
-            class="mb-2 w-0"
-            v-bind="{
-              options: [
-                { label: 'And', value: 'and' },
-                { label: 'Or', value: 'or' },
-              ],
-            }"
-            v-model="condition.chainOperator"
-          />
-          <div class="relative">
-            <label :for="`${uid}-${index}-source`" class="sr-only"
-              >Source block</label
-            >
-            <D9Select
-              :id="`${uid}-${index}-source`"
-              placeholder="Select a block"
-              v-model="condition.source"
-              size="small"
-              :options="availableSourceBlocks"
-              by="key"
-            >
-              <template #option="{ option }">
-                <span class="inline-flex items-center text-xs">
-                  <span
-                    class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-16 truncate inline-block text-center"
-                    >{{ option.title }}</span
-                  >
-                  <span class="inline-block truncate">{{ option.text }}</span>
-                </span>
-              </template>
-            </D9Select>
-            <label :for="`${uid}-${index}-operator`" class="sr-only"
-              >Operator</label
-            >
-            <div class="flex items-center space-x-2 mt-1">
-              <D9Select
-                :id="`${uid}-${index}-operator`"
-                class="w-64"
-                placeholder="Select an operator"
-                v-model="condition.operator"
-                size="small"
-                :options="operators"
-              />
-              <D9Input
-                class="w-full"
-                v-model="condition.value"
-                placeholder="Enter a value"
-                size="small"
-                block
-              />
-            </div>
-
-            <button
-              type="button"
-              class="text-xs tracking-normal text-red-500 absolute bottom-full right-0 mb-1"
-              @click="removeCondition(index)"
-            >
-              Remove
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="bg-grey-200 border border-grey-300 rounded-md px-4 py-4 text-sm"
-        v-if="!hasConditions"
-      >
-        <p class="font-semibold">You have no conditions set for this rule.</p>
-        <p class="text-grey-500">Click the button below to add a condition.</p>
-      </div>
-
-      <D9Button
-        class="mt-3"
-        label="Condition"
-        icon="plus"
-        size="small"
-        color="dark"
-        icon-position="left"
-        @click="addCondition"
-      />
-
-      <div class="mt-3">
-        <D9Label label="Action" />
-        <LabelToggle
-          class="w-0"
-          v-bind="{
-            options: [
-              { label: 'Hide', value: 'hide' },
-              { label: 'Show', value: 'show' },
-              { label: 'Go to', value: 'goto' },
-            ],
-          }"
-          v-model="action"
-        />
-      </div>
-
-      <div v-if="action === 'goto'" class="mt-3">
-        <D9Label :id="`${uid}-target`" label="Go to Block" />
-        <D9Select
-          :id="`${uid}-target`"
-          placeholder="Select a block"
-          v-model="target"
-          size="small"
-          :options="availableTargetBlocks"
-          by="key"
-        >
-          <template #option="{ option }">
-            <span class="inline-flex items-center text-xs">
-              <span
-                class="bg-grey-700 text-white rounded mr-2 px-1 py-px w-16 truncate inline-block text-center"
-                >{{ option.title }}</span
-              >
-              <span class="inline-block truncate">{{ option.text }}</span>
-            </span>
-          </template>
-        </D9Select>
-      </div>
-    </div>
-
-    <ValidationErrors
-      v-if="validation.length > 0"
-      v-bind="{ errors: validation, title: 'Your rule is invalid' }"
-      class="my-2 px-4 pb-4 placeholder:text-grey-400"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { D9Input, D9Select, D9Icon, D9Label, D9Button } from "@deck9/ui";
-import { computed, Ref, ref, useId, watch } from "vue";
-import { useLogic } from "@/stores";
-import { operators } from "@/stores/helpers/logic";
-import { getTextFromHtml } from "@/utils";
-import LabelToggle from "@/components/Factory/Shared/LabelToggle.vue";
-import ValidationErrors from "@/components/ValidationErrors.vue";
-
-const logicStore = useLogic();
-const uid = useId();
-
-const props = defineProps<{
-  rule: FormBlockLogic;
-  index: number;
-}>();
-
-const validation = computed(() => {
-  if (!logicStore.validation[props.index]) {
-    return [];
-  }
-
-  return Object.keys(logicStore.validation[props.index].errors).flatMap(
-    (key) => {
-      return [...logicStore.validation[props.index].errors[key]];
-    },
-  );
-});
-
-const evaluate = ref<FormBlockLogic["evaluate"]>(props.rule.evaluate);
-const action = ref<FormBlockLogic["action"]>(props.rule.action);
-const conditions: Ref<Array<EditableFormBlockBlockLogicCondition>> = ref([]);
-const target = ref<EditableFormBlockBlockLogicCondition["source"] | null>(null);
-
-const getBlockOption = (block: FormBlockModel) => {
-  const text = getTextFromHtml(block.message ?? "");
-
-  return {
-    key: block.uuid,
-    label: text,
-    title: block.title?.length ? block.title : block.uuid,
-    text,
-  };
-};
-
-if (props.rule.action_payload) {
-  const found = logicStore.allBlocks?.find(
-    (block) => block.uuid === props.rule.action_payload,
-  );
-
-  if (found) {
-    target.value = getBlockOption(found);
-  }
-}
-
-// if the loaded rule has already conditions, we should use those
-if (props.rule.conditions) {
-  const editableConditions = props.rule.conditions.map((condition) => {
-    const operator = operators.find((op) => op.key === condition.operator);
-    const source = logicStore.allBlocks?.find(
-      (block) => block.uuid === condition.source,
-    );
-
-    return {
-      ...condition,
-      operator,
-      source: source ? getBlockOption(source) : null,
-    };
-  });
-
-  conditions.value = editableConditions;
-}
-
-const addCondition = () => {
-  conditions.value.push({
-    source: undefined,
-    operator: operators[0],
-    value: "",
-    chainOperator: "and",
-  });
-};
-
-const removeRule = () => {
-  const result = window.confirm(
-    "Are you sure you want to delete this rule? This action cannot be undone.",
-  );
-
-  if (!result) {
-    return;
-  }
-
-  logicStore.removeRule(props.index);
-};
-
-const removeCondition = (index: number) => {
-  conditions.value.splice(index, 1);
-};
-
-const hasConditions = computed(() => {
-  return conditions.value.length > 0;
-});
-
-const availableSourceBlocks = computed(() => {
-  const blocks =
-    props.rule.action === "goto"
-      ? logicStore.availableSourceBlocksWithTarget
-      : logicStore.availableSourceBlocks;
-
-  return blocks.map((block) => {
-    return getBlockOption(block);
-  });
-});
-
-const availableTargetBlocks = computed(() => {
-  return (
-    logicStore.allBlocks
-      ?.filter((block) => block.type !== "group")
-      .map((block) => {
-        return getBlockOption(block);
-      }) ?? []
-  );
-});
-
-watch(
-  [conditions, evaluate, action, target],
-  () => {
-    if (action.value === "hide" || action.value === "show") {
-      evaluate.value = "before";
-    } else if (action.value === "goto") {
-      evaluate.value = "after";
-    }
-
-    logicStore.updateBlockLogic(
-      {
-        ...props.rule,
-        conditions: conditions.value,
-        evaluate: evaluate.value,
-        action: action.value,
-        action_payload: target.value?.key ?? null,
-      },
-      props.index,
-    );
-  },
-  { deep: true },
-);
-</script>
diff --git a/resources/js/components/FieldLabels.test.ts b/resources/js/components/FieldLabels.test.ts
index 8d541b71..ca3e2991 100644
--- a/resources/js/components/FieldLabels.test.ts
+++ b/resources/js/components/FieldLabels.test.ts
@@ -18,9 +18,6 @@ const groupLabels = [
     "Factory/Main/ConfigureFile.vue: Allowed File Types",
     "Factory/Settings/TemplateExport.vue: Template Files",
     "Factory/Settings/partials/ImageUpload.vue: (bound)",
-    "Factory/Sidebar/BlockLogicRule.vue: Action",
-    "Factory/Sidebar/BlockLogicRule.vue: Conditions",
-    "Factory/Sidebar/BlockLogicRule.vue: Rule Execution",
     "Pages/Teams/Create.vue: Team Owner",
 ];
 
diff --git a/resources/js/stores/helpers/logic.ts b/resources/js/stores/helpers/logic.ts
index bfeeb738..07ae4866 100644
--- a/resources/js/stores/helpers/logic.ts
+++ b/resources/js/stores/helpers/logic.ts
@@ -1,14 +1,3 @@
-export const operators: Array<
-    EditableFormBlockBlockLogicCondition["operator"]
-> = [
-    { id: "equals", key: "equals", label: "is equal to" },
-    { id: "equalsNot", key: "equalsNot", label: "is not equal to" },
-    { id: "contains", key: "contains", label: "contains" },
-    { id: "containsNot", key: "containsNot", label: "does not contain" },
-    { id: "isLowerThan", key: "isLowerThan", label: "is lower than" },
-    { id: "isGreaterThan", key: "isGreaterThan", label: "is greater than" },
-];
-
 // rule values are text, while rating, scale and number answers are numbers
 const asText = (value: unknown): string => String(value ?? "");
 
@@ -160,13 +149,3 @@ export function evaluateGotoLogic(
 
     return null;
 }
-
-export function transformConditionForBackend(
-    condition: EditableFormBlockBlockLogicCondition,
-): FormBlockLogicCondition {
-    return {
-        ...condition,
-        source: condition.source?.key,
-        operator: condition.operator.key,
-    };
-}
diff --git a/resources/js/stores/logic.ts b/resources/js/stores/logic.ts
index d41e1387..6e3671a7 100644
--- a/resources/js/stores/logic.ts
+++ b/resources/js/stores/logic.ts
@@ -1,6 +1,4 @@
-import { useForm } from "@/stores";
 import { defineStore } from "pinia";
-import { findAllBlocksBeforeTarget } from "./helpers/queue";
 import { useNotice } from "./notice";
 
 import {
@@ -9,70 +7,19 @@ import {
     callDeleteFormBlockLogic,
 } from "@/api/logics";
 
-import { transformConditionForBackend } from "./helpers/logic";
-
+// the block whose rules are saved or removed
 interface LogicStore {
     block: FormBlockModel | null;
-    validation: ValidationError[];
-    isShowingLogicEditor: boolean;
-    hideRule: FormBlockLogic | null;
-    backup: FormBlockLogic[] | null;
 }
 
 export const useLogic = defineStore("logic", {
     state: (): LogicStore => {
         return {
             block: null,
-            isShowingLogicEditor: false,
-            hideRule: null,
-            validation: [],
-            backup: null,
         };
     },
 
     actions: {
-        showLogicEditor(block: FormBlockModel) {
-            this.block = block;
-            this.backupLogic();
-            this.isShowingLogicEditor = true;
-        },
-
-        hideLogicEditor() {
-            this.block = null;
-            this.isShowingLogicEditor = false;
-        },
-
-        backupLogic() {
-            this.backup = this.block?.logics ?? null;
-        },
-
-        restoreLogic() {
-            if (!this.block) {
-                return;
-            }
-
-            this.block.logics = this.backup ?? undefined;
-        },
-
-        addRule() {
-            if (!this.block) {
-                return;
-            }
-
-            if (!this.block.logics) {
-                this.block.logics = [];
-            }
-
-            this.block.logics.push({
-                form_block_id: this.block.id,
-                name: "Rule #" + (this.block.logics.length + 1),
-                action: "hide",
-                action_payload: null,
-                evaluate: "before",
-                conditions: [],
-            });
-        },
-
         async removeRule(index: number) {
             if (!this.block || !this.block.logics) {
                 return;
@@ -99,46 +46,6 @@ export const useLogic = defineStore("logic", {
             }
         },
 
-        async saveBlockLogic() {
-            if (!this.block || !this.block.logics) {
-                return;
-            }
-
-            // reset validation before each request
-            this.validation = [];
-
-            const results = await Promise.allSettled(
-                this.block.logics.map((logic, index) =>
-                    this.saveSingleRule(logic).then((result) => ({
-                        result,
-                        index,
-                    })),
-                ),
-            );
-
-            const failedSaves = results
-                .map((result, index) => ({ ...result, originalIndex: index }))
-                .filter(
-                    (
-                        result,
-                    ): result is PromiseRejectedResult & {
-                        originalIndex: number;
-                    } => result.status === "rejected",
-                );
-
-            if (failedSaves.length > 0) {
-                failedSaves.forEach((failure) => {
-                    this.validation[failure.originalIndex] =
-                        failure.reason.response.data;
-                });
-            }
-
-            return {
-                failed: failedSaves.length,
-                totalRules: this.block.logics.length,
-            };
-        },
-
         async saveSingleRule(logic: FormBlockLogic) {
             if (!this.block) {
                 throw new Error("Block is not defined");
@@ -173,59 +80,5 @@ export const useLogic = defineStore("logic", {
                 throw error;
             }
         },
-
-        updateBlockLogic(logic: FormBlockLogic, index: number) {
-            if (!this.block) {
-                return;
-            }
-
-            if (!this.block.logics) {
-                this.block.logics = [];
-            }
-
-            const transformedConditions = logic.conditions.map((c) =>
-                transformConditionForBackend(c),
-            );
-
-            logic.conditions = transformedConditions;
-
-            this.block.logics[index] = logic;
-        },
-    },
-
-    getters: {
-        allBlocks(): Array<FormBlockModel> | null {
-            const formStore = useForm();
-
-            return formStore.blocks;
-        },
-
-        availableSourceBlocksWithTarget(state): Array<FormBlockModel> {
-            const formStore = useForm();
-
-            if (!state.block?.uuid) {
-                return [];
-            }
-
-            return findAllBlocksBeforeTarget(
-                formStore.blocksTree,
-                state.block.uuid,
-                { filterGroups: true, includeTarget: true },
-            );
-        },
-
-        availableSourceBlocks(state): Array<FormBlockModel> {
-            const formStore = useForm();
-
-            if (!state.block?.uuid) {
-                return [];
-            }
-
-            return findAllBlocksBeforeTarget(
-                formStore.blocksTree,
-                state.block.uuid,
-                { filterGroups: true, includeTarget: false },
-            );
-        },
     },
 });

From 0e895387fd475b045c190b6564521d26aa92a330 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:39:18 +0200
Subject: [PATCH 067/153] fix: reload the form after Back only once the end
 screen save has landed

With several PHP workers the reload could finish before the save, so
Settings showed the old headline and its Save wrote it back. A visit
started while waiting still wins over the late reload.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Settings.test.ts     | 21 ++++++++-
 .../Factory/Document/EndScreenBlock.test.ts   | 31 +++++++++++++
 .../Factory/Document/EndScreenBlock.vue       |  6 ++-
 resources/js/utils/useFreshFormAfterBack.ts   | 44 ++++++++++++++-----
 4 files changed, 87 insertions(+), 15 deletions(-)

diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
index 59b96310..043d4fa4 100644
--- a/resources/js/Pages/Forms/Settings.test.ts
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -1,7 +1,8 @@
-import { mount, VueWrapper } from "@vue/test-utils";
+import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { router } from "@inertiajs/vue3";
 import Settings from "./Settings.vue";
+import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
 
 vi.mock("@inertiajs/vue3", async (importOriginal) => ({
     ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
@@ -43,12 +44,13 @@ describe("settings page from history", () => {
         wrapper = undefined;
     });
 
-    it("loads the form again when browser Back brings the page back", () => {
+    it("loads the form again when browser Back brings the page back", async () => {
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
 
         mountSettings();
+        await flushPromises();
 
         expect(router.visit).toHaveBeenCalledWith(window.location.href, {
             only: ["form"],
@@ -70,6 +72,21 @@ describe("settings page from history", () => {
         expect(router.visit).not.toHaveBeenCalled();
     });
 
+    it("skips the reload when you go elsewhere while a save on Back is on its way", async () => {
+        let landed = () => {};
+        finishBeforeReload(new Promise<void>((resolve) => (landed = resolve)));
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+
+        mountSettings();
+        onVisit(new CustomEvent("inertia:before"));
+        landed();
+        await flushPromises();
+
+        expect(router.visit).not.toHaveBeenCalled();
+    });
+
     it("loads nothing more when only the tab in the address changes", () => {
         window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
 
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 39177729..6c9b8fc0 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -2,9 +2,11 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { AxiosError, AxiosResponse } from "axios";
 import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { router } from "@inertiajs/vue3";
 import { callUpdateForm } from "@/api/forms";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
 import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
 import EndScreenBlock from "./EndScreenBlock.vue";
 
@@ -157,6 +159,35 @@ describe("the end screen in the document", () => {
         });
     });
 
+    it("lets the next page reload the form only after the save made on Back", async () => {
+        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        let answer = () => {};
+        vi.mocked(callUpdateForm).mockImplementation(
+            (_, values) =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...useForm().form, ...values },
+                        } as AxiosResponse);
+                }),
+        );
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        // the page Back goes to
+        useFreshFormAfterBack();
+        await flushPromises();
+        expect(visit).not.toHaveBeenCalled();
+
+        answer();
+        await flushPromises();
+        expect(visit).toHaveBeenCalledTimes(1);
+        visit.mockRestore();
+    });
+
     it("saves on its own after a short pause while you type", async () => {
         vi.useFakeTimers();
         try {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index f811ce83..959cf92f 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -140,6 +140,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import Editor from "@/components/Factory/Shared/Editor.vue";
+import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
 import { plainText } from "./questionSummary";
 
 const store = useForm();
@@ -209,8 +210,9 @@ const leave = (event: FocusEvent) => {
   }
 };
 
-// browser Back moves no focus; the old page stays until the next one has loaded
-useEventListener(window, "popstate", () => save.flush());
+// browser Back moves no focus; the old page stays until the next one has loaded,
+// and that page waits for this save before it loads the form again
+useEventListener(window, "popstate", () => finishBeforeReload(save.flush()));
 
 const open = async () => {
   workbench.clearWorkbench();
diff --git a/resources/js/utils/useFreshFormAfterBack.ts b/resources/js/utils/useFreshFormAfterBack.ts
index abbb0c84..6413d952 100644
--- a/resources/js/utils/useFreshFormAfterBack.ts
+++ b/resources/js/utils/useFreshFormAfterBack.ts
@@ -3,24 +3,46 @@ import { router } from "@inertiajs/vue3";
 // browser Back and Forward show a page with its old props from history; a tab
 // change in the address has no state and keeps the page
 let fromHistory = false;
+// counts page changes, so a late reload can see that the page moved on
+let navigations = 0;
+// a save sent on Back must land before the reload reads the form
+let pendingSave: Promise<unknown> | undefined;
+
 window.addEventListener("popstate", (event) => {
-  fromHistory = event.state !== null;
+    fromHistory = event.state !== null;
+    if (fromHistory) {
+        navigations++;
+    }
 });
 router.on("before", () => {
-  fromHistory = false;
+    fromHistory = false;
+    navigations++;
 });
 
+export function finishBeforeReload(save: Promise<unknown> | undefined) {
+    pendingSave = save;
+}
+
 // call it in a page's setup: loads the form again when the page came from
 // history, so it shows changes made on the other page
 export function useFreshFormAfterBack() {
-  if (!fromHistory) {
-    return;
-  }
+    if (!fromHistory) {
+        return;
+    }
+
+    fromHistory = false;
+    const page = navigations;
+
+    Promise.resolve(pendingSave).finally(() => {
+        // a visit started meanwhile wins
+        if (page !== navigations) {
+            return;
+        }
 
-  fromHistory = false;
-  router.visit(location.href, {
-    only: ["form"],
-    replace: true,
-    preserveScroll: true,
-  });
+        router.visit(location.href, {
+            only: ["form"],
+            replace: true,
+            preserveScroll: true,
+        });
+    });
 }

From 852103e0025b11eb0439a296b3e4fe611cf86a36 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:39:54 +0200
Subject: [PATCH 068/153] feat: say which question the preview shows, and when
 a rule hides the open one
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The heading reads "Preview · question 3". When the open question is hidden
by a rule, the preview stays where it is; a grey line now says why.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/FormPreview.test.ts       | 39 ++++++++++++++-
 .../Factory/Preview/FormPreview.vue           | 50 +++++++++++++++----
 .../Factory/Preview/PreviewFrame.test.ts      | 32 ++++++++++++
 .../Factory/Preview/PreviewFrame.vue          | 28 +++++++++--
 4 files changed, 133 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index 2d5c7ef3..5a786165 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -1,6 +1,6 @@
 import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { useForm } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 import FormPreview from "./FormPreview.vue";
 import PreviewToggle from "./PreviewToggle.vue";
 
@@ -21,16 +21,23 @@ const screen = (wide: boolean) =>
         removeEventListener() {},
     }));
 
+const PreviewFrame = { props: ["shown", "missed"], template: "<iframe />" };
+
 const mountPreview = (open = true) =>
     mount(FormPreview, {
         props: { modelValue: open },
         attachTo: document.body,
-        global: { stubs: { PreviewFrame: { template: "<iframe />" } } },
+        global: { stubs: { PreviewFrame } },
     });
 
 enableAutoUnmount(afterEach);
 
 describe("the preview panel", () => {
+    afterEach(() => {
+        useForm().$reset();
+        useWorkbench().$reset();
+    });
+
     it("sits beside the document on a desktop", () => {
         screen(true);
         const wrapper = mountPreview();
@@ -90,6 +97,34 @@ describe("the preview panel", () => {
         expect(document.querySelector("iframe")).not.toBeNull();
     });
 
+    it("says which question it shows, and when a rule hides the open one", async () => {
+        screen(true);
+        const blocks = [
+            { uuid: "q1", type: "input-short" },
+            { uuid: "q2", type: "input-short" },
+        ] as FormBlockModel[];
+        useForm().blocks = blocks;
+        useWorkbench().block = blocks[1];
+        const wrapper = mountPreview();
+        const frame = wrapper.findComponent(PreviewFrame);
+
+        frame.vm.$emit("update:shown", "q1");
+        await flushPromises();
+        expect(wrapper.get("#preview-heading").text()).toBe("Preview · question 1");
+        expect(wrapper.text()).not.toContain("hidden by a rule");
+
+        frame.vm.$emit("update:missed", "q2");
+        await flushPromises();
+        expect(wrapper.get("aside").text()).toContain(
+            "Question 2 is hidden by a rule, so the preview can't jump to it.",
+        );
+
+        // once another question is open, the line goes
+        useWorkbench().block = blocks[0];
+        await flushPromises();
+        expect(wrapper.text()).not.toContain("hidden by a rule");
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 152612ed..eb33e0cd 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -6,10 +6,16 @@
     class="flex w-[380px] flex-none flex-col items-center gap-3 overflow-y-auto border-l border-grey-200 bg-grey-100 py-4"
   >
     <h2 id="preview-heading" class="w-80 text-xs font-semibold text-grey-600">
-      Preview
+      {{ heading }}
     </h2>
-    <p v-if="isEmpty" :class="emptyText">Add a question to see it here.</p>
-    <PreviewFrame v-else />
+    <p v-if="hiddenNumber" class="w-80 max-w-full text-xs text-grey-600">
+      Question {{ hiddenNumber }} is hidden by a rule, so the preview can't jump
+      to it.
+    </p>
+    <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
+      Add a question to see it here.
+    </p>
+    <PreviewFrame v-else v-model:shown="shown" v-model:missed="missed" />
   </aside>
 
   <!-- tablet and phone: over the document; closing it keeps it mounted, so focus goes back to Preview -->
@@ -19,9 +25,9 @@
       class="fixed inset-y-0 right-0 flex w-full flex-col items-center gap-3 overflow-y-auto bg-grey-100 px-4 pb-4 pt-2 shadow-xl sm:w-[380px] sm:px-0"
     >
       <div class="flex w-80 max-w-full items-center justify-between">
-        <DialogTitle class="text-xs font-semibold text-grey-600"
-          >Preview</DialogTitle
-        >
+        <DialogTitle class="text-xs font-semibold text-grey-600">{{
+          heading
+        }}</DialogTitle>
         <button
           type="button"
           class="-mr-3 flex h-11 w-11 items-center justify-center rounded-md text-grey-600 hover:bg-grey-200 hover:text-grey-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
@@ -31,8 +37,14 @@
           <D9Icon name="close" aria-hidden="true" />
         </button>
       </div>
-      <p v-if="isEmpty" :class="emptyText">Add a question to see it here.</p>
-      <PreviewFrame v-else />
+      <p v-if="hiddenNumber" class="w-80 max-w-full text-xs text-grey-600">
+        Question {{ hiddenNumber }} is hidden by a rule, so the preview can't
+        jump to it.
+      </p>
+      <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
+        Add a question to see it here.
+      </p>
+      <PreviewFrame v-else v-model:shown="shown" v-model:missed="missed" />
     </DialogPanel>
   </Dialog>
 </template>
@@ -41,16 +53,32 @@
 import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
 import { D9Icon } from "@deck9/ui";
 import { useMediaQuery } from "@vueuse/core";
-import { computed, watch } from "vue";
-import { useForm } from "@/stores";
+import { computed, ref, watch } from "vue";
+import { useForm, useWorkbench } from "@/stores";
+import { questionNumbers } from "@/components/Factory/Document/questionSummary";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
 
 const store = useForm();
+const workbench = useWorkbench();
 // loaded without questions (null while they load): a blank frame looks broken
 const isEmpty = computed(() => store.blocks?.length === 0);
-const emptyText = "w-80 max-w-full text-sm text-grey-600";
+
+// numbered as in the document
+const numbers = computed(() => questionNumbers(store.blocks ?? []));
+const shown = ref<string | null>(null);
+const missed = ref<string | null>(null);
+const heading = computed(() => {
+  const number = shown.value && numbers.value[shown.value];
+  return number ? `Preview · question ${number}` : "Preview";
+});
+// the open question, when the preview couldn't go to it (a group has no number)
+const hiddenNumber = computed(() =>
+  missed.value && missed.value === workbench.block?.uuid
+    ? numbers.value[missed.value]
+    : undefined,
+);
 
 const isWide = useMediaQuery("(min-width: 1280px)");
 // a narrower window or a turned tablet must not pop the panel over the document
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index a5574d87..d484844a 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -119,6 +119,38 @@ describe("the preview frame", () => {
         );
     });
 
+    it("tells which question the preview shows", () => {
+        const wrapper = mountFrame();
+
+        fromFrame(wrapper, { type: "input:preview:block", block: "q1uuid" });
+        fromFrame(wrapper, { type: "input:preview:block", block: "q2uuid" });
+
+        expect(wrapper.emitted("update:shown")).toEqual([["q1uuid"], ["q2uuid"]]);
+    });
+
+    it("tells when the preview doesn't go to the open question, as when a rule hides it", async () => {
+        vi.useFakeTimers();
+        const wrapper = mountFrame();
+        fromFrame(wrapper, { type: "input:preview:block", block: "q1uuid" });
+        const missed = () => wrapper.emitted("update:missed")?.at(-1)?.[0] ?? null;
+
+        // the preview moves: nothing missed
+        useWorkbench().block = second;
+        await nextTick();
+        fromFrame(wrapper, { type: "input:preview:block", block: "q2uuid" });
+        vi.advanceTimersByTime(500);
+        expect(missed()).toBeNull();
+
+        // it stays
+        useWorkbench().block = first;
+        await nextTick();
+        vi.advanceTimersByTime(499);
+        expect(missed()).toBeNull();
+        vi.advanceTimersByTime(1);
+        expect(missed()).toBe("q1uuid");
+        vi.useRealTimers();
+    });
+
     it.each([
         ["another origin", { origin: "https://evil.example" }, {}],
         ["another window", { source: window }, {}],
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index 474430fd..c21d5272 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -10,12 +10,16 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useForm, useLogic, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import type { PreviewMessage } from "@/forms/classic/usePreviewMessages";
 
+// the question the preview shows, and an open one it didn't go to
+const shown = defineModel<string | null>("shown", { default: null });
+const missed = defineModel<string | null>("missed", { default: null });
+
 const store = useForm();
 const workbench = useWorkbench();
 const origin = window.location.origin;
@@ -41,6 +45,19 @@ let followed: string | null = null;
 const send = (message: PreviewMessage) =>
   frame.value?.contentWindow?.postMessage(message, origin);
 
+// a running preview moves at once; when it doesn't, a rule hides the question
+let waiting: ReturnType<typeof setTimeout> | undefined;
+const goto = (block: string) => {
+  send({ type: "input:preview:goto", block });
+  clearTimeout(waiting);
+  missed.value = null;
+
+  if (started && block !== shown.value) {
+    waiting = setTimeout(() => (missed.value = block), 500);
+  }
+};
+onBeforeUnmount(() => clearTimeout(waiting));
+
 // the questions as the preview loaded them: a save that changed nothing,
 // like the one when a card opens, keeps the preview and its answers;
 // the server sends empty settings as [], a card saves them as {}
@@ -67,6 +84,7 @@ const reload = () => {
   src.value = url();
   loads.value++;
   started = false;
+  clearTimeout(waiting);
 };
 // every save that works clears its error; rules save on their own
 useNotice().$onAction(({ name, after }) => {
@@ -80,7 +98,7 @@ watch(
   () => workbench.block?.uuid,
   (block) => {
     if (block && block !== followed) {
-      send({ type: "input:preview:goto", block });
+      goto(block);
     }
     followed = null;
   },
@@ -99,12 +117,16 @@ useEventListener(window, "message", async (event: MessageEvent) => {
     return;
   }
 
+  shown.value = data.block;
+  clearTimeout(waiting);
+  missed.value = null;
+
   // where it starts isn't a move: the open block may be a group or a hidden question,
   // or the preview loaded after the owner opened another one
   if (!started) {
     started = true;
     if (workbench.block && workbench.block.uuid !== data.block) {
-      send({ type: "input:preview:goto", block: workbench.block.uuid });
+      goto(workbench.block.uuid);
     }
     return;
   }

From 8bef14d5e9071614160f87de02d36581c9ddbfae Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:40:12 +0200
Subject: [PATCH 069/153] docs: add changelog line for #274

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c3bb6e06..f149ec3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   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. (#268)
+-   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 
 ### Fixed
 

From c4578461b6398a97af42f28aef1a3f10f6de5329 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:40:24 +0200
Subject: [PATCH 070/153] docs: add moving questions to the changelog line
 (#275)

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 1ba371a3..2e754187 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. (#268, #272)
+-   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)
 
 ### Fixed
 

From e710ffdd1ac4b51b3fbf5fc3aa3d2c580984e3ef Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:42:30 +0200
Subject: [PATCH 071/153] docs: add the type picker to the changelog (#276)

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ba371a3..e9ae3a85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The API can copy a question (`POST /api/blocks/{block}/duplicate`) with its text, settings, answers and Required, but not its rules. The copy goes right after the original. (#262)
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
+-   Add a question right where you need it: between questions, from a question's menu or with "/" in an empty question. A picker groups the answer types as Text, Choice, Rating, Other and Content, and the new question opens ready to type. The answer types have new names, like Single choice, Short text and Text only. (#276)
 
 ### Changed
 

From 20e5418dfa2c634469b6747d67f31a4ecb6302f1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:42:35 +0200
Subject: [PATCH 072/153] fix: fit Outline and Preview in the phone's count row

With both buttons the row needs about 376 px but has 296 px at 360. Below
sm both are now 44 px icon buttons, their labels come back from sm, and
Preview looks like Outline beside it. Clicks land on the buttons, so focus
can go back to them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         |  6 +++--
 resources/js/Pages/Forms/Edit.vue             | 24 ++++++++++---------
 .../Factory/Document/FormDocument.test.ts     | 18 ++++++++++++++
 .../Factory/Document/FormDocument.vue         |  8 ++++---
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index d856596a..6f64702f 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -136,9 +136,11 @@ describe("editor loading", () => {
         // a click on the text would land on a span, which the closing dialog
         // can't focus again: the button's inside lets clicks through to it
         expect(preview?.classes()).toContain("[&_*]:pointer-events-none");
-        // 32 px high, the tap area reaches 6 px above and below
+        // a 44 px icon below sm, so Outline fits beside it; the label from sm
         expect(preview?.classes()).toEqual(
-            expect.arrayContaining(["before:absolute", "before:-inset-y-1.5"]),
+            expect.arrayContaining(["h-11", "w-11", "sm:w-auto"]),
         );
+        expect(preview?.get("span").classes()).toEqual(["sr-only", "sm:not-sr-only"]);
+        expect(preview?.attributes("aria-haspopup")).toBe("dialog");
     });
 });
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index 8042f59b..b4fb4f77 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -2,18 +2,20 @@
   <app-layout title="Edit Form" limit-height>
     <template #preview><PreviewToggle v-model="isPreviewing" /></template>
     <FormDocument :status="status" @retry="loadBlocks">
-      <!-- a phone's top bar has no room for Preview; a click inside lands on
-        the button, so closing the preview puts focus back on it;
-        an invisible edge makes the tap area 44 px high -->
+      <!-- a phone's top bar has no room for Preview; it looks like Outline beside it,
+        an icon below sm; a click inside lands on the button, so closing the
+        preview puts focus back on it -->
       <template #actions>
-        <D9Button
-          class="lg:hidden [&_*]:pointer-events-none before:absolute before:inset-x-0 before:-inset-y-1.5 before:content-['']"
-          label="Preview"
-          color="light"
-          icon="eye"
-          icon-position="left"
+        <button
+          type="button"
+          class="flex h-11 w-11 items-center justify-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:w-auto lg:hidden [&_*]:pointer-events-none"
+          aria-haspopup="dialog"
+          :aria-expanded="isPreviewing"
           @click="isPreviewing = true"
-        />
+        >
+          <D9Icon name="eye" aria-hidden="true" />
+          <span class="sr-only sm:not-sr-only">Preview</span>
+        </button>
       </template>
     </FormDocument>
     <FormPreview v-model="isPreviewing" />
@@ -28,7 +30,7 @@ import PreviewToggle from "@/components/Factory/Preview/PreviewToggle.vue";
 import { useForm, useWorkbench } from "@/stores";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { useMediaQuery } from "@vueuse/core";
-import { D9Button } from "@deck9/ui";
+import { D9Icon } from "@deck9/ui";
 
 const props = defineProps<{
   form: FormModel;
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 072f8a9f..a058da7e 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -63,4 +63,22 @@ describe("the form document", () => {
         expect(useWorkbench().putOnWorkbench).toHaveBeenCalledWith(blocks[1]);
         expect(scrolled).toHaveBeenCalledWith("row-b2", "start");
     });
+
+    it("puts Outline and the page's actions side by side, as 44 px icons below sm", () => {
+        useForm().blocks = blocks;
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            slots: { actions: "<button type='button'>Preview</button>" },
+            global: { stubs },
+        });
+
+        const outline = wrapper
+            .findAll("button")
+            .find((button) => button.text() === "Outline");
+        expect(outline?.classes()).toEqual(
+            expect.arrayContaining(["h-11", "w-11", "sm:w-auto"]),
+        );
+        expect(outline?.get("span").classes()).toEqual(["sr-only", "sm:not-sr-only"]);
+        expect(outline?.element.nextElementSibling?.textContent).toBe("Preview");
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 0ea0d03a..0745f90e 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -27,17 +27,19 @@
           <div class="mb-4 flex items-center justify-between gap-2 pl-12">
             <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
             <div class="flex gap-2">
-              <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view -->
+              <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view;
+                below sm an icon, so Preview fits beside it; clicks land on the button,
+                so focus can go back to it -->
               <button
                 v-if="store.hasBlocks"
                 type="button"
-                class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:absolute lg:h-8 lg:left-4 lg:top-3 lg:z-10 xl:hidden"
+                class="flex h-11 w-11 items-center justify-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:w-auto lg:absolute lg:h-8 lg:left-4 lg:top-3 lg:z-10 xl:hidden [&_*]:pointer-events-none"
                 aria-haspopup="dialog"
                 :aria-expanded="outlineOpen"
                 @click="outlineOpen = true"
               >
                 <D9Icon name="list-ul" aria-hidden="true" />
-                Outline
+                <span class="sr-only sm:not-sr-only">Outline</span>
               </button>
               <slot name="actions" />
             </div>

From 7e08a5e7ae42ebbecee90fa2d91a870b631a4d00 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:43:09 +0200
Subject: [PATCH 073/153] feat: open the editor's preview from the phone's form
 menu

In the editor, the form menu's Preview now opens the preview panel at the
open question, as the Preview button does. That button scrolls away on a
long form; the menu stays in reach. Other pages keep the new tab in preview
mode.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.vue             |  4 ++-
 .../js/components/Factory/TopBar/FormMenu.vue | 17 +++++++++---
 .../Factory/TopBar/FormTopBar.test.ts         | 26 +++++++++++++++++++
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index b4fb4f77..d558342b 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -28,7 +28,7 @@ import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import FormPreview from "@/components/Factory/Preview/FormPreview.vue";
 import PreviewToggle from "@/components/Factory/Preview/PreviewToggle.vue";
 import { useForm, useWorkbench } from "@/stores";
-import { onBeforeUnmount, onMounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, provide, ref } from "vue";
 import { useMediaQuery } from "@vueuse/core";
 import { D9Icon } from "@deck9/ui";
 
@@ -41,6 +41,8 @@ const workbench = useWorkbench();
 const status = ref<"loading" | "failed" | "loaded">("loading");
 // on a desktop the preview sits beside the document, so it shows at once
 const isPreviewing = ref(useMediaQuery("(min-width: 1280px)").value);
+// the form menu's Preview, for when the button above the questions scrolled away
+provide("openPreview", () => (isPreviewing.value = true));
 
 const loadBlocks = async () => {
   status.value = "loading";
diff --git a/resources/js/components/Factory/TopBar/FormMenu.vue b/resources/js/components/Factory/TopBar/FormMenu.vue
index b04f6f2a..916fd14b 100644
--- a/resources/js/components/Factory/TopBar/FormMenu.vue
+++ b/resources/js/components/Factory/TopBar/FormMenu.vue
@@ -15,9 +15,18 @@
         <D9Icon class="flex-none" name="chevron-down" />
       </span>
     </template>
-    <!-- from lg the bar has Preview; preview mode stores no answers -->
+    <!-- from lg the bar has Preview; the editor opens its preview at the open
+      question, other pages the form in preview mode: neither stores answers -->
     <D9MenuLink
-      v-if="!isLarge"
+      v-if="!isLarge && openPreview"
+      as="button"
+      type="button"
+      :class="menuItem"
+      label="Preview"
+      @click="openPreview"
+    />
+    <D9MenuLink
+      v-else-if="!isLarge"
       as="a"
       :href="`${store.formUrl}?preview=1`"
       target="_blank"
@@ -104,7 +113,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { inject, ref } from "vue";
 import { router } from "@inertiajs/vue3";
 import { useMediaQuery } from "@vueuse/core";
 import { D9Button, D9Icon, D9Menu, D9MenuLink } from "@deck9/ui";
@@ -113,6 +122,8 @@ import FormNameDialog from "@/components/Dashboard/FormNameDialog.vue";
 import { useForm } from "@/stores";
 
 const store = useForm();
+// the editor page provides it
+const openPreview = inject<(() => void) | null>("openPreview", null);
 // Tailwind's lg
 const isLarge = useMediaQuery("(min-width: 1024px)");
 
diff --git a/resources/js/components/Factory/TopBar/FormTopBar.test.ts b/resources/js/components/Factory/TopBar/FormTopBar.test.ts
index d42527a7..42fb95a4 100644
--- a/resources/js/components/Factory/TopBar/FormTopBar.test.ts
+++ b/resources/js/components/Factory/TopBar/FormTopBar.test.ts
@@ -59,6 +59,7 @@ const mountOnPage = async (
     component,
     form: Partial<FormModel> = {},
     blocks: FormBlockModel[] | null = [],
+    provide: Record<string, unknown> = {},
 ) => {
     history.replaceState(null, "", "/forms.edit");
 
@@ -71,6 +72,7 @@ const mountOnPage = async (
         global: {
             mocks: { $page, route },
             stubs: { Link: inertiaLink },
+            provide,
         },
     });
     // the test pinia stubs actions, so set the state directly
@@ -404,6 +406,30 @@ describe("form top bar", () => {
         delete (window as Partial<Window>).matchMedia;
     });
 
+    it("opens the editor's preview from the form menu on phones", async () => {
+        window.matchMedia = (() => ({
+            matches: false,
+            addEventListener() {},
+            removeEventListener() {},
+        })) as unknown as typeof window.matchMedia;
+        const openPreview = vi.fn();
+        const wrapper = await mountOnPage(FormTopBar, {}, [], { openPreview });
+        await wrapper.get('[aria-haspopup="menu"]').trigger("click");
+        await flushPromises();
+
+        const item = [...document.querySelectorAll('[role="menuitem"]')].find((i) =>
+            text(i)?.startsWith("Preview"),
+        ) as HTMLElement;
+        // it stays in the editor: no new tab
+        expect(item.tagName).toBe("BUTTON");
+        expect(text(item)).toBe("Preview");
+        item.click();
+        expect(openPreview).toHaveBeenCalledOnce();
+
+        wrapper.unmount();
+        delete (window as Partial<Window>).matchMedia;
+    });
+
     it("gives the buttons of the publish, rename and archive dialogs 44 px on phones", async () => {
         const wrapper = await mountOnPage(FormTopBar, {}, [block("q1", "<p>Your name?</p>")]);
         const menuItem = (label: string) =>

From 3ac5e2d78f335de47246fd4c45f1c2b2edf73b06 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:47:04 +0200
Subject: [PATCH 074/153] fix: reload the preview after deleting a question, a
 choice or a rule

The stores clear the save error before they take the item out, so the
reload still saw the old list and kept the preview. It now waits a tick.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/PreviewFrame.test.ts          | 15 +++++++++++++++
 .../components/Factory/Preview/PreviewFrame.vue   |  7 ++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index d484844a..7f1a4d03 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -179,12 +179,27 @@ describe("the preview frame", () => {
         useForm().blocks![1].message = "<p>Changed</p>";
         await save();
         await nextTick();
+        await nextTick();
 
         const iframe = wrapper.get("iframe");
         expect(iframe.element).not.toBe(before);
         expect(iframe.attributes("src")).toBe("/form1?preview=1&block=q2uuid");
     });
 
+    it("loads the form again after a delete, which takes the question out after its save", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+        const wrapper = mountFrame(first, pinia);
+        const before = wrapper.get("iframe").element;
+
+        useNotice().clearSaveError("deleteBlock:2");
+        useForm().blocks!.splice(1, 1);
+        await nextTick();
+        await nextTick();
+
+        expect(wrapper.get("iframe").element).not.toBe(before);
+    });
+
     it("keeps running after a save that changed nothing", async () => {
         const pinia = createPinia();
         setActivePinia(pinia);
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index c21d5272..30b67481 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -86,12 +86,13 @@ const reload = () => {
   started = false;
   clearTimeout(waiting);
 };
-// every save that works clears its error; rules save on their own
+// every save that works clears its error; rules save on their own;
+// a delete splices after it, so wait a tick to see the new list
 useNotice().$onAction(({ name, after }) => {
-  if (name === "clearSaveError") after(reload);
+  if (name === "clearSaveError") after(() => nextTick(reload));
 });
 useLogic().$onAction(({ name, after }) => {
-  if (name === "saveBlockLogic") after(reload);
+  if (name === "saveBlockLogic") after(() => nextTick(reload));
 });
 
 watch(

From c2b787bff6214d51b5587552be1facdd60a77ae4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:49:53 +0200
Subject: [PATCH 075/153] fix: reload the form when a page loads while an end
 screen save is on its way

A click on a link right after typing could load Settings before the save
landed, and its Save wrote the old headline back. Every end screen save
is now tracked; a page that loads meanwhile waits for it, then loads the
form again. The helper is renamed useFreshForm.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.vue             |  4 +--
 resources/js/Pages/Forms/Settings.test.ts     | 19 +++++++----
 resources/js/Pages/Forms/Settings.vue         |  4 +--
 .../Factory/Document/EndScreenBlock.test.ts   | 34 +++++++++++++++++--
 .../Factory/Document/EndScreenBlock.vue       | 10 +++---
 ...eFreshFormAfterBack.ts => useFreshForm.ts} | 28 ++++++++++-----
 6 files changed, 72 insertions(+), 27 deletions(-)
 rename resources/js/utils/{useFreshFormAfterBack.ts => useFreshForm.ts} (55%)

diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index d85caa80..8726a6de 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -8,7 +8,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import FormDocument from "@/components/Factory/Document/FormDocument.vue";
 import { useForm, useWorkbench } from "@/stores";
-import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
+import { useFreshForm } from "@/utils/useFreshForm";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = defineProps<{
@@ -63,7 +63,7 @@ onMounted(async () => {
   await store.getFormBlockMapping();
 });
 
-useFreshFormAfterBack();
+useFreshForm();
 workbench.clearWorkbench();
 store.$patch({
   form: props.form,
diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
index 043d4fa4..037bf699 100644
--- a/resources/js/Pages/Forms/Settings.test.ts
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -2,7 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { router } from "@inertiajs/vue3";
 import Settings from "./Settings.vue";
-import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
+import { trackFormSave } from "@/utils/useFreshForm";
 
 vi.mock("@inertiajs/vue3", async (importOriginal) => ({
     ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
@@ -59,7 +59,7 @@ describe("settings page from history", () => {
         });
     });
 
-    it("loads nothing more on a normal visit, also one after a Back", () => {
+    it("loads nothing more on a normal visit, also one after a Back", async () => {
         // a Back to another page, then a link to Settings
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
@@ -68,29 +68,34 @@ describe("settings page from history", () => {
         onVisit(new CustomEvent("inertia:before"));
 
         mountSettings();
+        await flushPromises();
 
         expect(router.visit).not.toHaveBeenCalled();
     });
 
-    it("skips the reload when you go elsewhere while a save on Back is on its way", async () => {
+    it("lets a visit started while a save is on its way win, and its page loads the form after the save", async () => {
         let landed = () => {};
-        finishBeforeReload(new Promise<void>((resolve) => (landed = resolve)));
+        trackFormSave(new Promise<void>((resolve) => (landed = resolve)));
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
-
         mountSettings();
+
+        // you go to another page before the save lands
         onVisit(new CustomEvent("inertia:before"));
+        wrapper?.unmount();
+        mountSettings();
         landed();
         await flushPromises();
 
-        expect(router.visit).not.toHaveBeenCalled();
+        expect(router.visit).toHaveBeenCalledTimes(1);
     });
 
-    it("loads nothing more when only the tab in the address changes", () => {
+    it("loads nothing more when only the tab in the address changes", async () => {
         window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
 
         mountSettings();
+        await flushPromises();
 
         expect(router.visit).not.toHaveBeenCalled();
     });
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index 90325900..c1aa06dd 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -73,7 +73,7 @@ import Options from "@/components/Factory/Settings/Options.vue";
 import Privacy from "@/components/Factory/Settings/Privacy.vue";
 import TemplateExport from "@/components/Factory/Settings/TemplateExport.vue";
 import { useForm } from "@/stores";
-import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
+import { useFreshForm } from "@/utils/useFreshForm";
 import { onBeforeUnmount, ref } from "vue";
 
 const props = defineProps<{
@@ -123,7 +123,7 @@ if (foundIndex !== -1) {
 }
 
 // after the hash, so the reload keeps the tab
-useFreshFormAfterBack();
+useFreshForm();
 
 onBeforeUnmount(() => {
   store.clearForm();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 6c9b8fc0..4d4b9374 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -6,7 +6,7 @@ import { router } from "@inertiajs/vue3";
 import { callUpdateForm } from "@/api/forms";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
-import { useFreshFormAfterBack } from "@/utils/useFreshFormAfterBack";
+import { useFreshForm } from "@/utils/useFreshForm";
 import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
 import EndScreenBlock from "./EndScreenBlock.vue";
 
@@ -178,7 +178,37 @@ describe("the end screen in the document", () => {
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
         // the page Back goes to
-        useFreshFormAfterBack();
+        useFreshForm();
+        await flushPromises();
+        expect(visit).not.toHaveBeenCalled();
+
+        answer();
+        await flushPromises();
+        expect(visit).toHaveBeenCalledTimes(1);
+        visit.mockRestore();
+    });
+
+    it("lets a page opened by a link while the save is on its way reload the form after it", async () => {
+        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        let answer = () => {};
+        vi.mocked(callUpdateForm).mockImplementation(
+            (_, values) =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...useForm().form, ...values },
+                        } as AxiosResponse);
+                }),
+        );
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        // the link's visit starts, and its page loads
+        document.dispatchEvent(
+            new CustomEvent("inertia:before", { detail: { visit: {} } }),
+        );
+        useFreshForm();
         await flushPromises();
         expect(visit).not.toHaveBeenCalled();
 
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 959cf92f..4e2717c8 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -140,7 +140,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import Editor from "@/components/Factory/Shared/Editor.vue";
-import { finishBeforeReload } from "@/utils/useFreshFormAfterBack";
+import { trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
 
 const store = useForm();
@@ -191,7 +191,8 @@ const save = debounce(async () => {
   }
 
   try {
-    await store.updateForm(changes);
+    // the next page may load before this lands: it loads the form again after
+    await trackFormSave(store.updateForm(changes));
     notice.clearSaveError("saveEndScreen");
   } catch (error) {
     notice.showSaveError(error, "saveEndScreen");
@@ -210,9 +211,8 @@ const leave = (event: FocusEvent) => {
   }
 };
 
-// browser Back moves no focus; the old page stays until the next one has loaded,
-// and that page waits for this save before it loads the form again
-useEventListener(window, "popstate", () => finishBeforeReload(save.flush()));
+// browser Back moves no focus; the old page stays until the next one has loaded
+useEventListener(window, "popstate", () => save.flush());
 
 const open = async () => {
   workbench.clearWorkbench();
diff --git a/resources/js/utils/useFreshFormAfterBack.ts b/resources/js/utils/useFreshForm.ts
similarity index 55%
rename from resources/js/utils/useFreshFormAfterBack.ts
rename to resources/js/utils/useFreshForm.ts
index 6413d952..7bfcf6ff 100644
--- a/resources/js/utils/useFreshFormAfterBack.ts
+++ b/resources/js/utils/useFreshForm.ts
@@ -3,10 +3,12 @@ import { router } from "@inertiajs/vue3";
 // browser Back and Forward show a page with its old props from history; a tab
 // change in the address has no state and keeps the page
 let fromHistory = false;
+// a page asked for while a form save is on its way can get the form from before it
+let askedDuringSave = false;
+let savesOnTheirWay = 0;
+let saves: Promise<unknown> = Promise.resolve();
 // counts page changes, so a late reload can see that the page moved on
 let navigations = 0;
-// a save sent on Back must land before the reload reads the form
-let pendingSave: Promise<unknown> | undefined;
 
 window.addEventListener("popstate", (event) => {
     fromHistory = event.state !== null;
@@ -16,24 +18,32 @@ window.addEventListener("popstate", (event) => {
 });
 router.on("before", () => {
     fromHistory = false;
+    askedDuringSave = savesOnTheirWay > 0;
     navigations++;
 });
 
-export function finishBeforeReload(save: Promise<unknown> | undefined) {
-    pendingSave = save;
+// pages that load meanwhile wait for this save, then load the form again
+export function trackFormSave<T>(save: Promise<T>): Promise<T> {
+    const done = () => savesOnTheirWay--;
+
+    savesOnTheirWay++;
+    save.then(done, done);
+    saves = Promise.allSettled([saves, save]);
+    return save;
 }
 
-// call it in a page's setup: loads the form again when the page came from
-// history, so it shows changes made on the other page
-export function useFreshFormAfterBack() {
-    if (!fromHistory) {
+// call it in a page's setup: loads the form again when the page may show it
+// from before a change, from history or from a save that hadn't landed yet
+export function useFreshForm() {
+    if (!fromHistory && !askedDuringSave) {
         return;
     }
 
     fromHistory = false;
+    askedDuringSave = false;
     const page = navigations;
 
-    Promise.resolve(pendingSave).finally(() => {
+    saves.then(() => {
         // a visit started meanwhile wins
         if (page !== navigations) {
             return;

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 076/153] 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 4088f2f22efb0ac95d17624f5de81ce014979a90 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:24 +0200
Subject: [PATCH 077/153] fix: ask in the app's dialog before removing a rule

Part a now asks before every delete; the old panel's test moves here.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/Rules/BlockRules.test.ts | 19 +++++++++++++++++++
 .../Factory/Document/Rules/RuleEditor.vue     | 15 ++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
index 223f1be2..921c881c 100644
--- a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
@@ -80,6 +80,7 @@ beforeEach(() => {
 const mountRules = (uuid: string) =>
     mount(BlockRules, {
         props: { block: find(uuid), numbers: questionNumbers(blocks) },
+        global: { stubs: { teleport: true } },
         attachTo: document.body,
     });
 
@@ -331,6 +332,24 @@ describe("editing a rule in place", () => {
         );
         expect(editing.value).not.toBeNull();
     });
+
+    it("asks in the app's dialog before it removes a rule", async () => {
+        const logic = useLogic();
+        const wrapper = await edit();
+
+        await button(wrapper, "Remove rule").trigger("click");
+
+        expect(text(wrapper)).toContain("Remove this rule?");
+        expect(logic.removeRule).not.toHaveBeenCalled();
+
+        const confirm = wrapper
+            .findAll("button")
+            .filter((item) => item.text() === "Remove rule")
+            .at(-1)!;
+        await confirm.trigger("click");
+
+        expect(logic.removeRule).toHaveBeenCalledWith(0);
+    });
 });
 
 describe("adding a rule", () => {
diff --git a/resources/js/components/Factory/Document/Rules/RuleEditor.vue b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
index 6d94daaa..b596c8dc 100644
--- a/resources/js/components/Factory/Document/Rules/RuleEditor.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
@@ -185,7 +185,7 @@
         v-if="rule.id !== undefined"
         type="button"
         class="flex h-11 items-center rounded-md px-2 font-semibold sm:h-8 text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-        @click="remove"
+        @click="isAsking = true"
       >
         Remove rule
       </button>
@@ -200,6 +200,15 @@
         @click="save"
       />
     </div>
+
+    <DeleteDialog
+      :show="isAsking"
+      title="Remove this rule?"
+      text="This can't be undone."
+      confirm-label="Remove rule"
+      @close="isAsking = false"
+      @confirm="remove"
+    />
   </div>
 </template>
 
@@ -209,6 +218,7 @@ import truncate from "lodash/truncate";
 import { D9Button, D9Icon, D9Input, D9Select } from "@deck9/ui";
 import { useForm, useLogic } from "@/stores";
 import { findAllBlocksBeforeTarget } from "@/stores/helpers/queue";
+import DeleteDialog from "@/components/Factory/Shared/DeleteDialog.vue";
 import { plainText } from "../questionSummary";
 import { answerKind, answerOptions, operatorsFor } from "./ruleText";
 import { editing, keepSaved, stopEditing } from "./ruleEditing";
@@ -380,7 +390,10 @@ const save = async () => {
   }
 };
 
+const isAsking = ref(false);
+
 const remove = async () => {
+  isAsking.value = false;
   logic.block = props.block;
   const count = props.block.logics?.length ?? 0;
 

From 92c54b56b1f4d6024232bc602b37375d0203a588 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:27 +0200
Subject: [PATCH 078/153] fix: load the form over the API, so a tab picked
 meanwhile stays

After Back, or a page opened while an end screen save was on its way,
the page reloaded itself through Inertia. That reload wrote the old tab
back into the address and remounted Settings on it. Now the page loads
the form over the API and remounts only the open Settings panel.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         | 18 ++++---
 resources/js/Pages/Forms/Settings.test.ts     | 51 +++++++++++++++----
 resources/js/Pages/Forms/Settings.vue         |  7 +--
 .../Factory/Document/EndScreenBlock.test.ts   | 32 +++++++-----
 resources/js/utils/useFreshForm.ts            | 39 ++++++++------
 5 files changed, 100 insertions(+), 47 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 80b8cf80..c3800bde 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -1,9 +1,15 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { router } from "@inertiajs/vue3";
+import { AxiosResponse } from "axios";
+import { callGetForm } from "@/api/forms";
 import Edit from "./Edit.vue";
 import { useForm, useWorkbench } from "@/stores";
 
+vi.mock("@/api/forms", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callGetForm: vi.fn(),
+}));
+
 const form = { uuid: "form1", name: "Customer feedback" } as FormModel;
 const blocks = [
     { id: 1, uuid: "b1", type: "none" },
@@ -128,17 +134,15 @@ describe("editor from history", () => {
     });
 
     it("loads the form again when browser Back brings the editor back", async () => {
-        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+        vi.mocked(callGetForm).mockResolvedValue({
+            data: { ...form, eoc_headline: "Thanks!" },
+        } as AxiosResponse);
         window.dispatchEvent(
             new PopStateEvent("popstate", { state: { component: "x" } }),
         );
 
         await mountEditor(loads(blocks));
 
-        expect(visit).toHaveBeenCalledWith(window.location.href, {
-            only: ["form"],
-            replace: true,
-            preserveScroll: true,
-        });
+        expect(useForm().form?.eoc_headline).toBe("Thanks!");
     });
 });
diff --git a/resources/js/Pages/Forms/Settings.test.ts b/resources/js/Pages/Forms/Settings.test.ts
index 037bf699..30ad825a 100644
--- a/resources/js/Pages/Forms/Settings.test.ts
+++ b/resources/js/Pages/Forms/Settings.test.ts
@@ -1,12 +1,19 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { router } from "@inertiajs/vue3";
+import { AxiosResponse } from "axios";
+import { callGetForm } from "@/api/forms";
+import { useForm } from "@/stores";
 import Settings from "./Settings.vue";
 import { trackFormSave } from "@/utils/useFreshForm";
 
 vi.mock("@inertiajs/vue3", async (importOriginal) => ({
     ...(await importOriginal<typeof import("@inertiajs/vue3")>()),
-    router: { on: vi.fn(), visit: vi.fn() },
+    router: { on: vi.fn() },
+}));
+vi.mock("@/api/forms", async (importOriginal) => ({
+    ...(await importOriginal()),
+    callGetForm: vi.fn(),
 }));
 // its code highlighter needs a global Vue
 vi.mock("@/components/Factory/Settings/Embed.vue", () => ({
@@ -21,7 +28,11 @@ const stubs = {
     AppLayout: { props: ["title"], template: "<main><slot /></main>" },
     Options: true,
     Privacy: true,
-    CompletionPage: true,
+    // like the real one, it copies the form when it loads
+    CompletionPage: {
+        setup: () => ({ headline: useForm().form?.eoc_headline }),
+        template: "<p>{{ headline }}</p>",
+    },
     Appearance: true,
     Embed: true,
     TemplateExport: true,
@@ -37,6 +48,9 @@ const mountSettings = () => {
 describe("settings page from history", () => {
     beforeEach(() => {
         vi.clearAllMocks();
+        vi.mocked(callGetForm).mockResolvedValue({
+            data: form,
+        } as AxiosResponse);
     });
 
     afterEach(() => {
@@ -52,11 +66,7 @@ describe("settings page from history", () => {
         mountSettings();
         await flushPromises();
 
-        expect(router.visit).toHaveBeenCalledWith(window.location.href, {
-            only: ["form"],
-            replace: true,
-            preserveScroll: true,
-        });
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
     it("loads nothing more on a normal visit, also one after a Back", async () => {
@@ -70,7 +80,7 @@ describe("settings page from history", () => {
         mountSettings();
         await flushPromises();
 
-        expect(router.visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
     });
 
     it("lets a visit started while a save is on its way win, and its page loads the form after the save", async () => {
@@ -88,7 +98,7 @@ describe("settings page from history", () => {
         landed();
         await flushPromises();
 
-        expect(router.visit).toHaveBeenCalledTimes(1);
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
     it("loads nothing more when only the tab in the address changes", async () => {
@@ -97,6 +107,27 @@ describe("settings page from history", () => {
         mountSettings();
         await flushPromises();
 
-        expect(router.visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
+    });
+
+    it("keeps the tab you switch to while the form loads again", async () => {
+        let landed = () => {};
+        trackFormSave(new Promise<void>((resolve) => (landed = resolve)));
+        vi.mocked(callGetForm).mockResolvedValue({
+            data: { ...form, eoc_headline: "Thanks!" },
+        } as AxiosResponse);
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        mountSettings();
+
+        const tab = wrapper!.findAll("button[role=tab]")[2];
+        await tab.trigger("click");
+        landed();
+        await flushPromises();
+
+        expect(location.hash).toBe("#completion-page");
+        expect(tab.attributes("aria-selected")).toBe("true");
+        expect(wrapper!.text()).toContain("Thanks!");
     });
 });
diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index c1aa06dd..a8712d4a 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -52,7 +52,7 @@
             </h3>
 
             <div class="mt-6 pb-6">
-              <component :is="item.component" />
+              <component :is="item.component" :key="freshForms" />
             </div>
           </TabPanel>
         </TabPanels>
@@ -122,8 +122,9 @@ if (foundIndex !== -1) {
   tabChanged(0);
 }
 
-// after the hash, so the reload keeps the tab
-useFreshForm();
+// the panels copy the form when they load
+const freshForms = ref(0);
+useFreshForm(() => freshForms.value++);
 
 onBeforeUnmount(() => {
   store.clearForm();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 4d4b9374..b45c9628 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -2,8 +2,7 @@ import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { AxiosError, AxiosResponse } from "axios";
 import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { router } from "@inertiajs/vue3";
-import { callUpdateForm } from "@/api/forms";
+import { callGetForm, callUpdateForm } from "@/api/forms";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import { useFreshForm } from "@/utils/useFreshForm";
@@ -12,6 +11,7 @@ import EndScreenBlock from "./EndScreenBlock.vue";
 
 vi.mock("@/api/forms", async (importOriginal) => ({
     ...(await importOriginal()),
+    callGetForm: vi.fn(),
     callUpdateForm: vi.fn(),
 }));
 
@@ -159,8 +159,13 @@ describe("the end screen in the document", () => {
         });
     });
 
-    it("lets the next page reload the form only after the save made on Back", async () => {
-        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+    it("lets the next page load the form again only after the save made on Back", async () => {
+        vi.mocked(callGetForm).mockImplementation(
+            async () =>
+                ({
+                    data: useForm().form,
+                }) as AxiosResponse,
+        );
         let answer = () => {};
         vi.mocked(callUpdateForm).mockImplementation(
             (_, values) =>
@@ -180,16 +185,20 @@ describe("the end screen in the document", () => {
         // the page Back goes to
         useFreshForm();
         await flushPromises();
-        expect(visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
 
         answer();
         await flushPromises();
-        expect(visit).toHaveBeenCalledTimes(1);
-        visit.mockRestore();
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
-    it("lets a page opened by a link while the save is on its way reload the form after it", async () => {
-        const visit = vi.spyOn(router, "visit").mockImplementation(() => {});
+    it("lets a page opened by a link while the save is on its way load the form again after it", async () => {
+        vi.mocked(callGetForm).mockImplementation(
+            async () =>
+                ({
+                    data: useForm().form,
+                }) as AxiosResponse,
+        );
         let answer = () => {};
         vi.mocked(callUpdateForm).mockImplementation(
             (_, values) =>
@@ -210,12 +219,11 @@ describe("the end screen in the document", () => {
         );
         useFreshForm();
         await flushPromises();
-        expect(visit).not.toHaveBeenCalled();
+        expect(callGetForm).not.toHaveBeenCalled();
 
         answer();
         await flushPromises();
-        expect(visit).toHaveBeenCalledTimes(1);
-        visit.mockRestore();
+        expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
     it("saves on its own after a short pause while you type", async () => {
diff --git a/resources/js/utils/useFreshForm.ts b/resources/js/utils/useFreshForm.ts
index 7bfcf6ff..251dd6b4 100644
--- a/resources/js/utils/useFreshForm.ts
+++ b/resources/js/utils/useFreshForm.ts
@@ -1,4 +1,6 @@
 import { router } from "@inertiajs/vue3";
+import { callGetForm } from "@/api/forms";
+import { useForm } from "@/stores";
 
 // browser Back and Forward show a page with its old props from history; a tab
 // change in the address has no state and keeps the page
@@ -7,7 +9,7 @@ let fromHistory = false;
 let askedDuringSave = false;
 let savesOnTheirWay = 0;
 let saves: Promise<unknown> = Promise.resolve();
-// counts page changes, so a late reload can see that the page moved on
+// counts page changes, so a late form load can see that the page moved on
 let navigations = 0;
 
 window.addEventListener("popstate", (event) => {
@@ -33,8 +35,9 @@ export function trackFormSave<T>(save: Promise<T>): Promise<T> {
 }
 
 // call it in a page's setup: loads the form again when the page may show it
-// from before a change, from history or from a save that hadn't landed yet
-export function useFreshForm() {
+// from before a change, from history or from a save that hadn't landed yet;
+// onFresh remounts the parts that copied the old form
+export function useFreshForm(onFresh?: () => void) {
     if (!fromHistory && !askedDuringSave) {
         return;
     }
@@ -42,17 +45,23 @@ export function useFreshForm() {
     fromHistory = false;
     askedDuringSave = false;
     const page = navigations;
+    const store = useForm();
 
-    saves.then(() => {
-        // a visit started meanwhile wins
-        if (page !== navigations) {
-            return;
-        }
-
-        router.visit(location.href, {
-            only: ["form"],
-            replace: true,
-            preserveScroll: true,
-        });
-    });
+    // a visit started meanwhile wins; the address and the tab stay as they are
+    const formHere = () => (page === navigations ? store.form : null);
+
+    saves
+        .then(() => {
+            const form = formHere();
+            return form && callGetForm(form);
+        })
+        .then((response) => {
+            if (response && formHere()?.uuid === response.data.uuid) {
+                store.form = response.data;
+                onFresh?.();
+            }
+        })
+        // the page keeps the form it came with
+        .catch(() => {});
 }
+

From 2d1b81b357bbeddcc187cfc2395fe94473f2e891 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:33 +0200
Subject: [PATCH 079/153] fix: open the end screen card with the form loaded
 again after Back

The editor no longer remounts when the fresh form lands. A card opened
before that copied the older text, and its next save sent it back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 30 +++++++++++++++++++
 .../Factory/Document/EndScreenBlock.vue       |  3 +-
 resources/js/utils/useFreshForm.ts            |  7 ++++-
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index b45c9628..8fb52a9c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -226,6 +226,36 @@ describe("the end screen in the document", () => {
         expect(callGetForm).toHaveBeenCalledTimes(1);
     });
 
+    it("opens with the form loaded again after Back, not the older one the page came with", async () => {
+        let answer = () => {};
+        vi.mocked(callGetForm).mockImplementation(
+            () =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...form, eoc_headline: "Thanks!" },
+                        } as AxiosResponse);
+                }),
+        );
+        window.dispatchEvent(
+            new PopStateEvent("popstate", { state: { component: "x" } }),
+        );
+        // the page Back goes to
+        useFreshForm();
+        const block = mountBlock();
+        await flushPromises();
+
+        await block.find("button").trigger("click");
+        answer();
+        await vi.waitFor(() =>
+            expect(block.find("#end-screen-headline").exists()).toBe(true),
+        );
+
+        expect(
+            block.get<HTMLInputElement>("#end-screen-headline").element.value,
+        ).toBe("Thanks!");
+    });
+
     it("saves on its own after a short pause while you type", async () => {
         vi.useFakeTimers();
         try {
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 4e2717c8..b2919b4f 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -140,7 +140,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import Editor from "@/components/Factory/Shared/Editor.vue";
-import { trackFormSave } from "@/utils/useFreshForm";
+import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
 
 const store = useForm();
@@ -218,6 +218,7 @@ const open = async () => {
   workbench.clearWorkbench();
   // a change made before it closed may still be on its way
   await save.flush();
+  await freshFormLoaded();
   Object.assign(draft, saved());
   isOpen.value = true;
 
diff --git a/resources/js/utils/useFreshForm.ts b/resources/js/utils/useFreshForm.ts
index 251dd6b4..1eab5cc5 100644
--- a/resources/js/utils/useFreshForm.ts
+++ b/resources/js/utils/useFreshForm.ts
@@ -11,6 +11,7 @@ let savesOnTheirWay = 0;
 let saves: Promise<unknown> = Promise.resolve();
 // counts page changes, so a late form load can see that the page moved on
 let navigations = 0;
+let loading: Promise<unknown> = Promise.resolve();
 
 window.addEventListener("popstate", (event) => {
     fromHistory = event.state !== null;
@@ -50,7 +51,7 @@ export function useFreshForm(onFresh?: () => void) {
     // a visit started meanwhile wins; the address and the tab stay as they are
     const formHere = () => (page === navigations ? store.form : null);
 
-    saves
+    loading = saves
         .then(() => {
             const form = formHere();
             return form && callGetForm(form);
@@ -65,3 +66,7 @@ export function useFreshForm(onFresh?: () => void) {
         .catch(() => {});
 }
 
+// a copy of the form taken before this lands can be older than the page's form
+export function freshFormLoaded() {
+    return loading;
+}

From c82d065947bb81a883fdf3c7b535e07858a6b87a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:45 +0200
Subject: [PATCH 080/153] fix: end a rule's edit when you leave the editor

Coming back showed the pickers again and moved the cursor into them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/Rules/BlockRules.test.ts        | 12 ++++++++++++
 .../components/Factory/Document/Rules/BlockRules.vue |  9 +++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
index 921c881c..8eaacab0 100644
--- a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
@@ -370,6 +370,18 @@ describe("adding a rule", () => {
         expect(owner.logics).toHaveLength(0);
     });
 
+    it("ends when the editor is left, and an unsaved rule goes with it", async () => {
+        const owner = find("q-come");
+        addRule(owner);
+        const wrapper = mountRules("q-come");
+        await wrapper.vm.$nextTick();
+
+        wrapper.unmount();
+
+        expect(editing.value).toBeNull();
+        expect(owner.logics).toHaveLength(0);
+    });
+
     it("hides a group by default", () => {
         const group = find("g-1");
         addRule(group);
diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.vue b/resources/js/components/Factory/Document/Rules/BlockRules.vue
index e97be7b6..9e9dc503 100644
--- a/resources/js/components/Factory/Document/Rules/BlockRules.vue
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.vue
@@ -21,10 +21,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick } from "vue";
+import { computed, nextTick, onBeforeUnmount } from "vue";
 import RuleEditor from "./RuleEditor.vue";
 import RuleLine from "./RuleLine.vue";
-import { editing, editRule, returnFocus } from "./ruleEditing";
+import { editing, editRule, returnFocus, stopEditing } from "./ruleEditing";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -41,6 +41,11 @@ const owner = computed(() =>
 const isEditing = (index: number) =>
   editing.value?.block === props.block.uuid && editing.value.index === index;
 
+// leaving the page ends editing: coming back shows the sentence again
+onBeforeUnmount(() => {
+  if (editing.value?.block === props.block.uuid) stopEditing();
+});
+
 // the cursor goes back to the rule's Edit, or where it was for a dropped rule
 const returnTo = async (index: number) => {
   await nextTick();

From bfb6428c44e601ccc98a3fccb513be91cc7d6a38 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:56:56 +0200
Subject: [PATCH 081/153] docs: say that / picks the empty question's type

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 c2799b9a..4b0b3a78 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The API can copy a question (`POST /api/blocks/{block}/duplicate`) with its text, settings, answers and Required, but not its rules. The copy goes right after the original. (#262)
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
--   Add a question right where you need it: between questions, from a question's menu or with "/" in an empty question. A picker groups the answer types as Text, Choice, Rating, Other and Content, and the new question opens ready to type. The answer types have new names, like Single choice, Short text and Text only. (#276)
+-   Add a question right where you need it: between questions or from a question's menu, and type "/" in an empty question to pick its answer type. A picker groups the answer types as Text, Choice, Rating, Other and Content, and the new question opens ready to type. The answer types have new names, like Single choice, Short text and Text only. (#276)
 
 ### Changed
 

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 082/153] 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 21be8501227ae0dc9265c1d2c7594c2b6547c477 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:58:03 +0200
Subject: [PATCH 083/153] docs: use the new answer type names and the picker
 steps

Multiple Choice is Single choice, Secret is Hidden text, Information
Block is Text only, Phone Number is Phone. Adding a question names the
add line, the menu and the picker. Page links stay the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .vitepress/config.mts              | 12 ++++++------
 docs/input-types/checkboxes.md     |  2 +-
 docs/input-types/multiplechoice.md |  8 ++++----
 docs/input-types/no-interaction.md | 12 ++++++------
 docs/input-types/phone.md          |  4 ++--
 docs/input-types/secret.md         | 12 ++++++------
 docs/quick-start.md                |  4 ++--
 docs/workbench/form-blocks.md      | 20 +++++++++++---------
 docs/workbench/workbench.md        |  2 +-
 9 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index d1dee7d2..f85b6807 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -43,26 +43,26 @@ export default defineConfig({
                 collapsed: true,
                 items: [
                     {
-                        text: "Information Block 📝",
+                        text: "Text only 📝",
                         link: "/input-types/no-interaction",
                     },
                     {
-                        text: "Multiple Choice 🔘",
+                        text: "Single choice 🔘",
                         link: "/input-types/multiplechoice",
                     },
                     { text: "Checkboxes ✅", link: "/input-types/checkboxes" },
-                    { text: "Short Text 💬", link: "/input-types/short-text" },
-                    { text: "Long Text 📄", link: "/input-types/long-text" },
+                    { text: "Short text 💬", link: "/input-types/short-text" },
+                    { text: "Long text 📄", link: "/input-types/long-text" },
                     { text: "Number 🔢", link: "/input-types/number" },
                     { text: "Email 📧", link: "/input-types/email" },
                     { text: "Link 🔗", link: "/input-types/link" },
                     { text: "Phone ☎️", link: "/input-types/phone" },
                     { text: "Date 📅", link: "/input-types/date" },
-                    { text: "Secret 🔒", link: "/input-types/secret" },
+                    { text: "Hidden text 🔒", link: "/input-types/secret" },
                     { text: "Rating ⭐", link: "/input-types/rating" },
                     { text: "Scale 📊", link: "/input-types/scale" },
                     {
-                        text: "File Upload 📁",
+                        text: "File upload 📁",
                         link: "/input-types/file-upload",
                     },
                     { text: "Consent ✓", link: "/input-types/consent" },
diff --git a/docs/input-types/checkboxes.md b/docs/input-types/checkboxes.md
index 97ea775d..a7ef4565 100644
--- a/docs/input-types/checkboxes.md
+++ b/docs/input-types/checkboxes.md
@@ -36,5 +36,5 @@ Checkboxes allow users to select multiple options from a list, making them perfe
 -   When you want to offer comprehensive option coverage
 
 ::: warning Note
-If you want users to select only one option from a list, use the **Multiple Choice (Radio)** input type instead.
+If you want users to select only one option from a list, use the **Single choice** input type instead.
 :::
diff --git a/docs/input-types/multiplechoice.md b/docs/input-types/multiplechoice.md
index 1ef81308..7e7e4a4b 100644
--- a/docs/input-types/multiplechoice.md
+++ b/docs/input-types/multiplechoice.md
@@ -1,10 +1,10 @@
-# Multiple Choice 🔘
+# Single choice 🔘
 
 This input type allows users to select one option from a list of choices, perfect for questions with mutually exclusive answers.
 
 ## How to use:
 
-1. Choose **Multiple Choice (Radio)** as the input type
+1. Choose **Single choice** as the input type
 2. Enter the question or prompt
 3. Add your answer options, one per line
 4. Toggle the "Required" option if necessary
@@ -28,7 +28,7 @@ This input type allows users to select one option from a list of choices, perfec
 🌟 Keep options mutually exclusive and limit the number of choices to prevent overwhelming users. Consider adding an "Other" option for unexpected responses, and arrange options in a logical order (alphabetical, numerical, or by relevance).
 :::
 
-## When to use Multiple Choice:
+## When to use Single choice:
 
 -   When users should select only one option from a list
 -   For questions with mutually exclusive answers
@@ -40,4 +40,4 @@ This input type allows users to select one option from a list of choices, perfec
 If users might need to select more than one option, use the **Checkboxes** input type instead.
 :::
 
-![Multiple Choice Example](/assets/multiplechoice.gif)
+![Single choice example](/assets/multiplechoice.gif)
diff --git a/docs/input-types/no-interaction.md b/docs/input-types/no-interaction.md
index 169035f2..af3f24c7 100644
--- a/docs/input-types/no-interaction.md
+++ b/docs/input-types/no-interaction.md
@@ -1,10 +1,10 @@
-# Information Block 📝
+# Text only 📝
 
-The Information Block displays information without requiring any user input. It's perfect for instructions, introductions, explanations, or content that doesn't need a response.
+A Text only block displays information without requiring any user input. It's perfect for instructions, introductions, explanations, or content that doesn't need a response.
 
 ## How to use:
 
-1. Choose **Information Block** as the block type
+1. Choose **Text only** as the block type
 2. Enter the content you want to display
 3. Format your text using markdown for headings, lists, links, and emphasis
 4. Add buttons if you want users to acknowledge the information or make a choice
@@ -26,10 +26,10 @@ The Information Block displays information without requiring any user input. It'
 -   **Thank You Messages**: Acknowledgments for participation
 
 ::: tip Best Practice
-🌟 Keep information blocks concise and visually structured. Use headings, bullet points, and formatting to make content scannable and easy to understand.
+🌟 Keep Text only blocks concise and visually structured. Use headings, bullet points, and formatting to make content scannable and easy to understand.
 :::
 
-## When to use Information Blocks:
+## When to use Text only blocks:
 
 -   When you need to provide context before asking questions
 -   For introductory or concluding information
@@ -38,5 +38,5 @@ The Information Block displays information without requiring any user input. It'
 -   For any informational content that doesn't require user input
 
 ::: warning Note
-Since Information Blocks don't collect any data, they won't appear in your submission results. They're purely for communication with your users.
+Since Text only blocks don't collect any data, they won't appear in your submission results. They're purely for communication with your users.
 :::
diff --git a/docs/input-types/phone.md b/docs/input-types/phone.md
index 5ca4b158..e22fbb09 100644
--- a/docs/input-types/phone.md
+++ b/docs/input-types/phone.md
@@ -4,7 +4,7 @@ This input type is specifically designed for collecting phone numbers with appro
 
 ## How to use:
 
-1. Select **Phone Number** as the input type
+1. Select **Phone** as the input type
 2. Enter the prompt asking for the phone number
 3. Optionally, add a placeholder showing the expected format
 4. Configure validation requirements if needed
@@ -28,7 +28,7 @@ This input type is specifically designed for collecting phone numbers with appro
 🌟 Always specify what the phone number will be used for and include a privacy statement. For international forms, include example formatting or country code instructions.
 :::
 
-## When to use Phone Number input:
+## When to use Phone input:
 
 - When you need to contact users by phone or SMS
 - For authentication or verification purposes
diff --git a/docs/input-types/secret.md b/docs/input-types/secret.md
index e75ac30d..737c06d8 100644
--- a/docs/input-types/secret.md
+++ b/docs/input-types/secret.md
@@ -1,15 +1,15 @@
-# Secret 🔒
+# Hidden text 🔒
 
-The Secret input type lets you securely collect sensitive information from users. It works like a password field, masking the entered text to protect it from view.
+The Hidden text input type lets you securely collect sensitive information from users. It works like a password field, masking the entered text to protect it from view.
 
 ## How to use:
 
-1. Choose **Secret** as the input type
+1. Choose **Hidden text** as the input type
 2. Enter the question or prompt that asks for sensitive information
 3. Optionally, add a placeholder text to guide users on what to enter
 
 ::: tip Best Practice
-< Only use Secret inputs when necessary for sensitive information like passwords, access codes, or PIN numbers.
+< Only use Hidden text inputs when necessary for sensitive information like passwords, access codes, or PIN numbers.
 :::
 
 ## Features:
@@ -25,7 +25,7 @@ The Secret input type lets you securely collect sensitive information from users
 -   **Access Codes**: For private invitation codes or tokens
 -   **Private Information**: Any sensitive data that shouldn't be visible on screen
 
-## When to use Secret inputs:
+## When to use Hidden text inputs:
 
 -   When collecting information that should remain private
 -   When users are in public spaces and don't want others to see what they're typing
@@ -33,5 +33,5 @@ The Secret input type lets you securely collect sensitive information from users
 -   When compliance or security requirements mandate protected input fields
 
 ::: warning Security Note
-While Secret inputs hide information on screen, remember that this is a visual protection only. For truly sensitive information, ensure you have proper encryption and security measures in place for data transmission and storage.
+While Hidden text inputs hide information on screen, remember that this is a visual protection only. For truly sensitive information, ensure you have proper encryption and security measures in place for data transmission and storage.
 :::
diff --git a/docs/quick-start.md b/docs/quick-start.md
index 96c8dcd8..a01571f7 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -110,8 +110,8 @@ Once you have Input up and running, follow these steps to create your first form
 5. Preview your form to ensure it looks and works as expected
 6. Publish your form when it's ready to share
 
-![Multiple Choice Example](/assets/multiplechoice.gif)
-_Example: Adding a multiple choice question to your form_
+![Single choice example](/assets/multiplechoice.gif)
+_Example: Adding a single choice question to your form_
 
 ## Troubleshooting Common Issues
 
diff --git a/docs/workbench/form-blocks.md b/docs/workbench/form-blocks.md
index 5422a717..591a82fa 100644
--- a/docs/workbench/form-blocks.md
+++ b/docs/workbench/form-blocks.md
@@ -8,20 +8,20 @@ Input offers a variety of block types to gather different kinds of information:
 
 ### Information Blocks
 
--   [**Information Block**](/input-types/no-interaction): Displays text without requiring user input, useful for instructions or explanations
+-   [**Text only**](/input-types/no-interaction): Displays text without requiring user input, useful for instructions or explanations
 
 ### Text Input Blocks
 
--   [**Short Text**](/input-types/short-text): For collecting brief responses like names or titles
--   [**Long Text**](/input-types/long-text): For gathering detailed responses, comments, or feedback
+-   [**Short text**](/input-types/short-text): For collecting brief responses like names or titles
+-   [**Long text**](/input-types/long-text): For gathering detailed responses, comments, or feedback
 -   [**Email**](/input-types/email): Specifically for email addresses, with built-in validation
 -   [**Phone**](/input-types/phone): For phone numbers, with optional formatting
 -   [**Link**](/input-types/link): For collecting website URLs
--   [**Secret**](/input-types/secret): For sensitive information like passwords, with masked input
+-   [**Hidden text**](/input-types/secret): For sensitive information like passwords, with masked input
 
 ### Choice Blocks
 
--   [**Multiple Choice**](/input-types/multiplechoice): Allows selection of one option from several choices
+-   [**Single choice**](/input-types/multiplechoice): Allows selection of one option from several choices
 -   [**Checkboxes**](/input-types/checkboxes): Allows selection of multiple options from a list
 -   [**Scale**](/input-types/scale): Presents a numerical scale (e.g., 1-10) for rating questions
 -   [**Rating**](/input-types/rating): Star-based rating system for satisfaction or quality assessment
@@ -30,16 +30,18 @@ Input offers a variety of block types to gather different kinds of information:
 
 -   [**Number**](/input-types/number): For numerical input with optional min/max validation
 -   [**Date**](/input-types/date): For collecting calendar dates
--   [**File Upload**](/input-types/file-upload): Allows users to upload files or images
+-   [**File upload**](/input-types/file-upload): Allows users to upload files or images
 -   [**Consent**](/input-types/consent): For collecting explicit consent with terms or policies
 
 ## Adding Blocks to Your Form
 
 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. Point between two questions and click "Add question here", or choose "Add question below" in a question's menu
+2. Choose the type in the picker, or type to search for it
+3. The new question opens right there, ready to type
+
+To change the type of an empty question, type "/" in its text.
 
 ## Block Groups
 
diff --git a/docs/workbench/workbench.md b/docs/workbench/workbench.md
index 53cf41eb..dcd6eba3 100644
--- a/docs/workbench/workbench.md
+++ b/docs/workbench/workbench.md
@@ -23,7 +23,7 @@ The building blocks of your form are called "blocks." Each block represents a qu
 
 When you select a block, you can configure its properties in the main workbench area:
 
-1. **Block Type** - Choose the type of interaction (text, multiple choice, etc.)
+1. **Block Type** - Choose the type of interaction (text, single 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

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 084/153] 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 da1e24992b573d440ab68df4acd1a194c8504d2b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:59:20 +0200
Subject: [PATCH 085/153] fix: make every rule control 44 px below 1024, Cancel
 and Save rule together

Pickers, text fields, Cancel and Save rule grow on phones; Edit, Add
condition, Remove rule and remove condition stay 44 px on tablets.
Cancel and Save rule wrap as one pair.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/Rules/RuleEditor.vue     | 36 +++++++++++--------
 .../Factory/Document/Rules/RuleLine.vue       |  2 +-
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/Factory/Document/Rules/RuleEditor.vue b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
index b596c8dc..d7340144 100644
--- a/resources/js/components/Factory/Document/Rules/RuleEditor.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleEditor.vue
@@ -2,7 +2,7 @@
   <div
     role="group"
     :aria-label="`Rule ${index + 1} of ${owner}`"
-    class="my-1 space-y-3 rounded-lg border border-grey-200 bg-white p-3 text-[13px] text-grey-700 shadow-sm"
+    class="my-1 space-y-3 rounded-lg border border-grey-200 bg-white p-3 text-[13px] text-grey-700 shadow-sm max-lg:[&_[aria-haspopup=listbox]]:py-[13px] max-lg:[&_input]:py-[13px]"
     @keydown.esc="onEscape"
   >
     <div v-for="(condition, i) in draft.conditions" :key="i" class="space-y-1">
@@ -107,7 +107,7 @@
           v-if="draft.conditions.length > 1"
           type="button"
           :aria-label="`Remove condition ${i + 1}`"
-          class="grid h-11 w-11 shrink-0 place-items-center rounded-md sm:h-8 sm:w-8 text-grey-600 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          class="grid h-11 w-11 shrink-0 place-items-center rounded-md lg:h-8 lg:w-8 text-grey-600 hover:bg-grey-100 hover:text-red-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
           @click="draft.conditions.splice(i, 1)"
         >
           <D9Icon name="trash" aria-hidden="true" />
@@ -128,7 +128,7 @@
 
     <button
       type="button"
-      class="flex h-11 items-center rounded-md px-2 font-semibold sm:h-8 text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="flex h-11 items-center rounded-md px-2 font-semibold lg:h-8 text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="addCondition"
     >
       Add condition
@@ -184,21 +184,29 @@
       <button
         v-if="rule.id !== undefined"
         type="button"
-        class="flex h-11 items-center rounded-md px-2 font-semibold sm:h-8 text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        class="flex h-11 items-center rounded-md px-2 font-semibold lg:h-8 text-red-700 hover:bg-red-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
         @click="isAsking = true"
       >
         Remove rule
       </button>
-      <span class="flex-1" />
-      <D9Button label="Cancel" color="light" size="small" @click="cancel" />
-      <D9Button
-        label="Save rule"
-        size="small"
-        :is-loading="saving"
-        :is-disabled="broken"
-        :disabled="broken"
-        @click="save"
-      />
+      <div class="ml-auto flex gap-2">
+        <D9Button
+          label="Cancel"
+          color="light"
+          size="small"
+          class="min-h-11 lg:min-h-0"
+          @click="cancel"
+        />
+        <D9Button
+          label="Save rule"
+          size="small"
+          class="min-h-11 lg:min-h-0"
+          :is-loading="saving"
+          :is-disabled="broken"
+          :disabled="broken"
+          @click="save"
+        />
+      </div>
     </div>
 
     <DeleteDialog
diff --git a/resources/js/components/Factory/Document/Rules/RuleLine.vue b/resources/js/components/Factory/Document/Rules/RuleLine.vue
index 986378b1..06941e02 100644
--- a/resources/js/components/Factory/Document/Rules/RuleLine.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleLine.vue
@@ -28,7 +28,7 @@
       :id="`${id}-edit`"
       type="button"
       :aria-label="`Edit rule ${index + 1} of ${owner}`"
-      class="flex h-11 shrink-0 items-center rounded-md px-2 text-[13px] sm:h-8 font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+      class="flex h-11 shrink-0 items-center rounded-md px-2 text-[13px] lg:h-8 font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
       @click="emit('edit')"
     >
       Edit

From d35fa5645f5a0b52ee012853cb43b290ef7e5768 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 02:59:51 +0200
Subject: [PATCH 086/153] fix: say "Always hidden" and drop the rule count from
 a question's meta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Hidden" read against "Hidden if …" right under it, and the rules
show as sentences, so the count said nothing new.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/DocumentGroup.vue  | 4 +++-
 .../js/components/Factory/Document/DocumentQuestion.test.ts | 5 +++--
 .../js/components/Factory/Document/DocumentQuestion.vue     | 6 +-----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 6b8e2356..305ab871 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -26,7 +26,9 @@
         title="Use a group to show or hide several questions with one rule."
         class="h-9 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-sm font-semibold text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
       />
-      <span v-if="group.is_disabled" class="text-xs text-grey-600">Hidden</span>
+      <span v-if="group.is_disabled" class="text-xs text-grey-600"
+        >Always hidden</span
+      >
       <button
         type="button"
         class="flex h-9 items-center rounded-md px-2 text-sm font-semibold text-blue-700 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 2d94d4ff..59b405b3 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -35,8 +35,9 @@ describe("a closed question in the document", () => {
         expect(text).toContain("Which days can you help?");
         expect(text).toContain("Checkboxes · 2 choices");
         expect(text).toContain("Required");
-        expect(text).toContain("1 rule");
-        expect(text).toContain("Hidden");
+        // its rules show as sentences under it
+        expect(text).not.toContain("rule");
+        expect(text).toContain("Always hidden");
         expect(text).toContain("days");
         expect(text).not.toContain(question.uuid);
     });
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 37f8d992..fc9e2892 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -48,10 +48,7 @@
           </template></span
         >
         <span v-if="block.is_required" class="text-red-700">Required</span>
-        <span v-if="ruleCount" class="tabular-nums"
-          >{{ ruleCount }} {{ ruleCount === 1 ? "rule" : "rules" }}</span
-        >
-        <span v-if="block.is_disabled">Hidden</span>
+        <span v-if="block.is_disabled">Always hidden</span>
         <span v-if="block.title" class="break-all font-mono">{{
           block.title
         }}</span>
@@ -90,7 +87,6 @@ const choiceCount = computed(() =>
       ).length
     : null,
 );
-const ruleCount = computed(() => props.block.logics?.length ?? 0);
 
 const open = () => {
   cursorFor.value = props.block.uuid;

From 2f9036d1c84b90c55268f14b21a971422ae2828a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:00:25 +0200
Subject: [PATCH 087/153] feat: Add question at the end of the document adds at
 the end

The line, the gutter + and the menu add after a given question. The end
button always adds after the last block, also while a question is open.

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

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 65384a49..a7909ecf 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -89,7 +89,7 @@ describe("the form document", () => {
         );
     });
 
-    it("adds a question after the open one, with the cursor in its text", async () => {
+    it("adds a question at the end, also with one open, with the cursor in its text", async () => {
         const added = {
             id: 3,
             uuid: "b3",
@@ -110,11 +110,12 @@ describe("the form document", () => {
             .findAll("button")
             .find((button) => button.text() === "Add question")!
             .trigger("click");
+        expect(wrapper.text()).toContain("Add a question at the end");
         await option("Email").trigger("click");
         await flushPromises();
 
         expect(useForm().createFormBlock).toHaveBeenCalledWith(
-            blocks[0],
+            null,
             "input-email",
             null,
         );
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 2bc8f4b6..d6da8aa2 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -61,7 +61,7 @@
               icon="plus"
               icon-position="left"
               :aria-expanded="addAt?.key === 'end'"
-              @click="openPicker({ key: 'end', after: workbench.block })"
+              @click="openPicker({ key: 'end', after: null })"
             />
             <D9Button
               label="Add group"
@@ -78,11 +78,7 @@
           <TypePicker
             v-if="addAt?.key === 'end'"
             class="ml-12 mt-2"
-            :title="
-              workbench.block
-                ? `Add a question after ${blockName(workbench.block, numbers)}`
-                : 'Add a question'
-            "
+            title="Add a question at the end"
             @pick="addQuestion"
             @close="closePicker"
           />
@@ -131,7 +127,6 @@ import DocumentOutline from "./DocumentOutline.vue";
 import TypePicker from "./TypePicker.vue";
 import {
   addAt,
-  blockName,
   closePicker,
   openPicker,
   useAddQuestion,

From 9b5a38db20dbacb6c63d09ef82bbe5fac32954c1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:00:27 +0200
Subject: [PATCH 088/153] fix: an empty form doesn't say 0 questions

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/FormDocument.test.ts     | 1 +
 resources/js/components/Factory/Document/FormDocument.vue   | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index a7909ecf..c7b5225d 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -80,6 +80,7 @@ describe("the form document", () => {
         });
 
         expect(wrapper.text()).toContain("Add your first question");
+        expect(wrapper.text()).not.toContain("0 questions");
         await option("Short text").trigger("click");
 
         expect(useForm().createFormBlock).toHaveBeenCalledWith(
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index d6da8aa2..a1aa8560 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -24,11 +24,13 @@
 
         <template v-else>
           <h1 class="sr-only">Questions</h1>
-          <div class="mb-4 flex items-center justify-between gap-2 pl-12">
+          <div
+            v-if="store.hasBlocks"
+            class="mb-4 flex items-center justify-between gap-2 pl-12"
+          >
             <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
             <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view -->
             <button
-              v-if="store.hasBlocks"
               type="button"
               class="flex h-11 items-center gap-1.5 rounded-md border border-grey-300 bg-white px-2.5 text-[13px] font-semibold text-grey-700 hover:bg-grey-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:absolute lg:h-8 lg:left-4 lg:top-3 lg:z-10 xl:hidden"
               aria-haspopup="dialog"

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 089/153] 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 53de514aeabaac47be0332b2bacb51b4c866ddfe Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:00:41 +0200
Subject: [PATCH 090/153] fix: the type picker scrolls into view, and a phone
 keeps its keyboard down

Opened low on the screen, the picker sat partly below the fold. It now
scrolls into view; on a phone its top goes to the top, since the list
never fits. Below lg the title takes the focus instead of the search, so
the screen keyboard doesn't cover the list. Esc closes from anywhere in
the picker.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/TypePicker.test.ts       | 17 +++++++++++--
 .../Factory/Document/TypePicker.vue           | 25 ++++++++++++-------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/Factory/Document/TypePicker.test.ts b/resources/js/components/Factory/Document/TypePicker.test.ts
index df796882..46d31354 100644
--- a/resources/js/components/Factory/Document/TypePicker.test.ts
+++ b/resources/js/components/Factory/Document/TypePicker.test.ts
@@ -1,10 +1,15 @@
 import { mount, VueWrapper } from "@vue/test-utils";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import TypePicker from "./TypePicker.vue";
 
 let wrapper: VueWrapper | undefined;
 
-const mountPicker = () => {
+const mountPicker = (large = true) => {
+    window.matchMedia = vi.fn().mockReturnValue({
+        matches: large,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+    });
     wrapper = mount(TypePicker, {
         props: { title: "Add a question" },
         global: {
@@ -73,6 +78,14 @@ describe("the answer type picker", () => {
         expect(wrapper!.emitted("pick")).toEqual([["input-long"]]);
     });
 
+    it("leaves the search to a tap on a phone, where the keyboard would cover the list", () => {
+        mountPicker(false);
+
+        expect(document.activeElement?.textContent?.trim()).toBe(
+            "Add a question",
+        );
+    });
+
     it("adds a type on click and closes on Escape", async () => {
         mountPicker();
 
diff --git a/resources/js/components/Factory/Document/TypePicker.vue b/resources/js/components/Factory/Document/TypePicker.vue
index 49cc9223..73519980 100644
--- a/resources/js/components/Factory/Document/TypePicker.vue
+++ b/resources/js/components/Factory/Document/TypePicker.vue
@@ -2,11 +2,14 @@
   <section
     ref="root"
     :aria-labelledby="`${id}-title`"
-    class="rounded-lg border border-grey-200 bg-white p-2 shadow-md"
+    class="scroll-mt-4 rounded-lg border border-grey-200 bg-white p-2 shadow-md"
+    @keydown.esc.prevent="emit('close')"
   >
     <p
       :id="`${id}-title`"
-      class="px-2 pb-2 pt-1 text-base font-semibold text-grey-900 lg:text-sm"
+      ref="heading"
+      tabindex="-1"
+      class="px-2 pb-2 pt-1 text-base font-semibold text-grey-900 outline-none lg:text-sm"
     >
       {{ title }}
     </p>
@@ -86,7 +89,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, useId, watch } from "vue";
-import { onClickOutside } from "@vueuse/core";
+import { onClickOutside, useMediaQuery } from "@vueuse/core";
 import { D9Icon } from "@deck9/ui";
 import {
   typeGroups,
@@ -95,7 +98,7 @@ import {
 
 const { autofocus = true } = defineProps<{
   title: string;
-  // the empty form shows it at once: the cursor stays where it is
+  // the empty form shows it at once: the view and the cursor stay where they are
   autofocus?: boolean;
 }>();
 
@@ -104,7 +107,9 @@ const emit = defineEmits<{ pick: [type: FormBlockType]; close: [] }>();
 const id = useId();
 const { types } = useBlockTypes();
 const root = ref<HTMLElement | null>(null);
+const heading = ref<HTMLElement | null>(null);
 const search = ref<HTMLInputElement | null>(null);
+const isLarge = useMediaQuery("(min-width: 1024px)");
 const filter = ref("");
 
 const groups = computed(() => {
@@ -146,17 +151,19 @@ const onKey = (event: KeyboardEvent) => {
     if (active.value) {
       emit("pick", active.value);
     }
-  } else if (event.key === "Escape") {
-    event.preventDefault();
-    emit("close");
   }
 };
 
 onClickOutside(root, () => emit("close"));
 
 onMounted(() => {
-  if (autofocus) {
-    search.value?.focus();
+  if (!autofocus) {
+    return;
   }
+
+  // a phone shows the list from its top: it never fits the screen
+  root.value?.scrollIntoView?.({ block: isLarge.value ? "nearest" : "start" });
+  // below lg the screen keyboard would cover the list
+  (isLarge.value ? search : heading).value?.focus({ preventScroll: true });
 });
 </script>

From 17d4bd17a6132843cd704669f41a9323000264e0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:00:45 +0200
Subject: [PATCH 091/153] fix: the keyboard-picked answer type shows a blue
 ring

Grey on white was about 1.1:1 and looked like hover. The ring shows
while you type in the search, where Enter adds that type.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/TypePicker.test.ts     | 3 +++
 resources/js/components/Factory/Document/TypePicker.vue   | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/TypePicker.test.ts b/resources/js/components/Factory/Document/TypePicker.test.ts
index 46d31354..f40d71ab 100644
--- a/resources/js/components/Factory/Document/TypePicker.test.ts
+++ b/resources/js/components/Factory/Document/TypePicker.test.ts
@@ -73,6 +73,7 @@ describe("the answer type picker", () => {
             options()[1].attributes("id"),
         );
         expect(options()[1].attributes("aria-selected")).toBe("true");
+        expect(options()[1].classes()).toContain("ring-2");
 
         await input.trigger("keydown", { key: "Enter" });
         expect(wrapper!.emitted("pick")).toEqual([["input-long"]]);
@@ -84,6 +85,8 @@ describe("the answer type picker", () => {
         expect(document.activeElement?.textContent?.trim()).toBe(
             "Add a question",
         );
+        expect(options()[0].attributes("aria-selected")).toBe("true");
+        expect(options()[0].classes()).not.toContain("ring-2");
     });
 
     it("adds a type on click and closes on Escape", async () => {
diff --git a/resources/js/components/Factory/Document/TypePicker.vue b/resources/js/components/Factory/Document/TypePicker.vue
index 73519980..2ff0de3a 100644
--- a/resources/js/components/Factory/Document/TypePicker.vue
+++ b/resources/js/components/Factory/Document/TypePicker.vue
@@ -33,6 +33,8 @@
         autocomplete="off"
         class="h-11 w-full rounded-md border border-grey-300 pl-9 pr-3 text-base text-grey-900 placeholder:text-grey-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 lg:h-9 lg:text-sm"
         @keydown="onKey"
+        @focus="typing = true"
+        @blur="typing = false"
       />
     </div>
 
@@ -62,7 +64,9 @@
           role="option"
           :aria-selected="type.value === active"
           class="flex h-11 cursor-pointer items-center gap-2.5 rounded-md px-2 text-base text-grey-900 hover:bg-grey-100 lg:h-9 lg:text-sm"
-          :class="type.value === active && 'bg-grey-100'"
+          :class="
+            type.value === active && typing && 'ring-2 ring-inset ring-blue-500'
+          "
           @click="emit('pick', type.value)"
         >
           <D9Icon
@@ -109,6 +113,8 @@ const { types } = useBlockTypes();
 const root = ref<HTMLElement | null>(null);
 const heading = ref<HTMLElement | null>(null);
 const search = ref<HTMLInputElement | null>(null);
+// the highlight shows only while you type: Enter adds it
+const typing = ref(false);
 const isLarge = useMediaQuery("(min-width: 1024px)");
 const filter = ref("");
 

From c00627ed077ffc767a227f1ec1e7aef9e563573d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:01:14 +0200
Subject: [PATCH 092/153] test: expect the save error text part a uses now

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/EndScreenBlock.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 8fb52a9c..4c975344 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -320,7 +320,7 @@ describe("the end screen in the document", () => {
         await flushPromises();
 
         expect(useNotice().message).toBe(
-            "Your change was not saved: The cta link field format is invalid.",
+            "Your change wasn't saved: The cta link field format is invalid.",
         );
         expect(useForm().form?.cta_link).toBe("https://example.com/cal");
     });

From 0dc5f5b13d253aaf0365c1dc8c637e00c78f558b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:01:51 +0200
Subject: [PATCH 093/153] feat: mark where the open question jumps with a blue
 number pill

The faint elbow at a grey number looked like every other row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentQuestion.test.ts  | 18 ++++++++++++++++++
 .../Factory/Document/DocumentQuestion.vue      | 13 ++++++++++++-
 .../Factory/Document/Rules/RuleGutter.vue      |  7 ++-----
 .../Factory/Document/Rules/ruleText.ts         |  7 +++++++
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.test.ts b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
index 59b405b3..ba62e2af 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.test.ts
+++ b/resources/js/components/Factory/Document/DocumentQuestion.test.ts
@@ -51,6 +51,24 @@ describe("a closed question in the document", () => {
         expect(text).not.toContain(question.uuid);
     });
 
+    it("marks its number while the open question jumps here", async () => {
+        const workbench = useWorkbench();
+        const wrapper = mountQuestion();
+        const number = () => wrapper.find("span[aria-hidden] > span");
+
+        expect(number().text()).toBe("3");
+        expect(number().classes()).not.toContain("bg-blue-50");
+
+        workbench.block = {
+            id: 1,
+            uuid: "q-1",
+            logics: [{ action: "goto", action_payload: question.uuid }],
+        } as unknown as FormBlockModel;
+        await wrapper.vm.$nextTick();
+
+        expect(number().classes()).toContain("bg-blue-50");
+    });
+
     it("opens as a card when clicked", async () => {
         const workbench = useWorkbench();
         const wrapper = mountQuestion();
diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index fc9e2892..07ad77c0 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -4,7 +4,13 @@
       <span
         aria-hidden="true"
         class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
-        >{{ number }}</span
+        ><span
+          :class="
+            isJumpTarget &&
+            'relative z-10 flex h-5 items-center rounded-full border border-blue-200 bg-blue-50 px-1.5 text-xs font-semibold text-blue-700'
+          "
+          >{{ number }}</span
+        ></span
       >
       <span
         aria-hidden="true"
@@ -65,6 +71,7 @@ import { useBlockTypes } from "@/components/Factory/utils/useBlockTypes";
 import { plainText } from "./questionSummary";
 import QuestionCard from "./QuestionCard.vue";
 import { cursorFor } from "./blockFocus";
+import { jumpTargets } from "./Rules/ruleText";
 
 const props = defineProps<{
   block: FormBlockModel;
@@ -75,6 +82,10 @@ const workbench = useWorkbench();
 const { types } = useBlockTypes();
 
 const isOpen = computed(() => workbench.block?.id === props.block.id);
+// the open question's rules jump here
+const isJumpTarget = computed(() =>
+  jumpTargets(workbench.block).includes(props.block.uuid),
+);
 
 const text = computed(() => plainText(props.block.message));
 const blockType = computed(() =>
diff --git a/resources/js/components/Factory/Document/Rules/RuleGutter.vue b/resources/js/components/Factory/Document/Rules/RuleGutter.vue
index 7a3ac17f..d62df7f9 100644
--- a/resources/js/components/Factory/Document/Rules/RuleGutter.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleGutter.vue
@@ -26,6 +26,7 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { useForm, useWorkbench } from "@/stores";
+import { jumpTargets } from "./ruleText";
 
 const store = useForm();
 const workbench = useWorkbench();
@@ -36,11 +37,7 @@ const lines = ref<{ target: string; top: number; height: number }[]>([]);
 const NUMBER_MIDDLE = 24;
 
 // where the open question's rules jump to
-const targets = computed(() =>
-  (workbench.block?.logics ?? [])
-    .filter((rule) => rule.action === "goto" && rule.action_payload)
-    .map((rule) => rule.action_payload as string),
-);
+const targets = computed(() => jumpTargets(workbench.block));
 
 const measure = () => {
   const origin = anchor.value?.getBoundingClientRect().top;
diff --git a/resources/js/components/Factory/Document/Rules/ruleText.ts b/resources/js/components/Factory/Document/Rules/ruleText.ts
index 184ac556..95bc4065 100644
--- a/resources/js/components/Factory/Document/Rules/ruleText.ts
+++ b/resources/js/components/Factory/Document/Rules/ruleText.ts
@@ -117,3 +117,10 @@ export function answerOptions(block?: FormBlockModel | null): string[] {
 
     return [];
 }
+
+// the questions a block's rules jump to
+export function jumpTargets(block?: FormBlockModel | null): string[] {
+    return (block?.logics ?? [])
+        .filter((rule) => rule.action === "goto" && rule.action_payload)
+        .map((rule) => rule.action_payload as string);
+}

From a8931ec827b860766f65e17f181c0d0fa7c031ca Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:02:31 +0200
Subject: [PATCH 094/153] fix: give the jump target chip a 44 px tap area below
 1024

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/Rules/RuleLine.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/Rules/RuleLine.vue b/resources/js/components/Factory/Document/Rules/RuleLine.vue
index 06941e02..c574f04b 100644
--- a/resources/js/components/Factory/Document/Rules/RuleLine.vue
+++ b/resources/js/components/Factory/Document/Rules/RuleLine.vue
@@ -18,7 +18,7 @@
         v-if="target"
         type="button"
         :title="targetLabel"
-        class="inline-flex h-6 max-w-full items-center rounded-md bg-blue-50 px-2 align-middle font-medium text-blue-700 hover:bg-blue-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:max-w-[22rem]"
+        class="relative inline-flex h-6 max-w-full items-center rounded-md bg-blue-50 px-2 align-middle font-medium text-blue-700 hover:bg-blue-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:max-w-[22rem] max-lg:before:absolute max-lg:before:inset-x-0 max-lg:before:-inset-y-2.5"
         @click="goToTarget"
       >
         <span class="truncate">{{ targetLabel }}</span>

From 8af59b7b01c7d403518461b132f3b1a8e8e0c29d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:03:44 +0200
Subject: [PATCH 095/153] fix: show the last of two overlapping saves in the
 preview

A save that came back first reloaded the preview and counted a change that
was still waiting to save as shown, so that change's own save reloaded
nothing. Now each save that carries a change reloads once it is back.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/PreviewFrame.test.ts      | 129 ++++++++++++------
 .../Factory/Preview/PreviewFrame.vue          |  61 +++++----
 2 files changed, 125 insertions(+), 65 deletions(-)

diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index 7f1a4d03..756317ab 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -1,17 +1,38 @@
-import { enableAutoUnmount, mount, type VueWrapper } from "@vue/test-utils";
+import {
+    enableAutoUnmount,
+    flushPromises,
+    mount,
+    type VueWrapper,
+} from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createPinia, getActivePinia, setActivePinia, type Pinia } from "pinia";
-import { nextTick } from "vue";
+import { PiniaDebounce } from "@pinia/plugin-debounce";
+import debounce from "lodash/debounce";
+import type { AxiosResponse } from "axios";
+import { createApp, nextTick } from "vue";
 import { useForm, useLogic, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { callUpdateFormBlock } from "@/api/blocks";
+import { callUpdateFormBlockInteraction } from "@/api/interactions";
 import PreviewFrame from "./PreviewFrame.vue";
 
+vi.mock("@/api/blocks", () => ({ callUpdateFormBlock: vi.fn() }));
+vi.mock("@/api/interactions", () => ({
+    callUpdateFormBlockInteraction: vi.fn(),
+}));
+
 // the form page is /<uuid>
 window.route = ((name: string, params?: { uuid?: string }) =>
     `/${params?.uuid ?? name}`) as typeof window.route;
 
 const block = (id: number, uuid: string, type = "input-short") =>
-    ({ id, uuid, type, interactions: [{ options: [] }] }) as unknown as FormBlockModel;
+    ({
+        id,
+        uuid,
+        type,
+        title: "",
+        interactions: [{ id: id * 10, label: "Red", options: [] }],
+    }) as unknown as FormBlockModel;
 const first = block(1, "q1uuid");
 const second = block(2, "q2uuid");
 const group = block(3, "g3uuid", "group");
@@ -19,12 +40,30 @@ const group = block(3, "g3uuid", "group");
 // the testing pinia from the setup file: a test with a real one sets it back
 const testing = getActivePinia() as Pinia;
 
+// a real one, whose typing saves wait a second as in the app
+const realPinia = () => {
+    const pinia = createPinia();
+    createApp({}).use(pinia);
+    pinia.use(PiniaDebounce(debounce));
+    setActivePinia(pinia);
+    return pinia;
+};
+
+// the server answers each save when the test says so
+const answers: Array<() => void> = [];
+const answerLater = () =>
+    new Promise<AxiosResponse>((resolve) =>
+        answers.push(() => resolve({ status: 200 } as AxiosResponse)),
+    );
+
 enableAutoUnmount(afterEach);
 
 const mountFrame = (open: FormBlockModel | null = first, pinia?: Pinia) => {
     useForm().form = { uuid: "form1" } as FormModel;
-    useForm().blocks = [{ ...first }, { ...second }, { ...group }];
-    useWorkbench().block = open;
+    // copies, which the editor changes
+    useForm().blocks = structuredClone([first, second, group]);
+    useWorkbench().block =
+        useForm().blocks!.find((item) => item.uuid === open?.uuid) ?? null;
 
     return mount(PreviewFrame, {
         attachTo: document.body,
@@ -54,6 +93,7 @@ describe("the preview frame", () => {
     beforeEach(() => {
         setActivePinia(testing);
         vi.clearAllMocks();
+        answers.length = 0;
     });
 
     it("runs the public form in preview mode at the open question", () => {
@@ -167,16 +207,13 @@ describe("the preview frame", () => {
     });
 
     it.each([
-        ["a save", () => useNotice().clearSaveError("saveBlock:1")],
+        ["a new choice", () => useNotice().clearSaveError("createInteraction:2")],
         ["saved rules", () => useLogic().saveBlockLogic()],
     ])("loads the form again at the open question after %s", async (_, save) => {
-        const pinia = createPinia();
-        setActivePinia(pinia);
-        const wrapper = mountFrame(first, pinia);
+        const wrapper = mountFrame(first, realPinia());
         const before = wrapper.get("iframe").element;
 
         useWorkbench().block = second;
-        useForm().blocks![1].message = "<p>Changed</p>";
         await save();
         await nextTick();
         await nextTick();
@@ -187,9 +224,7 @@ describe("the preview frame", () => {
     });
 
     it("loads the form again after a delete, which takes the question out after its save", async () => {
-        const pinia = createPinia();
-        setActivePinia(pinia);
-        const wrapper = mountFrame(first, pinia);
+        const wrapper = mountFrame(first, realPinia());
         const before = wrapper.get("iframe").element;
 
         useNotice().clearSaveError("deleteBlock:2");
@@ -200,37 +235,49 @@ describe("the preview frame", () => {
         expect(wrapper.get("iframe").element).not.toBe(before);
     });
 
-    it("keeps running after a save that changed nothing", async () => {
-        const pinia = createPinia();
-        setActivePinia(pinia);
-        const wrapper = mountFrame(first, pinia);
-        const before = wrapper.get("iframe").element;
+    describe("while typing, which saves a second later", () => {
+        beforeEach(() => {
+            vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout", "Date"] });
+            vi.mocked(callUpdateFormBlock).mockImplementation(answerLater);
+            vi.mocked(callUpdateFormBlockInteraction).mockImplementation(
+                answerLater,
+            );
+        });
+        afterEach(() => vi.useRealTimers());
+
+        it("shows two saves that overlap: the first comes back before the second is sent", async () => {
+            const wrapper = mountFrame(first, realPinia());
+            const frame = () => wrapper.get("iframe").element;
+            const start = frame();
+
+            useWorkbench().updateBlock({ title: "Your colour?" });
+            await vi.advanceTimersByTimeAsync(500);
+            useWorkbench().updateInteraction({ id: 10, label: "Green" });
+            await vi.advanceTimersByTimeAsync(500);
+            answers[0]();
+            await flushPromises();
+            const shown = frame();
+            expect(shown).not.toBe(start);
+
+            // the choice reached the server only now
+            await vi.advanceTimersByTimeAsync(500);
+            answers[1]();
+            await flushPromises();
+            expect(frame()).not.toBe(shown);
+        });
 
-        // opening a card saves its answer field: empty settings come as [], go back as {}
-        useForm().blocks![0].interactions = [
-            { options: {} },
-        ] as unknown as FormBlockInteractionModel[];
-        useNotice().clearSaveError("saveInteraction:1");
-        await nextTick();
+        it("keeps running after a save that changed nothing", async () => {
+            const wrapper = mountFrame(first, realPinia());
+            const before = wrapper.get("iframe").element;
 
-        expect(wrapper.get("iframe").element).toBe(before);
-    });
+            // opening a card saves its answer field: empty settings come as [], go back as {}
+            useWorkbench().updateInteraction({ id: 10, options: {} });
+            await vi.advanceTimersByTimeAsync(1000);
+            answers[0]();
+            await flushPromises();
 
-    it("compares with the questions as they load, after the preview", async () => {
-        const pinia = createPinia();
-        setActivePinia(pinia);
-        useForm().form = { uuid: "form1" } as FormModel;
-        const wrapper = mount(PreviewFrame, {
-            attachTo: document.body,
-            global: { plugins: [pinia] },
+            expect(callUpdateFormBlockInteraction).toHaveBeenCalledOnce();
+            expect(wrapper.get("iframe").element).toBe(before);
         });
-        const before = wrapper.get("iframe").element;
-
-        useForm().blocks = [{ ...first }];
-        await nextTick();
-        useNotice().clearSaveError("saveInteraction:1");
-        await nextTick();
-
-        expect(wrapper.get("iframe").element).toBe(before);
     });
 });
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index 30b67481..277976ea 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -58,38 +58,51 @@ const goto = (block: string) => {
 };
 onBeforeUnmount(() => clearTimeout(waiting));
 
-// the questions as the preview loaded them: a save that changed nothing,
-// like the one when a card opens, keeps the preview and its answers;
+// a change reached the server: show it, at the open question
+const reload = () => {
+  src.value = url();
+  loads.value++;
+  started = false;
+  clearTimeout(waiting);
+};
+
 // the server sends empty settings as [], a card saves them as {}
 const content = () =>
   JSON.stringify(store.blocks, (_, value) =>
     Array.isArray(value) && !value.length ? {} : value,
   );
-let loaded: string | null = null;
-watch(
-  () => store.blocks,
-  (blocks) => {
-    loaded ??= blocks ? content() : null;
-  },
-  { immediate: true },
-);
-
-// a change reached the server: show it, at the open question
-const reload = () => {
-  if (content() === loaded) {
+// typing saves a second later, so another save can come back and reload
+// before the change is on the server; opening a card saves it unchanged,
+// which must keep the preview and its answers: reload after each save that
+// carries a change
+const edits = { updateBlock: "saveBlock", updateInteraction: "saveInteraction" };
+const changed = new Set<string>();
+const sending = new Set<string>();
+workbench.$onAction(({ name, args, after }) => {
+  if (name === "updateBlock" || name === "updateInteraction") {
+    const before = content();
+    after(() => {
+      if (content() !== before) changed.add(edits[name]);
+    });
+  } else if (
+    (name === "saveBlock" || name === "saveInteraction") &&
+    changed.delete(name)
+  ) {
+    sending.add(`${name}:${args[0].id}`);
+  }
+});
+// every other save that works changes the form; rules save on their own;
+// the store takes in the answer after it (a new question opens, a deleted
+// one leaves), so wait a tick to reload at the open question
+useNotice().$onAction(({ name, args, after }) => {
+  if (name !== "clearSaveError") {
     return;
   }
 
-  loaded = content();
-  src.value = url();
-  loads.value++;
-  started = false;
-  clearTimeout(waiting);
-};
-// every save that works clears its error; rules save on their own;
-// a delete splices after it, so wait a tick to see the new list
-useNotice().$onAction(({ name, after }) => {
-  if (name === "clearSaveError") after(() => nextTick(reload));
+  const [save] = args;
+  if (sending.delete(save) || !/^save(Block|Interaction):/.test(save)) {
+    after(() => nextTick(reload));
+  }
 });
 useLogic().$onAction(({ name, after }) => {
   if (name === "saveBlockLogic") after(() => nextTick(reload));

From 05144261e263a31df97876979d44ec7626cc299a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:04:11 +0200
Subject: [PATCH 096/153] fix: start the preview at the open question, without
 a jump

The questions load after the panel, so the first preview had no question
to start at, began at question 1 and then jumped. It now waits for the
open question.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Preview/PreviewFrame.test.ts  | 12 +++++++++---
 .../js/components/Factory/Preview/PreviewFrame.vue   | 12 +++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index 756317ab..0323e5e1 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -103,9 +103,15 @@ describe("the preview frame", () => {
         expect(iframe.attributes("title")).toBe("Preview of your form");
     });
 
-    it("starts at the first question when none is open", () => {
-        expect(mountFrame(null).get("iframe").attributes("src")).toBe(
-            "/form1?preview=1",
+    it("waits for the questions to load, so it starts at the open one instead of jumping there", async () => {
+        const wrapper = mountFrame(null);
+        expect(wrapper.find("iframe").exists()).toBe(false);
+
+        useWorkbench().block = second;
+        await nextTick();
+
+        expect(wrapper.get("iframe").attributes("src")).toBe(
+            "/form1?preview=1&block=q2uuid",
         );
     });
 
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index 277976ea..b64fb62f 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -1,6 +1,7 @@
 <template>
   <!-- the public form in preview mode: it saves no answers -->
   <iframe
+    v-if="src"
     ref="frame"
     :key="loads"
     :src="src"
@@ -35,7 +36,16 @@ const url = () => {
   return `${window.route("forms.show", { uuid: store.form?.uuid }, false)}?${query}`;
 };
 
-const src = ref(url());
+// the questions load after the panel: start at the open one, not at the
+// first and then jump
+const src = ref<string>();
+watch(
+  () => workbench.block,
+  (block) => {
+    if (block) src.value ??= url();
+  },
+  { immediate: true },
+);
 const loads = ref(0);
 // the preview tells where it starts, then each question it moves on to
 let started = false;

From 4469fb789a1774efe0821c4e7773f414555021a1 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:05:33 +0200
Subject: [PATCH 097/153] fix: return focus to the form menu after its preview
 closes

The panel opened while the menu was still closing, so it remembered the
gone menu item and the name inside the menu button, and closing it left
focus on the page. It now opens once the menu gave focus back to its
button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts | 51 +++++++++++++++++++++++++--
 resources/js/Pages/Forms/Edit.vue     |  5 +--
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 6f64702f..143ed586 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -1,8 +1,19 @@
 import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import Edit from "./Edit.vue";
+import FormMenu from "@/components/Factory/TopBar/FormMenu.vue";
 import { useForm, useWorkbench } from "@/stores";
 
+// the headlessui dialog and menu need it, jsdom has none
+vi.stubGlobal(
+    "ResizeObserver",
+    class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    },
+);
+
 const form = { uuid: "form1", name: "Customer feedback" } as FormModel;
 const blocks = [
     { id: 1, uuid: "b1", type: "none" },
@@ -22,11 +33,14 @@ const stubs = {
 let wrapper: VueWrapper | undefined;
 
 // the test pinia stubs actions: getBlocks does what each test tells it to
-const mountEditor = async (load: () => Promise<void>) => {
+const mountEditor = async (
+    load: () => Promise<void>,
+    global: { stubs?: object; mocks?: object } = { stubs },
+) => {
     vi.mocked(useForm().getBlocks).mockImplementation(load);
     wrapper = mount(Edit, {
         props: { form },
-        global: { stubs },
+        global,
         attachTo: document.body,
     });
     await flushPromises();
@@ -143,4 +157,37 @@ describe("editor loading", () => {
         expect(preview?.get("span").classes()).toEqual(["sr-only", "sm:not-sr-only"]);
         expect(preview?.attributes("aria-haspopup")).toBe("dialog");
     });
+
+    it("puts focus back on the form menu when a preview opened from it closes", async () => {
+        // the menu item is gone by then, so the dialog can't focus it again
+        const editor = await mountEditor(loads(blocks), {
+            stubs: {
+                ...stubs,
+                AppLayout: {
+                    components: { FormMenu },
+                    template: "<main><FormMenu /><slot /></main>",
+                },
+                FormPreview: false,
+                PreviewFrame: true,
+            },
+            mocks: { route: () => "/" },
+        });
+        const menu = editor.get('[aria-haspopup="menu"]').element as HTMLElement;
+        // a mouse hits the name inside the button
+        menu.querySelector("span")?.click();
+        await flushPromises();
+        [...document.querySelectorAll<HTMLElement>('[role="menuitem"]')]
+            .find((item) => item.textContent?.trim() === "Preview")
+            ?.click();
+        await new Promise((resolve) => setTimeout(resolve));
+        await flushPromises();
+        expect(document.activeElement?.closest("[role=dialog]")).not.toBeNull();
+
+        document.activeElement?.dispatchEvent(
+            new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+        );
+        await flushPromises();
+
+        expect(document.activeElement).toBe(menu);
+    });
 });
diff --git a/resources/js/Pages/Forms/Edit.vue b/resources/js/Pages/Forms/Edit.vue
index d558342b..4516cc5a 100644
--- a/resources/js/Pages/Forms/Edit.vue
+++ b/resources/js/Pages/Forms/Edit.vue
@@ -41,8 +41,9 @@ const workbench = useWorkbench();
 const status = ref<"loading" | "failed" | "loaded">("loading");
 // on a desktop the preview sits beside the document, so it shows at once
 const isPreviewing = ref(useMediaQuery("(min-width: 1280px)").value);
-// the form menu's Preview, for when the button above the questions scrolled away
-provide("openPreview", () => (isPreviewing.value = true));
+// the form menu's Preview, for when the button above the questions scrolled away;
+// it opens once the menu gave focus back to its button, so closing returns there
+provide("openPreview", () => setTimeout(() => (isPreviewing.value = true)));
 
 const loadBlocks = async () => {
   status.value = "loading";

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 098/153] 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 5a39ee9106f1e53015c6c06a74bc1954f308ac5b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:11:21 +0200
Subject: [PATCH 099/153] fix: line rules up with the question text on phones

Part b's number column is 32 px below sm; the rules kept the 48 px indent.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/DocumentList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
index f2829595..5a08e47a 100644
--- a/resources/js/components/Factory/Document/DocumentList.vue
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -26,7 +26,7 @@
           v-if="block.type !== 'group'"
           :block="block"
           :numbers="numbers"
-          class="pl-12"
+          class="pl-8 sm:pl-12"
         />
       </div>
     </Draggable>

From 3b5d677c88dfe4755a71647d2873e2b43ae1bfd5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:12:57 +0200
Subject: [PATCH 100/153] fix: a click outside the / picker leaves the cursor
 where you clicked

Closing it by a click elsewhere put the cursor back into the question a
frame later, so typing in the end picker's search landed in the question
text. Only Esc and a pick give the cursor back now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionCard.test.ts     | 20 ++++++++++++++++++-
 .../Factory/Document/QuestionCard.vue         |  7 +++++--
 .../Factory/Document/TypePicker.vue           | 10 +++++++---
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Document/QuestionCard.test.ts b/resources/js/components/Factory/Document/QuestionCard.test.ts
index 23c55241..4b1040f5 100644
--- a/resources/js/components/Factory/Document/QuestionCard.test.ts
+++ b/resources/js/components/Factory/Document/QuestionCard.test.ts
@@ -153,9 +153,10 @@ describe("an open question", () => {
     });
 
     describe("typing / in its text", () => {
+        const focus = vi.fn();
         const editorStub = {
             template: `<div><div contenteditable="true" /></div>`,
-            methods: { focus() {} },
+            methods: { focus },
         };
         const slash = async (message: string | null) => {
             useWorkbench().block = { ...block, message };
@@ -179,6 +180,23 @@ describe("an open question", () => {
             expect(wrapper!.find("[role=listbox]").exists()).toBe(false);
         });
 
+        it("gives the cursor back after Esc, but not after a click elsewhere", async () => {
+            await slash(null);
+            focus.mockClear();
+
+            // the click's target takes the focus; tiptap would take it back a frame later
+            document.body.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            await flushPromises();
+            expect(wrapper!.find("[role=listbox]").exists()).toBe(false);
+            expect(focus).not.toHaveBeenCalled();
+
+            await wrapper!
+                .find("[contenteditable]")
+                .trigger("keydown", { key: "/" });
+            await wrapper!.find("input").trigger("keydown", { key: "Escape" });
+            expect(focus).toHaveBeenCalledOnce();
+        });
+
         it("stays a / in a question with text", async () => {
             await slash("<p>Your name?</p>");
 
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 53bd26ad..99c96c78 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -197,9 +197,12 @@ const openTypes = (event: KeyboardEvent) => {
     typesOpen.value = true;
   }
 };
-const closeTypes = () => {
+const closeTypes = (returnFocus = true) => {
   typesOpen.value = false;
-  editor.value?.focus();
+
+  if (returnFocus) {
+    editor.value?.focus();
+  }
 };
 const changeType = (value: FormBlockType) => {
   type.value = types.value.find((item) => item.value === value);
diff --git a/resources/js/components/Factory/Document/TypePicker.vue b/resources/js/components/Factory/Document/TypePicker.vue
index 2ff0de3a..e733d64a 100644
--- a/resources/js/components/Factory/Document/TypePicker.vue
+++ b/resources/js/components/Factory/Document/TypePicker.vue
@@ -3,7 +3,7 @@
     ref="root"
     :aria-labelledby="`${id}-title`"
     class="scroll-mt-4 rounded-lg border border-grey-200 bg-white p-2 shadow-md"
-    @keydown.esc.prevent="emit('close')"
+    @keydown.esc.prevent="emit('close', true)"
   >
     <p
       :id="`${id}-title`"
@@ -106,7 +106,11 @@ const { autofocus = true } = defineProps<{
   autofocus?: boolean;
 }>();
 
-const emit = defineEmits<{ pick: [type: FormBlockType]; close: [] }>();
+// a click elsewhere leaves the focus where the click put it
+const emit = defineEmits<{
+  pick: [type: FormBlockType];
+  close: [returnFocus: boolean];
+}>();
 
 const id = useId();
 const { types } = useBlockTypes();
@@ -160,7 +164,7 @@ const onKey = (event: KeyboardEvent) => {
   }
 };
 
-onClickOutside(root, () => emit("close"));
+onClickOutside(root, () => emit("close", false));
 
 onMounted(() => {
   if (!autofocus) {

From 17d3ccc6d44b530360a1ca7d466c944c761cb79b Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:13:11 +0200
Subject: [PATCH 101/153] docs: answer type names in sentence case, as in the
 editor

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/input-types/file-upload.md |  8 ++++----
 docs/input-types/long-text.md   | 12 ++++++------
 docs/input-types/number.md      |  2 +-
 docs/input-types/short-text.md  | 14 +++++++-------
 docs/workbench/form-blocks.md   |  2 +-
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/input-types/file-upload.md b/docs/input-types/file-upload.md
index 2ed4154f..af5bc001 100644
--- a/docs/input-types/file-upload.md
+++ b/docs/input-types/file-upload.md
@@ -1,10 +1,10 @@
-# File Upload 📁
+# File upload 📁
 
-The File Upload input type allows users to attach files to their form responses. It supports multiple file types and offers a user-friendly drag-and-drop interface.
+The File upload input type allows users to attach files to their form responses. It supports multiple file types and offers a user-friendly drag-and-drop interface.
 
 ## How to use:
 
-1. Choose **File Upload** as the input type
+1. Choose **File upload** as the input type
 2. Enter instructions for what files users should upload
 3. Configure the upload settings:
     - **Maximum Files**: Set how many files users can upload
@@ -40,7 +40,7 @@ The File Upload input type allows users to attach files to their form responses.
 -   **Document Collection**: ID verification or signed forms
 -   **Media Sharing**: Audio or video uploads for feedback
 
-## When to use File Upload:
+## When to use File upload:
 
 -   When you need users to submit existing files rather than typing information
 -   For collecting visual or media information that can't be entered as text
diff --git a/docs/input-types/long-text.md b/docs/input-types/long-text.md
index 7c0d2a8f..ca5e5ad0 100644
--- a/docs/input-types/long-text.md
+++ b/docs/input-types/long-text.md
@@ -1,10 +1,10 @@
-# Long Text 📄
+# Long text 📄
 
-The Long Text input type provides a multi-line text area for collecting detailed, open-ended responses from users. It's ideal for comments, feedback, descriptions, and any situation where users need to enter more than a brief phrase.
+The Long text input type provides a multi-line text area for collecting detailed, open-ended responses from users. It's ideal for comments, feedback, descriptions, and any situation where users need to enter more than a brief phrase.
 
 ## How to use:
 
-1. Select **Long Text** as the input type
+1. Select **Long text** as the input type
 2. Enter the question or prompt
 3. Configure the text area options:
    - **Rows**: Number of visible text rows (1-10, default: 5)
@@ -35,7 +35,7 @@ The Long Text input type provides a multi-line text area for collecting detailed
 💡 Set an appropriate character limit based on the expected response length. For short paragraphs, 500 characters is usually sufficient, while detailed feedback might require 1000+ characters. Add clear instructions about the level of detail you're looking for to guide users.
 :::
 
-## When to use Long Text:
+## When to use Long text:
 
 - When you need more than a single line of text
 - For qualitative, open-ended responses
@@ -45,7 +45,7 @@ The Long Text input type provides a multi-line text area for collecting detailed
 - For feedback that requires elaboration
 
 ::: warning Note
-While Long Text fields are great for detailed responses, very long responses may be difficult for users to type, especially on mobile devices. For extremely detailed information, consider breaking your questions into smaller, more focused parts.
+While Long text fields are great for detailed responses, very long responses may be difficult for users to type, especially on mobile devices. For extremely detailed information, consider breaking your questions into smaller, more focused parts.
 :::
 
 ## Technical Details:
@@ -53,5 +53,5 @@ While Long Text fields are great for detailed responses, very long responses may
 - Text can include line breaks and paragraphs
 - The character counter updates in real-time as users type
 - Maximum storage capacity is virtually unlimited
-- Long Text fields cannot include rich formatting (bold, italics, etc.)
+- Long text fields cannot include rich formatting (bold, italics, etc.)
 
diff --git a/docs/input-types/number.md b/docs/input-types/number.md
index 4cdbcb6f..1ac92c3d 100644
--- a/docs/input-types/number.md
+++ b/docs/input-types/number.md
@@ -45,7 +45,7 @@ The Number input type is specifically designed for collecting numerical data wit
 - When you want proper numeric formatting (thousands separators)
 
 ::: warning Note
-Number inputs only accept numeric values. If users might need to add any text or explanations with their numbers, consider using a Short Text input instead.
+Number inputs only accept numeric values. If users might need to add any text or explanations with their numbers, consider using a Short text input instead.
 :::
 
 ## Technical Details:
diff --git a/docs/input-types/short-text.md b/docs/input-types/short-text.md
index 0dbef05a..1b42b140 100644
--- a/docs/input-types/short-text.md
+++ b/docs/input-types/short-text.md
@@ -1,10 +1,10 @@
-# Short Text 💬
+# Short text 💬
 
-The Short Text input type provides a single-line text field for collecting brief responses from users. It's perfect for names, titles, brief answers, and any situation where responses are concise and fit on one line.
+The Short text input type provides a single-line text field for collecting brief responses from users. It's perfect for names, titles, brief answers, and any situation where responses are concise and fit on one line.
 
 ## How to use:
 
-1. Choose **Short Text** as the input type
+1. Choose **Short text** as the input type
 2. Enter the question or prompt
 3. Configure the input options:
    - **Placeholder**: Hint text shown when the field is empty
@@ -29,10 +29,10 @@ The Short Text input type provides a single-line text field for collecting brief
 - **Simple Data**: "What city do you live in?"
 
 ::: tip Best Practice 
-🌟 Keep your questions specific to encourage brief responses. For any question where you expect answers might exceed a few words or require multiple sentences, use the Long Text input type instead.
+🌟 Keep your questions specific to encourage brief responses. For any question where you expect answers might exceed a few words or require multiple sentences, use the Long text input type instead.
 :::
 
-## When to use Short Text:
+## When to use Short text:
 
 - When you need a brief, concise response
 - For single-line information collection
@@ -42,7 +42,7 @@ The Short Text input type provides a single-line text field for collecting brief
 - When inputs should be quick and straightforward
 
 ::: warning Note
-Short Text fields have a hard limit of 100 characters. If users might need more space, consider using a Long Text input instead, which can accommodate more detailed responses.
+Short text fields have a hard limit of 100 characters. If users might need more space, consider using a Long text input instead, which can accommodate more detailed responses.
 :::
 
 ## Technical Details:
@@ -50,4 +50,4 @@ Short Text fields have a hard limit of 100 characters. If users might need more
 - Maximum character limit is fixed at 100 characters
 - Input is single-line only (pressing Enter submits the form)
 - Character counter updates in real-time as users type
-- Unlike specialized inputs (email, phone, etc.), Short Text has no format validation
\ No newline at end of file
+- Unlike specialized inputs (email, phone, etc.), Short text has no format validation
\ No newline at end of file
diff --git a/docs/workbench/form-blocks.md b/docs/workbench/form-blocks.md
index 591a82fa..3510e9a0 100644
--- a/docs/workbench/form-blocks.md
+++ b/docs/workbench/form-blocks.md
@@ -6,7 +6,7 @@ Form blocks are the fundamental building components of any form in Input. Each b
 
 Input offers a variety of block types to gather different kinds of information:
 
-### Information Blocks
+### Content Blocks
 
 -   [**Text only**](/input-types/no-interaction): Displays text without requiring user input, useful for instructions or explanations
 

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 102/153] 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 ad113fffd837f2c6ea4552891df73430a804f41e Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:16:08 +0200
Subject: [PATCH 103/153] fix: keep an end screen change when the page reloads
 or closes

The end screen now saves like a question: the save status shows it, a
failed save gets Retry, and a change still in its pause goes out with
keepalive on pagehide or beforeunload. Retry only writes to the form it
was made in, and a closed block no longer leaves the status on Saving.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/api/forms.ts                     |   4 +-
 .../Factory/Document/EndScreenBlock.test.ts   | 115 ++++++++++++++++--
 .../Factory/Document/EndScreenBlock.vue       |  54 ++++++--
 resources/js/stores/form.test.ts              |   8 +-
 resources/js/stores/form.ts                   |   8 +-
 5 files changed, 158 insertions(+), 31 deletions(-)

diff --git a/resources/js/api/forms.ts b/resources/js/api/forms.ts
index 194bbb55..48482582 100644
--- a/resources/js/api/forms.ts
+++ b/resources/js/api/forms.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-async-promise-executor */
-import { AxiosResponse } from "axios";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
 import handler from "./handler";
 
 export function callListForms(
@@ -86,12 +86,14 @@ export function callGetForm(
 export function callUpdateForm(
     form: FormModel,
     values: Partial<FormModel>,
+    config?: AxiosRequestConfig,
 ): Promise<AxiosResponse<FormModel>> {
     return new Promise(async (resolve, reject) => {
         try {
             const response = await handler.post(
                 window.route("api.forms.update", { uuid: form.uuid }),
                 values,
+                config,
             );
 
             resolve(response as AxiosResponse<FormModel>);
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 4c975344..193541af 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -129,6 +129,7 @@ describe("the end screen in the document", () => {
         expect(callUpdateForm).toHaveBeenCalledWith(
             expect.objectContaining({ uuid: "form1" }),
             { eoc_headline: "Thanks!" },
+            undefined,
         );
         expect(useForm().form?.eoc_headline).toBe("Thanks!");
     });
@@ -142,9 +143,11 @@ describe("the end screen in the document", () => {
         });
         await flushPromises();
 
-        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-            eoc_headline: "Thanks!",
-        });
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { eoc_headline: "Thanks!" },
+            undefined,
+        );
     });
 
     it("saves right away on browser Back", async () => {
@@ -154,9 +157,11 @@ describe("the end screen in the document", () => {
         window.dispatchEvent(new PopStateEvent("popstate"));
         await flushPromises();
 
-        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-            eoc_headline: "Thanks!",
-        });
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { eoc_headline: "Thanks!" },
+            undefined,
+        );
     });
 
     it("lets the next page load the form again only after the save made on Back", async () => {
@@ -265,9 +270,11 @@ describe("the end screen in the document", () => {
             vi.advanceTimersByTime(1000);
             await flushPromises();
 
-            expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-                eoc_headline: "Thanks!",
-            });
+            expect(callUpdateForm).toHaveBeenCalledWith(
+                expect.anything(),
+                { eoc_headline: "Thanks!" },
+                undefined,
+            );
         } finally {
             vi.useRealTimers();
         }
@@ -294,10 +301,11 @@ describe("the end screen in the document", () => {
         await block.find("#end-screen-button").trigger("focusout");
         await flushPromises();
 
-        expect(callUpdateForm).toHaveBeenCalledWith(expect.anything(), {
-            cta_link: "mailto:a@b.co",
-            show_cta_link: false,
-        });
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { cta_link: "mailto:a@b.co", show_cta_link: false },
+            undefined,
+        );
         expect(block.find("#end-screen-button-label").exists()).toBe(false);
     });
 
@@ -325,6 +333,87 @@ describe("the end screen in the document", () => {
         expect(useForm().form?.cta_link).toBe("https://example.com/cal");
     });
 
+    it("shows Saving in the save status from the first key until the save lands", async () => {
+        let answer = () => {};
+        vi.mocked(callUpdateForm).mockImplementation(
+            (_, values) =>
+                new Promise((resolve) => {
+                    answer = () =>
+                        resolve({
+                            data: { ...useForm().form, ...values },
+                        } as AxiosResponse);
+                }),
+        );
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        expect(useNotice().saveStatus).toBe("saving");
+
+        await block.find("#end-screen-headline").trigger("focusout");
+        expect(useNotice().saveStatus).toBe("saving");
+
+        answer();
+        await flushPromises();
+        expect(useNotice().saveStatus).toBe("idle");
+    });
+
+    it("sends a refused change again on Retry", async () => {
+        vi.mocked(callUpdateForm).mockRejectedValueOnce(new AxiosError());
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+        expect(useNotice().saveStatus).toBe("failed");
+
+        useNotice().retrySaves();
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledTimes(2);
+        expect(useForm().form?.eoc_headline).toBe("Thanks!");
+        expect(useNotice().saveStatus).toBe("idle");
+    });
+
+    it("sends a Retry only to the form it was made in", async () => {
+        vi.mocked(callUpdateForm).mockRejectedValueOnce(new AxiosError());
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        await block.find("#end-screen-headline").trigger("focusout");
+        await flushPromises();
+        // you open another form, then click Retry
+        block.unmount();
+        wrapper = undefined;
+        useForm().form = { ...form, uuid: "form2" };
+        useNotice().retrySaves();
+        await flushPromises();
+
+        expect(callUpdateForm).toHaveBeenCalledTimes(1);
+    });
+
+    it("stops showing Saving when it closes with a change still in its pause", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        block.unmount();
+        wrapper = undefined;
+
+        expect(useNotice().saveStatus).toBe("idle");
+    });
+
+    it("sends a change still in its pause when the page closes, so it outlives the page", async () => {
+        const block = await open();
+
+        await block.find("#end-screen-headline").setValue("Thanks!");
+        window.dispatchEvent(new Event("pagehide"));
+
+        expect(callUpdateForm).toHaveBeenCalledWith(
+            expect.anything(),
+            { eoc_headline: "Thanks!" },
+            { adapter: "fetch", fetchOptions: { keepalive: true } },
+        );
+    });
+
     it("only links to Settings while the form sends people to a link instead", () => {
         useForm().form = { ...form, use_cta_redirect: true };
         const block = mountBlock();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index b2919b4f..58b20d29 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -139,6 +139,7 @@ import { useEventListener } from "@vueuse/core";
 import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { keepAlive } from "@/api/handler";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
@@ -177,8 +178,19 @@ const saved = () => ({
 
 const draft = reactive(saved());
 
-// sends what differs from the saved form, so a refused value is sent again until it's fixed
-const save = debounce(async () => {
+const SAVE = "saveEndScreen";
+// a Retry can run after you opened another form
+const formUuid = store.form?.uuid;
+// true while the page closes: the save must outlive it
+let isLeaving = false;
+
+// sends what differs from the saved form, so a refused value is sent again
+// until it's fixed, also by Retry
+const sendChanges = async () => {
+  if (store.form?.uuid !== formUuid) {
+    return;
+  }
+
   const before = saved();
   const changes = Object.fromEntries(
     fields
@@ -190,16 +202,17 @@ const save = debounce(async () => {
     return;
   }
 
-  try {
-    // the next page may load before this lands: it loads the form again after
-    await trackFormSave(store.updateForm(changes));
-    notice.clearSaveError("saveEndScreen");
-  } catch (error) {
-    notice.showSaveError(error, "saveEndScreen");
-  }
-}, 1000);
+  const config = isLeaving ? keepAlive(changes) : undefined;
+  // the next page may load before this lands: it loads the form again after
+  await trackFormSave(store.updateForm(changes, config));
+};
 
-watch(draft, () => save());
+const save = debounce(() => notice.send(SAVE, sendChanges), 1000);
+
+watch(draft, () => {
+  notice.waitForSave(SAVE);
+  save();
+});
 
 // save before a click on a link can load the next page, also "Also in Settings" in the card
 const leave = (event: FocusEvent) => {
@@ -214,6 +227,20 @@ const leave = (event: FocusEvent) => {
 // browser Back moves no focus; the old page stays until the next one has loaded
 useEventListener(window, "popstate", () => save.flush());
 
+// a reload or a closed tab within the pause would drop the change
+const saveOnLeave = () => {
+  isLeaving = true;
+
+  try {
+    save.flush();
+  } finally {
+    isLeaving = false;
+  }
+};
+
+useEventListener(window, "pagehide", saveOnLeave);
+useEventListener(window, "beforeunload", saveOnLeave);
+
 const open = async () => {
   workbench.clearWorkbench();
   // a change made before it closed may still be on its way
@@ -238,5 +265,8 @@ watch(
 );
 
 // the page cleared the form before this unmounts: a later save would go to the next page's form
-onBeforeUnmount(() => save.cancel());
+onBeforeUnmount(() => {
+  save.cancel();
+  delete notice.waitingSaves[SAVE];
+});
 </script>
diff --git a/resources/js/stores/form.test.ts b/resources/js/stores/form.test.ts
index 51828c2a..7beb18ca 100644
--- a/resources/js/stores/form.test.ts
+++ b/resources/js/stores/form.test.ts
@@ -30,9 +30,11 @@ describe("saving form settings", () => {
 
         await useForm().updateForm({ name: " Feedback " });
 
-        expect(handler.post).toHaveBeenCalledWith("/api/forms/form1", {
-            name: " Feedback ",
-        });
+        expect(handler.post).toHaveBeenCalledWith(
+            "/api/forms/form1",
+            { name: " Feedback " },
+            undefined,
+        );
         expect(useForm().form?.name).toBe("Feedback");
     });
 
diff --git a/resources/js/stores/form.ts b/resources/js/stores/form.ts
index 0429d4d8..49bb49c2 100644
--- a/resources/js/stores/form.ts
+++ b/resources/js/stores/form.ts
@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { AxiosRequestConfig } from "axios";
 import {
     callDeleteFormImage,
     callUpdateForm,
@@ -134,12 +135,15 @@ export const useForm = defineStore("form", {
         },
 
         // only the page's own fields, and the store changes only once they're saved
-        async updateForm(newValues: Partial<FormModel>) {
+        async updateForm(
+            newValues: Partial<FormModel>,
+            config?: AxiosRequestConfig,
+        ) {
             if (!this.form) {
                 return;
             }
 
-            const response = await callUpdateForm(this.form, newValues);
+            const response = await callUpdateForm(this.form, newValues, config);
             // the editor may have left this form while it saved
             if (this.form?.uuid !== response.data.uuid) {
                 return;

From e323b14b9b73ad2f6e547a7f984058c0423a5411 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:20:52 +0200
Subject: [PATCH 104/153] fix: a click elsewhere leaves the cursor there, also
 for the end picker

With the end "Add question" picker open, a click into the open
question's text put the cursor back on "Add question", so typing went
nowhere. Only Esc and a pick give the cursor back now, as in the "/"
picker.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/FormDocument.test.ts     | 32 +++++++++++++++++++
 .../Factory/Document/addQuestion.ts           |  7 +++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index c7b5225d..42794653 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -123,6 +123,38 @@ describe("the form document", () => {
         expect(cursorFor.value).toBe("b3");
     });
 
+    it("gives the cursor back to the end button after Esc, but not after a click elsewhere", async () => {
+        useForm().blocks = blocks;
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            global: { stubs },
+            attachTo: document.body,
+        });
+        const button = wrapper
+            .findAll("button")
+            .find((item) => item.text() === "Add question")!;
+        const open = async () => {
+            (button.element as HTMLElement).focus();
+            await button.trigger("click");
+        };
+
+        // a click into the open question's text keeps the cursor there
+        const text = document.createElement("textarea");
+        document.body.append(text);
+        await open();
+        text.focus();
+        text.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        await flushPromises();
+        expect(addAt.value).toBeNull();
+        expect(document.activeElement).toBe(text);
+        text.remove();
+
+        await open();
+        await wrapper.find("input").trigger("keydown", { key: "Escape" });
+        expect(addAt.value).toBeNull();
+        expect(document.activeElement).toBe(button.element);
+    });
+
     it("reads out where a moved question went", async () => {
         useForm().blocks = blocks;
         wrapper = mount(FormDocument, {
diff --git a/resources/js/components/Factory/Document/addQuestion.ts b/resources/js/components/Factory/Document/addQuestion.ts
index ab2432be..d2833bda 100644
--- a/resources/js/components/Factory/Document/addQuestion.ts
+++ b/resources/js/components/Factory/Document/addQuestion.ts
@@ -25,10 +25,15 @@ export function openPicker(spot: AddSpot) {
     addAt.value = spot;
 }
 
-export function closePicker() {
+export function closePicker(returnFocus = true) {
     const spot = addAt.value;
     addAt.value = null;
 
+    // a click elsewhere leaves the focus where the click put it
+    if (!returnFocus) {
+        return;
+    }
+
     if (opener?.isConnected) {
         opener.focus();
     } else if (spot) {

From f0e5ccc9a911c2bbc179b99a7ee71a62b8b67f04 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:24:41 +0200
Subject: [PATCH 105/153] fix: start the preview at once when no question is
 open

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Preview/PreviewFrame.test.ts | 13 ++++++++++++-
 .../js/components/Factory/Preview/PreviewFrame.vue  |  5 ++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index 0323e5e1..0b95fbb3 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -104,9 +104,14 @@ describe("the preview frame", () => {
     });
 
     it("waits for the questions to load, so it starts at the open one instead of jumping there", async () => {
-        const wrapper = mountFrame(null);
+        useForm().form = { uuid: "form1" } as FormModel;
+        useForm().blocks = null;
+        useWorkbench().block = null;
+        const wrapper = mount(PreviewFrame, { attachTo: document.body });
         expect(wrapper.find("iframe").exists()).toBe(false);
 
+        useForm().blocks = structuredClone([first, second, group]);
+
         useWorkbench().block = second;
         await nextTick();
 
@@ -115,6 +120,12 @@ describe("the preview frame", () => {
         );
     });
 
+    it("starts at once when it opens with no question open", () => {
+        const iframe = mountFrame(null).get("iframe");
+
+        expect(iframe.attributes("src")).toBe("/form1?preview=1");
+    });
+
     it("goes to the question opened in the document", async () => {
         const wrapper = mountFrame();
         const post = vi.spyOn(frameWindow(wrapper), "postMessage");
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index b64fb62f..7184773d 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -37,14 +37,13 @@ const url = () => {
 };
 
 // the questions load after the panel: start at the open one, not at the
-// first and then jump
-const src = ref<string>();
+// first and then jump; a panel opened later with none open starts at once
+const src = ref(store.blocks ? url() : undefined);
 watch(
   () => workbench.block,
   (block) => {
     if (block) src.value ??= url();
   },
-  { immediate: true },
 );
 const loads = ref(0);
 // the preview tells where it starts, then each question it moves on to

From 072884f7221382432682c80e8e052edd528966aa Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:26:33 +0200
Subject: [PATCH 106/153] fix: say why the preview can't show a hidden question

A hidden question, or one in a hidden group, is left out of the public
form; the note blamed a rule for it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Preview/FormPreview.test.ts       | 24 +++++++++++++
 .../Factory/Preview/FormPreview.vue           | 35 ++++++++++++-------
 2 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index 5a786165..6f3a8dea 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -125,6 +125,30 @@ describe("the preview panel", () => {
         expect(wrapper.text()).not.toContain("hidden by a rule");
     });
 
+    // the public form leaves them out, so no rule is to blame
+    it.each([
+        ["a hidden question", { is_disabled: true }, "is hidden"],
+        ["a question in a hidden group", { parent_block: "g1" }, "is in a hidden group"],
+    ])("says when the open one is %s", async (_, question, reason) => {
+        screen(false);
+        const blocks = [
+            { uuid: "q1", type: "input-short", parent_block: null },
+            { uuid: "g1", type: "group", parent_block: null, is_disabled: true },
+            { uuid: "q2", type: "input-short", parent_block: null, ...question },
+        ] as FormBlockModel[];
+        useForm().blocks = blocks;
+        useWorkbench().block = blocks[2];
+        const wrapper = mountPreview();
+        await flushPromises();
+
+        wrapper.findComponent(PreviewFrame).vm.$emit("update:missed", "q2");
+        await flushPromises();
+
+        expect(document.querySelector("[role=dialog]")?.textContent).toContain(
+            `Question 2 ${reason}, so the preview can't jump to it.`,
+        );
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index eb33e0cd..1606636e 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -8,9 +8,8 @@
     <h2 id="preview-heading" class="w-80 text-xs font-semibold text-grey-600">
       {{ heading }}
     </h2>
-    <p v-if="hiddenNumber" class="w-80 max-w-full text-xs text-grey-600">
-      Question {{ hiddenNumber }} is hidden by a rule, so the preview can't jump
-      to it.
+    <p v-if="hidden" class="w-80 max-w-full text-xs text-grey-600">
+      {{ hidden }}, so the preview can't jump to it.
     </p>
     <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
       Add a question to see it here.
@@ -37,9 +36,8 @@
           <D9Icon name="close" aria-hidden="true" />
         </button>
       </div>
-      <p v-if="hiddenNumber" class="w-80 max-w-full text-xs text-grey-600">
-        Question {{ hiddenNumber }} is hidden by a rule, so the preview can't
-        jump to it.
+      <p v-if="hidden" class="w-80 max-w-full text-xs text-grey-600">
+        {{ hidden }}, so the preview can't jump to it.
       </p>
       <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
         Add a question to see it here.
@@ -73,12 +71,25 @@ const heading = computed(() => {
   const number = shown.value && numbers.value[shown.value];
   return number ? `Preview · question ${number}` : "Preview";
 });
-// the open question, when the preview couldn't go to it (a group has no number)
-const hiddenNumber = computed(() =>
-  missed.value && missed.value === workbench.block?.uuid
-    ? numbers.value[missed.value]
-    : undefined,
-);
+// the open question, when the preview couldn't go to it (a group has no number);
+// the public form leaves out a hidden question and each one in a hidden group
+const hidden = computed(() => {
+  const block = workbench.block;
+  const number =
+    block && missed.value === block.uuid && numbers.value[block.uuid];
+  if (!number) {
+    return undefined;
+  }
+
+  if (block.is_disabled) {
+    return `Question ${number} is hidden`;
+  }
+
+  const group = store.blocks?.find((item) => item.uuid === block.parent_block);
+  return group?.is_disabled
+    ? `Question ${number} is in a hidden group`
+    : `Question ${number} is hidden by a rule`;
+});
 
 const isWide = useMediaQuery("(min-width: 1280px)");
 // a narrower window or a turned tablet must not pop the panel over the document

From a1f2a8378bcb6338abac0085aae93a74e46433bd Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:26:56 +0200
Subject: [PATCH 107/153] docs: say the other pages' Preview saves no answers
 either

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 c67253e3..8e75ee1a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The API can copy a question (`POST /api/blocks/{block}/duplicate`) with its text, settings, answers and Required, but not its rules. The copy goes right after the original. (#262)
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
--   "Preview" in the editor shows your form beside the questions, on tablet and phone as a panel. It follows the question you edit, and the editor follows when you click Next in it. Answers in the preview aren't saved. (#273)
+-   "Preview" in the editor shows your form beside the questions, on tablet and phone as a panel. It follows the question you edit, and the editor follows when you click Next in it. On the other form pages, "Preview" opens your form in a new tab in preview mode. Answers in either preview aren't saved. (#273)
 
 ### Changed
 

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 108/153] 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 109/153] 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 110/153] 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 111/153] 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 112/153] 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 66ffab3adc397857c9e71e13d6e0b7fc5f0de2bd Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:38:58 +0200
Subject: [PATCH 113/153] fix: the end screen test finds the type picker on an
 empty form after merging #276 and #271

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/FormDocument.test.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index f79292f7..85108f61 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -16,7 +16,6 @@ const stubs = {
         template: `<div>[list]<div id="row-b1" /><div id="row-b2" /></div>`,
     },
     RuleGutter: true,
-    EmptyState: { template: "<div>[empty]</div>" },
     EndScreenBlock: { template: "<div>[end]</div>" },
 };
 
@@ -193,7 +192,7 @@ describe("the form document", () => {
 
     it.each([
         ["the questions", "[list]", blocks],
-        ["no questions", "[empty]", []],
+        ["no questions", "Add your first question", []],
     ])("shows the end screen after %s", (_, first, list) => {
         useForm().blocks = list as FormBlockModel[];
         wrapper = mount(FormDocument, {

From 637094a768ab2b907ddf44cb6a09b67889c71ce5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:39:26 +0200
Subject: [PATCH 114/153] fix: the preview reloads after a saved rule after
 merging #274 and #273

#274 saves each rule with saveSingleRule; saveBlockLogic is gone.

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

diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index 0b95fbb3..dc9818d1 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -20,6 +20,9 @@ vi.mock("@/api/blocks", () => ({ callUpdateFormBlock: vi.fn() }));
 vi.mock("@/api/interactions", () => ({
     callUpdateFormBlockInteraction: vi.fn(),
 }));
+vi.mock("@/api/logics", () => ({
+    callUpdateFormBlockLogic: vi.fn(async () => ({ status: 200, data: true })),
+}));
 
 // the form page is /<uuid>
 window.route = ((name: string, params?: { uuid?: string }) =>
@@ -225,7 +228,13 @@ describe("the preview frame", () => {
 
     it.each([
         ["a new choice", () => useNotice().clearSaveError("createInteraction:2")],
-        ["saved rules", () => useLogic().saveBlockLogic()],
+        [
+            "a saved rule",
+            () => {
+                useLogic().block = second;
+                return useLogic().saveSingleRule({ uuid: "r1" } as FormBlockLogic);
+            },
+        ],
     ])("loads the form again at the open question after %s", async (_, save) => {
         const wrapper = mountFrame(first, realPinia());
         const before = wrapper.get("iframe").element;
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index 7184773d..ef17170f 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -114,7 +114,7 @@ useNotice().$onAction(({ name, args, after }) => {
   }
 });
 useLogic().$onAction(({ name, after }) => {
-  if (name === "saveBlockLogic") after(() => nextTick(reload));
+  if (name === "saveSingleRule") after(() => nextTick(reload));
 });
 
 watch(

From 32f854bbb7089cfad8294d7187f26d51f1505334 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:40:06 +0200
Subject: [PATCH 115/153] fix: an empty form keeps the Preview button on a
 phone after merging #276 and #273

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/FormDocument.test.ts         | 14 ++++++++++++++
 .../components/Factory/Document/FormDocument.vue  | 15 +++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 85108f61..58fe4ff6 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -174,6 +174,20 @@ describe("the form document", () => {
         expect(outline?.element.nextElementSibling?.textContent).toBe("Preview");
     });
 
+    it("keeps the page's actions on an empty form, without Outline and the count", () => {
+        useForm().blocks = [];
+        wrapper = mount(FormDocument, {
+            props: { status: "loaded" },
+            slots: { actions: "<button type='button'>Preview</button>" },
+            global: { stubs },
+        });
+
+        const labels = wrapper.findAll("button").map((button) => button.text());
+        expect(labels).toContain("Preview");
+        expect(labels).not.toContain("Outline");
+        expect(wrapper.text()).not.toContain("0 questions");
+    });
+
     it("reads out where a moved question went", async () => {
         useForm().blocks = blocks;
         wrapper = mount(FormDocument, {
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 7dd669d3..59986442 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -24,12 +24,15 @@
 
         <template v-else>
           <h1 class="sr-only">Questions</h1>
-          <div
-            v-if="store.hasBlocks"
-            class="mb-4 flex items-center justify-between gap-2 pl-12"
-          >
-            <p class="text-sm tabular-nums text-grey-600">{{ countLine }}</p>
-            <div class="flex gap-2">
+          <div class="mb-4 flex items-center justify-between gap-2 pl-12">
+            <p
+              v-if="store.hasBlocks"
+              class="text-sm tabular-nums text-grey-600"
+            >
+              {{ countLine }}
+            </p>
+            <!-- an empty form keeps Preview here, on the right -->
+            <div class="ml-auto flex gap-2">
               <!-- from lg it sits in the margin, out of the scrolling column, so it stays in view;
                 below sm an icon, so Preview fits beside it; clicks land on the button,
                 so focus can go back to it -->

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 116/153] 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(

From ef472fa15f36595b0e19baa6d1da053578736159 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:46:21 +0200
Subject: [PATCH 117/153] fix: give the open end card the question card's phone
 sizes and one focus bar

touch-fields on the card (44 px fields with 16 px text, 44 px switch tap
area below 1024), a 44 px tap area on "Also in Settings", the number
column at w-8 below 640 like the questions, and no wrapper bar around the
text: the bare editor draws its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts       | 15 +++++++++++++++
 .../Factory/Document/EndScreenBlock.vue           | 11 ++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 193541af..3b109d52 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -112,6 +112,21 @@ describe("the end screen in the document", () => {
         expect(block.find("#end-screen-headline").exists()).toBe(false);
     });
 
+    it("has the question card's phone sizes, number column and focus bar", async () => {
+        const block = await open();
+        const [number, card] = block.findAll("#row-end-screen > div");
+
+        expect(number.classes()).toEqual(
+            expect.arrayContaining(["w-8", "sm:w-12"]),
+        );
+        expect(card.classes()).toContain("touch-fields");
+        expect(block.get("a").classes()).toContain("min-h-11");
+        // the editor draws its own bar
+        expect(block.find(".focus-within\\:border-blue-500").exists()).toBe(
+            false,
+        );
+    });
+
     it("saves only what changed, right away when you leave the block", async () => {
         const block = await open();
 
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 58b20d29..d350493e 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="row-end-screen" class="flex items-start">
-    <div class="flex w-12 shrink-0 justify-end pr-2 pt-3">
+    <div class="flex w-8 shrink-0 justify-end pr-2 pt-3 sm:w-12">
       <span class="flex h-6 items-center text-grey-500">
         <D9Icon name="flag" aria-hidden="true" />
       </span>
@@ -22,7 +22,7 @@
 
     <div
       v-else-if="isOpen"
-      class="min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+      class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
       @focusout="leave"
     >
       <div class="flex items-center gap-3">
@@ -43,10 +43,7 @@
         >
       </div>
 
-      <!-- the same focus sign as the headline -->
-      <div
-        class="-ml-2 border-l-2 border-transparent pl-1.5 focus-within:border-blue-500"
-      >
+      <div>
         <span id="end-screen-text-label" class="sr-only">End screen text</span>
         <Editor id="end-screen-text" v-model="draft.eoc_text" bare />
       </div>
@@ -65,7 +62,7 @@
           />
           <Link
             :href="settingsLink"
-            class="ml-auto text-xs text-grey-600 underline hover:text-grey-900"
+            class="ml-auto inline-flex min-h-11 items-center text-xs text-grey-600 underline hover:text-grey-900 lg:min-h-0"
             >Also in Settings</Link
           >
         </div>

From aa1c1f43b469927ad493b8ff0adc6a559c331966 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:46:32 +0200
Subject: [PATCH 118/153] fix: name the end screen in its save error

"Your change to the end screen wasn't saved.", like a question's error
names the question. The questions' text stays the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/EndScreenBlock.test.ts  | 2 +-
 resources/js/stores/notice.ts                              | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 3b109d52..d7ece47c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -343,7 +343,7 @@ describe("the end screen in the document", () => {
         await flushPromises();
 
         expect(useNotice().message).toBe(
-            "Your change wasn't saved: The cta link field format is invalid.",
+            "Your change to the end screen wasn't saved: The cta link field format is invalid.",
         );
         expect(useForm().form?.cta_link).toBe("https://example.com/cal");
     });
diff --git a/resources/js/stores/notice.ts b/resources/js/stores/notice.ts
index 80a38a05..59d3e14b 100644
--- a/resources/js/stores/notice.ts
+++ b/resources/js/stores/notice.ts
@@ -43,6 +43,9 @@ function questionName(block: FormBlockModel): string {
     return quoted ? `question ${number} (${quoted})` : `question ${number}`;
 }
 
+// saves without a block, by what they change
+const saveNames: Record<string, string> = { saveEndScreen: "the end screen" };
+
 export const useNotice = defineStore("notice", {
     state: (): NoticeStore => {
         return {
@@ -109,7 +112,9 @@ export const useNotice = defineStore("notice", {
             save: string,
             block?: FormBlockModel | null,
         ) {
-            const name = block ? questionName(block) : "";
+            const name = block
+                ? questionName(block)
+                : (saveNames[save] ?? "");
             const change = name ? `Your change to ${name}` : "Your change";
             const response =
                 error instanceof AxiosError ? error.response : undefined;

From 4b571197b2e94d978d2f9217e1b4ad98991a1c6d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:48:07 +0200
Subject: [PATCH 119/153] fix: keep the end screen's hidden label inside the
 document

The closed row's absolute sr-only label had no positioned parent up to
the editor's outer box, so it stretched the page past the document's
scroll box: the page grew to over 3000 px and could scroll the top bar
out of view.

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

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index d7ece47c..1025d4b5 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -76,6 +76,13 @@ describe("the end screen in the document", () => {
         expect(text).toContain("Button: Add to calendar");
     });
 
+    it("keeps its hidden label inside the document's scroll box", () => {
+        // else the absolute sr-only label stretches the whole page
+        expect(mountBlock().get("#row-end-screen").classes()).toContain(
+            "relative",
+        );
+    });
+
     it("shows the default headline people see when it has none", async () => {
         useForm().form = { ...form, eoc_headline: null, show_cta_link: false };
         const text = mountBlock().find("button").text();
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index d350493e..97dbf42c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="row-end-screen" class="flex items-start">
+  <div id="row-end-screen" class="relative flex items-start">
     <div class="flex w-8 shrink-0 justify-end pr-2 pt-3 sm:w-12">
       <span class="flex h-6 items-center text-grey-500">
         <D9Icon name="flag" aria-hidden="true" />

From a3a6f5bf32fc5fffaa0d2cea0cd3cfabd94d8169 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:49:50 +0200
Subject: [PATCH 120/153] fix: use plain words in the answer field, rating,
 date and file settings

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Main/ConfigureDate.vue   |  6 +++---
 .../js/components/Factory/Main/ConfigureFile.vue   | 13 ++++++-------
 .../js/components/Factory/Main/ConfigureInput.vue  | 12 ++++++++----
 .../js/components/Factory/Main/ConfigureRange.vue  | 14 ++++++--------
 .../components/Factory/Main/ConfigureTextarea.vue  |  8 ++++----
 resources/js/components/FieldLabels.test.ts        |  2 +-
 6 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/resources/js/components/Factory/Main/ConfigureDate.vue b/resources/js/components/Factory/Main/ConfigureDate.vue
index e95297a6..fe9e008f 100644
--- a/resources/js/components/Factory/Main/ConfigureDate.vue
+++ b/resources/js/components/Factory/Main/ConfigureDate.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <div class="mb-4">
-      <D9Label id="date-min" label="Min Date" />
+      <D9Label id="date-min" label="Min date" />
       <D9Input id="date-min" type="date" block v-model="minDate" />
     </div>
     <div class="mb-4">
-      <D9Label id="date-max" label="Max Date" />
+      <D9Label id="date-max" label="Max date" />
       <D9Input id="date-max" type="date" block v-model="maxDate" />
     </div>
     <div class="mb-4 flex items-center justify-between">
-      <D9Label id="no-past-dates" label="Do not allow past dates" />
+      <D9Label id="no-past-dates" label="No dates in the past" />
       <D9Switch id="no-past-dates" label="" v-model="noPastDates" />
     </div>
   </div>
diff --git a/resources/js/components/Factory/Main/ConfigureFile.vue b/resources/js/components/Factory/Main/ConfigureFile.vue
index 04ea2fd3..f65212d5 100644
--- a/resources/js/components/Factory/Main/ConfigureFile.vue
+++ b/resources/js/components/Factory/Main/ConfigureFile.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <D9Label label="Allowed File Types" />
+    <D9Label label="File types" />
     <div
       v-for="fileType in availableFileTypes"
       :key="fileType.key"
@@ -12,17 +12,17 @@
         :label="fileType.label"
       />
     </div>
+    <p class="mt-1 text-xs text-grey-600">None ticked: all types allowed.</p>
   </div>
 
   <div class="mb-4">
     <D9Label
       id="file-max-files"
-      label="Max Files"
-      :description="`The maximum number of allowed files to upload (max. ${maxFiles})`"
+      label="Most files"
+      :description="`1 to ${maxFiles}`"
     />
     <D9Input
       id="file-max-files"
-      :placeholder="`The maximum number of allowed files to upload (max. ${maxFiles})`"
       type="number"
       :min="1"
       :max="maxFiles"
@@ -35,12 +35,11 @@
   <div class="mb-4">
     <D9Label
       id="file-max-size"
-      label="Max Filesize"
-      :description="`The maximum file size in MB (max. ${maxFileSize} MB per file)`"
+      label="Largest file (MB)"
+      :description="`Up to ${maxFileSize} MB per file`"
     />
     <D9Input
       id="file-max-size"
-      :placeholder="`The maximum file size in MB (max. ${maxFileSize} MB per file)`"
       type="number"
       :min="1"
       :max="maxFileSize"
diff --git a/resources/js/components/Factory/Main/ConfigureInput.vue b/resources/js/components/Factory/Main/ConfigureInput.vue
index e65e6b41..3a79c6bd 100644
--- a/resources/js/components/Factory/Main/ConfigureInput.vue
+++ b/resources/js/components/Factory/Main/ConfigureInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4">
-    <D9Label id="input-placeholder" label="Placeholder Text" />
+    <D9Label id="input-placeholder" label="Placeholder" />
     <D9Input
       id="input-placeholder"
       placeholder="Your placeholder text"
@@ -14,8 +14,8 @@
     <div class="mb-4">
       <D9Label
         id="input-decimal-places"
-        label="Decimal Places"
-        description="If empty, no decimal places are allowed"
+        label="Decimal places"
+        description="Leave empty for whole numbers only."
       />
       <D9Input
         id="input-decimal-places"
@@ -29,7 +29,11 @@
       />
     </div>
     <div class="mb-4">
-      <D9Label id="input-symbol" label="Show Symbol" />
+      <D9Label
+        id="input-symbol"
+        label="Symbol"
+        description="Shown next to the number, e.g. € or kg."
+      />
       <D9Input id="input-symbol" v-model="useSymbol" block maxlength="3" />
     </div>
   </template>
diff --git a/resources/js/components/Factory/Main/ConfigureRange.vue b/resources/js/components/Factory/Main/ConfigureRange.vue
index 37e661a6..bd714b58 100644
--- a/resources/js/components/Factory/Main/ConfigureRange.vue
+++ b/resources/js/components/Factory/Main/ConfigureRange.vue
@@ -1,20 +1,18 @@
 <template>
   <div v-if="isInitialized">
     <div class="mb-4">
-      <D9Label id="range-min" label="Min Rating" />
+      <D9Label id="range-min" label="Lowest value" />
       <D9Input
         id="range-min"
-        placeholder="Min Rating"
         type="number"
         block
         v-model="startValue"
       />
     </div>
     <div class="mb-4">
-      <D9Label id="range-max" label="Max Rating" />
+      <D9Label id="range-max" label="Highest value" />
       <D9Input
         id="range-max"
-        placeholder="Max Rating"
         type="number"
         block
         v-model="endValue"
@@ -22,20 +20,20 @@
     </div>
 
     <div class="mb-4">
-      <D9Label id="range-label-left" label="Left Label" />
+      <D9Label id="range-label-left" label="Label for lowest" />
       <D9Input
         id="range-label-left"
-        placeholder="Left Label"
+        placeholder="e.g. Not likely"
         type="text"
         block
         v-model="labelLeft"
       />
     </div>
     <div class="mb-4">
-      <D9Label id="range-label-right" label="Right Label" />
+      <D9Label id="range-label-right" label="Label for highest" />
       <D9Input
         id="range-label-right"
-        placeholder="Right Label"
+        placeholder="e.g. Very likely"
         type="text"
         block
         v-model="labelRight"
diff --git a/resources/js/components/Factory/Main/ConfigureTextarea.vue b/resources/js/components/Factory/Main/ConfigureTextarea.vue
index 4f938b5b..1f04bcdb 100644
--- a/resources/js/components/Factory/Main/ConfigureTextarea.vue
+++ b/resources/js/components/Factory/Main/ConfigureTextarea.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="mb-4">
-      <D9Label id="textarea-placeholder" label="Placeholder Text" />
+      <D9Label id="textarea-placeholder" label="Placeholder" />
       <D9Input
         id="textarea-placeholder"
         placeholder="Your placeholder text"
@@ -13,8 +13,8 @@
     <div class="mb-4">
       <D9Label
         id="textarea-rows"
-        label="Rows"
-        description="The max allowed number of rows is 10"
+        label="Height in lines"
+        description="1 to 10"
       />
       <D9Input
         id="textarea-rows"
@@ -28,7 +28,7 @@
       />
     </div>
     <div class="mb-4">
-      <D9Label id="textarea-max-chars" label="Max Characters" />
+      <D9Label id="textarea-max-chars" label="Max characters" />
       <D9Input
         id="textarea-max-chars"
         placeholder="The maximum number of characters"
diff --git a/resources/js/components/FieldLabels.test.ts b/resources/js/components/FieldLabels.test.ts
index ca3e2991..0a67df49 100644
--- a/resources/js/components/FieldLabels.test.ts
+++ b/resources/js/components/FieldLabels.test.ts
@@ -15,7 +15,7 @@ type Node = {
 
 // labels that head a group of controls or show a value, not a single field
 const groupLabels = [
-    "Factory/Main/ConfigureFile.vue: Allowed File Types",
+    "Factory/Main/ConfigureFile.vue: File types",
     "Factory/Settings/TemplateExport.vue: Template Files",
     "Factory/Settings/partials/ImageUpload.vue: (bound)",
     "Pages/Teams/Create.vue: Team Owner",

From 3d5ca41dcc613b6bd21ed4a98464d053556f4119 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 03:51:11 +0200
Subject: [PATCH 121/153] fix: say choice and consent in the choice and consent
 settings

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/EmptyState.vue                 |  4 ++--
 .../js/components/Factory/Main/ConfigureClicks.vue     |  3 +--
 .../js/components/Factory/Main/ConfigureConsents.vue   |  5 ++---
 .../Factory/Main/Interactions/ClickInteraction.vue     |  2 +-
 .../Factory/Main/Interactions/ConsentInteraction.vue   | 10 ++++------
 .../Main/Interactions/CustomResponseSettings.vue       |  6 ++----
 .../Main/Interactions/RandomizeResponsesSetting.vue    |  4 +---
 .../js/components/Factory/Main/NumberSettings.test.ts  | 10 +++++-----
 .../components/Factory/Shared/DeleteChoiceDialog.vue   |  4 ++--
 .../js/components/Factory/Shared/DeleteDialogs.test.ts |  4 ++--
 10 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/resources/js/components/EmptyState.vue b/resources/js/components/EmptyState.vue
index 99191fb6..cbe2caa8 100644
--- a/resources/js/components/EmptyState.vue
+++ b/resources/js/components/EmptyState.vue
@@ -4,7 +4,7 @@
   >
     <div :class="isLoading ? 'opacity-0' : ''">
       <h3 class="font-heading font-medium text-grey-900">{{ title }}</h3>
-      <small class="block font-sans text-sm">
+      <small v-if="description" class="block font-sans text-sm">
         {{ description }}
       </small>
     </div>
@@ -22,7 +22,7 @@ import { D9Spinner } from "@deck9/ui";
 
 defineProps<{
   title: string;
-  description: string;
+  description?: string;
   isLoading?: boolean;
 }>();
 </script>
diff --git a/resources/js/components/Factory/Main/ConfigureClicks.vue b/resources/js/components/Factory/Main/ConfigureClicks.vue
index ffa52296..16fa6408 100644
--- a/resources/js/components/Factory/Main/ConfigureClicks.vue
+++ b/resources/js/components/Factory/Main/ConfigureClicks.vue
@@ -2,8 +2,7 @@
   <div>
     <EmptyState
       v-if="editableInteractions?.length === 0"
-      title="Nothing here yet."
-      description="Add your first choice with the button below."
+      title="No choices yet."
     />
 
     <Container
diff --git a/resources/js/components/Factory/Main/ConfigureConsents.vue b/resources/js/components/Factory/Main/ConfigureConsents.vue
index ccd1c473..35f9a6ac 100644
--- a/resources/js/components/Factory/Main/ConfigureConsents.vue
+++ b/resources/js/components/Factory/Main/ConfigureConsents.vue
@@ -2,8 +2,7 @@
   <div>
     <EmptyState
       v-if="workbench.currentInteractions?.length === 0"
-      title="Nothing here yet."
-      description="Add your first policy with the button below."
+      title="No consents yet."
     />
 
     <Container
@@ -34,7 +33,7 @@
         @click="createConsentPolicy"
       >
         <D9Icon name="plus" aria-hidden="true" />
-        Add policy
+        Add consent
       </button>
     </div>
   </div>
diff --git a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
index 37038376..03d63e85 100644
--- a/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ClickInteraction.vue
@@ -14,7 +14,7 @@
           type="text"
           v-model="label"
           block
-          placeholder="Label"
+          :placeholder="`Choice ${index + 1}`"
           @keyup.enter="keyboardCommands"
           @keyup.up.exact="keyboardCommands"
           @keyup.down.exact="keyboardCommands"
diff --git a/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue b/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
index 3cb16fb8..0be0b728 100644
--- a/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
+++ b/resources/js/components/Factory/Main/Interactions/ConsentInteraction.vue
@@ -4,11 +4,11 @@
     :class="[index === 0 ? 'mt-4' : 'mt-8']"
   >
     <div class="flex items-center">
-      <h3 class="font-medium">Consent Policy</h3>
+      <h3 class="font-medium">Consent</h3>
       <IndexItem class="ml-2" type="button" v-bind="{ index }" />
       <ChoiceRowActions
         class="ml-auto"
-        :label="label ? `policy “${label}”` : `policy ${index + 1}`"
+        :label="label ? `consent “${label}”` : `consent ${index + 1}`"
         @onDelete="askDelete"
       />
     </div>
@@ -37,14 +37,12 @@
         </div>
         <div class="flex items-center">
           <D9Switch
-            onLabel="Yes"
-            offLabel="No"
-            label="Opt-In Required"
+            label="Must be ticked"
             :id="item.id + '_required'"
             v-model="isRequired"
           />
           <label :for="item.id + '_required'" class="ml-2 inline-block"
-            >Consent required</label
+            >Must be ticked</label
           >
         </div>
       </section>
diff --git a/resources/js/components/Factory/Main/Interactions/CustomResponseSettings.vue b/resources/js/components/Factory/Main/Interactions/CustomResponseSettings.vue
index ca2471e4..b404b226 100644
--- a/resources/js/components/Factory/Main/Interactions/CustomResponseSettings.vue
+++ b/resources/js/components/Factory/Main/Interactions/CustomResponseSettings.vue
@@ -1,13 +1,11 @@
 <template>
   <div>
     <div class="flex justify-between">
-      <D9Label id="custom-response" label="Allow Custom Response" />
+      <D9Label id="custom-response" label="Add “Other” with a text field" />
       <D9Switch
         id="custom-response"
         label=""
         v-model="useCustomResponse"
-        onLabel="yes"
-        offLabel="no"
         @change="updateCustomResponseSetting"
       />
     </div>
@@ -15,7 +13,7 @@
       <D9Input
         v-model="customResponseLabel"
         block
-        placeholder="Label for Custom Response Option"
+        placeholder="Label for “Other”"
       />
     </div>
   </div>
diff --git a/resources/js/components/Factory/Main/Interactions/RandomizeResponsesSetting.vue b/resources/js/components/Factory/Main/Interactions/RandomizeResponsesSetting.vue
index 9c2dc1bc..8ca17efe 100644
--- a/resources/js/components/Factory/Main/Interactions/RandomizeResponsesSetting.vue
+++ b/resources/js/components/Factory/Main/Interactions/RandomizeResponsesSetting.vue
@@ -1,13 +1,11 @@
 <template>
   <div>
     <div class="flex justify-between">
-      <D9Label id="randomize-responses" label="Randomize Responses" />
+      <D9Label id="randomize-responses" label="Shuffle choices" />
       <D9Switch
         id="randomize-responses"
         label=""
         v-model="randomizeResponses"
-        onLabel="yes"
-        offLabel="no"
         @change="updateRandomizeResponsesSetting"
       />
     </div>
diff --git a/resources/js/components/Factory/Main/NumberSettings.test.ts b/resources/js/components/Factory/Main/NumberSettings.test.ts
index ce48eccf..73893677 100644
--- a/resources/js/components/Factory/Main/NumberSettings.test.ts
+++ b/resources/js/components/Factory/Main/NumberSettings.test.ts
@@ -37,7 +37,7 @@ vi.mock("../utils/useInteractionsUtils", () => ({
     }),
 }));
 
-// types into one field and returns the options the settings would save
+// types into one field, found by id, and returns the options the settings would save
 const savedOptions = async (
     component: Component,
     field: string,
@@ -58,19 +58,19 @@ const savedOptions = async (
         },
     });
     await flushPromises();
-    await wrapper.find(`input[placeholder^="${field}"]`).setValue(typed);
+    await wrapper.find(`input#${field}`).setValue(typed);
     await flushPromises();
 
     return save.mock.lastCall?.[0].options;
 };
 
 const savedDecimalPlaces = async (typed: string) =>
-    (await savedOptions(ConfigureInput, "Number of decimal places", typed))
+    (await savedOptions(ConfigureInput, "input-decimal-places", typed))
         ?.decimalPlaces;
 
 describe("file limits in the file block settings", () => {
     it("clamps max files to 1 to 10 before saving", async () => {
-        const files = "The maximum number of allowed files";
+        const files = "file-max-files";
         expect(
             (await savedOptions(ConfigureFile, files, "50"))?.allowedFiles,
         ).toBe(10);
@@ -80,7 +80,7 @@ describe("file limits in the file block settings", () => {
     });
 
     it("clamps max size to 1 to 8 MB before saving", async () => {
-        const size = "The maximum file size";
+        const size = "file-max-size";
         expect(
             (await savedOptions(ConfigureFile, size, "99"))?.allowedFileSize,
         ).toBe(8);
diff --git a/resources/js/components/Factory/Shared/DeleteChoiceDialog.vue b/resources/js/components/Factory/Shared/DeleteChoiceDialog.vue
index 16b197db..152c8802 100644
--- a/resources/js/components/Factory/Shared/DeleteChoiceDialog.vue
+++ b/resources/js/components/Factory/Shared/DeleteChoiceDialog.vue
@@ -3,7 +3,7 @@
     :show="choice !== null"
     :title="title"
     :text="text"
-    :confirm-label="policy ? 'Delete policy' : 'Delete choice'"
+    :confirm-label="policy ? 'Delete consent' : 'Delete choice'"
     @close="emit('close')"
     @confirm="emit('confirm')"
   />
@@ -31,7 +31,7 @@ const title = computed(() => {
   const label = props.choice?.label;
 
   if (props.policy) {
-    return label ? `Delete policy “${label}”?` : "Delete this policy?";
+    return label ? `Delete consent “${label}”?` : "Delete this consent?";
   }
 
   return label ? `Delete “${label}”?` : "Delete this choice?";
diff --git a/resources/js/components/Factory/Shared/DeleteDialogs.test.ts b/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
index 3bc410c5..4d7ba481 100644
--- a/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
+++ b/resources/js/components/Factory/Shared/DeleteDialogs.test.ts
@@ -361,12 +361,12 @@ describe("asking before a delete", () => {
             await pressTrash();
 
             expect(wrapper.emitted("onDelete")).toBeUndefined();
-            expect(wrapper.text()).toContain("Delete policy “Privacy policy”?");
+            expect(wrapper.text()).toContain("Delete consent “Privacy policy”?");
             expect(wrapper.text()).toContain(
                 "3 people agreed to it. Their answers to it will be deleted.",
             );
             expect(wrapper.find("button.bg-red-600").text()).toBe(
-                "Delete policy",
+                "Delete consent",
             );
 
             await wrapper.find("button.bg-red-600").trigger("click");

From 0e9e6a9c9169f690b9cfdbf742fd5fa68538e460 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:01:57 +0200
Subject: [PATCH 122/153] fix: name the settings by answer type and say where
 the short name shows

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionSettings.test.ts | 37 +++++++++++++++++++
 .../Factory/Document/QuestionSettings.vue     | 28 +++++++++++---
 2 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/components/Factory/Document/QuestionSettings.test.ts

diff --git a/resources/js/components/Factory/Document/QuestionSettings.test.ts b/resources/js/components/Factory/Document/QuestionSettings.test.ts
new file mode 100644
index 00000000..23067a5f
--- /dev/null
+++ b/resources/js/components/Factory/Document/QuestionSettings.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { shallowMount } from "@vue/test-utils";
+import QuestionSettings from "./QuestionSettings.vue";
+
+const heading = (type: string, interactionType?: FormBlockInteractionType) =>
+    shallowMount(QuestionSettings, {
+        props: {
+            id: "settings",
+            block: {
+                uuid: "q1",
+                type,
+                interactions: [],
+            } as unknown as FormBlockModel,
+            interactionType,
+        },
+    })
+        .find("h3")
+        .text();
+
+describe("the settings heading", () => {
+    it.each([
+        ["radio", "button", "Choices"],
+        ["input-short", "input", "Answer field"],
+        ["input-long", "textarea", "Answer field"],
+        ["rating", "range", "Rating"],
+        ["scale", "range", "Scale"],
+        ["date", "date", "Date"],
+        ["input-file", "file", "File upload"],
+        ["consent", "consent", "Consent"],
+        ["none", undefined, "Settings"],
+    ] as const)(
+        "names a %s question's settings %s → %s",
+        (type, interaction, text) => {
+            expect(heading(type, interaction)).toBe(text);
+        },
+    );
+});
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index 17893bb0..f98eafb7 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -11,7 +11,7 @@
       class="text-xs font-semibold text-grey-600"
       :class="sheet && 'sr-only'"
     >
-      Settings
+      {{ heading }}
     </h3>
 
     <ConfigureInput v-if="interactionType === 'input'" />
@@ -33,11 +33,10 @@
       <label
         :for="`${id}-identifier`"
         class="block text-sm font-medium text-grey-900"
-        >Identifier</label
+        >Short name</label
       >
       <p :id="`${id}-identifier-help`" class="mb-1 text-xs text-grey-600">
-        This name is used when submitting your form through webhooks and in the
-        export.
+        Used in prefill links, webhooks, emails and the submissions table.
       </p>
       <D9Input
         :id="`${id}-identifier`"
@@ -68,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { D9Input, D9Switch } from "@deck9/ui";
 import { useWorkbench } from "@/stores";
 import useActiveInteractions from "@/components/Factory/Shared/useActiveInteractions";
@@ -91,6 +90,25 @@ const props = defineProps<{
 const workbench = useWorkbench();
 const { editableInteractions } = useActiveInteractions(props.block);
 
+// named by answer type; "Text only" has no answer settings
+const headings: Partial<Record<FormBlockInteractionType, string>> = {
+  button: "Choices",
+  input: "Answer field",
+  textarea: "Answer field",
+  date: "Date",
+  file: "File upload",
+  consent: "Consent",
+};
+const heading = computed(() => {
+  if (props.interactionType === "range") {
+    return props.block.type === "scale" ? "Scale" : "Rating";
+  }
+
+  return (
+    (props.interactionType && headings[props.interactionType]) ?? "Settings"
+  );
+});
+
 const title = ref(props.block.title ?? "");
 const hidden = ref(props.block.is_disabled ?? false);
 

From 0a5b7a1c8ad883c80f74fc5a6ee347ffa3a7fb71 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:02:25 +0200
Subject: [PATCH 123/153] fix: show every switch in the editor as on or off

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/EndScreenBlock.vue   | 2 --
 resources/js/components/Factory/Document/QuestionCard.vue     | 2 --
 resources/js/components/Factory/Document/QuestionSettings.vue | 2 --
 3 files changed, 6 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 58b20d29..5afb81f5 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -60,8 +60,6 @@
             id="end-screen-button"
             v-model="draft.show_cta_link"
             label="Button"
-            onLabel="Yes"
-            offLabel="No"
           />
           <Link
             :href="settingsLink"
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index 1a3664d4..c99dc8b1 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -50,8 +50,6 @@
           :id="`${id}-required`"
           v-model="required"
           label="Required"
-          onLabel="Yes"
-          offLabel="No"
         />
       </div>
 
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index f98eafb7..ce1e0da3 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -59,8 +59,6 @@
         :id="`${id}-hidden`"
         v-model="hidden"
         label="Hide this question"
-        onLabel="Yes"
-        offLabel="No"
       />
     </div>
   </div>

From 3170da7751e3fefd0029004ef5a0a6101aef2fdb Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:03:35 +0200
Subject: [PATCH 124/153] fix: use plain words in the text editor's toolbar,
 counter and prompts

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/Factory/Shared/Editor.test.ts  | 20 ++++++-------------
 .../js/components/Factory/Shared/Editor.vue   | 20 +++++++++----------
 resources/js/utils/useContentLength.ts        |  7 +------
 3 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/resources/js/components/Factory/Shared/Editor.test.ts b/resources/js/components/Factory/Shared/Editor.test.ts
index c0a8c4c2..2140bcb1 100644
--- a/resources/js/components/Factory/Shared/Editor.test.ts
+++ b/resources/js/components/Factory/Shared/Editor.test.ts
@@ -72,23 +72,15 @@ describe("block text counter", () => {
     editor.commands.undo();
     await nextTick();
 
-    expect(opened).toMatch(/^\d+ chars, \d+ words$/);
+    expect(opened).toMatch(/^\d+ characters$/);
     expect(opened).toBe(counter(wrapper));
   });
 
-  it("counts an empty text as 0 chars, 0 words", async () => {
-    expect(counter(await open())).toBe("0 chars, 0 words");
+  it("counts an empty text as 0 characters", async () => {
+    expect(counter(await open())).toBe("0 characters");
   });
 
-  it.each([
-    ["<h2>Hi</h2><p>there</p>", 2],
-    ["<ul><li><p>one</p></li><li><p>two</p></li></ul>", 2],
-    ["<p></p><p></p>", 0],
-  ])("counts %s as %i words", async (html, words) => {
-    expect(counter(await open(html))).toMatch(`, ${words} words`);
-  });
-
-  it("counts a text of only spaces as 0 words", async () => {
+  it("counts spaces as characters", async () => {
     const wrapper = await open();
     const editor = wrapper
       .findComponent(EditorContent)
@@ -97,7 +89,7 @@ describe("block text counter", () => {
     editor.view.dispatch(editor.state.tr.insertText("   "));
     await nextTick();
 
-    expect(counter(wrapper)).toBe("3 chars, 0 words");
+    expect(counter(wrapper)).toBe("3 characters");
   });
 });
 
@@ -114,6 +106,6 @@ describe("a bare editor", () => {
       .findComponent(EditorContent)
       .props("editor") as TiptapEditor;
     expect(editor.view.dom.classList).not.toContain("border");
-    expect(wrapper.text()).not.toContain("chars");
+    expect(wrapper.text()).not.toContain("characters");
   });
 });
diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index faa6af98..a078f938 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -53,7 +53,7 @@
           v-bind="{
             isActive: editor?.isActive('heading', { level: 2 }) ?? false,
             icon: 'heading',
-            label: 'Heading 1',
+            label: 'Heading',
             subLabel: '1',
           }"
           @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
@@ -62,7 +62,7 @@
           v-bind="{
             isActive: editor?.isActive('heading', { level: 3 }) ?? false,
             icon: 'heading',
-            label: 'Heading 2',
+            label: 'Subheading',
             subLabel: '2',
           }"
           @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()"
@@ -73,7 +73,7 @@
           v-bind="{
             isActive: editor?.isActive('bulletList') ?? false,
             icon: 'list-ul',
-            label: 'Bullet List',
+            label: 'Bullet list',
           }"
           @click="editor?.chain().focus().toggleBulletList().run()"
         />
@@ -81,7 +81,7 @@
           v-bind="{
             isActive: editor?.isActive('orderedList') ?? false,
             icon: 'list-ol',
-            label: 'Ordered List',
+            label: 'Numbered list',
           }"
           @click="editor?.chain().focus().toggleOrderedList().run()"
         />
@@ -109,7 +109,7 @@
           v-bind="{
             isActive: false,
             icon: 'remove-format',
-            label: 'Remove Formatting',
+            label: 'Clear formatting',
           }"
           @click="editor?.chain().focus().clearNodes().unsetAllMarks().run()"
         />
@@ -117,7 +117,7 @@
     </div>
     <editor-content :editor="editor" />
     <div v-if="counter" class="mt-1 text-xs text-grey-600">
-      {{ chars }} chars, {{ words }} words
+      {{ chars }} characters
     </div>
   </div>
 </template>
@@ -150,7 +150,7 @@ const {
 
 const content = ref("");
 
-const { chars, words } = useContentLength(content);
+const { chars } = useContentLength(content);
 
 const emit = defineEmits<{
   (event: "update:modelValue", value: string): void;
@@ -215,7 +215,7 @@ const setLink = () => {
   }
 
   const previousUrl = editor.value.getAttributes("link").href;
-  const url = window.prompt("URL", previousUrl);
+  const url = window.prompt("Link address", previousUrl);
 
   // cancelled
   if (url === null) {
@@ -244,7 +244,7 @@ const setImage = () => {
   }
 
   const previousUrl = editor.value.getAttributes("image").src;
-  const url = window.prompt("URL", previousUrl);
+  const url = window.prompt("Image address", previousUrl);
 
   // cancelled
   if (url === null || url === "") {
@@ -252,7 +252,7 @@ const setImage = () => {
   }
 
   if (!url.startsWith("https")) {
-    window.alert("Please enter a valid secure URL");
+    window.alert("The image address must start with https://");
     return;
   }
 
diff --git a/resources/js/utils/useContentLength.ts b/resources/js/utils/useContentLength.ts
index cba81805..d354fee3 100644
--- a/resources/js/utils/useContentLength.ts
+++ b/resources/js/utils/useContentLength.ts
@@ -2,15 +2,10 @@ import { computed, ComputedRef, Ref } from "vue";
 
 export function useContentLength(content: Ref<string>): {
     chars: ComputedRef<number>;
-    words: ComputedRef<number>;
 } {
     const chars = computed(() => {
         return content.value.length;
     });
 
-    const words = computed(() => {
-        return content.value.split(/\s+/).filter(Boolean).length;
-    });
-
-    return { chars, words };
+    return { chars };
 }

From 3e1e426719455e43c3cd709c289875f25486469d Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:03:35 +0200
Subject: [PATCH 125/153] fix: name new rules Rule 1 and give the group name an
 example

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/DocumentGroup.vue    | 2 +-
 resources/js/components/Factory/Document/Rules/ruleEditing.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index 9a8eedd6..ce351b3a 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -24,7 +24,7 @@
         :id="`${id}-name`"
         v-model="name"
         type="text"
-        placeholder="Group"
+        placeholder="e.g. About you"
         title="Use a group to show or hide several questions with one rule."
         class="h-11 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-base font-semibold lg:h-9 lg:text-sm text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
       />
diff --git a/resources/js/components/Factory/Document/Rules/ruleEditing.ts b/resources/js/components/Factory/Document/Rules/ruleEditing.ts
index df019ead..7c0d49dd 100644
--- a/resources/js/components/Factory/Document/Rules/ruleEditing.ts
+++ b/resources/js/components/Factory/Document/Rules/ruleEditing.ts
@@ -51,7 +51,7 @@ export function addRule(block: FormBlockModel) {
         ...logics,
         {
             form_block_id: block.id,
-            name: `Rule #${logics.length + 1}`,
+            name: `Rule ${logics.length + 1}`,
             action: isGroup ? "hide" : "goto",
             action_payload: null,
             evaluate: isGroup ? "before" : "after",

From 50015c0aa61616ff98a9c069c5e3820f4bb51246 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:07:45 +0200
Subject: [PATCH 126/153] docs: use the editor's new setting names in the help
 pages

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/embedding-forms.md            | 4 ++--
 docs/input-types/consent.md        | 2 +-
 docs/input-types/date.md           | 6 +++---
 docs/input-types/file-upload.md    | 6 +++---
 docs/input-types/long-text.md      | 4 ++--
 docs/input-types/multiplechoice.md | 2 +-
 docs/input-types/number.md         | 4 ++--
 docs/input-types/rating.md         | 8 ++++----
 docs/input-types/scale.md          | 8 ++++----
 docs/managing-submissions.md       | 2 +-
 docs/workbench/workbench.md        | 4 ++--
 11 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/docs/embedding-forms.md b/docs/embedding-forms.md
index 306a3109..ba20040d 100644
--- a/docs/embedding-forms.md
+++ b/docs/embedding-forms.md
@@ -115,13 +115,13 @@ https://app.getinput.co/form-uuid?iframe=1&hideTitle=1&alignLeft=1
 
 ## Prefill Questions
 
-You can fill in answers with URL parameters. The parameter name is the question's Identifier (open the question, then "More Settings"). For example, this fills the question with the Identifier `email`:
+You can fill in answers with URL parameters. The parameter name is the question's short name (open the question, then **Settings**, then **Short name**). For example, this fills the question with the short name `email`:
 
 ```
 https://app.getinput.co/form-uuid?email=ada@example.com
 ```
 
--   Works for short text, long text, email, number, phone and link questions. Parameters for other question types or unknown Identifiers are ignored.
+-   Works for short text, long text, email, number, phone and link questions. Parameters for other question types or unknown short names are ignored.
 -   The question still shows, so the visitor can check and change the answer. A question skipped by a jump doesn't send its prefilled answer.
 -   The value shows as plain text. Encode special characters: `%2B` for `+`, `%20` for a space.
 -   Number questions take digits with a dot as decimal separator, like `price=12.5`, rounded to the question's decimal places. Anything else is ignored.
diff --git a/docs/input-types/consent.md b/docs/input-types/consent.md
index 00830474..8dbb3012 100644
--- a/docs/input-types/consent.md
+++ b/docs/input-types/consent.md
@@ -7,7 +7,7 @@ The Consent input type is designed specifically for gathering agreement from use
 1. Choose **Consent** as the input type
 2. Enter a clear message explaining what the user is consenting to
 3. Configure the consent option with a concise label
-4. Toggle "Opt-In Required" if the consent is mandatory to proceed
+4. Turn on "Must be ticked" if people must agree to go on
 
 ::: tip Best Practice
 < Keep consent messages clear and specific. Explain exactly what users are agreeing to, and include links to relevant policies when appropriate.
diff --git a/docs/input-types/date.md b/docs/input-types/date.md
index 328c8701..deb97f7c 100644
--- a/docs/input-types/date.md
+++ b/docs/input-types/date.md
@@ -7,9 +7,9 @@ The Date input type allows users to select dates from a calendar interface, maki
 1. Choose **Date** as the input type
 2. Enter the question or prompt asking for a date
 3. Configure the date restrictions (optional):
-    - **Minimum Date**: Earliest date users can select
-    - **Maximum Date**: Latest date users can select
-    - **No Past Dates**: Toggle to prevent selection of dates before today
+    - **Min date**: Earliest date users can select
+    - **Max date**: Latest date users can select
+    - **No dates in the past**: Turn on to prevent selection of dates before today
 
 ::: tip Best Practice
 < Always specify what kind of date you're asking for (appointment date, birth date, event date, etc.) and the expected format in your prompt.
diff --git a/docs/input-types/file-upload.md b/docs/input-types/file-upload.md
index af5bc001..9656032b 100644
--- a/docs/input-types/file-upload.md
+++ b/docs/input-types/file-upload.md
@@ -7,9 +7,9 @@ The File upload input type allows users to attach files to their form responses.
 1. Choose **File upload** as the input type
 2. Enter instructions for what files users should upload
 3. Configure the upload settings:
-    - **Maximum Files**: Set how many files users can upload
-    - **Maximum File Size**: Limit file size (in MB)
-    - **Allowed File Types**: Choose which file formats are accepted
+    - **Most files**: How many files users can upload (1 to 10)
+    - **Largest file (MB)**: Up to 8 MB per file
+    - **File types**: Choose which file formats are accepted. None ticked: all types allowed
 
 ::: tip Best Practice
 < Be specific about what files you're looking for and any requirements (format, size, resolution, etc.) to avoid confusion and unsuccessful uploads.
diff --git a/docs/input-types/long-text.md b/docs/input-types/long-text.md
index ca5e5ad0..7f88b859 100644
--- a/docs/input-types/long-text.md
+++ b/docs/input-types/long-text.md
@@ -7,8 +7,8 @@ The Long text input type provides a multi-line text area for collecting detailed
 1. Select **Long text** as the input type
 2. Enter the question or prompt
 3. Configure the text area options:
-   - **Rows**: Number of visible text rows (1-10, default: 5)
-   - **Maximum Characters**: Limit on response length (default: 500)
+   - **Height in lines**: How many lines the field shows (1 to 10, default: 5)
+   - **Max characters**: Limit on response length (default: 500)
    - **Placeholder**: Hint text shown when the field is empty
 4. Toggle the "Required" option if necessary
 
diff --git a/docs/input-types/multiplechoice.md b/docs/input-types/multiplechoice.md
index 7e7e4a4b..52615a8d 100644
--- a/docs/input-types/multiplechoice.md
+++ b/docs/input-types/multiplechoice.md
@@ -14,7 +14,7 @@ This input type allows users to select one option from a list of choices, perfec
 -   **Single Selection**: Users can select exactly one option
 -   **Visual Clarity**: Clear indication of which option is selected
 -   **Option Ordering**: Arrange options in a meaningful sequence
--   **Randomization**: Option to randomize choice order to reduce bias (if available)
+-   **Shuffle choices**: Show the choices in a random order to reduce bias
 
 ## Example Uses:
 
diff --git a/docs/input-types/number.md b/docs/input-types/number.md
index 1ac92c3d..85f66709 100644
--- a/docs/input-types/number.md
+++ b/docs/input-types/number.md
@@ -7,8 +7,8 @@ The Number input type is specifically designed for collecting numerical data wit
 1. Choose **Number** as the input type
 2. Enter the question or prompt
 3. Configure the number options:
-   - **Decimal Places**: How many decimal digits to allow (0-10)
-   - **Symbol**: Optional character(s) to display before the number (e.g., $, €, %)
+   - **Decimal places**: How many decimal digits to allow (0-10). Leave empty for whole numbers only
+   - **Symbol**: Shown next to the number, e.g. € or kg
    - **Placeholder**: Hint text to show when the field is empty
 4. Toggle the "Required" option if necessary
 
diff --git a/docs/input-types/rating.md b/docs/input-types/rating.md
index d9291023..a167d5dc 100644
--- a/docs/input-types/rating.md
+++ b/docs/input-types/rating.md
@@ -7,10 +7,10 @@ The Rating input type allows users to provide feedback on a visual scale using i
 1. Choose **Rating** as the input type
 2. Enter the prompt for what's being rated
 3. Configure the rating options:
-   - **Min Rating**: Starting point for the scale (default: 1)
-   - **Max Rating**: Maximum value on the scale (default: 5)
-   - **Left Label**: Optional text at the start of the scale (e.g., "Poor")
-   - **Right Label**: Optional text at the end of the scale (e.g., "Excellent")
+   - **Lowest value**: Starting point for the scale (default: 1)
+   - **Highest value**: Maximum value on the scale (default: 5)
+   - **Label for lowest**: Optional text at the start of the scale (e.g., "Poor")
+   - **Label for highest**: Optional text at the end of the scale (e.g., "Excellent")
    - **Icon**: Choose from stars, hearts, trophies, and other symbols
    - **Color**: Customize the color of the rating icons
 4. Toggle the "Required" option if necessary
diff --git a/docs/input-types/scale.md b/docs/input-types/scale.md
index a2c53c4b..070d6f70 100644
--- a/docs/input-types/scale.md
+++ b/docs/input-types/scale.md
@@ -7,10 +7,10 @@ The Scale input type presents users with a numerical range from which they can s
 1. Select **Scale** as the input type
 2. Enter the question or prompt
 3. Configure the scale options:
-   - **Min Rating**: Starting number for the scale (default: 1)
-   - **Max Rating**: Ending number for the scale (default: 5)
-   - **Left Label**: Text description for the low end of the scale (e.g., "Strongly Disagree")
-   - **Right Label**: Text description for the high end of the scale (e.g., "Strongly Agree")
+   - **Lowest value**: Starting number for the scale (default: 1)
+   - **Highest value**: Ending number for the scale (default: 5)
+   - **Label for lowest**: Text description for the low end of the scale (e.g., "Strongly Disagree")
+   - **Label for highest**: Text description for the high end of the scale (e.g., "Strongly Agree")
 4. Toggle the "Required" option if necessary
 
 ## Features:
diff --git a/docs/managing-submissions.md b/docs/managing-submissions.md
index 168d213d..8e15a618 100644
--- a/docs/managing-submissions.md
+++ b/docs/managing-submissions.md
@@ -28,7 +28,7 @@ The Table View displays each individual submission in a tabular format:
 
 The Summary View provides an aggregated analysis of your submissions:
 
--   For multiple choice questions: shows response distributions with visual graphs
+-   For single choice and checkbox questions: shows response distributions with visual graphs
 -   For text inputs: displays common responses
 -   For numerical inputs: shows average values and ranges
 -   For rating scales: presents average ratings with visual indicators
diff --git a/docs/workbench/workbench.md b/docs/workbench/workbench.md
index 57d3ecb4..8103406b 100644
--- a/docs/workbench/workbench.md
+++ b/docs/workbench/workbench.md
@@ -14,7 +14,7 @@ Each question shows:
 
 -   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
+-   A line below with the answer type, the number of choices, **Required**, the number of rules, **Hidden**, and its short name if you gave it one
 
 Groups show their name with their questions inside. An empty group says how to add a question to it.
 
@@ -26,7 +26,7 @@ Click a question, or move to it with Tab and press Enter, to open it in place. T
 2. **Choices** - For single 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
+5. **Settings** - The settings of this answer type under its own heading (for example **Choices** or **Rating**), then **Short name** 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
 

From f77efdb9616841f80734446053e7e59de9def2cc Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:18:34 +0200
Subject: [PATCH 127/153] docs: add the editor wording change to the changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1eaac9fb..cd5af102 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   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)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
+-   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
 
 ### Fixed
 

From b698273b35224526861a2e7e83e100591794ad53 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:29:51 +0200
Subject: [PATCH 128/153] fix: don't say emails use the short name

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/QuestionSettings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index ce1e0da3..0944084c 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -36,7 +36,7 @@
         >Short name</label
       >
       <p :id="`${id}-identifier-help`" class="mb-1 text-xs text-grey-600">
-        Used in prefill links, webhooks, emails and the submissions table.
+        Used in prefill links, webhooks and the submissions table.
       </p>
       <D9Input
         :id="`${id}-identifier`"

From 4ee7e54abba3830772769cdaf487b5fae0f5ca49 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:30:45 +0200
Subject: [PATCH 129/153] fix: tie "None ticked: all types allowed." to the
 file type boxes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Main/ConfigureFile.vue    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Main/ConfigureFile.vue b/resources/js/components/Factory/Main/ConfigureFile.vue
index f65212d5..f03cafff 100644
--- a/resources/js/components/Factory/Main/ConfigureFile.vue
+++ b/resources/js/components/Factory/Main/ConfigureFile.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="mb-4">
-    <D9Label label="File types" />
+  <div
+    class="mb-4"
+    role="group"
+    aria-labelledby="file-types-label"
+    aria-describedby="file-types-help"
+  >
+    <D9Label id="file-types" label="File types" />
     <div
       v-for="fileType in availableFileTypes"
       :key="fileType.key"
@@ -12,7 +17,9 @@
         :label="fileType.label"
       />
     </div>
-    <p class="mt-1 text-xs text-grey-600">None ticked: all types allowed.</p>
+    <p id="file-types-help" class="mt-1 text-xs text-grey-600">
+      None ticked: all types allowed.
+    </p>
   </div>
 
   <div class="mb-4">

From 2e16cb74aafdfdf826ca7e8e12e07c43c26cc374 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:31:05 +0200
Subject: [PATCH 130/153] fix: use plain words for the text editor's default
 placeholder

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Shared/Editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Shared/Editor.vue b/resources/js/components/Factory/Shared/Editor.vue
index a078f938..f7f4349a 100644
--- a/resources/js/components/Factory/Shared/Editor.vue
+++ b/resources/js/components/Factory/Shared/Editor.vue
@@ -137,7 +137,7 @@ const {
   counter = false,
   bare = false,
   id,
-  placeholder = "Type your message here...",
+  placeholder = "Type your text…",
 } = defineProps<{
   modelValue?: string;
   counter?: boolean;

From 84d0bd9d4d9fe2941d33a85069b57fe43a829661 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:36:43 +0200
Subject: [PATCH 131/153] fix: drop the settings heading where a type has no
 settings of its own

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/QuestionSettings.test.ts | 20 +++++++++++++------
 .../Factory/Document/QuestionSettings.vue     | 12 +++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/Factory/Document/QuestionSettings.test.ts b/resources/js/components/Factory/Document/QuestionSettings.test.ts
index 23067a5f..09e4dc11 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.test.ts
+++ b/resources/js/components/Factory/Document/QuestionSettings.test.ts
@@ -13,9 +13,7 @@ const heading = (type: string, interactionType?: FormBlockInteractionType) =>
             } as unknown as FormBlockModel,
             interactionType,
         },
-    })
-        .find("h3")
-        .text();
+    }).find("h3");
 
 describe("the settings heading", () => {
     it.each([
@@ -26,12 +24,22 @@ describe("the settings heading", () => {
         ["scale", "range", "Scale"],
         ["date", "date", "Date"],
         ["input-file", "file", "File upload"],
-        ["consent", "consent", "Consent"],
-        ["none", undefined, "Settings"],
     ] as const)(
         "names a %s question's settings %s → %s",
         (type, interaction, text) => {
-            expect(heading(type, interaction)).toBe(text);
+            expect(heading(type, interaction).text()).toBe(text);
+            expect(heading(type, interaction).classes()).not.toContain(
+                "sr-only",
+            );
         },
     );
+
+    // their panel holds only Short name and Hide this question
+    it.each([
+        ["consent", "consent"],
+        ["none", undefined],
+    ] as const)("shows no heading for a %s question", (type, interaction) => {
+        expect(heading(type, interaction).text()).toBe("Settings");
+        expect(heading(type, interaction).classes()).toContain("sr-only");
+    });
 });
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index 0944084c..1469133d 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -9,9 +9,9 @@
     <h3
       :id="`${id}-title`"
       class="text-xs font-semibold text-grey-600"
-      :class="sheet && 'sr-only'"
+      :class="(sheet || !heading) && 'sr-only'"
     >
-      {{ heading }}
+      {{ heading || "Settings" }}
     </h3>
 
     <ConfigureInput v-if="interactionType === 'input'" />
@@ -88,23 +88,21 @@ const props = defineProps<{
 const workbench = useWorkbench();
 const { editableInteractions } = useActiveInteractions(props.block);
 
-// named by answer type; "Text only" has no answer settings
+// named by answer type; Consent and Text only have no settings of their own,
+// so their panel shows no heading
 const headings: Partial<Record<FormBlockInteractionType, string>> = {
   button: "Choices",
   input: "Answer field",
   textarea: "Answer field",
   date: "Date",
   file: "File upload",
-  consent: "Consent",
 };
 const heading = computed(() => {
   if (props.interactionType === "range") {
     return props.block.type === "scale" ? "Scale" : "Rating";
   }
 
-  return (
-    (props.interactionType && headings[props.interactionType]) ?? "Settings"
-  );
+  return props.interactionType && headings[props.interactionType];
 });
 
 const title = ref(props.block.title ?? "");

From 4798dbf8af0f88774f08f46ad2ab791648e00c83 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:37:10 +0200
Subject: [PATCH 132/153] fix: say "a deleted question" in a rule's sentence

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/Rules/BlockRules.test.ts     | 2 +-
 .../js/components/Factory/Document/Rules/DeletedQuestion.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
index 8eaacab0..9feb216b 100644
--- a/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
+++ b/resources/js/components/Factory/Document/Rules/BlockRules.test.ts
@@ -173,7 +173,7 @@ describe("a rule under its question", () => {
         const broken = wrapper.findAll(".text-red-700");
 
         expect(broken).toHaveLength(2);
-        expect(broken[0].text()).toContain("Deleted question");
+        expect(broken[0].text()).toContain("a deleted question");
     });
 });
 
diff --git a/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue b/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
index 40da58ec..167681a4 100644
--- a/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
+++ b/resources/js/components/Factory/Document/Rules/DeletedQuestion.vue
@@ -2,7 +2,7 @@
   <span
     class="inline-flex items-center gap-1 rounded bg-red-50 px-1.5 font-medium text-red-700 ring-1 ring-inset ring-red-200"
   >
-    <D9Icon name="triangle-exclamation" aria-hidden="true" />Deleted question
+    <D9Icon name="triangle-exclamation" aria-hidden="true" />a deleted question
   </span>
 </template>
 

From 0af912b4a41b6ef24784b15806c17280dfc2112c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:38:06 +0200
Subject: [PATCH 133/153] fix: use short example placeholders in the long text
 and number settings

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Main/ConfigureInput.vue    | 1 -
 resources/js/components/Factory/Main/ConfigureTextarea.vue | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Main/ConfigureInput.vue b/resources/js/components/Factory/Main/ConfigureInput.vue
index 3a79c6bd..a7d6a0f9 100644
--- a/resources/js/components/Factory/Main/ConfigureInput.vue
+++ b/resources/js/components/Factory/Main/ConfigureInput.vue
@@ -19,7 +19,6 @@
       />
       <D9Input
         id="input-decimal-places"
-        placeholder="Number of decimal places"
         type="number"
         :min="0"
         :max="10"
diff --git a/resources/js/components/Factory/Main/ConfigureTextarea.vue b/resources/js/components/Factory/Main/ConfigureTextarea.vue
index 1f04bcdb..50605085 100644
--- a/resources/js/components/Factory/Main/ConfigureTextarea.vue
+++ b/resources/js/components/Factory/Main/ConfigureTextarea.vue
@@ -18,7 +18,7 @@
       />
       <D9Input
         id="textarea-rows"
-        placeholder="The size of the textarea"
+        placeholder="e.g. 4"
         type="number"
         :min="1"
         :max="10"
@@ -31,7 +31,7 @@
       <D9Label id="textarea-max-chars" label="Max characters" />
       <D9Input
         id="textarea-max-chars"
-        placeholder="The maximum number of characters"
+        placeholder="No limit"
         type="number"
         block
         v-model="maxChars"

From b2940059dcf32757dac7d351ee880e4669b74cbb Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:42:25 +0200
Subject: [PATCH 134/153] fix: show an example, not "No limit", as the max
 characters placeholder

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Main/ConfigureTextarea.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Main/ConfigureTextarea.vue b/resources/js/components/Factory/Main/ConfigureTextarea.vue
index 50605085..bec125ec 100644
--- a/resources/js/components/Factory/Main/ConfigureTextarea.vue
+++ b/resources/js/components/Factory/Main/ConfigureTextarea.vue
@@ -31,7 +31,7 @@
       <D9Label id="textarea-max-chars" label="Max characters" />
       <D9Input
         id="textarea-max-chars"
-        placeholder="No limit"
+        placeholder="e.g. 500"
         type="number"
         block
         v-model="maxChars"

From c6354e6d2009937e028dde2e3321bf60405d01d9 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 09:44:21 +0200
Subject: [PATCH 135/153] fix: start the Consent and Text only settings at the
 panel top

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/components/Factory/Document/QuestionSettings.test.ts | 6 +++---
 .../js/components/Factory/Document/QuestionSettings.vue     | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/Factory/Document/QuestionSettings.test.ts b/resources/js/components/Factory/Document/QuestionSettings.test.ts
index 09e4dc11..912e2696 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.test.ts
+++ b/resources/js/components/Factory/Document/QuestionSettings.test.ts
@@ -28,8 +28,8 @@ describe("the settings heading", () => {
         "names a %s question's settings %s → %s",
         (type, interaction, text) => {
             expect(heading(type, interaction).text()).toBe(text);
-            expect(heading(type, interaction).classes()).not.toContain(
-                "sr-only",
+            expect(heading(type, interaction).attributes("hidden")).toBe(
+                undefined,
             );
         },
     );
@@ -40,6 +40,6 @@ describe("the settings heading", () => {
         ["none", undefined],
     ] as const)("shows no heading for a %s question", (type, interaction) => {
         expect(heading(type, interaction).text()).toBe("Settings");
-        expect(heading(type, interaction).classes()).toContain("sr-only");
+        expect(heading(type, interaction).attributes("hidden")).toBe("");
     });
 });
diff --git a/resources/js/components/Factory/Document/QuestionSettings.vue b/resources/js/components/Factory/Document/QuestionSettings.vue
index 1469133d..081dc956 100644
--- a/resources/js/components/Factory/Document/QuestionSettings.vue
+++ b/resources/js/components/Factory/Document/QuestionSettings.vue
@@ -9,7 +9,8 @@
     <h3
       :id="`${id}-title`"
       class="text-xs font-semibold text-grey-600"
-      :class="(sheet || !heading) && 'sr-only'"
+      :class="sheet && 'sr-only'"
+      :hidden="!heading"
     >
       {{ heading || "Settings" }}
     </h3>
@@ -89,7 +90,7 @@ const workbench = useWorkbench();
 const { editableInteractions } = useActiveInteractions(props.block);
 
 // named by answer type; Consent and Text only have no settings of their own,
-// so their panel shows no heading
+// so their heading is hidden: it still names the group, and space-y skips it
 const headings: Partial<Record<FormBlockInteractionType, string>> = {
   button: "Choices",
   input: "Answer field",

From 003acf38c6de9500f7588311ccdfe9f5105b21c0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:18:22 +0200
Subject: [PATCH 136/153] fix: show the end screen in the preview while its
 block is open

The preview went only to questions. Now the open end block sends the
preview to the end screen (nothing is sent), a save shows the new text,
and a form that sends people to a link gets a short note instead.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   | 12 +++++
 .../Factory/Document/EndScreenBlock.vue       |  7 ++-
 .../components/Factory/Document/blockFocus.ts |  3 ++
 .../Factory/Preview/FormPreview.test.ts       | 36 +++++++++++++++
 .../Factory/Preview/FormPreview.vue           | 34 +++++++++++++-
 .../Factory/Preview/PreviewFrame.test.ts      | 46 +++++++++++++++++++
 .../Factory/Preview/PreviewFrame.vue          | 43 ++++++++---------
 resources/js/forms/classic/previewTarget.ts   |  2 +
 .../forms/classic/usePreviewMessages.test.ts  | 19 ++++++++
 .../js/forms/classic/usePreviewMessages.ts    |  6 ++-
 resources/js/stores/conversation.ts           |  9 +++-
 11 files changed, 189 insertions(+), 28 deletions(-)
 create mode 100644 resources/js/forms/classic/previewTarget.ts

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 1025d4b5..53bf9330 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -8,6 +8,7 @@ import { useNotice } from "@/stores/notice";
 import { useFreshForm } from "@/utils/useFreshForm";
 import CompletionPage from "@/components/Factory/Settings/CompletionPage.vue";
 import EndScreenBlock from "./EndScreenBlock.vue";
+import { endScreenOpen } from "./blockFocus";
 
 vi.mock("@/api/forms", async (importOriginal) => ({
     ...(await importOriginal()),
@@ -30,6 +31,8 @@ let wrapper: VueWrapper | undefined;
 
 // real actions, not the stubs of the global testing pinia
 const mountBlock = () => {
+    // one at a time, as in the document: they share the open state
+    wrapper?.unmount();
     wrapper = mount(EndScreenBlock, {
         attachTo: document.body,
         global: { plugins: [pinia], directives: { tooltip: {} } },
@@ -119,6 +122,15 @@ describe("the end screen in the document", () => {
         expect(block.find("#end-screen-headline").exists()).toBe(false);
     });
 
+    it("tells the preview while it's open, and starts closed on the next page", async () => {
+        const block = await open();
+        expect(endScreenOpen.value).toBe(true);
+
+        block.unmount();
+        wrapper = undefined;
+        expect(endScreenOpen.value).toBe(false);
+    });
+
     it("has the question card's phone sizes, number column and focus bar", async () => {
         const block = await open();
         const [number, card] = block.findAll("#row-end-screen > div");
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 70eac0d6..f56e3cc9 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -127,7 +127,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, reactive, watch } from "vue";
 import { Link } from "@inertiajs/vue3";
 import { D9Icon, D9Input, D9Label, D9Switch } from "@deck9/ui";
 import { useEventListener } from "@vueuse/core";
@@ -138,12 +138,14 @@ import { keepAlive } from "@/api/handler";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
+import { endScreenOpen } from "./blockFocus";
 
 const store = useForm();
 const workbench = useWorkbench();
 const notice = useNotice();
 
-const isOpen = ref(false);
+// shared, so the preview shows the end screen while it's open
+const isOpen = endScreenOpen;
 
 const settingsLink = computed(
   () =>
@@ -263,5 +265,6 @@ watch(
 onBeforeUnmount(() => {
   save.cancel();
   delete notice.waitingSaves[SAVE];
+  isOpen.value = false;
 });
 </script>
diff --git a/resources/js/components/Factory/Document/blockFocus.ts b/resources/js/components/Factory/Document/blockFocus.ts
index c1be464c..24e3458e 100644
--- a/resources/js/components/Factory/Document/blockFocus.ts
+++ b/resources/js/components/Factory/Document/blockFocus.ts
@@ -4,6 +4,9 @@ import { useForm, useWorkbench } from "@/stores";
 // the question whose card takes the cursor once it shows: its text editor isn't there at once
 export const cursorFor = ref<string | null>(null);
 
+// the end screen's card is open: it's no block, so the workbench doesn't hold it
+export const endScreenOpen = ref(false);
+
 // puts the cursor in a question's text, or in a group's name
 export async function focusBlock(block: FormBlockModel | null): Promise<boolean> {
     if (!block) {
diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index 6f3a8dea..e1449a9d 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -1,6 +1,7 @@
 import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { useForm, useWorkbench } from "@/stores";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import FormPreview from "./FormPreview.vue";
 import PreviewToggle from "./PreviewToggle.vue";
 
@@ -149,6 +150,41 @@ describe("the preview panel", () => {
         );
     });
 
+    it("says when it shows the end screen", async () => {
+        screen(true);
+        useForm().form = { use_cta_redirect: false } as FormModel;
+        const wrapper = mountPreview();
+
+        wrapper.findComponent(PreviewFrame).vm.$emit("update:shown", END_SCREEN);
+        await flushPromises();
+
+        expect(wrapper.get("#preview-heading").text()).toBe("Preview · end screen");
+        expect(wrapper.find("iframe").isVisible()).toBe(true);
+    });
+
+    // the preview doesn't follow the link, so its end screen is one nobody sees
+    it.each([true, false])("says where people go instead of the end screen when the form sends them to a link (desktop: %s)", async (wide) => {
+        screen(wide);
+        useForm().blocks = [{ uuid: "q1", type: "input-short" }] as FormBlockModel[];
+        useForm().form = { use_cta_redirect: true, cta_link: "https://example.com/thanks" } as FormModel;
+        const wrapper = mountPreview();
+        await flushPromises();
+
+        const frame = wrapper.findComponent(PreviewFrame);
+        frame.vm.$emit("update:shown", END_SCREEN);
+        await flushPromises();
+
+        const panel = document.querySelector(wide ? "aside" : "[role=dialog]");
+        expect(panel?.textContent).toContain("No end screen: people go to https://example.com/thanks.");
+        expect(frame.isVisible()).toBe(false);
+
+        // back at a question, the frame shows again
+        frame.vm.$emit("update:shown", "q1");
+        await flushPromises();
+        expect(document.body.textContent).not.toContain("No end screen");
+        expect(frame.isVisible()).toBe(true);
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 1606636e..4b3dfa41 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -11,10 +11,18 @@
     <p v-if="hidden" class="w-80 max-w-full text-xs text-grey-600">
       {{ hidden }}, so the preview can't jump to it.
     </p>
+    <p v-if="redirect" class="w-80 max-w-full break-words text-sm text-grey-600">
+      No end screen: people go to {{ redirect }}.
+    </p>
     <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
       Add a question to see it here.
     </p>
-    <PreviewFrame v-else v-model:shown="shown" v-model:missed="missed" />
+    <PreviewFrame
+      v-else
+      v-show="!redirect"
+      v-model:shown="shown"
+      v-model:missed="missed"
+    />
   </aside>
 
   <!-- tablet and phone: over the document; closing it keeps it mounted, so focus goes back to Preview -->
@@ -39,10 +47,21 @@
       <p v-if="hidden" class="w-80 max-w-full text-xs text-grey-600">
         {{ hidden }}, so the preview can't jump to it.
       </p>
+      <p
+        v-if="redirect"
+        class="w-80 max-w-full break-words text-sm text-grey-600"
+      >
+        No end screen: people go to {{ redirect }}.
+      </p>
       <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
         Add a question to see it here.
       </p>
-      <PreviewFrame v-else v-model:shown="shown" v-model:missed="missed" />
+      <PreviewFrame
+        v-else
+        v-show="!redirect"
+        v-model:shown="shown"
+        v-model:missed="missed"
+      />
     </DialogPanel>
   </Dialog>
 </template>
@@ -54,6 +73,7 @@ import { useMediaQuery } from "@vueuse/core";
 import { computed, ref, watch } from "vue";
 import { useForm, useWorkbench } from "@/stores";
 import { questionNumbers } from "@/components/Factory/Document/questionSummary";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
@@ -68,9 +88,19 @@ const numbers = computed(() => questionNumbers(store.blocks ?? []));
 const shown = ref<string | null>(null);
 const missed = ref<string | null>(null);
 const heading = computed(() => {
+  if (shown.value === END_SCREEN) {
+    return "Preview · end screen";
+  }
+
   const number = shown.value && numbers.value[shown.value];
   return number ? `Preview · question ${number}` : "Preview";
 });
+// the preview doesn't follow the link, so its end screen is one nobody sees
+const redirect = computed(() =>
+  shown.value === END_SCREEN && store.form?.use_cta_redirect
+    ? store.form.cta_link
+    : undefined,
+);
 // the open question, when the preview couldn't go to it (a group has no number);
 // the public form leaves out a hidden question and each one in a hidden group
 const hidden = computed(() => {
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index dc9818d1..93319a0a 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -14,6 +14,8 @@ import { useForm, useLogic, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import { callUpdateFormBlock } from "@/api/blocks";
 import { callUpdateFormBlockInteraction } from "@/api/interactions";
+import { endScreenOpen } from "@/components/Factory/Document/blockFocus";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import PreviewFrame from "./PreviewFrame.vue";
 
 vi.mock("@/api/blocks", () => ({ callUpdateFormBlock: vi.fn() }));
@@ -97,6 +99,7 @@ describe("the preview frame", () => {
         setActivePinia(testing);
         vi.clearAllMocks();
         answers.length = 0;
+        endScreenOpen.value = false;
     });
 
     it("runs the public form in preview mode at the open question", () => {
@@ -142,6 +145,49 @@ describe("the preview frame", () => {
         );
     });
 
+    it("starts at the end screen while its card is open", () => {
+        endScreenOpen.value = true;
+        const iframe = mountFrame(null).get("iframe");
+
+        expect(iframe.attributes("src")).toBe(`/form1?preview=1&block=${END_SCREEN}`);
+    });
+
+    it("goes to the end screen when its card opens, and back to a question opened after", async () => {
+        const wrapper = mountFrame();
+        const post = vi.spyOn(frameWindow(wrapper), "postMessage");
+
+        // opening the card closes the open question first
+        useWorkbench().block = null;
+        endScreenOpen.value = true;
+        await nextTick();
+        expect(post).toHaveBeenLastCalledWith(
+            { type: "input:preview:goto", block: END_SCREEN },
+            window.location.origin,
+        );
+
+        useWorkbench().block = second;
+        await nextTick();
+        expect(post).toHaveBeenLastCalledWith(
+            { type: "input:preview:goto", block: "q2uuid" },
+            window.location.origin,
+        );
+    });
+
+    it("loads the form again at the end screen after its save", async () => {
+        const wrapper = mountFrame(null, realPinia());
+        endScreenOpen.value = true;
+        await nextTick();
+        const before = wrapper.get("iframe").element;
+
+        useNotice().clearSaveError("saveEndScreen");
+        await nextTick();
+        await nextTick();
+
+        const iframe = wrapper.get("iframe");
+        expect(iframe.element).not.toBe(before);
+        expect(iframe.attributes("src")).toBe(`/form1?preview=1&block=${END_SCREEN}`);
+    });
+
     it("opens the question the preview moves on to", () => {
         const wrapper = mountFrame();
 
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index ef17170f..3e9f2841 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -11,13 +11,15 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useForm, useLogic, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
+import { endScreenOpen } from "@/components/Factory/Document/blockFocus";
 import type { PreviewMessage } from "@/forms/classic/usePreviewMessages";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 
-// the question the preview shows, and an open one it didn't go to
+// the question (or END_SCREEN) the preview shows, and an open one it didn't go to
 const shown = defineModel<string | null>("shown", { default: null });
 const missed = defineModel<string | null>("missed", { default: null });
 
@@ -26,11 +28,16 @@ const workbench = useWorkbench();
 const origin = window.location.origin;
 const frame = ref<HTMLIFrameElement | null>(null);
 
+// the open question, or the end screen while its card is open
+const target = computed(
+  () => workbench.block?.uuid ?? (endScreenOpen.value ? END_SCREEN : null),
+);
+
 const url = () => {
   const query = new URLSearchParams({ preview: "1" });
 
-  if (workbench.block) {
-    query.set("block", workbench.block.uuid);
+  if (target.value) {
+    query.set("block", target.value);
   }
 
   return `${window.route("forms.show", { uuid: store.form?.uuid }, false)}?${query}`;
@@ -39,12 +46,9 @@ const url = () => {
 // the questions load after the panel: start at the open one, not at the
 // first and then jump; a panel opened later with none open starts at once
 const src = ref(store.blocks ? url() : undefined);
-watch(
-  () => workbench.block,
-  (block) => {
-    if (block) src.value ??= url();
-  },
-);
+watch(target, (block) => {
+  if (block) src.value ??= url();
+});
 const loads = ref(0);
 // the preview tells where it starts, then each question it moves on to
 let started = false;
@@ -117,15 +121,12 @@ useLogic().$onAction(({ name, after }) => {
   if (name === "saveSingleRule") after(() => nextTick(reload));
 });
 
-watch(
-  () => workbench.block?.uuid,
-  (block) => {
-    if (block && block !== followed) {
-      goto(block);
-    }
-    followed = null;
-  },
-);
+watch(target, (block) => {
+  if (block && block !== followed) {
+    goto(block);
+  }
+  followed = null;
+});
 
 useEventListener(window, "message", async (event: MessageEvent) => {
   const data = event.data as PreviewMessage | undefined;
@@ -148,8 +149,8 @@ useEventListener(window, "message", async (event: MessageEvent) => {
   // or the preview loaded after the owner opened another one
   if (!started) {
     started = true;
-    if (workbench.block && workbench.block.uuid !== data.block) {
-      goto(workbench.block.uuid);
+    if (target.value && target.value !== data.block) {
+      goto(target.value);
     }
     return;
   }
diff --git a/resources/js/forms/classic/previewTarget.ts b/resources/js/forms/classic/previewTarget.ts
new file mode 100644
index 00000000..f530c7e2
--- /dev/null
+++ b/resources/js/forms/classic/previewTarget.ts
@@ -0,0 +1,2 @@
+// the end screen has no uuid: the editor's preview names it so, in its messages and its address
+export const END_SCREEN = "end";
diff --git a/resources/js/forms/classic/usePreviewMessages.test.ts b/resources/js/forms/classic/usePreviewMessages.test.ts
index ffa07697..a14b7dfb 100644
--- a/resources/js/forms/classic/usePreviewMessages.test.ts
+++ b/resources/js/forms/classic/usePreviewMessages.test.ts
@@ -3,7 +3,11 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { setActivePinia, createPinia } from 'pinia';
 import { effectScope, nextTick } from 'vue';
 import { useConversation } from '@/stores/conversation';
+import { callSubmitForm } from '@/api/conversation';
 import { usePreviewMessages } from './usePreviewMessages';
+import { END_SCREEN } from './previewTarget';
+
+vi.mock('@/api/conversation', () => ({ callSubmitForm: vi.fn() }));
 
 const block = (id: string) => ({ id, type: 'input-short', parent_block: null, interactions: [] }) as unknown as PublicFormBlockModel;
 
@@ -47,6 +51,21 @@ describe('usePreviewMessages', () => {
     expect(store.current).toBe('q3');
   });
 
+  it('shows the end screen when the editor asks for it, sending nothing, and a question again after', async () => {
+    fromEditor({ type: 'input:preview:goto', block: END_SCREEN });
+    await nextTick();
+
+    expect(store.isSubmitted).toBe(true);
+    expect(callSubmitForm).not.toHaveBeenCalled();
+    expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:block', block: END_SCREEN }, window.location.origin);
+
+    fromEditor({ type: 'input:preview:goto', block: 'q1' });
+    await nextTick();
+
+    expect(store.isSubmitted).toBe(false);
+    expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:block', block: 'q1' }, window.location.origin);
+  });
+
   it.each([
     ['a message from another origin', { type: 'input:preview:goto', block: 'q3' }, { origin: 'https://evil.example' }],
     ['a message from another window', { type: 'input:preview:goto', block: 'q3' }, { source: null }],
diff --git a/resources/js/forms/classic/usePreviewMessages.ts b/resources/js/forms/classic/usePreviewMessages.ts
index b418514c..7ac54d58 100644
--- a/resources/js/forms/classic/usePreviewMessages.ts
+++ b/resources/js/forms/classic/usePreviewMessages.ts
@@ -1,8 +1,10 @@
 import { watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 import { useConversation } from "@/stores/conversation";
+import { END_SCREEN } from "./previewTarget";
 
-// messages between the editor and the form in its preview frame, both on the same origin
+// messages between the editor and the form in its preview frame, both on the same origin;
+// a block is a question's uuid or END_SCREEN
 export type PreviewMessage =
     // the form shows this question
     | { type: "input:preview:block"; block: string }
@@ -14,7 +16,7 @@ export function usePreviewMessages() {
     const origin = window.location.origin;
 
     watch(
-        () => store.current,
+        () => (store.isSubmitted ? END_SCREEN : store.current),
         (block) => {
             if (block) {
                 const message: PreviewMessage = {
diff --git a/resources/js/stores/conversation.ts b/resources/js/stores/conversation.ts
index 6d7f56bc..bb66ae20 100644
--- a/resources/js/stores/conversation.ts
+++ b/resources/js/stores/conversation.ts
@@ -10,6 +10,7 @@ import { evaluateGotoLogic, isBlockVisible } from "./helpers/logic";
 import { createFlatQueue } from "./helpers/queue";
 import { prefillPayload } from "./helpers/prefill";
 import { isAllowedLink } from "@/utils/sanitize";
+import { END_SCREEN } from "@/forms/classic/previewTarget";
 import { nextTick, Ref, ref } from "vue";
 
 type ConversationStore = {
@@ -367,8 +368,14 @@ export const useConversation = defineStore("form", {
             }
         },
 
-        // the preview starts at any shown question, as if the respondent had come along the way to it
+        // the preview starts at any shown question, as if the respondent had come along the way to it,
+        // or at the end screen, without sending anything
         startAt(blockId: string) {
+            if (blockId === END_SCREEN) {
+                this.isSubmitted = true;
+                return;
+            }
+
             const index = this.findBlockIndex(blockId);
 
             if (index === -1) {

From 6f6e0b6c858a1bcd59e22b16910cb769f153934c Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:19:11 +0200
Subject: [PATCH 137/153] fix: call the completion page "End screen" in
 Settings too

Same name as the end block in the document. The #completion-page link
and the code names stay.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Settings.vue                         | 2 +-
 .../js/components/Factory/Settings/CompletionPage.test.ts     | 2 +-
 resources/js/components/Factory/Settings/CompletionPage.vue   | 2 +-
 .../Factory/Settings/partials/CompletionPageType.vue          | 4 ++--
 resources/js/components/Factory/Shared/Editor.test.ts         | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/Forms/Settings.vue b/resources/js/Pages/Forms/Settings.vue
index a8712d4a..e6e6fbc0 100644
--- a/resources/js/Pages/Forms/Settings.vue
+++ b/resources/js/Pages/Forms/Settings.vue
@@ -92,7 +92,7 @@ const navigation: Array<{
   { name: "Options", component: Options, slug: "options" },
   { name: "Privacy", component: Privacy, slug: "privacy" },
   {
-    name: "Completion Page",
+    name: "End screen",
     component: CompletionPage,
     slug: "completion-page",
   },
diff --git a/resources/js/components/Factory/Settings/CompletionPage.test.ts b/resources/js/components/Factory/Settings/CompletionPage.test.ts
index b8763d72..cfb59c29 100644
--- a/resources/js/components/Factory/Settings/CompletionPage.test.ts
+++ b/resources/js/components/Factory/Settings/CompletionPage.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 import CompletionPage from "./CompletionPage.vue";
 import { useForm } from "@/stores";
 
-describe("completion page", () => {
+describe("end screen settings", () => {
     it("ties the Message label to its editor", async () => {
         useForm().form = { uuid: "form1" } as FormModel;
         const wrapper = mount(CompletionPage, {
diff --git a/resources/js/components/Factory/Settings/CompletionPage.vue b/resources/js/components/Factory/Settings/CompletionPage.vue
index d88191ee..5a04589b 100644
--- a/resources/js/components/Factory/Settings/CompletionPage.vue
+++ b/resources/js/components/Factory/Settings/CompletionPage.vue
@@ -178,7 +178,7 @@
     <D9Button
       class="mt-8"
       type="submit"
-      label="Save Completion Page"
+      label="Save end screen"
       :is-loading="isSaving"
     />
   </form>
diff --git a/resources/js/components/Factory/Settings/partials/CompletionPageType.vue b/resources/js/components/Factory/Settings/partials/CompletionPageType.vue
index 249a563f..0ac0c93a 100644
--- a/resources/js/components/Factory/Settings/partials/CompletionPageType.vue
+++ b/resources/js/components/Factory/Settings/partials/CompletionPageType.vue
@@ -61,8 +61,8 @@ import { D9Icon } from "@deck9/ui";
 const mailingLists = [
   {
     id: 1,
-    title: "Show completion page",
-    description: "Configure a custom completion page",
+    title: "Show end screen",
+    description: "Configure a custom end screen",
     value: false,
   },
   {
diff --git a/resources/js/components/Factory/Shared/Editor.test.ts b/resources/js/components/Factory/Shared/Editor.test.ts
index 2140bcb1..6caa4c57 100644
--- a/resources/js/components/Factory/Shared/Editor.test.ts
+++ b/resources/js/components/Factory/Shared/Editor.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from "vitest";
 import { nextTick } from "vue";
 import Editor from "./Editor.vue";
 
-// HTML as the tiptap 2 editor saved it for block texts and completion pages
+// HTML as the tiptap 2 editor saved it for block texts and end screens
 const stored =
   '<h2>Welcome</h2><h3>Before you start</h3><p>Some <strong>bold</strong>, <em>italic</em> and <u>underlined</u> text with <code>inline code</code> and a <a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">link</a>.</p><p>Line one<br>Line two</p><p>Above</p><p></p><p>Below</p><ul><li><p>First</p></li><li><p>Second</p></li></ul><ol><li><p>One</p></li><li><p>Two</p></li></ol><blockquote><p>A quote</p></blockquote><p><span style="font-family: Georgia;">Pasted font</span></p><img src="https://example.com/image.png">';
 

From 61b88463c47fcdeaedca8fc4796a33ebabd36e83 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:25:22 +0200
Subject: [PATCH 138/153] docs: add changelog line for #280

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cd5af102..4f3c8c21 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   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)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed
 

From 474f4e7aa849690d914474012a342eb0a0609bb3 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:26:50 +0200
Subject: [PATCH 139/153] fix: open the end screen's button in a new tab in the
 preview

In the editor's preview the button took the whole editor tab to its
link. Outside the preview it still opens in the same tab.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../classic/layout/CallToActionButton.vue     |  5 ++-
 .../classic/layout/FormSubmittedPage.test.ts  | 41 +++++++++++++++++++
 .../classic/layout/FormSubmittedPage.vue      |  1 +
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/forms/classic/layout/FormSubmittedPage.test.ts

diff --git a/resources/js/forms/classic/layout/CallToActionButton.vue b/resources/js/forms/classic/layout/CallToActionButton.vue
index 1fbdf14c..b7f308fc 100644
--- a/resources/js/forms/classic/layout/CallToActionButton.vue
+++ b/resources/js/forms/classic/layout/CallToActionButton.vue
@@ -4,7 +4,8 @@
       :href="href"
       ref="button"
       :class="{ 'pointer-events-none opacity-50': isProcessing || isDisabled }"
-      target="_top"
+      :target="newTab ? '_blank' : '_top'"
+      :rel="newTab ? 'noopener noreferrer' : undefined"
       class="relative rounded-md border border-transparent !bg-primary px-5 py-1 font-medium !text-contrast no-underline shadow transition duration-200 hover:bg-primary/75 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 sm:px-10"
     >
       <span :class="{ invisible: isProcessing }">{{ label }}</span>
@@ -27,6 +28,8 @@ defineProps<{
   isProcessing?: boolean;
   label: string;
   href?: string;
+  // in the editor's preview frame: the editor must stay
+  newTab?: boolean;
 }>();
 
 const button = ref<HTMLElement | null>(null);
diff --git a/resources/js/forms/classic/layout/FormSubmittedPage.test.ts b/resources/js/forms/classic/layout/FormSubmittedPage.test.ts
new file mode 100644
index 00000000..adbfb553
--- /dev/null
+++ b/resources/js/forms/classic/layout/FormSubmittedPage.test.ts
@@ -0,0 +1,41 @@
+import { mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { describe, expect, it } from "vitest";
+import FormSubmittedPage from "./FormSubmittedPage.vue";
+import { useConversation } from "@/stores/conversation";
+
+const mountPage = (isPreview: boolean) => {
+    const pinia = createPinia();
+    setActivePinia(pinia);
+
+    const store = useConversation();
+    store.form = {
+        uuid: "form",
+        show_cta_link: true,
+        cta_label: "Book a table",
+        cta_link: "https://example.com/book",
+    } as PublicFormModel;
+    store.session = { token: "session" } as FormSessionModel;
+    store.isPreview = isPreview;
+
+    return mount(FormSubmittedPage, { global: { plugins: [pinia] } });
+};
+
+describe("the end screen's button", () => {
+    it("takes people to its link in the same tab, also out of an embed", () => {
+        const link = mountPage(false).get("a");
+
+        expect(link.attributes("href")).toBe("https://example.com/book");
+        expect(link.attributes("target")).toBe("_top");
+        expect(link.attributes("rel")).toBeUndefined();
+    });
+
+    // the editor's preview runs the form in a frame: the editor must stay
+    it("opens its link in a new tab in preview mode", () => {
+        const link = mountPage(true).get("a");
+
+        expect(link.attributes("href")).toBe("https://example.com/book");
+        expect(link.attributes("target")).toBe("_blank");
+        expect(link.attributes("rel")).toBe("noopener noreferrer");
+    });
+});
diff --git a/resources/js/forms/classic/layout/FormSubmittedPage.vue b/resources/js/forms/classic/layout/FormSubmittedPage.vue
index 805215b3..78410b94 100644
--- a/resources/js/forms/classic/layout/FormSubmittedPage.vue
+++ b/resources/js/forms/classic/layout/FormSubmittedPage.vue
@@ -11,6 +11,7 @@
         v-if="store.form?.show_cta_link && store.callToActionUrl"
         :href="store.callToActionUrl"
         :label="store.form?.cta_label ?? t('close')"
+        :new-tab="store.isPreview"
       />
       <SocialLinks v-if="store.form?.show_social_links" class="mt-8" />
     </div>

From dd6cfb80084a0325ee0222569fc742f5956f4035 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:27:06 +0200
Subject: [PATCH 140/153] docs: say "End screen" in the #271 changelog line,
 add the button to #280's

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f3c8c21..3d7a49b5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   The form's team can try a form in preview mode, also while it's a draft. Answers in preview mode are never stored or counted and send no webhooks or emails. (#266)
 -   Add `?preview=1` to your form's link to try it as a member of its team. Nothing is stored, files aren't uploaded and the form doesn't redirect at the end. (#270)
 -   Add a question right where you need it: between questions or from a question's menu, and type "/" in an empty question to pick its answer type. A picker groups the answer types as Text, Choice, Rating, Other and Content, and the new question opens ready to type. The answer types have new names, like Single choice, Short text and Text only. (#276)
--   The form editor shows the end screen as the last block of your form. You can edit its headline, text and button right there, and the Completion Page in Settings shows the same values. (#271)
+-   The form editor shows the end screen as the last block of your form. You can edit its headline, text and button right there, and the End screen tab in Settings shows the same values. (#271)
 -   "Preview" in the editor shows your form beside the questions, on tablet and phone as a panel. It follows the question you edit, and the editor follows when you click Next in it. On the other form pages, "Preview" opens your form in a new tab in preview mode. Answers in either preview aren't saved. (#273)
 
 ### Changed
@@ -30,7 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   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)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
--   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed
 

From d4fc15d664bebf7b2ac08cb77f73f23f35d502d0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:28 +0200
Subject: [PATCH 141/153] feat: draw a line where each question starts and give
 the open one room

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/AddQuestionLine.vue      |  2 +-
 .../Factory/Document/DocumentList.test.ts     | 45 +++++++++++++++++++
 .../Factory/Document/DocumentList.vue         | 21 ++++++++-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/AddQuestionLine.vue b/resources/js/components/Factory/Document/AddQuestionLine.vue
index c7c3294d..19702b2b 100644
--- a/resources/js/components/Factory/Document/AddQuestionLine.vue
+++ b/resources/js/components/Factory/Document/AddQuestionLine.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- sits in the gap below a block; it shows on hover and keyboard focus, not on touch -->
   <div
-    class="group/add absolute -bottom-1 left-8 right-0 z-10 flex h-4 items-center justify-center sm:left-12 [@media(hover:none)]:hidden"
+    class="group/add absolute -bottom-2 left-8 right-0 z-10 flex h-4 items-center justify-center sm:left-12 [@media(hover:none)]:hidden"
   >
     <span
       aria-hidden="true"
diff --git a/resources/js/components/Factory/Document/DocumentList.test.ts b/resources/js/components/Factory/Document/DocumentList.test.ts
index 56b1f1c4..b54afbc4 100644
--- a/resources/js/components/Factory/Document/DocumentList.test.ts
+++ b/resources/js/components/Factory/Document/DocumentList.test.ts
@@ -67,3 +67,48 @@ describe("adding a question inside the document", () => {
         );
     });
 });
+
+describe("lines and air between blocks", () => {
+    const group = { id: 4, uuid: "g1", type: "group" } as FormBlockModel;
+
+    // the box around each block, in document order
+    const items = (list: FormBlockModel[]) => {
+        useForm().blocks = list;
+        wrapper = mount(DocumentList, {
+            props: { numbers: { b1: 1, b2: 2, b3: 3 } },
+            global: { stubs: { QuestionCard: true, DocumentGroup: true } },
+        });
+        return wrapper.findAll(".smooth-dnd-draggable-wrapper > div.relative");
+    };
+
+    beforeEach(() => {
+        useForm().$reset();
+        useWorkbench().$reset();
+    });
+
+    afterEach(() => wrapper?.unmount());
+
+    it("draws a line at the start of each question but the first, not next to a group", () => {
+        const lines = items([blocks[0], group, blocks[1], blocks[2]]).map(
+            (item) => item.classes("border-t"),
+        );
+
+        expect(lines).toEqual([false, false, false, true]);
+    });
+
+    it("gives the open question 24 px above and below, the others 8 px", () => {
+        useWorkbench().block = blocks[1];
+
+        const padding = items(blocks).map((item) =>
+            ["py-2", "py-6"].filter((name) => item.classes(name)),
+        );
+
+        expect(padding).toEqual([["py-2"], ["py-6"], ["py-2"]]);
+    });
+
+    it("keeps an open group at 8 px, so its frame doesn't move", () => {
+        useWorkbench().block = group;
+
+        expect(items([blocks[0], group])[1].classes()).toContain("py-2");
+    });
+});
diff --git a/resources/js/components/Factory/Document/DocumentList.vue b/resources/js/components/Factory/Document/DocumentList.vue
index ab8b7cfb..7badaf65 100644
--- a/resources/js/components/Factory/Document/DocumentList.vue
+++ b/resources/js/components/Factory/Document/DocumentList.vue
@@ -15,7 +15,7 @@
     @drop="onDrop"
   >
     <Draggable v-for="(block, index) in blocks" :key="block.uuid">
-      <div class="relative pb-2">
+      <div class="relative" :class="itemClass(block, index)">
         <DocumentGroup
           v-if="block.type === 'group'"
           :group="block"
@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { Container, Draggable } from "vue3-smooth-dnd";
-import { useForm } from "@/stores";
+import { useForm, useWorkbench } from "@/stores";
 import DocumentGroup from "./DocumentGroup.vue";
 import DocumentQuestion from "./DocumentQuestion.vue";
 import AddQuestionLine from "./AddQuestionLine.vue";
@@ -62,6 +62,7 @@ const props = defineProps<{
 }>();
 
 const store = useForm();
+const workbench = useWorkbench();
 const { addQuestion } = useAddQuestion();
 
 const blocks = computed(() =>
@@ -70,6 +71,22 @@ const blocks = computed(() =>
   ),
 );
 
+// a line where each question starts, but not against a group's own frame;
+// the open question gets 24 px of air, an open group stays put
+const itemClass = (block: FormBlockModel, index: number) => {
+  const before = blocks.value[index - 1];
+
+  return [
+    block.type !== "group" && workbench.block?.id === block.id
+      ? "py-6"
+      : "py-2",
+    before &&
+      block.type !== "group" &&
+      before.type !== "group" &&
+      "border-t border-grey-200",
+  ];
+};
+
 const getChildPayload = (index: number) => blocks.value[index];
 
 const shouldAcceptDrop = (source: any, payload?: FormBlockModel) => {

From 61ac0d945857e244bbe730ee2dc3e979a181f842 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:53 +0200
Subject: [PATCH 142/153] feat: make the question number the anchor under its
 line

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/DocumentQuestion.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/Factory/Document/DocumentQuestion.vue b/resources/js/components/Factory/Document/DocumentQuestion.vue
index 1f4af57b..6e3eba73 100644
--- a/resources/js/components/Factory/Document/DocumentQuestion.vue
+++ b/resources/js/components/Factory/Document/DocumentQuestion.vue
@@ -7,7 +7,7 @@
     <div class="flex w-8 shrink-0 flex-col sm:w-12 items-end gap-1 pr-2 pt-3">
       <span
         aria-hidden="true"
-        class="flex h-6 items-center text-[13px] tabular-nums text-grey-600"
+        class="flex h-6 items-center text-sm font-semibold tabular-nums text-grey-700"
         ><span
           :class="
             isJumpTarget &&

From 205ca06ac5c19f4225f02e6f15466c5dda9a45ee Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:53 +0200
Subject: [PATCH 143/153] feat: lift the open question and end screen card with
 a bigger shadow

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/EndScreenBlock.vue | 2 +-
 resources/js/components/Factory/Document/QuestionCard.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index f56e3cc9..5369210c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -22,7 +22,7 @@
 
     <div
       v-else-if="isOpen"
-      class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+      class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-md ring-1 ring-blue-500 sm:p-4"
       @focusout="leave"
     >
       <div class="flex items-center gap-3">
diff --git a/resources/js/components/Factory/Document/QuestionCard.vue b/resources/js/components/Factory/Document/QuestionCard.vue
index c99dc8b1..c3ba4aa0 100644
--- a/resources/js/components/Factory/Document/QuestionCard.vue
+++ b/resources/js/components/Factory/Document/QuestionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-sm ring-1 ring-blue-500 sm:p-4"
+    class="touch-fields min-w-0 flex-1 space-y-4 rounded-lg bg-white p-3 shadow-md ring-1 ring-blue-500 sm:p-4"
   >
     <span :id="`${id}-text-label`" class="sr-only"
       >Question {{ number }} text</span

From d28d4b8da23b2a6c86651d3667369f0a6e9a5cc8 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:55:53 +0200
Subject: [PATCH 144/153] feat: give the document a 16 px side margin on phones
 and keep a group's name whole

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/components/Factory/Document/DocumentGroup.vue | 2 +-
 resources/js/components/Factory/Document/FormDocument.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index ce351b3a..ce170b8f 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -26,7 +26,7 @@
         type="text"
         placeholder="e.g. About you"
         title="Use a group to show or hide several questions with one rule."
-        class="h-11 min-w-0 flex-1 rounded-md border-0 bg-transparent px-2 text-base font-semibold lg:h-9 lg:text-sm text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
+        class="h-11 min-w-40 flex-1 rounded-md border-0 bg-transparent px-2 text-base font-semibold lg:h-9 lg:text-sm text-grey-700 placeholder:text-grey-600 hover:bg-grey-100 focus:bg-white focus:ring-2 focus:ring-blue-500"
       />
       <span v-if="group.is_disabled" class="text-xs text-grey-600"
         >Always hidden</span
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 59986442..09dde153 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -16,7 +16,7 @@
       class="h-full min-w-0 flex-1 overflow-y-auto bg-white"
     >
       <div
-        class="mx-auto w-full max-w-[720px] px-2 pb-40 pt-6 sm:px-6 sm:pt-10"
+        class="mx-auto w-full max-w-[720px] px-4 pb-40 pt-6 sm:px-6 sm:pt-10"
       >
         <div v-if="status !== 'loaded'" class="pl-12">
           <QuestionsLoadState :status="status" @retry="retry" />

From be5e3e2e98cca1e245bd90f9fcc148f54e2924b4 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:57:27 +0200
Subject: [PATCH 145/153] fix: keep the cursor in the editor when the preview
 moves

The preview's form put the cursor in its own field after each move, so
typing in a question just opened went into the preview. In preview mode
the form now never takes the focus on its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/forms/classic/ClassicForm.test.ts      | 73 +++++++++++++++++++
 resources/js/forms/classic/ClassicForm.vue    | 11 +--
 2 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/forms/classic/ClassicForm.test.ts

diff --git a/resources/js/forms/classic/ClassicForm.test.ts b/resources/js/forms/classic/ClassicForm.test.ts
new file mode 100644
index 00000000..8a2c68ca
--- /dev/null
+++ b/resources/js/forms/classic/ClassicForm.test.ts
@@ -0,0 +1,73 @@
+import { enableAutoUnmount, flushPromises, mount } from "@vue/test-utils";
+import { createPinia, setActivePinia } from "pinia";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, h, Suspense } from "vue";
+import { useConversation } from "@/stores/conversation";
+import ClassicForm from "./ClassicForm.vue";
+
+vi.mock("@/utils/useRoutes", () => ({ useRoutes: vi.fn(async () => ({})) }));
+
+const question = (id: string) => ({
+    id,
+    type: "input-short",
+    title: id,
+    parent_block: null,
+    is_required: false,
+    logics: [],
+    interactions: [{ id: `${id}-input`, type: "input", label: "Your answer" }],
+});
+
+vi.mock("@/api/conversation", () => ({
+    callCreateFormSession: vi.fn(async () => ({ data: { token: "session" } })),
+    callGetFormStoryboard: vi.fn(async () => ({
+        data: { blocks: [question("q1"), question("q2")] },
+    })),
+    callSubmitForm: vi.fn(),
+}));
+
+enableAutoUnmount(afterEach);
+
+const mountForm = async (search: string) => {
+    window.history.replaceState(null, "", `/form1${search}`);
+    const pinia = createPinia();
+    setActivePinia(pinia);
+
+    const Page = defineComponent(() => () =>
+        h(Suspense, null, {
+            default: () =>
+                h(ClassicForm, {
+                    settings: { uuid: "form1", name: "Form", language: "en" } as PublicFormModel,
+                    flags: {} as EmbedFlags,
+                }),
+        }),
+    );
+    mount(Page, { attachTo: document.body, global: { plugins: [pinia] } });
+    await flushPromises();
+
+    // the form moves to the next question, or the editor sends the preview there
+    useConversation().startAt("q2");
+    await flushPromises();
+};
+
+describe("the public form", () => {
+    afterEach(() => {
+        delete (window as { iptSettings?: unknown }).iptSettings;
+        (document.activeElement as HTMLElement | null)?.blur();
+    });
+
+    it("puts the cursor in the next question's field", async () => {
+        await mountForm("");
+
+        expect(document.activeElement?.tagName).toBe("INPUT");
+    });
+
+    // the editor's preview frame: the cursor must stay in the editor
+    it("never takes the focus on its own in preview mode", async () => {
+        window.iptSettings = {} as typeof window.iptSettings;
+        await mountForm("?preview=1&block=q1");
+
+        expect(useConversation().isPreview).toBe(true);
+        expect(useConversation().current).toBe("q2");
+        expect(document.activeElement).toBe(document.body);
+    });
+});
diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index a230da70..b8dafcf6 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -89,19 +89,20 @@ const props = defineProps<{
   flags: EmbedFlags;
 }>();
 
+// the editor's preview runs on the form page, an embed on another site never does
+const query = new URLSearchParams(window.location.search);
+const isPreview = !!window.iptSettings && query.get("preview") === "1";
+
 const isLoading = ref(true);
+// the preview never takes the cursor from the editor around it
 const focusDisabled = computed(() => {
-  return isLoading.value && !props.flags.autofocus;
+  return isPreview || (isLoading.value && !props.flags.autofocus);
 });
 provide("disableFocus", focusDisabled);
 
 // init routes
 await useRoutes();
 
-// the editor's preview runs on the form page, an embed on another site never does
-const query = new URLSearchParams(window.location.search);
-const isPreview = !!window.iptSettings && query.get("preview") === "1";
-
 // init conversation store
 const store = useConversation();
 await store.initForm(

From d6949dd74615e071a7f8202e2440c4be32b935f0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 11:59:36 +0200
Subject: [PATCH 146/153] docs: add changelog line for #281

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d7a49b5..e01619cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
 -   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   In the form editor a thin line marks where each question starts, its number stands out more, and the question you edit gets more room around it. On a phone the editor keeps a wider margin at the sides. (#281)
 
 ### Fixed
 

From bb54d3fe1bd84b2318b19a337498096fcecb2f92 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:00:08 +0200
Subject: [PATCH 147/153] fix: say "No end screen" only for a web link, as the
 form redirects

The public form only goes to an http(s) link. With a mailto: link it
shows the end screen, so the document and the preview now show it too.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts         |  9 +++++++++
 .../components/Factory/Document/EndScreenBlock.vue  | 11 +++++++++--
 .../components/Factory/Preview/FormPreview.test.ts  | 13 +++++++++++++
 .../js/components/Factory/Preview/FormPreview.vue   |  5 ++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 53bf9330..279e4262 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -459,6 +459,15 @@ describe("the end screen in the document", () => {
         );
     });
 
+    // the public form only goes to a web link, else it shows the end screen
+    it("shows the end screen when the link isn't a web link", () => {
+        useForm().form = { ...form, use_cta_redirect: true, cta_link: "mailto:hi@example.com" };
+        const block = mountBlock();
+
+        expect(block.text()).not.toContain("No end screen");
+        expect(block.find("button").text()).toContain("See you on Thursday!");
+    });
+
     it("stays in step with the Settings page through the form store", async () => {
         const block = await open();
         await block.find("#end-screen-headline").setValue("Thanks!");
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index f56e3cc9..d222d88c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -8,12 +8,12 @@
 
     <!-- the public form then skips the end screen -->
     <div
-      v-if="store.form?.use_cta_redirect"
+      v-if="redirects"
       class="min-h-14 min-w-0 flex-1 px-3 py-2.5 text-sm text-grey-700"
     >
       <p class="break-words">
         <span class="font-medium text-grey-900">No end screen:</span>
-        people go to {{ store.form.cta_link }}
+        people go to {{ store.form?.cta_link }}
       </p>
       <Link :href="settingsLink" class="text-xs text-grey-600 underline"
         >Change in Settings</Link
@@ -135,6 +135,7 @@ import debounce from "lodash/debounce";
 import { useForm, useWorkbench } from "@/stores";
 import { useNotice } from "@/stores/notice";
 import { keepAlive } from "@/api/handler";
+import { isAllowedLink } from "@/utils/sanitize";
 import Editor from "@/components/Factory/Shared/Editor.vue";
 import { freshFormLoaded, trackFormSave } from "@/utils/useFreshForm";
 import { plainText } from "./questionSummary";
@@ -151,6 +152,12 @@ const settingsLink = computed(
   () =>
     `${window.route("forms.settings", { uuid: store.form?.uuid })}#completion-page`,
 );
+// the public form only goes to a web link, else it shows the end screen
+const redirects = computed(
+  () =>
+    store.form?.use_cta_redirect &&
+    isAllowedLink(store.form.cta_link, ["http:", "https:"]),
+);
 const text = computed(() => plainText(store.form?.eoc_text ?? null));
 // the public form shows the button only with a link
 const hasButton = computed(
diff --git a/resources/js/components/Factory/Preview/FormPreview.test.ts b/resources/js/components/Factory/Preview/FormPreview.test.ts
index e1449a9d..42ccf7e4 100644
--- a/resources/js/components/Factory/Preview/FormPreview.test.ts
+++ b/resources/js/components/Factory/Preview/FormPreview.test.ts
@@ -185,6 +185,19 @@ describe("the preview panel", () => {
         expect(frame.isVisible()).toBe(true);
     });
 
+    it("shows the end screen when the link isn't a web link, as the public form does", async () => {
+        screen(true);
+        useForm().form = { use_cta_redirect: true, cta_link: "mailto:hi@example.com" } as FormModel;
+        const wrapper = mountPreview();
+
+        const frame = wrapper.findComponent(PreviewFrame);
+        frame.vm.$emit("update:shown", END_SCREEN);
+        await flushPromises();
+
+        expect(wrapper.text()).not.toContain("No end screen");
+        expect(frame.isVisible()).toBe(true);
+    });
+
     it.each([true, false])("shows nothing when closed (desktop: %s)", (wide) => {
         screen(wide);
         const wrapper = mountPreview(false);
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 4b3dfa41..85847bfe 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -74,6 +74,7 @@ import { computed, ref, watch } from "vue";
 import { useForm, useWorkbench } from "@/stores";
 import { questionNumbers } from "@/components/Factory/Document/questionSummary";
 import { END_SCREEN } from "@/forms/classic/previewTarget";
+import { isAllowedLink } from "@/utils/sanitize";
 import PreviewFrame from "./PreviewFrame.vue";
 
 const open = defineModel<boolean>({ required: true });
@@ -97,7 +98,9 @@ const heading = computed(() => {
 });
 // the preview doesn't follow the link, so its end screen is one nobody sees
 const redirect = computed(() =>
-  shown.value === END_SCREEN && store.form?.use_cta_redirect
+  shown.value === END_SCREEN &&
+  store.form?.use_cta_redirect &&
+  isAllowedLink(store.form.cta_link, ["http:", "https:"])
     ? store.form.cta_link
     : undefined,
 );

From 83ec4a3d4ff4632e22c6d988e2ab019fd2b29c7a Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:00:20 +0200
Subject: [PATCH 148/153] docs: add the preview focus fix to #280's changelog
 line

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 3d7a49b5..7c734d6d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   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)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
--   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor, and typing in a question you just opened no longer goes into the preview. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed
 

From a945952f131c41a983280c8c9337d4f9c55a4cf5 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:09:19 +0200
Subject: [PATCH 149/153] fix: start the end screen with a line and give it
 room when open

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/EndScreenBlock.test.ts   |  8 ++++++
 .../Factory/Document/EndScreenBlock.vue       |  6 ++++-
 .../Factory/Document/FormDocument.test.ts     | 26 +++++++++++++++++++
 .../Factory/Document/FormDocument.vue         |  9 ++++++-
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/Factory/Document/EndScreenBlock.test.ts b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
index 279e4262..37fa5bf7 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.test.ts
+++ b/resources/js/components/Factory/Document/EndScreenBlock.test.ts
@@ -131,6 +131,14 @@ describe("the end screen in the document", () => {
         expect(endScreenOpen.value).toBe(false);
     });
 
+    it("gets 24 px above and below when open, like an open question", async () => {
+        expect(mountBlock().get("#row-end-screen").classes()).toContain("pt-2");
+
+        const row = (await open()).get("#row-end-screen");
+        expect(row.classes()).toContain("py-6");
+        expect(row.classes()).not.toContain("pt-2");
+    });
+
     it("has the question card's phone sizes, number column and focus bar", async () => {
         const block = await open();
         const [number, card] = block.findAll("#row-end-screen > div");
diff --git a/resources/js/components/Factory/Document/EndScreenBlock.vue b/resources/js/components/Factory/Document/EndScreenBlock.vue
index 77533967..499e712c 100644
--- a/resources/js/components/Factory/Document/EndScreenBlock.vue
+++ b/resources/js/components/Factory/Document/EndScreenBlock.vue
@@ -1,5 +1,9 @@
 <template>
-  <div id="row-end-screen" class="relative flex items-start">
+  <div
+    id="row-end-screen"
+    class="relative flex items-start"
+    :class="isOpen ? 'py-6' : 'pt-2'"
+  >
     <div class="flex w-8 shrink-0 justify-end pr-2 pt-3 sm:w-12">
       <span class="flex h-6 items-center text-grey-500">
         <D9Icon name="flag" aria-hidden="true" />
diff --git a/resources/js/components/Factory/Document/FormDocument.test.ts b/resources/js/components/Factory/Document/FormDocument.test.ts
index 58fe4ff6..27250350 100644
--- a/resources/js/components/Factory/Document/FormDocument.test.ts
+++ b/resources/js/components/Factory/Document/FormDocument.test.ts
@@ -218,4 +218,30 @@ describe("the form document", () => {
         expect(text.indexOf(first)).toBeGreaterThan(-1);
         expect(text.indexOf("[end]")).toBeGreaterThan(text.indexOf(first));
     });
+
+    it("starts the end screen with a line, but not against a group's frame", () => {
+        const group = { id: 3, uuid: "g1", type: "group" } as FormBlockModel;
+        const inGroup = {
+            id: 4,
+            uuid: "b4",
+            type: "none",
+            parent_block: "g1",
+        } as FormBlockModel;
+        const line = (list: FormBlockModel[]) => {
+            wrapper?.unmount();
+            useForm().blocks = list;
+            wrapper = mount(FormDocument, {
+                props: { status: "loaded" },
+                global: { stubs },
+            });
+            return wrapper
+                .findAll("div")
+                .find((item) => item.text() === "[end]")!
+                .classes("border-t");
+        };
+
+        expect(line(blocks)).toBe(true);
+        expect(line([...blocks, group, inGroup])).toBe(false);
+        expect(line([])).toBe(false);
+    });
 });
diff --git a/resources/js/components/Factory/Document/FormDocument.vue b/resources/js/components/Factory/Document/FormDocument.vue
index 09dde153..023babd8 100644
--- a/resources/js/components/Factory/Document/FormDocument.vue
+++ b/resources/js/components/Factory/Document/FormDocument.vue
@@ -61,7 +61,7 @@
             @pick="addQuestion"
           />
 
-          <EndScreenBlock class="mt-2" />
+          <EndScreenBlock :class="endLine && 'border-t border-grey-200'" />
 
           <div
             id="add-buttons"
@@ -220,6 +220,13 @@ const pick = async (block: FormBlockModel) => {
 
 const numbers = computed(() => questionNumbers(store.blocks ?? []));
 
+// the end screen starts with a line like a question, but not against a group's frame
+const endLine = computed(() => {
+  const top = (store.blocks ?? []).filter((block) => !block.parent_block);
+
+  return top.length > 0 && top[top.length - 1].type !== "group";
+});
+
 const countLine = computed(() => {
   const questions = Object.keys(numbers.value).length;
   const groups = (store.blocks ?? []).filter(

From b8154f7030fc27e8dc4e1c20b00568e84f911cea Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:10:58 +0200
Subject: [PATCH 150/153] fix: wrap a group's Add rule and menu together, on
 the right

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Factory/Document/DocumentGroup.vue        | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/Factory/Document/DocumentGroup.vue b/resources/js/components/Factory/Document/DocumentGroup.vue
index ce170b8f..bd8352c5 100644
--- a/resources/js/components/Factory/Document/DocumentGroup.vue
+++ b/resources/js/components/Factory/Document/DocumentGroup.vue
@@ -31,18 +31,21 @@
       <span v-if="group.is_disabled" class="text-xs text-grey-600"
         >Always hidden</span
       >
-      <button
-        type="button"
-        class="flex h-11 items-center rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
-        @click="addRule(group)"
-      >
-        Add rule
-      </button>
-      <BlockMenu
-        :block="group"
-        :label="`Options for group ${group.title || 'Group'}`"
-        @add-to-group="addQuestion"
-      />
+      <!-- one unit, so on a phone both wrap below the name, on the right -->
+      <div class="ml-auto flex items-center gap-2">
+        <button
+          type="button"
+          class="flex h-11 items-center rounded-md px-2 text-sm font-semibold text-blue-700 lg:h-9 hover:bg-blue-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          @click="addRule(group)"
+        >
+          Add rule
+        </button>
+        <BlockMenu
+          :block="group"
+          :label="`Options for group ${group.title || 'Group'}`"
+          @add-to-group="addQuestion"
+        />
+      </div>
     </div>
     <BlockRules :block="group" :numbers="numbers" class="pb-2 pl-8" />
 

From aadadaeb5a38e8092a298218978f1e163fe38d60 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:14:01 +0200
Subject: [PATCH 151/153] fix: let the preview move the cursor on once the
 owner clicks into it

The preview blocked focus all the time, so a keyboard user couldn't try
the form there. It now blocks focus only while its own window isn't
focused: the editor keeps the cursor, and Enter in the preview moves
on to the next question as on the real form.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../js/forms/classic/ClassicForm.test.ts      | 21 ++++++++++++++++++-
 resources/js/forms/classic/ClassicForm.vue    | 10 +++++++--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/resources/js/forms/classic/ClassicForm.test.ts b/resources/js/forms/classic/ClassicForm.test.ts
index 8a2c68ca..1c9b8c50 100644
--- a/resources/js/forms/classic/ClassicForm.test.ts
+++ b/resources/js/forms/classic/ClassicForm.test.ts
@@ -62,12 +62,31 @@ describe("the public form", () => {
     });
 
     // the editor's preview frame: the cursor must stay in the editor
-    it("never takes the focus on its own in preview mode", async () => {
+    it("takes no focus in preview mode while the owner works in the editor", async () => {
         window.iptSettings = {} as typeof window.iptSettings;
         await mountForm("?preview=1&block=q1");
 
+        expect(document.hasFocus()).toBe(false);
         expect(useConversation().isPreview).toBe(true);
         expect(useConversation().current).toBe("q2");
         expect(document.activeElement).toBe(document.body);
     });
+
+    it("moves the cursor on in preview mode while the owner works in the preview", async () => {
+        window.iptSettings = {} as typeof window.iptSettings;
+        await mountForm("?preview=1&block=q1");
+
+        // a click into the frame focuses its window
+        window.dispatchEvent(new FocusEvent("focus"));
+        useConversation().startAt("q1");
+        await flushPromises();
+        expect(document.activeElement?.tagName).toBe("INPUT");
+
+        // back in the editor
+        (document.activeElement as HTMLElement).blur();
+        window.dispatchEvent(new FocusEvent("blur"));
+        useConversation().startAt("q2");
+        await flushPromises();
+        expect(document.activeElement).toBe(document.body);
+    });
 });
diff --git a/resources/js/forms/classic/ClassicForm.vue b/resources/js/forms/classic/ClassicForm.vue
index b8dafcf6..d884b3f3 100644
--- a/resources/js/forms/classic/ClassicForm.vue
+++ b/resources/js/forms/classic/ClassicForm.vue
@@ -80,6 +80,7 @@ import { useBeforeUnload } from "@/utils/useBeforeUnload";
 import { computed, onMounted, provide, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
+import { useWindowFocus } from "@vueuse/core";
 import { useRouteParams } from "@/utils/useRouteParams";
 import { useRoutes } from "@/utils/useRoutes";
 import { usePreviewMessages } from "@/forms/classic/usePreviewMessages";
@@ -94,9 +95,14 @@ const query = new URLSearchParams(window.location.search);
 const isPreview = !!window.iptSettings && query.get("preview") === "1";
 
 const isLoading = ref(true);
-// the preview never takes the cursor from the editor around it
+// the preview never takes the cursor from the editor around it,
+// but moves it on as the real form does once the owner clicks into it
+const windowFocused = useWindowFocus();
 const focusDisabled = computed(() => {
-  return isPreview || (isLoading.value && !props.flags.autofocus);
+  return (
+    (isPreview && !windowFocused.value) ||
+    (isLoading.value && !props.flags.autofocus)
+  );
 });
 provide("disableFocus", focusDisabled);
 

From 3ab955b585449bc967fd614180ccc6ce93ae7031 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:15:27 +0200
Subject: [PATCH 152/153] fix: close the preview panel on Esc inside the
 preview

On a tablet or phone the preview opens over the document. After a click
into the preview, Esc went to the form there and the panel stayed open.
The form in preview mode now tells the editor about Esc (same origin
both ways, like the other preview messages), and the panel closes with
focus back on the Preview button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 resources/js/Pages/Forms/Edit.test.ts         | 21 +++++++++++++++++++
 .../Factory/Preview/FormPreview.vue           |  2 ++
 .../Factory/Preview/PreviewFrame.test.ts      | 13 ++++++++++++
 .../Factory/Preview/PreviewFrame.vue          | 15 ++++++++++---
 .../forms/classic/usePreviewMessages.test.ts  |  7 +++++++
 .../js/forms/classic/usePreviewMessages.ts    | 11 ++++++++--
 6 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/resources/js/Pages/Forms/Edit.test.ts b/resources/js/Pages/Forms/Edit.test.ts
index 74660edb..00704f77 100644
--- a/resources/js/Pages/Forms/Edit.test.ts
+++ b/resources/js/Pages/Forms/Edit.test.ts
@@ -4,6 +4,7 @@ import { AxiosResponse } from "axios";
 import { callGetForm } from "@/api/forms";
 import Edit from "./Edit.vue";
 import FormMenu from "@/components/Factory/TopBar/FormMenu.vue";
+import PreviewFrame from "@/components/Factory/Preview/PreviewFrame.vue";
 import { useForm, useWorkbench } from "@/stores";
 
 vi.mock("@/api/forms", async (importOriginal) => ({
@@ -164,6 +165,26 @@ describe("editor loading", () => {
         expect(preview?.attributes("aria-haspopup")).toBe("dialog");
     });
 
+    it("closes the preview on Esc inside it and puts focus back on Preview", async () => {
+        const editor = await mountEditor(loads(blocks), {
+            stubs: { ...stubs, FormPreview: false, PreviewFrame: true },
+            mocks: { route: () => "/" },
+        });
+        const preview = editor
+            .findAll("button")
+            .find((button) => button.text() === "Preview");
+        await preview?.trigger("click");
+        await flushPromises();
+        expect(document.activeElement?.closest("[role=dialog]")).not.toBeNull();
+
+        // after a click into the frame, the form there gets the key and tells the editor
+        editor.findComponent(PreviewFrame).vm.$emit("escape");
+        await flushPromises();
+
+        expect(document.querySelector("[role=dialog]")).toBeNull();
+        expect(document.activeElement).toBe(preview?.element);
+    });
+
     it("puts focus back on the form menu when a preview opened from it closes", async () => {
         // the menu item is gone by then, so the dialog can't focus it again
         const editor = await mountEditor(loads(blocks), {
diff --git a/resources/js/components/Factory/Preview/FormPreview.vue b/resources/js/components/Factory/Preview/FormPreview.vue
index 85847bfe..75cd09af 100644
--- a/resources/js/components/Factory/Preview/FormPreview.vue
+++ b/resources/js/components/Factory/Preview/FormPreview.vue
@@ -56,11 +56,13 @@
       <p v-if="isEmpty" class="w-80 max-w-full text-sm text-grey-600">
         Add a question to see it here.
       </p>
+      <!-- Esc after a click into the frame goes to the frame, not to the dialog -->
       <PreviewFrame
         v-else
         v-show="!redirect"
         v-model:shown="shown"
         v-model:missed="missed"
+        @escape="open = false"
       />
     </DialogPanel>
   </Dialog>
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.test.ts b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
index 93319a0a..d643947a 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.test.ts
+++ b/resources/js/components/Factory/Preview/PreviewFrame.test.ts
@@ -234,6 +234,19 @@ describe("the preview frame", () => {
         expect(wrapper.emitted("update:shown")).toEqual([["q1uuid"], ["q2uuid"]]);
     });
 
+    // after a click into the frame, the form there gets the key
+    it("passes on Esc from the form in the frame, from no other origin or window", () => {
+        const wrapper = mountFrame();
+        const escape = { type: "input:preview:escape" };
+
+        fromFrame(wrapper, escape, { origin: "https://evil.example" });
+        fromFrame(wrapper, escape, { source: window });
+        expect(wrapper.emitted("escape")).toBeUndefined();
+
+        fromFrame(wrapper, escape);
+        expect(wrapper.emitted("escape")).toEqual([[]]);
+    });
+
     it("tells when the preview doesn't go to the open question, as when a rule hides it", async () => {
         vi.useFakeTimers();
         const wrapper = mountFrame();
diff --git a/resources/js/components/Factory/Preview/PreviewFrame.vue b/resources/js/components/Factory/Preview/PreviewFrame.vue
index 3e9f2841..c0406cc2 100644
--- a/resources/js/components/Factory/Preview/PreviewFrame.vue
+++ b/resources/js/components/Factory/Preview/PreviewFrame.vue
@@ -22,6 +22,8 @@ import { END_SCREEN } from "@/forms/classic/previewTarget";
 // the question (or END_SCREEN) the preview shows, and an open one it didn't go to
 const shown = defineModel<string | null>("shown", { default: null });
 const missed = defineModel<string | null>("missed", { default: null });
+// Esc inside the frame
+const emit = defineEmits<{ escape: [] }>();
 
 const store = useForm();
 const workbench = useWorkbench();
@@ -134,13 +136,20 @@ useEventListener(window, "message", async (event: MessageEvent) => {
   if (
     event.origin !== origin ||
     !frame.value?.contentWindow ||
-    event.source !== frame.value.contentWindow ||
-    data?.type !== "input:preview:block" ||
-    typeof data.block !== "string"
+    event.source !== frame.value.contentWindow
   ) {
     return;
   }
 
+  if (data?.type === "input:preview:escape") {
+    emit("escape");
+    return;
+  }
+
+  if (data?.type !== "input:preview:block" || typeof data.block !== "string") {
+    return;
+  }
+
   shown.value = data.block;
   clearTimeout(waiting);
   missed.value = null;
diff --git a/resources/js/forms/classic/usePreviewMessages.test.ts b/resources/js/forms/classic/usePreviewMessages.test.ts
index a14b7dfb..7981ce1b 100644
--- a/resources/js/forms/classic/usePreviewMessages.test.ts
+++ b/resources/js/forms/classic/usePreviewMessages.test.ts
@@ -45,6 +45,13 @@ describe('usePreviewMessages', () => {
     expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:block', block: 'q2' }, window.location.origin);
   });
 
+  // the editor's panel around the frame doesn't get the key
+  it('tells the editor when Esc is pressed, only on its own origin', () => {
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(postMessage).toHaveBeenLastCalledWith({ type: 'input:preview:escape' }, window.location.origin);
+  });
+
   it('goes to the question the editor asks for', () => {
     fromEditor({ type: 'input:preview:goto', block: 'q3' });
 
diff --git a/resources/js/forms/classic/usePreviewMessages.ts b/resources/js/forms/classic/usePreviewMessages.ts
index 7ac54d58..9c0dcd8a 100644
--- a/resources/js/forms/classic/usePreviewMessages.ts
+++ b/resources/js/forms/classic/usePreviewMessages.ts
@@ -1,5 +1,5 @@
 import { watch } from "vue";
-import { useEventListener } from "@vueuse/core";
+import { onKeyStroke, useEventListener } from "@vueuse/core";
 import { useConversation } from "@/stores/conversation";
 import { END_SCREEN } from "./previewTarget";
 
@@ -9,7 +9,9 @@ export type PreviewMessage =
     // the form shows this question
     | { type: "input:preview:block"; block: string }
     // the editor asks for this question
-    | { type: "input:preview:goto"; block: string };
+    | { type: "input:preview:goto"; block: string }
+    // Esc goes to the frame, so the editor's panel around it gets it this way
+    | { type: "input:preview:escape" };
 
 export function usePreviewMessages() {
     const store = useConversation();
@@ -29,6 +31,11 @@ export function usePreviewMessages() {
         { immediate: true },
     );
 
+    onKeyStroke("Escape", () => {
+        const message: PreviewMessage = { type: "input:preview:escape" };
+        window.parent.postMessage(message, origin);
+    });
+
     useEventListener(window, "message", (event: MessageEvent) => {
         if (
             event.origin !== origin ||

From 1bb9bf6e718be5f33f819dcb97fc1c73d22b39f0 Mon Sep 17 00:00:00 2001
From: Philipp Reinking <philipp@deck9.co>
Date: Tue, 13 Oct 2026 12:15:45 +0200
Subject: [PATCH 153/153] docs: add Esc in the preview to #280's changelog line

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 7c734d6d..800dd2ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@ Lines marked **Upgrade step** need you to act after updating.
 -   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)
 -   Each rule now shows as a sentence under its question, and a group says when it's hidden. Edit changes a rule right there, and for choices, ratings and scales you pick the answer instead of typing it. A rule whose question was deleted shows in red and can't be saved until you fix it. (#274)
 -   The form editor uses plain words: a question's settings are headed by its answer type, like Choices or Rating, "Identifier" is now "Short name", and every switch shows on or off. Settings name what they do, like "Lowest value", "Shuffle choices" and "None ticked: all types allowed." on file uploads. (#279)
--   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor, and typing in a question you just opened no longer goes into the preview. Settings now calls the Completion Page "End screen", like the editor. (#280)
+-   The editor's preview shows the end screen while you edit it, with your latest text, and says so when your form sends people to a link instead. Its button opens in a new tab there, so you stay in the editor, and typing in a question you just opened no longer goes into the preview. On a tablet or phone, Esc closes the preview even after you clicked into it. Settings now calls the Completion Page "End screen", like the editor. (#280)
 
 ### Fixed