@bygghammar/cms-platform 0.80.1 → 0.90.0-m7.10

package/src/backoffice/TrackingView.tsx

@@ -2,6 +2,13 @@ import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Plus, Save, Trash2, Copy } from "lucide-react";
 
+import {
+  markSaved,
+  mergeServerProfiles,
+  newRow,
+  type DraftRow,
+} from "./tracking-drafts";
+
 export type InjectionScope = "global" | "locale" | "domain";
 
 /** One injection profile row, structurally matching the host's own type. */
@@ -27,7 +34,17 @@ export type TrackingDeps = {
   profiles: InjectionProfileLike[];
   domains: { domain: string }[];
   locales: readonly string[];
-  saveInjection: (input: { data: Omit<InjectionProfileLike, "id"> & { id?: string } }) => Promise<unknown>;
+  /**
+   * Persist one profile and return the row's server id.
+   *
+   * The id is the contract, not a convenience: a profile created here has none
+   * until the server assigns one, and a save that comes back without it leaves
+   * the row unable to say which profile it is. Saving again would then insert a
+   * second copy rather than update the first.
+   */
+  saveInjection: (
+    input: { data: Omit<InjectionProfileLike, "id"> & { id?: string } },
+  ) => Promise<{ id: string }>;
   deleteInjection: (input: { data: { id: string } }) => Promise<unknown>;
   refresh: () => Promise<unknown> | void;
 };
@@ -103,20 +120,26 @@ function Code({
 export function TrackingView({ deps }: { deps: TrackingDeps }) {
   const { profiles, domains, locales, saveInjection: save, deleteInjection: remove, refresh } = deps;
 
-  const [drafts, setDrafts] = useState<InjectionProfileLike[]>([]);
+  const [rows, setRows] = useState<DraftRow<InjectionProfileLike>[]>([]);
   const [busy, setBusy] = useState<string | null>(null);
 
+  // Fold the server list into the rows being edited rather than replacing
+  // them. Replacing is what discarded unsaved work every time an unrelated
+  // save, refetch or parent render produced a new list.
   useEffect(() => {
-    setDrafts(profiles);
+    setRows((current) => mergeServerProfiles(current, profiles));
   }, [profiles]);
 
   const patch = (i: number, next: Partial<InjectionProfileLike>) =>
-    setDrafts((d) => d.map((p, idx) => (idx === i ? { ...p, ...next } : p)));
+    setRows((d) =>
+      d.map((row, idx) => (idx === i ? { ...row, value: { ...row.value, ...next } } : row)),
+    );
 
-  const onSave = async (p: InjectionProfileLike) => {
-    setBusy(p.id || p.name);
+  const onSave = async (row: DraftRow<InjectionProfileLike>) => {
+    const p = row.value;
+    setBusy(row.key);
     try {
-      await save({
+      const result = await save({
         data: {
           id: p.id || undefined,
           name: p.name,
@@ -134,6 +157,17 @@ export function TrackingView({ deps }: { deps: TrackingDeps }) {
           sort_order: p.sort_order,
         },
       });
+      // Adopt the id a newly created profile was just given, so the reload
+      // recognises this row instead of listing the same profile twice.
+      const savedId = result?.id;
+      if (!p.id && !savedId) {
+        // Without an id this row cannot be updated, only inserted again. It
+        // stays dirty and unsaved so the next attempt is a retry rather than a
+        // duplicate profile nobody asked for.
+        toast.error("Saved without an id — reload and try again");
+        return;
+      }
+      setRows((d) => markSaved(d, row.key, p, savedId));
       toast.success("Saved — live within 30 seconds");
       void refresh();
     } catch (e) {
@@ -143,14 +177,16 @@ export function TrackingView({ deps }: { deps: TrackingDeps }) {
     }
   };
 
-  const onDelete = async (p: InjectionProfileLike, i: number) => {
+  const onDelete = async (row: DraftRow<InjectionProfileLike>) => {
+    const p = row.value;
     if (!p.id) {
-      setDrafts((d) => d.filter((_, idx) => idx !== i));
+      setRows((d) => d.filter((x) => x.key !== row.key));
       return;
     }
     if (!confirm(`Delete "${p.name}"?`)) return;
     try {
       await remove({ data: { id: p.id } });
+      setRows((d) => d.filter((x) => x.key !== row.key));
       toast.success("Deleted");
       void refresh();
     } catch (e) {
@@ -169,233 +205,236 @@ export function TrackingView({ deps }: { deps: TrackingDeps }) {
       </p>
 
       <div className="mt-8 space-y-8">
-        {drafts.map((p, i) => (
-          <section key={p.id || `new-${i}`} className="border border-ink/10 bg-white">
-            <header className="flex flex-wrap items-center justify-between gap-3 border-b border-ink/10 px-5 py-4">
-              <div className="flex min-w-0 flex-wrap items-center gap-3">
-                <input
-                  value={p.name}
-                  onChange={(e) => patch(i, { name: e.target.value })}
-                  className="border border-transparent px-1 py-1 font-serif text-lg text-ink hover:border-ink/15 focus:border-sea focus:outline-none"
-                />
-                <label className="inline-flex items-center gap-2 text-sm text-ink">
+        {rows.map((row, i) => {
+          const p = row.value;
+          return (
+            <section key={row.key} className="border border-ink/10 bg-white">
+              <header className="flex flex-wrap items-center justify-between gap-3 border-b border-ink/10 px-5 py-4">
+                <div className="flex min-w-0 flex-wrap items-center gap-3">
                   <input
-                    type="checkbox"
-                    checked={p.enabled}
-                    onChange={(e) => patch(i, { enabled: e.target.checked })}
+                    value={p.name}
+                    onChange={(e) => patch(i, { name: e.target.value })}
+                    className="border border-transparent px-1 py-1 font-serif text-lg text-ink hover:border-ink/15 focus:border-sea focus:outline-none"
                   />
-                  Enabled
-                </label>
-              </div>
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() =>
-                    setDrafts((d) => [
-                      ...d,
-                      { ...p, id: "", name: `${p.name} (copy)`, enabled: false },
-                    ])
-                  }
-                  className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
-                >
-                  <Copy className="size-3.5" /> Duplicate
-                </button>
-                <button
-                  onClick={() => onDelete(p, i)}
-                  className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-red-600 hover:border-red-400"
-                >
-                  <Trash2 className="size-3.5" /> Delete
-                </button>
-                <button
-                  onClick={() => onSave(p)}
-                  disabled={busy !== null}
-                  className="inline-flex items-center gap-2 bg-ink px-4 py-1.5 text-sm text-white disabled:opacity-40"
-                >
-                  <Save className="size-3.5" /> Save
-                </button>
-              </div>
-            </header>
-
-            <div className="grid gap-6 p-5 lg:grid-cols-2">
-              <div className="space-y-4">
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <label className="block">
-                    <Label>Applies to</Label>
-                    <select
-                      value={p.scope_type}
-                      onChange={(e) =>
-                        patch(i, {
-                          scope_type: e.target.value as InjectionScope,
-                          scope_value: "",
-                        })
-                      }
-                      className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
-                    >
-                      <option value="global">All sites</option>
-                      <option value="locale">One language</option>
-                      <option value="domain">One domain</option>
-                    </select>
+                  <label className="inline-flex items-center gap-2 text-sm text-ink">
+                    <input
+                      type="checkbox"
+                      checked={p.enabled}
+                      onChange={(e) => patch(i, { enabled: e.target.checked })}
+                    />
+                    Enabled
                   </label>
-                  {p.scope_type === "locale" ? (
+                </div>
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() =>
+                      setRows((d) => [
+                        ...d,
+                        newRow({ ...p, id: "", name: `${p.name} (copy)`, enabled: false }),
+                      ])
+                    }
+                    className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+                  >
+                    <Copy className="size-3.5" /> Duplicate
+                  </button>
+                  <button
+                    onClick={() => onDelete(row)}
+                    className="inline-flex items-center gap-1 border border-ink/20 px-3 py-1.5 text-sm text-red-600 hover:border-red-400"
+                  >
+                    <Trash2 className="size-3.5" /> Delete
+                  </button>
+                  <button
+                    onClick={() => onSave(row)}
+                    disabled={busy !== null}
+                    className="inline-flex items-center gap-2 bg-ink px-4 py-1.5 text-sm text-white disabled:opacity-40"
+                  >
+                    <Save className="size-3.5" /> Save
+                  </button>
+                </div>
+              </header>
+
+              <div className="grid gap-6 p-5 lg:grid-cols-2">
+                <div className="space-y-4">
+                  <div className="grid gap-3 sm:grid-cols-2">
                     <label className="block">
-                      <Label>Language</Label>
+                      <Label>Applies to</Label>
                       <select
-                        value={p.scope_value}
-                        onChange={(e) => patch(i, { scope_value: e.target.value })}
+                        value={p.scope_type}
+                        onChange={(e) =>
+                          patch(i, {
+                            scope_type: e.target.value as InjectionScope,
+                            scope_value: "",
+                          })
+                        }
                         className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
                       >
-                        <option value="">Select…</option>
-                        {locales.map((l) => (
-                          <option key={l} value={l}>
-                            {l.toUpperCase()}
-                          </option>
-                        ))}
+                        <option value="global">All sites</option>
+                        <option value="locale">One language</option>
+                        <option value="domain">One domain</option>
                       </select>
                     </label>
-                  ) : null}
-                  {p.scope_type === "domain" ? (
+                    {p.scope_type === "locale" ? (
+                      <label className="block">
+                        <Label>Language</Label>
+                        <select
+                          value={p.scope_value}
+                          onChange={(e) => patch(i, { scope_value: e.target.value })}
+                          className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                        >
+                          <option value="">Select…</option>
+                          {locales.map((l) => (
+                            <option key={l} value={l}>
+                              {l.toUpperCase()}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                    ) : null}
+                    {p.scope_type === "domain" ? (
+                      <label className="block">
+                        <Label>Domain</Label>
+                        <input
+                          value={p.scope_value}
+                          onChange={(e) => patch(i, { scope_value: e.target.value })}
+                          list={`domains-${i}`}
+                          placeholder="dev.voyara.se"
+                          className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                        />
+                        <datalist id={`domains-${i}`}>
+                          {domains.map((d) => (
+                            <option key={d.domain} value={d.domain} />
+                          ))}
+                        </datalist>
+                      </label>
+                    ) : null}
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <label className="block">
+                      <Label>Google Tag Manager ID</Label>
+                      <Input
+                        value={p.gtm_id}
+                        onChange={(v) => patch(i, { gtm_id: v })}
+                        placeholder="GTM-XXXXXXX"
+                      />
+                    </label>
                     <label className="block">
-                      <Label>Domain</Label>
-                      <input
-                        value={p.scope_value}
-                        onChange={(e) => patch(i, { scope_value: e.target.value })}
-                        list={`domains-${i}`}
-                        placeholder="dev.voyara.se"
-                        className="w-full border border-ink/20 px-3 py-2 text-sm text-ink focus:outline-none focus:border-sea"
+                      <Label>Google Analytics 4 ID</Label>
+                      <Input
+                        value={p.ga4_id}
+                        onChange={(v) => patch(i, { ga4_id: v })}
+                        placeholder="G-XXXXXXXXXX"
+                      />
+                    </label>
+                    <label className="block">
+                      <Label>Meta (Facebook / Instagram) Pixel</Label>
+                      <Input
+                        value={p.meta_pixel_id}
+                        onChange={(v) => patch(i, { meta_pixel_id: v })}
+                        placeholder="1234567890"
+                      />
+                    </label>
+                    <label className="block">
+                      <Label>TikTok Pixel</Label>
+                      <Input
+                        value={p.tiktok_pixel_id}
+                        onChange={(v) => patch(i, { tiktok_pixel_id: v })}
+                        placeholder="CXXXXXXXXXXXXXXXX"
                       />
-                      <datalist id={`domains-${i}`}>
-                        {domains.map((d) => (
-                          <option key={d.domain} value={d.domain} />
-                        ))}
-                      </datalist>
                     </label>
-                  ) : null}
+                  </div>
+
+                  <div>
+                    <Label>Extra meta tags (verification codes)</Label>
+                    <div className="space-y-2">
+                      {p.extra_meta.map((m, mi) => (
+                        <div key={mi} className="flex gap-2">
+                          <input
+                            value={m.name}
+                            onChange={(e) =>
+                              patch(i, {
+                                extra_meta: p.extra_meta.map((x, xi) =>
+                                  xi === mi ? { ...x, name: e.target.value } : x,
+                                ),
+                              })
+                            }
+                            placeholder="google-site-verification"
+                            className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
+                          />
+                          <input
+                            value={m.content}
+                            onChange={(e) =>
+                              patch(i, {
+                                extra_meta: p.extra_meta.map((x, xi) =>
+                                  xi === mi ? { ...x, content: e.target.value } : x,
+                                ),
+                              })
+                            }
+                            placeholder="value"
+                            className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
+                          />
+                          <button
+                            onClick={() =>
+                              patch(i, {
+                                extra_meta: p.extra_meta.filter((_, xi) => xi !== mi),
+                              })
+                            }
+                            className="p-2 text-red-500 hover:text-red-700"
+                          >
+                            <Trash2 className="size-3.5" />
+                          </button>
+                        </div>
+                      ))}
+                      <button
+                        onClick={() =>
+                          patch(i, { extra_meta: [...p.extra_meta, { name: "", content: "" }] })
+                        }
+                        className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
+                      >
+                        <Plus className="size-4" /> Add meta tag
+                      </button>
+                    </div>
+                  </div>
                 </div>
 
-                <div className="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-4">
                   <label className="block">
-                    <Label>Google Tag Manager ID</Label>
-                    <Input
-                      value={p.gtm_id}
-                      onChange={(v) => patch(i, { gtm_id: v })}
-                      placeholder="GTM-XXXXXXX"
+                    <Label>Inside &lt;head&gt;</Label>
+                    <Code
+                      value={p.head_html}
+                      onChange={(v) => patch(i, { head_html: v })}
+                      placeholder="<!-- scripts, meta tags, verification -->"
                     />
                   </label>
                   <label className="block">
-                    <Label>Google Analytics 4 ID</Label>
-                    <Input
-                      value={p.ga4_id}
-                      onChange={(v) => patch(i, { ga4_id: v })}
-                      placeholder="G-XXXXXXXXXX"
+                    <Label>After &lt;body&gt; tag</Label>
+                    <Code
+                      value={p.body_start_html}
+                      onChange={(v) => patch(i, { body_start_html: v })}
+                      placeholder="<!-- noscript pixels, chat widgets -->"
                     />
                   </label>
                   <label className="block">
-                    <Label>Meta (Facebook / Instagram) Pixel</Label>
-                    <Input
-                      value={p.meta_pixel_id}
-                      onChange={(v) => patch(i, { meta_pixel_id: v })}
-                      placeholder="1234567890"
+                    <Label>Before &lt;/body&gt; tag (footer)</Label>
+                    <Code
+                      value={p.body_end_html}
+                      onChange={(v) => patch(i, { body_end_html: v })}
+                      placeholder="<!-- deferred scripts -->"
                     />
                   </label>
-                  <label className="block">
-                    <Label>TikTok Pixel</Label>
-                    <Input
-                      value={p.tiktok_pixel_id}
-                      onChange={(v) => patch(i, { tiktok_pixel_id: v })}
-                      placeholder="CXXXXXXXXXXXXXXXX"
-                    />
-                  </label>
-                </div>
-
-                <div>
-                  <Label>Extra meta tags (verification codes)</Label>
-                  <div className="space-y-2">
-                    {p.extra_meta.map((m, mi) => (
-                      <div key={mi} className="flex gap-2">
-                        <input
-                          value={m.name}
-                          onChange={(e) =>
-                            patch(i, {
-                              extra_meta: p.extra_meta.map((x, xi) =>
-                                xi === mi ? { ...x, name: e.target.value } : x,
-                              ),
-                            })
-                          }
-                          placeholder="google-site-verification"
-                          className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
-                        />
-                        <input
-                          value={m.content}
-                          onChange={(e) =>
-                            patch(i, {
-                              extra_meta: p.extra_meta.map((x, xi) =>
-                                xi === mi ? { ...x, content: e.target.value } : x,
-                              ),
-                            })
-                          }
-                          placeholder="value"
-                          className="w-1/2 border border-ink/20 px-3 py-2 text-sm focus:outline-none focus:border-sea"
-                        />
-                        <button
-                          onClick={() =>
-                            patch(i, {
-                              extra_meta: p.extra_meta.filter((_, xi) => xi !== mi),
-                            })
-                          }
-                          className="p-2 text-red-500 hover:text-red-700"
-                        >
-                          <Trash2 className="size-3.5" />
-                        </button>
-                      </div>
-                    ))}
-                    <button
-                      onClick={() =>
-                        patch(i, { extra_meta: [...p.extra_meta, { name: "", content: "" }] })
-                      }
-                      className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm text-ink hover:border-sea"
-                    >
-                      <Plus className="size-4" /> Add meta tag
-                    </button>
-                  </div>
+                  <p className="text-xs text-ink/50">
+                    Tracking IDs above generate their official snippets automatically — you only need
+                    raw code for anything not covered.
+                  </p>
                 </div>
               </div>
-
-              <div className="space-y-4">
-                <label className="block">
-                  <Label>Inside &lt;head&gt;</Label>
-                  <Code
-                    value={p.head_html}
-                    onChange={(v) => patch(i, { head_html: v })}
-                    placeholder="<!-- scripts, meta tags, verification -->"
-                  />
-                </label>
-                <label className="block">
-                  <Label>After &lt;body&gt; tag</Label>
-                  <Code
-                    value={p.body_start_html}
-                    onChange={(v) => patch(i, { body_start_html: v })}
-                    placeholder="<!-- noscript pixels, chat widgets -->"
-                  />
-                </label>
-                <label className="block">
-                  <Label>Before &lt;/body&gt; tag (footer)</Label>
-                  <Code
-                    value={p.body_end_html}
-                    onChange={(v) => patch(i, { body_end_html: v })}
-                    placeholder="<!-- deferred scripts -->"
-                  />
-                </label>
-                <p className="text-xs text-ink/50">
-                  Tracking IDs above generate their official snippets automatically — you only need
-                  raw code for anything not covered.
-                </p>
-              </div>
-            </div>
-          </section>
-        ))}
+            </section>
+          );
+        })}
       </div>
 
       <button
-        onClick={() => setDrafts((d) => [...d, blankProfile()])}
+        onClick={() => setRows((d) => [...d, newRow(blankProfile())])}
         className="mt-8 inline-flex items-center gap-2 border border-ink/20 px-5 py-2.5 text-sm text-ink hover:border-sea"
       >
         <Plus className="size-4" /> New profile

package/src/backoffice/forms/VersionHistory.tsx

@@ -31,14 +31,16 @@ export type FormVersionRow = {
 
 export function VersionHistory({
   formKey,
+  editSessionId,
   listVersions,
   restoreVersion,
   renderPreview,
 }: {
   formKey: string;
+  editSessionId?: string;
   listVersions: (input: { data: { formKey: string } }) => Promise<FormVersionRow[]>;
   restoreVersion: (input: {
-    data: { versionId: string };
+    data: { versionId: string; editSessionId?: string };
   }) => Promise<{ carriedFields: string[] }>;
   /** Host renders the preview so the platform stays free of site form UI. */
   renderPreview: (version: FormVersionRow) => React.ReactNode;
@@ -60,7 +62,7 @@ export function VersionHistory({
     if (!window.confirm(`Roll this form back to version ${no}? Submissions are untouched.`)) return;
     setBusy(true);
     try {
-      const res = await restore({ data: { versionId: id } });
+      const res = await restore({ data: { versionId: id, editSessionId } });
       await qc.invalidateQueries({ queryKey: ["backoffice-forms"] });
       await qc.invalidateQueries({ queryKey: ["form-versions", formKey] });
       toast.success(

package/src/backoffice/inspectors/blocks.tsx

@@ -60,11 +60,20 @@ import type {
 } from "../../blocks/types";
 import { INTRO_IMAGE_ASPECTS } from "../../blocks/types";
 import { BLOCK_ICON_NAMES, resolveBlockIcon } from "../../blocks/icons";
-import { InspectorSection, LocalizedField, TextField, MediaField, MediaMultiField } from "./fields";
+import {
+  CtaHint,
+  InspectorSection,
+  LocalizedField,
+  TextField,
+  MediaField,
+  MediaMultiField,
+} from "./fields";
 import { RichTextEditor } from "../../host";
+import { useEditLockBlocked } from "../EditLock";
 import { Plus, Trash2, ArrowUp, ArrowDown } from "lucide-react";
 import type { LocalizedString, Locale } from "../../i18n";
 import { SUPPORTED_LOCALES } from "../../i18n";
+import { normalizeRevealMode, type RevealMode } from "../../ui/Reveal";
 
 export type BlockPatchProps = {
   block: BlockInstance;
@@ -684,6 +693,7 @@ function ProseInspector({ block, patch }: BlockPatchProps) {
 function RichTextInspector({ block, patch }: BlockPatchProps) {
   const p = (block.props ?? {}) as RichTextProps;
   const update = (next: RichTextProps) => patch(next as unknown as BlockProps);
+  const blocked = useEditLockBlocked();
   const [loc, setLoc] = useState<Locale>(SUPPORTED_LOCALES[0]);
   const html = ((p.html ?? {}) as Record<string, string>)[loc] ?? "";
 
@@ -735,6 +745,7 @@ function RichTextInspector({ block, patch }: BlockPatchProps) {
         <RichTextEditor
           key={loc}
           value={html}
+          readOnly={blocked}
           onChange={(next) =>
             update({
               ...p,
@@ -771,6 +782,14 @@ function RichTextInspector({ block, patch }: BlockPatchProps) {
           { value: "1", label: "One column" },
           { value: "2", label: "Two columns (desktop)" },
         ], (v) => update({ ...p, columns: Number(v) as 1 | 2 }))}
+        {select("Appearance", normalizeRevealMode(p.reveal), [
+          { value: "immediate", label: "Immediate" },
+          { value: "fade", label: "Fade in" },
+        ] as { value: RevealMode; label: string }[], (v) => update({ ...p, reveal: v }))}
+        <p className="text-[0.7rem] text-ink/50">
+          Fade in reveals the block once, as it scrolls into view. Readers who ask their
+          system for reduced motion always see it immediately.
+        </p>
         <label className="flex items-center gap-2 text-sm text-ink">
           <input
             type="checkbox"
@@ -848,6 +867,7 @@ function HeroFullInspector({ block, patch }: BlockPatchProps) {
           onChange={(v) => update({ ...p, primaryCta: { ...p.primaryCta, href: v } })}
           placeholder="/boka"
         />
+        <CtaHint label={p.primaryCta?.label} href={p.primaryCta?.href} />
         <LocalizedField
           label="Secondary label"
           value={p.secondaryCta?.label}
@@ -858,6 +878,7 @@ function HeroFullInspector({ block, patch }: BlockPatchProps) {
           value={p.secondaryCta?.href}
           onChange={(v) => update({ ...p, secondaryCta: { ...p.secondaryCta, href: v } })}
         />
+        <CtaHint label={p.secondaryCta?.label} href={p.secondaryCta?.href} />
       </InspectorSection>
 
       <InspectorSection title="Background media">

package/src/backoffice/inspectors/fields.tsx

@@ -4,6 +4,7 @@ import { toast } from "sonner";
 import { X, Image as ImageIcon, Upload, Loader2 } from "lucide-react";
 
 import type { LocalizedString } from "../../i18n";
+import { hasAnyText } from "../../blocks/optional-content";
 import { SUPPORTED_LOCALES, LOCALE_LABELS, type Locale } from "../../i18n";
 
 
@@ -17,6 +18,26 @@ import {
 
 type LocValue = Partial<LocalizedString> | undefined;
 
+/**
+ * Explains, next to a pair of call-to-action fields, why a half-filled button
+ * does not appear on the page.
+ *
+ * The renderer requires both a label and a link — half of one is not a button
+ * — and an editor who has typed only a link has no other way to find that out.
+ */
+export function CtaHint({ label, href }: { label: LocValue; href?: string | null }) {
+  const hasLabel = hasAnyText(label);
+  const hasHref = typeof href === "string" && href.trim() !== "";
+  const missing = hasLabel && !hasHref ? "link" : hasHref && !hasLabel ? "label" : null;
+  return (
+    <p className={`text-[0.7rem] ${missing ? "text-amber-700" : "text-ink/50"}`}>
+      {missing
+        ? `Hidden on the page — add a ${missing} to show this button.`
+        : "A button appears only when it has both a label and a link."}
+    </p>
+  );
+}
+
 export function LocalizedField({
   label,
   value,