fix(portal,backoffice): six reported issues in registration and the designer

Seafarer and vessel registration were filtered out of the operations
step by `requiresOperatorMode !== false`, so someone registering as a
seafarer or vessel owner landed on an onboarding screen that did not
describe them. Both now appear, grouped apart from the company modes:
declaring "I am a seafarer" is a different kind of statement from "my
company forwards freight".

The designer's preview was gated on the Handlebars source alone, which a
canvas layout does not have until the server compiles it on save -- so
the button was dead for exactly the designs the canvas exists for.

Editing looked broken rather than deliberately read-only: every seeded
template is PUBLISHED, and a published design is immutable because
certificates were issued from it. Says so, and offers the new-version
action that is the way forward.

Reviewing officers saw company, capital and staff tabs on seafarer
certificate applications, because PRESENTATION is keyed by the generic
licence keys and the fifty-odd rank-specific CoC/CoP keys fell through
to the company default. Matched by prefix instead, so a certificate
configured tomorrow gets the right presentation without a code change.

Seaman book and BTC are wired to the newly seeded licence types and no
longer marked "soon".

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/backoffice/src/app/features/certificate-designer/hooks/useTemplateDraft.ts

@@ -1,5 +1,14 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type { LicenseTemplate } from '@ema-platform/api';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type {
+  LicenseTemplate,
+  TemplateFieldPlacement,
+  TemplateLogoPlacement,
+} from '@ema-platform/api';
+
+/** Stable ids for new blocks; `crypto.randomUUID` is not in every test env. */
+function blockId(): string {
+  return `blk_${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36)}`;
+}
 
 /**
  * Editor state for the selected version.
@@ -14,6 +23,10 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
   const [name, setName] = useState('');
   const [landscape, setLandscape] = useState(true);
   const [backgroundUrl, setBackgroundUrl] = useState('');
+  const [logoUrl, setLogoUrl] = useState('');
+  const [logoPlacement, setLogoPlacement] = useState<TemplateLogoPlacement>({});
+  const [placements, setPlacements] = useState<TemplateFieldPlacement[]>([]);
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
   const editorRef = useRef<HTMLTextAreaElement>(null);
 
   const selected = useMemo(
@@ -37,15 +50,65 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
     setName(selected.name);
     setLandscape(selected.pageOptions?.landscape ?? true);
     setBackgroundUrl(selected.backgroundUrl ?? '');
+    setLogoUrl(selected.logoUrl ?? '');
+    setLogoPlacement(selected.logoPlacement ?? {});
+    setPlacements(selected.fieldPlacements ?? []);
+    setSelectedBlockId(null);
   }, [selected]);
 
   const isPublished = selected?.status === 'PUBLISHED';
+
+  // Compared as JSON because both are plain data the server round-trips; a
+  // reference check would mark the draft dirty on every render.
+  const placementsChanged =
+    JSON.stringify(placements) !== JSON.stringify(selected?.fieldPlacements ?? []);
+  const logoPlacementChanged =
+    JSON.stringify(logoPlacement) !== JSON.stringify(selected?.logoPlacement ?? {});
+
   const dirty =
     Boolean(selected) &&
     (source !== selected?.hbsSource ||
       name !== selected?.name ||
       landscape !== (selected?.pageOptions?.landscape ?? true) ||
-      backgroundUrl !== (selected?.backgroundUrl ?? ''));
+      backgroundUrl !== (selected?.backgroundUrl ?? '') ||
+      logoUrl !== (selected?.logoUrl ?? '') ||
+      logoPlacementChanged ||
+      placementsChanged);
+
+  /** True once the canvas owns the layout, which locks the raw editor. */
+  const usesCanvas = placements.length > 0;
+
+  const selectedBlock =
+    placements.find((block) => block.id === selectedBlockId) ?? null;
+
+  /** Drops a new block near the top-left, where it is immediately visible. */
+  const addBlock = useCallback((variable: string | null, text?: string) => {
+    const block: TemplateFieldPlacement = {
+      id: blockId(),
+      variable,
+      text,
+      xPct: 10,
+      yPct: 10,
+      widthPct: 30,
+      fontSize: 14,
+      fontWeight: 'normal',
+      align: 'left',
+      color: '#111111',
+    };
+    setPlacements((prev) => [...prev, block]);
+    setSelectedBlockId(block.id);
+  }, []);
+
+  const updateBlock = useCallback((next: TemplateFieldPlacement) => {
+    setPlacements((prev) =>
+      prev.map((block) => (block.id === next.id ? next : block)),
+    );
+  }, []);
+
+  const deleteBlock = useCallback((id: string) => {
+    setPlacements((prev) => prev.filter((block) => block.id !== id));
+    setSelectedBlockId((current) => (current === id ? null : current));
+  }, []);
 
   /** Inserts a placeholder where the caret is, rather than at the end. */
   function insertVariable(key: string) {
@@ -76,6 +139,19 @@ export function useTemplateDraft(templates: LicenseTemplate[]) {
     setLandscape,
     backgroundUrl,
     setBackgroundUrl,
+    logoUrl,
+    setLogoUrl,
+    logoPlacement,
+    setLogoPlacement,
+    placements,
+    setPlacements,
+    selectedBlockId,
+    setSelectedBlockId,
+    selectedBlock,
+    usesCanvas,
+    addBlock,
+    updateBlock,
+    deleteBlock,
     editorRef,
     isPublished,
     dirty,