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 01/14] 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 02/14] 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 03/14] 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 04/14] 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 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 05/14] 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 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 06/14] 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 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 07/14] 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 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 08/14] 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 09/14] 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 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 10/14] 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 11/14] 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 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 12/14] 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 13/14] 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 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 14/14] 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) {