@bygghammar/cms-platform 0.2.0 → 0.3.1

package/README.md

@@ -11,6 +11,11 @@ future sites). **Code only** — no content, no data, no secrets, no theme.
 - `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
@@ -19,6 +24,7 @@ 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
 
@@ -37,6 +43,11 @@ 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.
 
+Individual media downloads are retried before an export is stopped. Public
+media-bucket adapters should also fall back to the object's public URL when an
+authenticated Storage download fails, so one transient large-file request
+cannot discard an otherwise valid archive.
+
 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "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,
@@ -41,7 +41,10 @@
     "./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"

package/src/backup/browser-media.ts

@@ -41,6 +41,23 @@ export type BrowserMediaExportOptions = {
   onProgress?: (progress: MediaExportProgress) => void;
 };
 
+const MEDIA_DOWNLOAD_ATTEMPTS = 3;
+
+async function downloadWithRetry(storage: BrowserBackupStorage, path: string): Promise<Uint8Array> {
+  let lastError: unknown;
+  for (let attempt = 1; attempt <= MEDIA_DOWNLOAD_ATTEMPTS; attempt += 1) {
+    try {
+      return await storage.download(path);
+    } catch (error) {
+      lastError = error;
+      if (attempt < MEDIA_DOWNLOAD_ATTEMPTS) {
+        await new Promise((resolve) => setTimeout(resolve, attempt * 250));
+      }
+    }
+  }
+  throw lastError;
+}
+
 function readManifest<M extends BackupArchiveManifest>(
   files: Record<string, Uint8Array>,
   expectedFormat: number | string,
@@ -149,7 +166,7 @@ export async function buildBrowserMediaArchive<M extends BackupArchiveManifest>(
     for (const file of candidates) {
       let data: Uint8Array;
       try {
-        data = await storage.download(file.name);
+        data = await downloadWithRetry(storage, file.name);
       } catch (error) {
         throw new Error(
           `Could not download media file “${file.name}”: ${

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;