@bygghammar/cms-platform 0.1.0

package/src/blocks/types.ts

@@ -0,0 +1,470 @@
+import type { LocalizedString } from "../i18n";
+
+/**
+ * JSON-compatible value. Declared here so the package never depends on a
+ * site's generated database types.
+ */
+export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[];
+
+export type BlockProps = { [key: string]: Json | undefined };
+
+/**
+ * A single block placed on a page or inside a global block.
+ * `props` is block-type-specific JSON; unknown/legacy blocks are ignored.
+ */
+export type BlockInstance = {
+  id: string;
+  type: string;
+  /** Editor-only label so the outline/library shows what this block actually is. */
+  name?: string;
+  props?: BlockProps;
+  visible?: boolean;
+};
+
+export type InstagramItem = {
+  id: string;
+  image?: string;
+  alt?: Partial<LocalizedString>;
+  href?: string;
+};
+
+export type InstagramProps = {
+  title?: Partial<LocalizedString>;
+  handle?: string;
+  profileHref?: string;
+  layout?: "grid" | "carousel";
+  columnsMobile?: number;
+  columnsTablet?: number;
+  columnsDesktop?: number;
+  rows?: number;
+  gap?: "none" | "sm" | "md" | "lg";
+  aspect?: "square" | "portrait" | "landscape";
+  showHeader?: boolean;
+  showOverlay?: boolean;
+  items?: InstagramItem[];
+};
+
+export type FaqItem = {
+  id: string;
+  q: LocalizedString;
+  a: LocalizedString;
+};
+
+export type FaqProps = {
+  title?: LocalizedString;
+  /** Desktop column count for the accordion list. Mobile is always 1. */
+  columns?: 1 | 2 | 3;
+  items: FaqItem[];
+};
+
+/** ---- Icon cards ---- */
+
+export type IconGridItem = {
+  id: string;
+  /** Key into BLOCK_ICONS (src/lib/blocks/icons.ts). */
+  icon?: string;
+  title?: Partial<LocalizedString>;
+  /** Small line under the title, e.g. a price. */
+  meta?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  href?: string;
+};
+
+export type IconGridProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  note?: Partial<LocalizedString>;
+  tone?: "white" | "paper" | "ice";
+  columns?: 2 | 3 | 4 | 5;
+  iconStyle?: "circle" | "plain";
+  /** Horizontal placement of the icon above the card text. Defaults to centred. */
+  iconAlign?: "left" | "center" | "right";
+  cardStyle?: "bordered" | "bare";
+  anchor?: string;
+  items?: IconGridItem[];
+};
+
+/** ---- Image marquee (two columns drifting in opposite directions) ---- */
+
+export type ImageMarqueeItem = {
+  id: string;
+  image?: string;
+  alt?: Partial<LocalizedString>;
+  /** 1-based column this image belongs to. Empty = spread across all columns. */
+  column?: number;
+};
+
+export type ImageMarqueeProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  /** Heading/body passages beside the marquee (same shape as the Prose block). */
+  items2?: ProseItem[];
+  textPosition?: "left" | "right" | "none";
+  columns?: 1 | 2 | 3;
+  firstDirection?: "up" | "down";
+  speed?: "ultra-slow" | "very-slow" | "slow" | "normal" | "fast";
+  aspect?: "portrait" | "square" | "landscape" | "mixed";
+  gap?: "sm" | "md" | "lg";
+  rounded?: boolean;
+  tone?: "white" | "paper" | "ice";
+  anchor?: string;
+  items?: ImageMarqueeItem[];
+};
+
+
+export type GlobalRefProps = {
+  sectionKey: string;
+};
+
+/** ---- Inline-editable block props (Phase 2 backoffice v2) ---- */
+
+export type CtaProps = {
+  label?: Partial<LocalizedString>;
+  href?: string;
+};
+
+export type HeroProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  primaryCta?: CtaProps;
+  secondaryCta?: CtaProps;
+  /** Desktop (default) background video URL. */
+  videoSrc?: string;
+  /** Desktop (default) poster/still image URL. */
+  posterSrc?: string;
+  /** Tablet-viewport overrides (~≤1024px). Falls back to desktop when empty. */
+  videoSrcTablet?: string;
+  posterSrcTablet?: string;
+  /** Mobile-viewport overrides (~≤640px). Falls back to tablet, then desktop. */
+  videoSrcMobile?: string;
+  posterSrcMobile?: string;
+};
+
+/** ---- Hero Section Fullscreen (image or video background) ---- */
+
+export type HeroFullProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  primaryCta?: CtaProps;
+  secondaryCta?: CtaProps;
+
+  /** Background media */
+  mediaType?: "image" | "video";
+  image?: string;
+  imageMobile?: string;
+  imageAlt?: Partial<LocalizedString>;
+  videoSrc?: string;
+  videoSrcMobile?: string;
+  /** Optional WebM variant, offered to browsers that support it. */
+  videoSrcWebm?: string;
+  videoSrcWebmMobile?: string;
+  posterSrc?: string;
+  posterSrcMobile?: string;
+  videoAutoplay?: boolean;
+  videoLoop?: boolean;
+  videoMuted?: boolean;
+
+  /** Layout & styling */
+  height?: "full" | "tall" | "medium" | "compact";
+  overlay?: "none" | "light" | "medium" | "strong" | "bottom" | "top" | "side";
+  textAlign?: "left" | "center" | "right";
+  verticalAlign?: "top" | "center" | "bottom";
+  textTone?: "light" | "dark";
+  contentWidth?: "narrow" | "normal" | "wide" | "full";
+  titleSize?: "sm" | "md" | "lg" | "xl";
+  titleFont?: "serif" | "sans";
+  titleUppercase?: boolean;
+  showScrollCue?: boolean;
+  anchor?: string;
+};
+
+
+export type IntroProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  /** Per-block image override; empty falls back to shared site content. */
+  imageSrc?: string;
+  imageAlt?: Partial<LocalizedString>;
+  /** Image shape (width:height). "auto" keeps the file's own ratio. */
+  imageAspect?: IntroImageAspect;
+  /** Image width as a percentage of its column (30–100). Default 100. */
+  imageWidth?: number;
+};
+
+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 = {
+  id: string;
+  heading?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+};
+
+export type ProseProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  layout?: "single" | "two-col";
+  tone?: "white" | "paper";
+  items?: ProseItem[];
+};
+
+export type ChecklistEntry = {
+  id: string;
+  text: Partial<LocalizedString>;
+};
+
+export type ChecklistColumn = {
+  id: string;
+  title?: Partial<LocalizedString>;
+  entries?: ChecklistEntry[];
+};
+
+export type ChecklistProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  note?: Partial<LocalizedString>;
+  tone?: "white" | "paper";
+  columns?: ChecklistColumn[];
+};
+
+/** ---- Bookable course dates (inline, per page instance) ---- */
+
+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[];
+};
+
+/** ---- Simple call-to-action banner ---- */
+
+export type CtaBannerProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  tone?: "ink" | "sea" | "paper";
+  cta?: CtaProps;
+  secondaryCta?: CtaProps;
+};
+
+/** ---- Image or video — Left/Right split section ---- */
+
+export type MediaSplitSlide = {
+  id: string;
+  image?: string;
+  alt?: Partial<LocalizedString>;
+  caption?: Partial<LocalizedString>;
+  href?: string;
+};
+
+export type MediaSplitBullet = {
+  id: string;
+  text: Partial<LocalizedString>;
+};
+
+export type MediaSplitProps = {
+  /** Preset that seeds a coherent group of layout defaults. */
+  style?: "editorial" | "compact" | "fullBleed" | "dark";
+
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  bullets?: MediaSplitBullet[];
+  cta?: CtaProps;
+  secondaryCta?: CtaProps;
+
+  /** Layout */
+  mediaSide?: "left" | "right";
+  mediaRatio?: "40" | "50" | "60";
+  align?: "top" | "center";
+  padding?: "compact" | "normal" | "spacious";
+  tone?: "white" | "paper" | "ink" | "sea";
+  fullBleed?: boolean;
+  rounded?: boolean;
+  aspect?: "square" | "portrait" | "landscape" | "wide" | "auto";
+  anchor?: string;
+
+  /** Media */
+  mediaType?: "image" | "slideshow" | "video";
+  /** Backdrop behind the media. "transparent" blends with the section. */
+  mediaBg?: "tint" | "transparent";
+  /** How the media fills its frame. "contain" suits logos. */
+  mediaFit?: "cover" | "contain";
+  image?: string;
+  imageAlt?: Partial<LocalizedString>;
+  slides?: MediaSplitSlide[];
+
+  /** Slideshow options */
+  autoplay?: boolean;
+  intervalMs?: number;
+  showDots?: boolean;
+  showArrows?: boolean;
+  loop?: boolean;
+  showCaptions?: boolean;
+
+  /** Video options */
+  videoSrc?: string;
+  posterSrc?: string;
+  videoAutoplay?: boolean;
+  videoLoop?: boolean;
+  videoMuted?: boolean;
+  videoControls?: boolean;
+};
+
+
+/** ---- Rich text (WYSIWYG) ---- */
+
+export type RichTextProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  /** Sanitized HTML per locale, produced by the backoffice editor. */
+  html?: Partial<LocalizedString>;
+  tone?: "white" | "paper" | "ice" | "ink";
+  width?: "narrow" | "normal" | "wide" | "full";
+  align?: "left" | "center";
+  padding?: "none" | "compact" | "normal" | "spacious";
+  columns?: 1 | 2;
+  dropCap?: boolean;
+  anchor?: string;
+};
+
+/** ---- Link tiles (row of linked image cards with overlay label) ---- */
+
+export type LinkTilesItem = {
+  id: string;
+  image?: string;
+  alt?: Partial<LocalizedString>;
+  eyebrow?: Partial<LocalizedString>;
+  label?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  /** Internal path (/boka) or absolute URL. */
+  href?: string;
+};
+
+export type LinkTilesProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  tone?: "white" | "paper" | "ice" | "ink";
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  aspect?: "portrait" | "square" | "landscape" | "tall";
+  overlay?: "none" | "light" | "medium" | "strong" | "brand";
+  labelAlign?: "left" | "center";
+  rounded?: boolean;
+  anchor?: string;
+  items?: LinkTilesItem[];
+};
+
+/** ---- Cabin tabs (clickable cabin categories with their own gallery) ---- */
+
+export type CabinImage = {
+  id: string;
+  src?: string;
+  alt?: Partial<LocalizedString>;
+};
+
+export type CabinTabItem = {
+  id: string;
+  /** Short tab label, e.g. "E-HYTT". */
+  label?: Partial<LocalizedString>;
+  /** Heading shown above the description (defaults to the label). */
+  title?: Partial<LocalizedString>;
+  body?: Partial<LocalizedString>;
+  bullets?: { id: string; text?: Partial<LocalizedString> }[];
+  images?: CabinImage[];
+};
+
+export type CabinTabsProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  note?: Partial<LocalizedString>;
+  tone?: "white" | "paper" | "ice";
+  anchor?: string;
+  items?: CabinTabItem[];
+};
+
+/** ---- Price table (cabin prices per person) ---- */
+
+export type PriceRow = {
+  id: string;
+  /** Left column, e.g. "4 pers". */
+  label?: Partial<LocalizedString>;
+  /** Right column, e.g. "1 395 kr". */
+  price?: Partial<LocalizedString>;
+  /** Hide this row on the site without deleting it. */
+  hidden?: boolean;
+};
+
+export type PriceGroup = {
+  id: string;
+  label?: Partial<LocalizedString>;
+  caption?: Partial<LocalizedString>;
+  highlight?: boolean;
+  rows?: PriceRow[];
+};
+
+export type PriceTableProps = {
+  eyebrow?: Partial<LocalizedString>;
+  title?: Partial<LocalizedString>;
+  lead?: Partial<LocalizedString>;
+  unitLabel?: Partial<LocalizedString>;
+  note?: Partial<LocalizedString>;
+  ctaLabel?: Partial<LocalizedString>;
+  ctaHref?: string;
+  tone?: "white" | "paper" | "ice" | "ink";
+  columns?: 2 | 3;
+  /** Horizontal alignment of heading + note/CTA. Defaults to centered. */
+  align?: "left" | "center";
+  anchor?: string;
+
+  groups?: PriceGroup[];
+};

package/src/host/index.tsx

@@ -0,0 +1,134 @@
+import type { ComponentType, ImgHTMLAttributes } from "react";
+import type { UseQueryOptions } from "@tanstack/react-query";
+
+/**
+ * Host component contract.
+ *
+ * A few primitives shared blocks and inspectors render are backed by per-site
+ * infrastructure (media library, storage uploads, focus points). The package
+ * declares the props/shapes it will use; each site registers its own
+ * implementation once at startup. That keeps media plumbing, storage and
+ * server functions per-site while block markup and inspector UI stay shared.
+ */
+
+export type HostFocalImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+  src: string | undefined;
+  /** When set, the host may build a responsive srcSet. */
+  sizes?: string;
+  responsive?: boolean;
+};
+
+export type HostLazyVideoProps = {
+  src?: string;
+  /** Optional alternative sources (e.g. WebM) tried before `src`. */
+  sources?: Array<{ src: string; type: string }>;
+  poster?: string;
+  className?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  preload?: "none" | "metadata" | "auto";
+  ariaLabel?: string;
+  playLabel?: { sv: string } & Record<string, string>;
+};
+
+/** One file in a site's media library. */
+export type HostMediaItem = {
+  name: string;
+  path: string;
+  size: number;
+  contentType: string | null;
+  updatedAt: string | null;
+  url: string;
+  uploadedBy?: string | null;
+  uploadedAt?: string | null;
+};
+
+export type HostFocusPickerProps = {
+  src: string;
+  onClose?: () => void;
+  modal?: boolean;
+  title?: string;
+};
+
+export type HostRichTextEditorProps = {
+  value: string;
+  onChange: (html: string) => void;
+  placeholder?: string;
+};
+
+export type HostMediaUpload = {
+  upload: (files: FileList | File[] | null) => Promise<string[]>;
+  uploading: boolean;
+  progress: { label: string; percent: number } | null;
+};
+
+/** Structural shape of the site's `queryOptions(...)` for its media library. */
+export type HostMediaLibraryOptions = UseQueryOptions<
+  HostMediaItem[],
+  Error,
+  HostMediaItem[],
+  readonly unknown[]
+>;
+
+export type HostComponents = {
+  FocalImage: ComponentType<HostFocalImageProps>;
+  LazyVideo: ComponentType<HostLazyVideoProps>;
+  FocusPicker: ComponentType<HostFocusPickerProps>;
+  RichTextEditor: ComponentType<HostRichTextEditorProps>;
+  /** react-query options that list the site's media library. */
+  mediaLibraryQueryOptions: HostMediaLibraryOptions;
+  /** Hook wrapping the site's upload pipeline. */
+  useMediaUpload: (existing?: HostMediaItem[]) => HostMediaUpload;
+};
+
+let hosts: Partial<HostComponents> = {};
+
+export function registerHostComponents(components: Partial<HostComponents>): void {
+  hosts = { ...hosts, ...components };
+}
+
+function missing(name: keyof HostComponents): never {
+  throw new Error(
+    `@bygghammar/cms-platform: host "${name}" is not registered. Call registerHostComponents() during site startup.`,
+  );
+}
+
+/** Focus-point aware image. Renders nothing until the site registers a host. */
+export function FocalImage(props: HostFocalImageProps) {
+  const Impl = hosts.FocalImage;
+  if (!Impl) return null;
+  return <Impl {...props} />;
+}
+
+/** Bandwidth-safe video. Renders nothing until the site registers a host. */
+export function LazyVideo(props: HostLazyVideoProps) {
+  const Impl = hosts.LazyVideo;
+  if (!Impl) return null;
+  return <Impl {...props} />;
+}
+
+/** Backoffice focus-point picker, provided by the site. */
+export function FocusPicker(props: HostFocusPickerProps) {
+  const Impl = hosts.FocusPicker;
+  if (!Impl) return null;
+  return <Impl {...props} />;
+}
+
+/** Backoffice WYSIWYG editor, provided by the site. */
+export function RichTextEditor(props: HostRichTextEditorProps) {
+  const Impl = hosts.RichTextEditor;
+  if (!Impl) return null;
+  return <Impl {...props} />;
+}
+
+export function useHostMediaLibraryOptions(): HostMediaLibraryOptions {
+  return hosts.mediaLibraryQueryOptions ?? missing("mediaLibraryQueryOptions");
+}
+
+export function useHostMediaUpload(existing: HostMediaItem[] = []): HostMediaUpload {
+  const hook = hosts.useMediaUpload;
+  if (!hook) missing("useMediaUpload");
+  return hook(existing);
+}