@sevenfold/setto-client 0.28.1 → 0.29.0

package/dist/LanguageSwitcher.d.ts

@@ -18,8 +18,13 @@
  * back to nothing.
  */
 export interface SettoLanguagesProps {
-    /** Every language the site speaks, primary first. */
-    languages: readonly string[];
+    /**
+     * Every language the site speaks, primary first. Read from the provider's
+     * config when left out, which is what a site should do: the list lives in
+     * `setto.config.json` and grows when a customer adds a language in Språk,
+     * so a header that hard-codes it goes stale the first time they do.
+     */
+    languages?: readonly string[];
     /**
      * Rendered in the flow of the page rather than fixed in a corner.
      *
@@ -28,7 +33,7 @@ export interface SettoLanguagesProps {
      */
     inline?: boolean;
 }
-export declare function SettoLanguages({ languages, inline }: SettoLanguagesProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SettoLanguages({ languages: given, inline }: SettoLanguagesProps): import("react/jsx-runtime").JSX.Element | null;
 /**
  * The floating copy, mounted by the provider.
  *

package/dist/setto-client.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useRef, useEffect, useMemo, useId, useInsertionEffect, Children, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore, forwardRef, Fragment as Fragment$1 } from "react";
 import { useTranslation } from "react-i18next";
@@ -72,235 +72,6 @@ function pickInitialLanguage(available, browserLanguages = typeof navigator ===
   }
   return fallback;
 }
-function normalise(pathname) {
-  const path2 = pathname.startsWith("/") ? pathname : `/${pathname}`;
-  return path2.length > 1 && path2.endsWith("/") ? path2.slice(0, -1) : path2;
-}
-function languageFromPath(pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
-  const path2 = normalise(pathname);
-  const first = path2.split("/")[1] ?? "";
-  const match = languages.find(
-    (tag) => tag !== primary && tag.toLowerCase() === first.toLowerCase()
-  );
-  if (!match) return { language: primary, basename: "", rest: path2 };
-  const rest = path2.slice(first.length + 1);
-  return { language: match, basename: `/${match}`, rest: rest === "" ? "/" : rest };
-}
-function pathForLanguage(pathname, target, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
-  const { rest } = languageFromPath(pathname, languages, primary);
-  if (target === primary) return rest;
-  return rest === "/" ? `/${target}` : `/${target}${rest}`;
-}
-function alternateLinks(origin, pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
-  if (languages.length < 2) return [];
-  const links = languages.map((tag) => ({
-    hreflang: tag,
-    href: origin + pathForLanguage(pathname, tag, languages, primary)
-  }));
-  links.push({
-    hreflang: "x-default",
-    href: origin + pathForLanguage(pathname, primary, languages, primary)
-  });
-  return links;
-}
-function isReservedPath(pathname) {
-  return pathname === "/setto" || pathname.startsWith("/setto/");
-}
-function redirectForVisitor(pathname, languages, browserLanguages, stored, primary = languages[0] ?? DEFAULT_LANGUAGE) {
-  if (languages.length < 2) return null;
-  if (isReservedPath(pathname)) return null;
-  const current = languageFromPath(pathname, languages, primary);
-  if (current.basename !== "") return null;
-  if (stored) {
-    return stored !== primary && languages.includes(stored) ? pathForLanguage(pathname, stored, languages, primary) : null;
-  }
-  for (const wanted of browserLanguages) {
-    const base = wanted.toLowerCase().split("-")[0];
-    if (!base) continue;
-    if (base === primary.toLowerCase().split("-")[0]) return null;
-    const norwegian2 = ["no", "nb", "nn"];
-    if (norwegian2.includes(base) && norwegian2.includes(primary.toLowerCase())) return null;
-    const hit = languages.find((tag) => tag.toLowerCase().split("-")[0] === base);
-    if (hit && hit !== primary) return pathForLanguage(pathname, hit, languages, primary);
-  }
-  return null;
-}
-const INLINE_MARKER = "data-setto-languages-inline";
-function SettoLanguages({ languages, inline = false }) {
-  const { i18n } = useTranslation();
-  const [open, setOpen] = useState(false);
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!inline) return;
-    const root2 = document.documentElement;
-    const count = Number(root2.getAttribute(INLINE_MARKER) ?? "0") + 1;
-    root2.setAttribute(INLINE_MARKER, String(count));
-    return () => {
-      const left = Number(root2.getAttribute(INLINE_MARKER) ?? "1") - 1;
-      if (left > 0) root2.setAttribute(INLINE_MARKER, String(left));
-      else root2.removeAttribute(INLINE_MARKER);
-    };
-  }, [inline]);
-  useEffect(() => {
-    if (!open) return;
-    const onDown = (e) => {
-      if (!ref.current?.contains(e.target)) setOpen(false);
-    };
-    const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", onDown);
-    document.addEventListener("keydown", onKey);
-    return () => {
-      document.removeEventListener("mousedown", onDown);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
-  if (languages.length < 2) return null;
-  const current = i18n.language;
-  const choose = (tag) => {
-    setOpen(false);
-    if (tag === current) return;
-    storeLanguage(tag);
-    const target = pathForLanguage(window.location.pathname, tag, languages);
-    window.location.assign(target + window.location.search + window.location.hash);
-  };
-  return /* @__PURE__ */ jsxs("div", { ref, style: inline ? inlineWrapStyle : floatingWrapStyle, children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => setOpen((o) => !o),
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-label": `Språk: ${languageName(current)}`,
-        style: inline ? inlineTriggerStyle : floatingTriggerStyle,
-        children: [
-          /* @__PURE__ */ jsx(GlobeIcon, {}),
-          languageName(current)
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx("ul", { role: "listbox", style: inline ? inlineListStyle : floatingListStyle, children: languages.map((tag) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "option",
-        "aria-selected": tag === current,
-        onClick: () => choose(tag),
-        style: {
-          ...optionStyle,
-          fontWeight: tag === current ? 600 : 400
-        },
-        children: languageName(tag)
-      }
-    ) }, tag)) }) : null
-  ] });
-}
-function AutoLanguageSwitcher({ languages }) {
-  const [inlineElsewhere, setInlineElsewhere] = useState(false);
-  useEffect(() => {
-    const check = () => setInlineElsewhere(document.documentElement.hasAttribute(INLINE_MARKER));
-    check();
-    const observer = new MutationObserver(check);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: [INLINE_MARKER]
-    });
-    return () => observer.disconnect();
-  }, []);
-  if (inlineElsewhere || languages.length < 2) return null;
-  return /* @__PURE__ */ jsx(SettoLanguages, { languages });
-}
-function GlobeIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "15",
-      height: "15",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.8",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3c2.4 2.6 3.6 5.6 3.6 9s-1.2 6.4-3.6 9c-2.4-2.6-3.6-5.6-3.6-9S9.6 5.6 12 3z" })
-      ]
-    }
-  );
-}
-const floatingWrapStyle = {
-  position: "fixed",
-  left: "max(16px, env(safe-area-inset-left))",
-  bottom: "max(16px, env(safe-area-inset-bottom))",
-  zIndex: 2147482e3,
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
-};
-const inlineWrapStyle = {
-  position: "relative",
-  display: "inline-block",
-  fontFamily: "inherit"
-};
-const triggerBase = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 7,
-  minHeight: 40,
-  fontSize: 13.5,
-  fontWeight: 500,
-  lineHeight: 1,
-  cursor: "pointer"
-};
-const floatingTriggerStyle = {
-  ...triggerBase,
-  padding: "8px 14px",
-  borderRadius: 999,
-  border: "1px solid rgba(127, 127, 127, 0.32)",
-  background: "rgba(255, 255, 255, 0.82)",
-  backdropFilter: "blur(8px)",
-  WebkitBackdropFilter: "blur(8px)",
-  color: "#1a1a1a",
-  boxShadow: "0 4px 14px rgba(0, 0, 0, 0.12)"
-};
-const inlineTriggerStyle = {
-  ...triggerBase,
-  padding: "8px 6px",
-  border: 0,
-  borderRadius: 8,
-  background: "transparent",
-  color: "inherit",
-  opacity: 0.75
-};
-const listBase = {
-  position: "absolute",
-  margin: 0,
-  padding: 4,
-  listStyle: "none",
-  minWidth: 150,
-  borderRadius: 12,
-  border: "1px solid rgba(127, 127, 127, 0.24)",
-  background: "#ffffff",
-  boxShadow: "0 12px 32px rgba(0, 0, 0, 0.18)",
-  zIndex: 1
-};
-const floatingListStyle = { ...listBase, left: 0, bottom: "calc(100% + 8px)" };
-const inlineListStyle = { ...listBase, left: 0, top: "calc(100% + 8px)" };
-const optionStyle = {
-  display: "block",
-  width: "100%",
-  minHeight: 40,
-  padding: "9px 12px",
-  border: 0,
-  borderRadius: 8,
-  background: "transparent",
-  color: "#1a1a1a",
-  fontSize: 13.5,
-  textAlign: "left",
-  cursor: "pointer"
-};
 function __rest(s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21473,6 +21244,59 @@ class I18nStore {
     for (const fn of this.listeners) fn(this.cachedSnapshot);
   }
 }
+function normalise(pathname) {
+  const path2 = pathname.startsWith("/") ? pathname : `/${pathname}`;
+  return path2.length > 1 && path2.endsWith("/") ? path2.slice(0, -1) : path2;
+}
+function languageFromPath(pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  const path2 = normalise(pathname);
+  const first = path2.split("/")[1] ?? "";
+  const match = languages.find(
+    (tag) => tag !== primary && tag.toLowerCase() === first.toLowerCase()
+  );
+  if (!match) return { language: primary, basename: "", rest: path2 };
+  const rest = path2.slice(first.length + 1);
+  return { language: match, basename: `/${match}`, rest: rest === "" ? "/" : rest };
+}
+function pathForLanguage(pathname, target, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  const { rest } = languageFromPath(pathname, languages, primary);
+  if (target === primary) return rest;
+  return rest === "/" ? `/${target}` : `/${target}${rest}`;
+}
+function alternateLinks(origin, pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  if (languages.length < 2) return [];
+  const links = languages.map((tag) => ({
+    hreflang: tag,
+    href: origin + pathForLanguage(pathname, tag, languages, primary)
+  }));
+  links.push({
+    hreflang: "x-default",
+    href: origin + pathForLanguage(pathname, primary, languages, primary)
+  });
+  return links;
+}
+function isReservedPath(pathname) {
+  return pathname === "/setto" || pathname.startsWith("/setto/");
+}
+function redirectForVisitor(pathname, languages, browserLanguages, stored, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  if (languages.length < 2) return null;
+  if (isReservedPath(pathname)) return null;
+  const current = languageFromPath(pathname, languages, primary);
+  if (current.basename !== "") return null;
+  if (stored) {
+    return stored !== primary && languages.includes(stored) ? pathForLanguage(pathname, stored, languages, primary) : null;
+  }
+  for (const wanted of browserLanguages) {
+    const base = wanted.toLowerCase().split("-")[0];
+    if (!base) continue;
+    if (base === primary.toLowerCase().split("-")[0]) return null;
+    const norwegian2 = ["no", "nb", "nn"];
+    if (norwegian2.includes(base) && norwegian2.includes(primary.toLowerCase())) return null;
+    const hit = languages.find((tag) => tag.toLowerCase().split("-")[0] === base);
+    if (hit && hit !== primary) return pathForLanguage(pathname, hit, languages, primary);
+  }
+  return null;
+}
 const SETTO_IMAGE_REPO_DIR = "public/images/setto";
 const SETTO_IMAGE_URL_PREFIX = "/images/setto";
 const MIME_EXT = {
@@ -36368,6 +36192,219 @@ function useSetto() {
   }
   return ctx;
 }
+const INLINE_MARKER = "data-setto-languages-inline";
+function SettoLanguages({ languages: given, inline = false }) {
+  const { i18n } = useTranslation();
+  const setto = useContext(SettoContext);
+  const configured = setto?.config.languages;
+  const languages = given ?? siteLanguages(configured, configured?.[0]);
+  const [open, setOpen] = useState(false);
+  const [hover, setHover] = useState(false);
+  const [surface, setSurface] = useState(null);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!inline) return;
+    const root2 = document.documentElement;
+    const count = Number(root2.getAttribute(INLINE_MARKER) ?? "0") + 1;
+    root2.setAttribute(INLINE_MARKER, String(count));
+    return () => {
+      const left = Number(root2.getAttribute(INLINE_MARKER) ?? "1") - 1;
+      if (left > 0) root2.setAttribute(INLINE_MARKER, String(left));
+      else root2.removeAttribute(INLINE_MARKER);
+    };
+  }, [inline]);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!ref.current?.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  if (languages.length < 2) return null;
+  const current = i18n.language;
+  const toggle = () => {
+    if (!open && inline && ref.current) setSurface(surroundings(ref.current));
+    setOpen((o) => !o);
+  };
+  const choose = (tag) => {
+    setOpen(false);
+    if (tag === current) return;
+    storeLanguage(tag);
+    const target = pathForLanguage(window.location.pathname, tag, languages);
+    window.location.assign(target + window.location.search + window.location.hash);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, style: inline ? inlineWrapStyle : floatingWrapStyle, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        onMouseEnter: () => setHover(true),
+        onMouseLeave: () => setHover(false),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-label": `Språk: ${languageName(current)}`,
+        title: inline ? languageName(current) : void 0,
+        style: inline ? { ...inlineTriggerStyle, opacity: hover || open ? 1 : inlineTriggerStyle.opacity } : floatingTriggerStyle,
+        children: [
+          /* @__PURE__ */ jsx(GlobeIcon, {}),
+          inline ? shortCode(current) : languageName(current)
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "ul",
+      {
+        role: "listbox",
+        style: inline ? { ...inlineListStyle, ...surface ? { background: surface.background, color: surface.color } : {} } : floatingListStyle,
+        children: languages.map((tag) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": tag === current,
+            onClick: () => choose(tag),
+            style: {
+              ...optionStyle,
+              ...inline ? { color: "inherit" } : {},
+              fontWeight: tag === current ? 600 : 400
+            },
+            children: languageName(tag)
+          }
+        ) }, tag))
+      }
+    ) : null
+  ] });
+}
+function AutoLanguageSwitcher({ languages }) {
+  const [inlineElsewhere, setInlineElsewhere] = useState(false);
+  useEffect(() => {
+    const check = () => setInlineElsewhere(document.documentElement.hasAttribute(INLINE_MARKER));
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [INLINE_MARKER]
+    });
+    return () => observer.disconnect();
+  }, []);
+  if (inlineElsewhere || languages.length < 2) return null;
+  return /* @__PURE__ */ jsx(SettoLanguages, { languages });
+}
+function shortCode(tag) {
+  return tag.toUpperCase();
+}
+function surroundings(el) {
+  const color2 = getComputedStyle(el).color;
+  for (let node2 = el; node2; node2 = node2.parentElement) {
+    const background = getComputedStyle(node2).backgroundColor;
+    if (background && !/^(transparent|rgba\(.*,\s*0\))$/.test(background)) return { background, color: color2 };
+  }
+  return { background: "#ffffff", color: "#1a1a1a" };
+}
+function GlobeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3c2.4 2.6 3.6 5.6 3.6 9s-1.2 6.4-3.6 9c-2.4-2.6-3.6-5.6-3.6-9S9.6 5.6 12 3z" })
+      ]
+    }
+  );
+}
+const floatingWrapStyle = {
+  position: "fixed",
+  left: "max(16px, env(safe-area-inset-left))",
+  bottom: "max(16px, env(safe-area-inset-bottom))",
+  zIndex: 2147482e3,
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
+};
+const inlineWrapStyle = {
+  position: "relative",
+  display: "inline-block",
+  fontFamily: "inherit"
+};
+const triggerBase = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 7,
+  minHeight: 40,
+  fontSize: 13.5,
+  fontWeight: 500,
+  lineHeight: 1,
+  cursor: "pointer"
+};
+const floatingTriggerStyle = {
+  ...triggerBase,
+  padding: "8px 14px",
+  borderRadius: 999,
+  border: "1px solid rgba(127, 127, 127, 0.32)",
+  background: "rgba(255, 255, 255, 0.82)",
+  backdropFilter: "blur(8px)",
+  WebkitBackdropFilter: "blur(8px)",
+  color: "#1a1a1a",
+  boxShadow: "0 4px 14px rgba(0, 0, 0, 0.12)"
+};
+const inlineTriggerStyle = {
+  ...triggerBase,
+  gap: 5,
+  minHeight: 36,
+  padding: "6px 6px",
+  border: 0,
+  borderRadius: 8,
+  background: "transparent",
+  color: "inherit",
+  fontSize: 12,
+  fontWeight: 500,
+  letterSpacing: "0.06em",
+  opacity: 0.7,
+  transition: "opacity 160ms ease"
+};
+const listBase = {
+  position: "absolute",
+  margin: 0,
+  padding: 4,
+  listStyle: "none",
+  minWidth: 150,
+  borderRadius: 12,
+  border: "1px solid rgba(127, 127, 127, 0.24)",
+  background: "#ffffff",
+  boxShadow: "0 12px 32px rgba(0, 0, 0, 0.18)",
+  zIndex: 1
+};
+const floatingListStyle = { ...listBase, left: 0, bottom: "calc(100% + 8px)" };
+const inlineListStyle = { ...listBase, right: 0, top: "calc(100% + 8px)" };
+const optionStyle = {
+  display: "block",
+  width: "100%",
+  minHeight: 40,
+  padding: "9px 12px",
+  border: 0,
+  borderRadius: 8,
+  background: "transparent",
+  color: "#1a1a1a",
+  fontSize: 13.5,
+  textAlign: "left",
+  cursor: "pointer"
+};
 function GuestEditProvider({ children }) {
   const { guestEdit, themeStore } = useSetto();
   const SectionTools = useSettoChromeSlot("section-toolbar");