@bapla/site-theme 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,904 @@
+import {
+  MEDIA_WIDTHS,
+  imgproxyPath,
+  isTransformable,
+  mediaUrl,
+  objectPosition,
+  readMedia
+} from "./chunk-RYCW4YWV.js";
+
+// src/theme/themeCss.ts
+var SHADES = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+var RAMPS = ["primary", "secondary", "accent", "neutral"];
+var LEVELS = ["h1", "h2", "h3", "h4", "h5", "h6", "p"];
+var HEX = /^#[0-9a-f]{6}$/i;
+var LENGTH = /^-?(\d+(\.\d+)?|\.\d+)(rem|em|px|%)?$/;
+var FONT_ID = /^[a-z0-9][a-z0-9-]{0,63}$/;
+function hex(value) {
+  return typeof value === "string" && HEX.test(value) ? value.toLowerCase() : null;
+}
+function length(value) {
+  return typeof value === "string" && LENGTH.test(value.trim()) ? value.trim() : null;
+}
+function number(value, min, max) {
+  return typeof value === "number" && Number.isFinite(value) && value >= min && value <= max ? value : null;
+}
+function familyName(name) {
+  return name.replace(/[^\p{L}\p{N} _.-]/gu, "").replace(/\s+/g, " ").trim();
+}
+function fontStack(font) {
+  const fallback = ["sans-serif", "serif", "monospace"].includes(font.fallback) ? font.fallback : "sans-serif";
+  const name = familyName(font.family);
+  return name === "" ? fallback : `"${name} Variable", "${name}", ${fallback}`;
+}
+function declarations(entries) {
+  return entries.filter((entry) => entry[1] !== null).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+}
+function rampVars(name, ramp) {
+  return SHADES.map((shade) => [`--color-${name}-${shade}`, hex(ramp?.[shade])]);
+}
+function themeCss(appearance) {
+  const { colors, fonts, type } = appearance;
+  const theme = [
+    ...RAMPS.flatMap((name) => rampVars(name, colors[name])),
+    ["--color-background", hex(colors.background)],
+    ["--color-text", hex(colors.text)],
+    ["--font-body", fontStack(fonts.body)],
+    ["--font-heading", fontStack(fonts.heading)]
+  ];
+  for (const level of LEVELS) {
+    const style = type[level];
+    theme.push(
+      [`--text-${level}`, length(style?.size)],
+      [`--text-${level}--line-height`, number(style?.line_height, 0.5, 4)],
+      [`--text-${level}--letter-spacing`, length(style?.letter_spacing)],
+      [`--text-${level}--font-weight`, number(style?.weight, 100, 1e3)]
+    );
+  }
+  theme.push(["--radius-base", length(appearance.radius)]);
+  const headings = LEVELS.filter((level) => level !== "p").map(
+    (level) => `  ${level} {
+    font-family: var(--font-heading);
+    font-size: var(--text-${level});
+    line-height: var(--text-${level}--line-height);
+    letter-spacing: var(--text-${level}--letter-spacing);
+    font-weight: var(--text-${level}--font-weight);
+  }`
+  ).join("\n");
+  const parts = [
+    `@theme {
+${declarations(theme)}
+}`,
+    `@layer base {
+  :root {
+    color-scheme: ${appearance.mode === "both" ? "light dark" : appearance.mode};
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-text);
+    font-family: var(--font-body);
+    font-size: var(--text-p);
+    line-height: var(--text-p--line-height);
+    letter-spacing: var(--text-p--letter-spacing);
+    font-weight: var(--text-p--font-weight);
+  }
+${headings}
+  p {
+    font-size: var(--text-p);
+    line-height: var(--text-p--line-height);
+  }
+}`
+  ];
+  if (appearance.mode === "both") {
+    parts.push(`@media (prefers-color-scheme: dark) {
+  :root {
+${declarations([
+      ["--color-background", hex(colors.neutral?.["950"])],
+      ["--color-text", hex(colors.neutral?.["50"])]
+    ]).replace(/^ {2}/gm, "    ")}
+  }
+}`);
+  }
+  return parts.join("\n\n") + "\n";
+}
+function fontImports(appearance, options = {}) {
+  const variable = options.variable ?? true;
+  const weights = /* @__PURE__ */ new Map();
+  const add = (font, levels, extra = []) => {
+    if (!FONT_ID.test(font.id)) return;
+    const set = weights.get(font.id) ?? /* @__PURE__ */ new Set();
+    for (const level of levels) {
+      const weight = number(appearance.type[level]?.weight, 100, 900);
+      if (weight !== null) set.add(Math.round(weight / 100) * 100);
+    }
+    extra.forEach((weight) => set.add(weight));
+    weights.set(font.id, set);
+  };
+  add(appearance.fonts.body, ["p"], [700]);
+  add(appearance.fonts.heading, ["h1", "h2", "h3", "h4", "h5", "h6"]);
+  if (variable) {
+    return [...weights.keys()].map((id) => `@fontsource-variable/${id}`);
+  }
+  return [...weights.entries()].flatMap(
+    ([id, set]) => [...set].sort((a, b) => a - b).map((weight) => `@fontsource/${id}/${weight}.css`)
+  );
+}
+
+// src/context.tsx
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var frenchLabels = {
+  mainNavigation: "Navigation principale",
+  menu: "Menu",
+  submenu: (label) => `Sous-menu ${label}`,
+  breadcrumb: "Fil d'Ariane",
+  carousel: "Carrousel",
+  previous: "Pr\xE9c\xE9dent",
+  next: "Suivant",
+  slide: (index, count) => `${index} sur ${count}`,
+  goToSlide: (index) => `Aller \xE0 la diapositive ${index}`,
+  pause: "Mettre en pause",
+  play: "Lire",
+  embed: "Contenu int\xE9gr\xE9"
+};
+var defaultImageSizes = {
+  thumbnail: { w: 150, h: 150, fit: "cover" },
+  card: { w: 300, h: 300, fit: "cover" },
+  medium: { w: 768 },
+  large: { w: 1280 }
+};
+var defaults = {
+  components: {},
+  resolveLink: () => null,
+  resolveMedia: () => null,
+  imageUrl: (media, transform2) => mediaUrl(media, transform2),
+  imageSizes: defaultImageSizes,
+  labels: frenchLabels
+};
+var SiteThemeContext = createContext(defaults);
+function BlocksProvider({ components, resolveLink, resolveMedia, imageUrl, imageSizes, labels, children }) {
+  const parent = useContext(SiteThemeContext);
+  const value = useMemo(
+    () => ({
+      components: { ...parent.components, ...components },
+      resolveLink: resolveLink ?? parent.resolveLink,
+      resolveMedia: resolveMedia ?? parent.resolveMedia,
+      imageUrl: imageUrl ?? parent.imageUrl,
+      imageSizes: { ...parent.imageSizes, ...imageSizes },
+      labels: { ...parent.labels, ...labels }
+    }),
+    [parent, components, resolveLink, resolveMedia, imageUrl, imageSizes, labels]
+  );
+  return /* @__PURE__ */ jsx(SiteThemeContext.Provider, { value, children });
+}
+function useSiteTheme() {
+  return useContext(SiteThemeContext);
+}
+
+// src/blocks/Blocks.tsx
+import { Fragment as Fragment4 } from "react";
+
+// src/links.ts
+var NODE_ID = /^web_nod_[0-9a-f-]{36}$/;
+function safeHref(url, resolve = () => null) {
+  if (typeof url !== "string" || url === "" || url.length > 2048 || /[\s<>"]/.test(url)) return null;
+  if (NODE_ID.test(url)) {
+    const resolved = resolve(url);
+    return resolved !== null && !NODE_ID.test(resolved) ? safeHref(resolved) : null;
+  }
+  if (url.startsWith("/") && !url.startsWith("//")) return url;
+  if (url.startsWith("#")) return url.length > 1 ? url : null;
+  if (/^mailto:[^@\s]+@[^@\s]+$/i.test(url) || /^tel:\+?[0-9 ().-]{3,30}$/i.test(url)) return url;
+  return /^https?:\/\/[^/]/i.test(url) ? url : null;
+}
+function readLink(value) {
+  if (typeof value === "string") return { url: value, label: null, new_tab: false };
+  if (value === null || typeof value !== "object") return null;
+  const link = value;
+  if (typeof link.url !== "string") return null;
+  return { url: link.url, label: typeof link.label === "string" ? link.label : null, new_tab: link.new_tab === true };
+}
+function targetProps(newTab) {
+  return newTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+}
+
+// src/menu/context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var MenuItemContext = createContext2(null);
+function useMenuItem() {
+  return useContext2(MenuItemContext);
+}
+function findItem(items, id) {
+  for (const item of items) {
+    if (item.id === id) return item;
+    const found = findItem(item.children, id);
+    if (found) return found;
+  }
+  return null;
+}
+
+// src/menu/MenuLinks.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MenuItemLink({ item, className }) {
+  const { resolveLink } = useSiteTheme();
+  const href = item.kind === "link" ? safeHref(item.url, resolveLink) : null;
+  if (!href) return /* @__PURE__ */ jsx2("span", { className, children: item.label });
+  return /* @__PURE__ */ jsx2("a", { className, href, "aria-current": item.active && item.children.length === 0 ? "page" : void 0, ...targetProps(item.new_tab), children: item.label });
+}
+function MenuLinks({ props }) {
+  const current = useMenuItem();
+  if (!current) return null;
+  const root = typeof props.item === "string" ? findItem([current], props.item) : current;
+  if (!root || root.children.length === 0) return null;
+  return /* @__PURE__ */ jsx2("ul", { className: "bapla-menu-links", children: root.children.map((child) => /* @__PURE__ */ jsxs("li", { "data-kind": child.kind, children: [
+    /* @__PURE__ */ jsx2(MenuItemLink, { item: child, className: child.kind === "heading" ? "bapla-menu-heading" : void 0 }),
+    child.children.length > 0 && /* @__PURE__ */ jsx2("ul", { children: child.children.map((grandchild) => /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(MenuItemLink, { item: grandchild }) }, grandchild.id)) })
+  ] }, child.id)) });
+}
+
+// src/media/Media.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Media({ media, alt, sizes = "100vw", cover = false, priority = false, className, style }) {
+  const { imageUrl } = useSiteTheme();
+  const text2 = alt ?? media.alt ?? "";
+  const classes = ["bapla-media", className].filter(Boolean).join(" ");
+  if (media.mime.startsWith("video/")) {
+    return /* @__PURE__ */ jsx3("video", { className: classes, style, src: mediaUrl(media), controls: true, preload: "metadata", width: media.width ?? void 0, height: media.height ?? void 0, "aria-label": text2 || void 0 });
+  }
+  const scalable = media.mime !== "image/svg+xml" && media.mime !== "image/gif";
+  const widths = scalable ? MEDIA_WIDTHS.filter((w) => media.width === null || w <= media.width) : [];
+  if (scalable && media.width !== null && !widths.includes(media.width) && media.width < MEDIA_WIDTHS[MEDIA_WIDTHS.length - 1]) {
+    widths.push(media.width);
+  }
+  const largest = widths.length > 0 ? Math.min(widths[widths.length - 1], 1280) : void 0;
+  return /* @__PURE__ */ jsx3(
+    "img",
+    {
+      className: classes,
+      src: largest !== void 0 ? imageUrl(media, { w: largest }) : mediaUrl(media),
+      srcSet: widths.length > 1 ? widths.map((w) => `${imageUrl(media, { w })} ${w}w`).join(", ") : void 0,
+      sizes: widths.length > 1 ? sizes : void 0,
+      alt: text2,
+      width: media.width ?? void 0,
+      height: media.height ?? void 0,
+      loading: priority ? "eager" : "lazy",
+      decoding: "async",
+      style: { ...cover ? { objectFit: "cover", objectPosition: objectPosition(media.focal_point) } : {}, ...style }
+    }
+  );
+}
+
+// src/richtext/RichText.tsx
+import { Fragment } from "react";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+var ALIGN = ["left", "center", "right", "justify"];
+function align(node) {
+  const value = node.attrs?.textAlign;
+  return typeof value === "string" && ALIGN.includes(value) && value !== "left" ? { textAlign: value } : void 0;
+}
+function span(value) {
+  return typeof value === "number" && Number.isInteger(value) && value > 1 && value < 100 ? value : void 0;
+}
+function RichText({ doc, className }) {
+  const theme = useSiteTheme();
+  if (doc === null || typeof doc !== "object" || doc.type !== "doc") return null;
+  const marks = (node, text2) => (node.marks ?? []).reduceRight((inner, mark) => {
+    switch (mark.type) {
+      case "bold":
+        return /* @__PURE__ */ jsx4("strong", { children: inner });
+      case "italic":
+        return /* @__PURE__ */ jsx4("em", { children: inner });
+      case "underline":
+        return /* @__PURE__ */ jsx4("u", { children: inner });
+      case "strike":
+        return /* @__PURE__ */ jsx4("s", { children: inner });
+      case "code":
+        return /* @__PURE__ */ jsx4("code", { children: inner });
+      case "link": {
+        const href = safeHref(mark.attrs?.href, theme.resolveLink);
+        if (href === null) return inner;
+        const blank = mark.attrs?.target === "_blank";
+        return /* @__PURE__ */ jsx4("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children: inner });
+      }
+      default:
+        return inner;
+    }
+  }, text2);
+  const children = (node) => (node.content ?? []).map((child, index) => /* @__PURE__ */ jsx4(Fragment, { children: render(child) }, index));
+  function render(node) {
+    switch (node.type) {
+      case "text":
+        return typeof node.text === "string" ? marks(node, node.text) : null;
+      case "paragraph":
+        return /* @__PURE__ */ jsx4("p", { style: align(node), children: children(node) });
+      case "hardBreak":
+        return /* @__PURE__ */ jsx4("br", {});
+      case "heading": {
+        const level = node.attrs?.level;
+        const Tag = level === 3 ? "h3" : level === 4 ? "h4" : "h2";
+        return /* @__PURE__ */ jsx4(Tag, { style: align(node), children: children(node) });
+      }
+      case "bulletList":
+        return /* @__PURE__ */ jsx4("ul", { children: children(node) });
+      case "orderedList": {
+        const start = typeof node.attrs?.start === "number" && node.attrs.start !== 1 ? node.attrs.start : void 0;
+        return /* @__PURE__ */ jsx4("ol", { start, children: children(node) });
+      }
+      case "listItem":
+        return /* @__PURE__ */ jsx4("li", { children: children(node) });
+      case "blockquote":
+        return /* @__PURE__ */ jsx4("blockquote", { children: children(node) });
+      case "codeBlock": {
+        const language = typeof node.attrs?.language === "string" && /^[a-z0-9+#-]{1,30}$/i.test(node.attrs.language) ? `language-${node.attrs.language}` : void 0;
+        return /* @__PURE__ */ jsx4("pre", { children: /* @__PURE__ */ jsx4("code", { className: language, children: (node.content ?? []).map((c) => c.text ?? "").join("") }) });
+      }
+      case "horizontalRule":
+        return /* @__PURE__ */ jsx4("hr", {});
+      case "image": {
+        const src = node.attrs?.src;
+        const alt = typeof node.attrs?.alt === "string" ? node.attrs.alt : "";
+        if (typeof src === "string" && src.startsWith("web_med_")) {
+          const media = readMedia(src, theme.resolveMedia);
+          return media ? /* @__PURE__ */ jsx4(Media, { media, alt: alt || null }) : null;
+        }
+        return typeof src === "string" && /^https:\/\/[^/]/.test(src) ? /* @__PURE__ */ jsx4("img", { src, alt, loading: "lazy", decoding: "async" }) : null;
+      }
+      case "table":
+        return /* @__PURE__ */ jsx4("div", { className: "bapla-table", children: /* @__PURE__ */ jsx4("table", { children: /* @__PURE__ */ jsx4("tbody", { children: children(node) }) }) });
+      case "tableRow":
+        return /* @__PURE__ */ jsx4("tr", { children: children(node) });
+      case "tableHeader":
+        return /* @__PURE__ */ jsx4("th", { colSpan: span(node.attrs?.colspan), rowSpan: span(node.attrs?.rowspan), scope: "col", children: children(node) });
+      case "tableCell":
+        return /* @__PURE__ */ jsx4("td", { colSpan: span(node.attrs?.colspan), rowSpan: span(node.attrs?.rowspan), children: children(node) });
+      default:
+        return node.content ? /* @__PURE__ */ jsx4(Fragment2, { children: children(node) }) : null;
+    }
+  }
+  return /* @__PURE__ */ jsx4("div", { className: ["bapla-richtext", className].filter(Boolean).join(" "), children: children(doc) });
+}
+
+// src/blocks/props.ts
+function choice(value, options, fallback) {
+  return typeof value === "string" && options.includes(value) ? value : fallback;
+}
+function integer(value, min, max) {
+  return typeof value === "number" && Number.isInteger(value) && value >= min && value <= max ? value : null;
+}
+function text(value) {
+  return typeof value === "string" && value.trim() !== "" ? value : null;
+}
+function flag(value) {
+  return value === true;
+}
+
+// src/blocks/content.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Text({ props }) {
+  return /* @__PURE__ */ jsx5(RichText, { doc: props.content, className: "bapla-text" });
+}
+function MediaBlock({ props }) {
+  const { resolveMedia, resolveLink } = useSiteTheme();
+  const media = readMedia(props.media, resolveMedia);
+  if (!media) return null;
+  const aspect = choice(props.aspect, ["auto", "16:9", "4:3", "1:1", "3:4"], "auto");
+  const caption = text(props.caption);
+  const link = readLink(props.link);
+  const href = link ? safeHref(link.url, resolveLink) : null;
+  const image = /* @__PURE__ */ jsx5(Media, { media, alt: text(props.alt), cover: aspect !== "auto" });
+  return /* @__PURE__ */ jsxs2("figure", { className: "bapla-figure", "data-aspect": aspect, children: [
+    href ? /* @__PURE__ */ jsx5("a", { href, ...targetProps(link?.new_tab ?? false), children: image }) : image,
+    caption && /* @__PURE__ */ jsx5("figcaption", { children: caption })
+  ] });
+}
+function Button({ props }) {
+  const { resolveLink } = useSiteTheme();
+  const label = text(props.label);
+  const link = readLink(props.link);
+  if (!label) return null;
+  const href = link ? safeHref(link.url, resolveLink) : null;
+  const attributes = {
+    className: "bapla-button",
+    "data-variant": choice(props.variant, ["primary", "secondary", "outline", "link"], "primary"),
+    "data-size": choice(props.size, ["sm", "md", "lg"], "md")
+  };
+  return href ? /* @__PURE__ */ jsx5("a", { href, ...attributes, ...targetProps(link?.new_tab ?? false), children: label }) : /* @__PURE__ */ jsx5("span", { ...attributes, "aria-disabled": "true", children: label });
+}
+function embedUrl(address) {
+  let url;
+  try {
+    url = new URL(address);
+  } catch {
+    return null;
+  }
+  if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+  const host = url.hostname.replace(/^www\./, "");
+  const id = (value) => value && /^[\w-]{1,64}$/.test(value) ? value : null;
+  if (host === "youtube.com" || host === "m.youtube.com" || host === "youtube-nocookie.com") {
+    const video = url.pathname === "/watch" ? id(url.searchParams.get("v")) : id(url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]);
+    return video ? `https://www.youtube-nocookie.com/embed/${video}` : null;
+  }
+  if (host === "youtu.be") {
+    const video = id(url.pathname.slice(1));
+    return video ? `https://www.youtube-nocookie.com/embed/${video}` : null;
+  }
+  if (host === "vimeo.com" || host === "player.vimeo.com") {
+    const video = url.pathname.match(/(\d{3,12})/)?.[1];
+    return video ? `https://player.vimeo.com/video/${video}` : null;
+  }
+  if (host === "dailymotion.com") {
+    const video = id(url.pathname.match(/^\/(?:embed\/)?video\/([^/]+)/)?.[1]);
+    return video ? `https://www.dailymotion.com/embed/video/${video}` : null;
+  }
+  if (host === "google.com" && url.pathname.startsWith("/maps/embed")) return `https://www.google.com${url.pathname}${url.search}`;
+  if (host === "openstreetmap.org" && url.pathname === "/export/embed.html") return `https://www.openstreetmap.org${url.pathname}${url.search}`;
+  return null;
+}
+function Embed({ props }) {
+  const { labels } = useSiteTheme();
+  const link = readLink(props.url);
+  if (!link) return null;
+  const src = embedUrl(link.url);
+  if (!src) {
+    const href = safeHref(link.url);
+    return href ? /* @__PURE__ */ jsx5("p", { className: "bapla-embed-link", children: /* @__PURE__ */ jsx5("a", { href, ...targetProps(true), children: link.label ?? link.url }) }) : null;
+  }
+  return /* @__PURE__ */ jsx5("div", { className: "bapla-embed", "data-aspect": choice(props.aspect, ["16:9", "4:3", "1:1"], "16:9"), children: /* @__PURE__ */ jsx5("iframe", { src, title: link.label ?? labels.embed, loading: "lazy", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin", allow: "fullscreen; picture-in-picture" }) });
+}
+
+// src/blocks/interactive.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const change = () => setReduced(query.matches);
+    query.addEventListener?.("change", change);
+    return () => query.removeEventListener?.("change", change);
+  }, []);
+  return reduced;
+}
+function Carousel({ block, props, render }) {
+  const { labels } = useSiteTheme();
+  const slides = block.children ?? [];
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const reduced = useReducedMotion();
+  const autoplay = flag(props.autoplay) && !reduced && slides.length > 1;
+  const interval = (integer(props.interval, 2, 30) ?? 5) * 1e3;
+  const playing = autoplay && !paused && !hovered;
+  const arrows = props.arrows === void 0 ? true : flag(props.arrows);
+  const dots = props.dots === void 0 ? true : flag(props.dots);
+  const count = slides.length;
+  useEffect(() => {
+    if (!playing) return;
+    const timer = window.setInterval(() => setIndex((i) => (i + 1) % count), interval);
+    return () => window.clearInterval(timer);
+  }, [playing, interval, count]);
+  if (count === 0) return null;
+  const go = (next) => setIndex((next + count) % count);
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowLeft") go(index - 1);
+    else if (event.key === "ArrowRight") go(index + 1);
+    else return;
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs3(
+    "section",
+    {
+      className: "bapla-carousel",
+      "aria-roledescription": "carousel",
+      "aria-label": labels.carousel,
+      onKeyDown,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setHovered(true),
+      onBlur: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "bapla-carousel-controls", children: [
+          autoplay && /* @__PURE__ */ jsx6("button", { type: "button", className: "bapla-carousel-play", onClick: () => setPaused((p) => !p), children: paused ? labels.play : labels.pause }),
+          arrows && count > 1 && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+            /* @__PURE__ */ jsx6("button", { type: "button", className: "bapla-carousel-prev", onClick: () => go(index - 1), children: labels.previous }),
+            /* @__PURE__ */ jsx6("button", { type: "button", className: "bapla-carousel-next", onClick: () => go(index + 1), children: labels.next })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "bapla-carousel-slides", "aria-live": playing ? "off" : "polite", children: slides.map((slide, i) => /* @__PURE__ */ jsx6("div", { role: "group", "aria-roledescription": "slide", "aria-label": labels.slide(i + 1, count), className: "bapla-carousel-slide", hidden: i !== index, children: render([slide]) }, slide.id)) }),
+        dots && count > 1 && /* @__PURE__ */ jsx6("div", { className: "bapla-carousel-dots", children: slides.map((slide, i) => /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": labels.goToSlide(i + 1), "aria-current": i === index ? "true" : void 0, onClick: () => go(i) }, slide.id)) })
+      ]
+    }
+  );
+}
+function Tabs({ block, props, render }) {
+  const tabs = block.children ?? [];
+  const [selected, setSelected] = useState(0);
+  const refs = useRef([]);
+  const base = useId();
+  if (tabs.length === 0) return null;
+  const select = (i) => {
+    const next = (i + tabs.length) % tabs.length;
+    setSelected(next);
+    refs.current[next]?.focus();
+  };
+  const onKeyDown = (event) => {
+    const keys = { ArrowRight: selected + 1, ArrowLeft: selected - 1, Home: 0, End: tabs.length - 1 };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    select(keys[event.key]);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "bapla-tabs", "data-alignment": choice(props.alignment, ["start", "center", "stretch"], "start"), children: [
+    /* @__PURE__ */ jsx6("div", { role: "tablist", className: "bapla-tablist", onKeyDown, children: tabs.map((tab, i) => /* @__PURE__ */ jsx6(
+      "button",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "button",
+        role: "tab",
+        id: `${base}-tab-${i}`,
+        "aria-selected": i === selected,
+        "aria-controls": `${base}-panel-${i}`,
+        tabIndex: i === selected ? 0 : -1,
+        onClick: () => setSelected(i),
+        children: text(tab.props?.label) ?? String(i + 1)
+      },
+      tab.id
+    )) }),
+    tabs.map((tab, i) => /* @__PURE__ */ jsx6("div", { role: "tabpanel", id: `${base}-panel-${i}`, "aria-labelledby": `${base}-tab-${i}`, tabIndex: 0, hidden: i !== selected, className: "bapla-tabpanel", children: render(tab.children) }, tab.id))
+  ] });
+}
+function Accordion({ block, props, render }) {
+  const items = block.children ?? [];
+  const multiple = flag(props.multiple);
+  const base = useId();
+  const [open, setOpen] = useState(() => {
+    const initial = items.filter((item) => flag(item.props?.open)).map((item) => item.id);
+    return new Set(multiple ? initial : initial.slice(0, 1));
+  });
+  const toggle = (id) => setOpen((current) => {
+    const next = new Set(multiple ? current : [...current].filter((x) => x === id));
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
+  return /* @__PURE__ */ jsx6("div", { className: "bapla-accordion", children: items.map((item, i) => {
+    const expanded = open.has(item.id);
+    return /* @__PURE__ */ jsxs3("div", { className: "bapla-accordion-item", children: [
+      /* @__PURE__ */ jsx6("h3", { children: /* @__PURE__ */ jsx6("button", { type: "button", id: `${base}-header-${i}`, "aria-expanded": expanded, "aria-controls": `${base}-panel-${i}`, onClick: () => toggle(item.id), children: text(item.props?.label) ?? String(i + 1) }) }),
+      /* @__PURE__ */ jsx6("div", { role: "region", id: `${base}-panel-${i}`, "aria-labelledby": `${base}-header-${i}`, hidden: !expanded, className: "bapla-accordion-panel", children: render(item.children) })
+    ] }, item.id);
+  }) });
+}
+function Passthrough({ children }) {
+  return /* @__PURE__ */ jsx6(Fragment3, { children });
+}
+
+// src/blocks/layout.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SIZES = ["none", "sm", "md", "lg"];
+function Section({ props, children }) {
+  const { resolveMedia } = useSiteTheme();
+  const background = choice(props.background, ["none", "muted", "accent", "dark", "image"], "none");
+  const image = background === "image" ? readMedia(props.background_image, resolveMedia) : null;
+  const anchor = text(props.anchor);
+  return /* @__PURE__ */ jsx7(
+    "section",
+    {
+      className: "bapla-section",
+      id: anchor && /^[A-Za-z][\w-]*$/.test(anchor) ? anchor : void 0,
+      "data-width": choice(props.width, ["narrow", "default", "wide", "full"], "default"),
+      "data-background": background,
+      "data-padding": choice(props.padding, SIZES, "md"),
+      style: image ? { backgroundImage: `url("${mediaUrl(image, { w: 1920 }).replace(/["\\()\s]/g, (c) => encodeURIComponent(c))}")` } : void 0,
+      children: /* @__PURE__ */ jsx7("div", { className: "bapla-container", children })
+    }
+  );
+}
+var GridContext = createContext3({ mode: "equal", unit: "twelfths" });
+function Grid({ block, props, children }) {
+  const mode = choice(props.mode, ["equal", "auto", "custom"], "equal");
+  const unit = choice(props.unit, ["twelfths", "percent"], "twelfths");
+  const columns = block.children ?? [];
+  let template;
+  if (mode === "auto") {
+    const min = integer(props.min_width, 120, 800) ?? 240;
+    template = `repeat(auto-fit, minmax(min(100%, ${min}px), 1fr))`;
+  } else if (mode === "custom" && unit === "percent") {
+    const widths = columns.map((column) => integer(column.props?.width, 1, 100) ?? Math.floor(100 / Math.max(columns.length, 1)));
+    const total = widths.reduce((sum, w) => sum + w, 0);
+    template = [...widths, ...total < 100 ? [100 - total] : []].map((w) => `minmax(0, ${w}fr)`).join(" ") || "minmax(0, 1fr)";
+  } else if (mode === "custom") {
+    template = "repeat(12, minmax(0, 1fr))";
+  } else {
+    const count = integer(props.columns, 1, 12) ?? Math.max(columns.length, 1);
+    template = `repeat(${count}, minmax(0, 1fr))`;
+  }
+  return /* @__PURE__ */ jsx7(GridContext.Provider, { value: { mode, unit }, children: /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "bapla-grid",
+      "data-mode": mode,
+      "data-unit": mode === "custom" ? unit : void 0,
+      "data-gap": choice(props.gap, SIZES, "md"),
+      "data-align": choice(props.align, ["start", "center", "end", "stretch"], "stretch"),
+      "data-stack": choice(props.stack_below, ["sm", "md", "lg", "never"], "md"),
+      style: { "--bapla-grid-cols": template },
+      children
+    }
+  ) });
+}
+function Column({ props, children }) {
+  const { mode, unit } = useContext3(GridContext);
+  const style = {};
+  if (mode === "custom" && unit === "twelfths") {
+    style["--bapla-col-span"] = `span ${integer(props.width, 1, 12) ?? 12}`;
+  }
+  const align2 = typeof props.align === "string" ? choice(props.align, ["start", "center", "end"], "start") : void 0;
+  return /* @__PURE__ */ jsx7("div", { className: "bapla-column", "data-align": align2, style, children });
+}
+function Divider({ props }) {
+  return /* @__PURE__ */ jsx7("hr", { className: "bapla-divider", "data-size": choice(props.size, SIZES, "md") });
+}
+function Spacer({ props }) {
+  return /* @__PURE__ */ jsx7("div", { className: "bapla-spacer", "aria-hidden": "true", "data-size": choice(props.size, ["sm", "md", "lg", "xl"], "md") });
+}
+
+// src/blocks/registry.ts
+var standardBlocks = {
+  section: Section,
+  grid: Grid,
+  column: Column,
+  text: Text,
+  media: MediaBlock,
+  carousel: Carousel,
+  tabs: Tabs,
+  tab: Passthrough,
+  accordion: Accordion,
+  accordion_item: Passthrough,
+  button: Button,
+  embed: Embed,
+  divider: Divider,
+  spacer: Spacer,
+  menu_links: MenuLinks
+};
+
+// src/blocks/Blocks.tsx
+import { Fragment as Fragment5, jsx as jsx8 } from "react/jsx-runtime";
+function Blocks({ blocks }) {
+  const { components } = useSiteTheme();
+  const registry = { ...standardBlocks, ...components };
+  const render = (list) => (Array.isArray(list) ? list : []).map((block, index) => {
+    const Component = block && typeof block.type === "string" ? registry[block.type] : void 0;
+    if (!Component) return null;
+    const props = block.props && typeof block.props === "object" && !Array.isArray(block.props) ? block.props : {};
+    return /* @__PURE__ */ jsx8(Fragment4, { children: /* @__PURE__ */ jsx8(Component, { block, props, render, children: block.children && block.children.length > 0 ? render(block.children) : null }) }, typeof block.id === "string" ? block.id : index);
+  });
+  return /* @__PURE__ */ jsx8(Fragment5, { children: render(blocks) });
+}
+
+// src/media/Image.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function Image({ media, size, w, h, fit, q, alt, widths, sizes, formats, priority = false, className, style }) {
+  const { imageUrl, imageSizes } = useSiteTheme();
+  const named = size !== void 0 ? imageSizes[size] ?? {} : {};
+  const box = { ...named, ...defined({ w, h, fit, q }) };
+  const text2 = alt ?? media.alt ?? "";
+  const classes = ["bapla-image", className].filter(Boolean).join(" ");
+  const common = {
+    alt: text2,
+    className: classes,
+    loading: priority ? "eager" : "lazy",
+    decoding: "async",
+    ...priority ? { fetchPriority: "high" } : {},
+    style: { ...box.fit === "cover" ? { objectFit: "cover", objectPosition: objectPosition(media.focal_point) } : {}, ...style }
+  };
+  if (!isTransformable(media)) {
+    return /* @__PURE__ */ jsx9("img", { ...common, src: mediaUrl(media), width: media.width ?? void 0, height: media.height ?? void 0 });
+  }
+  const [outW, outH] = output(media, box);
+  const candidates = (fm) => {
+    if (widths && widths.length > 0) {
+      const list = responsive(media, box, widths);
+      return list.map((width) => `${imageUrl(media, scaled(box, width, fm))} ${width}w`).join(", ");
+    }
+    const two = outW !== void 0 && media.width !== null && outW * 2 <= media.width;
+    return [`${imageUrl(media, transform(box, 1, fm))} 1x`, ...two ? [`${imageUrl(media, transform(box, 2, fm))} 2x`] : []].join(", ");
+  };
+  const responsiveSizes = widths && widths.length > 0 ? sizes ?? "100vw" : void 0;
+  const img = /* @__PURE__ */ jsx9(
+    "img",
+    {
+      ...common,
+      src: imageUrl(media, widths && widths.length > 0 ? scaled(box, Math.min(Math.max(...responsive(media, box, widths)), 1280)) : transform(box, 1)),
+      srcSet: candidates(),
+      sizes: responsiveSizes,
+      width: outW,
+      height: outH
+    }
+  );
+  if (!formats || formats.length === 0) return img;
+  return /* @__PURE__ */ jsxs4("picture", { children: [
+    formats.map((fm) => /* @__PURE__ */ jsx9("source", { type: `image/${fm}`, srcSet: candidates(fm), sizes: responsiveSizes }, fm)),
+    img
+  ] });
+}
+function output(media, box) {
+  const W = media.width;
+  const H = media.height;
+  if (W === null || H === null) return [box.w, box.h];
+  if (box.w === void 0 && box.h === void 0) return [W, H];
+  if (box.fit === "cover" && box.w !== void 0 && box.h !== void 0) {
+    const shrink = Math.min(1, W / box.w, H / box.h);
+    return [Math.round(box.w * shrink), Math.round(box.h * shrink)];
+  }
+  const scale = Math.min(1, box.w === void 0 ? 1 : box.w / W, box.h === void 0 ? 1 : box.h / H);
+  return [Math.round(W * scale), Math.round(H * scale)];
+}
+function transform(box, density, fm) {
+  return defined({
+    w: box.w === void 0 ? void 0 : box.w * density,
+    h: box.h === void 0 ? void 0 : box.h * density,
+    fit: box.fit,
+    q: box.q,
+    fm
+  });
+}
+function scaled(box, width, fm) {
+  const h = box.fit === "cover" && box.w !== void 0 && box.h !== void 0 ? Math.round(width * box.h / box.w) : void 0;
+  return defined({ w: width, h, fit: box.fit, q: box.q, fm });
+}
+function responsive(media, box, widths) {
+  const sorted = [...new Set(widths)].sort((a, b) => a - b);
+  if (media.width === null) return sorted;
+  const limit = box.fit === "cover" && box.w !== void 0 && box.h !== void 0 && media.height !== null ? Math.min(media.width, Math.floor(media.height * box.w / box.h)) : media.width;
+  const kept = sorted.filter((width) => width <= limit);
+  if (kept.length < sorted.length && !kept.includes(limit)) kept.push(limit);
+  return kept;
+}
+function defined(value) {
+  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== void 0));
+}
+
+// src/menu/NavBar.tsx
+import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function NavBar({ items, label, brand, className }) {
+  const { labels } = useSiteTheme();
+  const [open, setOpen] = useState2(false);
+  const [openItem, setOpenItem] = useState2(null);
+  const nav = useRef2(null);
+  const listId = useId2();
+  useEffect2(() => {
+    const close = (event) => {
+      if (nav.current && !nav.current.contains(event.target)) setOpenItem(null);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, []);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" && open && openItem === null) {
+      setOpen(false);
+      nav.current?.querySelector(".bapla-nav-toggle")?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    "nav",
+    {
+      ref: nav,
+      className: ["bapla-nav", className].filter(Boolean).join(" "),
+      "aria-label": label ?? labels.mainNavigation,
+      onKeyDown,
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpenItem(null);
+      },
+      children: [
+        brand && /* @__PURE__ */ jsx10("div", { className: "bapla-nav-brand", children: brand }),
+        /* @__PURE__ */ jsx10("button", { type: "button", className: "bapla-nav-toggle", "aria-expanded": open, "aria-controls": listId, onClick: () => setOpen((o) => !o), children: labels.menu }),
+        /* @__PURE__ */ jsx10("ul", { id: listId, className: "bapla-nav-list", "data-open": open ? "true" : "false", children: items.map((item) => /* @__PURE__ */ jsx10(NavItem, { item, level: 0, open: openItem === item.id, onToggle: (o) => setOpenItem(o ? item.id : null) }, item.id)) })
+      ]
+    }
+  );
+}
+function NavItem({ item, level, open, onToggle }) {
+  const { labels } = useSiteTheme();
+  const [openChild, setOpenChild] = useState2(null);
+  const button = useRef2(null);
+  const id = useId2();
+  const hasPanel = item.kind === "panel" && item.panel !== null && item.panel.length > 0;
+  const hasChildren = item.children.length > 0;
+  if (level > 0 && item.kind === "heading") {
+    return /* @__PURE__ */ jsxs5("li", { className: "bapla-nav-item", "data-kind": "heading", children: [
+      /* @__PURE__ */ jsx10("span", { className: "bapla-nav-heading", children: item.label }),
+      hasChildren && /* @__PURE__ */ jsx10(SubList, { items: item.children, level: level + 1, openChild, setOpenChild })
+    ] });
+  }
+  if (!hasPanel && !hasChildren) {
+    return /* @__PURE__ */ jsx10("li", { className: "bapla-nav-item", "data-kind": item.kind, "data-active": item.active ? "true" : void 0, children: /* @__PURE__ */ jsx10(MenuItemLink, { item, className: "bapla-nav-link" }) });
+  }
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" && open) {
+      event.stopPropagation();
+      onToggle(false);
+      button.current?.focus();
+    }
+  };
+  const linked = item.kind === "link" && item.url !== null;
+  return /* @__PURE__ */ jsxs5("li", { className: "bapla-nav-item", "data-kind": item.kind, "data-active": item.active ? "true" : void 0, "data-open": open ? "true" : "false", onKeyDown, children: [
+    linked && /* @__PURE__ */ jsx10(MenuItemLink, { item, className: "bapla-nav-link" }),
+    /* @__PURE__ */ jsx10(
+      "button",
+      {
+        ref: button,
+        type: "button",
+        className: "bapla-nav-disclosure",
+        "aria-expanded": open,
+        "aria-controls": id,
+        "aria-label": linked ? labels.submenu(item.label) : void 0,
+        onClick: () => onToggle(!open),
+        children: linked ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "bapla-nav-caret" }) : item.label
+      }
+    ),
+    hasPanel ? /* @__PURE__ */ jsx10("div", { id, className: "bapla-mega", hidden: !open, children: /* @__PURE__ */ jsx10(MenuItemContext.Provider, { value: item, children: /* @__PURE__ */ jsx10(Blocks, { blocks: item.panel }) }) }) : /* @__PURE__ */ jsx10(SubList, { id, hidden: !open, items: item.children, level: level + 1, openChild, setOpenChild })
+  ] });
+}
+function SubList({ id, hidden, items, level, openChild, setOpenChild }) {
+  return /* @__PURE__ */ jsx10("ul", { id, className: "bapla-nav-submenu", "data-level": level, hidden, children: items.map((child) => /* @__PURE__ */ jsx10(NavItem, { item: child, level, open: openChild === child.id, onToggle: (o) => setOpenChild(o ? child.id : null) }, child.id)) });
+}
+
+// src/menu/Breadcrumb.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Breadcrumb({ items, className }) {
+  const { labels, resolveLink } = useSiteTheme();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx11("nav", { className: ["bapla-breadcrumb", className].filter(Boolean).join(" "), "aria-label": labels.breadcrumb, children: /* @__PURE__ */ jsx11("ol", { children: items.map((item, i) => {
+    const last = i === items.length - 1;
+    const href = last ? null : safeHref(item.url, resolveLink);
+    return /* @__PURE__ */ jsx11("li", { children: last ? /* @__PURE__ */ jsx11("span", { "aria-current": "page", children: item.label }) : href ? /* @__PURE__ */ jsx11("a", { href, children: item.label }) : /* @__PURE__ */ jsx11("span", { children: item.label }) }, i);
+  }) }) });
+}
+export {
+  Accordion,
+  Blocks,
+  BlocksProvider,
+  Breadcrumb,
+  Button,
+  Carousel,
+  Column,
+  Divider,
+  Embed,
+  Grid,
+  Image,
+  MEDIA_WIDTHS,
+  Media,
+  MediaBlock,
+  MenuItemContext,
+  MenuItemLink,
+  MenuLinks,
+  NavBar,
+  RichText,
+  Section,
+  Spacer,
+  Tabs,
+  Text,
+  defaultImageSizes,
+  embedUrl,
+  fontImports,
+  fontStack,
+  frenchLabels,
+  imgproxyPath,
+  isTransformable,
+  mediaUrl,
+  objectPosition,
+  readLink,
+  readMedia,
+  safeHref,
+  standardBlocks,
+  targetProps,
+  themeCss,
+  useMenuItem,
+  useSiteTheme
+};