@sevenfold/setto-client 0.15.0 → 0.17.0

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)
@@ -21431,11 +21664,11 @@ function useSettoChromeSlot(name) {
       slotListeners.delete(listener);
     };
   }, []);
-  const Offered = slots.get(name) ?? null;
+  const Offered = slots.get(name);
   return useMemo(() => {
     if (!Offered) return null;
-    return function SettoChromeSlot() {
-      return /* @__PURE__ */ jsx(ChromeBoundary, { onError: () => retireSlot(name), children: /* @__PURE__ */ jsx(Offered, {}) });
+    return function SettoChromeSlot(props) {
+      return /* @__PURE__ */ jsx(ChromeBoundary, { onError: () => retireSlot(name), children: React.createElement(Offered, props) });
     };
   }, [Offered, name]);
 }
@@ -21552,7 +21785,7 @@ function withoutCheckoutIntent() {
 }
 const FAB_SIZE = 52;
 const FAB_INSET = 16;
-const STYLE_ID$3 = "setto-edit-layout";
+const STYLE_ID$2 = "setto-edit-layout";
 const HTML_CLASS = "setto-edit-mode";
 function useSettoDocumentLayout(active) {
   useEffect(() => {
@@ -21561,10 +21794,10 @@ function useSettoDocumentLayout(active) {
     html.classList.add(HTML_CLASS);
     html.style.setProperty("--setto-fab-size", `${FAB_SIZE}px`);
     html.style.setProperty("--setto-fab-inset", `${FAB_INSET}px`);
-    let styleEl = document.getElementById(STYLE_ID$3);
+    let styleEl = document.getElementById(STYLE_ID$2);
     if (!styleEl) {
       styleEl = document.createElement("style");
-      styleEl.id = STYLE_ID$3;
+      styleEl.id = STYLE_ID$2;
       styleEl.textContent = `
         html.setto-edit-mode {
           width: 100%;
@@ -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() {
@@ -21838,202 +22082,6 @@ function useGuestEdit() {
     }
   };
 }
-const PREVIEW_HOST = /(^|\.)site\.setto\.no$/i;
-function isPreviewHost(hostname) {
-  return PREVIEW_HOST.test(hostname);
-}
-function previewBarState(input) {
-  if (!input.onPreview || input.authLoading) return "hidden";
-  if (input.hasSession && !input.sitesLoaded) return "hidden";
-  if (!input.hasSession && input.soldPublic === null) return "hidden";
-  const bought = input.paidMarker || input.currentSiteIsLive || input.soldPublic === true;
-  if (bought) return "hidden";
-  return input.hasSession && input.hasCurrentSite ? "owner" : "visitor";
-}
-function SettoPreviewBar() {
-  const { supabase, api, config, session, authLoading, currentSite, sites, editMode } = useSetto();
-  const [onPreview, setOnPreview] = useState(false);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState(null);
-  const [paid, setPaid] = useState(false);
-  const [soldPublic, setSoldPublic] = useState(null);
-  useEffect(() => {
-    setOnPreview(isPreviewHost(window.location.hostname));
-    setPaid(new URLSearchParams(window.location.search).get("betaling") === "ok");
-  }, []);
-  useEffect(() => {
-    if (!onPreview || session) return;
-    let cancelled = false;
-    fetch(`${config.apiUrl}/onboarding/sites/${config.siteId}/sold`, {
-      headers: { Accept: "application/json" }
-    }).then((r) => r.ok ? r.json() : null).then((d) => {
-      if (!cancelled && d) setSoldPublic(d.sold === true);
-    }).catch(() => {
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [onPreview, session, config.apiUrl, config.siteId]);
-  const signIn = () => {
-    window.location.href = checkoutIntentUrl();
-  };
-  const next = () => {
-    if (window.parent !== window) {
-      window.parent.postMessage({ type: "setto:next", siteId: config.siteId }, "*");
-      return;
-    }
-    signIn();
-  };
-  const publish = async () => {
-    setBusy(true);
-    setError(null);
-    try {
-      const token = (await supabase.auth.getSession()).data.session?.access_token;
-      if (!token) {
-        signIn();
-        return;
-      }
-      const data = await api.request(
-        `/onboarding/sites/${config.siteId}/checkout`,
-        {
-          method: "POST",
-          // Back to the page they were looking at, not to a chat window.
-          body: { returnTo: window.location.origin + window.location.pathname }
-        },
-        "checkout"
-      );
-      if (!data.url) throw new Error("checkout_failed");
-      window.location.href = data.url;
-    } catch (err) {
-      const detail = err instanceof Error ? err.message : "";
-      setError(
-        detail.includes("already_paid") ? "Denne siden er allerede betalt." : detail.includes("not_found") ? "Fant ingen bestilling for denne siden på kontoen din." : detail.includes("stripe_not_configured") ? "Betaling er ikke satt opp ennå." : "Klarte ikke starte betalingen. Prøv igjen."
-      );
-      setBusy(false);
-    }
-  };
-  const resumed = useRef(false);
-  useEffect(() => {
-    if (resumed.current || !onPreview || !session || !currentSite) return;
-    if (!wantsCheckout()) return;
-    if (paid || currentSite.status === "live") return;
-    resumed.current = true;
-    window.history.replaceState(null, "", withoutCheckoutIntent());
-    void publish();
-  }, [onPreview, session, currentSite, paid]);
-  const state = previewBarState({
-    onPreview,
-    authLoading,
-    hasSession: !!session,
-    sitesLoaded: sites !== null,
-    hasCurrentSite: !!currentSite,
-    currentSiteIsLive: currentSite?.status === "live",
-    soldPublic,
-    paidMarker: paid
-  });
-  if (state === "hidden") return null;
-  const owner = state === "owner";
-  const name = currentSite?.display_name?.trim() || config.displayName?.trim() || config.siteId;
-  return createPortal(
-    /*
-     * Lifted above the editor's floating button when edit mode is on, which
-     * sits in the same corner band. Sideways would collide again the moment
-     * its toolbar opens, since that expands rightward.
-     */
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: editMode ? { ...barStyle, bottom: "calc(max(16px, env(safe-area-inset-bottom, 0px)) + 68px)" } : barStyle,
-        "data-setto-preview-bar": "",
-        children: owner ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { style: dotStyle, "aria-hidden": true }),
-          /* @__PURE__ */ jsxs("span", { style: labelStyle, children: [
-            "Du forhåndsviser nå ",
-            /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600 }, children: name })
-          ] }),
-          error && /* @__PURE__ */ jsx("span", { style: errorStyle, children: error }),
-          /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: publish, disabled: busy, children: busy ? "Åpner betaling …" : "Publiser" })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { style: dotStyle, "aria-hidden": true }),
-          /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Forhåndsvisning" }),
-          /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: next, children: "Neste" })
-        ] })
-      }
-    ),
-    document.body
-  );
-}
-const barStyle = {
-  position: "fixed",
-  left: "50%",
-  bottom: "max(16px, env(safe-area-inset-bottom, 0px))",
-  transform: "translateX(-50%)",
-  zIndex: 2147483e3,
-  display: "flex",
-  alignItems: "center",
-  gap: 14,
-  maxWidth: "calc(100vw - 24px)",
-  padding: "10px 10px 10px 18px",
-  borderRadius: 999,
-  background: "#211711",
-  color: "#fffdf8",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
-  fontSize: 14,
-  lineHeight: 1.3,
-  boxShadow: "0 18px 40px -18px rgba(0, 0, 0, 0.65)",
-  /*
-   * A frosted rim, so the pill reads as an object on any page.
-   *
-   * The bar sits on sites Setto did not choose the colours for: on a dark hero
-   * a dark pill disappears, and on a pale section its shadow is all that holds
-   * it. A translucent white border with `padding-box` clipping lets the page
-   * show through the rim itself, which separates the pill from either ground
-   * without picking a side.
-   */
-  border: "5px solid rgba(255, 255, 255, 0.22)",
-  backgroundClip: "padding-box",
-  backdropFilter: "blur(10px)",
-  WebkitBackdropFilter: "blur(10px)"
-};
-const dotStyle = {
-  width: 7,
-  height: 7,
-  borderRadius: "50%",
-  background: "#c4502a",
-  flex: "none"
-};
-const labelStyle = {
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis"
-};
-const primaryStyle = {
-  flex: "none",
-  padding: "9px 18px",
-  border: 0,
-  borderRadius: 999,
-  background: "#c4502a",
-  color: "#fffdf8",
-  font: "inherit",
-  fontWeight: 600,
-  cursor: "pointer"
-};
-const errorStyle = {
-  color: "#ffb4a2",
-  fontSize: 13,
-  /*
-   * Shrinkable, unlike the label beside it.
-   *
-   * `nowrap` on a flex child whose `min-width` is `auto` cannot shrink below
-   * its own text, so on a 320px phone the error shouldered «Publiser» 19px
-   * past the right edge of the screen and the bar clipped it — the button
-   * that takes the money, unreachable, exactly when something had gone wrong.
-   */
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-};
 function isLinkContext(el) {
   const key = el.getAttribute("data-setto-key");
   if (key?.startsWith("lang.")) return false;
@@ -22839,12 +22887,12 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
     )
   ] });
 }
-const STYLE_ID$2 = "setto-repeater-styles";
+const STYLE_ID$1 = "setto-repeater-styles";
 function useRepeaterStyles() {
   useEffect(() => {
-    if (document.getElementById(STYLE_ID$2)) return;
+    if (document.getElementById(STYLE_ID$1)) return;
     const el = document.createElement("style");
-    el.id = STYLE_ID$2;
+    el.id = STYLE_ID$1;
     el.textContent = `
       .setto-repeater-remove {
         opacity: 0;
@@ -23129,276 +23177,6 @@ function buildEnvelope(fields, values, extra) {
 function settoSubmissionUrl(apiUrl, siteId, formId) {
   return `${apiUrl.replace(/\/+$/, "")}/sites/${encodeURIComponent(siteId)}/forms/${encodeURIComponent(formId)}/submissions`;
 }
-const STYLE_ID$1 = "setto-form-edit-styles";
-function useFormEditStyles() {
-  useEffect(() => {
-    if (document.getElementById(STYLE_ID$1)) return;
-    const el = document.createElement("style");
-    el.id = STYLE_ID$1;
-    el.textContent = `
-      .setto-form-field-tools {
-        opacity: 0;
-        transition: opacity 120ms ease;
-      }
-      .setto-form__field:hover .setto-form-field-tools,
-      .setto-form__field:focus-within .setto-form-field-tools,
-      .setto-form-field-tools[data-open] {
-        opacity: 1;
-      }
-      @media (hover: none) {
-        .setto-form-field-tools { opacity: 1; }
-      }
-    `;
-    document.head.appendChild(el);
-  }, []);
-}
-function FormFieldTools({
-  field,
-  index,
-  count,
-  autoOpen,
-  onMove,
-  onRemove,
-  onChange
-}) {
-  useFormEditStyles();
-  const [open, setOpen] = useState(autoOpen === true);
-  const gearRef = useRef(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-setto-ui": true,
-        className: "setto-form-field-tools",
-        style: toolsStyle,
-        ...open ? { "data-open": "" } : {},
-        onMouseDown: (e) => e.stopPropagation(),
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(ToolButton, { label: "Flytt opp", disabled: index === 0, onClick: () => onMove(-1), children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "up" }) }),
-          /* @__PURE__ */ jsx(
-            ToolButton,
-            {
-              label: "Flytt ned",
-              disabled: index === count - 1,
-              onClick: () => onMove(1),
-              children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "down" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolButton,
-            {
-              ref: gearRef,
-              label: "Feltinnstillinger",
-              active: open,
-              onClick: () => setOpen((o) => !o),
-              children: /* @__PURE__ */ jsx(GearIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolButton, { label: "Fjern felt", disabled: count <= 1, onClick: onRemove, danger: true, children: "×" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FloatingPopover,
-      {
-        open,
-        anchorRef: gearRef,
-        onClose: () => setOpen(false),
-        ariaLabel: "Feltinnstillinger",
-        minWidth: 300,
-        style: { width: 300, padding: 14 },
-        children: /* @__PURE__ */ jsx(FieldSettings, { field, onChange })
-      }
-    )
-  ] });
-}
-function FieldSettings({ field, onChange }) {
-  const [label, setLabel] = useState(field.label);
-  const [placeholder, setPlaceholder] = useState(field.placeholder);
-  const [options, setOptions] = useState(field.options.join("\n"));
-  const [name, setName] = useState(field.name);
-  useEffect(() => setLabel(field.label), [field.label]);
-  useEffect(() => setPlaceholder(field.placeholder), [field.placeholder]);
-  useEffect(() => setName(field.name), [field.name]);
-  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 10, fontSize: 13, color: "#222" }, children: [
-    /* @__PURE__ */ jsx(Row, { label: "Type", children: /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: field.type,
-        onChange: (e) => onChange({ type: e.target.value }),
-        style: inputStyle$1,
-        children: FORM_FIELD_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: FORM_FIELD_TYPE_LABELS[type] }, type))
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Row, { label: "Etikett", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: label,
-        onChange: (e) => setLabel(e.target.value),
-        onBlur: () => label !== field.label && onChange({ label }),
-        style: inputStyle$1
-      }
-    ) }),
-    fieldTypeHasPlaceholder(field.type) ? /* @__PURE__ */ jsx(Row, { label: "Plassholder", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: placeholder,
-        onChange: (e) => setPlaceholder(e.target.value),
-        onBlur: () => placeholder !== field.placeholder && onChange({ placeholder }),
-        style: inputStyle$1
-      }
-    ) }) : null,
-    fieldTypeHasOptions(field.type) ? /* @__PURE__ */ jsx(Row, { label: "Alternativer", hint: "Ett per linje", children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        value: options,
-        rows: 4,
-        onChange: (e) => setOptions(e.target.value),
-        onBlur: () => options !== field.options.join("\n") && onChange({ options }),
-        style: { ...inputStyle$1, resize: "vertical", fontFamily: "inherit" }
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: field.required,
-          onChange: (e) => onChange({ required: e.target.checked })
-        }
-      ),
-      "Må fylles ut"
-    ] }),
-    /* @__PURE__ */ jsx(Row, { label: "Teknisk navn", hint: "Brukes i e-posten og i historikken", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: name,
-        onChange: (e) => setName(e.target.value),
-        onBlur: () => {
-          const next = name.trim();
-          if (next && next !== field.name) onChange({ name: next });
-          else setName(field.name);
-        },
-        style: { ...inputStyle$1, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
-      }
-    ) })
-  ] });
-}
-function Row({ label, hint, children }) {
-  return /* @__PURE__ */ jsxs("label", { style: { display: "grid", gap: 4 }, children: [
-    /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "#666" }, children: [
-      label,
-      hint ? /* @__PURE__ */ jsxs("span", { style: { color: "#999" }, children: [
-        " · ",
-        hint
-      ] }) : null
-    ] }),
-    children
-  ] });
-}
-function ToolButton({ label, onClick, disabled, active, danger, children, ref }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      "data-setto-ui": true,
-      "aria-label": label,
-      title: label,
-      disabled,
-      onClick,
-      style: {
-        ...toolBtnStyle,
-        ...active ? { background: "#640AFF", color: "#fff", borderColor: "#640AFF" } : {},
-        ...danger ? { fontSize: 16 } : {},
-        ...disabled ? { opacity: 0.35, cursor: "default" } : {}
-      },
-      children
-    }
-  );
-}
-function ArrowIcon({ direction }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      style: direction === "down" ? { transform: "rotate(180deg)" } : void 0,
-      children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })
-    }
-  );
-}
-function GearIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "13",
-      height: "13",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-        /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
-      ]
-    }
-  );
-}
-const toolsStyle = {
-  position: "absolute",
-  top: -12,
-  right: 0,
-  zIndex: 2,
-  display: "flex",
-  gap: 4,
-  padding: 3,
-  background: "#ffffff",
-  border: "1px solid #e0e0e0",
-  borderRadius: 999,
-  boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
-};
-const toolBtnStyle = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 24,
-  height: 24,
-  padding: 0,
-  background: "transparent",
-  border: "1px solid transparent",
-  borderRadius: "50%",
-  fontSize: 13,
-  lineHeight: 1,
-  color: "#444",
-  cursor: "pointer"
-};
-const inputStyle$1 = {
-  width: "100%",
-  boxSizing: "border-box",
-  padding: "6px 8px",
-  border: "1px solid #d8d8d8",
-  borderRadius: 6,
-  fontSize: 13,
-  color: "#222",
-  background: "#fff",
-  fontFamily: "inherit"
-};
 const HONEYPOT_NAME = "website";
 const warnedEndpointKeys = /* @__PURE__ */ new Set();
 function cx(...parts) {
@@ -23414,6 +23192,7 @@ function SettoForm({
 }) {
   const { t, i18n } = useTranslation();
   const { config, editMode, store } = useSetto();
+  const FieldTools = useSettoChromeSlot("form-field-tools");
   const guestEdit = useGuestEdit();
   const editable = editMode || guestEdit.active;
   const lng = i18n.language;
@@ -23661,8 +23440,8 @@ function SettoForm({
                   }
                 ),
                 error ? /* @__PURE__ */ jsx("p", { id: errorId, className: cx("setto-form__field-error", classNames.fieldError), children: t(`form.validation.${error}`, { defaultValue: FIELD_ERROR_DEFAULTS[error] }) }) : null,
-                editable && store ? /* @__PURE__ */ jsx(
-                  FormFieldTools,
+                editable && store && FieldTools ? /* @__PURE__ */ jsx(
+                  FieldTools,
                   {
                     field,
                     index,
@@ -25063,222 +24842,21 @@ function collectRelativeKeys(nodes, prefix, out) {
     }
   }
 }
-const IN_PROGRESS_STATUSES = ["pending", "building"];
-function isDeploymentInProgress(status) {
-  return IN_PROGRESS_STATUSES.includes(status);
-}
-const STALE_PENDING_MS = 20 * 60 * 1e3;
-const STALE_BUILDING_MS = 45 * 60 * 1e3;
-function isDeploymentStale(row) {
-  if (row.status !== "pending" && row.status !== "building") return false;
-  const now = Date.now();
-  if (row.status === "pending") {
-    return now - new Date(row.started_at).getTime() > STALE_PENDING_MS;
-  }
-  return now - new Date(row.updated_at).getTime() > STALE_BUILDING_MS;
-}
-async function fetchInProgressDeploymentId(supabase, siteId) {
-  const { data } = await supabase.from("deployments").select("id, status, started_at, updated_at").eq("site_id", siteId).in("status", [...IN_PROGRESS_STATUSES]).order("started_at", { ascending: false }).limit(5);
-  const rows = data ?? [];
-  const fresh = rows.find((r) => !isDeploymentStale(r));
-  return fresh?.id ?? null;
-}
-async function waitForDeploymentByCommit(supabase, siteId, commitSha, timeoutMs = 6e4) {
-  const deadline = Date.now() + timeoutMs;
-  while (Date.now() < deadline) {
-    const { data } = await supabase.from("deployments").select("id").eq("site_id", siteId).eq("commit_sha", commitSha).order("started_at", { ascending: false }).limit(1).maybeSingle();
-    if (data?.id) return data.id;
-    await new Promise((r) => setTimeout(r, 2e3));
-  }
-  return null;
-}
-function useDeploymentStatus(supabase, deploymentId) {
-  const [row, setRow] = useState(null);
-  useEffect(() => {
-    if (!deploymentId) {
-      setRow(null);
-      return;
-    }
-    let channel = null;
-    let cancelled = false;
-    const load = async () => {
-      const { data } = await supabase.from("deployments").select("*").eq("id", deploymentId).maybeSingle();
-      if (!cancelled && data) setRow(data);
-    };
-    void load();
-    channel = supabase.channel(`setto-dep-${deploymentId}`).on(
-      "postgres_changes",
-      {
-        event: "UPDATE",
-        schema: "public",
-        table: "deployments",
-        filter: `id=eq.${deploymentId}`
-      },
-      (payload) => {
-        setRow(payload.new);
-      }
-    ).subscribe();
-    return () => {
-      cancelled = true;
-      if (channel) supabase.removeChannel(channel);
-    };
-  }, [supabase, deploymentId]);
-  return { row, status: row?.status ?? null };
-}
-function deploymentStepIndex(status) {
-  switch (status) {
-    case "pending":
-      return 0;
-    case "building":
-      return 1;
-    case "ready":
-      return 2;
-    default:
-      return -1;
-  }
-}
-function isDeploymentStepReached(status, i) {
-  return deploymentStepIndex(status) >= i;
-}
-const STEPS = ["Committed", "Building", "Deployed"];
-const PROGRESS_STYLE_ID = "setto-publish-progress-styles";
-function usePublishProgressStyles() {
-  useEffect(() => {
-    if (document.getElementById(PROGRESS_STYLE_ID)) return;
-    const el = document.createElement("style");
-    el.id = PROGRESS_STYLE_ID;
-    el.textContent = `
-      @keyframes setto-step-pulse {
-        0%, 100% { opacity: 1; transform: scaleY(1); }
-        50% { opacity: 0.72; transform: scaleY(0.82); }
-      }
-      @keyframes setto-step-shimmer {
-        0% { background-position: 120% 0; }
-        100% { background-position: -120% 0; }
-      }
-      .setto-step-bar-active {
-        animation: setto-step-pulse 1.5s ease-in-out infinite;
-        transform-origin: center bottom;
-      }
-      .setto-step-bar-shimmer {
-        background: linear-gradient(
-          90deg,
-          #640aff 0%,
-          #8b5cf6 45%,
-          #640aff 90%
-        ) !important;
-        background-size: 220% 100% !important;
-        animation: setto-step-shimmer 2.2s ease-in-out infinite;
-      }
-      .setto-step-label-active {
-        animation: setto-step-pulse 1.5s ease-in-out infinite;
-      }
-    `;
-    document.head.appendChild(el);
-  }, []);
-}
-function PublishProgressSteps({
-  status,
-  compact,
-  buildingElapsed
-}) {
-  usePublishProgressStyles();
-  const scopeId = useId().replace(/:/g, "");
-  const errored = status === "error" || status === "canceled";
-  const activeIndex = deploymentStepIndex(status);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `setto-progress-${scopeId}`,
-      style: {
-        display: "flex",
-        gap: compact ? 3 : 8,
-        fontSize: compact ? 11 : 12,
-        minWidth: compact ? 100 : 200
-      },
-      children: STEPS.map((label, i) => {
-        const reached = isDeploymentStepReached(status, i);
-        const active = activeIndex === i && !errored;
-        const barClass = active ? "setto-step-bar-active setto-step-bar-shimmer" : void 0;
-        return /* @__PURE__ */ jsxs("div", { style: { flex: 1, textAlign: "center", minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: barClass,
-              style: {
-                height: compact ? 3 : 4,
-                borderRadius: 2,
-                background: errored ? "#fca5a5" : reached ? "#640AFF" : "#e5e5e5",
-                marginBottom: compact ? 0 : 6,
-                transition: "background 0.35s ease"
-              }
-            }
-          ),
-          !compact ? /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: active ? "setto-step-label-active" : void 0,
-              style: {
-                color: active ? "#1a1a1a" : "#888",
-                fontWeight: active ? 500 : 400,
-                display: "inline-block"
-              },
-              children: [
-                label,
-                active && status === "building" && buildingElapsed != null ? ` (${buildingElapsed}s)` : active ? " …" : ""
-              ]
-            }
-          ) : null
-        ] }, label);
-      })
-    }
-  );
-}
-function PublishProgressBar({ status, compact, href }) {
-  const inner = /* @__PURE__ */ jsx(PublishProgressSteps, { status, compact });
-  const wrapStyle = {
-    fontSize: compact ? 11 : 12,
-    minWidth: compact ? 100 : 200
-  };
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        title: "Se publiseringsstatus",
-        style: {
-          ...wrapStyle,
-          display: "block",
-          textDecoration: "none",
-          color: "inherit",
-          cursor: "pointer",
-          borderRadius: 4,
-          padding: compact ? "4px 2px" : void 0
-        },
-        children: inner
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { style: wrapStyle, children: inner });
-}
 export {
   AuthGate,
   BLOCK_REGISTRY,
   BLOCK_TYPES,
   CHECKOUT_INTENT,
+  DEFAULT_LANGUAGE,
   EMPTY_I18N_STORE_SNAPSHOT,
   FAB_INSET,
   FAB_SIZE,
   FORM_FIELD_TYPES,
   FORM_FIELD_TYPE_LABELS,
+  FloatingPopover,
   GuestEditProvider,
-  IN_PROGRESS_STATUSES,
-  PublishProgressBar,
-  PublishProgressSteps,
   SETTO_BASE,
   SETTO_MODULES,
-  STALE_BUILDING_MS,
-  STALE_PENDING_MS,
   SettoAdminApp,
   SettoAnimation,
   SettoBlock,
@@ -25288,8 +24866,8 @@ export {
   SettoForm,
   SettoIcon,
   SettoImage,
+  SettoLanguages,
   SettoMark,
-  SettoPreviewBar,
   SettoProvider,
   SettoRepeater,
   SettoSection,
@@ -25300,30 +24878,28 @@ export {
   checkoutIntentUrl,
   currentAdminView,
   extractContentKeys,
-  fetchInProgressDeploymentId,
+  fieldTypeHasOptions,
+  fieldTypeHasPlaceholder,
   formFieldsPrefix,
   isAdminDeploymentView,
   isAdminPanelView,
   isAdminRoute,
-  isDeploymentInProgress,
-  isDeploymentStale,
   isFormFieldType,
   isLinkContext,
-  isPreviewHost,
+  languageName,
   nodeChildren,
   parseBlockTree,
-  previewBarState,
+  pickInitialLanguage,
   readLocaleFields,
   settoSubmissionUrl,
   siteHomeUrl,
+  siteLanguages,
   useCoarsePointer,
-  useDeploymentStatus,
   useGuestEdit,
   useSectionTheme,
   useSetto,
   useSettoChromeSlot,
   validateBlockTree,
-  waitForDeploymentByCommit,
   wantsCheckout,
   withoutCheckoutIntent
 };