@bygghammar/cms-platform 0.1.0

package/src/html/sanitize-html.ts

@@ -0,0 +1,175 @@
+/**
+ * Small allowlist HTML sanitizer, safe to run on the server (no DOM needed).
+ *
+ * Rich-text blocks store HTML produced by the backoffice editor. Even though
+ * only staff can author it, the output is sanitized on every render so a
+ * pasted `<script>`, inline event handler or `javascript:` URL can never end
+ * up in a page.
+ */
+
+const ALLOWED_TAGS = new Set([
+  "p", "br", "hr", "span", "div",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+  "strong", "b", "em", "i", "u", "s", "del", "ins", "mark", "small",
+  "sub", "sup", "code", "pre", "kbd", "blockquote",
+  "ul", "ol", "li",
+  "a", "img", "figure", "figcaption",
+  "table", "thead", "tbody", "tfoot", "tr", "th", "td", "caption", "colgroup", "col",
+]);
+
+/** Tags whose entire contents are dropped. */
+const DROP_WITH_CONTENT = new Set([
+  "script", "style", "iframe", "object", "embed", "noscript", "template", "svg", "math",
+]);
+
+const VOID_TAGS = new Set(["br", "hr", "img", "col"]);
+
+const GLOBAL_ATTRS = new Set(["class", "style", "id", "title", "dir", "lang"]);
+const TAG_ATTRS: Record<string, Set<string>> = {
+  a: new Set(["href", "target", "rel", "download"]),
+  img: new Set(["src", "alt", "width", "height", "loading", "srcset", "sizes"]),
+  td: new Set(["colspan", "rowspan", "headers"]),
+  th: new Set(["colspan", "rowspan", "scope", "headers"]),
+  col: new Set(["span", "width"]),
+  colgroup: new Set(["span"]),
+  ol: new Set(["start", "type"]),
+};
+
+/** CSS properties the editor is allowed to emit inline. */
+const ALLOWED_CSS = new Set([
+  "color",
+  "background-color",
+  "text-align",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "line-height",
+  "letter-spacing",
+  "text-decoration",
+  "text-transform",
+  "width",
+  "height",
+  "min-width",
+  "margin",
+  "padding",
+]);
+
+const SAFE_URL = /^(https?:\/\/|mailto:|tel:|\/|#|\.\/|\.\.\/)/i;
+
+function safeUrl(raw: string): string | null {
+  const value = raw.trim().replace(/[\u0000-\u001f]/g, "");
+  if (!value) return null;
+  if (/^data:image\/(png|jpe?g|gif|webp|avif);base64,/i.test(value)) return value;
+  if (!SAFE_URL.test(value)) return null;
+  if (/^\s*javascript:/i.test(value)) return null;
+  return value;
+}
+
+function sanitizeStyle(raw: string): string {
+  const out: string[] = [];
+  for (const decl of raw.split(";")) {
+    const idx = decl.indexOf(":");
+    if (idx < 0) continue;
+    const prop = decl.slice(0, idx).trim().toLowerCase();
+    const value = decl.slice(idx + 1).trim();
+    if (!ALLOWED_CSS.has(prop)) continue;
+    if (!value || /url\s*\(|expression|javascript:|@import/i.test(value)) continue;
+    out.push(`${prop}: ${value}`);
+  }
+  return out.join("; ");
+}
+
+function escapeAttr(v: string): string {
+  return v.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+const ATTR_RE = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
+
+function sanitizeAttrs(tag: string, raw: string): string {
+  const allowed = TAG_ATTRS[tag];
+  const parts: string[] = [];
+  let m: RegExpExecArray | null;
+  ATTR_RE.lastIndex = 0;
+  while ((m = ATTR_RE.exec(raw))) {
+    const name = m[1].toLowerCase();
+    let value = m[3] ?? m[4] ?? m[5] ?? "";
+    if (name.startsWith("on")) continue;
+    if (!GLOBAL_ATTRS.has(name) && !allowed?.has(name)) continue;
+    if (name === "href" || name === "src" || name === "srcset") {
+      if (name === "srcset") continue;
+      const url = safeUrl(value);
+      if (!url) continue;
+      value = url;
+    }
+    if (name === "style") {
+      value = sanitizeStyle(value);
+      if (!value) continue;
+    }
+    if (name === "target" && value !== "_blank" && value !== "_self") continue;
+    parts.push(`${name}="${escapeAttr(value)}"`);
+  }
+  if (tag === "a") {
+    const hasBlank = /target="_blank"/.test(parts.join(" "));
+    if (hasBlank && !parts.some((p) => p.startsWith("rel="))) {
+      parts.push('rel="noopener noreferrer"');
+    }
+  }
+  if (tag === "img" && !parts.some((p) => p.startsWith("loading="))) {
+    parts.push('loading="lazy"');
+  }
+  return parts.length ? " " + parts.join(" ") : "";
+}
+
+/** Sanitize an HTML fragment down to the editor's allowlist. */
+export function sanitizeHtml(input: string | undefined | null): string {
+  if (!input) return "";
+  // Remove comments and any element whose content must go with it.
+  let html = input.replace(/<!--[\s\S]*?-->/g, "");
+  for (const tag of DROP_WITH_CONTENT) {
+    html = html.replace(new RegExp(`<${tag}[\\s\\S]*?<\\/${tag}\\s*>`, "gi"), "");
+    html = html.replace(new RegExp(`<${tag}\\b[^>]*\\/?>`, "gi"), "");
+  }
+
+  const open: string[] = [];
+  let out = "";
+  let last = 0;
+  const tagRe = /<\s*(\/)?\s*([a-zA-Z][a-zA-Z0-9-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/g;
+  let m: RegExpExecArray | null;
+
+  while ((m = tagRe.exec(html))) {
+    out += html.slice(last, m.index);
+    last = m.index + m[0].length;
+    const closing = Boolean(m[1]);
+    const tag = m[2].toLowerCase();
+    if (!ALLOWED_TAGS.has(tag)) continue;
+
+    if (closing) {
+      if (VOID_TAGS.has(tag)) continue;
+      const at = open.lastIndexOf(tag);
+      if (at < 0) continue;
+      // Close anything opened inside it, then the tag itself.
+      while (open.length > at) out += `</${open.pop()}>`;
+      continue;
+    }
+
+    if (VOID_TAGS.has(tag)) {
+      out += `<${tag}${sanitizeAttrs(tag, m[3] ?? "")} />`;
+      continue;
+    }
+    out += `<${tag}${sanitizeAttrs(tag, m[3] ?? "")}>`;
+    open.push(tag);
+  }
+  out += html.slice(last);
+  while (open.length) out += `</${open.pop()}>`;
+  return out;
+}
+
+/** Plain-text preview of rich text (used for thumbnails and summaries). */
+export function htmlToText(input: string | undefined | null): string {
+  return sanitizeHtml(input)
+    .replace(/<[^>]+>/g, " ")
+    .replace(/&nbsp;/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}

package/src/i18n/context.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import { DEFAULT_LOCALE, type Locale } from "./locales";
+import { t, tImageSrc } from "./resolve";
+import type { LocalizedImage, LocalizedString } from "./types";
+
+type LocaleContextValue = { locale: Locale };
+
+const LocaleContext = createContext<LocaleContextValue>({
+  locale: DEFAULT_LOCALE,
+});
+
+export function LocaleProvider({
+  locale = DEFAULT_LOCALE,
+  children,
+}: {
+  locale?: Locale;
+  children: ReactNode;
+}) {
+  const value = useMemo(() => ({ locale }), [locale]);
+  return (
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+  );
+}
+
+export function useLocale(): Locale {
+  return useContext(LocaleContext).locale;
+}
+
+/**
+ * Bound helpers for the current locale. Components should route
+ * every user-visible string and every image alt through these.
+ */
+export function useT() {
+  const locale = useLocale();
+  return useMemo(
+    () => ({
+      locale,
+      t: (v: LocalizedString | string | undefined | null) => t(v, locale),
+      alt: (img: LocalizedImage) => t(img.alt, locale),
+      src: (img: LocalizedImage) => tImageSrc(img, locale),
+    }),
+    [locale],
+  );
+}

package/src/i18n/index.ts

@@ -0,0 +1,6 @@
+export * from "./locales";
+export * from "./types";
+export * from "./resolve";
+export * from "./context";
+export * from "./video";
+export * from "./translations-registry";

package/src/i18n/locales.ts

@@ -0,0 +1,24 @@
+/**
+ * Supported UI locales. Swedish is the source of truth (DEFAULT_LOCALE).
+ * English is populated from Swedish via auto-translation (see
+ * `translations.generated.ts` for static content, and
+ * `translate-db.functions.ts` for CMS rows).
+ *
+ * Adding a locale is a two-step change:
+ *   1) add the code here,
+ *   2) run the translate script + admin "Translate missing → <locale>" action.
+ * No component refactor is required — every user-visible string flows
+ * through the resolver, which falls back through the generated map.
+ */
+export const SUPPORTED_LOCALES = ["sv", "en"] as const;
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+export const DEFAULT_LOCALE: Locale = "sv";
+
+export const LOCALE_LABELS: Record<Locale, string> = {
+  sv: "SV",
+  en: "EN",
+};
+
+export function isLocale(v: unknown): v is Locale {
+  return typeof v === "string" && (SUPPORTED_LOCALES as readonly string[]).includes(v);
+}

package/src/i18n/resolve.ts

@@ -0,0 +1,82 @@
+import { DEFAULT_LOCALE, type Locale } from "./locales";
+import type { Localized, LocalizedImage, LocalizedString } from "./types";
+import { getTranslationMaps } from "./translations-registry";
+
+function lookup(source: string, locale: Locale): string | undefined {
+  const { generated, overrides } = getTranslationMaps();
+  const override = overrides[source]?.[locale];
+  if (typeof override === "string") return override;
+  const auto = generated[source]?.[locale];
+  return typeof auto === "string" ? auto : undefined;
+}
+
+
+/**
+ * Resolve a localized string.
+ *
+ * Order:
+ *   1) exact value for the requested locale, if present
+ *   2) auto-translated value from the generated map, keyed by the
+ *      Swedish source string
+ *   3) the default locale
+ *   4) any defined string on the object
+ *   5) ""
+ *
+ * Accepts a plain string for dev ergonomics (returned as-is).
+ */
+export function t(
+  value: LocalizedString | string | undefined | null,
+  locale: Locale,
+  fallback: Locale = DEFAULT_LOCALE,
+): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  const direct = value[locale];
+  if (typeof direct === "string") return direct;
+  if (locale !== fallback) {
+    const sourceKey = value[fallback];
+    if (typeof sourceKey === "string") {
+      const translated = lookup(sourceKey, locale);
+      if (typeof translated === "string") return translated;
+    }
+
+  }
+  return (
+    value[fallback] ??
+    Object.values(value).find((v): v is string => typeof v === "string") ??
+    ""
+  );
+}
+
+/** Resolve any localized value with the same fallback logic. */
+export function tv<T>(
+  value: Localized<T> | undefined | null,
+  locale: Locale,
+  fallback: Locale = DEFAULT_LOCALE,
+): T | undefined {
+  if (value == null) return undefined;
+  const direct = value[locale];
+  if (direct !== undefined) return direct;
+  // String-map auto-translation fallback (used by slug maps etc.)
+  if (locale !== fallback) {
+    const src = value[fallback];
+    if (typeof src === "string") {
+      const translated = lookup(src, locale);
+      if (typeof translated === "string") return translated as unknown as T;
+    }
+
+  }
+  return (
+    value[fallback] ??
+    (Object.values(value).find((v) => v !== undefined) as T | undefined)
+  );
+}
+
+/** Resolve the correct src for a locale, falling back to shared src. */
+export function tImageSrc(
+  image: LocalizedImage,
+  locale: Locale,
+  fallback: Locale = DEFAULT_LOCALE,
+): string {
+  return tv(image.srcByLocale, locale, fallback) ?? image.src;
+}

package/src/i18n/translations-registry.ts

@@ -0,0 +1,26 @@
+import type { Locale } from "./locales";
+
+/**
+ * Per-site translation data. The package owns the resolver logic; each site
+ * owns its own generated/overridden strings and registers them at startup.
+ * This keeps content per-site while the resolution rules stay shared.
+ */
+export type TranslationMap = Record<string, Partial<Record<Locale, string>>>;
+
+let generated: TranslationMap = {};
+let overrides: TranslationMap = {};
+
+export function registerTranslations(maps: {
+  generated?: TranslationMap;
+  overrides?: TranslationMap;
+}): void {
+  if (maps.generated) generated = maps.generated;
+  if (maps.overrides) overrides = maps.overrides;
+}
+
+export function getTranslationMaps(): {
+  generated: TranslationMap;
+  overrides: TranslationMap;
+} {
+  return { generated, overrides };
+}

package/src/i18n/types.ts

@@ -0,0 +1,22 @@
+import type { Locale } from "./locales";
+
+/**
+ * A value that can differ per locale. Partial so future locales
+ * don't force backfilling every field — resolvers fall back to
+ * the default locale.
+ */
+export type Localized<T> = Partial<Record<Locale, T>>;
+export type LocalizedString = Localized<string>;
+
+/**
+ * Every user-facing image. `alt` is REQUIRED per locale for SEO
+ * and accessibility. `srcByLocale` overrides `src` when a locale
+ * needs a different asset (e.g. text baked into the image).
+ */
+export type LocalizedImage = {
+  src: string;
+  alt: LocalizedString;
+  srcByLocale?: Localized<string>;
+  width?: number;
+  height?: number;
+};

package/src/i18n/video.ts

@@ -0,0 +1,36 @@
+import type { Locale } from "./locales";
+import type { Localized, LocalizedString } from "./types";
+import { tv } from "./resolve";
+
+/**
+ * Every user-facing video. Poster alt + caption are localized so
+ * screen readers and social previews get the right language, and
+ * subtitle `tracks` are per-locale for accessibility + SEO.
+ */
+export type LocalizedVideoTrack = {
+  src: string;
+  kind: "subtitles" | "captions" | "descriptions" | "chapters" | "metadata";
+  srclang: Locale;
+  label: string;
+  default?: boolean;
+};
+
+export type LocalizedVideo = {
+  src: string;
+  srcByLocale?: Localized<string>;
+  poster?: string;
+  posterByLocale?: Localized<string>;
+  posterAlt: LocalizedString;
+  caption: LocalizedString;
+  tracks?: LocalizedVideoTrack[];
+  width?: number;
+  height?: number;
+};
+
+export function tVideoSrc(v: LocalizedVideo, locale: Locale): string {
+  return tv(v.srcByLocale, locale) ?? v.src;
+}
+
+export function tVideoPoster(v: LocalizedVideo, locale: Locale): string | undefined {
+  return tv(v.posterByLocale, locale) ?? v.poster;
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * as i18n from "./i18n";
+export * from "./i18n";
+export * from "./blocks/types";
+export * from "./blocks/icons";
+export * from "./blocks/block-props-context";

package/src/theme.css

@@ -0,0 +1,53 @@
+/**
+ * Starter theme — the design-token contract of @bygghammar/cms-platform.
+ *
+ * Every shared block and backoffice screen reads ONLY these variables, so the
+ * package never hardcodes a colour or a font. A new site copies this file into
+ * its own `src/styles.css` and overrides the values; existing sites keep the
+ * theme they already have. Renaming or removing a variable here is a breaking
+ * change for every consuming site.
+ *
+ * Neutral defaults below are intentionally colour-less so an unthemed site
+ * looks obviously unbranded rather than accidentally like another site.
+ */
+
+:root {
+  /* Typography */
+  --font-serif: ui-serif, Georgia, serif;
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
+
+  /* Radii */
+  --radius: 3px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
+
+  /* Brand palette — the five tokens blocks use for surfaces and accents */
+  --paper: oklch(0.985 0 0); /* soft off-white surface */
+  --ink: oklch(0.18 0 0); /* near-black text / dark surface */
+  --sea: oklch(0.62 0 0); /* primary brand accent */
+  --ice: oklch(0.95 0 0); /* pale tinted surface */
+  --brass: oklch(0.55 0 0); /* secondary accent */
+
+  /* shadcn/ui semantic tokens, derived from the palette above */
+  --background: var(--paper);
+  --foreground: var(--ink);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--ink);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--ink);
+  --primary: var(--sea);
+  --primary-foreground: var(--paper);
+  --secondary: oklch(0.96 0 0);
+  --secondary-foreground: var(--ink);
+  --muted: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.52 0 0);
+  --accent: var(--sea);
+  --accent-foreground: var(--paper);
+  --destructive: oklch(0.58 0.2 25);
+  --destructive-foreground: var(--paper);
+  --border: oklch(0.9 0 0);
+  --input: oklch(0.9 0 0);
+  --ring: var(--sea);
+}

package/src/ui/Lightbox.tsx

@@ -0,0 +1,69 @@
+import { lockBodyScroll } from "../util/scroll-lock";
+import { useEffect, type ReactNode } from "react";
+import { X } from "lucide-react";
+
+/**
+ * Shared site lightbox. Single source of truth for overlay behaviour:
+ * - click anywhere (backdrop *and* content) closes it
+ * - Escape closes it
+ * - body scroll is locked while open
+ * Content that must stay interactive should stop propagation itself.
+ */
+export function Lightbox({
+  open,
+  onClose,
+  label,
+  children,
+  contentClassName = "",
+  closeOnContentClick = true,
+}: {
+  open: boolean;
+  onClose: () => void;
+  label?: string;
+  children: ReactNode;
+  contentClassName?: string;
+  closeOnContentClick?: boolean;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    const unlock = lockBodyScroll();
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      unlock();
+    };
+  }, [open, onClose]);
+
+
+  if (!open) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={label}
+      onClick={onClose}
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-ink/80 backdrop-blur-md p-4 md:p-6 animate-in fade-in duration-300 cursor-pointer"
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        aria-label="Stäng"
+        className="absolute top-6 right-6 z-10 inline-flex size-11 items-center justify-center border border-paper/30 text-paper transition-colors hover:bg-paper hover:text-ink"
+      >
+        <X className="size-5" />
+      </button>
+      <div
+        onClick={closeOnContentClick ? undefined : (e) => e.stopPropagation()}
+        className={`relative animate-in zoom-in-95 duration-300 ${
+          closeOnContentClick ? "cursor-pointer" : "cursor-auto"
+        } ${contentClassName}`}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/ui/Reveal.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+export function Reveal({
+  children,
+  delay = 0,
+  className = "",
+}: {
+  children: ReactNode;
+  delay?: number;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [shown, setShown] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            setShown(true);
+            io.disconnect();
+            break;
+          }
+        }
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      style={{ transitionDelay: `${delay}ms` }}
+      className={[
+        "transition-all duration-[900ms] ease-out will-change-transform",
+        shown ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6",
+        className,
+      ].join(" ")}
+    >
+      {children}
+    </div>
+  );
+}

package/src/util/scroll-lock.ts

@@ -0,0 +1,32 @@
+/**
+ * Reference-counted body scroll lock.
+ *
+ * Multiple overlays (lightboxes, modals) can be open or transition between
+ * each other at the same time. Naive "save previous value / restore on
+ * unmount" locks break in that case: the second lock stores `hidden` as the
+ * previous value and restores it on close, leaving the page permanently
+ * unscrollable. This keeps a single counter and only restores the original
+ * value once every lock is released.
+ */
+let count = 0;
+let previousOverflow = "";
+
+export function lockBodyScroll(): () => void {
+  if (typeof document === "undefined") return () => {};
+
+  if (count === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  count += 1;
+
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    count = Math.max(0, count - 1);
+    if (count === 0) {
+      document.body.style.overflow = previousOverflow;
+    }
+  };
+}