@xiwebdesign/xicms-core 4.17.1

package/dist/components/News.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { collection, getDocs, limit as fbLimit, onSnapshot, orderBy, query, where } from "firebase/firestore";
+import { getDb } from "../firebase/client";
+import { useSiteConfig } from "../config";
+import DOMPurify from "dompurify";
+import { useAuth } from "../auth/AuthProvider";
+import { canEdit } from "../auth/roles";
+import { isDemoActive, getDemoNews } from "../demo/demoStore";
+import { Img } from "../media/ImageContext";
+function useNews(opts = {}) {
+  const { siteId } = useSiteConfig();
+  const { role } = useAuth();
+  const editor = canEdit(role);
+  const [articles, setArticles] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const onlyPublished = opts.onlyPublished ?? !editor;
+  const live = opts.live ?? editor;
+  const cap = Math.min(opts.max ?? 50, 50);
+  useEffect(() => {
+    if (isDemoActive()) {
+      const all = getDemoNews(siteId);
+      setArticles((onlyPublished ? all.filter((a) => a.published) : all).slice(0, cap));
+      setLoading(false);
+      return;
+    }
+    const db = getDb();
+    if (!db) {
+      setLoading(false);
+      return;
+    }
+    const base = collection(db, "sites", siteId, "news");
+    const q = onlyPublished ? query(base, where("published", "==", true), orderBy("date", "desc"), fbLimit(cap)) : query(base, orderBy("date", "desc"), fbLimit(cap));
+    const map = (snap) => setArticles(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
+    if (!live) {
+      let active = true;
+      getDocs(q).then((snap) => {
+        if (active) {
+          map(snap);
+          setLoading(false);
+        }
+      }).catch(() => active && setLoading(false));
+      return () => {
+        active = false;
+      };
+    }
+    const unsub = onSnapshot(
+      q,
+      (snap) => {
+        map(snap);
+        setLoading(false);
+      },
+      () => setLoading(false)
+    );
+    return () => unsub();
+  }, [siteId, onlyPublished, live, cap]);
+  return { articles, loading };
+}
+function NewsList({ basePath = "/nieuws", className, emptyLabel = "Nog geen nieuws.", limit, pageSize }) {
+  const { articles, loading } = useNews({ max: limit });
+  const paged = typeof pageSize === "number" && pageSize > 0;
+  const [visible, setVisible] = useState(paged ? pageSize : Infinity);
+  if (loading) return /* @__PURE__ */ jsx("p", { children: "Nieuws laden\u2026" });
+  if (articles.length === 0) return /* @__PURE__ */ jsx("p", { children: emptyLabel });
+  const all = typeof limit === "number" ? articles.slice(0, limit) : articles;
+  const shown = paged ? all.slice(0, visible) : all;
+  return /* @__PURE__ */ jsxs("div", { className, style: { display: "grid", gap: "1rem" }, children: [
+    shown.map((a, i) => /* @__PURE__ */ jsxs("article", { className: "xicms-card", style: { padding: "1.25rem" }, children: [
+      a.coverUrl && // Eerste cover boven de vouw = vaak de LCP → priority (geen lazy-load-vertraging).
+      /* @__PURE__ */ jsx(Img, { src: a.coverUrl, alt: "", width: 1200, height: 700, sizes: "(max-width: 720px) 100vw, 33vw", priority: i === 0, style: { width: "100%", height: "auto", borderRadius: 8, marginBottom: "0.75rem" } }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: 12, opacity: 0.7, margin: 0 }, children: a.date }),
+      /* @__PURE__ */ jsxs("h2", { style: { margin: "0.25rem 0", fontSize: "1.35rem" }, children: [
+        /* @__PURE__ */ jsx("a", { href: `${basePath}/${a.slug ?? a.id}`, children: a.title }),
+        !a.published && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8, fontSize: 12, color: "#b45309" }, children: "(concept)" })
+      ] }),
+      a.excerpt && /* @__PURE__ */ jsx("p", { style: { margin: 0, opacity: 0.85 }, children: a.excerpt })
+    ] }, a.id)),
+    paged && shown.length < all.length && /* @__PURE__ */ jsx("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs("button", { type: "button", className: "xicms-btn", onClick: () => setVisible((v) => v + pageSize), children: [
+      "Meer laden (",
+      all.length - shown.length,
+      ")"
+    ] }) })
+  ] });
+}
+function articleBlogPostingJsonLd(article, opts = {}) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: article.title,
+    datePublished: article.date,
+    ...article.excerpt ? { description: article.excerpt } : {},
+    ...article.coverUrl ? { image: article.coverUrl } : {},
+    ...opts.url ? { url: opts.url, mainEntityOfPage: opts.url } : {},
+    ...opts.siteName ? { publisher: { "@type": "Organization", name: opts.siteName } } : {}
+  };
+}
+function NewsArticleView({ article, jsonLd = true }) {
+  const { name } = useSiteConfig();
+  const [html, setHtml] = useState(null);
+  useEffect(() => {
+    setHtml(article.bodyHtml ? DOMPurify.sanitize(article.bodyHtml) : null);
+  }, [article.bodyHtml]);
+  const fallbackText = article.body ?? (article.bodyHtml ? article.bodyHtml.replace(/<[^>]*>/g, " ") : "");
+  return /* @__PURE__ */ jsxs("article", { children: [
+    /* @__PURE__ */ jsx("p", { style: { fontSize: 12, opacity: 0.6 }, children: article.date }),
+    /* @__PURE__ */ jsx("h1", { children: article.title }),
+    article.coverUrl && /* @__PURE__ */ jsx(Img, { src: article.coverUrl, alt: "", width: 1200, height: 700, sizes: "(max-width: 900px) 100vw, 800px", priority: true, style: { width: "100%", height: "auto", borderRadius: 12, margin: "1rem 0" } }),
+    html ? (
+      // eslint-disable-next-line react/no-danger
+      /* @__PURE__ */ jsx("div", { className: "xicms-richtext", dangerouslySetInnerHTML: { __html: html } })
+    ) : fallbackText.split(/\n{2,}/).map((p, i) => /* @__PURE__ */ jsx("p", { style: { whiteSpace: "pre-wrap" }, children: p }, i)),
+    jsonLd && /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(articleBlogPostingJsonLd(article, { siteName: name })) }
+      }
+    )
+  ] });
+}
+export {
+  NewsArticleView,
+  NewsList,
+  articleBlogPostingJsonLd,
+  useNews
+};
+//# sourceMappingURL=News.js.map

package/dist/components/News.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/News.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { collection, getDocs, limit as fbLimit, onSnapshot, orderBy, query, where } from \"firebase/firestore\";\nimport { getDb } from \"../firebase/client\";\nimport { useSiteConfig } from \"../config\";\nimport DOMPurify from \"dompurify\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { canEdit } from \"../auth/roles\";\nimport { isDemoActive, getDemoNews } from \"../demo/demoStore\";\nimport { Img } from \"../media/ImageContext\";\nimport type { NewsArticle } from \"../content/types\";\n\n/**\n * Lijst van nieuwsartikelen voor de huidige site.\n * - `live: false` (standaard publiek): één keer ophalen met getDocs → geen per-bezoeker listener\n *   (scheelt Firestore-kosten op druk bezochte sites).\n * - `live: true` (admin): realtime via onSnapshot, zodat wijzigingen meteen zichtbaar zijn.\n */\nexport function useNews(opts: { onlyPublished?: boolean; live?: boolean; max?: number } = {}): {\n  articles: NewsArticle[];\n  loading: boolean;\n} {\n  const { siteId } = useSiteConfig();\n  // Via useAuth (niet via het deprecated ContentProvider-pad — News hoort niet aan legacy te hangen).\n  const { role } = useAuth();\n  const editor = canEdit(role);\n  const [articles, setArticles] = useState<NewsArticle[]>([]);\n  const [loading, setLoading] = useState(true);\n  const onlyPublished = opts.onlyPublished ?? !editor;\n  const live = opts.live ?? editor; // editors zien live; publiek één keer\n  // Begrens de query: zonder cap zou een nieuws-rijke site ALLE artikelen downloaden bij elk bezoek.\n  const cap = Math.min(opts.max ?? 50, 50);\n\n  useEffect(() => {\n    // Demo-modus: nieuws komt uit de lokale seed (geen Firebase), zodat nieuws-blokken/widgets\n    // in de demo ook gevuld zijn.\n    if (isDemoActive()) {\n      const all = getDemoNews(siteId);\n      setArticles((onlyPublished ? all.filter((a) => a.published) : all).slice(0, cap));\n      setLoading(false);\n      return;\n    }\n    const db = getDb();\n    if (!db) {\n      setLoading(false);\n      return;\n    }\n    const base = collection(db, \"sites\", siteId, \"news\");\n    const q = onlyPublished\n      ? query(base, where(\"published\", \"==\", true), orderBy(\"date\", \"desc\"), fbLimit(cap))\n      : query(base, orderBy(\"date\", \"desc\"), fbLimit(cap));\n    const map = (snap: { docs: { id: string; data: () => unknown }[] }) =>\n      setArticles(snap.docs.map((d) => ({ id: d.id, ...(d.data() as Omit<NewsArticle, \"id\">) })));\n\n    if (!live) {\n      let active = true;\n      getDocs(q)\n        .then((snap) => {\n          if (active) {\n            map(snap);\n            setLoading(false);\n          }\n        })\n        .catch(() => active && setLoading(false));\n      return () => {\n        active = false;\n      };\n    }\n\n    const unsub = onSnapshot(\n      q,\n      (snap) => {\n        map(snap);\n        setLoading(false);\n      },\n      () => setLoading(false),\n    );\n    return () => unsub();\n  }, [siteId, onlyPublished, live, cap]);\n\n  return { articles, loading };\n}\n\ninterface NewsListProps {\n  /** Basispad voor links naar een artikel, bv. \"/nieuws\". */\n  basePath?: string;\n  className?: string;\n  emptyLabel?: string;\n  /** Maximaal aantal artikelen om te tonen. */\n  limit?: number;\n  /** Toon eerst dit aantal en laad de rest met een \"Meer laden\"-knop (0/leeg = alles ineens). */\n  pageSize?: number;\n}\n\n/** Standaardweergave van nieuwsartikelen als kaartenlijst, optioneel gepagineerd. */\nexport function NewsList({ basePath = \"/nieuws\", className, emptyLabel = \"Nog geen nieuws.\", limit, pageSize }: NewsListProps) {\n  const { articles, loading } = useNews({ max: limit });\n  const paged = typeof pageSize === \"number\" && pageSize > 0;\n  const [visible, setVisible] = useState(paged ? pageSize : Infinity);\n\n  if (loading) return <p>Nieuws laden…</p>;\n  if (articles.length === 0) return <p>{emptyLabel}</p>;\n\n  const all = typeof limit === \"number\" ? articles.slice(0, limit) : articles;\n  const shown = paged ? all.slice(0, visible) : all;\n\n  return (\n    <div className={className} style={{ display: \"grid\", gap: \"1rem\" }}>\n      {shown.map((a, i) => (\n        <article key={a.id} className=\"xicms-card\" style={{ padding: \"1.25rem\" }}>\n          {a.coverUrl && (\n            // Eerste cover boven de vouw = vaak de LCP → priority (geen lazy-load-vertraging).\n            <Img src={a.coverUrl} alt=\"\" width={1200} height={700} sizes=\"(max-width: 720px) 100vw, 33vw\" priority={i === 0} style={{ width: \"100%\", height: \"auto\", borderRadius: 8, marginBottom: \"0.75rem\" }} />\n          )}\n          <p style={{ fontSize: 12, opacity: 0.7, margin: 0 }}>{a.date}</p>\n          {/* h2: de lijst staat direct onder de pagina-h1 — h3 zou een kopniveau overslaan. */}\n          <h2 style={{ margin: \"0.25rem 0\", fontSize: \"1.35rem\" }}>\n            <a href={`${basePath}/${a.slug ?? a.id}`}>{a.title}</a>\n            {!a.published && <span style={{ marginLeft: 8, fontSize: 12, color: \"#b45309\" }}>(concept)</span>}\n          </h2>\n          {a.excerpt && <p style={{ margin: 0, opacity: 0.85 }}>{a.excerpt}</p>}\n        </article>\n      ))}\n      {paged && shown.length < all.length && (\n        <div style={{ textAlign: \"center\" }}>\n          <button type=\"button\" className=\"xicms-btn\" onClick={() => setVisible((v) => v + (pageSize as number))}>\n            Meer laden ({all.length - shown.length})\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** BlogPosting-JSON-LD voor een artikel — puur, zodat het testbaar is. */\nexport function articleBlogPostingJsonLd(article: NewsArticle, opts: { siteName?: string; url?: string } = {}): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"BlogPosting\",\n    headline: article.title,\n    datePublished: article.date,\n    ...(article.excerpt ? { description: article.excerpt } : {}),\n    ...(article.coverUrl ? { image: article.coverUrl } : {}),\n    ...(opts.url ? { url: opts.url, mainEntityOfPage: opts.url } : {}),\n    ...(opts.siteName ? { publisher: { \"@type\": \"Organization\", name: opts.siteName } } : {}),\n  };\n}\n\n/** Detailweergave van één artikel, met BlogPosting-JSON-LD voor zoekmachines. */\nexport function NewsArticleView({ article, jsonLd = true }: { article: NewsArticle; jsonLd?: boolean }) {\n  const { name } = useSiteConfig();\n  // Rich-text wordt bij het RENDEREN gesanitized (DOMPurify) — de render is de veiligheidsgrens,\n  // ook als er ooit ongesaneerde HTML in Firestore zou belanden. DOMPurify heeft echter een echte\n  // DOM nodig: op de server (SSR/prerender) is sanitize geen functie. Daarom rendert de eerste\n  // render (server én client-hydration, identiek) de platte-tekst-fallback en wisselt het effect\n  // — client-only — naar de gesanitizede rich-text.\n  const [html, setHtml] = useState<string | null>(null);\n  useEffect(() => {\n    setHtml(article.bodyHtml ? DOMPurify.sanitize(article.bodyHtml) : null);\n  }, [article.bodyHtml]);\n  // Fallback tot de sanitizer klaar is: kale tekst (tags gestript, gerenderd als tekstnodes — veilig).\n  const fallbackText = article.body ?? (article.bodyHtml ? article.bodyHtml.replace(/<[^>]*>/g, \" \") : \"\");\n  return (\n    <article>\n      <p style={{ fontSize: 12, opacity: 0.6 }}>{article.date}</p>\n      <h1>{article.title}</h1>\n      {article.coverUrl && (\n        <Img src={article.coverUrl} alt=\"\" width={1200} height={700} sizes=\"(max-width: 900px) 100vw, 800px\" priority style={{ width: \"100%\", height: \"auto\", borderRadius: 12, margin: \"1rem 0\" }} />\n      )}\n      {html ? (\n        // eslint-disable-next-line react/no-danger\n        <div className=\"xicms-richtext\" dangerouslySetInnerHTML={{ __html: html }} />\n      ) : (\n        fallbackText.split(/\\n{2,}/).map((p, i) => (\n          <p key={i} style={{ whiteSpace: \"pre-wrap\" }}>\n            {p}\n          </p>\n        ))\n      )}\n      {jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(articleBlogPostingJsonLd(article, { siteName: name })) }}\n        />\n      )}\n    </article>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/PageView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Registreert één pageview voor de huidige site/pad — max. één keer per browsersessie per pad
+ * (sessionStorage). Privacy-vriendelijk en goedkoop. No-op zonder Firebase. Plaats dit in de
+ * publieke layout van een klantsite (binnen <XiCMSProvider>).
+ */
+export declare function PageView({ path }: {
+    path: string;
+}): null;

package/dist/components/PageView.js

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect } from "react";
+import { getFunctions, httpsCallable } from "firebase/functions";
+import { getFirebaseApp } from "../firebase/client";
+import { functionsRegion } from "../firebase/region";
+import { useSiteConfig } from "../config";
+function PageView({ path }) {
+  const { siteId } = useSiteConfig();
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const key = `xicms_view:${siteId}:${path}`;
+    try {
+      if (sessionStorage.getItem(key)) return;
+      sessionStorage.setItem(key, "1");
+    } catch {
+    }
+    const app = getFirebaseApp();
+    if (!app) return;
+    const fn = httpsCallable(getFunctions(app, functionsRegion()), "trackView");
+    void fn({ siteId, path }).catch(() => {
+    });
+  }, [siteId, path]);
+  return null;
+}
+export {
+  PageView
+};
+//# sourceMappingURL=PageView.js.map

package/dist/components/PageView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/PageView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { getFunctions, httpsCallable } from \"firebase/functions\";\nimport { getFirebaseApp } from \"../firebase/client\";\nimport { functionsRegion } from \"../firebase/region\";\nimport { useSiteConfig } from \"../config\";\n\n/**\n * Registreert één pageview voor de huidige site/pad — max. één keer per browsersessie per pad\n * (sessionStorage). Privacy-vriendelijk en goedkoop. No-op zonder Firebase. Plaats dit in de\n * publieke layout van een klantsite (binnen <XiCMSProvider>).\n */\nexport function PageView({ path }: { path: string }) {\n  const { siteId } = useSiteConfig();\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const key = `xicms_view:${siteId}:${path}`;\n    try {\n      if (sessionStorage.getItem(key)) return;\n      sessionStorage.setItem(key, \"1\");\n    } catch {\n      /* private mode e.d. — ga gewoon door */\n    }\n    const app = getFirebaseApp();\n    if (!app) return;\n    const fn = httpsCallable(getFunctions(app, functionsRegion()), \"trackView\");\n    void fn({ siteId, path }).catch(() => {\n      /* stats mogen nooit de site breken */\n    });\n  }, [siteId, path]);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,cAAc,qBAAqB;AAC5C,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAOvB,SAAS,SAAS,EAAE,KAAK,GAAqB;AACnD,QAAM,EAAE,OAAO,IAAI,cAAc;AAEjC,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,MAAM,cAAc,MAAM,IAAI,IAAI;AACxC,QAAI;AACF,UAAI,eAAe,QAAQ,GAAG,EAAG;AACjC,qBAAe,QAAQ,KAAK,GAAG;AAAA,IACjC,QAAQ;AAAA,IAER;AACA,UAAM,MAAM,eAAe;AAC3B,QAAI,CAAC,IAAK;AACV,UAAM,KAAK,cAAc,aAAa,KAAK,gBAAgB,CAAC,GAAG,WAAW;AAC1E,SAAK,GAAG,EAAE,QAAQ,KAAK,CAAC,EAAE,MAAM,MAAM;AAAA,IAEtC,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AACT;","names":[]}

package/dist/components/ResponsiveImage.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from "react";
+import type { MediaItem } from "../content/types";
+/**
+ * Rendert een afbeelding met srcset/webp uit de door de pipeline gegenereerde varianten.
+ * Server-safe. Valt terug op de originele `url` als er nog geen varianten zijn.
+ */
+export declare function ResponsiveImage({ media, url, alt, className, style, sizes, priority, }: {
+    media?: Pick<MediaItem, "url" | "alt" | "width" | "height" | "variants">;
+    url?: string;
+    alt?: string;
+    className?: string;
+    style?: CSSProperties;
+    sizes?: string;
+    /** Zet dit op een above-the-fold beeld (bv. hero): eager laden + hoge fetch-prioriteit voor LCP. */
+    priority?: boolean;
+}): import("react").JSX.Element | null;

package/dist/components/ResponsiveImage.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function ResponsiveImage({
+  media,
+  url,
+  alt,
+  className,
+  style,
+  sizes = "100vw",
+  priority = false
+}) {
+  const src = media?.url ?? url;
+  if (!src) return null;
+  const altText = alt ?? media?.alt ?? "";
+  const ladder = media?.variants?.sizes ?? [];
+  const webp = media?.variants?.webp;
+  const srcSet = ladder.length ? ladder.map((v) => `${v.url} ${v.width}w`).join(", ") : void 0;
+  return /* @__PURE__ */ jsxs("picture", { children: [
+    webp && /* @__PURE__ */ jsx("source", { type: "image/webp", srcSet: `${webp.url} ${webp.width}w`, sizes }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        srcSet,
+        sizes: srcSet ? sizes : void 0,
+        alt: altText,
+        width: media?.width,
+        height: media?.height,
+        loading: priority ? "eager" : "lazy",
+        fetchPriority: priority ? "high" : void 0,
+        className,
+        style
+      }
+    )
+  ] });
+}
+export {
+  ResponsiveImage
+};
+//# sourceMappingURL=ResponsiveImage.js.map

package/dist/components/ResponsiveImage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ResponsiveImage.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { MediaItem } from \"../content/types\";\n\n/**\n * Rendert een afbeelding met srcset/webp uit de door de pipeline gegenereerde varianten.\n * Server-safe. Valt terug op de originele `url` als er nog geen varianten zijn.\n */\nexport function ResponsiveImage({\n  media,\n  url,\n  alt,\n  className,\n  style,\n  sizes = \"100vw\",\n  priority = false,\n}: {\n  media?: Pick<MediaItem, \"url\" | \"alt\" | \"width\" | \"height\" | \"variants\">;\n  url?: string;\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n  sizes?: string;\n  /** Zet dit op een above-the-fold beeld (bv. hero): eager laden + hoge fetch-prioriteit voor LCP. */\n  priority?: boolean;\n}) {\n  const src = media?.url ?? url;\n  if (!src) return null;\n  const altText = alt ?? media?.alt ?? \"\";\n  const ladder = media?.variants?.sizes ?? [];\n  const webp = media?.variants?.webp;\n\n  const srcSet = ladder.length\n    ? ladder.map((v) => `${v.url} ${v.width}w`).join(\", \")\n    : undefined;\n\n  return (\n    <picture>\n      {webp && <source type=\"image/webp\" srcSet={`${webp.url} ${webp.width}w`} sizes={sizes} />}\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        src={src}\n        srcSet={srcSet}\n        sizes={srcSet ? sizes : undefined}\n        alt={altText}\n        width={media?.width}\n        height={media?.height}\n        loading={priority ? \"eager\" : \"lazy\"}\n        fetchPriority={priority ? \"high\" : undefined}\n        className={className}\n        style={style}\n      />\n    </picture>\n  );\n}\n"],"mappings":"AAoCI,SACW,KADX;AA7BG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AACb,GASG;AACD,QAAM,MAAM,OAAO,OAAO;AAC1B,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,UAAU,OAAO,OAAO,OAAO;AACrC,QAAM,SAAS,OAAO,UAAU,SAAS,CAAC;AAC1C,QAAM,OAAO,OAAO,UAAU;AAE9B,QAAM,SAAS,OAAO,SAClB,OAAO,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,EAAE,KAAK,GAAG,EAAE,KAAK,IAAI,IACnD;AAEJ,SACE,qBAAC,aACE;AAAA,YAAQ,oBAAC,YAAO,MAAK,cAAa,QAAQ,GAAG,KAAK,GAAG,IAAI,KAAK,KAAK,KAAK,OAAc;AAAA,IAEvF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,SAAS,QAAQ;AAAA,QACxB,KAAK;AAAA,QACL,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,SAAS,WAAW,UAAU;AAAA,QAC9B,eAAe,WAAW,SAAS;AAAA,QACnC;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/site/SiteFooter.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { FooterSettings } from "../../schema/settings";
+/**
+ * Door de klant in /beheer bewerkbare footer. Unstyled-by-default: alle opmaak hangt aan
+ * `xicms-footer*`-classNames + thema-CSS-variabelen, zodat een site hem volledig kan herstijlen
+ * (of vervangen door een eigen footer). De inhoud komt live uit `settings/public.footer`.
+ */
+export declare function SiteFooter({ className, renderColumn, }: {
+    className?: string;
+    /** Override de opmaak van één kolom zonder de logica te forken. */
+    renderColumn?: (column: NonNullable<FooterSettings["columns"]>[number], index: number) => ReactNode;
+}): import("react").JSX.Element;

package/dist/components/site/SiteFooter.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSiteSettings } from "../../settings/useSiteSettings";
+import { useSiteConfig } from "../../config";
+function SiteFooter({
+  className,
+  renderColumn
+}) {
+  const { settings } = useSiteSettings();
+  const config = useSiteConfig();
+  const footer = settings.footer ?? {};
+  const name = settings.name ?? config.name;
+  const columns = footer.columns ?? [];
+  const social = footer.social ?? [];
+  const showAdminLink = footer.showAdminLink !== false;
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsxs("footer", { className: className ?? "xicms-footer", children: [
+    columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-footer__columns", children: columns.map(
+      (col, i) => renderColumn ? /* @__PURE__ */ jsx("div", { children: renderColumn(col, i) }, i) : /* @__PURE__ */ jsxs("div", { className: "xicms-footer__column", children: [
+        col.heading && /* @__PURE__ */ jsx("h3", { className: "xicms-footer__heading", children: col.heading }),
+        /* @__PURE__ */ jsx("ul", { className: "xicms-footer__links", children: (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: l.href, children: l.label }) }, j)) })
+      ] }, i)
+    ) }),
+    social.length > 0 && /* @__PURE__ */ jsx("ul", { className: "xicms-footer__social", children: social.map((s, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: s.href, "aria-label": s.platform, rel: "noopener noreferrer", target: "_blank", children: s.platform }) }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: "xicms-footer__bottom", children: [
+      /* @__PURE__ */ jsx("span", { children: footer.copyright ?? `\xA9 ${year} ${name}` }),
+      showAdminLink && /* @__PURE__ */ jsx("a", { href: "/beheer", children: "Beheer" })
+    ] })
+  ] });
+}
+export {
+  SiteFooter
+};
+//# sourceMappingURL=SiteFooter.js.map

package/dist/components/site/SiteFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/site/SiteFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { useSiteSettings } from \"../../settings/useSiteSettings\";\nimport { useSiteConfig } from \"../../config\";\nimport type { FooterSettings } from \"../../schema/settings\";\n\n/**\n * Door de klant in /beheer bewerkbare footer. Unstyled-by-default: alle opmaak hangt aan\n * `xicms-footer*`-classNames + thema-CSS-variabelen, zodat een site hem volledig kan herstijlen\n * (of vervangen door een eigen footer). De inhoud komt live uit `settings/public.footer`.\n */\nexport function SiteFooter({\n  className,\n  renderColumn,\n}: {\n  className?: string;\n  /** Override de opmaak van één kolom zonder de logica te forken. */\n  renderColumn?: (column: NonNullable<FooterSettings[\"columns\"]>[number], index: number) => ReactNode;\n}) {\n  const { settings } = useSiteSettings();\n  const config = useSiteConfig();\n  const footer = settings.footer ?? {};\n  const name = settings.name ?? config.name;\n  const columns = footer.columns ?? [];\n  const social = footer.social ?? [];\n  const showAdminLink = footer.showAdminLink !== false;\n  const year = new Date().getFullYear();\n\n  return (\n    <footer className={className ?? \"xicms-footer\"}>\n      {columns.length > 0 && (\n        <div className=\"xicms-footer__columns\">\n          {columns.map((col, i) =>\n            renderColumn ? (\n              <div key={i}>{renderColumn(col, i)}</div>\n            ) : (\n              <div key={i} className=\"xicms-footer__column\">\n                {col.heading && <h3 className=\"xicms-footer__heading\">{col.heading}</h3>}\n                <ul className=\"xicms-footer__links\">\n                  {(col.links ?? []).map((l, j) => (\n                    <li key={j}>\n                      <a href={l.href}>{l.label}</a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ),\n          )}\n        </div>\n      )}\n\n      {social.length > 0 && (\n        <ul className=\"xicms-footer__social\">\n          {social.map((s, i) => (\n            <li key={i}>\n              <a href={s.href} aria-label={s.platform} rel=\"noopener noreferrer\" target=\"_blank\">\n                {s.platform}\n              </a>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div className=\"xicms-footer__bottom\">\n        <span>{footer.copyright ?? `© ${year} ${name}`}</span>\n        {showAdminLink && <a href=\"/beheer\">Beheer</a>}\n      </div>\n    </footer>\n  );\n}\n"],"mappings":";AAmCc,cAEA,YAFA;AAhCd,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAQvB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,SAAS,UAAU,CAAC;AACnC,QAAM,OAAO,SAAS,QAAQ,OAAO;AACrC,QAAM,UAAU,OAAO,WAAW,CAAC;AACnC,QAAM,SAAS,OAAO,UAAU,CAAC;AACjC,QAAM,gBAAgB,OAAO,kBAAkB;AAC/C,QAAM,QAAO,oBAAI,KAAK,GAAE,YAAY;AAEpC,SACE,qBAAC,YAAO,WAAW,aAAa,gBAC7B;AAAA,YAAQ,SAAS,KAChB,oBAAC,SAAI,WAAU,yBACZ,kBAAQ;AAAA,MAAI,CAAC,KAAK,MACjB,eACE,oBAAC,SAAa,uBAAa,KAAK,CAAC,KAAvB,CAAyB,IAEnC,qBAAC,SAAY,WAAU,wBACpB;AAAA,YAAI,WAAW,oBAAC,QAAG,WAAU,yBAAyB,cAAI,SAAQ;AAAA,QACnE,oBAAC,QAAG,WAAU,uBACV,eAAI,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,MACzB,oBAAC,QACC,8BAAC,OAAE,MAAM,EAAE,MAAO,YAAE,OAAM,KADnB,CAET,CACD,GACH;AAAA,WARQ,CASV;AAAA,IAEJ,GACF;AAAA,IAGD,OAAO,SAAS,KACf,oBAAC,QAAG,WAAU,wBACX,iBAAO,IAAI,CAAC,GAAG,MACd,oBAAC,QACC,8BAAC,OAAE,MAAM,EAAE,MAAM,cAAY,EAAE,UAAU,KAAI,uBAAsB,QAAO,UACvE,YAAE,UACL,KAHO,CAIT,CACD,GACH;AAAA,IAGF,qBAAC,SAAI,WAAU,wBACb;AAAA,0BAAC,UAAM,iBAAO,aAAa,QAAK,IAAI,IAAI,IAAI,IAAG;AAAA,MAC9C,iBAAiB,oBAAC,OAAE,MAAK,WAAU,oBAAM;AAAA,OAC5C;AAAA,KACF;AAEJ;","names":[]}

package/dist/config.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { SiteConfig } from "./schema/siteConfig";
+export declare function ConfigProvider({ config, children }: {
+    config: SiteConfig;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Lees de actieve SiteConfig (siteId, theme, mode, …). */
+export declare function useSiteConfig(): SiteConfig;

package/dist/config.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ConfigContext = createContext(null);
+function ConfigProvider({ config, children }) {
+  return /* @__PURE__ */ jsx(ConfigContext.Provider, { value: config, children });
+}
+function useSiteConfig() {
+  const ctx = useContext(ConfigContext);
+  if (!ctx) throw new Error("useSiteConfig moet binnen <XiCMSProvider> worden gebruikt.");
+  return ctx;
+}
+export {
+  ConfigProvider,
+  useSiteConfig
+};
+//# sourceMappingURL=config.js.map

package/dist/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/config.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { SiteConfig } from \"./schema/siteConfig\";\n\nconst ConfigContext = createContext<SiteConfig | null>(null);\n\nexport function ConfigProvider({ config, children }: { config: SiteConfig; children: ReactNode }) {\n  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;\n}\n\n/** Lees de actieve SiteConfig (siteId, theme, mode, …). */\nexport function useSiteConfig(): SiteConfig {\n  const ctx = useContext(ConfigContext);\n  if (!ctx) throw new Error(\"useSiteConfig moet binnen <XiCMSProvider> worden gebruikt.\");\n  return ctx;\n}\n"],"mappings":";AAQS;AANT,SAAS,eAAe,kBAAkC;AAG1D,MAAM,gBAAgB,cAAiC,IAAI;AAEpD,SAAS,eAAe,EAAE,QAAQ,SAAS,GAAgD;AAChG,SAAO,oBAAC,cAAc,UAAd,EAAuB,OAAO,QAAS,UAAS;AAC1D;AAGO,SAAS,gBAA4B;AAC1C,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,4DAA4D;AACtF,SAAO;AACT;","names":[]}

package/dist/content/ContentProvider.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+interface ContentState {
+    /** Haal een waarde op; valt terug op defaults en daarna op `fallback`. */
+    get: (key: string, fallback?: string) => string;
+    /** Sla een waarde op (alleen als de gebruiker mag bewerken). */
+    set: (key: string, value: string) => Promise<void>;
+    /** Of de bewerk-modus aanstaat. */
+    editMode: boolean;
+    setEditMode: (on: boolean) => void;
+    /** Of de huidige gebruiker content mag bewerken. */
+    canEdit: boolean;
+    loading: boolean;
+}
+/** @deprecated LEGACY v1 (plat `cms/content`-model). Vervangen door het block-model (pagina's/
+ * drafts) + de visuele editor. Blijft werken voor bestaande sites; verwijdering volgt in een major. */
+export declare function ContentProvider({ siteId, defaults, children, }: {
+    siteId: string;
+    defaults?: Record<string, string>;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** @deprecated Hoort bij het legacy `cms/content`-model. Voor rechten: `useAuth()` + `canEdit(role)`. */
+export declare function useContent(): ContentState;
+export {};

package/dist/content/ContentProvider.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { doc, getDoc, onSnapshot, setDoc, serverTimestamp } from "firebase/firestore";
+import { getDb } from "../firebase/client";
+import { useAuth } from "../auth/AuthProvider";
+import { canEdit } from "../auth/roles";
+const ContentContext = createContext(null);
+function ContentProvider({
+  siteId,
+  defaults = {},
+  children
+}) {
+  const { role } = useAuth();
+  const editable = canEdit(role);
+  const [values, setValues] = useState({});
+  const [editMode, setEditMode] = useState(false);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const db = getDb();
+    if (!db) {
+      setLoading(false);
+      return;
+    }
+    const ref = doc(db, "sites", siteId, "cms", "content");
+    const apply = (snap) => {
+      const data = snap.data();
+      setValues(data?.values ?? {});
+      setLoading(false);
+    };
+    if (editable) {
+      const unsub = onSnapshot(ref, apply, () => setLoading(false));
+      return () => unsub();
+    }
+    let active = true;
+    getDoc(ref).then((snap) => {
+      if (active) apply(snap);
+    }).catch(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [siteId, editable]);
+  useEffect(() => {
+    if (!editable && editMode) setEditMode(false);
+  }, [editable, editMode]);
+  const value = useMemo(
+    () => ({
+      get: (key, fallback = "") => values[key] ?? defaults[key] ?? fallback,
+      set: async (key, val) => {
+        if (!editable) return;
+        const db = getDb();
+        if (!db) return;
+        const ref = doc(db, "sites", siteId, "cms", "content");
+        await setDoc(
+          ref,
+          { values: { [key]: val }, updatedAt: serverTimestamp() },
+          { merge: true }
+        );
+      },
+      editMode,
+      setEditMode,
+      canEdit: editable,
+      loading
+    }),
+    [values, defaults, editMode, editable, loading, siteId]
+  );
+  return /* @__PURE__ */ jsx(ContentContext.Provider, { value, children });
+}
+function useContent() {
+  const ctx = useContext(ContentContext);
+  if (!ctx) throw new Error("useContent moet binnen <XiCMSProvider> worden gebruikt.");
+  return ctx;
+}
+export {
+  ContentProvider,
+  useContent
+};
+//# sourceMappingURL=ContentProvider.js.map

package/dist/content/ContentProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/content/ContentProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { doc, getDoc, onSnapshot, setDoc, serverTimestamp } from \"firebase/firestore\";\nimport { getDb } from \"../firebase/client\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { canEdit } from \"../auth/roles\";\n\ninterface ContentState {\n  /** Haal een waarde op; valt terug op defaults en daarna op `fallback`. */\n  get: (key: string, fallback?: string) => string;\n  /** Sla een waarde op (alleen als de gebruiker mag bewerken). */\n  set: (key: string, value: string) => Promise<void>;\n  /** Of de bewerk-modus aanstaat. */\n  editMode: boolean;\n  setEditMode: (on: boolean) => void;\n  /** Of de huidige gebruiker content mag bewerken. */\n  canEdit: boolean;\n  loading: boolean;\n}\n\nconst ContentContext = createContext<ContentState | null>(null);\n\n/** @deprecated LEGACY v1 (plat `cms/content`-model). Vervangen door het block-model (pagina's/\n * drafts) + de visuele editor. Blijft werken voor bestaande sites; verwijdering volgt in een major. */\nexport function ContentProvider({\n  siteId,\n  defaults = {},\n  children,\n}: {\n  siteId: string;\n  defaults?: Record<string, string>;\n  children: ReactNode;\n}) {\n  const { role } = useAuth();\n  const editable = canEdit(role);\n  const [values, setValues] = useState<Record<string, string>>({});\n  const [editMode, setEditMode] = useState(false);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) {\n      setLoading(false);\n      return;\n    }\n    const ref = doc(db, \"sites\", siteId, \"cms\", \"content\");\n    const apply = (snap: { data: () => unknown }) => {\n      const data = snap.data() as { values?: Record<string, string> } | undefined;\n      setValues(data?.values ?? {});\n      setLoading(false);\n    };\n\n    // Kostenbesparing: publieke bezoekers (geen bewerkrechten) lezen de content één keer\n    // (getDoc) i.p.v. een realtime listener per bezoeker. Editors houden onSnapshot zodat ze\n    // hun eigen wijzigingen meteen terugzien.\n    if (editable) {\n      const unsub = onSnapshot(ref, apply, () => setLoading(false));\n      return () => unsub();\n    }\n    let active = true;\n    getDoc(ref)\n      .then((snap) => {\n        if (active) apply(snap);\n      })\n      .catch(() => {\n        if (active) setLoading(false);\n      });\n    return () => {\n      active = false;\n    };\n  }, [siteId, editable]);\n\n  // Geen bewerk-rechten? Forceer edit-modus uit.\n  useEffect(() => {\n    if (!editable && editMode) setEditMode(false);\n  }, [editable, editMode]);\n\n  const value = useMemo<ContentState>(\n    () => ({\n      get: (key, fallback = \"\") => values[key] ?? defaults[key] ?? fallback,\n      set: async (key, val) => {\n        if (!editable) return;\n        const db = getDb();\n        if (!db) return;\n        const ref = doc(db, \"sites\", siteId, \"cms\", \"content\");\n        await setDoc(\n          ref,\n          { values: { [key]: val }, updatedAt: serverTimestamp() },\n          { merge: true },\n        );\n      },\n      editMode,\n      setEditMode,\n      canEdit: editable,\n      loading,\n    }),\n    [values, defaults, editMode, editable, loading, siteId],\n  );\n\n  return <ContentContext.Provider value={value}>{children}</ContentContext.Provider>;\n}\n\n/** @deprecated Hoort bij het legacy `cms/content`-model. Voor rechten: `useAuth()` + `canEdit(role)`. */\nexport function useContent(): ContentState {\n  const ctx = useContext(ContentContext);\n  if (!ctx) throw new Error(\"useContent moet binnen <XiCMSProvider> worden gebruikt.\");\n  return ctx;\n}\n"],"mappings":";AA2GS;AAzGT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,KAAK,QAAQ,YAAY,QAAQ,uBAAuB;AACjE,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,eAAe;AAexB,MAAM,iBAAiB,cAAmC,IAAI;AAIvD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AACF,GAIG;AACD,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,WAAW,QAAQ,IAAI;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiC,CAAC,CAAC;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,YAAU,MAAM;AACd,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,IAAI;AACP,iBAAW,KAAK;AAChB;AAAA,IACF;AACA,UAAM,MAAM,IAAI,IAAI,SAAS,QAAQ,OAAO,SAAS;AACrD,UAAM,QAAQ,CAAC,SAAkC;AAC/C,YAAM,OAAO,KAAK,KAAK;AACvB,gBAAU,MAAM,UAAU,CAAC,CAAC;AAC5B,iBAAW,KAAK;AAAA,IAClB;AAKA,QAAI,UAAU;AACZ,YAAM,QAAQ,WAAW,KAAK,OAAO,MAAM,WAAW,KAAK,CAAC;AAC5D,aAAO,MAAM,MAAM;AAAA,IACrB;AACA,QAAI,SAAS;AACb,WAAO,GAAG,EACP,KAAK,CAAC,SAAS;AACd,UAAI,OAAQ,OAAM,IAAI;AAAA,IACxB,CAAC,EACA,MAAM,MAAM;AACX,UAAI,OAAQ,YAAW,KAAK;AAAA,IAC9B,CAAC;AACH,WAAO,MAAM;AACX,eAAS;AAAA,IACX;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAGrB,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,SAAU,aAAY,KAAK;AAAA,EAC9C,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,KAAK,CAAC,KAAK,WAAW,OAAO,OAAO,GAAG,KAAK,SAAS,GAAG,KAAK;AAAA,MAC7D,KAAK,OAAO,KAAK,QAAQ;AACvB,YAAI,CAAC,SAAU;AACf,cAAM,KAAK,MAAM;AACjB,YAAI,CAAC,GAAI;AACT,cAAM,MAAM,IAAI,IAAI,SAAS,QAAQ,OAAO,SAAS;AACrD,cAAM;AAAA,UACJ;AAAA,UACA,EAAE,QAAQ,EAAE,CAAC,GAAG,GAAG,IAAI,GAAG,WAAW,gBAAgB,EAAE;AAAA,UACvD,EAAE,OAAO,KAAK;AAAA,QAChB;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,UAAU,UAAU,UAAU,SAAS,MAAM;AAAA,EACxD;AAEA,SAAO,oBAAC,eAAe,UAAf,EAAwB,OAAe,UAAS;AAC1D;AAGO,SAAS,aAA2B;AACzC,QAAM,MAAM,WAAW,cAAc;AACrC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,SAAO;AACT;","names":[]}

package/dist/content/types.d.ts

@@ -0,0 +1,41 @@
+/** Een nieuwsartikel zoals opgeslagen in `sites/{siteId}/news/{id}`. */
+export interface NewsArticle {
+    id: string;
+    title: string;
+    slug: string;
+    excerpt?: string;
+    body: string;
+    /** Optionele rich-text-versie van de inhoud (HTML). Wordt bij renderen altijd gesanitized;
+     *  ontbreekt dit veld, dan rendert `body` als platte tekst (bestaand gedrag). */
+    bodyHtml?: string;
+    coverUrl?: string;
+    /** ISO-datum (yyyy-mm-dd). */
+    date: string;
+    published: boolean;
+}
+/** Een geoptimaliseerde variant van een afbeelding (door de media-pipeline gegenereerd). */
+export interface MediaVariant {
+    url: string;
+    path: string;
+    width: number;
+}
+/** Een media-item zoals opgeslagen in `sites/{siteId}/media/{id}`. */
+export interface MediaItem {
+    id: string;
+    url: string;
+    path: string;
+    name: string;
+    contentType?: string;
+    size?: number;
+    /** Toegankelijkheids-tekst. */
+    alt?: string;
+    width?: number;
+    height?: number;
+    /** Door de sharp-Cloud-Function gevulde varianten. */
+    variants?: {
+        webp?: MediaVariant;
+        sizes?: MediaVariant[];
+    };
+    /** "processing" tot de pipeline klaar is, daarna "ready". */
+    status?: "processing" | "ready";
+}

package/dist/content/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/content/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/demo/DemoStudio.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Bovenbalk voor de DEMO-bewerkmodus (`config.demoEditing`). Biedt een pseudo-login waarmee
+ * bezoekers het beheer (teksten + blokken) kunnen uitproberen, en maakt heel duidelijk dat
+ * wijzigingen NIET worden opgeslagen — ze blijven alleen lokaal in de browser en zijn met één
+ * klik te resetten. De echte bewerkacties ("Pagina bewerken", "Uitloggen") staan in de EditBar.
+ */
+export declare function DemoStudio(): import("react").JSX.Element | null;

package/dist/demo/DemoStudio.js

@@ -0,0 +1,54 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useAuth } from "../auth/AuthProvider";
+import { useSiteConfig } from "../config";
+import { DEMO_EVENT, isDemoLoggedIn, resetDemo } from "./demoStore";
+function DemoStudio() {
+  const { demo, demoSignIn } = useAuth();
+  const { siteId } = useSiteConfig();
+  const [loggedIn, setLoggedIn] = useState(false);
+  useEffect(() => {
+    if (!demo) return;
+    const sync = () => setLoggedIn(isDemoLoggedIn());
+    sync();
+    window.addEventListener(DEMO_EVENT, sync);
+    return () => window.removeEventListener(DEMO_EVENT, sync);
+  }, [demo]);
+  if (!demo) return null;
+  return /* @__PURE__ */ jsx("div", { className: "xicms-demostudio", role: "region", "aria-label": "Demo-bewerkmodus", children: !loggedIn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "xicms-demostudio__msg", children: [
+      /* @__PURE__ */ jsx("strong", { children: "Probeer het zelf:" }),
+      " log in als demo-beheerder en bewerk teksten, foto's en blokken \u2014 ",
+      /* @__PURE__ */ jsx("strong", { children: "niets wordt opgeslagen" }),
+      ", je wijzigingen blijven alleen in jouw browser."
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-btn", onClick: demoSignIn, children: "Probeer het beheer (demo-login)" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "xicms-demostudio__msg", children: [
+      "\u270F\uFE0F ",
+      /* @__PURE__ */ jsx("strong", { children: "Demo-bewerkmodus." }),
+      " Klik onderaan op ",
+      /* @__PURE__ */ jsx("strong", { children: "\u201CPagina bewerken\u201D" }),
+      " om blokken aan te passen. Let op: ",
+      /* @__PURE__ */ jsx("strong", { children: "wijzigingen worden niet opgeslagen" }),
+      " \u2014 ze staan alleen lokaal in jouw browser."
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "xicms-btn xicms-btn--ghost",
+        onClick: () => {
+          resetDemo(siteId);
+          if (typeof window !== "undefined") window.location.reload();
+        },
+        children: "Reset demo"
+      }
+    )
+  ] }) });
+}
+export {
+  DemoStudio
+};
+//# sourceMappingURL=DemoStudio.js.map

package/dist/demo/DemoStudio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/demo/DemoStudio.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { useSiteConfig } from \"../config\";\nimport { DEMO_EVENT, isDemoLoggedIn, resetDemo } from \"./demoStore\";\n\n/**\n * Bovenbalk voor de DEMO-bewerkmodus (`config.demoEditing`). Biedt een pseudo-login waarmee\n * bezoekers het beheer (teksten + blokken) kunnen uitproberen, en maakt heel duidelijk dat\n * wijzigingen NIET worden opgeslagen — ze blijven alleen lokaal in de browser en zijn met één\n * klik te resetten. De echte bewerkacties (\"Pagina bewerken\", \"Uitloggen\") staan in de EditBar.\n */\nexport function DemoStudio() {\n  const { demo, demoSignIn } = useAuth();\n  const { siteId } = useSiteConfig();\n  const [loggedIn, setLoggedIn] = useState(false);\n\n  useEffect(() => {\n    if (!demo) return;\n    const sync = () => setLoggedIn(isDemoLoggedIn());\n    sync();\n    window.addEventListener(DEMO_EVENT, sync);\n    return () => window.removeEventListener(DEMO_EVENT, sync);\n  }, [demo]);\n\n  if (!demo) return null;\n\n  return (\n    <div className=\"xicms-demostudio\" role=\"region\" aria-label=\"Demo-bewerkmodus\">\n      {!loggedIn ? (\n        <>\n          <span className=\"xicms-demostudio__msg\">\n            <strong>Probeer het zelf:</strong> log in als demo-beheerder en bewerk teksten, foto&apos;s en\n            blokken — <strong>niets wordt opgeslagen</strong>, je wijzigingen blijven alleen in jouw browser.\n          </span>\n          <button type=\"button\" className=\"xicms-btn\" onClick={demoSignIn}>\n            Probeer het beheer (demo-login)\n          </button>\n        </>\n      ) : (\n        <>\n          <span className=\"xicms-demostudio__msg\">\n            ✏️ <strong>Demo-bewerkmodus.</strong> Klik onderaan op <strong>“Pagina bewerken”</strong> om\n            blokken aan te passen. Let op: <strong>wijzigingen worden niet opgeslagen</strong> — ze staan\n            alleen lokaal in jouw browser.\n          </span>\n          <button\n            type=\"button\"\n            className=\"xicms-btn xicms-btn--ghost\"\n            onClick={() => {\n              resetDemo(siteId);\n              // Herlaad zodat de pagina terugvalt op de oorspronkelijke (seed-)inhoud.\n              if (typeof window !== \"undefined\") window.location.reload();\n            }}\n          >\n            Reset demo\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+BQ,mBAEI,KADF,YADF;AA7BR,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,gBAAgB,iBAAiB;AAQ/C,SAAS,aAAa;AAC3B,QAAM,EAAE,MAAM,WAAW,IAAI,QAAQ;AACrC,QAAM,EAAE,OAAO,IAAI,cAAc;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,MAAM,YAAY,eAAe,CAAC;AAC/C,SAAK;AACL,WAAO,iBAAiB,YAAY,IAAI;AACxC,WAAO,MAAM,OAAO,oBAAoB,YAAY,IAAI;AAAA,EAC1D,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,SACE,oBAAC,SAAI,WAAU,oBAAmB,MAAK,UAAS,cAAW,oBACxD,WAAC,WACA,iCACE;AAAA,yBAAC,UAAK,WAAU,yBACd;AAAA,0BAAC,YAAO,+BAAiB;AAAA,MAAS;AAAA,MACxB,oBAAC,YAAO,oCAAsB;AAAA,MAAS;AAAA,OACnD;AAAA,IACA,oBAAC,YAAO,MAAK,UAAS,WAAU,aAAY,SAAS,YAAY,6CAEjE;AAAA,KACF,IAEA,iCACE;AAAA,yBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,MACnC,oBAAC,YAAO,+BAAiB;AAAA,MAAS;AAAA,MAAkB,oBAAC,YAAO,yCAAiB;AAAA,MAAS;AAAA,MAC1D,oBAAC,YAAO,gDAAkC;AAAA,MAAS;AAAA,OAEpF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,oBAAU,MAAM;AAEhB,cAAI,OAAO,WAAW,YAAa,QAAO,SAAS,OAAO;AAAA,QAC5D;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF,GAEJ;AAEJ;","names":[]}