@bygghammar/cms-platform 0.1.1 → 0.3.0

package/README.md

@@ -9,6 +9,13 @@ future sites). **Code only** — no content, no data, no secrets, no theme.
 - `src/blocks/icons.ts` — the icon set blocks may reference
 - `src/blocks/block-props-context.tsx` — block prop plumbing for inline editing
 - `src/i18n/*` — the localization core (locales, types, resolver, context)
+- `src/backup/*` — archive/media safety, browser-side large-media export and
+  provider-neutral verification helpers
+- `src/trips/*` — reusable trips data contract, editor and legacy course-data
+  compatibility. Each host supplies its own terminology (Courses, Cruises or
+  Trips).
+- `src/navigation/*` — public and backoffice navigation contracts plus shared
+  active-state helpers. Menu content and visual headers remain per-site.
 - `src/theme.css` — the design-token contract + neutral starter theme
 
 ## What must never live here
@@ -17,6 +24,28 @@ future sites). **Code only** — no content, no data, no secrets, no theme.
 - page content, SEO copy, media, CMS page JSON
 - Supabase generated types, auth users, secrets, API keys
 - route files and per-site deployment config
+- actual navigation links, public slugs, brand-specific headers or menu styling
+- site table lists, import order, database clients, authentication and RLS
+  policies; each host supplies those adapters to the shared backup core
+
+## Backup core
+
+The package owns the CMS-wide, provider-neutral parts of backup and restore:
+
+- media signature/path validation and secret sanitising
+- streaming large media files into an archive in the authenticated browser
+- archive progress and manifest contracts
+- row-count, user/role and media verification helpers
+
+The browser media exporter accepts a host storage adapter with only `list()`
+and `download()` methods plus the host's expected archive format/schema
+versions. Keep the dynamic import behind an `import.meta.env.SSR` guard in SSR
+applications so the browser-only ZIP code cannot enter the optimized server
+chunk graph.
+
+The consuming site remains responsible for its dataset groups, table import
+order, Supabase clients, superadmin authorization, HTTP routes, audit records
+and database migrations. The package never contains site data or credentials.
 
 ## Per-site wiring
 
@@ -34,10 +63,7 @@ remove that module when the application's `package.json` declares
 `"sideEffects": false`.
 
 ```tsx
-import {
-  initializeHostComponents,
-  type HostComponents,
-} from "@bygghammar/cms-platform/host";
+import { initializeHostComponents, type HostComponents } from "@bygghammar/cms-platform/host";
 
 const HOST_COMPONENTS = {
   FocalImage,
@@ -48,9 +74,8 @@ const HOST_COMPONENTS = {
   useMediaUpload,
 } satisfies Partial<HostComponents>;
 
-export const BLOCK_REGISTRY = initializeHostComponents(
-  HOST_COMPONENTS,
-  () => createBlockRegistry(),
+export const BLOCK_REGISTRY = initializeHostComponents(HOST_COMPONENTS, () =>
+  createBlockRegistry(),
 );
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -34,10 +34,20 @@
     "./ui/Lightbox": "./src/ui/Lightbox.tsx",
     "./util/scroll-lock": "./src/util/scroll-lock.ts",
     "./html/sanitize-html": "./src/html/sanitize-html.ts",
+    "./backup": "./src/backup/index.ts",
+    "./backup/safety": "./src/backup/safety.ts",
+    "./backup/browser-media": "./src/backup/browser-media.ts",
+    "./backup/verification": "./src/backup/verification.ts",
     "./backoffice/inspectors/fields": "./src/backoffice/inspectors/fields.tsx",
     "./theme.css": "./src/theme.css",
     "./backoffice/inspectors/blocks": "./src/backoffice/inspectors/blocks.tsx",
-    "./blocks/registry": "./src/blocks/registry.tsx"
+    "./blocks/registry": "./src/blocks/registry.tsx",
+    "./trips": "./src/trips/index.ts",
+    "./trips/TripSectionEditor": "./src/trips/TripSectionEditor.tsx",
+    "./navigation": "./src/navigation/index.ts"
+  },
+  "dependencies": {
+    "fflate": "^0.8.3"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5",

package/src/backup/browser-media.ts

@@ -0,0 +1,205 @@
+import { strFromU8, strToU8, unzipSync, Zip, ZipDeflate, ZipPassThrough } from "fflate";
+
+import { hasAllowedMediaExtension, isSafeArchivePath, verifyMediaFile } from "./safety";
+
+export type BackupArchiveManifest = {
+  format: number | string;
+  schemaVersion: number | string;
+  groups: string[];
+  mediaFiles: number;
+  mediaBytes: number;
+  quarantinedMedia?: string[];
+};
+
+export type BackupStorageFile = {
+  name: string;
+  size: number;
+  contentType?: string | null;
+  updatedAt?: string | null;
+};
+
+export type BrowserBackupStorage = {
+  list(): Promise<BackupStorageFile[]>;
+  download(path: string): Promise<Uint8Array>;
+};
+
+export type MediaExportProgress = {
+  phase: "listing" | "downloading" | "finalizing";
+  completedFiles: number;
+  totalFiles: number;
+  completedBytes: number;
+  totalBytes: number;
+  currentFile?: string;
+};
+
+export type BrowserMediaExportOptions = {
+  baseArchive: Uint8Array;
+  groups: string[];
+  storage: BrowserBackupStorage;
+  expectedFormat: number | string;
+  expectedSchemaVersion: number | string;
+  onProgress?: (progress: MediaExportProgress) => void;
+};
+
+function readManifest<M extends BackupArchiveManifest>(
+  files: Record<string, Uint8Array>,
+  expectedFormat: number | string,
+  expectedSchemaVersion: number | string,
+): M {
+  const raw = files["manifest.json"];
+  if (!raw) throw new Error("The server metadata archive has no manifest.");
+
+  let manifest: M;
+  try {
+    manifest = JSON.parse(strFromU8(raw)) as M;
+  } catch {
+    throw new Error("The server metadata archive has an invalid manifest.");
+  }
+
+  if (
+    manifest.format !== expectedFormat ||
+    manifest.schemaVersion !== expectedSchemaVersion ||
+    !Array.isArray(manifest.groups)
+  ) {
+    throw new Error("The server metadata archive is not compatible with this version.");
+  }
+  return manifest;
+}
+
+function addEntry(zip: Zip, name: string, data: Uint8Array, compress: boolean): void {
+  const entry = compress ? new ZipDeflate(name, { level: 6 }) : new ZipPassThrough(name);
+  zip.add(entry);
+  entry.push(data, true);
+}
+
+function candidateMedia(files: BackupStorageFile[], quarantined: string[]): BackupStorageFile[] {
+  return files.filter((file) => {
+    if (!hasAllowedMediaExtension(file.name) || !isSafeArchivePath(file.name)) {
+      quarantined.push(file.name);
+      return false;
+    }
+    return true;
+  });
+}
+
+/**
+ * Add large media to a small server-generated metadata archive in the
+ * authenticated browser. Objects are downloaded and verified one at a time,
+ * avoiding request timeouts and all-media-in-server-memory failures.
+ */
+export async function buildBrowserMediaArchive<M extends BackupArchiveManifest>({
+  baseArchive,
+  groups,
+  storage,
+  expectedFormat,
+  expectedSchemaVersion,
+  onProgress,
+}: BrowserMediaExportOptions): Promise<{ blob: Blob; manifest: M }> {
+  const baseFiles = unzipSync(baseArchive);
+  const baseManifest = readManifest<M>(baseFiles, expectedFormat, expectedSchemaVersion);
+  const quarantined = [...(baseManifest.quarantinedMedia ?? [])];
+
+  onProgress?.({
+    phase: "listing",
+    completedFiles: 0,
+    totalFiles: 0,
+    completedBytes: 0,
+    totalBytes: 0,
+  });
+
+  const listed = await storage.list();
+  const candidates = candidateMedia(listed, quarantined);
+  const totalBytes = candidates.reduce((sum, file) => sum + Math.max(0, file.size), 0);
+  let completedFiles = 0;
+  let completedBytes = 0;
+  let archivedFiles = 0;
+  let archivedBytes = 0;
+
+  const chunks: BlobPart[] = [];
+  let resolveZip!: () => void;
+  let rejectZip!: (error: Error) => void;
+  const zipFinished = new Promise<void>((resolve, reject) => {
+    resolveZip = resolve;
+    rejectZip = reject;
+  });
+  const zip = new Zip((error, data, final) => {
+    if (error) {
+      rejectZip(error instanceof Error ? error : new Error(String(error)));
+      return;
+    }
+    if (data?.byteLength) chunks.push(data as unknown as BlobPart);
+    if (final) resolveZip();
+  });
+
+  try {
+    for (const [name, data] of Object.entries(baseFiles)) {
+      if (name === "manifest.json" || name.startsWith("media/")) continue;
+      if (!isSafeArchivePath(name)) throw new Error(`Unsafe metadata archive entry: ${name}`);
+      addEntry(zip, name, data, name.endsWith(".json"));
+    }
+
+    onProgress?.({
+      phase: "downloading",
+      completedFiles,
+      totalFiles: candidates.length,
+      completedBytes,
+      totalBytes,
+    });
+
+    for (const file of candidates) {
+      let data: Uint8Array;
+      try {
+        data = await storage.download(file.name);
+      } catch (error) {
+        throw new Error(
+          `Could not download media file “${file.name}”: ${
+            error instanceof Error ? error.message : "unknown storage error"
+          }`,
+        );
+      }
+
+      const verdict = verifyMediaFile(file.name, data);
+      if (verdict.ok) {
+        addEntry(zip, `media/${file.name}`, data, false);
+        archivedFiles += 1;
+        archivedBytes += data.byteLength;
+      } else {
+        quarantined.push(`${file.name} (${verdict.reason})`);
+      }
+
+      completedFiles += 1;
+      completedBytes += file.size > 0 ? file.size : data.byteLength;
+      onProgress?.({
+        phase: "downloading",
+        completedFiles,
+        totalFiles: candidates.length,
+        completedBytes,
+        totalBytes,
+        currentFile: file.name,
+      });
+    }
+
+    const manifest = {
+      ...baseManifest,
+      groups: [...groups],
+      mediaFiles: archivedFiles,
+      mediaBytes: archivedBytes,
+      quarantinedMedia: quarantined,
+    } as M;
+    addEntry(zip, "manifest.json", strToU8(JSON.stringify(manifest, null, 2)), true);
+    onProgress?.({
+      phase: "finalizing",
+      completedFiles,
+      totalFiles: candidates.length,
+      completedBytes,
+      totalBytes,
+    });
+    zip.end();
+    await zipFinished;
+
+    return { blob: new Blob(chunks, { type: "application/zip" }), manifest };
+  } catch (error) {
+    zip.terminate();
+    throw error;
+  }
+}

package/src/backup/index.ts

@@ -0,0 +1,3 @@
+export * from "./browser-media";
+export * from "./safety";
+export * from "./verification";

package/src/backup/safety.ts

@@ -0,0 +1,241 @@
+/**
+ * Provider-neutral backup safety helpers. Nothing in this module opens a
+ * connection or reads the filesystem, so hosts can use it in the browser,
+ * server functions and restore tools.
+ */
+
+export const ALLOWED_MEDIA_EXTENSIONS = [
+  ".webp",
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".avif",
+  ".mp4",
+  ".webm",
+  ".mov",
+  ".pdf",
+] as const;
+
+export const MAX_MEDIA_ENTRY_BYTES = 250 * 1024 * 1024;
+export const MAX_TOTAL_UNCOMPRESSED_BYTES = 8 * 1024 * 1024 * 1024;
+
+export function mediaExtension(name: string): string {
+  const dot = name.lastIndexOf(".");
+  return dot < 0 ? "" : name.slice(dot).toLowerCase();
+}
+
+export function hasAllowedMediaExtension(name: string): boolean {
+  return (ALLOWED_MEDIA_EXTENSIONS as readonly string[]).includes(mediaExtension(name));
+}
+
+export const isAllowedMediaFile = hasAllowedMediaExtension;
+
+function startsWith(bytes: Uint8Array, signature: number[], offset = 0): boolean {
+  if (bytes.length < offset + signature.length) return false;
+  for (let i = 0; i < signature.length; i += 1) {
+    if (bytes[offset + i] !== signature[i]) return false;
+  }
+  return true;
+}
+
+function ascii(bytes: Uint8Array, from: number, length: number): string {
+  let out = "";
+  for (let i = from; i < Math.min(bytes.length, from + length); i += 1) {
+    out += String.fromCharCode(bytes[i]!);
+  }
+  return out;
+}
+
+export function looksLikeMarkup(bytes: Uint8Array): boolean {
+  let index = startsWith(bytes, [0xef, 0xbb, 0xbf]) ? 3 : 0;
+  while (index < bytes.length && [0x09, 0x0a, 0x0d, 0x20].includes(bytes[index]!)) index += 1;
+  const head = ascii(bytes, index, 512).toLowerCase();
+  if (!head.startsWith("<")) return false;
+  return (
+    head.startsWith("<!doctype") ||
+    head.startsWith("<html") ||
+    head.startsWith("<head") ||
+    head.startsWith("<body") ||
+    head.startsWith("<script") ||
+    head.startsWith("<svg") ||
+    head.startsWith("<?xml") ||
+    head.startsWith("<!--")
+  );
+}
+
+export function sniffMediaType(bytes: Uint8Array): string | null {
+  if (startsWith(bytes, [0xff, 0xd8, 0xff])) return "image/jpeg";
+  if (startsWith(bytes, [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])) return "image/png";
+  if (ascii(bytes, 0, 6) === "GIF87a" || ascii(bytes, 0, 6) === "GIF89a") return "image/gif";
+  if (ascii(bytes, 0, 4) === "RIFF" && ascii(bytes, 8, 4) === "WEBP") return "image/webp";
+  if (ascii(bytes, 0, 4) === "%PDF") return "application/pdf";
+  if (startsWith(bytes, [0x1a, 0x45, 0xdf, 0xa3])) return "video/webm";
+  if (ascii(bytes, 4, 4) === "ftyp") {
+    const brand = ascii(bytes, 8, 4).toLowerCase();
+    if (brand.startsWith("avif") || brand.startsWith("avis")) return "image/avif";
+    if (brand.startsWith("qt")) return "video/quicktime";
+    return "video/mp4";
+  }
+  return null;
+}
+
+const TYPE_EXTENSIONS: Record<string, string[]> = {
+  "image/jpeg": [".jpg", ".jpeg"],
+  "image/png": [".png"],
+  "image/gif": [".gif"],
+  "image/webp": [".webp"],
+  "image/avif": [".avif"],
+  "application/pdf": [".pdf"],
+  "video/webm": [".webm"],
+  "video/mp4": [".mp4", ".mov", ".webm"],
+  "video/quicktime": [".mov", ".mp4"],
+};
+
+export type MediaVerdict = { ok: true; type: string } | { ok: false; reason: string };
+
+export function verifyMediaFile(name: string, bytes: Uint8Array): MediaVerdict {
+  const extension = mediaExtension(name);
+  if (!extension) return { ok: false, reason: "no file extension" };
+  if (!hasAllowedMediaExtension(name)) {
+    return { ok: false, reason: `extension ${extension} is not media` };
+  }
+  if (!bytes.byteLength) return { ok: false, reason: "empty file" };
+  if (bytes.byteLength > MAX_MEDIA_ENTRY_BYTES) return { ok: false, reason: "file too large" };
+  if (looksLikeMarkup(bytes)) return { ok: false, reason: "content is markup, not media" };
+  const type = sniffMediaType(bytes);
+  if (!type) return { ok: false, reason: "unrecognised file signature" };
+  if (!(TYPE_EXTENSIONS[type] ?? []).includes(extension)) {
+    return { ok: false, reason: `content is ${type} but named ${extension}` };
+  }
+  return { ok: true, type };
+}
+
+export function isSafeArchivePath(name: string): boolean {
+  if (!name || name.length > 1024) return false;
+  if (name.startsWith("/") || name.startsWith("\\")) return false;
+  if (/^[a-zA-Z]:[\\/]/.test(name)) return false;
+  if (name.includes("\\") || name.includes("\0")) return false;
+  // eslint-disable-next-line no-control-regex
+  if (/[\u0000-\u001f]/.test(name)) return false;
+  if (name.split("/").some((segment) => segment === ".." || segment === "." || segment === "")) {
+    return false;
+  }
+  return true;
+}
+
+export function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
+  const prototype = Object.getPrototypeOf(value) as object | null;
+  return prototype === Object.prototype || prototype === null;
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  let binary = "";
+  const chunkSize = 0x8000;
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    binary += String.fromCharCode(...bytes.subarray(offset, offset + chunkSize));
+  }
+  return btoa(binary);
+}
+
+export function toJsonSafe<T>(value: T): T {
+  const walk = (input: unknown): unknown => {
+    if (input === null || input === undefined) return input;
+    if (input instanceof Date) return input.toISOString();
+    if (typeof input === "bigint") return input.toString();
+    if (Array.isArray(input)) return input.map(walk);
+    if (typeof input === "object") {
+      if (input instanceof ArrayBuffer) return bytesToBase64(new Uint8Array(input));
+      if (ArrayBuffer.isView(input)) {
+        return bytesToBase64(new Uint8Array(input.buffer, input.byteOffset, input.byteLength));
+      }
+      if (!isPlainObject(input)) {
+        const maybeJson = input as { toJSON?: () => unknown };
+        if (typeof maybeJson.toJSON === "function") return walk(maybeJson.toJSON());
+        return String(input);
+      }
+      const out: Record<string, unknown> = {};
+      for (const [key, item] of Object.entries(input)) out[key] = walk(item);
+      return out;
+    }
+    if (typeof input === "number" && !Number.isFinite(input)) return null;
+    return input;
+  };
+  return walk(value) as T;
+}
+
+export function nonJsonSafePaths(value: unknown, prefix = ""): string[] {
+  const out: string[] = [];
+  const walk = (input: unknown, path: string): void => {
+    if (input === null || input === undefined) return;
+    if (input instanceof Date || typeof input === "bigint") {
+      out.push(path || "(root)");
+      return;
+    }
+    if (Array.isArray(input)) {
+      input.forEach((item, index) => walk(item, `${path}[${index}]`));
+      return;
+    }
+    if (typeof input === "object") {
+      if (!isPlainObject(input)) {
+        out.push(path || "(root)");
+        return;
+      }
+      for (const [key, item] of Object.entries(input)) walk(item, path ? `${path}.${key}` : key);
+    }
+  };
+  walk(value, prefix);
+  return out;
+}
+
+const SECRET_KEY_RE =
+  /(password|passwd|secret|token|api[_-]?key|apikey|private[_-]?key|credential|client[_-]?secret|access[_-]?key|authorization)/i;
+const SECRET_NAME_KEY_RE = /(secret_name|secret_ref_name|_secret_ref|ref_name|key_id|_name)$/i;
+
+export function sanitizeSecrets<T>(value: T): T {
+  const walk = (input: unknown): unknown => {
+    if (input instanceof Date) return input.toISOString();
+    if (Array.isArray(input)) return input.map(walk);
+    if (input && typeof input === "object") {
+      if (!isPlainObject(input)) return toJsonSafe(input);
+      const out: Record<string, unknown> = {};
+      for (const [key, item] of Object.entries(input)) {
+        out[key] =
+          SECRET_KEY_RE.test(key) && !SECRET_NAME_KEY_RE.test(key) && item != null
+            ? null
+            : walk(item);
+      }
+      return out;
+    }
+    return toJsonSafe(input);
+  };
+  return walk(value) as T;
+}
+
+export const HOSTED_MEDIA_URL_RE =
+  /https?:\/\/[a-z0-9-]+\.supabase\.co\/storage\/v1\/object\/public\/media\//gi;
+
+export function rewriteMediaUrls<T>(value: T, base: string): T {
+  const prefix = base.endsWith("/") ? base : `${base}/`;
+  const walk = (input: unknown): unknown => {
+    if (typeof input === "string") return input.replace(HOSTED_MEDIA_URL_RE, prefix);
+    if (Array.isArray(input)) return input.map(walk);
+    if (input && typeof input === "object") {
+      const out: Record<string, unknown> = {};
+      for (const [key, item] of Object.entries(input as Record<string, unknown>)) {
+        out[key] = walk(item);
+      }
+      return out;
+    }
+    return input;
+  };
+  return walk(value) as T;
+}
+
+export function neutralizeInjection<T extends Record<string, unknown>>(
+  row: T,
+  keepEnabled: boolean,
+): T {
+  return keepEnabled ? row : { ...row, enabled: false };
+}

package/src/backup/verification.ts

@@ -0,0 +1,80 @@
+import { HOSTED_MEDIA_URL_RE } from "./safety";
+
+export type UserRow = { id: string; email: string | null };
+export type RoleRow = { user_id: string; role: string };
+
+export function compareCounts(
+  expected: Record<string, number>,
+  actual: Record<string, number>,
+  insertOnly: string[] = [],
+): string[] {
+  const problems: string[] = [];
+  for (const [table, wanted] of Object.entries(expected)) {
+    const found = actual[table];
+    if (found == null) problems.push(`${table}: table missing in target`);
+    else if (found !== wanted && !(insertOnly.includes(table) && found > wanted)) {
+      problems.push(`${table}: expected ${wanted} rows, found ${found}`);
+    }
+  }
+  return problems;
+}
+
+export function compareUsersAndRoles(
+  expectedUsers: UserRow[],
+  expectedRoles: RoleRow[],
+  actualUsers: UserRow[],
+  actualRoles: RoleRow[],
+): string[] {
+  const problems: string[] = [];
+  const actualById = new Map(actualUsers.map((user) => [user.id, user]));
+  for (const user of expectedUsers) {
+    const found = actualById.get(user.id);
+    if (!found) problems.push(`user ${user.id} is missing`);
+    else if ((found.email ?? null) !== (user.email ?? null)) {
+      problems.push(`user ${user.id} has a different email`);
+    }
+  }
+  const key = (role: RoleRow) => `${role.user_id}:${role.role}`;
+  const actualRoleSet = new Set(actualRoles.map(key));
+  for (const role of expectedRoles) {
+    if (!actualRoleSet.has(key(role))) {
+      problems.push(`role ${role.role} for ${role.user_id} is missing`);
+    }
+  }
+  for (const role of actualRoles.filter((item) => !actualById.has(item.user_id))) {
+    problems.push(`role ${role.role} references unknown user ${role.user_id}`);
+  }
+  return problems;
+}
+
+export function findHostedMediaUrls(rows: { table: string; json: string }[]): string[] {
+  const problems: string[] = [];
+  for (const row of rows) {
+    const expression = new RegExp(HOSTED_MEDIA_URL_RE.source, "gi");
+    const match = expression.exec(row.json);
+    if (match) problems.push(`${row.table}: still references ${match[0]}`);
+  }
+  return problems;
+}
+
+export function findMissingMedia(expected: string[], present: Set<string>): string[] {
+  return expected
+    .filter((path) => !present.has(path))
+    .map((path) => `media file missing on disk: ${path}`);
+}
+
+export type VerifyReport = { checks: { name: string; problems: string[] }[] };
+
+export function reportOk(report: VerifyReport): boolean {
+  return report.checks.every((check) => check.problems.length === 0);
+}
+
+export function formatReport(report: VerifyReport): string {
+  const lines: string[] = [];
+  for (const check of report.checks) {
+    lines.push(`[${check.problems.length === 0 ? "PASS" : "FAIL"}] ${check.name}`);
+    for (const problem of check.problems) lines.push(`        - ${problem}`);
+  }
+  lines.push(reportOk(report) ? "\nVerification passed." : "\nVerification FAILED.");
+  return lines.join("\n");
+}

package/src/blocks/types.ts

@@ -113,7 +113,6 @@ export type ImageMarqueeProps = {
   items?: ImageMarqueeItem[];
 };
 
-
 export type GlobalRefProps = {
   sectionKey: string;
 };
@@ -182,7 +181,6 @@ export type HeroFullProps = {
   anchor?: string;
 };
 
-
 export type IntroProps = {
   eyebrow?: Partial<LocalizedString>;
   title?: Partial<LocalizedString>;
@@ -196,18 +194,10 @@ export type IntroProps = {
   imageWidth?: number;
 };
 
-export const INTRO_IMAGE_ASPECTS = [
-  "4/5",
-  "1/1",
-  "3/4",
-  "3/2",
-  "16/9",
-  "auto",
-] as const;
+export const INTRO_IMAGE_ASPECTS = ["4/5", "1/1", "3/4", "3/2", "16/9", "auto"] as const;
 
 export type IntroImageAspect = (typeof INTRO_IMAGE_ASPECTS)[number];
 
-
 /** ---- Long-form editorial blocks ---- */
 
 export type ProseItem = {
@@ -244,43 +234,9 @@ export type ChecklistProps = {
   columns?: ChecklistColumn[];
 };
 
-/** ---- Bookable course dates (inline, per page instance) ---- */
+/** ---- Bookable trips (inline or sourced from the shared trips section) ---- */
 
-export type CourseListItem = {
-  id: string;
-  /** Season/year used to group and filter courses (e.g. "2026"). */
-  year?: string;
-  courseNo?: Partial<LocalizedString>;
-  location?: Partial<LocalizedString>;
-  dates?: Partial<LocalizedString>;
-  accommodation?: Partial<LocalizedString>;
-  price?: Partial<LocalizedString>;
-  oldPrice?: Partial<LocalizedString>;
-  badge?: Partial<LocalizedString>;
-  bookLabel?: Partial<LocalizedString>;
-  bookUrl?: string;
-  featured?: boolean;
-};
-
-export type CourseListProps = {
-  eyebrow?: Partial<LocalizedString>;
-  title?: Partial<LocalizedString>;
-  lead?: Partial<LocalizedString>;
-  note?: Partial<LocalizedString>;
-  tone?: "white" | "paper";
-  columns?: 2 | 3 | 4;
-  anchor?: string;
-  /**
-   * Where the courses come from.
-   * "global" (default) = the single source of truth in the backoffice
-   * (Courses section), optionally filtered by `year`.
-   * "custom" = items edited inline on this block only (legacy).
-   */
-  source?: "global" | "custom";
-  /** Only used with source="global": show courses of this year. */
-  year?: string;
-  items?: CourseListItem[];
-};
+export type { CourseListItem, CourseListProps, TripItem, TripListProps } from "../trips";
 
 /** ---- Simple call-to-action banner ---- */
 
@@ -358,7 +314,6 @@ export type MediaSplitProps = {
   videoControls?: boolean;
 };
 
-
 /** ---- Rich text (WYSIWYG) ---- */
 
 export type RichTextProps = {

package/src/index.ts

@@ -3,3 +3,5 @@ export * from "./i18n";
 export * from "./blocks/types";
 export * from "./blocks/icons";
 export * from "./blocks/block-props-context";
+export * from "./trips";
+export * from "./navigation";

package/src/navigation/index.ts

@@ -0,0 +1,41 @@
+import type { ComponentType } from "react";
+
+import type { LocalizedString } from "../i18n/types";
+
+export type NavigationItem = {
+  label: LocalizedString;
+  href: string;
+  children?: NavigationItem[];
+};
+
+export type BackofficeNavigationItem<TIconProps = { className?: string }> = {
+  key: string;
+  to: string;
+  label: string;
+  icon: ComponentType<TIconProps>;
+  exact?: boolean;
+};
+
+export function defineNavigation<const T extends readonly NavigationItem[]>(items: T): T {
+  return items;
+}
+
+export function defineBackofficeNavigation<
+  TIconProps,
+  const T extends readonly BackofficeNavigationItem<TIconProps>[],
+>(items: T): T {
+  return items;
+}
+
+export function isBackofficeNavigationActive(
+  pathname: string,
+  item: Pick<BackofficeNavigationItem, "to" | "exact">,
+): boolean {
+  return item.exact
+    ? pathname === item.to
+    : pathname === item.to || pathname.startsWith(`${item.to}/`);
+}
+
+export function navigationPanelId(href: string): string {
+  return `nav-sub-${href.replace(/\W+/g, "-")}`;
+}

package/src/trips/TripSectionEditor.tsx

@@ -0,0 +1,279 @@
+import { ArrowDown, ArrowUp, Plus, Save, Star, StarOff, Trash2 } from "lucide-react";
+
+import type { Locale } from "../i18n/locales";
+import type { LocalizedString } from "../i18n/types";
+import type { TripItem, TripSection, TripTerminology } from ".";
+import { tripNumber, withTripNumber } from ".";
+
+export type TripSectionEditorProps = {
+  value: TripSection;
+  terminology: TripTerminology;
+  onChange: (value: TripSection) => void;
+  onSave: () => void | Promise<void>;
+  saving?: boolean;
+  locale?: Locale;
+};
+
+function localizedValue(value: Partial<LocalizedString> | undefined, locale: Locale): string {
+  return value?.[locale] ?? "";
+}
+
+function localizedPatch(
+  value: Partial<LocalizedString> | undefined,
+  locale: Locale,
+  next: string,
+): Partial<LocalizedString> {
+  return { ...value, [locale]: next };
+}
+
+export function TripSectionEditor({
+  value,
+  terminology,
+  onChange,
+  onSave,
+  saving = false,
+  locale = "sv",
+}: TripSectionEditorProps) {
+  const update = (patch: Partial<TripSection>) => onChange({ ...value, ...patch });
+  const updateItem = (index: number, patch: Partial<TripItem>) => {
+    const items = value.items.slice();
+    items[index] = { ...items[index], ...patch };
+    update({ items });
+  };
+  const removeItem = (index: number) => {
+    update({ items: value.items.filter((_, itemIndex) => itemIndex !== index) });
+  };
+  const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= value.items.length) return;
+    const items = value.items.slice();
+    [items[index], items[target]] = [items[target], items[index]];
+    update({ items });
+  };
+  const addItem = () => {
+    const number = value.items.length + 1;
+    const year = String(new Date().getFullYear());
+    update({
+      items: [
+        ...value.items,
+        {
+          id: `t${year}-${String(number).padStart(2, "0")}`,
+          year,
+          tripNo: { [locale]: `${terminology.singular} ${number}` },
+          location: { [locale]: terminology.defaultLocation ?? "" },
+          dates: { [locale]: "" },
+          accommodation: { [locale]: terminology.defaultAccommodation ?? "" },
+          price: { [locale]: "" },
+          oldPrice: { [locale]: "" },
+          bookUrl: "",
+        },
+      ],
+    });
+  };
+
+  return (
+    <div className="w-full">
+      <h1 className="font-serif text-3xl text-ink md:text-4xl">{terminology.plural}</h1>
+      <p className="mt-3 max-w-2xl text-ink/65">{terminology.description}</p>
+
+      <div className="mt-8 grid items-start gap-4 md:grid-cols-2">
+        <EditorField
+          label="Title"
+          value={localizedValue(value.title, locale)}
+          onChange={(next) => update({ title: localizedPatch(value.title, locale, next) })}
+        />
+        <EditorField
+          label="Eyebrow"
+          value={localizedValue(value.eyebrow, locale)}
+          onChange={(next) => update({ eyebrow: localizedPatch(value.eyebrow, locale, next) })}
+        />
+        <label className="block md:col-span-2">
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">Intro</span>
+          <textarea
+            className="mt-2 min-h-[80px] w-full border border-ink/15 bg-white px-4 py-3"
+            value={localizedValue(value.body, locale)}
+            onChange={(event) =>
+              update({ body: localizedPatch(value.body, locale, event.target.value) })
+            }
+          />
+        </label>
+        <EditorField
+          label="Autoplay (ms)"
+          type="number"
+          value={String(value.autoplayMs)}
+          onChange={(next) => update({ autoplayMs: Number(next) || 0 })}
+        />
+      </div>
+
+      <div className="mt-10 space-y-4">
+        {value.items.map((item, index) => (
+          <div key={item.id ?? index} className="border border-ink/10 bg-white p-5">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-2 text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">
+                <span>#{index + 1}</span>
+                {item.id ? (
+                  <span className="border border-ink/15 px-1.5 py-0.5 normal-case tracking-normal text-ink/70">
+                    {item.id}
+                  </span>
+                ) : null}
+              </div>
+              <div className="flex items-center gap-1">
+                <IconButton label="Move up" disabled={index === 0} onClick={() => move(index, -1)}>
+                  <ArrowUp className="size-4" />
+                </IconButton>
+                <IconButton
+                  label="Move down"
+                  disabled={index === value.items.length - 1}
+                  onClick={() => move(index, 1)}
+                >
+                  <ArrowDown className="size-4" />
+                </IconButton>
+                <IconButton
+                  label={`Mark ${terminology.singular.toLowerCase()} as featured`}
+                  onClick={() => updateItem(index, { featured: !item.featured })}
+                  className={item.featured ? "text-sea" : "text-ink/40"}
+                >
+                  {item.featured ? <Star className="size-4" /> : <StarOff className="size-4" />}
+                </IconButton>
+                <IconButton
+                  label={`Delete ${terminology.singular.toLowerCase()}`}
+                  onClick={() => removeItem(index)}
+                  className="text-red-600 hover:bg-red-50"
+                >
+                  <Trash2 className="size-4" />
+                </IconButton>
+              </div>
+            </div>
+
+            <div className="mt-4 grid gap-3 md:grid-cols-3">
+              <EditorField
+                label="ID (stable key)"
+                value={item.id ?? ""}
+                onChange={(next) => updateItem(index, { id: next })}
+              />
+              <EditorField
+                label="Year"
+                value={item.year ?? ""}
+                onChange={(next) => updateItem(index, { year: next })}
+              />
+              <EditorField
+                label={terminology.number}
+                value={localizedValue(tripNumber(item), locale)}
+                onChange={(next) =>
+                  updateItem(
+                    index,
+                    withTripNumber(item, localizedPatch(tripNumber(item), locale, next)),
+                  )
+                }
+              />
+              <EditorField
+                label={terminology.location}
+                value={localizedValue(item.location, locale)}
+                onChange={(next) =>
+                  updateItem(index, { location: localizedPatch(item.location, locale, next) })
+                }
+              />
+              <EditorField
+                label={terminology.dates}
+                value={localizedValue(item.dates, locale)}
+                onChange={(next) =>
+                  updateItem(index, { dates: localizedPatch(item.dates, locale, next) })
+                }
+              />
+              <EditorField
+                label={terminology.accommodation}
+                value={localizedValue(item.accommodation, locale)}
+                onChange={(next) =>
+                  updateItem(index, {
+                    accommodation: localizedPatch(item.accommodation, locale, next),
+                  })
+                }
+              />
+              <EditorField
+                label="Price"
+                value={localizedValue(item.price, locale)}
+                onChange={(next) =>
+                  updateItem(index, { price: localizedPatch(item.price, locale, next) })
+                }
+              />
+              <EditorField
+                label="Regular price"
+                value={localizedValue(item.oldPrice, locale)}
+                onChange={(next) =>
+                  updateItem(index, { oldPrice: localizedPatch(item.oldPrice, locale, next) })
+                }
+              />
+              <EditorField
+                label="Booking URL"
+                value={item.bookUrl ?? ""}
+                onChange={(next) => updateItem(index, { bookUrl: next })}
+                span={3}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 flex flex-wrap items-center gap-3">
+        <button
+          type="button"
+          onClick={addItem}
+          className="inline-flex items-center gap-2 border border-ink/20 px-5 py-2.5 text-xs uppercase tracking-[0.22em] hover:border-ink"
+        >
+          <Plus className="size-4" /> Add {terminology.singular.toLowerCase()}
+        </button>
+        <button
+          type="button"
+          onClick={() => void onSave()}
+          disabled={saving}
+          className="inline-flex items-center gap-2 bg-ink px-6 py-3 text-xs uppercase tracking-[0.22em] text-paper hover:bg-ink/85 disabled:opacity-50"
+        >
+          <Save className="size-4" /> {saving ? "Saving…" : "Save all changes"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function IconButton({
+  label,
+  className = "",
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { label: string }) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      className={`p-2 hover:bg-ink/5 disabled:opacity-30 ${className}`}
+      {...props}
+    />
+  );
+}
+
+function EditorField({
+  label,
+  value,
+  onChange,
+  span,
+  type = "text",
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  span?: 1 | 2 | 3;
+  type?: "text" | "number";
+}) {
+  const className = span === 3 ? "md:col-span-3" : span === 2 ? "md:col-span-2" : "";
+  return (
+    <label className={`block ${className}`}>
+      <span className="text-[0.65rem] uppercase tracking-[0.22em] text-ink/55">{label}</span>
+      <input
+        type={type}
+        min={type === "number" ? 0 : undefined}
+        className="mt-2 w-full border border-ink/15 bg-white px-3 py-2 text-sm"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </label>
+  );
+}

package/src/trips/index.ts

@@ -0,0 +1,90 @@
+import type { LocalizedString } from "../i18n/types";
+
+export const TRIPS_SECTION_KEY = "trips" as const;
+export const LEGACY_TRIPS_SECTION_KEY = "packages" as const;
+
+export type TripItem = {
+  id?: string;
+  year?: string;
+  tripNo?: Partial<LocalizedString>;
+  /** @deprecated Read-only compatibility with CMS data created before the trips module. */
+  courseNo?: Partial<LocalizedString>;
+  location?: Partial<LocalizedString>;
+  dates?: Partial<LocalizedString>;
+  accommodation?: Partial<LocalizedString>;
+  price?: Partial<LocalizedString>;
+  oldPrice?: Partial<LocalizedString>;
+  badge?: Partial<LocalizedString>;
+  bookLabel?: Partial<LocalizedString>;
+  bookUrl?: string;
+  featured?: boolean;
+};
+
+export type TripSection = {
+  eyebrow: Partial<LocalizedString>;
+  id: string;
+  title: Partial<LocalizedString>;
+  body: Partial<LocalizedString>;
+  autoplayMs: number;
+  items: TripItem[];
+};
+
+export type TripListProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  note?: Partial<LocalizedString>;
+  tone?: "white" | "paper";
+  columns?: 2 | 3 | 4;
+  anchor?: string;
+  source?: "global" | "custom";
+  year?: string;
+  items?: TripItem[];
+};
+
+export type TripTerminology = {
+  singular: string;
+  plural: string;
+  number: string;
+  dates: string;
+  location: string;
+  accommodation: string;
+  description: string;
+  defaultLocation?: string;
+  defaultAccommodation?: string;
+};
+
+export function defineTripTerminology(terminology: TripTerminology): TripTerminology {
+  return terminology;
+}
+
+export function tripNumber(item: Pick<TripItem, "tripNo" | "courseNo">): Partial<LocalizedString> {
+  return item.tripNo ?? item.courseNo ?? {};
+}
+
+export function withTripNumber(item: TripItem, value: Partial<LocalizedString>): TripItem {
+  return { ...item, tripNo: value };
+}
+
+type SectionSources = Record<string, unknown> | null | undefined;
+
+/**
+ * Resolve the new trips key first, then the legacy packages key. This keeps
+ * existing CMS rows readable while every new save is written as `trips`.
+ */
+export function resolveTripSection<T extends TripSection>(
+  overrides: SectionSources,
+  site: SectionSources,
+  fallback: T,
+): T {
+  return (overrides?.[TRIPS_SECTION_KEY] ??
+    overrides?.[LEGACY_TRIPS_SECTION_KEY] ??
+    site?.[TRIPS_SECTION_KEY] ??
+    site?.[LEGACY_TRIPS_SECTION_KEY] ??
+    fallback) as T;
+}
+
+/** @deprecated Use TripItem. */
+export type CourseListItem = TripItem;
+/** @deprecated Use TripListProps. */
+export type CourseListProps = TripListProps;