@sevenfold/setto-client 0.16.0 → 0.18.0

package/dist/LanguageSwitcher.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The control a visitor uses to read the site in their own language.
+ *
+ * Mounted by `SettoProvider` rather than placed by the agent, and only when
+ * the site actually speaks more than one language — so it costs a Norwegian
+ * plumber's site nothing, and a site that gains a second language grows the
+ * control without anybody editing a header.
+ *
+ * That decision is worth stating because it is a trade. Auto-mounting means
+ * the switcher cannot sit inside a design it knows nothing about, so it sits
+ * in a corner instead: quiet, small, and out of the way of whatever the agent
+ * built. A site that wants it in its own header can render `<SettoLanguages>`
+ * anywhere and pass `inline`, and the floating one stands down.
+ *
+ * Styling is inline for the same reason the editing chrome's is: this renders
+ * inside a page whose stylesheet Setto did not write, and most of these sites
+ * ship Tailwind's Preflight, which would otherwise strip a bare `<button>`
+ * back to nothing.
+ */
+export interface SettoLanguagesProps {
+    /** Every language the site speaks, primary first. */
+    languages: readonly string[];
+    /**
+     * Rendered in the flow of the page rather than fixed in a corner.
+     *
+     * Also tells the auto-mounted copy to stand down, so a site that places its
+     * own switcher does not end up with two.
+     */
+    inline?: boolean;
+}
+export declare function SettoLanguages({ languages, inline }: SettoLanguagesProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The floating copy, mounted by the provider.
+ *
+ * Renders nothing when the site places its own, and nothing when there is only
+ * one language to be in.
+ */
+export declare function AutoLanguageSwitcher({ languages }: {
+    languages: readonly string[];
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+export { SettoLanguages } from './LanguageSwitcher';
+export { DEFAULT_LANGUAGE, languageName, pickInitialLanguage, siteLanguages, } from './lib/languages';
+export { alternateLinks, languageFromPath, pathForLanguage, redirectForVisitor, type LanguageRoute, } from './lib/language-routing';
 export { SettoProvider, useSetto } from './provider';
 export { GuestEditProvider, useGuestEdit } from './guest-edit';
 export { SettoChrome, useSettoChromeSlot } from './chrome';

package/dist/lib/language-routing.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The language lives in the URL.
+ *
+ * It did not, for one release: the choice was kept per browser in
+ * `localStorage`, which is invisible to a search engine and unshareable
+ * between people. A Norwegian plumber who wants to be found in English cannot
+ * be, if the English version has no address. So the primary language stays at
+ * the root — `/`, `/priser` — and every other language takes a prefix:
+ * `/en`, `/en/priser`.
+ *
+ * Primary at the root rather than `/no/…` deliberately: every Setto site alive
+ * today has its Norwegian pages at the root, they are linked to and indexed
+ * there, and moving them would trade a real thing for a tidy one.
+ *
+ * The routes themselves never learn about this. `BrowserRouter` takes the
+ * prefix as its `basename`, so a site's own `/priser` keeps matching whether
+ * the visitor is at `/priser` or `/en/priser` — which matters because those
+ * routes are written per site by the build agent, and a scheme that required
+ * it to think about languages is a scheme that would be got wrong.
+ */
+export interface LanguageRoute {
+    /** The language this URL is in. */
+    language: string;
+    /** `''` for the primary language, `/en` otherwise. Feed to `basename`. */
+    basename: string;
+    /** The path with the prefix removed, always starting with `/`. */
+    rest: string;
+}
+/**
+ * Read the language out of a path.
+ *
+ * Only a prefix that is a language this site actually speaks counts — a site
+ * with a page at `/no` and no Norwegian in its list keeps that page.
+ */
+export declare function languageFromPath(pathname: string, languages: readonly string[], primary?: string): LanguageRoute;
+/** The same page, in another language. */
+export declare function pathForLanguage(pathname: string, target: string, languages: readonly string[], primary?: string): string;
+/**
+ * Every address this page has, for `hreflang`.
+ *
+ * Without these a search engine sees two unrelated pages that happen to say
+ * similar things, and picks one. `x-default` points at the primary, which is
+ * what a reader with no stated preference should land on.
+ */
+export declare function alternateLinks(origin: string, pathname: string, languages: readonly string[], primary?: string): Array<{
+    hreflang: string;
+    href: string;
+}>;
+/**
+ * Where a first-time visitor should be sent, or null to leave them alone.
+ *
+ * Only ever from the unprefixed root towards a prefix, only when the browser
+ * asks for a language this site speaks and the visitor has expressed no
+ * preference of their own here before. One direction only: a redirect that can
+ * send `/en` back to `/` is a redirect that can loop, and somebody who has
+ * clicked «Norsk» on an English page must not be bounced back to English on
+ * their next click.
+ */
+export declare function redirectForVisitor(pathname: string, languages: readonly string[], browserLanguages: readonly string[], stored: string | null, primary?: string): string | null;

package/dist/lib/languages.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Which languages a site speaks, and which one a visitor is reading.
+ *
+ * Every Setto site has been Norwegian-only, not because the machinery could
+ * not hold more — `I18nStore` has taken a language argument since the
+ * beginning and the publish path already serialises one bundle per language —
+ * but because nothing ever told a site it had a second one, and nothing gave a
+ * visitor a way to ask for it.
+ *
+ * The choice is deliberately per browser and not per URL. A path prefix
+ * (`/en/…`) is the better answer for search engines and the wrong answer for
+ * this pipeline today: every site is a single-page app whose routes the agent
+ * writes, and quietly doubling every route is not a thing to do to thirteen
+ * live sites in one release. Recorded here rather than hidden: when these
+ * sites want to be found in two languages, this is the decision to revisit.
+ */
+/** Norwegian is the floor: every site has it, and it is what the agent writes. */
+export declare const DEFAULT_LANGUAGE = "no";
+/** «Norsk», or the tag itself when we have no name for it. */
+export declare function languageName(tag: string): string;
+/**
+ * The languages this site actually speaks, primary first, no duplicates.
+ *
+ * A configured list that forgets to include the primary language is a site
+ * whose own copy is unreachable, so the primary is inserted rather than
+ * trusted.
+ */
+export declare function siteLanguages(configured: readonly string[] | undefined, primary?: string): string[];
+/** What this browser last chose here, if anything. */
+export declare function readStoredLanguage(): string | null;
+export declare function storeLanguage(tag: string): void;
+/**
+ * The language to open in.
+ *
+ * Their own previous choice first — it is the only signal that is definitely
+ * about this site. Then what the browser asks for, matched on the base tag so
+ * `en-GB` finds `en`. Then the site's primary, which is always present.
+ *
+ * Note what is *not* here: no geolocation, and no guessing from a domain. A
+ * Norwegian abroad is still Norwegian, and a site that decides it knows better
+ * than `Accept-Language` is a site people fight with.
+ */
+export declare function pickInitialLanguage(available: readonly string[], browserLanguages?: readonly string[], stored?: string | null): string;

package/dist/setto-client.js

@@ -1,9 +1,295 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useRef, useEffect, useMemo, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore, forwardRef, Fragment as Fragment$1, useId, useInsertionEffect } from "react";
 import { useTranslation } from "react-i18next";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
+const STORAGE_KEY$1 = "setto.lang";
+const DEFAULT_LANGUAGE = "no";
+const ENDONYMS = {
+  no: "Norsk",
+  nb: "Norsk",
+  nn: "Nynorsk",
+  en: "English",
+  sv: "Svenska",
+  da: "Dansk",
+  de: "Deutsch",
+  fr: "Français",
+  es: "Español",
+  it: "Italiano",
+  nl: "Nederlands",
+  pl: "Polski",
+  pt: "Português",
+  fi: "Suomi",
+  is: "Íslenska",
+  lt: "Lietuvių",
+  uk: "Українська",
+  ru: "Русский",
+  ar: "العربية",
+  tr: "Türkçe",
+  so: "Soomaali",
+  ti: "ትግርኛ",
+  th: "ไทย",
+  vi: "Tiếng Việt",
+  zh: "中文",
+  ja: "日本語"
+};
+function languageName(tag) {
+  const base = tag.toLowerCase().split("-")[0] ?? tag;
+  return ENDONYMS[base] ?? tag.toUpperCase();
+}
+function siteLanguages(configured, primary = DEFAULT_LANGUAGE) {
+  const out = [primary];
+  for (const tag of configured ?? []) {
+    if (tag && !out.includes(tag)) out.push(tag);
+  }
+  return out;
+}
+function readStoredLanguage() {
+  try {
+    return window.localStorage.getItem(STORAGE_KEY$1);
+  } catch {
+    return null;
+  }
+}
+function storeLanguage(tag) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY$1, tag);
+  } catch {
+  }
+}
+function pickInitialLanguage(available, browserLanguages = typeof navigator === "undefined" ? [] : navigator.languages ?? [navigator.language], stored = null) {
+  const fallback = available[0] ?? DEFAULT_LANGUAGE;
+  if (stored && available.includes(stored)) return stored;
+  for (const wanted of browserLanguages) {
+    const base = wanted.toLowerCase().split("-")[0];
+    if (!base) continue;
+    const hit = available.find((tag) => tag.toLowerCase().split("-")[0] === base);
+    if (hit) return hit;
+    if ((base === "nb" || base === "nn" || base === "no") && available.includes("no")) {
+      return "no";
+    }
+  }
+  return fallback;
+}
+function normalise(pathname) {
+  const path = pathname.startsWith("/") ? pathname : `/${pathname}`;
+  return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+}
+function languageFromPath(pathname, languages, primary = languages[0] ?? DEFAULT_LANGUAGE) {
+  const path = normalise(pathname);
+  const first = path.split("/")[1] ?? "";
+  const match = languages.find(
+    (tag) => tag !== primary && tag.toLowerCase() === first.toLowerCase()
+  );
+  if (!match) return { language: primary, basename: "", rest: path };
+  const rest = path.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 norwegian = ["no", "nb", "nn"];
+    if (norwegian.includes(base) && norwegian.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 root = document.documentElement;
+    const count = Number(root.getAttribute(INLINE_MARKER) ?? "0") + 1;
+    root.setAttribute(INLINE_MARKER, String(count));
+    return () => {
+      const left = Number(root.getAttribute(INLINE_MARKER) ?? "1") - 1;
+      if (left > 0) root.setAttribute(INLINE_MARKER, String(left));
+      else root.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: triggerStyle,
+        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 triggerStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 7,
+  minHeight: 40,
+  padding: "8px 14px",
+  borderRadius: 999,
+  border: "1px solid rgba(127, 127, 127, 0.32)",
+  // Translucent over whatever the site put behind it, and legible either way.
+  background: "rgba(255, 255, 255, 0.82)",
+  backdropFilter: "blur(8px)",
+  WebkitBackdropFilter: "blur(8px)",
+  color: "#1a1a1a",
+  fontSize: 13.5,
+  fontWeight: 500,
+  lineHeight: 1,
+  cursor: "pointer",
+  boxShadow: "0 4px 14px rgba(0, 0, 0, 0.12)"
+};
+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)
@@ -21767,6 +22053,40 @@ function SettoProvider({ config, children }) {
   }, []);
   const access = useSiteAccess(supabase, session, config.siteId);
   const { i18n } = useTranslation();
+  const languages = useMemo(
+    () => siteLanguages(config.languages, config.languages?.[0]),
+    [config.languages]
+  );
+  useEffect(() => {
+    if (!i18n || languages.length < 2) return;
+    const redirect = redirectForVisitor(
+      window.location.pathname,
+      languages,
+      navigator.languages ?? [navigator.language],
+      readStoredLanguage()
+    );
+    if (redirect && redirect !== window.location.pathname) {
+      window.location.replace(redirect + window.location.search + window.location.hash);
+      return;
+    }
+    const { language } = languageFromPath(window.location.pathname, languages);
+    if (language !== i18n.language) void i18n.changeLanguage(language);
+    document.documentElement.lang = language;
+  }, [i18n, languages]);
+  useEffect(() => {
+    if (languages.length < 2) return;
+    const links = alternateLinks(window.location.origin, window.location.pathname, languages);
+    const added = links.map(({ hreflang, href }) => {
+      const el = document.createElement("link");
+      el.rel = "alternate";
+      el.hreflang = hreflang;
+      el.href = href;
+      el.dataset.settoAlternate = "";
+      document.head.appendChild(el);
+      return el;
+    });
+    return () => added.forEach((el) => el.remove());
+  }, [languages]);
   const storeRef = useRef(null);
   const themeStoreRef = useRef(null);
   const assetStoreRef = useRef(null);
@@ -21809,7 +22129,8 @@ function SettoProvider({ config, children }) {
   const editShellActive = editMode && !!value.store;
   return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }),
-    /* @__PURE__ */ jsx(SettoChrome, {})
+    /* @__PURE__ */ jsx(SettoChrome, {}),
+    /* @__PURE__ */ jsx(AutoLanguageSwitcher, { languages })
   ] }) });
 }
 function useSetto() {
@@ -24603,6 +24924,7 @@ export {
   BLOCK_REGISTRY,
   BLOCK_TYPES,
   CHECKOUT_INTENT,
+  DEFAULT_LANGUAGE,
   EMPTY_I18N_STORE_SNAPSHOT,
   FAB_INSET,
   FAB_SIZE,
@@ -24621,6 +24943,7 @@ export {
   SettoForm,
   SettoIcon,
   SettoImage,
+  SettoLanguages,
   SettoMark,
   SettoProvider,
   SettoRepeater,
@@ -24629,6 +24952,7 @@ export {
   T,
   adminRedirectUrl,
   adminViewUrl,
+  alternateLinks,
   checkoutIntentUrl,
   currentAdminView,
   extractContentKeys,
@@ -24640,11 +24964,17 @@ export {
   isAdminRoute,
   isFormFieldType,
   isLinkContext,
+  languageFromPath,
+  languageName,
   nodeChildren,
   parseBlockTree,
+  pathForLanguage,
+  pickInitialLanguage,
   readLocaleFields,
+  redirectForVisitor,
   settoSubmissionUrl,
   siteHomeUrl,
+  siteLanguages,
   useCoarsePointer,
   useGuestEdit,
   useSectionTheme,