@sevenfold/setto-client 0.16.0 → 0.17.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,5 @@
+export { SettoLanguages } from './LanguageSwitcher';
+export { DEFAULT_LANGUAGE, languageName, pickInitialLanguage, siteLanguages, } from './lib/languages';
 export { SettoProvider, useSetto } from './provider';
 export { GuestEditProvider, useGuestEdit } from './guest-edit';
 export { SettoChrome, useSettoChromeSlot } from './chrome';

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,242 @@
-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;
+}
+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);
+    void i18n.changeLanguage(tag);
+    document.documentElement.lang = tag;
+  };
+  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 +22000,16 @@ 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 wanted = pickInitialLanguage(languages, void 0, readStoredLanguage());
+    if (wanted && wanted !== i18n.language) void i18n.changeLanguage(wanted);
+    document.documentElement.lang = wanted;
+  }, [i18n, languages]);
   const storeRef = useRef(null);
   const themeStoreRef = useRef(null);
   const assetStoreRef = useRef(null);
@@ -21809,7 +22052,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 +24847,7 @@ export {
   BLOCK_REGISTRY,
   BLOCK_TYPES,
   CHECKOUT_INTENT,
+  DEFAULT_LANGUAGE,
   EMPTY_I18N_STORE_SNAPSHOT,
   FAB_INSET,
   FAB_SIZE,
@@ -24621,6 +24866,7 @@ export {
   SettoForm,
   SettoIcon,
   SettoImage,
+  SettoLanguages,
   SettoMark,
   SettoProvider,
   SettoRepeater,
@@ -24640,11 +24886,14 @@ export {
   isAdminRoute,
   isFormFieldType,
   isLinkContext,
+  languageName,
   nodeChildren,
   parseBlockTree,
+  pickInitialLanguage,
   readLocaleFields,
   settoSubmissionUrl,
   siteHomeUrl,
+  siteLanguages,
   useCoarsePointer,
   useGuestEdit,
   useSectionTheme,