feat: show a live preview beside the document

[PhilReinking]

"Preview" in the editor shows the form in preview mode: beside the document on a desktop, as a panel on tablet and phone. It follows the open question, and Next in the preview opens that question in the document.

Fixes BITS-285

• Each save that changes the form reloads the preview at the open question, also when two saves overlap. Opening a card keeps it.
• The preview starts at the open question, or at once when none is open.
• Heading "Preview · question 3"; text instead of a blank frame for an empty form.
• A grey line says why the open question can't show: hidden, in a hidden group, or by a rule.
• Phone: Outline and Preview are 44 px icons below sm. The form menu's Preview opens the panel; other pages open ?preview=1 in a new tab.
• On close, focus goes back to Preview or the form menu. A window narrower than 1280 px closes the preview.
• Messages both ways check origin and source.

Tested: Vitest, lint, vue-tsc, build (stacked, no CI); by hand at 1440, 1024, 390 on a draft and a live form, nothing stored. New tests fail without the change.

Not tested: Safari and Firefox.

Screenshots: on BITS-285.

🤖 Generated with Claude Code

[PhilReinking]

Changes at cbfd30d. No CI (stacked), local runs: Vitest 314, lint, vue-tsc, build, PHP suite on MariaDB 743 passed (one known flaky storyboard test failed).

One must, two shoulds inline. Held: the new tests fail on the base, messages pass only between the editor and its own frame, a full preview run (draft and live, with a file) stores nothing, steady typing reloads once, and Esc and Close return focus to Preview.

[PhilReinking]

Deleting a question, a choice or a rule doesn't reload the preview. The stores call clearSaveError before they remove the item, so reload still sees the old list and stops. In a live run the preview kept a deleted choice until the next edit. Checking one tick later fixes it, and the reload test then needs one more await nextTick():

Suggested change

	// every save that works clears its error; rules save on their own
	useNotice().$onAction(({ name, after }) => {
	if (name === "clearSaveError") after(reload);
	});
	// every save that works clears its error, then the store takes in the answer
	// (a deleted question leaves the list only after that); rules save on their own
	useNotice().$onAction(({ name, after }) => {
	if (name === "clearSaveError") after(() => nextTick(reload));
	});

[PhilReinking]

When two saves overlap, the preview misses the second one. Example: edit the question, then a choice within a second. The question's save reloads the preview and counts the unsaved choice as shown, so the choice's save reloads nothing. In a live run the server had the new choice "Green" and the preview kept "Red" until the next edit. Maybe count an edit as shown only once its own save is back.

[PhilReinking]

On a desktop the preview is on, so a window that gets narrower than 1280 px opens the panel over the document and moves the focus into it. I would close it when the window gets narrower:

Suggested change

	import { useMediaQuery } from "@vueuse/core";
	import PreviewFrame from "./PreviewFrame.vue";
	const open = defineModel<boolean>({ required: true });
	const isWide = useMediaQuery("(min-width: 1280px)");
	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 window that gets narrower keeps the document: the panel opens only on a click
	watch(isWide, (wide) => {
	if (!wide) open.value = false;
	});

[PhilReinking]

OK at 12ed786 (re-check of cbfd30d..12ed786). No CI (stacked), local runs: Vitest 386, lint, vue-tsc, build.

The must and both shoulds are fixed: a deleted question, choice or rule reloads the preview, two overlapping saves both show, and a narrower window closes the panel. The 15 new tests fail on the old code. Two new shoulds inline. Held: the merge keeps parts b and c, and the message checks are unchanged.

[PhilReinking]

Should: a panel that opens while no question is open stays blank, with only "Preview" in it. On a phone: delete the open question, then tap Preview. On a desktop: Escape in a question, then Preview off and on. Starting at once when the questions are already loaded fixes it. The "waits for the questions" test then mounts with blocks = null (I ran it: 18 of 18 pass).

Suggested change

	// 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 },
	);
	// 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();
	},
	);

[PhilReinking]

Should: the server leaves a Hidden question (and every question in a Hidden group) out of the public form. Opening one says "hidden by a rule", so the owner looks for a rule that isn't there. Maybe "Question {{ hiddenNumber }} is hidden or skipped by a rule, so the preview can't show it." The panel below has the same text. Not run.

[PhilReinking]

OK at a1f2a83. No CI (stacked), local runs: Vitest 389, lint, vue-tsc, build.

Both shoulds are fixed, and the 3 new tests fail on 12ed786. On a phone, deleting the open question and then tapping Preview runs the form at question 1. The note names the right reason for a hidden question, a question in a hidden group and one hidden by a rule. A full preview run stored nothing.

[PhilReinking]

Landed in main with #282 (the editor rebuild as one PR); this PR's commits are part of it.