@bygghammar/cms-platform 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -79,7 +79,12 @@
     "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx",
     "./backoffice/media/MediaCleanup": "./src/backoffice/media/MediaCleanup.tsx",
     "./backoffice/media/MediaReplaceDialog": "./src/backoffice/media/MediaReplaceDialog.tsx",
-    "./backoffice/media/ReuploadOverwrite": "./src/backoffice/media/ReuploadOverwrite.tsx"
+    "./backoffice/media/ReuploadOverwrite": "./src/backoffice/media/ReuploadOverwrite.tsx",
+    "./backoffice/forms/FieldEditor": "./src/backoffice/forms/FieldEditor.tsx",
+    "./backoffice/forms/FormPreview": "./src/backoffice/forms/FormPreview.tsx",
+    "./backoffice/forms/VersionHistory": "./src/backoffice/forms/VersionHistory.tsx",
+    "./backoffice/forms/TestDeliveryPanel": "./src/backoffice/forms/TestDeliveryPanel.tsx",
+    "./backoffice/SaveGlobalDialog": "./src/backoffice/SaveGlobalDialog.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/SaveGlobalDialog.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from "react";
+import { X, Globe, Layers, BookmarkPlus } from "lucide-react";
+
+export type SaveGlobalMode = "global" | "template";
+export type SaveGlobalResult = {
+  name: string;
+  key: string;
+  kind: "block" | "section";
+  description: string;
+};
+
+export function slugifyKey(value: string) {
+  return (
+    value
+      .toLowerCase()
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 48) || "section"
+  );
+}
+
+export function SaveGlobalDialog({
+  open,
+  mode,
+  defaultName,
+  error,
+  busy = false,
+  onCancel,
+  onSubmit,
+}: {
+  open: boolean;
+  mode: SaveGlobalMode;
+  defaultName: string;
+  error?: string | null;
+  busy?: boolean;
+  onCancel: () => void;
+  onSubmit: (result: SaveGlobalResult) => void;
+}) {
+  const [name, setName] = useState(defaultName);
+  const [key, setKey] = useState(slugifyKey(defaultName));
+  const [keyTouched, setKeyTouched] = useState(false);
+  const [kind, setKind] = useState<"block" | "section">("section");
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setName(defaultName);
+      setKey(slugifyKey(defaultName));
+      setKeyTouched(false);
+      setKind("section");
+      setDescription("");
+    }
+  }, [open, defaultName]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  const isGlobal = mode === "global";
+  const keyInvalid = isGlobal && !/^[a-z0-9_-]+$/.test(key);
+  const canSave = name.trim().length > 0 && (!isGlobal || (!keyInvalid && key.length > 0));
+
+  const submit = () => {
+    if (!canSave || busy) return;
+    onSubmit({ name: name.trim(), key, kind, description: description.trim() });
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      <button aria-label="Close" onClick={onCancel} className="absolute inset-0 bg-ink/50" />
+      <div className="relative w-full max-w-lg bg-white border border-ink/10 shadow-xl">
+        <div className="flex items-start justify-between border-b border-ink/10 px-5 py-4">
+          <div>
+            <div className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/50">
+              {isGlobal ? "Reusable" : "Blocks library"}
+            </div>
+            <h2 className="text-lg font-medium text-ink flex items-center gap-2">
+              {isGlobal ? <Globe className="size-4" /> : <BookmarkPlus className="size-4" />}
+              {isGlobal ? "Save as reusable" : "Save one-off copy"}
+            </h2>
+          </div>
+          <button onClick={onCancel} className="text-ink/40 hover:text-ink" title="Close">
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <div className="px-5 py-4 space-y-4">
+          <p className="text-xs text-ink/60 leading-relaxed">
+            {isGlobal
+              ? "This page will switch to a live reference. Edit it once and every page or section using it updates."
+              : "Stores an independent duplicate in the Blocks library. Later edits only affect this page."}
+          </p>
+
+          <label className="block">
+            <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">Name</span>
+            <input
+              autoFocus
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                if (!keyTouched) setKey(slugifyKey(e.target.value));
+              }}
+              onKeyDown={(e) => e.key === "Enter" && submit()}
+              className="mt-1 w-full border border-ink/15 px-3 py-2 text-sm focus:border-sea outline-none"
+            />
+          </label>
+
+          {isGlobal ? (
+            <>
+              <label className="block">
+                <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+                  Key (url-safe, unique)
+                </span>
+                <input
+                  value={key}
+                  onChange={(e) => {
+                    setKeyTouched(true);
+                    setKey(e.target.value.trim());
+                  }}
+                  onKeyDown={(e) => e.key === "Enter" && submit()}
+                  className="mt-1 w-full border border-ink/15 px-3 py-2 text-sm font-mono focus:border-sea outline-none"
+                />
+                {keyInvalid && (
+                  <span className="mt-1 block text-[0.7rem] text-red-600">
+                    Use lowercase letters, numbers, hyphen or underscore only.
+                  </span>
+                )}
+              </label>
+
+              <div>
+                <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+                  Save to
+                </span>
+                <div className="mt-1 grid grid-cols-2 gap-2">
+                  {[
+                    {
+                      v: "section" as const,
+                      icon: Layers,
+                      title: "Global sections",
+                      hint: "Shows in Global Sections",
+                    },
+                    {
+                      v: "block" as const,
+                      icon: Globe,
+                      title: "Global block",
+                      hint: "Shows in Block library",
+                    },
+                  ].map((o) => {
+                    const Icon = o.icon;
+                    const active = kind === o.v;
+                    return (
+                      <button
+                        key={o.v}
+                        type="button"
+                        onClick={() => setKind(o.v)}
+                        className={`text-left border px-3 py-2 ${active ? "border-sea bg-ice/40" : "border-ink/15 hover:border-ink/30"}`}
+                      >
+                        <span className="flex items-center gap-1.5 text-sm text-ink">
+                          <Icon className="size-3.5" /> {o.title}
+                        </span>
+                        <span className="block text-[0.7rem] text-ink/55 mt-0.5">{o.hint}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </>
+          ) : (
+            <label className="block">
+              <span className="text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+                Description (optional)
+              </span>
+              <input
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && submit()}
+                className="mt-1 w-full border border-ink/15 px-3 py-2 text-sm focus:border-sea outline-none"
+              />
+            </label>
+          )}
+
+          {error && (
+            <div className="border border-red-300 bg-red-50 px-3 py-2 text-xs text-red-700">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-ink/10 px-5 py-3">
+          <button
+            onClick={onCancel}
+            className="border border-ink/15 px-3 py-1.5 text-sm hover:border-ink/40"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={submit}
+            disabled={!canSave || busy}
+            className="bg-ink text-white px-4 py-1.5 text-sm disabled:opacity-40"
+          >
+            {busy ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/forms/FieldEditor.tsx

@@ -0,0 +1,611 @@
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Copy, GripVertical, Plus, RotateCcw, Trash2 } from "lucide-react";
+import {
+  AUTOCOMPLETE_OPTIONS,
+  fieldTypes,
+  tripFieldOptions,
+  tripYears,
+  makeFieldKey,
+  type TripSource,
+  type FormFieldDef,
+  type FormFieldType,
+} from "../../forms/field-sets";
+import { FIELD_FORMATS } from "../../forms/conditions";
+import { LocalizedField, TextField } from "../inspectors/fields";
+import { ConditionBuilder, RuleSummary } from "./ConditionBuilder";
+import { getTripTerminology } from "../../trips";
+
+const TRIP_TERMINOLOGY = getTripTerminology();
+
+/** Labels depend on registered site terminology, so resolve after startup. */
+const FIELD_TYPES = fieldTypes();
+
+/** Trip fields use the shared trips source and the site's terminology. */
+function TripOptions({
+  field,
+  trips,
+  onChange,
+}: {
+  field: FormFieldDef;
+  trips: TripSource[];
+  onChange: (patch: Partial<FormFieldDef>) => void;
+}) {
+  const years = tripYears(trips);
+  const options = tripFieldOptions(trips, field.tripYear ?? field.courseYear);
+  return (
+    <div className="space-y-2">
+      <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+        {TRIP_TERMINOLOGY.plural}
+      </div>
+      <label className="block">
+        <span className="mb-1 block text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+          Year filter
+        </span>
+        <select
+          value={field.tripYear ?? field.courseYear ?? ""}
+          onChange={(e) => onChange({ tripYear: e.target.value || undefined })}
+          className="w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+        >
+          <option value="">All years</option>
+          {years.map((y) => (
+            <option key={y} value={y}>
+              {y}
+            </option>
+          ))}
+        </select>
+      </label>
+      <p className="text-xs text-ink/50">
+        Choices are generated from the {TRIP_TERMINOLOGY.plural} section, so they stay in sync
+        automatically.
+      </p>
+      {options.length === 0 ? (
+        <p className="text-xs text-ink/45">
+          No {TRIP_TERMINOLOGY.plural.toLowerCase()} match this filter yet.
+        </p>
+      ) : (
+        <ul className="space-y-1 border border-ink/10 bg-white px-3 py-2 text-xs text-ink/70">
+          {options.map((o) => (
+            <li key={o.value}>
+              {o.label.sv || o.label.en}
+              <span className="text-ink/35"> · saved as “{o.value}”</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label className="flex items-center gap-2 text-xs text-ink/70">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="size-4 accent-sea"
+      />
+      {label}
+    </label>
+  );
+}
+
+function OptionsEditor({
+  field,
+  onChange,
+}: {
+  field: FormFieldDef;
+  onChange: (patch: Partial<FormFieldDef>) => void;
+}) {
+  const options = field.options ?? [];
+  const patchOption = (i: number, patch: Partial<(typeof options)[number]>) =>
+    onChange({ options: options.map((o, idx) => (idx === i ? { ...o, ...patch } : o)) });
+
+  return (
+    <div className="space-y-2">
+      <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Choices</div>
+      {options.length === 0 ? <p className="text-xs text-ink/45">No choices yet.</p> : null}
+      {options.map((o, i) => (
+        <div key={i} className="flex flex-wrap items-center gap-2">
+          <input
+            value={o.value}
+            onChange={(e) => patchOption(i, { value: e.target.value })}
+            placeholder="value"
+            className="w-32 border border-ink/15 px-2 py-1 text-xs"
+          />
+          <input
+            value={o.label?.sv ?? ""}
+            onChange={(e) => patchOption(i, { label: { ...o.label, sv: e.target.value } })}
+            placeholder="Swedish label"
+            className="flex-1 min-w-[140px] border border-ink/15 px-2 py-1 text-xs"
+          />
+          <input
+            value={o.label?.en ?? ""}
+            onChange={(e) => patchOption(i, { label: { ...o.label, en: e.target.value } })}
+            placeholder="English label"
+            className="flex-1 min-w-[140px] border border-ink/15 px-2 py-1 text-xs"
+          />
+          <button
+            type="button"
+            onClick={() => onChange({ options: options.filter((_, idx) => idx !== i) })}
+            className="text-ink/35 hover:text-red-500"
+            title="Remove choice"
+          >
+            <Trash2 className="size-3.5" />
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        onClick={() =>
+          onChange({ options: [...options, { value: `option_${options.length + 1}`, label: {} }] })
+        }
+        className="inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+      >
+        <Plus className="size-3.5" />
+        Add choice
+      </button>
+    </div>
+  );
+}
+
+export function FieldEditor({
+  fields,
+  usedKeys,
+  onChange,
+  trips: tripRows,
+}: {
+  fields: FormFieldDef[];
+  /** Keys that already have stored answers — locked against deletion. */
+  usedKeys: string[];
+  onChange: (next: FormFieldDef[]) => void;
+  /** Trip/course rows from the host site, used to preview trip field options. */
+  trips?: TripSource[];
+}) {
+  const [open, setOpen] = useState<string | null>(null);
+  const [showRemoved, setShowRemoved] = useState(false);
+  const [newLabel, setNewLabel] = useState("");
+  const [newType, setNewType] = useState<FormFieldType>("text");
+  const used = new Set(usedKeys);
+  const trips = (tripRows ?? []) as TripSource[];
+
+  const patch = (key: string, p: Partial<FormFieldDef>) =>
+    onChange(fields.map((f) => (f.key === key ? { ...f, ...p } : f)));
+
+  /** Reorder within the visible fields, then write the order back in full. */
+  const move = (key: string, dir: -1 | 1) => {
+    const visible = fields.filter((f) => !f.removed);
+    const i = visible.findIndex((f) => f.key === key);
+    const j = i + dir;
+    if (i < 0 || j < 0 || j >= visible.length) return;
+    const reordered = [...visible];
+    [reordered[i], reordered[j]] = [reordered[j], reordered[i]];
+    onChange([...reordered, ...fields.filter((f) => f.removed)]);
+  };
+
+  const addField = () => {
+    const label = newLabel.trim();
+    if (!label) return;
+    const key = makeFieldKey(
+      label,
+      fields.map((f) => f.key),
+    );
+    onChange([
+      ...fields,
+      {
+        key,
+        type: newType,
+        label: { sv: label, en: label },
+        enabled: true,
+        required: false,
+        custom: true,
+        options: newType === "select" ? [{ value: "option_1", label: {} }] : undefined,
+      },
+    ]);
+    setNewLabel("");
+    setOpen(key);
+  };
+
+  const duplicate = (f: FormFieldDef) => {
+    const key = makeFieldKey(
+      `${f.key}_copy`,
+      fields.map((x) => x.key),
+    );
+    onChange([...fields, { ...f, key, custom: true }]);
+    setOpen(key);
+  };
+
+  /**
+   * Custom fields are dropped outright. Built-in fields keep a tombstone so
+   * the canonical set does not rebuild them on the next load, and so old
+   * answers still resolve their label.
+   */
+  const removeField = (f: FormFieldDef) => {
+    if (used.has(f.key)) return;
+    if (
+      !window.confirm(
+        f.custom
+          ? `Remove the field "${f.label.sv || f.label.en || f.key}"? It has no answers, so nothing is lost.`
+          : `Remove the built-in field "${f.label.sv || f.label.en || f.key}"? You can restore it again from "Removed built-in fields" below.`,
+      )
+    )
+      return;
+    if (f.custom) {
+      onChange(fields.filter((x) => x.key !== f.key));
+    } else {
+      onChange(fields.map((x) => (x.key === f.key ? { ...x, removed: true, enabled: false } : x)));
+    }
+    setOpen(null);
+  };
+
+  const restoreField = (key: string) =>
+    onChange(fields.map((x) => (x.key === key ? { ...x, removed: false, enabled: true } : x)));
+
+  const visibleFields = fields.filter((f) => !f.removed);
+  const removedFields = fields.filter((f) => f.removed);
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-ink/50">
+        Reorder, rename, add your own fields. A field key never changes.{" "}
+        <strong className="font-normal text-ink/70">Off</strong> keeps the field and its history but
+        hides it from the site; <strong className="font-normal text-ink/70">Delete</strong> takes it
+        out of the form entirely. A field that already has answers can only be switched off, so
+        historic submissions stay readable.
+      </p>
+
+      <div className="space-y-2">
+        {visibleFields.map((f) => {
+          const locked = used.has(f.key);
+          const isOpen = open === f.key;
+          return (
+            <div
+              key={f.key}
+              className={
+                f.enabled
+                  ? "border border-ink/10"
+                  : "border border-dashed border-ink/15 bg-ink/[0.02]"
+              }
+            >
+              <div className="flex flex-wrap items-center gap-3 px-3 py-2">
+                <GripVertical className="size-4 shrink-0 text-ink/25" />
+                <div className="flex flex-col">
+                  <button
+                    type="button"
+                    onClick={() => setOpen(isOpen ? null : f.key)}
+                    className="text-left text-sm text-ink hover:text-sea"
+                  >
+                    {f.label.sv || f.label.en || f.key}
+                  </button>
+                  <span className="text-[0.6rem] uppercase tracking-[0.18em] text-ink/40">
+                    {f.key} · {f.type}
+                    {f.custom ? " · custom" : ""}
+                    {used.has(f.key) ? " · has answers" : ""}
+                  </span>
+                  {!f.enabled ? (
+                    <span className="mt-1 w-fit border border-ink/15 px-1.5 py-0.5 text-[0.55rem] uppercase tracking-[0.18em] text-ink/45">
+                      Off — not shown on the site
+                    </span>
+                  ) : null}
+                </div>
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <RuleSummary rule={f.showWhen} fields={fields} prefix="Shown when" />
+                  <RuleSummary rule={f.requireWhen} fields={fields} prefix="Required when" />
+                </div>
+
+                <div className="ml-auto flex items-center gap-3">
+                  <Toggle
+                    label="On"
+                    checked={f.enabled}
+                    onChange={(v) => patch(f.key, { enabled: v })}
+                  />
+                  <Toggle
+                    label="Required"
+                    checked={f.required}
+                    onChange={(v) => patch(f.key, { required: v })}
+                  />
+                  <Toggle
+                    label="Full width"
+                    checked={f.wide === true}
+                    onChange={(v) => patch(f.key, { wide: v })}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => move(f.key, -1)}
+                    className="text-ink/35 hover:text-sea"
+                    title="Move up"
+                  >
+                    <ChevronUp className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => move(f.key, 1)}
+                    className="text-ink/35 hover:text-sea"
+                    title="Move down"
+                  >
+                    <ChevronDown className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => duplicate(f)}
+                    className="text-ink/35 hover:text-sea"
+                    title="Duplicate field"
+                  >
+                    <Copy className="size-4" />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={locked}
+                    onClick={() => removeField(f)}
+                    className="text-ink/35 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-30"
+                    title={
+                      locked
+                        ? "This field already has answers — switch it off instead"
+                        : "Remove field"
+                    }
+                  >
+                    <Trash2 className="size-4" />
+                  </button>
+                </div>
+              </div>
+
+              {isOpen ? (
+                <div className="space-y-4 border-t border-ink/10 bg-ink/[0.015] px-4 py-4">
+                  {f.custom ? (
+                    <label className="block">
+                      <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                        Type
+                      </span>
+                      <select
+                        value={f.type}
+                        onChange={(e) => patch(f.key, { type: e.target.value as FormFieldType })}
+                        className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+                      >
+                        {FIELD_TYPES.map((t) => (
+                          <option key={t.value} value={t.value}>
+                            {t.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+
+                  <LocalizedField
+                    label="Label"
+                    value={f.label}
+                    onChange={(v) => patch(f.key, { label: v })}
+                  />
+                  <LocalizedField
+                    label="Placeholder"
+                    value={f.placeholder}
+                    onChange={(v) => patch(f.key, { placeholder: v })}
+                  />
+                  <LocalizedField
+                    label="Help text"
+                    value={f.help}
+                    onChange={(v) => patch(f.key, { help: v })}
+                  />
+
+                  {f.type === "select" ? (
+                    <OptionsEditor field={f} onChange={(p) => patch(f.key, p)} />
+                  ) : null}
+                  {f.type === "trip" || f.type === "course" ? (
+                    <TripOptions field={f} trips={trips} onChange={(p) => patch(f.key, p)} />
+                  ) : null}
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <label className="block">
+                      <span className="mb-1 block text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                        Autofill
+                      </span>
+                      <select
+                        value={f.autocomplete ?? ""}
+                        onChange={(e) =>
+                          patch(f.key, { autocomplete: e.target.value || undefined })
+                        }
+                        className="w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                      >
+                        <option value="">Automatic</option>
+                        {AUTOCOMPLETE_OPTIONS.map((o) => (
+                          <option key={o.value} value={o.value}>
+                            {o.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label className="block">
+                      <span className="mb-1 block text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+                        Format
+                      </span>
+                      <select
+                        value={f.format ?? ""}
+                        onChange={(e) =>
+                          patch(f.key, {
+                            format: (e.target.value || undefined) as FormFieldDef["format"],
+                          })
+                        }
+                        className="w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+                      >
+                        <option value="">No extra format check</option>
+                        {FIELD_FORMATS.map((o) => (
+                          <option key={o.value} value={o.value}>
+                            {o.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <TextField
+                      label="Min length"
+                      value={f.minLength ? String(f.minLength) : ""}
+                      onChange={(v) => patch(f.key, { minLength: Number(v) || undefined })}
+                    />
+                    <TextField
+                      label="Max length"
+                      value={f.maxLength ? String(f.maxLength) : ""}
+                      onChange={(v) => patch(f.key, { maxLength: Number(v) || undefined })}
+                    />
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-3">
+                    <TextField
+                      label="Pattern (regex)"
+                      value={f.pattern ?? ""}
+                      onChange={(v) => patch(f.key, { pattern: v || undefined })}
+                    />
+                    {f.type === "date" ? (
+                      <>
+                        <TextField
+                          label="Earliest date (YYYY-MM-DD)"
+                          value={f.minDate ?? ""}
+                          onChange={(v) => patch(f.key, { minDate: v || undefined })}
+                        />
+                        <TextField
+                          label="Latest date (YYYY-MM-DD)"
+                          value={f.maxDate ?? ""}
+                          onChange={(v) => patch(f.key, { maxDate: v || undefined })}
+                        />
+                      </>
+                    ) : (
+                      <>
+                        <TextField
+                          label="Min value"
+                          value={f.min === undefined ? "" : String(f.min)}
+                          onChange={(v) => patch(f.key, { min: v === "" ? undefined : Number(v) })}
+                        />
+                        <TextField
+                          label="Max value"
+                          value={f.max === undefined ? "" : String(f.max)}
+                          onChange={(v) => patch(f.key, { max: v === "" ? undefined : Number(v) })}
+                        />
+                      </>
+                    )}
+                  </div>
+
+                  <LocalizedField
+                    label="Custom error message"
+                    value={f.errorMessage}
+                    onChange={(v) => patch(f.key, { errorMessage: v })}
+                  />
+
+                  <div className="grid gap-3 lg:grid-cols-2">
+                    <ConditionBuilder
+                      title="Show this field when"
+                      description="Leave empty to always show it."
+                      rule={f.showWhen}
+                      selfKey={f.key}
+                      fields={fields}
+                      onChange={(r) => patch(f.key, { showWhen: r })}
+                    />
+                    <ConditionBuilder
+                      title="Make it required when"
+                      description="Required only while these conditions match."
+                      rule={f.requireWhen}
+                      selfKey={f.key}
+                      fields={fields}
+                      onChange={(r) => patch(f.key, { requireWhen: r })}
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {removedFields.length ? (
+        <div className="border border-dashed border-ink/20 p-4">
+          <button
+            type="button"
+            onClick={() => setShowRemoved((v) => !v)}
+            className="flex w-full items-center justify-between gap-3 text-left"
+          >
+            <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/45">
+              Removed built-in fields ({removedFields.length})
+            </span>
+            {showRemoved ? (
+              <ChevronUp className="size-4 text-ink/35" />
+            ) : (
+              <ChevronDown className="size-4 text-ink/35" />
+            )}
+          </button>
+          {showRemoved ? (
+            <>
+              <p className="mt-1 text-xs text-ink/45">
+                These are not part of the form any more. Restore one to bring it back with its
+                original key.
+              </p>
+              <div className="mt-3 flex flex-wrap gap-2">
+                {removedFields.map((f) => (
+                  <button
+                    key={f.key}
+                    type="button"
+                    onClick={() => restoreField(f.key)}
+                    className="inline-flex items-center gap-2 border border-ink/15 bg-white px-3 py-2 text-xs text-ink/70 hover:border-sea hover:text-ink"
+                  >
+                    <RotateCcw className="size-3.5" />
+                    {f.label.sv || f.label.en || f.key}
+                    <span className="text-[0.6rem] uppercase tracking-[0.18em] text-ink/40">
+                      {f.key}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="flex flex-wrap items-end gap-3 border border-dashed border-ink/20 p-4">
+        <label className="flex-1 min-w-[180px]">
+          <span className="text-xs text-ink/55">New field label</span>
+          <input
+            value={newLabel}
+            onChange={(e) => setNewLabel(e.target.value)}
+            placeholder="Company"
+            className="mt-1 w-full border border-ink/20 px-3 py-2 text-sm"
+          />
+        </label>
+        <label className="min-w-[160px]">
+          <span className="text-xs text-ink/55">Type</span>
+          <select
+            value={newType}
+            onChange={(e) => setNewType(e.target.value as FormFieldType)}
+            className="mt-1 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            {FIELD_TYPES.map((t) => (
+              <option key={t.value} value={t.value}>
+                {t.label}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button
+          type="button"
+          onClick={addField}
+          disabled={!newLabel.trim()}
+          className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-sea disabled:opacity-40"
+        >
+          <Plus className="size-4" />
+          Add field
+        </button>
+        {newLabel.trim() ? (
+          <span className="text-xs text-ink/45">
+            Key:{" "}
+            {makeFieldKey(
+              newLabel,
+              fields.map((f) => f.key),
+            )}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/backoffice/forms/FormPreview.tsx

@@ -0,0 +1,108 @@
+import type React from "react";
+import { useState } from "react";
+import { LocaleProvider, SUPPORTED_LOCALES, type Locale } from "../../i18n";
+import type {
+  FormDefaults,
+  FormFieldDef,
+  FormPrivateSettings,
+  FormPublicSettings,
+  PublicForm,
+} from "../../forms/field-sets";
+
+/**
+ * Renders the unsaved editor state with the exact public form component,
+ * including conditional show/hide and live validation errors.
+ * Submitting only runs the rules — nothing is stored or sent.
+ */
+export function FormPreview({
+  formKey,
+  name,
+  formType,
+  fields,
+  pub,
+  priv,
+  defaults,
+  dark = false,
+  renderForm,
+}: {
+  formKey: string;
+  name: string;
+  formType: string;
+  fields: FormFieldDef[];
+  pub: FormPublicSettings;
+  priv: FormPrivateSettings;
+  defaults?: FormDefaults | null;
+  dark?: boolean;
+  /** Host site's public form renderer (kept out of the platform on purpose). */
+  renderForm: (args: { form: PublicForm; dark: boolean; preview: boolean }) => React.ReactNode;
+}) {
+  const [locale, setLocale] = useState<Locale>("sv");
+  const [tone, setTone] = useState<"light" | "dark">(dark ? "dark" : "light");
+
+  const form: PublicForm = {
+    id: "preview",
+    key: formKey,
+    name,
+    form_type: formType,
+    fields,
+    title: pub.title,
+    intro: pub.intro,
+    submitLabel: pub.submitLabel ?? { sv: "Skicka", en: "Send" },
+    consentText: pub.consentText ?? defaults?.consent_text ?? {},
+    privacyPolicyUrl: defaults?.privacy_policy_url ?? "",
+    requireConsent: pub.requireConsent !== false,
+    thankyouMode:
+      (pub.thankyouMode ?? (defaults?.thankyou_mode as "inline" | "redirect") ?? "inline") ===
+      "redirect"
+        ? "redirect"
+        : "inline",
+    thankyouMessage: pub.thankyouMessage ??
+      defaults?.thankyou_message ?? { sv: "Tack! Vi hör av oss snart.", en: "Thank you!" },
+    thankyouRedirect: pub.thankyouRedirect ?? defaults?.thankyou_redirect ?? "",
+    honeypot: false,
+    minSeconds: 0,
+    savePartials: priv.savePartials ?? defaults?.save_partials ?? true,
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h3 className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">Live preview</h3>
+          <p className="mt-1 text-xs text-ink/45">
+            Exactly what visitors see. Submitting here only checks the rules.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <select
+            value={locale}
+            onChange={(e) => setLocale(e.target.value as Locale)}
+            className="border border-ink/15 px-2 py-1.5 text-xs"
+          >
+            {SUPPORTED_LOCALES.map((l: Locale) => (
+              <option key={l} value={l}>
+                {l.toUpperCase()}
+              </option>
+            ))}
+          </select>
+          <button
+            type="button"
+            onClick={() => setTone(tone === "dark" ? "light" : "dark")}
+            className="border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+          >
+            {tone === "dark" ? "Light background" : "Dark background"}
+          </button>
+        </div>
+      </div>
+
+      <div className={tone === "dark" ? "bg-ink p-6" : "bg-paper p-6"}>
+        <LocaleProvider locale={locale}>
+          {/* Remount on locale/tone change so state starts clean. */}
+          <div key={`${locale}-${tone}`}>
+            {renderForm({ form, dark: tone === "dark", preview: true })}
+          </div>
+        </LocaleProvider>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/forms/TestDeliveryPanel.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { Send, TestTube } from "lucide-react";
+
+import type { FormFieldDef, FormPrivateSettings } from "../../forms/field-sets";
+import { fieldLabel } from "../../forms/conditions";
+
+export type TestNotificationResult = {
+  ok: boolean;
+  recipients?: string[];
+  error?: string | null;
+  [key: string]: unknown;
+};
+
+/**
+ * Verifies notification templates, sender/recipient settings and conditional
+ * routing against example answers. Nothing is stored as a submission.
+ */
+export function TestDeliveryPanel({
+  formKey,
+  fields,
+  priv,
+  sendTest,
+}: {
+  formKey: string;
+  fields: FormFieldDef[];
+  priv: FormPrivateSettings;
+  /** Host site's test-delivery server function. */
+  sendTest: (input: { data: Record<string, unknown> }) => Promise<TestNotificationResult>;
+}) {
+  const test = sendTest;
+  const [what, setWhat] = useState<"notification" | "autoreply">("notification");
+  const [locale, setLocale] = useState("sv");
+  const [to, setTo] = useState("");
+  const [values, setValues] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<TestNotificationResult | null>(null);
+
+  const run = async (send: boolean) => {
+    setBusy(true);
+    try {
+      const res = await test({
+        data: {
+          formKey,
+          locale,
+          what,
+          send,
+          to: to.trim() || undefined,
+          fields: fields as unknown as Record<string, unknown>[],
+          private_settings: priv as Record<string, unknown>,
+          values,
+        },
+      });
+      setResult(res);
+      if (res.error) toast.error(res.error);
+      else if (send && res.sent) toast.success("Test email sent");
+      else if (send) toast.error("Nothing was sent — see the report below");
+      else toast.success("Dry run complete");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Test failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const active = fields.filter((f) => f.enabled);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+          Send test notification
+        </h3>
+        <p className="mt-1 text-xs text-ink/45">
+          Uses the settings currently on screen. No submission is created.
+        </p>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-3">
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Email</span>
+          <select
+            value={what}
+            onChange={(e) => setWhat(e.target.value as "notification" | "autoreply")}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="notification">Admin notification</option>
+            <option value="autoreply">Autoreply to sender</option>
+          </select>
+        </label>
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">Language</span>
+          <select
+            value={locale}
+            onChange={(e) => setLocale(e.target.value)}
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          >
+            <option value="sv">SV</option>
+            <option value="en">EN</option>
+          </select>
+        </label>
+        <label className="block">
+          <span className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+            Send to (optional override)
+          </span>
+          <input
+            value={to}
+            onChange={(e) => setTo(e.target.value)}
+            placeholder="you@example.com"
+            className="mt-2 w-full border border-ink/20 bg-white px-3 py-2 text-sm"
+          />
+        </label>
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">
+          Example answers (blank = generated sample)
+        </div>
+        <div className="grid gap-2 sm:grid-cols-2">
+          {active.map((f) => (
+            <label key={f.key} className="block">
+              <span className="text-[0.6rem] uppercase tracking-[0.16em] text-ink/45">
+                {fieldLabel(f, "sv")} · {f.key}
+              </span>
+              <input
+                value={values[f.key] ?? ""}
+                onChange={(e) => setValues({ ...values, [f.key]: e.target.value })}
+                className="mt-1 w-full border border-ink/15 px-2 py-1 text-xs"
+              />
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => run(false)}
+          className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-xs uppercase tracking-[0.2em] hover:border-sea disabled:opacity-50"
+        >
+          <TestTube className="size-4" />
+          Dry run (no email)
+        </button>
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => run(true)}
+          className="inline-flex items-center gap-2 bg-ink px-4 py-2 text-xs uppercase tracking-[0.2em] text-paper hover:bg-sea hover:text-ink disabled:opacity-50"
+        >
+          <Send className="size-4" />
+          Send test
+        </button>
+      </div>
+
+      {result ? (
+        <div className="space-y-2 border border-ink/10 bg-paper/60 p-4 text-xs text-ink/70">
+          <div>
+            <strong>Status:</strong>{" "}
+            {result.error
+              ? `Failed — ${result.error}`
+              : result.sent
+                ? "Sent"
+                : "Not sent (report only)"}
+          </div>
+          <div>
+            <strong>Recipients:</strong> {result.recipients.join(", ") || "—"}
+          </div>
+          <div>
+            <strong>Subject:</strong> {result.subject || "(standard subject)"}
+          </div>
+          <div>
+            <strong>From:</strong> {result.from || "(provider default)"} ·{" "}
+            <strong>Reply-to:</strong> {result.replyTo || "(submitter email)"}
+          </div>
+          <div>
+            <strong>Matched routing rules:</strong>{" "}
+            {result.matchedRules.length
+              ? result.matchedRules
+                  .map((r) => `${r.to}${r.exclusive ? " (only these)" : ""}`)
+                  .join(", ")
+              : "none"}
+          </div>
+          {result.warnings.length ? (
+            <ul className="list-disc pl-5 text-amber-700">
+              {result.warnings.map((w, i) => (
+                <li key={i}>{w}</li>
+              ))}
+            </ul>
+          ) : null}
+          <details>
+            <summary className="cursor-pointer text-ink/50">Example answers used</summary>
+            <pre className="mt-2 overflow-auto whitespace-pre-wrap text-[0.7rem]">
+              {JSON.stringify(result.sampleValues, null, 2)}
+            </pre>
+          </details>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/backoffice/forms/VersionHistory.tsx

@@ -0,0 +1,142 @@
+import type React from "react";
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { History, RotateCcw } from "lucide-react";
+
+import type {
+  FormFieldDef,
+  FormPrivateSettings,
+  FormPublicSettings,
+} from "../../forms/field-sets";
+
+
+/**
+ * Published history for one form. Every save stores an immutable snapshot of
+ * the definition (never of submissions), so any earlier state can be previewed
+ * and rolled back without touching received data.
+ */
+export type FormVersionRow = {
+  id: string;
+  version_no: number;
+  name: string;
+  form_type: string;
+  created_at: string;
+  created_by_email?: string | null;
+  note?: string | null;
+  fields: FormFieldDef[];
+  public_settings: FormPublicSettings;
+  private_settings: FormPrivateSettings;
+};
+
+export function VersionHistory({
+  formKey,
+  listVersions,
+  restoreVersion,
+  renderPreview,
+}: {
+  formKey: string;
+  listVersions: (input: { data: { formKey: string } }) => Promise<FormVersionRow[]>;
+  restoreVersion: (input: {
+    data: { versionId: string };
+  }) => Promise<{ carriedFields: string[] }>;
+  /** Host renders the preview so the platform stays free of site form UI. */
+  renderPreview: (version: FormVersionRow) => React.ReactNode;
+}) {
+  const qc = useQueryClient();
+  const list = listVersions;
+  const restore = restoreVersion;
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const { data: versions, isLoading } = useQuery({
+    queryKey: ["form-versions", formKey],
+    queryFn: () => list({ data: { formKey } }),
+  });
+
+  const selected = (versions ?? []).find((v) => v.id === openId) ?? null;
+
+  const onRestore = async (id: string, no: number) => {
+    if (!window.confirm(`Roll this form back to version ${no}? Submissions are untouched.`)) return;
+    setBusy(true);
+    try {
+      const res = await restore({ data: { versionId: id } });
+      await qc.invalidateQueries({ queryKey: ["backoffice-forms"] });
+      await qc.invalidateQueries({ queryKey: ["form-versions", formKey] });
+      toast.success(
+        res.carriedFields.length
+          ? `Rolled back. Kept ${res.carriedFields.length} field(s) with existing answers (disabled).`
+          : "Rolled back",
+      );
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Rollback failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-[minmax(0,420px)_1fr]">
+      <div className="border border-ink/10 bg-white p-6">
+        <h2 className="flex items-center gap-2 text-xs uppercase tracking-[0.22em] text-ink/50">
+          <History className="size-4" />
+          Version history
+        </h2>
+        {isLoading ? (
+          <p className="mt-4 text-sm text-ink/45">Loading…</p>
+        ) : !versions?.length ? (
+          <p className="mt-4 text-sm text-ink/45">
+            No snapshots yet. The next save creates version 1.
+          </p>
+        ) : (
+          <ul className="mt-4 divide-y divide-ink/10">
+            {versions.map((v) => (
+              <li key={v.id} className="flex items-start gap-3 py-3">
+                <button
+                  onClick={() => setOpenId(v.id)}
+                  className={`flex-1 text-left ${openId === v.id ? "text-ink" : "text-ink/70"}`}
+                >
+                  <span className="text-sm font-medium">
+                    v{v.version_no} · {v.name}
+                  </span>
+                  <span className="mt-0.5 block text-xs text-ink/45">
+                    {new Date(v.created_at).toLocaleString("sv-SE")}
+                    {v.created_by_email ? ` · ${v.created_by_email}` : ""}
+                  </span>
+                  {v.note ? (
+                    <span className="mt-0.5 block text-xs text-ink/45">{v.note}</span>
+                  ) : null}
+                  <span className="mt-0.5 block text-[0.65rem] uppercase tracking-[0.18em] text-ink/35">
+                    {v.fields.filter((f) => f.enabled !== false).length} active field(s)
+                  </span>
+                </button>
+                <button
+                  onClick={() => onRestore(v.id, v.version_no)}
+                  disabled={busy}
+                  title="Roll back to this version"
+                  className="inline-flex items-center gap-2 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.18em] hover:border-sea disabled:opacity-50"
+                >
+                  <RotateCcw className="size-3.5" />
+                  Restore
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <div className="border border-ink/10 bg-white p-6">
+        <h2 className="text-xs uppercase tracking-[0.22em] text-ink/50">
+          {selected ? `Preview of v${selected.version_no}` : "Preview"}
+        </h2>
+        {selected ? (
+          <div className="mt-4">
+            {renderPreview(selected)}
+          </div>
+        ) : (
+          <p className="mt-4 text-sm text-ink/45">Pick a version on the left to preview it.</p>
+        )}
+      </div>
+    </div>
+  );
+}