@bygghammar/cms-platform 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.4.0",
+  "version": "0.5.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,
@@ -67,7 +67,12 @@
     "./i18n/json": "./src/i18n/json.ts",
     "./i18n/resolve-locale": "./src/i18n/resolve-locale.ts",
     "./i18n/translation-meta": "./src/i18n/translation-meta.ts",
-    "./platform": "./src/platform/index.ts"
+    "./platform": "./src/platform/index.ts",
+    "./admin/format-log": "./src/admin/format-log.ts",
+    "./backoffice/forms/ConditionBuilder": "./src/backoffice/forms/ConditionBuilder.tsx",
+    "./backoffice/forms/RuleSimulator": "./src/backoffice/forms/RuleSimulator.tsx",
+    "./backoffice/forms/SmartTags": "./src/backoffice/forms/SmartTags.tsx",
+    "./backoffice/forms/ActivityLog": "./src/backoffice/forms/ActivityLog.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/admin/format-log.ts

@@ -0,0 +1,217 @@
+// Turn machine action codes and JSON meta into human-readable strings for the
+// backoffice Audit and Email log views.
+
+const ACTION_LABELS: Record<string, string> = {
+  "user.create": "Created user",
+  "user.delete": "Deleted user",
+  "user.password_reset": "Reset password",
+  "user.invite": "Invited user",
+  "role.grant": "Granted role",
+  "role.revoke": "Revoked role",
+  "role.update": "Updated role",
+  "email.settings.update": "Updated email settings",
+  "email.settings.test": "Sent test email",
+  "content.section.save": "Saved section",
+  "content.section.delete": "Deleted section",
+  "page.create": "Created page",
+  "page.update": "Updated page",
+  "page.delete": "Deleted page",
+  "page.publish": "Published page",
+  "page.unpublish": "Unpublished page",
+  "page.version.create": "Saved page version",
+  "page.version.restore": "Restored page version",
+  "template.create": "Created block template",
+  "template.update": "Updated block template",
+  "template.delete": "Deleted block template",
+  "global.section.save": "Saved global block",
+  "global.section.delete": "Deleted global block",
+  "domain.create": "Added locale domain",
+  "domain.update": "Updated locale domain",
+  "domain.delete": "Removed locale domain",
+  "seo.update": "Updated SEO",
+  "media.upload": "Uploaded media",
+  "media.delete": "Deleted media",
+  "media.import": "Imported external media",
+  "translate.run": "Ran auto-translation",
+  "form.create": "Created form",
+  "form.update": "Updated form",
+  "form.duplicate": "Duplicated form",
+  "form.soft_delete": "Moved form to bin",
+  "form.restore": "Restored form",
+  "form.purge": "Permanently deleted form",
+  "form.defaults.update": "Updated shared form defaults",
+  "auth.login": "Signed in",
+  "auth.logout": "Signed out",
+};
+
+const ENTITY_LABELS: Record<string, string> = {
+  user: "User",
+  user_role: "Role",
+  content_section: "Section",
+  page: "Page",
+  page_version: "Page version",
+  page_publication: "Publication",
+  block_template: "Template",
+  global_section: "Global block",
+  locale_domain: "Domain",
+  page_seo: "SEO",
+  email_settings: "Email settings",
+  media: "Media",
+  redirect: "Redirect",
+  forms: "Form",
+};
+
+export function humanizeAction(action: string | null | undefined): string {
+  if (!action) return "—";
+  if (ACTION_LABELS[action]) return ACTION_LABELS[action];
+  // Fallback: turn "some.snake_case.action" into "Some snake case action".
+  return action
+    .replace(/[._-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+    .replace(/^./, (c) => c.toUpperCase());
+}
+
+export function humanizeEntity(entity: string | null | undefined): string {
+  if (!entity) return "—";
+  return (
+    ENTITY_LABELS[entity] ?? entity.replace(/[._-]+/g, " ").replace(/^./, (c) => c.toUpperCase())
+  );
+}
+
+function shortId(id: string): string {
+  if (id.length <= 12) return id;
+  // UUID-style: keep first + last block for context
+  if (/^[0-9a-f]{8}-/i.test(id)) return id.slice(0, 8) + "…";
+  return id.slice(0, 10) + "…";
+}
+
+export function formatEntityRef(
+  entity: string | null | undefined,
+  entityId: string | null | undefined,
+): string {
+  const label = humanizeEntity(entity);
+  if (!entityId) return label;
+  return `${label} · ${shortId(entityId)}`;
+}
+
+/**
+ * Convert an arbitrary `meta` payload into a short prose summary suitable for
+ * a log row. Falls back to compact key: value pairs, and finally to nothing.
+ */
+export function summarizeMeta(meta: unknown): string {
+  if (!meta || typeof meta !== "object") return "";
+  const m = meta as Record<string, unknown>;
+  if (!Object.keys(m).length) return "";
+
+  const parts: string[] = [];
+  const push = (label: string, value: unknown) => {
+    if (value == null || value === "") return;
+    if (typeof value === "object") {
+      try {
+        parts.push(`${label}: ${JSON.stringify(value)}`);
+      } catch {
+        /* noop */
+      }
+      return;
+    }
+    parts.push(`${label}: ${String(value)}`);
+  };
+
+  // Common well-known fields, in a nice order
+  const known = [
+    ["summary", "Summary"],
+    ["email", "Email"],
+    ["role", "Role"],
+    ["name", "Name"],
+    ["key", "Key"],
+    ["slug", "Slug"],
+    ["locale", "Locale"],
+    ["from", "From"],
+    ["to", "To"],
+    ["reason", "Reason"],
+    ["status", "Status"],
+    ["version", "Version"],
+    ["count", "Count"],
+    ["path", "Path"],
+    ["domain", "Domain"],
+    ["title", "Title"],
+  ] as const;
+  const used = new Set<string>();
+  for (const [k, label] of known) {
+    if (k in m) {
+      push(label, m[k]);
+      used.add(k);
+    }
+  }
+  // Any remaining keys, up to 4 total extra fields
+  const extras = Object.keys(m)
+    .filter((k) => !used.has(k))
+    .slice(0, 4);
+  for (const k of extras) {
+    push(
+      k.replace(/[._-]+/g, " ").replace(/^./, (c) => c.toUpperCase()),
+      m[k],
+    );
+  }
+  return parts.join(" · ");
+}
+
+export function formatRelativeTime(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "—";
+  const diff = Date.now() - then;
+  const s = Math.round(diff / 1000);
+  if (s < 45) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m} min ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h} h ago`;
+  const d = Math.round(h / 24);
+  if (d < 30) return `${d} d ago`;
+  const mo = Math.round(d / 30);
+  if (mo < 12) return `${mo} mo ago`;
+  const y = Math.round(mo / 12);
+  return `${y} y ago`;
+}
+
+export function formatAbsoluteTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "—";
+  return d.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function emailStatusTone(status: string | null | undefined): {
+  label: string;
+  className: string;
+} {
+  const s = (status ?? "").toLowerCase();
+  const map: Record<string, { label: string; className: string }> = {
+    sent: { label: "Sent", className: "border-green-600 text-green-700 bg-green-50" },
+    delivered: { label: "Delivered", className: "border-green-600 text-green-700 bg-green-50" },
+    queued: { label: "Queued", className: "border-ink/30 text-ink/70 bg-ink/5" },
+    pending: { label: "Pending", className: "border-ink/30 text-ink/70 bg-ink/5" },
+    failed: { label: "Failed", className: "border-red-600 text-red-700 bg-red-50" },
+    rejected: { label: "Rejected", className: "border-red-600 text-red-700 bg-red-50" },
+    bounced: { label: "Bounced", className: "border-amber-600 text-amber-700 bg-amber-50" },
+    complained: { label: "Complained", className: "border-amber-600 text-amber-700 bg-amber-50" },
+    suppressed: { label: "Suppressed", className: "border-amber-600 text-amber-700 bg-amber-50" },
+    unsubscribed: { label: "Unsubscribed", className: "border-ink/30 text-ink/70 bg-ink/5" },
+    rate_limited: {
+      label: "Rate limited",
+      className: "border-amber-600 text-amber-700 bg-amber-50",
+    },
+  };
+  return (
+    map[s] ?? {
+      label: status ?? "Unknown",
+      className: "border-ink/30 text-ink/60 bg-white",
+    }
+  );
+}

package/src/backoffice/forms/ActivityLog.tsx

@@ -0,0 +1,153 @@
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+/** Shape of one audit row the host site returns for form activity. */
+export type FormActivityRow = {
+  id: string;
+  action: string;
+  actor_email: string | null;
+  actor_id: string | null;
+  entity_id: string | null;
+  meta: Record<string, unknown> | null;
+  created_at: string;
+};
+import type { FormAuditChange } from "../../forms/form-audit";
+import { formatAbsoluteTime, formatRelativeTime } from "../../admin/format-log";
+
+const ACTION_LABELS: Record<string, string> = {
+  "form.create": "Created form",
+  "form.update": "Updated form",
+  "form.duplicate": "Duplicated form",
+  "form.soft_delete": "Moved form to bin",
+  "form.restore": "Restored form",
+  "form.purge": "Permanently deleted form",
+  "form.defaults.update": "Updated shared form defaults",
+};
+
+function label(action: string) {
+  return ACTION_LABELS[action] ?? action.replace(/[._]/g, " ");
+}
+
+/** Who changed what and when, for one form or for the whole Forms module. */
+export function ActivityLog({
+  formKey,
+  fetchActivity,
+}: {
+  formKey?: string;
+  /** Host-provided reader for form audit rows. */
+  fetchActivity: (input: {
+    data: { formKey?: string; limit: number };
+  }) => Promise<FormActivityRow[]>;
+}) {
+  const q = useQuery({
+    queryKey: ["form-activity", formKey ?? "all"],
+    queryFn: () => fetchActivity({ data: { ...(formKey ? { formKey } : {}), limit: 200 } }),
+  });
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState<string | null>(null);
+
+  const rows = (q.data ?? []) as FormActivityRow[];
+  const filtered = useMemo(() => {
+    const s = search.trim().toLowerCase();
+    if (!s) return rows;
+    return rows.filter((r) =>
+      [r.actor_email, label(r.action), JSON.stringify(r.meta ?? {})]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase()
+        .includes(s),
+    );
+  }, [rows, search]);
+
+  return (
+    <div className="border border-ink/10 bg-white">
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-ink/10 p-4">
+        <div>
+          <h3 className="font-serif text-base">Activity log</h3>
+          <p className="text-xs text-ink/60">
+            Every change to this form and its fields — who, what and when.
+          </p>
+        </div>
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search user, field, change…"
+          className="w-64 border border-ink/15 px-3 py-2 text-sm focus:border-sea focus:outline-none"
+        />
+      </div>
+
+      {q.isLoading ? (
+        <p className="p-6 text-sm text-ink/50">Loading activity…</p>
+      ) : filtered.length === 0 ? (
+        <p className="p-6 text-sm text-ink/50">
+          {rows.length === 0 ? "No changes recorded yet." : "No entries match your search."}
+        </p>
+      ) : (
+        <ul className="divide-y divide-ink/10">
+          {filtered.map((r) => {
+            const meta = (r.meta ?? {}) as {
+              summary?: string;
+              name?: string;
+              key?: string;
+              changes?: FormAuditChange[];
+            };
+            const changes = Array.isArray(meta.changes) ? meta.changes : [];
+            const isOpen = open === r.id;
+            return (
+              <li key={r.id}>
+                <button
+                  type="button"
+                  onClick={() => setOpen(isOpen ? null : r.id)}
+                  className="flex w-full items-start gap-4 p-4 text-left hover:bg-ink/[0.02]"
+                >
+                  <div className="w-40 shrink-0">
+                    <div className="text-sm text-ink">{formatRelativeTime(r.created_at)}</div>
+                    <div className="text-[0.65rem] text-ink/50">
+                      {formatAbsoluteTime(r.created_at)}
+                    </div>
+                  </div>
+                  <div className="w-56 shrink-0 text-sm text-ink/80 break-all">
+                    {r.actor_email ?? "System"}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm text-ink">{label(r.action)}</div>
+                    <div className="mt-1 text-xs text-ink/60 line-clamp-2">
+                      {meta.summary ??
+                        (changes.length ? `${changes.length} change(s)` : (meta.name ?? ""))}
+                    </div>
+                  </div>
+                  <span className="pt-1 text-xs text-ink/40">{isOpen ? "▾" : "▸"}</span>
+                </button>
+                {isOpen ? (
+                  <div className="border-t border-ink/10 bg-ink/[0.02] p-4">
+                    {changes.length === 0 ? (
+                      <p className="text-xs text-ink/60">No field-level detail recorded.</p>
+                    ) : (
+                      <table className="w-full text-xs">
+                        <thead className="text-[0.6rem] uppercase tracking-[0.2em] text-ink/50">
+                          <tr>
+                            <th className="p-2 text-left">What</th>
+                            <th className="p-2 text-left">Before</th>
+                            <th className="p-2 text-left">After</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {changes.map((c, i) => (
+                            <tr key={i} className="border-t border-ink/10 align-top">
+                              <td className="p-2 text-ink/80">{c.label}</td>
+                              <td className="p-2 text-ink/60 break-all">{c.from ?? "—"}</td>
+                              <td className="p-2 text-ink break-all">{c.to ?? "—"}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    )}
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}

package/src/backoffice/forms/ConditionBuilder.tsx

@@ -0,0 +1,170 @@
+import { useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { CONDITION_OPERATORS, isUnaryOperator } from "../../forms/conditions";
+import type { ConditionRule, FieldCondition, FormFieldDef } from "../../forms/field-sets";
+
+/**
+ * Editor for one show/require rule: "all|any of these conditions match".
+ * Conditions can only reference other fields, never the field itself.
+ */
+export function ConditionBuilder({
+  title,
+  description,
+  rule,
+  fields,
+  selfKey,
+  onChange,
+}: {
+  title: string;
+  description: string;
+  rule: ConditionRule | undefined;
+  fields: FormFieldDef[];
+  selfKey?: string;
+  onChange: (rule: ConditionRule | undefined) => void;
+}) {
+  const conditions = rule?.conditions ?? [];
+  const mode = rule?.mode ?? "all";
+  const candidates = fields.filter((f) => f.key !== selfKey);
+
+  const set = (next: FieldCondition[], nextMode: "all" | "any" = mode) =>
+    onChange(next.length ? { mode: nextMode, conditions: next } : undefined);
+
+  const patch = (i: number, p: Partial<FieldCondition>) =>
+    set(conditions.map((c, idx) => (idx === i ? { ...c, ...p } : c)));
+
+  const optionsFor = (key: string) => fields.find((f) => f.key === key)?.options ?? [];
+
+  return (
+    <div className="space-y-2 border border-ink/10 bg-white p-3">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <div className="text-[0.65rem] uppercase tracking-[0.2em] text-ink/55">{title}</div>
+          <p className="mt-0.5 text-xs text-ink/45">{description}</p>
+        </div>
+        {conditions.length > 1 ? (
+          <select
+            value={mode}
+            onChange={(e) => set(conditions, e.target.value as "all" | "any")}
+            className="border border-ink/15 px-2 py-1 text-xs"
+          >
+            <option value="all">Match all</option>
+            <option value="any">Match any</option>
+          </select>
+        ) : null}
+      </div>
+
+      {conditions.length === 0 ? (
+        <p className="text-xs text-ink/40">No conditions — always applies.</p>
+      ) : null}
+
+      {conditions.map((c, i) => {
+        const opts = optionsFor(c.field);
+        return (
+          <div key={i} className="flex flex-wrap items-center gap-2">
+            <select
+              value={c.field}
+              onChange={(e) => patch(i, { field: e.target.value })}
+              className="min-w-[130px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+            >
+              <option value="">Choose a field…</option>
+              {candidates.map((f) => (
+                <option key={f.key} value={f.key}>
+                  {f.label.sv || f.label.en || f.key}
+                </option>
+              ))}
+            </select>
+            <select
+              value={c.op}
+              onChange={(e) => patch(i, { op: e.target.value as FieldCondition["op"] })}
+              className="min-w-[120px] border border-ink/15 px-2 py-1 text-xs"
+            >
+              {CONDITION_OPERATORS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+            {isUnaryOperator(c.op) ? null : opts.length ? (
+              <select
+                value={c.value ?? ""}
+                onChange={(e) => patch(i, { value: e.target.value })}
+                className="min-w-[120px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+              >
+                <option value="">—</option>
+                {opts.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label?.sv || o.label?.en || o.value}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                value={c.value ?? ""}
+                onChange={(e) => patch(i, { value: e.target.value })}
+                placeholder="value"
+                className="min-w-[120px] flex-1 border border-ink/15 px-2 py-1 text-xs"
+              />
+            )}
+            <button
+              type="button"
+              onClick={() => set(conditions.filter((_, idx) => idx !== i))}
+              className="text-ink/35 hover:text-red-500"
+              title="Remove condition"
+            >
+              <Trash2 className="size-3.5" />
+            </button>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        disabled={candidates.length === 0}
+        onClick={() =>
+          set([...conditions, { field: candidates[0]?.key ?? "", op: "equals", value: "" }])
+        }
+        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 disabled:opacity-40"
+      >
+        <Plus className="size-3.5" />
+        Add condition
+      </button>
+    </div>
+  );
+}
+
+/** Compact summary chip used in collapsed field rows. */
+export function RuleSummary({
+  rule,
+  fields,
+  prefix,
+}: {
+  rule: ConditionRule | undefined;
+  fields: FormFieldDef[];
+  prefix: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const list = rule?.conditions ?? [];
+  if (list.length === 0) return null;
+  const nameOf = (key: string) => {
+    const f = fields.find((x) => x.key === key);
+    return f?.label.sv || f?.label.en || key;
+  };
+  const opLabel = (op: FieldCondition["op"]) =>
+    CONDITION_OPERATORS.find((o) => o.value === op)?.label ?? op;
+  const text = list
+    .map(
+      (c) =>
+        `${nameOf(c.field)} ${opLabel(c.op)}${isUnaryOperator(c.op) ? "" : ` “${c.value ?? ""}”`}`,
+    )
+    .join(rule?.mode === "any" ? " or " : " and ");
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen((v) => !v)}
+      title={text}
+      className="max-w-full truncate bg-sea/15 px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.14em] text-ink/70"
+    >
+      {prefix}: {open ? text : `${list.length} condition${list.length === 1 ? "" : "s"}`}
+    </button>
+  );
+}

package/src/backoffice/forms/RuleSimulator.tsx

@@ -0,0 +1,163 @@
+import { useMemo, useState } from "react";
+import { Eye, EyeOff, RotateCcw } from "lucide-react";
+import { tripFieldOptions, type TripSource, type FormFieldDef } from "../../forms/field-sets";
+import {
+  fieldLabel,
+  hasRule,
+  isFieldRequired,
+  isFieldVisible,
+  normalizeCheckbox,
+  validateField,
+} from "../../forms/conditions";
+
+/**
+ * Rule simulation: type example answers and immediately see which fields
+ * show, which become required and which validation messages a visitor
+ * would get — all before publishing.
+ */
+export function RuleSimulator({
+  fields,
+  locale = "sv",
+  trips,
+}: {
+  fields: FormFieldDef[];
+  locale?: string;
+  /** Trip/course rows used to expand trip fields into selectable options. */
+  trips?: TripSource[];
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  const tripItems = trips;
+  const resolved = useMemo(() => {
+    const trips = (tripItems ?? []) as TripSource[];
+    return fields.map((f) =>
+      f.type === "trip" || f.type === "course"
+        ? {
+            ...f,
+            type: "select" as const,
+            options: tripFieldOptions(trips, f.tripYear ?? f.courseYear),
+          }
+        : f,
+    );
+  }, [fields, tripItems]);
+  const enabled = useMemo(() => resolved.filter((f) => f.enabled), [resolved]);
+
+  const rows = enabled.map((f) => {
+    const visible = isFieldVisible(f, values);
+    return {
+      field: f,
+      visible,
+      required: isFieldRequired(f, values),
+      error: visible ? validateField(f, values, locale) : null,
+      conditional: hasRule(f.showWhen) || hasRule(f.requireWhen),
+    };
+  });
+
+  const errors = rows.filter((r) => r.error).length;
+  const hidden = rows.filter((r) => !r.visible).length;
+
+  const set = (key: string, v: string) => setValues((p) => ({ ...p, [key]: v }));
+
+  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">Rule simulation</h3>
+          <p className="mt-1 text-xs text-ink/45">
+            Example answers only — nothing is saved or sent.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => setValues({})}
+          className="inline-flex items-center gap-2 border border-ink/15 px-3 py-1.5 text-[0.65rem] uppercase tracking-[0.2em] hover:border-sea"
+        >
+          <RotateCcw className="size-3.5" />
+          Reset
+        </button>
+      </div>
+
+      <div className="flex flex-wrap gap-3 text-[0.65rem] uppercase tracking-[0.18em] text-ink/55">
+        <span>{rows.length - hidden} visible</span>
+        <span>{hidden} hidden</span>
+        <span>{rows.filter((r) => r.required).length} required</span>
+        <span className={errors ? "text-red-500" : ""}>{errors} error(s)</span>
+      </div>
+
+      {enabled.length === 0 ? (
+        <p className="text-xs text-ink/45">No active fields to simulate.</p>
+      ) : null}
+
+      <div className="space-y-2">
+        {rows.map(({ field: f, visible, required, error, conditional }) => (
+          <div
+            key={f.key}
+            className={`grid gap-2 border p-3 sm:grid-cols-[1fr_1fr] ${
+              visible ? "border-ink/10" : "border-dashed border-ink/15 bg-ink/[0.02]"
+            }`}
+          >
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-xs text-ink">
+                {visible ? (
+                  <Eye className="size-3.5 text-sea" />
+                ) : (
+                  <EyeOff className="size-3.5 text-ink/35" />
+                )}
+                <span className="truncate">{fieldLabel(f, locale)}</span>
+                {required ? (
+                  <span className="text-[0.6rem] uppercase tracking-[0.16em] text-sea">
+                    required
+                  </span>
+                ) : null}
+                {conditional ? (
+                  <span className="text-[0.6rem] uppercase tracking-[0.16em] text-ink/35">
+                    conditional
+                  </span>
+                ) : null}
+              </div>
+              <div className="mt-0.5 text-[0.6rem] uppercase tracking-[0.16em] text-ink/35">
+                {f.key} · {f.type}
+              </div>
+              {error ? <p className="mt-1 text-xs text-red-500">{error}</p> : null}
+            </div>
+
+            <div>
+              {f.type === "checkbox" ? (
+                <label className="flex items-center gap-2 text-xs text-ink/70">
+                  <input
+                    type="checkbox"
+                    checked={normalizeCheckbox(values[f.key] ?? "") === "true"}
+                    onChange={(e) => set(f.key, e.target.checked ? "true" : "false")}
+                    className="size-4 accent-sea"
+                  />
+                  Checked
+                </label>
+              ) : f.type === "select" ? (
+                <select
+                  value={values[f.key] ?? ""}
+                  onChange={(e) => set(f.key, e.target.value)}
+                  className="w-full border border-ink/15 px-2 py-1 text-xs"
+                >
+                  <option value="">—</option>
+                  {(f.options ?? []).map((o) => (
+                    <option key={o.value} value={o.value}>
+                      {o.label?.sv || o.label?.en || o.value}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  type={f.type === "textarea" ? "text" : f.type}
+                  value={values[f.key] ?? ""}
+                  onChange={(e) => set(f.key, e.target.value)}
+                  placeholder="Example answer"
+                  className="w-full border border-ink/15 px-2 py-1 text-xs"
+                  disabled={!visible}
+                />
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/backoffice/forms/SmartTags.tsx

@@ -0,0 +1,181 @@
+import { useMemo, useRef, useState } from "react";
+import { Tag } from "lucide-react";
+import { LocalizedField, TextField } from "../inspectors/fields";
+import { fieldLabel } from "../../forms/conditions";
+import type { FormFieldDef } from "../../forms/field-sets";
+import type { LocalizedString } from "../../i18n";
+import { SUPPORTED_LOCALES, LOCALE_LABELS, type Locale } from "../../i18n";
+
+export type SmartTag = { tag: string; label: string };
+
+/** System tags available in every notification and autoreply template. */
+const SYSTEM_TAGS: SmartTag[] = [
+  { tag: "all_fields", label: "All submitted answers (table)" },
+  { tag: "form_name", label: "Form name" },
+  { tag: "form_key", label: "Form key" },
+  { tag: "submission_id", label: "Submission ID" },
+  { tag: "date", label: "Date and time" },
+  { tag: "locale", label: "Language" },
+  { tag: "page", label: "Page path" },
+  { tag: "page_url", label: "Page URL" },
+  { tag: "admin_url", label: "Link to the submission in the backoffice" },
+  { tag: "ip", label: "Visitor IP address" },
+  { tag: "user_agent", label: "Browser / user agent" },
+  { tag: "referrer", label: "Referring URL" },
+];
+
+/** Field answer tags for the given form, followed by the system tags. */
+export function smartTagGroups(fields: FormFieldDef[]): { title: string; tags: SmartTag[] }[] {
+  const answers = fields
+    .filter((f) => f.enabled)
+    .map((f) => ({ tag: f.key, label: fieldLabel(f, "sv") || f.key }));
+  return [
+    ...(answers.length ? [{ title: "Field answers", tags: answers }] : []),
+    { title: "Submission info", tags: SYSTEM_TAGS },
+  ];
+}
+
+/** Dropdown that inserts a {{smart_tag}} into the field it belongs to. */
+export function SmartTags({
+  fields,
+  onInsert,
+  right,
+}: {
+  fields: FormFieldDef[];
+  onInsert: (token: string) => void;
+  right?: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const groups = useMemo(() => smartTagGroups(fields), [fields]);
+  const wrap = useRef<HTMLDivElement>(null);
+
+  return (
+    <div ref={wrap} className="relative flex items-center gap-2">
+      {right}
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex items-center gap-1.5 border border-ink/15 px-2 py-1 text-[0.6rem] uppercase tracking-[0.18em] text-ink/60 hover:border-sea hover:text-ink"
+      >
+        <Tag className="size-3" />
+        Smart tags
+      </button>
+      {open ? (
+        <>
+          <button
+            type="button"
+            aria-label="Close smart tags"
+            className="fixed inset-0 z-40 cursor-default"
+            onClick={() => setOpen(false)}
+          />
+          <div className="absolute right-0 top-full z-50 mt-1 max-h-72 w-72 overflow-auto border border-ink/15 bg-white p-2 shadow-lg">
+            {groups.map((g) => (
+              <div key={g.title} className="mb-2 last:mb-0">
+                <div className="px-1 py-1 text-[0.6rem] uppercase tracking-[0.18em] text-ink/40">
+                  {g.title}
+                </div>
+                {g.tags.map((t) => (
+                  <button
+                    key={t.tag}
+                    type="button"
+                    onClick={() => {
+                      onInsert(`{{${t.tag}}}`);
+                      setOpen(false);
+                    }}
+                    className="flex w-full items-baseline justify-between gap-2 px-1 py-1 text-left text-xs hover:bg-ice/60"
+                  >
+                    <span className="text-ink/80">{t.label}</span>
+                    <span className="shrink-0 font-mono text-[0.65rem] text-ink/45">
+                      {`{{${t.tag}}}`}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+/** Plain text field (sender name, reply-to…) with a smart tag picker. */
+export function SmartTagTextField({
+  label,
+  value,
+  onChange,
+  fields,
+  placeholder,
+}: {
+  label: string;
+  value: string | undefined;
+  onChange: (v: string) => void;
+  fields: FormFieldDef[];
+  placeholder?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-end justify-between gap-2">
+        <div className="flex-1">
+          <TextField label={label} value={value} onChange={onChange} placeholder={placeholder} />
+        </div>
+      </div>
+      <div className="flex justify-end">
+        <SmartTags
+          fields={fields}
+          onInsert={(token) => onChange(`${(value ?? "").trim()} ${token}`.trim())}
+        />
+      </div>
+    </div>
+  );
+}
+
+/** Localized subject/body field with a smart tag picker per language. */
+export function SmartTagLocalizedField({
+  label,
+  value,
+  onChange,
+  fields,
+  multiline,
+}: {
+  label: string;
+  value: Partial<LocalizedString> | undefined;
+  onChange: (next: Partial<LocalizedString>) => void;
+  fields: FormFieldDef[];
+  multiline?: boolean;
+}) {
+  const [target, setTarget] = useState<Locale>(SUPPORTED_LOCALES[0] as Locale);
+  const v = (value ?? {}) as Record<string, string>;
+
+  return (
+    <div className="space-y-1">
+      <LocalizedField label={label} value={value} onChange={onChange} multiline={multiline} />
+      <div className="flex justify-end">
+        <SmartTags
+          fields={fields}
+          right={
+            SUPPORTED_LOCALES.length > 1 ? (
+              <select
+                value={target}
+                onChange={(e) => setTarget(e.target.value as Locale)}
+                className="border border-ink/15 bg-white px-1 py-1 text-[0.6rem] uppercase tracking-[0.18em] text-ink/60"
+              >
+                {SUPPORTED_LOCALES.map((loc) => (
+                  <option key={loc} value={loc}>
+                    {LOCALE_LABELS[loc] ?? loc}
+                  </option>
+                ))}
+              </select>
+            ) : null
+          }
+          onInsert={(token) =>
+            onChange({
+              ...v,
+              [target]: `${v[target] ?? ""}${(v[target] ?? "").endsWith(" ") || !v[target] ? "" : " "}${token}`,
+            } as Partial<LocalizedString>)
+          }
+        />
+      </div>
+    </div>
+  );
+}