@bygghammar/cms-platform 0.1.0

package/src/backoffice/inspectors/blocks.tsx

@@ -0,0 +1,2318 @@
+/**
+ * Shared block inspectors (backoffice). Portable across sites: they depend
+ * only on block types, shared field widgets, the i18n core and the host
+ * RichTextEditor. Site-specific inspectors (global sections, forms, courses)
+ * stay in each site's own inspector router.
+ */
+import { useEffect, useMemo, useState } from "react";
+import type {
+  BlockInstance,
+  BlockProps,
+  HeroProps,
+  IntroProps,
+  FaqProps,
+  FaqItem,
+  CtaProps,
+  InstagramProps,
+  InstagramItem,
+  ProseProps,
+  ProseItem,
+  RichTextProps,
+  ChecklistProps,
+  ChecklistColumn,
+  CtaBannerProps,
+  MediaSplitProps,
+  MediaSplitSlide,
+  MediaSplitBullet,
+  IconGridProps,
+  IconGridItem,
+  HeroFullProps,
+  ImageMarqueeProps,
+  ImageMarqueeItem,
+  LinkTilesProps,
+  LinkTilesItem,
+  CabinTabsProps,
+  CabinTabItem,
+  PriceTableProps,
+  PriceGroup,
+  IntroImageAspect,
+} 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 { RichTextEditor } from "../../host";
+import { Plus, Trash2, ArrowUp, ArrowDown } from "lucide-react";
+import type { LocalizedString, Locale } from "../../i18n";
+import { SUPPORTED_LOCALES } from "../../i18n";
+
+export type BlockPatchProps = {
+  block: BlockInstance;
+  patch: (props: BlockProps) => void;
+};
+
+function uid(prefix = "f") {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+/* ---------------- Hero ---------------- */
+function HeroInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as HeroProps;
+  const setCta = (key: "primaryCta" | "secondaryCta", next: CtaProps) =>
+    patch({ ...p, [key]: next } as unknown as BlockProps);
+
+  return (
+    <>
+      <InspectorSection title="Content">
+        <LocalizedField
+          label="Eyebrow"
+          value={p.eyebrow}
+          onChange={(v) => patch({ ...p, eyebrow: v } as unknown as BlockProps)}
+        />
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          multiline
+          onChange={(v) => patch({ ...p, title: v } as unknown as BlockProps)}
+        />
+        <LocalizedField
+          label="Body"
+          value={p.body}
+          multiline
+          onChange={(v) => patch({ ...p, body: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+      <InspectorSection title="Primary CTA">
+        <LocalizedField
+          label="Label"
+          value={p.primaryCta?.label}
+          onChange={(v) => setCta("primaryCta", { ...(p.primaryCta ?? {}), label: v })}
+        />
+        <TextField
+          label="Link"
+          value={p.primaryCta?.href}
+          placeholder="/boka"
+          onChange={(v) => setCta("primaryCta", { ...(p.primaryCta ?? {}), href: v })}
+        />
+      </InspectorSection>
+      <InspectorSection title="Secondary CTA">
+        <LocalizedField
+          label="Label"
+          value={p.secondaryCta?.label}
+          onChange={(v) => setCta("secondaryCta", { ...(p.secondaryCta ?? {}), label: v })}
+        />
+        <TextField
+          label="Link"
+          value={p.secondaryCta?.href}
+          placeholder="/utbildningen"
+          onChange={(v) => setCta("secondaryCta", { ...(p.secondaryCta ?? {}), href: v })}
+        />
+      </InspectorSection>
+      <InspectorSection title="Background media — Desktop">
+        <MediaField
+          label="Video"
+          accept="video"
+          value={p.videoSrc}
+          onChange={(v) => patch({ ...p, videoSrc: v } as unknown as BlockProps)}
+        />
+        <MediaField
+          label="Poster image"
+          accept="image"
+          value={p.posterSrc}
+          onChange={(v) => patch({ ...p, posterSrc: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+      <InspectorSection title="Background media — Tablet (≤1024px)">
+        <p className="text-[0.7rem] text-ink/50">Leave empty to reuse the desktop media.</p>
+        <MediaField
+          label="Video"
+          accept="video"
+          value={p.videoSrcTablet}
+          onChange={(v) => patch({ ...p, videoSrcTablet: v } as unknown as BlockProps)}
+        />
+        <MediaField
+          label="Poster image"
+          accept="image"
+          value={p.posterSrcTablet}
+          onChange={(v) => patch({ ...p, posterSrcTablet: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+      <InspectorSection title="Background media — Mobile (≤640px)">
+        <p className="text-[0.7rem] text-ink/50">Leave empty to reuse tablet, then desktop.</p>
+        <MediaField
+          label="Video"
+          accept="video"
+          value={p.videoSrcMobile}
+          onChange={(v) => patch({ ...p, videoSrcMobile: v } as unknown as BlockProps)}
+        />
+        <MediaField
+          label="Poster image"
+          accept="image"
+          value={p.posterSrcMobile}
+          onChange={(v) => patch({ ...p, posterSrcMobile: v } as unknown as BlockProps)}
+        />
+      </InspectorSection>
+      <p className="text-[0.7rem] text-ink/50">
+        Leaving a field empty falls back to the shared site content.
+      </p>
+    </>
+  );
+}
+
+/* ---------------- Intro ---------------- */
+function IntroInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as IntroProps;
+  return (
+    <InspectorSection title="Content">
+      <LocalizedField
+        label="Eyebrow"
+        value={p.eyebrow}
+        onChange={(v) => patch({ ...p, eyebrow: v } as unknown as BlockProps)}
+      />
+      <LocalizedField
+        label="Title"
+        value={p.title}
+        multiline
+        onChange={(v) => patch({ ...p, title: v } as unknown as BlockProps)}
+      />
+      <LocalizedField
+        label="Body"
+        value={p.body}
+        multiline
+        onChange={(v) => patch({ ...p, body: v } as unknown as BlockProps)}
+      />
+      <MediaField
+        label="Image"
+        accept="image"
+        value={p.imageSrc}
+        onChange={(v) => patch({ ...p, imageSrc: v } as unknown as BlockProps)}
+      />
+      <LocalizedField
+        label="Image alt text"
+        value={p.imageAlt}
+        onChange={(v) => patch({ ...p, imageAlt: v } as unknown as BlockProps)}
+      />
+      <label className="block space-y-1">
+        <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+          Image shape (width / height)
+        </span>
+        <select
+          value={p.imageAspect ?? "4/5"}
+          onChange={(e) =>
+            patch({ ...p, imageAspect: e.target.value as IntroImageAspect } as unknown as BlockProps)
+          }
+          className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+        >
+          {INTRO_IMAGE_ASPECTS.map((o) => (
+            <option key={o} value={o}>
+              {o === "auto" ? "Original ratio" : o}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="block space-y-1">
+        <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+          Image width ({Math.min(100, Math.max(30, p.imageWidth ?? 100))}%)
+        </span>
+        <input
+          type="range"
+          min={30}
+          max={100}
+          step={5}
+          value={Math.min(100, Math.max(30, p.imageWidth ?? 100))}
+          onChange={(e) =>
+            patch({ ...p, imageWidth: Number(e.target.value) } as unknown as BlockProps)
+          }
+          className="w-full accent-sea"
+        />
+      </label>
+      <p className="text-[0.7rem] text-ink/50">
+        Empty fields fall back to shared site content.
+      </p>
+
+    </InspectorSection>
+  );
+}
+
+/* ---------------- FAQ ---------------- */
+function FaqInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? { items: [] }) as FaqProps;
+  const items = p.items ?? [];
+  const update = (next: FaqProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: FaqItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+  const add = () =>
+    update({
+      ...p,
+      items: [
+        ...items,
+        { id: uid("q"), q: { sv: "" } as LocalizedString, a: { sv: "" } as LocalizedString },
+      ],
+    });
+  const remove = (i: number) => {
+    const next = items.slice();
+    next.splice(i, 1);
+    update({ ...p, items: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          onChange={(v) => update({ ...p, title: v as LocalizedString })}
+        />
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+            Columns (desktop)
+          </span>
+          <select
+            value={String(p.columns ?? 1)}
+            onChange={(e) =>
+              update({ ...p, columns: Number(e.target.value) as FaqProps["columns"] })
+            }
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="1">1 column</option>
+            <option value="2">2 columns</option>
+            <option value="3">3 columns</option>
+          </select>
+        </label>
+      </InspectorSection>
+      <InspectorSection title={`Items (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => (
+            <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">
+                  #{i + 1}
+                </span>
+                <div className="flex items-center gap-1">
+                  <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                    <ArrowUp className="size-3.5" />
+                  </button>
+                  <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                    <ArrowDown className="size-3.5" />
+                  </button>
+                  <button onClick={() => remove(i)} className="p-1 text-red-500 hover:text-red-700" title="Delete">
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+              <LocalizedField
+                label="Question"
+                value={item.q}
+                onChange={(v) => setItem(i, { ...item, q: v as LocalizedString })}
+              />
+              <LocalizedField
+                label="Answer"
+                multiline
+                value={item.a}
+                onChange={(v) => setItem(i, { ...item, a: v as LocalizedString })}
+              />
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={add}
+          className="mt-1 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 question
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Instagram ---------------- */
+function InstagramInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? { items: [] }) as InstagramProps;
+  const items = p.items ?? [];
+  const update = (next: InstagramProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: InstagramItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+  const add = () =>
+    update({
+      ...p,
+      items: [...items, { id: uid("ig"), image: "", alt: { sv: "" }, href: "" }],
+    });
+  const remove = (i: number) => {
+    const next = items.slice();
+    next.splice(i, 1);
+    update({ ...p, items: next });
+  };
+
+  const NumberField = ({
+    label,
+    value,
+    min,
+    max,
+    fallback,
+    onChange,
+  }: {
+    label: string;
+    value: number | undefined;
+    min: number;
+    max: number;
+    fallback: number;
+    onChange: (n: number) => void;
+  }) => (
+    <label className="block space-y-1">
+      <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <input
+        type="number"
+        min={min}
+        max={max}
+        value={value ?? fallback}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      />
+    </label>
+  );
+
+  const SelectField = <T extends string>({
+    label,
+    value,
+    options,
+    onChange,
+  }: {
+    label: string;
+    value: T | undefined;
+    options: readonly T[];
+    onChange: (v: T) => void;
+  }) => (
+    <label className="block space-y-1">
+      <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value ?? options[0]}
+        onChange={(e) => onChange(e.target.value as T)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o} value={o}>
+            {o}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+
+  return (
+    <>
+      <InspectorSection title="Header">
+        <LocalizedField
+          label="Title"
+          value={p.title}
+          onChange={(v) => update({ ...p, title: v })}
+        />
+        <TextField
+          label="Instagram handle"
+          value={p.handle}
+          placeholder="yourhandle"
+          onChange={(v) => update({ ...p, handle: v })}
+        />
+        <TextField
+          label="Profile link (optional)"
+          value={p.profileHref}
+          placeholder="https://instagram.com/..."
+          onChange={(v) => update({ ...p, profileHref: v })}
+        />
+        <div className="flex gap-4 pt-1">
+          <label className="flex items-center gap-2 text-sm text-ink/75">
+            <input
+              type="checkbox"
+              checked={p.showHeader ?? true}
+              onChange={(e) => update({ ...p, showHeader: e.target.checked })}
+            />
+            Show header
+          </label>
+          <label className="flex items-center gap-2 text-sm text-ink/75">
+            <input
+              type="checkbox"
+              checked={p.showOverlay ?? true}
+              onChange={(e) => update({ ...p, showOverlay: e.target.checked })}
+            />
+            Hover overlay
+          </label>
+        </div>
+      </InspectorSection>
+
+      <InspectorSection title="Layout">
+        <SelectField
+          label="Layout"
+          value={p.layout}
+          options={["grid", "carousel"] as const}
+          onChange={(v) => update({ ...p, layout: v })}
+        />
+        <div className="grid grid-cols-3 gap-2">
+          <NumberField
+            label="Cols mobile"
+            value={p.columnsMobile}
+            min={1}
+            max={4}
+            fallback={2}
+            onChange={(n) => update({ ...p, columnsMobile: n })}
+          />
+          <NumberField
+            label="Cols tablet"
+            value={p.columnsTablet}
+            min={2}
+            max={6}
+            fallback={3}
+            onChange={(n) => update({ ...p, columnsTablet: n })}
+          />
+          <NumberField
+            label="Cols desktop"
+            value={p.columnsDesktop}
+            min={2}
+            max={8}
+            fallback={4}
+            onChange={(n) => update({ ...p, columnsDesktop: n })}
+          />
+        </div>
+        <NumberField
+          label="Rows (grid only)"
+          value={p.rows}
+          min={1}
+          max={8}
+          fallback={2}
+          onChange={(n) => update({ ...p, rows: n })}
+        />
+        <div className="grid grid-cols-2 gap-2">
+          <SelectField
+            label="Gap"
+            value={p.gap}
+            options={["none", "sm", "md", "lg"] as const}
+            onChange={(v) => update({ ...p, gap: v })}
+          />
+          <SelectField
+            label="Aspect"
+            value={p.aspect}
+            options={["square", "portrait", "landscape"] as const}
+            onChange={(v) => update({ ...p, aspect: v })}
+          />
+        </div>
+        <p className="text-[0.7rem] text-ink/50">
+          Grid shows up to <strong>cols × rows</strong> images. Carousel shows all.
+        </p>
+      </InspectorSection>
+
+      <InspectorSection title={`Images (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => (
+            <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">
+                  #{i + 1}
+                </span>
+                <div className="flex items-center gap-1">
+                  <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                    <ArrowUp className="size-3.5" />
+                  </button>
+                  <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                    <ArrowDown className="size-3.5" />
+                  </button>
+                  <button onClick={() => remove(i)} className="p-1 text-red-500 hover:text-red-700" title="Delete">
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+              <MediaField
+                label="Image"
+                accept="image"
+                value={item.image}
+                onChange={(v) => setItem(i, { ...item, image: v })}
+              />
+              <LocalizedField
+                label="Alt text"
+                value={item.alt}
+                onChange={(v) => setItem(i, { ...item, alt: v })}
+              />
+              <TextField
+                label="Post URL (optional)"
+                value={item.href}
+                placeholder="https://instagram.com/p/..."
+                onChange={(v) => setItem(i, { ...item, href: v })}
+              />
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={add}
+          className="mt-3 inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm hover:border-sea"
+        >
+          <Plus className="size-3.5" /> Add image
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Prose (text section) ---------------- */
+function ProseInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as ProseProps;
+  const items = p.items ?? [];
+  const update = (next: ProseProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: ProseItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Columns</span>
+          <select
+            value={p.layout ?? "single"}
+            onChange={(e) => update({ ...p, layout: e.target.value as ProseProps["layout"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="single">Single column</option>
+            <option value="two-col">Two columns</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Background</span>
+          <select
+            value={p.tone ?? "white"}
+            onChange={(e) => update({ ...p, tone: e.target.value as ProseProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+          </select>
+        </label>
+      </InspectorSection>
+      <InspectorSection title={`Passages (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => (
+            <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                <div className="flex items-center gap-1">
+                  <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                    <ArrowUp className="size-3.5" />
+                  </button>
+                  <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                    <ArrowDown className="size-3.5" />
+                  </button>
+                  <button
+                    onClick={() => {
+                      const next = items.slice();
+                      next.splice(i, 1);
+                      update({ ...p, items: next });
+                    }}
+                    className="p-1 text-red-500 hover:text-red-700"
+                    title="Delete"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+              <LocalizedField label="Heading" value={item.heading} onChange={(v) => setItem(i, { ...item, heading: v })} />
+              <LocalizedField label="Body" multiline value={item.body} onChange={(v) => setItem(i, { ...item, body: v })} />
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={() => update({ ...p, items: [...items, { id: uid("p"), heading: {}, body: {} }] })}
+          className="mt-1 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 passage
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+
+/* ---------------- Rich text (WYSIWYG) ---------------- */
+function RichTextInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as RichTextProps;
+  const update = (next: RichTextProps) => patch(next as unknown as BlockProps);
+  const [loc, setLoc] = useState<Locale>(SUPPORTED_LOCALES[0]);
+  const html = ((p.html ?? {}) as Record<string, string>)[loc] ?? "";
+
+  const select = <T extends string>(
+    label: string,
+    value: T,
+    options: { value: T; label: string }[],
+    onChange: (v: T) => void,
+  ) => (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+
+  return (
+    <>
+      <InspectorSection title="Heading (optional)">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+      </InspectorSection>
+
+      <InspectorSection title="Text">
+        <div className="flex gap-1">
+          {SUPPORTED_LOCALES.map((l) => (
+            <button
+              key={l}
+              type="button"
+              onClick={() => setLoc(l)}
+              className={[
+                "border px-2.5 py-1 text-[0.65rem] uppercase tracking-widest",
+                l === loc ? "border-sea bg-sea/10 text-ink" : "border-ink/15 text-ink/60 hover:text-ink",
+              ].join(" ")}
+            >
+              {l}
+            </button>
+          ))}
+        </div>
+        <RichTextEditor
+          key={loc}
+          value={html}
+          onChange={(next) =>
+            update({
+              ...p,
+              html: { ...((p.html ?? {}) as Record<string, string>), [loc]: next } as RichTextProps["html"],
+            })
+          }
+        />
+      </InspectorSection>
+
+      <InspectorSection title="Layout">
+        {select("Background", p.tone ?? "white", [
+          { value: "white", label: "White" },
+          { value: "paper", label: "Paper" },
+          { value: "ice", label: "Ice" },
+          { value: "ink", label: "Dark" },
+        ] as { value: NonNullable<RichTextProps["tone"]>; label: string }[], (v) => update({ ...p, tone: v }))}
+        {select("Width", p.width ?? "normal", [
+          { value: "narrow", label: "Narrow" },
+          { value: "normal", label: "Normal" },
+          { value: "wide", label: "Wide" },
+          { value: "full", label: "Full width" },
+        ] as { value: NonNullable<RichTextProps["width"]>; label: string }[], (v) => update({ ...p, width: v }))}
+        {select("Alignment", p.align ?? "left", [
+          { value: "left", label: "Left" },
+          { value: "center", label: "Centered" },
+        ] as { value: NonNullable<RichTextProps["align"]>; label: string }[], (v) => update({ ...p, align: v }))}
+        {select("Spacing", p.padding ?? "normal", [
+          { value: "none", label: "None" },
+          { value: "compact", label: "Compact" },
+          { value: "normal", label: "Normal" },
+          { value: "spacious", label: "Spacious" },
+        ] as { value: NonNullable<RichTextProps["padding"]>; label: string }[], (v) => update({ ...p, padding: v }))}
+        {select("Columns", String(p.columns ?? 1), [
+          { value: "1", label: "One column" },
+          { value: "2", label: "Two columns (desktop)" },
+        ], (v) => update({ ...p, columns: Number(v) as 1 | 2 }))}
+        <label className="flex items-center gap-2 text-sm text-ink">
+          <input
+            type="checkbox"
+            checked={Boolean(p.dropCap)}
+            onChange={(e) => update({ ...p, dropCap: e.target.checked })}
+            className="size-4 accent-sea"
+          />
+          Drop cap on the first paragraph
+        </label>
+        <TextField
+          label="Anchor id"
+          value={p.anchor}
+          onChange={(v) => update({ ...p, anchor: v })}
+          placeholder="e.g. villkor"
+        />
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Hero Section Fullscreen ---------------- */
+function HeroFullInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as HeroFullProps;
+  const update = (next: HeroFullProps) => patch(next as unknown as BlockProps);
+  const sel = <K extends keyof HeroFullProps>(
+    label: string,
+    key: K,
+    current: string,
+    options: { value: string; label: string }[],
+  ) => (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={current}
+        onChange={(e) => update({ ...p, [key]: e.target.value } as HeroFullProps)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>{o.label}</option>
+        ))}
+      </select>
+    </label>
+  );
+  const check = (label: string, key: keyof HeroFullProps, fallback = false) => (
+    <label className="flex items-center gap-2 text-sm text-ink">
+      <input
+        type="checkbox"
+        checked={p[key] === undefined ? fallback : Boolean(p[key])}
+        onChange={(e) => update({ ...p, [key]: e.target.checked } as HeroFullProps)}
+        className="size-4 accent-sea"
+      />
+      {label}
+    </label>
+  );
+
+  const mediaType = p.mediaType ?? "image";
+
+  return (
+    <>
+      <InspectorSection title="Text">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" multiline value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Body" multiline value={p.body} onChange={(v) => update({ ...p, body: v })} />
+      </InspectorSection>
+
+      <InspectorSection title="Buttons">
+        <LocalizedField
+          label="Primary label"
+          value={p.primaryCta?.label}
+          onChange={(v) => update({ ...p, primaryCta: { ...p.primaryCta, label: v } })}
+        />
+        <TextField
+          label="Primary link"
+          value={p.primaryCta?.href}
+          onChange={(v) => update({ ...p, primaryCta: { ...p.primaryCta, href: v } })}
+          placeholder="/boka"
+        />
+        <LocalizedField
+          label="Secondary label"
+          value={p.secondaryCta?.label}
+          onChange={(v) => update({ ...p, secondaryCta: { ...p.secondaryCta, label: v } })}
+        />
+        <TextField
+          label="Secondary link"
+          value={p.secondaryCta?.href}
+          onChange={(v) => update({ ...p, secondaryCta: { ...p.secondaryCta, href: v } })}
+        />
+      </InspectorSection>
+
+      <InspectorSection title="Background media">
+        {sel("Media type", "mediaType", mediaType, [
+          { value: "image", label: "Image" },
+          { value: "video", label: "Video" },
+        ])}
+        {mediaType === "image" ? (
+          <>
+            <MediaField
+              label="Image (desktop)"
+              accept="image"
+              value={p.image}
+              onChange={(v) => update({ ...p, image: v })}
+            />
+            <MediaField
+              label="Image (mobile, optional)"
+              accept="image"
+              value={p.imageMobile}
+              onChange={(v) => update({ ...p, imageMobile: v })}
+            />
+            <LocalizedField label="Image alt text" value={p.imageAlt} onChange={(v) => update({ ...p, imageAlt: v })} />
+          </>
+        ) : (
+          <>
+            <MediaField
+              label="Video (desktop)"
+              accept="video"
+              value={p.videoSrc}
+              onChange={(v) => update({ ...p, videoSrc: v })}
+            />
+            <MediaField
+              label="Poster (desktop)"
+              accept="image"
+              value={p.posterSrc}
+              onChange={(v) => update({ ...p, posterSrc: v })}
+            />
+            <MediaField
+              label="Video WebM (desktop, optional)"
+              accept="video"
+              value={p.videoSrcWebm}
+              onChange={(v) => update({ ...p, videoSrcWebm: v })}
+            />
+
+            <MediaField
+              label="Video (mobile, optional)"
+              accept="video"
+              value={p.videoSrcMobile}
+              onChange={(v) => update({ ...p, videoSrcMobile: v })}
+            />
+            <MediaField
+              label="Video WebM (mobile, optional)"
+              accept="video"
+              value={p.videoSrcWebmMobile}
+              onChange={(v) => update({ ...p, videoSrcWebmMobile: v })}
+            />
+
+            <MediaField
+              label="Poster (mobile, optional)"
+              accept="image"
+              value={p.posterSrcMobile}
+              onChange={(v) => update({ ...p, posterSrcMobile: v })}
+            />
+            {check("Autoplay", "videoAutoplay", true)}
+            {check("Loop", "videoLoop", true)}
+            {check("Muted", "videoMuted", true)}
+          </>
+        )}
+      </InspectorSection>
+
+      <InspectorSection title="Layout">
+        {sel("Height", "height", p.height ?? "full", [
+          { value: "full", label: "Fullscreen (100%)" },
+          { value: "tall", label: "Tall (85%)" },
+          { value: "medium", label: "Medium (65%)" },
+          { value: "compact", label: "Compact (50%)" },
+        ])}
+        {sel("Overlay", "overlay", p.overlay ?? "medium", [
+          { value: "none", label: "None" },
+          { value: "light", label: "Light" },
+          { value: "medium", label: "Medium" },
+          { value: "strong", label: "Strong" },
+          { value: "bottom", label: "Gradient from bottom" },
+          { value: "top", label: "Gradient from top" },
+          { value: "side", label: "Gradient from left" },
+        ])}
+        {sel("Horizontal alignment", "textAlign", p.textAlign ?? "left", [
+          { value: "left", label: "Left" },
+          { value: "center", label: "Centered" },
+          { value: "right", label: "Right" },
+        ])}
+        {sel("Vertical alignment", "verticalAlign", p.verticalAlign ?? "center", [
+          { value: "top", label: "Top" },
+          { value: "center", label: "Middle" },
+          { value: "bottom", label: "Bottom" },
+        ])}
+        {sel("Content width", "contentWidth", p.contentWidth ?? "normal", [
+          { value: "narrow", label: "Narrow" },
+          { value: "normal", label: "Normal" },
+          { value: "wide", label: "Wide" },
+          { value: "full", label: "Full width" },
+        ])}
+        {sel("Text colour", "textTone", p.textTone ?? "light", [
+          { value: "light", label: "Light text (dark media)" },
+          { value: "dark", label: "Dark text (light media)" },
+        ])}
+        {sel("Title size", "titleSize", p.titleSize ?? "lg", [
+          { value: "sm", label: "Small" },
+          { value: "md", label: "Medium" },
+          { value: "lg", label: "Large" },
+          { value: "xl", label: "Extra large" },
+        ])}
+        {sel("Title font", "titleFont", p.titleFont ?? "serif", [
+          { value: "serif", label: "Serif" },
+          { value: "sans", label: "Sans" },
+        ])}
+        {check("Uppercase title", "titleUppercase")}
+        {check("Show scroll cue", "showScrollCue", true)}
+        <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Image marquee ---------------- */
+function ImageMarqueeInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as ImageMarqueeProps;
+  const items = p.items ?? [];
+  const texts = p.items2 ?? [];
+  const [addColumn, setAddColumn] = useState("");
+  const columnOptions = Array.from({ length: Math.min(3, Math.max(1, p.columns ?? 2)) }, (_, i) => ({
+    value: String(i + 1),
+    label: `Column ${i + 1}`,
+  }));
+  const update = (next: ImageMarqueeProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: ImageMarqueeItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+  const sel = (
+    label: string,
+    value: string,
+    options: { value: string; label: string }[],
+    onChange: (v: string) => void,
+  ) => (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>{o.label}</option>
+        ))}
+      </select>
+    </label>
+  );
+
+  return (
+    <>
+      <InspectorSection title="Text">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" multiline value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+        <div className="space-y-3">
+          {texts.map((item, i) => (
+            <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">Passage #{i + 1}</span>
+                <button
+                  onClick={() => {
+                    const next = texts.slice();
+                    next.splice(i, 1);
+                    update({ ...p, items2: next });
+                  }}
+                  className="p-1 text-red-500 hover:text-red-700"
+                  title="Delete"
+                >
+                  <Trash2 className="size-3.5" />
+                </button>
+              </div>
+              <LocalizedField
+                label="Heading"
+                value={item.heading}
+                onChange={(v) => {
+                  const next = texts.slice();
+                  next[i] = { ...item, heading: v };
+                  update({ ...p, items2: next });
+                }}
+              />
+              <LocalizedField
+                label="Body"
+                multiline
+                value={item.body}
+                onChange={(v) => {
+                  const next = texts.slice();
+                  next[i] = { ...item, body: v };
+                  update({ ...p, items2: next });
+                }}
+              />
+            </div>
+          ))}
+          <button
+            onClick={() => update({ ...p, items2: [...texts, { id: uid("mtxt") }] })}
+            className="inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-sea"
+          >
+            <Plus className="size-3.5" /> Add passage
+          </button>
+        </div>
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        {sel("Text position", p.textPosition ?? "left", [
+          { value: "left", label: "Text left, images right" },
+          { value: "right", label: "Text right, images left" },
+          { value: "none", label: "Images only (full width)" },
+        ], (v) => update({ ...p, textPosition: v as ImageMarqueeProps["textPosition"] }))}
+        {sel("Columns (desktop)", String(p.columns ?? 2), [
+          { value: "1", label: "1 column" },
+          { value: "2", label: "2 columns" },
+          { value: "3", label: "3 columns" },
+        ], (v) => update({ ...p, columns: Number(v) as ImageMarqueeProps["columns"] }))}
+        {sel("First column direction", p.firstDirection ?? "up", [
+          { value: "up", label: "Up (next column down)" },
+          { value: "down", label: "Down (next column up)" },
+        ], (v) => update({ ...p, firstDirection: v as ImageMarqueeProps["firstDirection"] }))}
+        {sel("Speed", p.speed ?? "normal", [
+          { value: "ultra-slow", label: "Ultra slow" },
+          { value: "very-slow", label: "Very slow" },
+          { value: "slow", label: "Slow" },
+          { value: "normal", label: "Normal" },
+          { value: "fast", label: "Fast" },
+        ], (v) => update({ ...p, speed: v as ImageMarqueeProps["speed"] }))}
+        {sel("Image shape", p.aspect ?? "portrait", [
+          { value: "portrait", label: "Portrait" },
+          { value: "square", label: "Square" },
+          { value: "landscape", label: "Landscape" },
+          { value: "mixed", label: "Mixed" },
+        ], (v) => update({ ...p, aspect: v as ImageMarqueeProps["aspect"] }))}
+        {sel("Gap", p.gap ?? "md", [
+          { value: "sm", label: "Small" },
+          { value: "md", label: "Medium" },
+          { value: "lg", label: "Large" },
+        ], (v) => update({ ...p, gap: v as ImageMarqueeProps["gap"] }))}
+        {sel("Background", p.tone ?? "white", [
+          { value: "white", label: "White" },
+          { value: "paper", label: "Paper" },
+          { value: "ice", label: "Ice" },
+        ], (v) => update({ ...p, tone: v as ImageMarqueeProps["tone"] }))}
+        <label className="flex items-center gap-2 text-sm text-ink">
+          <input
+            type="checkbox"
+            checked={p.rounded ?? false}
+            onChange={(e) => update({ ...p, rounded: e.target.checked })}
+          />
+          Rounded corners
+        </label>
+        <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
+      </InspectorSection>
+      <InspectorSection title={`Images (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => (
+            <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3 min-w-0">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                <div className="flex items-center gap-1">
+                  <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                    <ArrowUp className="size-3.5" />
+                  </button>
+                  <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                    <ArrowDown className="size-3.5" />
+                  </button>
+                  <button
+                    onClick={() => {
+                      const next = items.slice();
+                      next.splice(i, 1);
+                      update({ ...p, items: next });
+                    }}
+                    className="p-1 text-red-500 hover:text-red-700"
+                    title="Delete"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+              <MediaField
+                label="Image"
+                accept="image"
+                value={item.image}
+                onChange={(url) => setItem(i, { ...item, image: url })}
+              />
+              {sel(
+                "Column",
+                String(item.column ?? ""),
+                [
+                  { value: "", label: "All columns (spread)" },
+                  ...columnOptions,
+                ],
+                (v) => setItem(i, { ...item, column: v ? Number(v) : undefined }),
+              )}
+              <LocalizedField label="Alt text" value={item.alt} onChange={(v) => setItem(i, { ...item, alt: v })} />
+            </div>
+          ))}
+        </div>
+        {sel(
+          "Add new images to",
+          String(addColumn),
+          [{ value: "", label: "All columns (spread)" }, ...columnOptions],
+          (v) => setAddColumn(v),
+        )}
+        <MediaMultiField
+          label="Add several images at once"
+          values={[]}
+          onChange={(urls) => {
+            update({
+              ...p,
+              items: [
+                ...items,
+                ...urls.map((url) => ({
+                  id: uid("img"),
+                  image: url,
+                  ...(addColumn ? { column: Number(addColumn) } : {}),
+                })),
+              ],
+            });
+          }}
+        />
+        <button
+          onClick={() =>
+            update({
+              ...p,
+              items: [
+                ...items,
+                { id: uid("img"), ...(addColumn ? { column: Number(addColumn) } : {}) },
+              ],
+            })
+          }
+          className="mt-3 inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-sea"
+        >
+          <Plus className="size-3.5" /> Add single image
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+
+/* ---------------- Link tiles ---------------- */
+function LinkTilesInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as LinkTilesProps;
+  const items = p.items ?? [];
+  const update = (next: LinkTilesProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: LinkTilesItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+  const sel = (
+    label: string,
+    value: string,
+    options: { value: string; label: string }[],
+    onChange: (v: string) => void,
+  ) => (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>{o.label}</option>
+        ))}
+      </select>
+    </label>
+  );
+
+  return (
+    <>
+      <InspectorSection title="Heading (optional)">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        {sel("Columns (desktop)", String(p.columns ?? 3), [
+          { value: "1", label: "1 column" },
+          { value: "2", label: "2 columns" },
+          { value: "3", label: "3 columns" },
+          { value: "4", label: "4 columns" },
+        ], (v) => update({ ...p, columns: Number(v) as LinkTilesProps["columns"] }))}
+        {sel("Tile shape", p.aspect ?? "portrait", [
+          { value: "portrait", label: "Portrait" },
+          { value: "tall", label: "Tall" },
+          { value: "square", label: "Square" },
+          { value: "landscape", label: "Landscape" },
+        ], (v) => update({ ...p, aspect: v as LinkTilesProps["aspect"] }))}
+        {sel("Gap", p.gap ?? "md", [
+          { value: "sm", label: "Small" },
+          { value: "md", label: "Medium" },
+          { value: "lg", label: "Large" },
+        ], (v) => update({ ...p, gap: v as LinkTilesProps["gap"] }))}
+        {sel("Image overlay", p.overlay ?? "medium", [
+          { value: "none", label: "None" },
+          { value: "light", label: "Light" },
+          { value: "medium", label: "Medium" },
+          { value: "strong", label: "Strong" },
+          { value: "brand", label: "Brand tint (pink)" },
+        ], (v) => update({ ...p, overlay: v as LinkTilesProps["overlay"] }))}
+        {sel("Label position", p.labelAlign ?? "left", [
+          { value: "left", label: "Bottom left" },
+          { value: "center", label: "Bottom centre" },
+        ], (v) => update({ ...p, labelAlign: v as LinkTilesProps["labelAlign"] }))}
+        {sel("Background", p.tone ?? "white", [
+          { value: "white", label: "White" },
+          { value: "paper", label: "Paper" },
+          { value: "ice", label: "Ice" },
+          { value: "ink", label: "Ink (dark)" },
+        ], (v) => update({ ...p, tone: v as LinkTilesProps["tone"] }))}
+        <label className="flex items-center gap-2 text-sm text-ink">
+          <input
+            type="checkbox"
+            checked={p.rounded ?? false}
+            onChange={(e) => update({ ...p, rounded: e.target.checked })}
+          />
+          Rounded corners
+        </label>
+        <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
+      </InspectorSection>
+      <InspectorSection title={`Tiles (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => (
+            <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3 min-w-0">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                <div className="flex items-center gap-1">
+                  <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                    <ArrowUp className="size-3.5" />
+                  </button>
+                  <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                    <ArrowDown className="size-3.5" />
+                  </button>
+                  <button
+                    onClick={() => {
+                      const next = items.slice();
+                      next.splice(i, 1);
+                      update({ ...p, items: next });
+                    }}
+                    className="p-1 text-red-500 hover:text-red-700"
+                    title="Delete"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+              <MediaField
+                label="Image"
+                accept="image"
+                value={item.image}
+                onChange={(url) => setItem(i, { ...item, image: url })}
+              />
+              <LocalizedField label="Label" value={item.label} onChange={(v) => setItem(i, { ...item, label: v })} />
+              <LocalizedField label="Eyebrow" value={item.eyebrow} onChange={(v) => setItem(i, { ...item, eyebrow: v })} />
+              <LocalizedField label="Text" multiline value={item.body} onChange={(v) => setItem(i, { ...item, body: v })} />
+              <LocalizedField label="Alt text" value={item.alt} onChange={(v) => setItem(i, { ...item, alt: v })} />
+              <TextField
+                label="Link"
+                value={item.href}
+                placeholder="/boka"
+                onChange={(v) => setItem(i, { ...item, href: v })}
+              />
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={() => update({ ...p, items: [...items, { id: uid("tile") }] })}
+          className="mt-3 inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-sea"
+        >
+          <Plus className="size-3.5" /> Add tile
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+
+/* ---------------- Cabin tabs ---------------- */
+function CabinTabsInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as CabinTabsProps;
+  const items = p.items ?? [];
+  const update = (next: CabinTabsProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: CabinTabItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+        <LocalizedField label="Note" multiline value={p.note} onChange={(v) => update({ ...p, note: v })} />
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Background</span>
+          <select
+            value={p.tone ?? "white"}
+            onChange={(e) => update({ ...p, tone: e.target.value as CabinTabsProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+            <option value="ice">Ice</option>
+          </select>
+        </label>
+        <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
+      </InspectorSection>
+      <InspectorSection title={`Cabins (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => {
+            const bullets = item.bullets ?? [];
+            const images = item.images ?? [];
+            return (
+              <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3 min-w-0">
+                <div className="flex items-center justify-between">
+                  <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                  <div className="flex items-center gap-1">
+                    <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                      <ArrowUp className="size-3.5" />
+                    </button>
+                    <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                      <ArrowDown className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        const next = items.slice();
+                        next.splice(i, 1);
+                        update({ ...p, items: next });
+                      }}
+                      className="p-1 text-red-500 hover:text-red-700"
+                      title="Delete"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                </div>
+                <LocalizedField label="Tab label" value={item.label} onChange={(v) => setItem(i, { ...item, label: v })} />
+                <LocalizedField label="Heading" value={item.title} onChange={(v) => setItem(i, { ...item, title: v })} />
+                <LocalizedField label="Description" multiline value={item.body} onChange={(v) => setItem(i, { ...item, body: v })} />
+
+                <div className="space-y-2">
+                  <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+                    Bullets ({bullets.length})
+                  </span>
+                  {bullets.map((b, bi) => (
+                    <div key={b.id ?? bi} className="flex items-start gap-2">
+                      <div className="min-w-0 flex-1">
+                        <LocalizedField
+                          label={`Bullet ${bi + 1}`}
+                          value={b.text}
+                          onChange={(v) => {
+                            const next = bullets.slice();
+                            next[bi] = { ...b, text: v };
+                            setItem(i, { ...item, bullets: next });
+                          }}
+                        />
+                      </div>
+                      <button
+                        onClick={() => setItem(i, { ...item, bullets: bullets.filter((_, x) => x !== bi) })}
+                        className="mt-6 p-1 text-red-500 hover:text-red-700"
+                        title="Delete bullet"
+                      >
+                        <Trash2 className="size-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => setItem(i, { ...item, bullets: [...bullets, { id: uid("b") }] })}
+                    className="inline-flex items-center gap-1.5 border border-ink/15 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.18em] text-ink hover:border-sea"
+                  >
+                    <Plus className="size-3" /> Add bullet
+                  </button>
+                </div>
+
+                <div className="space-y-2">
+                  <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+                    Images ({images.length})
+                  </span>
+                  {images.map((im, ii) => (
+                    <div key={im.id ?? ii} className="border border-ink/10 p-2 space-y-2">
+                      <div className="flex items-center justify-between">
+                        <span className="text-[0.65rem] uppercase tracking-widest text-ink/45">Image {ii + 1}</span>
+                        <button
+                          onClick={() => setItem(i, { ...item, images: images.filter((_, x) => x !== ii) })}
+                          className="p-1 text-red-500 hover:text-red-700"
+                          title="Delete image"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </button>
+                      </div>
+                      <MediaField
+                        label="Image"
+                        accept="image"
+                        value={im.src}
+                        onChange={(url) => {
+                          const next = images.slice();
+                          next[ii] = { ...im, src: url };
+                          setItem(i, { ...item, images: next });
+                        }}
+                      />
+                      <LocalizedField
+                        label="Alt text"
+                        value={im.alt}
+                        onChange={(v) => {
+                          const next = images.slice();
+                          next[ii] = { ...im, alt: v };
+                          setItem(i, { ...item, images: next });
+                        }}
+                      />
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => setItem(i, { ...item, images: [...images, { id: uid("img") }] })}
+                    className="inline-flex items-center gap-1.5 border border-ink/15 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.18em] text-ink hover:border-sea"
+                  >
+                    <Plus className="size-3" /> Add image
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <button
+          onClick={() => update({ ...p, items: [...items, { id: uid("cabin") }] })}
+          className="mt-3 inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-sea"
+        >
+          <Plus className="size-3.5" /> Add cabin
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Price table ---------------- */
+function PriceTableInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as PriceTableProps;
+  const groups = p.groups ?? [];
+  const update = (next: PriceTableProps) => patch(next as unknown as BlockProps);
+  const setGroup = (i: number, g: PriceGroup) => {
+    const next = groups.slice();
+    next[i] = g;
+    update({ ...p, groups: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= groups.length) return;
+    const next = groups.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, groups: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+        <LocalizedField label="Unit label" value={p.unitLabel} onChange={(v) => update({ ...p, unitLabel: v })} />
+        <LocalizedField label="Note" multiline value={p.note} onChange={(v) => update({ ...p, note: v })} />
+        <LocalizedField label="Button label" value={p.ctaLabel} onChange={(v) => update({ ...p, ctaLabel: v })} />
+        <TextField label="Button link" value={p.ctaHref} placeholder="/boka" onChange={(v) => update({ ...p, ctaHref: v })} />
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Columns (desktop)</span>
+          <select
+            value={String(p.columns ?? 3)}
+            onChange={(e) => update({ ...p, columns: Number(e.target.value) as PriceTableProps["columns"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="2">2 columns</option>
+            <option value="3">3 columns</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Background</span>
+          <select
+            value={p.tone ?? "paper"}
+            onChange={(e) => update({ ...p, tone: e.target.value as PriceTableProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+            <option value="ice">Ice</option>
+            <option value="ink">Ink (dark)</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Alignment</span>
+          <select
+            value={p.align ?? "center"}
+            onChange={(e) => update({ ...p, align: e.target.value as PriceTableProps["align"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="center">Centered</option>
+            <option value="left">Left aligned</option>
+          </select>
+        </label>
+        <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
+
+      </InspectorSection>
+      <InspectorSection title={`Price cards (${groups.length})`}>
+        <div className="space-y-4">
+          {groups.map((g, i) => {
+            const rows = g.rows ?? [];
+            return (
+              <div key={g.id ?? i} className="border border-ink/10 p-3 space-y-3 min-w-0">
+                <div className="flex items-center justify-between">
+                  <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                  <div className="flex items-center gap-1">
+                    <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                      <ArrowUp className="size-3.5" />
+                    </button>
+                    <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                      <ArrowDown className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => update({ ...p, groups: groups.filter((_, x) => x !== i) })}
+                      className="p-1 text-red-500 hover:text-red-700"
+                      title="Delete"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                </div>
+                <LocalizedField label="Cabin" value={g.label} onChange={(v) => setGroup(i, { ...g, label: v })} />
+                <LocalizedField label="Caption" multiline value={g.caption} onChange={(v) => setGroup(i, { ...g, caption: v })} />
+                <label className="flex items-center gap-2 text-sm text-ink">
+                  <input
+                    type="checkbox"
+                    checked={g.highlight ?? false}
+                    onChange={(e) => setGroup(i, { ...g, highlight: e.target.checked })}
+                  />
+                  Highlight card
+                </label>
+                <div className="space-y-2">
+                  <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">
+                    Rows ({rows.length})
+                  </span>
+                  {rows.map((r, ri) => (
+                    <div key={r.id ?? ri} className="border border-ink/10 p-2 space-y-2">
+                      <div className="flex items-center justify-between">
+                        <span className="text-[0.65rem] uppercase tracking-widest text-ink/45">
+                          Row {ri + 1}
+                          {r.hidden ? " · hidden" : ""}
+                        </span>
+                        <button
+                          onClick={() => setGroup(i, { ...g, rows: rows.filter((_, x) => x !== ri) })}
+                          className="p-1 text-red-500 hover:text-red-700"
+                          title="Delete row"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </button>
+                      </div>
+                      <label className="flex items-center gap-2 text-xs text-ink">
+                        <input
+                          type="checkbox"
+                          checked={r.hidden !== true}
+                          onChange={(e) => {
+                            const next = rows.slice();
+                            next[ri] = { ...r, hidden: !e.target.checked };
+                            setGroup(i, { ...g, rows: next });
+                          }}
+                        />
+                        Show this row on the site
+                      </label>
+                      <LocalizedField
+                        label="Guests"
+                        value={r.label}
+                        onChange={(v) => {
+                          const next = rows.slice();
+                          next[ri] = { ...r, label: v };
+                          setGroup(i, { ...g, rows: next });
+                        }}
+                      />
+                      <LocalizedField
+                        label="Price"
+                        value={r.price}
+                        onChange={(v) => {
+                          const next = rows.slice();
+                          next[ri] = { ...r, price: v };
+                          setGroup(i, { ...g, rows: next });
+                        }}
+                      />
+                    </div>
+                  ))}
+                  <button
+                    onClick={() => setGroup(i, { ...g, rows: [...rows, { id: uid("row") }] })}
+                    className="inline-flex items-center gap-1.5 border border-ink/15 px-2.5 py-1 text-[0.65rem] uppercase tracking-[0.18em] text-ink hover:border-sea"
+                  >
+                    <Plus className="size-3" /> Add row
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        <button
+          onClick={() => update({ ...p, groups: [...groups, { id: uid("grp") }] })}
+          className="mt-3 inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-sea"
+        >
+          <Plus className="size-3.5" /> Add price card
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+/* ---------------- Checklist ---------------- */
+function IconGridInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as IconGridProps;
+  const items = p.items ?? [];
+  const update = (next: IconGridProps) => patch(next as unknown as BlockProps);
+  const setItem = (i: number, item: IconGridItem) => {
+    const next = items.slice();
+    next[i] = item;
+    update({ ...p, items: next });
+  };
+  const move = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= items.length) return;
+    const next = items.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, items: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+        <LocalizedField label="Note" multiline value={p.note} onChange={(v) => update({ ...p, note: v })} />
+      </InspectorSection>
+      <InspectorSection title="Layout">
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Columns (desktop)</span>
+          <select
+            value={String(p.columns ?? 3)}
+            onChange={(e) => update({ ...p, columns: Number(e.target.value) as IconGridProps["columns"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            {[2, 3, 4, 5].map((n) => (
+              <option key={n} value={n}>{n} columns</option>
+            ))}
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Background</span>
+          <select
+            value={p.tone ?? "white"}
+            onChange={(e) => update({ ...p, tone: e.target.value as IconGridProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+            <option value="ice">Ice</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Icon style</span>
+          <select
+            value={p.iconStyle ?? "circle"}
+            onChange={(e) => update({ ...p, iconStyle: e.target.value as IconGridProps["iconStyle"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="circle">Outline circle</option>
+            <option value="plain">Plain icon</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Icon position</span>
+          <select
+            value={p.iconAlign ?? "center"}
+            onChange={(e) => update({ ...p, iconAlign: e.target.value as IconGridProps["iconAlign"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="left">Top left</option>
+            <option value="center">Top centre</option>
+            <option value="right">Top right</option>
+          </select>
+        </label>
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Card style</span>
+          <select
+            value={p.cardStyle ?? "bordered"}
+            onChange={(e) => update({ ...p, cardStyle: e.target.value as IconGridProps["cardStyle"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="bordered">Bordered cards</option>
+            <option value="bare">Bare (no cards)</option>
+          </select>
+        </label>
+        <TextField label="Anchor id" value={p.anchor} onChange={(v) => update({ ...p, anchor: v })} />
+      </InspectorSection>
+      <InspectorSection title={`Cards (${items.length})`}>
+        <div className="space-y-4">
+          {items.map((item, i) => {
+            const Icon = resolveBlockIcon(item.icon);
+            return (
+              <div key={item.id ?? i} className="border border-ink/10 p-3 space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="flex items-center gap-2 text-[0.7rem] uppercase tracking-widest text-ink/50">
+                    <Icon className="size-4 text-sea" />#{i + 1}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button onClick={() => move(i, -1)} className="p-1 text-ink/50 hover:text-ink" title="Move up">
+                      <ArrowUp className="size-3.5" />
+                    </button>
+                    <button onClick={() => move(i, 1)} className="p-1 text-ink/50 hover:text-ink" title="Move down">
+                      <ArrowDown className="size-3.5" />
+                    </button>
+                    <button
+                      onClick={() => {
+                        const next = items.slice();
+                        next.splice(i, 1);
+                        update({ ...p, items: next });
+                      }}
+                      className="p-1 text-red-500 hover:text-red-700"
+                      title="Delete"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                </div>
+                <label className="block space-y-1.5">
+                  <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Icon</span>
+                  <select
+                    value={item.icon ?? "sparkles"}
+                    onChange={(e) => setItem(i, { ...item, icon: e.target.value })}
+                    className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+                  >
+                    {BLOCK_ICON_NAMES.map((name) => (
+                      <option key={name} value={name}>{name}</option>
+                    ))}
+                  </select>
+                </label>
+                <LocalizedField label="Title" value={item.title} onChange={(v) => setItem(i, { ...item, title: v })} />
+                <LocalizedField label="Meta (e.g. price)" value={item.meta} onChange={(v) => setItem(i, { ...item, meta: v })} />
+                <LocalizedField label="Text" multiline value={item.body} onChange={(v) => setItem(i, { ...item, body: v })} />
+                <TextField label="Link (optional)" value={item.href} onChange={(v) => setItem(i, { ...item, href: v })} />
+              </div>
+            );
+          })}
+        </div>
+        <button
+          onClick={() => update({ ...p, items: [...items, { id: uid("icon"), icon: "sparkles" }] })}
+          className="mt-3 inline-flex items-center gap-1.5 border border-ink/15 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-sea"
+        >
+          <Plus className="size-3.5" /> Add card
+        </button>
+      </InspectorSection>
+    </>
+  );
+}
+
+function ChecklistInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as ChecklistProps;
+  const columns = p.columns ?? [];
+  const update = (next: ChecklistProps) => patch(next as unknown as BlockProps);
+  const setCol = (i: number, col: ChecklistColumn) => {
+    const next = columns.slice();
+    next[i] = col;
+    update({ ...p, columns: next });
+  };
+
+  return (
+    <>
+      <InspectorSection title="Heading">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Note" multiline value={p.note} onChange={(v) => update({ ...p, note: v })} />
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Background</span>
+          <select
+            value={p.tone ?? "white"}
+            onChange={(e) => update({ ...p, tone: e.target.value as ChecklistProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="white">White</option>
+            <option value="paper">Paper</option>
+          </select>
+        </label>
+      </InspectorSection>
+      {columns.map((col, ci) => {
+        const entries = col.entries ?? [];
+        return (
+          <InspectorSection key={col.id ?? ci} title={`Column ${ci + 1} (${entries.length} items)`}>
+            <LocalizedField label="Column title" value={col.title} onChange={(v) => setCol(ci, { ...col, title: v })} />
+            <div className="space-y-2">
+              {entries.map((e, i) => (
+                <div key={e.id ?? i} className="border border-ink/10 p-3 space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                    <button
+                      onClick={() => {
+                        const next = entries.slice();
+                        next.splice(i, 1);
+                        setCol(ci, { ...col, entries: next });
+                      }}
+                      className="p-1 text-red-500 hover:text-red-700"
+                      title="Delete"
+                    >
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                  <LocalizedField
+                    label="Item"
+                    value={e.text}
+                    onChange={(v) => {
+                      const next = entries.slice();
+                      next[i] = { ...e, text: v };
+                      setCol(ci, { ...col, entries: next });
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setCol(ci, { ...col, entries: [...entries, { id: uid("i"), text: {} }] })}
+                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 item
+              </button>
+              <button
+                onClick={() => {
+                  const next = columns.slice();
+                  next.splice(ci, 1);
+                  update({ ...p, columns: next });
+                }}
+                className="inline-flex items-center gap-2 border border-ink/20 px-3 py-1.5 text-sm text-red-600 hover:border-red-400"
+              >
+                <Trash2 className="size-3.5" /> Remove column
+              </button>
+            </div>
+          </InspectorSection>
+        );
+      })}
+      <button
+        onClick={() => update({ ...p, columns: [...columns, { id: uid("c"), title: {}, entries: [] }] })}
+        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 column
+      </button>
+    </>
+  );
+}
+
+/* ---------------- CTA banner ---------------- */
+function CtaBannerInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as CtaBannerProps;
+  const update = (next: CtaBannerProps) => patch(next as unknown as BlockProps);
+
+  return (
+    <>
+      <InspectorSection title="Content">
+        <LocalizedField label="Eyebrow" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" multiline value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Body" multiline value={p.body} onChange={(v) => update({ ...p, body: v })} />
+        <label className="block space-y-1.5">
+          <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">Background</span>
+          <select
+            value={p.tone ?? "ink"}
+            onChange={(e) => update({ ...p, tone: e.target.value as CtaBannerProps["tone"] })}
+            className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+          >
+            <option value="ink">Dark</option>
+            <option value="sea">Ice</option>
+            <option value="paper">Paper</option>
+          </select>
+        </label>
+      </InspectorSection>
+      <InspectorSection title="Primary button">
+        <LocalizedField label="Label" value={p.cta?.label} onChange={(v) => update({ ...p, cta: { ...p.cta, label: v } })} />
+        <TextField label="URL" value={p.cta?.href ?? ""} onChange={(v) => update({ ...p, cta: { ...p.cta, href: v } })} />
+      </InspectorSection>
+      <InspectorSection title="Secondary button">
+        <LocalizedField label="Label" value={p.secondaryCta?.label} onChange={(v) => update({ ...p, secondaryCta: { ...p.secondaryCta, label: v } })} />
+        <TextField label="URL" value={p.secondaryCta?.href ?? ""} onChange={(v) => update({ ...p, secondaryCta: { ...p.secondaryCta, href: v } })} />
+      </InspectorSection>
+    </>
+  );
+}
+
+
+/* ---------------- Image or video — Left/Right ---------------- */
+const MEDIA_SPLIT_STYLES: Record<
+  NonNullable<MediaSplitProps["style"]>,
+  { label: string; preset: Partial<MediaSplitProps> }
+> = {
+  editorial: {
+    label: "Editorial (default)",
+    preset: { tone: "white", padding: "normal", mediaRatio: "50", aspect: "landscape", rounded: false, fullBleed: false, align: "center" },
+  },
+  compact: {
+    label: "Compact",
+    preset: { tone: "paper", padding: "compact", mediaRatio: "40", aspect: "square", rounded: false, fullBleed: false, align: "center" },
+  },
+  fullBleed: {
+    label: "Full bleed",
+    preset: { tone: "white", padding: "compact", mediaRatio: "60", aspect: "wide", rounded: false, fullBleed: true, align: "center" },
+  },
+  dark: {
+    label: "Dark",
+    preset: { tone: "ink", padding: "spacious", mediaRatio: "50", aspect: "portrait", rounded: true, fullBleed: false, align: "center" },
+  },
+};
+
+function Select<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: T;
+  options: { value: T; label: string }[];
+  onChange: (v: T) => void;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="block text-[0.7rem] uppercase tracking-[0.22em] text-ink/60">{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        className="w-full border border-ink/15 bg-white px-2.5 py-1.5 text-sm text-ink focus:outline-none focus:border-sea"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label className="flex items-center gap-2 text-sm text-ink">
+      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
+      {label}
+    </label>
+  );
+}
+
+function MediaSplitInspector({ block, patch }: BlockPatchProps) {
+  const p = (block.props ?? {}) as MediaSplitProps;
+  const update = (next: MediaSplitProps) => patch(next as unknown as BlockProps);
+  const slides = p.slides ?? [];
+  const bullets = p.bullets ?? [];
+  const setSlide = (i: number, s: MediaSplitSlide) => {
+    const next = slides.slice();
+    next[i] = s;
+    update({ ...p, slides: next });
+  };
+  const moveSlide = (i: number, dir: -1 | 1) => {
+    const j = i + dir;
+    if (j < 0 || j >= slides.length) return;
+    const next = slides.slice();
+    [next[i], next[j]] = [next[j], next[i]];
+    update({ ...p, slides: next });
+  };
+  const setBullet = (i: number, b: MediaSplitBullet) => {
+    const next = bullets.slice();
+    next[i] = b;
+    update({ ...p, bullets: next });
+  };
+  const mediaType = p.mediaType ?? "image";
+
+  return (
+    <>
+      <InspectorSection title="Style">
+        <Select
+          label="Preset"
+          value={p.style ?? "editorial"}
+          options={(Object.keys(MEDIA_SPLIT_STYLES) as NonNullable<MediaSplitProps["style"]>[]).map((k) => ({
+            value: k,
+            label: MEDIA_SPLIT_STYLES[k].label,
+          }))}
+          onChange={(v) => update({ ...p, style: v, ...MEDIA_SPLIT_STYLES[v].preset })}
+        />
+        <p className="text-xs text-ink/50">
+          Picking a preset applies its layout defaults — you can still change every setting below.
+        </p>
+      </InspectorSection>
+
+      <InspectorSection title="Content">
+        <LocalizedField label="Eyebrow / subtitle" value={p.eyebrow} onChange={(v) => update({ ...p, eyebrow: v })} />
+        <LocalizedField label="Title" multiline value={p.title} onChange={(v) => update({ ...p, title: v })} />
+        <LocalizedField label="Lead" multiline value={p.lead} onChange={(v) => update({ ...p, lead: v })} />
+        <LocalizedField label="Body" multiline value={p.body} onChange={(v) => update({ ...p, body: v })} />
+      </InspectorSection>
+
+      <InspectorSection title={`Bullets (${bullets.length})`}>
+        {bullets.map((b, i) => (
+          <div key={b.id ?? i} className="border border-ink/10 p-3 space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+              <button
+                onClick={() => {
+                  const next = bullets.slice();
+                  next.splice(i, 1);
+                  update({ ...p, bullets: next });
+                }}
+                className="p-1 text-red-500 hover:text-red-700"
+                title="Delete"
+              >
+                <Trash2 className="size-3.5" />
+              </button>
+            </div>
+            <LocalizedField label="Text" value={b.text} onChange={(v) => setBullet(i, { ...b, text: v })} />
+          </div>
+        ))}
+        <button
+          onClick={() => update({ ...p, bullets: [...bullets, { id: uid("b"), text: {} }] })}
+          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 bullet
+        </button>
+      </InspectorSection>
+
+      <InspectorSection title="Buttons">
+        <LocalizedField
+          label="Primary label"
+          value={p.cta?.label}
+          onChange={(v) => update({ ...p, cta: { ...(p.cta ?? {}), label: v } })}
+        />
+        <TextField
+          label="Primary link"
+          value={p.cta?.href ?? ""}
+          onChange={(v) => update({ ...p, cta: { ...(p.cta ?? {}), href: v } })}
+        />
+        <LocalizedField
+          label="Secondary label"
+          value={p.secondaryCta?.label}
+          onChange={(v) => update({ ...p, secondaryCta: { ...(p.secondaryCta ?? {}), label: v } })}
+        />
+        <TextField
+          label="Secondary link"
+          value={p.secondaryCta?.href ?? ""}
+          onChange={(v) => update({ ...p, secondaryCta: { ...(p.secondaryCta ?? {}), href: v } })}
+        />
+      </InspectorSection>
+
+      <InspectorSection title="Layout">
+        <Select
+          label="Media side (desktop)"
+          value={p.mediaSide ?? "left"}
+          options={[
+            { value: "left", label: "Media left / text right" },
+            { value: "right", label: "Text left / media right" },
+          ]}
+          onChange={(v) => update({ ...p, mediaSide: v })}
+        />
+        <Select
+          label="Media width"
+          value={p.mediaRatio ?? "50"}
+          options={[
+            { value: "40", label: "40%" },
+            { value: "50", label: "50%" },
+            { value: "60", label: "60%" },
+          ]}
+          onChange={(v) => update({ ...p, mediaRatio: v })}
+        />
+        <Select
+          label="Vertical alignment"
+          value={p.align ?? "center"}
+          options={[
+            { value: "center", label: "Center" },
+            { value: "top", label: "Top" },
+          ]}
+          onChange={(v) => update({ ...p, align: v })}
+        />
+        <Select
+          label="Background"
+          value={p.tone ?? "white"}
+          options={[
+            { value: "white", label: "White" },
+            { value: "paper", label: "Paper" },
+            { value: "sea", label: "Ice" },
+            { value: "ink", label: "Ink (dark)" },
+          ]}
+          onChange={(v) => update({ ...p, tone: v })}
+        />
+        <Select
+          label="Spacing"
+          value={p.padding ?? "normal"}
+          options={[
+            { value: "compact", label: "Compact" },
+            { value: "normal", label: "Normal" },
+            { value: "spacious", label: "Spacious" },
+          ]}
+          onChange={(v) => update({ ...p, padding: v })}
+        />
+        <Select
+          label="Media aspect"
+          value={p.aspect ?? "landscape"}
+          options={[
+            { value: "landscape", label: "Landscape 4:3" },
+            { value: "wide", label: "Wide 16:9" },
+            { value: "square", label: "Square" },
+            { value: "portrait", label: "Portrait 4:5" },
+            { value: "auto", label: "Auto (natural)" },
+          ]}
+          onChange={(v) => update({ ...p, aspect: v })}
+        />
+        <Select
+          label="Media backdrop"
+          value={p.mediaBg ?? "tint"}
+          options={[
+            { value: "tint", label: "Light tint" },
+            { value: "transparent", label: "Transparent (blend with section)" },
+          ]}
+          onChange={(v) => update({ ...p, mediaBg: v })}
+        />
+        <Select
+          label="Media fit"
+          value={p.mediaFit ?? "cover"}
+          options={[
+            { value: "cover", label: "Fill frame (crop)" },
+            { value: "contain", label: "Fit inside (logos)" },
+          ]}
+          onChange={(v) => update({ ...p, mediaFit: v })}
+        />
+        <Toggle label="Full-bleed width" checked={Boolean(p.fullBleed)} onChange={(v) => update({ ...p, fullBleed: v })} />
+        <Toggle label="Rounded media corners" checked={Boolean(p.rounded)} onChange={(v) => update({ ...p, rounded: v })} />
+        <TextField label="Anchor id (optional)" value={p.anchor ?? ""} onChange={(v) => update({ ...p, anchor: v })} />
+        <p className="text-xs text-ink/50">
+          On mobile the order is always: subtitle and title, then media, then the remaining text.
+        </p>
+      </InspectorSection>
+
+      <InspectorSection title="Media">
+        <Select
+          label="Media type"
+          value={mediaType}
+          options={[
+            { value: "image", label: "Single image" },
+            { value: "slideshow", label: "Image slideshow" },
+            { value: "video", label: "Video" },
+          ]}
+          onChange={(v) => update({ ...p, mediaType: v })}
+        />
+        {mediaType === "image" ? (
+          <>
+            <MediaField label="Image" accept="image" value={p.image} onChange={(url) => update({ ...p, image: url })} />
+            <LocalizedField label="Image alt text" value={p.imageAlt} onChange={(v) => update({ ...p, imageAlt: v })} />
+          </>
+        ) : null}
+        {mediaType === "video" ? (
+          <>
+            <MediaField label="Video" accept="video" value={p.videoSrc} onChange={(url) => update({ ...p, videoSrc: url })} />
+            <MediaField label="Poster image" accept="image" value={p.posterSrc} onChange={(url) => update({ ...p, posterSrc: url })} />
+            <Toggle label="Autoplay" checked={p.videoAutoplay !== false} onChange={(v) => update({ ...p, videoAutoplay: v })} />
+            <Toggle label="Loop" checked={p.videoLoop !== false} onChange={(v) => update({ ...p, videoLoop: v })} />
+            <Toggle label="Muted" checked={p.videoMuted !== false} onChange={(v) => update({ ...p, videoMuted: v })} />
+            <Toggle label="Show controls" checked={Boolean(p.videoControls)} onChange={(v) => update({ ...p, videoControls: v })} />
+          </>
+        ) : null}
+      </InspectorSection>
+
+      {mediaType === "slideshow" ? (
+        <InspectorSection title={`Slides (${slides.length})`}>
+          <Toggle label="Autoplay" checked={Boolean(p.autoplay)} onChange={(v) => update({ ...p, autoplay: v })} />
+          <TextField
+            label="Autoplay interval (ms)"
+            value={String(p.intervalMs ?? 5000)}
+            onChange={(v) => update({ ...p, intervalMs: Number(v) || 5000 })}
+          />
+          <Toggle label="Show pagination dots" checked={p.showDots !== false} onChange={(v) => update({ ...p, showDots: v })} />
+          <Toggle label="Show arrows" checked={p.showArrows !== false} onChange={(v) => update({ ...p, showArrows: v })} />
+          <Toggle label="Loop" checked={p.loop !== false} onChange={(v) => update({ ...p, loop: v })} />
+          <Toggle label="Show captions" checked={Boolean(p.showCaptions)} onChange={(v) => update({ ...p, showCaptions: v })} />
+          {slides.map((s, i) => (
+            <div key={s.id ?? i} className="border border-ink/10 p-3 space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">#{i + 1}</span>
+                <div className="flex items-center gap-1">
+                  <button onClick={() => moveSlide(i, -1)} className="p-1 text-ink/60 hover:text-ink" title="Move up">
+                    <ArrowUp className="size-3.5" />
+                  </button>
+                  <button onClick={() => moveSlide(i, 1)} className="p-1 text-ink/60 hover:text-ink" title="Move down">
+                    <ArrowDown className="size-3.5" />
+                  </button>
+                  <button
+                    onClick={() => {
+                      const next = slides.slice();
+                      next.splice(i, 1);
+                      update({ ...p, slides: next });
+                    }}
+                    className="p-1 text-red-500 hover:text-red-700"
+                    title="Delete"
+                  >
+                    <Trash2 className="size-3.5" />
+                  </button>
+                </div>
+              </div>
+              <MediaField label="Image" accept="image" value={s.image} onChange={(url) => setSlide(i, { ...s, image: url })} />
+              <LocalizedField label="Alt text" value={s.alt} onChange={(v) => setSlide(i, { ...s, alt: v })} />
+              <LocalizedField label="Caption" value={s.caption} onChange={(v) => setSlide(i, { ...s, caption: v })} />
+              <TextField label="Link (optional)" value={s.href ?? ""} onChange={(v) => setSlide(i, { ...s, href: v })} />
+            </div>
+          ))}
+          <button
+            onClick={() => update({ ...p, slides: [...slides, { id: uid("s"), image: "", alt: {} }] })}
+            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 slide
+          </button>
+        </InspectorSection>
+      ) : null}
+    </>
+  );
+}
+
+
+export {
+  HeroInspector,
+  IntroInspector,
+  FaqInspector,
+  InstagramInspector,
+  ProseInspector,
+  RichTextInspector,
+  HeroFullInspector,
+  ImageMarqueeInspector,
+  LinkTilesInspector,
+  CabinTabsInspector,
+  PriceTableInspector,
+  IconGridInspector,
+  ChecklistInspector,
+  CtaBannerInspector,
+  MediaSplitInspector,
+  Select as InspectorSelect,
+  Toggle as InspectorToggle,
+  uid as inspectorUid,
+};