@portaki/module-sections 1.3.0 → 1.3.1

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@portaki/module-sections",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Portaki module — editorial sections (TipTap)",
   "license": "AGPL-3.0",
   "type": "module",
   "main": "./src/index.tsx",
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@portaki/sdk": "^3.0.0",
+    "lucide-react": "^1.14.0",
     "@tiptap/core": "^3.0.0",
     "@tiptap/html": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",

package/portaki.catalog.json

@@ -9,7 +9,7 @@
     "fr": "Blocs de contenu riches (TipTap) pour le carnet d’accueil invité.",
     "en": "Rich content blocks (TipTap) for the guest welcome book."
   },
-  "version": "1.3.0",
+  "version": "1.3.1",
   "releaseNotesUrl": "https://github.com/PortakiApp/portaki-modules/releases",
   "changelog": [
     {
@@ -122,6 +122,6 @@
   },
   "artifacts": {
     "wasmUrl": "oci://ghcr.io/portakiapp/portaki-module-sections",
-    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.3.0"
+    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.3.1"
   }
 }

package/portaki.module.json

@@ -9,7 +9,7 @@
     "fr": "Blocs de contenu riches (TipTap) pour le carnet d’accueil invité.",
     "en": "Rich content blocks (TipTap) for the guest welcome book."
   },
-  "version": "1.3.0",
+  "version": "1.3.1",
   "releaseNotesUrl": "https://github.com/PortakiApp/portaki-modules/releases",
   "changelog": [
     {
@@ -122,6 +122,6 @@
   },
   "artifacts": {
     "wasmUrl": "oci://ghcr.io/portakiapp/portaki-module-sections",
-    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.3.0"
+    "guestEsmUrl": "https://esm.sh/@portaki/module-sections@1.3.1"
   }
 }

package/src/host/SectionCreateModal.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import type { HostModuleContext } from '@portaki/sdk'
+import { useEffect, useState } from 'react'
+
+import type {
+  SectionContentPresetId,
+  SectionCreateModalDesign,
+  SectionTemplateDesign,
+} from './sections-host.types'
+
+export type SectionCreatePayload = {
+  titleFr: string
+  titleEn: string
+  contentPreset: SectionContentPresetId
+}
+
+type Props = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  design: SectionCreateModalDesign
+  onCreate: (payload: SectionCreatePayload) => Promise<void>
+  creating?: boolean
+  shell: HostModuleContext['shell']
+}
+
+export function SectionCreateModal({
+  open,
+  onOpenChange,
+  design,
+  onCreate,
+  creating = false,
+  shell,
+}: Props) {
+  const {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Button,
+    Input,
+    cn,
+  } = shell
+
+  const defaultTemplate =
+    design.templates.find((t) => t.id === design.defaultTemplateId) ?? design.templates[0]
+
+  const [selectedId, setSelectedId] = useState(defaultTemplate?.id ?? '')
+  const [titleFr, setTitleFr] = useState(defaultTemplate?.titleFr ?? '')
+
+  const selected = design.templates.find((t) => t.id === selectedId) ?? defaultTemplate
+
+  useEffect(() => {
+    if (!open || !defaultTemplate) {
+      return
+    }
+    setSelectedId(defaultTemplate.id)
+    setTitleFr(defaultTemplate.titleFr)
+  }, [open, defaultTemplate])
+
+  function selectTemplate(template: SectionTemplateDesign) {
+    setSelectedId(template.id)
+    setTitleFr(template.titleFr)
+  }
+
+  async function handleSubmit() {
+    if (!selected || !titleFr.trim()) {
+      return
+    }
+    await onCreate({
+      titleFr: titleFr.trim(),
+      titleEn: selected.titleEn,
+      contentPreset: selected.contentPreset,
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[min(92vh,calc(100%-80px))] max-w-[min(96vw,920px)] flex-col gap-0 overflow-hidden p-0">
+        <DialogHeader className="shrink-0 px-[26px] pb-4 pt-6">
+          <DialogTitle className="font-heading text-[22px] font-semibold tracking-tight">
+            {design.titleFr}
+          </DialogTitle>
+          <DialogDescription className="text-[13px] leading-relaxed text-[var(--text-muted)]">
+            {design.subtitleFr}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-[26px] pb-4">
+          <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+            {design.templates.map((template) => {
+              const active = template.id === selectedId
+              return (
+                <button
+                  key={template.id}
+                  type="button"
+                  onClick={() => selectTemplate(template)}
+                  className={cn(
+                    'rounded-xl border px-3 py-3 text-left transition-colors',
+                    active
+                      ? 'border-[var(--amber)] bg-[var(--color-amber-soft)] shadow-[inset_0_0_0_1px_rgba(245,158,11,0.35)]'
+                      : 'border-[var(--border)] bg-white hover:border-[var(--border-md)] hover:bg-[var(--bg-muted)]/40',
+                  )}
+                >
+                  <span className="text-[22px] leading-none" aria-hidden>
+                    {template.icon}
+                  </span>
+                  <p className="mt-2 font-heading text-[14px] font-semibold leading-snug text-[var(--text)]">
+                    {template.titleFr}
+                  </p>
+                  <p className="mt-1 text-[12px] leading-snug text-[var(--text-muted)]">
+                    {template.descriptionFr}
+                  </p>
+                </button>
+              )
+            })}
+          </div>
+
+          <div className="mt-5">
+            <label className="mb-1.5 block text-[13px] font-medium text-[var(--text)]">
+              {design.titleFieldLabelFr}
+            </label>
+            <Input
+              value={titleFr}
+              onChange={(e) => setTitleFr(e.target.value)}
+              placeholder={selected?.titleFr}
+              className="h-11"
+            />
+            <p className="mt-1.5 text-[12px] text-[var(--text-muted)]">{design.titleFieldHintFr}</p>
+          </div>
+
+          <p className="mt-4 text-[12px] text-[var(--text-muted)]">{design.footerHintFr}</p>
+        </div>
+
+        <DialogFooter className="shrink-0 flex-row items-center justify-end gap-2 border-t border-[var(--border)] bg-[var(--bg-surface)] px-[26px] py-4">
+          <Button
+            type="button"
+            variant="ghost"
+            className="text-[var(--text-muted)]"
+            disabled={creating}
+            onClick={() => onOpenChange(false)}
+          >
+            {design.cancelLabelFr}
+          </Button>
+          <Button
+            type="button"
+            className="bg-[var(--amber)] font-semibold text-[var(--text)] hover:bg-[var(--amber-solid-hover)]"
+            disabled={creating || !titleFr.trim()}
+            onClick={() => void handleSubmit()}
+          >
+            {creating ? 'Création…' : design.submitLabelFr}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/host/SectionsHostWorkspace.tsx

@@ -0,0 +1,497 @@
+'use client'
+
+import type { HostModuleContext } from '@portaki/sdk'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { FileText, GripVertical, Plus, Trash2 } from 'lucide-react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+import { SectionCreateModal, type SectionCreatePayload } from './SectionCreateModal'
+import { sectionsEditorDesign } from './sections-editor-design'
+import type { SectionsEditorDesign } from './sections-host.types'
+import { buildSectionTipTapPreset } from './section-tiptap-presets'
+import { sectionsToastCopy } from './sections-toast-copy'
+
+type SectionRow = {
+  id: string;
+  sortOrder: number;
+  titleFr: string;
+  titleEn: string;
+  contentFr: unknown;
+  contentEn: unknown;
+};
+
+type LangTab = "fr" | "en";
+
+const DEFAULT_DESIGN = sectionsEditorDesign
+
+function unwrapJsonbField(raw: unknown): unknown {
+  if (raw == null) {
+    return null;
+  }
+  if (typeof raw === "string") {
+    return parseTipTapDoc(raw);
+  }
+  if (typeof raw === "object" && !Array.isArray(raw)) {
+    const record = raw as Record<string, unknown>;
+    if (record.type === "jsonb" && record.value != null) {
+      return unwrapJsonbField(record.value);
+    }
+    if (record.type === "doc") {
+      return record;
+    }
+  }
+  return raw;
+}
+
+function normalizeSectionRow(row: Record<string, unknown>): SectionRow {
+  return {
+    id: String(row.id ?? ""),
+    sortOrder: Number(row.sortOrder ?? row.sort_order ?? 0),
+    titleFr: String(row.titleFr ?? row.title_fr ?? ""),
+    titleEn: String(row.titleEn ?? row.title_en ?? ""),
+    contentFr: unwrapJsonbField(row.contentFr ?? row.content_fr),
+    contentEn: unwrapJsonbField(row.contentEn ?? row.content_en),
+  };
+}
+
+function tipTapValue(raw: unknown): string {
+  const doc = unwrapJsonbField(raw);
+  if (doc && typeof doc === "object") {
+    return serializeTipTapDoc(doc as Record<string, unknown>);
+  }
+  return serializeTipTapDoc(parseTipTapDoc(null));
+}
+
+function SortableSectionItem({
+  section,
+  selected,
+  onSelect,
+  cn,
+}: {
+  section: SectionRow
+  selected: boolean
+  onSelect: () => void
+  cn: HostModuleContext['shell']['cn']
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: section.id,
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <li ref={setNodeRef} style={style} className={cn(isDragging && "z-10 opacity-90")}>
+      <div
+        className={cn(
+          "flex items-center gap-1 rounded-lg px-1 py-0.5",
+          selected ? "bg-[var(--amber)]/12" : "hover:bg-black/[0.03]",
+        )}
+      >
+        <button
+          type="button"
+          className="touch-none rounded p-1 text-[var(--text-muted)] hover:text-[var(--text)]"
+          aria-label="Réordonner"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="size-4" aria-hidden />
+        </button>
+        <button
+          type="button"
+          onClick={onSelect}
+          className={cn(
+            "min-w-0 flex-1 rounded-md px-2 py-2 text-left text-[13px] transition-colors",
+            selected ? "font-medium text-[var(--text)]" : "text-[var(--text-muted)] hover:text-[var(--text)]",
+          )}
+        >
+          {section.titleFr || "Sans titre"}
+        </button>
+      </div>
+    </li>
+  );
+}
+
+export function SectionsHostWorkspace({
+  ctx,
+  design = DEFAULT_DESIGN,
+}: {
+  ctx: HostModuleContext
+  design?: SectionsEditorDesign
+}) {
+  const { propertyId, gateway, shell } = ctx
+  const {
+    NotionLikeEditor,
+    HostEmptyPlaceholder,
+    HostUnderlineTabs,
+    Button,
+    Input,
+    cn,
+    toast,
+    parseTipTapDoc,
+    serializeTipTapDoc,
+  } = shell
+  const gatewayOps = design.gateway
+
+  const [sections, setSections] = useState<SectionRow[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [lang, setLang] = useState<LangTab>("fr");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const selected = useMemo(
+    () => sections.find((s) => s.id === selectedId) ?? null,
+    [sections, selectedId],
+  );
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await gateway.query<SectionRow[]>(gatewayOps.listQuery)
+      const list = data.map((row) => normalizeSectionRow(row as Record<string, unknown>));
+      setSections(list);
+      setSelectedId((prev) => {
+        if (prev && list.some((s) => s.id === prev)) {
+          return prev;
+        }
+        return list[0]?.id ?? null;
+      });
+    } catch {
+      toast.error(sectionsToastCopy.loadError)
+    } finally {
+      setLoading(false);
+    }
+  }, [propertyId, gateway, gatewayOps.listQuery, toast])
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const saveSelected = useCallback(
+    async (draft: SectionRow) => {
+      setSaving(true);
+      try {
+        await gateway.command(gatewayOps.saveCommand, {
+          id: draft.id,
+          titleFr: draft.titleFr,
+          titleEn: draft.titleEn || draft.titleFr,
+          contentFr: draft.contentFr,
+          contentEn: draft.contentEn,
+          sortOrder: draft.sortOrder,
+        });
+        setLastSavedAt(new Date());
+        await load();
+      } catch {
+        toast.error(sectionsToastCopy.saveError)
+      } finally {
+        setSaving(false);
+      }
+    },
+    [gateway, gatewayOps.saveCommand, load, toast],
+  );
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleSave = useCallback(
+    (draft: SectionRow) => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        void saveSelected(draft);
+      }, 1200);
+    },
+    [saveSelected],
+  );
+
+  const updateDraft = useCallback(
+    (patch: Partial<SectionRow>) => {
+      if (!selected) {
+        return;
+      }
+      const next = { ...selected, ...patch };
+      setSections((prev) => prev.map((s) => (s.id === next.id ? next : s)));
+      scheduleSave(next);
+    },
+    [selected, scheduleSave],
+  );
+
+  const persistOrder = useCallback(
+    async (ordered: SectionRow[]) => {
+      try {
+        await gateway.command(gatewayOps.reorderCommand, {
+          orderedIds: ordered.map((s) => s.id),
+        });
+      } catch {
+        toast.error(sectionsToastCopy.reorderError)
+        await load();
+      }
+    },
+    [gateway, gatewayOps.reorderCommand, load, toast]
+  );
+
+  const onDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) {
+        return;
+      }
+      setSections((items) => {
+        const oldIndex = items.findIndex((s) => s.id === active.id);
+        const newIndex = items.findIndex((s) => s.id === over.id);
+        const moved = arrayMove(items, oldIndex, newIndex).map((s, index) => ({
+          ...s,
+          sortOrder: index,
+        }));
+        void persistOrder(moved);
+        return moved;
+      });
+    },
+    [persistOrder],
+  );
+
+  const createSection = useCallback(
+    async (payload: SectionCreatePayload) => {
+      setCreating(true);
+      const sortOrder = sections.length;
+      const id = crypto.randomUUID();
+      const { contentFr, contentEn } = buildSectionTipTapPreset(payload.contentPreset);
+      try {
+        await gateway.command(gatewayOps.saveCommand, {
+          id,
+          titleFr: payload.titleFr,
+          titleEn: payload.titleEn,
+          contentFr,
+          contentEn,
+          sortOrder,
+        });
+        setCreateModalOpen(false);
+        await load();
+        setSelectedId(id);
+        toast.success(sectionsToastCopy.createSuccess)
+      } catch {
+        toast.error(sectionsToastCopy.createError)
+      } finally {
+        setCreating(false);
+      }
+    },
+    [gateway, gatewayOps.saveCommand, sections.length, load, toast]
+  );
+
+  const deleteSelected = useCallback(async () => {
+    if (!selected) {
+      return;
+    }
+    try {
+      await gateway.command(gatewayOps.deleteCommand, {
+        id: selected.id,
+      });
+      toast.success(sectionsToastCopy.deleteSuccess)
+      await load();
+    } catch {
+      toast.error(sectionsToastCopy.deleteError)
+    }
+  }, [gateway, gatewayOps.deleteCommand, selected, load, toast])
+
+  if (loading) {
+    return <p className="text-sm text-[var(--text-muted)]">Chargement des sections…</p>;
+  }
+
+  if (sections.length === 0) {
+    return (
+      <>
+        <HostEmptyPlaceholder
+          icon={FileText}
+          title={design.emptyState.titleFr}
+          description={design.emptyState.descriptionFr}
+          primaryAction={{
+            label: design.emptyState.primaryActionLabelFr,
+            onClick: () => setCreateModalOpen(true),
+          }}
+        />
+        <SectionCreateModal
+          open={createModalOpen}
+          onOpenChange={setCreateModalOpen}
+          design={design.createModal}
+          onCreate={createSection}
+          creating={creating}
+          shell={shell}
+        />
+      </>
+    )
+  }
+
+  const editorValue =
+    selected == null
+      ? serializeTipTapDoc(parseTipTapDoc(null))
+      : lang === "fr"
+        ? tipTapValue(selected.contentFr)
+        : tipTapValue(selected.contentEn);
+
+  return (
+    <div className="flex min-h-[min(70vh,720px)] flex-col gap-4 lg:flex-row">
+      <aside className="w-full shrink-0 rounded-xl border border-[var(--border)] bg-white lg:w-72">
+        <div className="flex items-center justify-between border-b border-[var(--border)] px-3 py-2.5">
+          <span className="text-[13px] font-medium text-[var(--text)]">Sections</span>
+          <Button
+            type="button"
+            variant="secondary"
+            className="min-h-8 px-3 text-xs"
+            onClick={() => setCreateModalOpen(true)}
+          >
+            <Plus className="size-4" aria-hidden />
+            Nouvelle
+          </Button>
+        </div>
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+          <SortableContext items={sections.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+            <ul className="max-h-[min(60vh,560px)] overflow-y-auto p-2">
+              {sections.length === 0 ? (
+                <li className="px-2 py-8 text-center">
+                  <p className="text-[13px] text-[var(--text-muted)]">Aucune section pour l&apos;instant.</p>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    className="mt-3 min-h-9 px-4 text-xs"
+                    onClick={() => setCreateModalOpen(true)}
+                  >
+                    <Plus className="size-4" aria-hidden />
+                    Nouvelle section
+                  </Button>
+                </li>
+              ) : (
+                sections.map((s) => (
+                  <SortableSectionItem
+                    key={s.id}
+                    section={s}
+                    selected={selectedId === s.id}
+                    onSelect={() => setSelectedId(s.id)}
+                    cn={cn}
+                  />
+                ))
+              )}
+            </ul>
+          </SortableContext>
+        </DndContext>
+      </aside>
+
+      <div className="min-w-0 flex-1 rounded-xl border border-[var(--border)] bg-white">
+        {selected ? (
+          <>
+            <div className="flex flex-col gap-3 border-b border-[var(--border)] px-4 py-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <Input
+                  value={selected.titleFr}
+                  onChange={(e) => updateDraft({ titleFr: e.target.value })}
+                  placeholder="Titre (FR)"
+                  className="max-w-xs"
+                />
+                <Input
+                  value={selected.titleEn}
+                  onChange={(e) => updateDraft({ titleEn: e.target.value })}
+                  placeholder="Title (EN)"
+                  className="max-w-xs"
+                />
+                <div className="ml-auto flex items-center gap-2">
+                  <span className="text-[11px] text-[var(--text-muted)]">
+                    {saving
+                      ? "Enregistrement…"
+                      : lastSavedAt
+                        ? `Auto-sauvegardé — ${formatRelative(lastSavedAt)}`
+                        : ""}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    className="min-h-8 px-3 text-xs text-destructive"
+                    onClick={() => void deleteSelected()}
+                  >
+                    <Trash2 className="size-4" aria-hidden />
+                    Supprimer
+                  </Button>
+                </div>
+              </div>
+              <HostUnderlineTabs
+                options={[
+                  { value: 'fr', label: 'Contenu FR' },
+                  { value: 'en', label: 'Content EN' },
+                ]}
+                value={lang}
+                onChange={(value) => setLang(value as LangTab)}
+                ariaLabel="Langue du contenu"
+              />
+            </div>
+            <div className="p-4">
+              <NotionLikeEditor
+                key={`${selected.id}-${lang}`}
+                value={editorValue}
+                onChange={(json) => {
+                  try {
+                    const node = JSON.parse(json) as unknown;
+                    if (lang === "fr") {
+                      updateDraft({ contentFr: node });
+                    } else {
+                      updateDraft({ contentEn: node });
+                    }
+                  } catch {
+                    /* ignore */
+                  }
+                }}
+              />
+            </div>
+          </>
+        ) : (
+          <div className="flex min-h-[320px] items-center justify-center p-8 text-[13px] text-[var(--text-muted)]">
+            Sélectionnez ou créez une section.
+          </div>
+        )}
+      </div>
+
+      <SectionCreateModal
+        open={createModalOpen}
+        onOpenChange={setCreateModalOpen}
+        design={design.createModal}
+        onCreate={createSection}
+        creating={creating}
+        shell={shell}
+      />
+    </div>
+  )
+}
+
+function formatRelative(d: Date): string {
+  const sec = Math.round((Date.now() - d.getTime()) / 1000);
+  if (sec < 8) {
+    return "à l’instant";
+  }
+  if (sec < 60) {
+    return `il y a ${sec} s`;
+  }
+  const min = Math.round(sec / 60);
+  return `il y a ${min} min`;
+}

package/src/host/section-tiptap-presets.ts

@@ -0,0 +1,156 @@
+import type { SectionContentPresetId } from "./sections-host.types";
+
+export type SectionTipTapPreset = {
+  contentFr: Record<string, unknown>;
+  contentEn: Record<string, unknown>;
+};
+
+function textNode(value: string): Record<string, unknown> {
+  return { type: "text", text: value };
+}
+
+function paragraph(...parts: string[]): Record<string, unknown> {
+  const joined = parts.filter(Boolean).join(" ");
+  return {
+    type: "paragraph",
+    content: joined ? [textNode(joined)] : [],
+  };
+}
+
+function heading(level: 2 | 3, text: string): Record<string, unknown> {
+  return {
+    type: "heading",
+    attrs: { level },
+    content: text ? [textNode(text)] : [],
+  };
+}
+
+function bulletItem(text: string): Record<string, unknown> {
+  return {
+    type: "listItem",
+    content: [paragraph(text)],
+  };
+}
+
+function bulletList(items: string[]): Record<string, unknown> {
+  return {
+    type: "bulletList",
+    content: items.map(bulletItem),
+  };
+}
+
+function doc(...blocks: Record<string, unknown>[]): Record<string, unknown> {
+  return { type: "doc", content: blocks };
+}
+
+const PRESETS: Record<SectionContentPresetId, SectionTipTapPreset> = {
+  welcome: {
+    contentFr: doc(
+      paragraph(
+        "Bienvenue ! Nous sommes ravis de vous accueillir. Voici quelques informations utiles pour profiter pleinement du logement.",
+      ),
+      paragraph(
+        "N'hésitez pas à nous écrire ou à nous appeler si vous avez la moindre question pendant votre séjour.",
+      ),
+    ),
+    contentEn: doc(
+      paragraph(
+        "Welcome! We're delighted to host you. Here is some useful information to help you make the most of your stay.",
+      ),
+      paragraph("Feel free to message or call us if you have any questions during your visit."),
+    ),
+  },
+  beaches: {
+    contentFr: doc(
+      heading(2, "Plages & criques"),
+      paragraph("Nos spots préférés aux alentours :"),
+      bulletList([
+        "Plage principale — accès facile, idéale en famille",
+        "Crique sauvage — 10 min à pied, prévoir des chaussures",
+        "Spot snorkeling — eau calme le matin",
+      ]),
+    ),
+    contentEn: doc(
+      heading(2, "Beaches & coves"),
+      paragraph("Our favourite spots nearby:"),
+      bulletList([
+        "Main beach — easy access, great for families",
+        "Hidden cove — 10 min walk, bring suitable shoes",
+        "Snorkelling spot — calm water in the morning",
+      ]),
+    ),
+  },
+  restaurants: {
+    contentFr: doc(
+      heading(2, "Restaurants"),
+      paragraph("Quelques adresses que nous recommandons, par budget :"),
+      bulletList([
+        "Bistrot du port — cuisine locale, réservation conseillée",
+        "Pizzeria du village — décontracté, terrasse ombragée",
+        "Marché du samedi matin — produits frais et spécialités",
+      ]),
+    ),
+    contentEn: doc(
+      heading(2, "Restaurants"),
+      paragraph("A few places we recommend, by budget:"),
+      bulletList([
+        "Harbour bistro — local cuisine, booking recommended",
+        "Village pizzeria — casual, shaded terrace",
+        "Saturday market — fresh produce and regional treats",
+      ]),
+    ),
+  },
+  transport: {
+    contentFr: doc(
+      heading(2, "Venir & repartir"),
+      paragraph("Pour vous déplacer facilement :"),
+      bulletList([
+        "Gare la plus proche — liaisons régulières vers les grandes villes",
+        "Bus — arrêt à quelques minutes à pied",
+        "Parking — place disponible sur la propriété",
+        "Taxi / VTC — nous pouvons partager nos contacts",
+      ]),
+    ),
+    contentEn: doc(
+      heading(2, "Getting here & leaving"),
+      paragraph("Getting around:"),
+      bulletList([
+        "Nearest train station — regular connections to major cities",
+        "Bus — stop a few minutes' walk away",
+        "Parking — space available on the property",
+        "Taxi / ride-hailing — we can share our contacts",
+      ]),
+    ),
+  },
+  emergencies: {
+    contentFr: doc(
+      heading(2, "Urgences"),
+      paragraph("En cas d'urgence :"),
+      bulletList([
+        "112 — numéro d'urgence européen",
+        "Médecin / pharmacie de garde — contactez-nous",
+        "Pompiers / police — composez le 112",
+      ]),
+      paragraph("Adresse du logement et codes d'accès : à compléter selon votre situation."),
+    ),
+    contentEn: doc(
+      heading(2, "Emergencies"),
+      paragraph("In an emergency:"),
+      bulletList([
+        "112 — European emergency number",
+        "Doctor / on-call pharmacy — contact us",
+        "Fire / police — dial 112",
+      ]),
+      paragraph("Property address and access codes: please complete for your guests."),
+    ),
+  },
+  empty: {
+    contentFr: doc(paragraph("")),
+    contentEn: doc(paragraph("")),
+  },
+};
+
+/** TipTap JSON presets keyed by {@link SectionContentPresetId} (sections editor design). */
+export function buildSectionTipTapPreset(preset: SectionContentPresetId): SectionTipTapPreset {
+  return PRESETS[preset] ?? PRESETS.empty;
+}

package/src/host/sections-editor-design.ts

@@ -0,0 +1,79 @@
+import type { SectionsEditorDesign } from './sections-host.types'
+
+export const sectionsEditorDesign = {
+  id: 'sections-editor-v1',
+  moduleId: 'sections',
+  layout: 'sections-split-panel',
+  gateway: {
+    listQuery: 'sections.list',
+    saveCommand: 'sections.section.save',
+    deleteCommand: 'sections.section.delete',
+    reorderCommand: 'sections.reorder',
+  },
+  createModal: {
+    titleFr: 'Nouvelle section',
+    subtitleFr: 'Choisissez un modèle pour partir vite, ou créez une section vide.',
+    titleFieldLabelFr: 'Titre',
+    titleFieldHintFr: 'Visible par le voyageur, en haut de la section.',
+    footerHintFr: 'Vous pourrez renommer et réordonner ensuite.',
+    cancelLabelFr: 'Annuler',
+    submitLabelFr: 'Créer la section',
+    defaultTemplateId: 'welcome',
+    templates: [
+      {
+        id: 'welcome',
+        icon: '👋',
+        titleFr: 'Mot de bienvenue',
+        titleEn: 'Welcome message',
+        descriptionFr: "Un paragraphe d'accueil personnalisé",
+        contentPreset: 'welcome',
+      },
+      {
+        id: 'beaches',
+        icon: '🏖️',
+        titleFr: 'Plages & criques',
+        titleEn: 'Beaches & coves',
+        descriptionFr: 'Liste de plages avec accès & distance',
+        contentPreset: 'beaches',
+      },
+      {
+        id: 'restaurants',
+        icon: '🍝',
+        titleFr: 'Nos restaurants préférés',
+        titleEn: 'Our favourite restaurants',
+        descriptionFr: 'Recommandations par budget',
+        contentPreset: 'restaurants',
+      },
+      {
+        id: 'transport',
+        icon: '🚂',
+        titleFr: 'Comment venir & repartir',
+        titleEn: 'Getting here & leaving',
+        descriptionFr: 'Train, bus, voiture, taxi',
+        contentPreset: 'transport',
+      },
+      {
+        id: 'emergencies',
+        icon: '🆘',
+        titleFr: 'Urgences & numéros utiles',
+        titleEn: 'Emergencies & useful numbers',
+        descriptionFr: '112, médecin, police',
+        contentPreset: 'emergencies',
+      },
+      {
+        id: 'empty',
+        icon: '📋',
+        titleFr: 'Vide · personnalisée',
+        titleEn: 'Empty · custom',
+        descriptionFr: "Démarrer d'une page blanche",
+        contentPreset: 'empty',
+      },
+    ],
+  },
+  emptyState: {
+    titleFr: 'Aucune section pour l’instant',
+    descriptionFr:
+      'Structurez le carnet d’accueil en blocs (plages, restaurants, consignes…) visibles par vos voyageurs dans le livret.',
+    primaryActionLabelFr: 'Créer une section',
+  },
+} satisfies SectionsEditorDesign

package/src/host/sections-host.types.ts

@@ -0,0 +1,53 @@
+export const SECTION_CONTENT_PRESET_IDS = [
+  'welcome',
+  'beaches',
+  'restaurants',
+  'transport',
+  'emergencies',
+  'empty',
+] as const
+
+export type SectionContentPresetId = (typeof SECTION_CONTENT_PRESET_IDS)[number]
+
+export type SectionTemplateId = SectionContentPresetId
+
+export type SectionsEditorEmptyStateDesign = {
+  titleFr: string
+  descriptionFr: string
+  primaryActionLabelFr: string
+}
+
+export type SectionCreateModalDesign = {
+  titleFr: string
+  subtitleFr: string
+  titleFieldLabelFr: string
+  titleFieldHintFr: string
+  footerHintFr: string
+  cancelLabelFr: string
+  submitLabelFr: string
+  defaultTemplateId: SectionTemplateId
+  templates: readonly SectionTemplateDesign[]
+}
+
+export type SectionTemplateDesign = {
+  id: SectionTemplateId
+  icon: string
+  titleFr: string
+  titleEn: string
+  descriptionFr: string
+  contentPreset: SectionContentPresetId
+}
+
+export type SectionsEditorDesign = {
+  id: 'sections-editor-v1'
+  moduleId: 'sections'
+  layout: 'sections-split-panel'
+  gateway: {
+    listQuery: 'sections.list'
+    saveCommand: 'sections.section.save'
+    deleteCommand: 'sections.section.delete'
+    reorderCommand: 'sections.reorder'
+  }
+  createModal: SectionCreateModalDesign
+  emptyState: SectionsEditorEmptyStateDesign
+}

package/src/host/sections-toast-copy.ts

@@ -0,0 +1,9 @@
+export const sectionsToastCopy = {
+  loadError: 'Impossible de charger les sections.',
+  saveError: 'Enregistrement impossible.',
+  reorderError: 'Réordonnancement impossible.',
+  createSuccess: 'Section créée.',
+  createError: 'Création impossible.',
+  deleteSuccess: 'Section supprimée.',
+  deleteError: 'Suppression impossible.',
+} as const

package/src/module.test.tsx

@@ -1,17 +1,32 @@
 import { describe, expect, it } from 'vitest'
 import { waitFor } from '@testing-library/react'
-import { assertGuestSurface, renderGuestModule } from '@portaki/sdk-test-support'
+import {
+  assertGuestSurface,
+  renderGuestModule,
+  renderHostModule,
+} from '@portaki/sdk-test-support'
 
 import moduleDef from './index'
+import { createSectionsTestHostContext } from './test/mock-host-module-context'
 
 describe('@portaki/module-sections', () => {
   it('exposes a valid guest module definition', () => {
     assertGuestSurface(moduleDef)
   })
 
-  it('renders without crashing', async () => {
-    const view =
-      moduleDef.surface === 'host' ? renderHostModule(moduleDef) : renderGuestModule(moduleDef)
+  it('renders guest surface without crashing', async () => {
+    const view = renderGuestModule(moduleDef)
+    await waitFor(() => {
+      expect(view.container).toBeTruthy()
+    })
+    view.unmount()
+  })
+
+  it('renders host surface without crashing', async () => {
+    if (moduleDef.renderHost == null) {
+      return
+    }
+    const view = renderHostModule(moduleDef, createSectionsTestHostContext())
     await waitFor(() => {
       expect(view.container).toBeTruthy()
     })

package/src/{sections-module-definition.ts → sections-module-definition.tsx}

@@ -10,11 +10,14 @@ import {
   timestamptz,
   uuid,
   uuidPrimaryKey,
+  type HostModuleContext,
   type ModuleContext,
   type PortakiFullModule,
 } from '@portaki/sdk'
 import type { ReactNode } from 'react'
 
+import { SectionsHostWorkspace } from './host/SectionsHostWorkspace'
+
 const sectionsSchema = moduleSchema([
   table('items', 't_e_module_sections_item', {
     columns: [
@@ -297,5 +300,6 @@ export function defineSectionsModule(render: (ctx: ModuleContext) => ReactNode):
     },
 
     render,
+    renderHost: (ctx: HostModuleContext) => <SectionsHostWorkspace ctx={ctx} />,
   })
 }

package/src/test/mock-host-module-context.ts

@@ -0,0 +1,35 @@
+import type { HostModuleContext, HostModuleShellComponents } from '@portaki/sdk'
+import { createMockHostModuleContext } from '@portaki/sdk-test-support'
+
+/** Stubs until published `@portaki/sdk-test-support` includes `shell` / `gateway`. */
+export const mockHostShell: HostModuleShellComponents = {
+  NotionLikeEditor: () => null,
+  HostEmptyPlaceholder: () => null,
+  HostUnderlineTabs: () => null,
+  Button: () => null,
+  Input: () => null,
+  Dialog: ({ children }) => children ?? null,
+  DialogContent: ({ children }) => children ?? null,
+  DialogHeader: ({ children }) => children ?? null,
+  DialogTitle: ({ children }) => children ?? null,
+  DialogDescription: ({ children }) => children ?? null,
+  DialogFooter: ({ children }) => children ?? null,
+  cn: (...parts) => parts.filter(Boolean).join(' '),
+  toast: { success: () => {}, error: () => {} },
+  parseTipTapDoc: () => ({ type: 'doc', content: [{ type: 'paragraph' }] }),
+  serializeTipTapDoc: (doc) => JSON.stringify(doc),
+}
+
+export function createSectionsTestHostContext(
+  overrides: Partial<HostModuleContext> = {},
+): HostModuleContext {
+  const base = createMockHostModuleContext(overrides)
+  return {
+    ...base,
+    gateway: overrides.gateway ?? base.gateway ?? {
+      query: async <T,>() => [] as T,
+      command: async () => {},
+    },
+    shell: overrides.shell ?? base.shell ?? mockHostShell,
+  }
+}