@sevenfold/setto-client 0.8.5 → 0.10.0

package/dist/setto-client.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { useState, useRef, useEffect, useSyncExternalStore, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, useInsertionEffect, forwardRef, Fragment as Fragment$1 } from "react";
 import { useTranslation } from "react-i18next";
+import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
 function __rest(s, e) {
   var t = {};
@@ -5039,26 +5041,26 @@ var PostgrestClient = class PostgrestClient2 {
     this.schemaName = schema;
     this.urlLengthLimit = urlLengthLimit;
     const originalFetch = fetch$1 !== null && fetch$1 !== void 0 ? fetch$1 : globalThis.fetch;
-    if (timeout !== void 0 && timeout > 0) this.fetch = (input, init) => {
+    if (timeout !== void 0 && timeout > 0) this.fetch = (input2, init) => {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), timeout);
       const existingSignal = init === null || init === void 0 ? void 0 : init.signal;
       if (existingSignal) {
         if (existingSignal.aborted) {
           clearTimeout(timeoutId);
-          return originalFetch(input, init);
+          return originalFetch(input2, init);
         }
         const abortHandler = () => {
           clearTimeout(timeoutId);
           controller.abort();
         };
         existingSignal.addEventListener("abort", abortHandler, { once: true });
-        return originalFetch(input, _objectSpread2$2(_objectSpread2$2({}, init), {}, { signal: controller.signal })).finally(() => {
+        return originalFetch(input2, _objectSpread2$2(_objectSpread2$2({}, init), {}, { signal: controller.signal })).finally(() => {
           clearTimeout(timeoutId);
           existingSignal.removeEventListener("abort", abortHandler);
         });
       }
-      return originalFetch(input, _objectSpread2$2(_objectSpread2$2({}, init), {}, { signal: controller.signal })).finally(() => clearTimeout(timeoutId));
+      return originalFetch(input2, _objectSpread2$2(_objectSpread2$2({}, init), {}, { signal: controller.signal })).finally(() => clearTimeout(timeoutId));
     };
     else this.fetch = originalFetch;
     this.retry = retry;
@@ -20182,25 +20184,25 @@ const fetchWithAuth = (supabaseKey, supabaseUrl, getAccessToken, customFetch, tr
   const traceEnabled = (tracePropagationOptions === null || tracePropagationOptions === void 0 ? void 0 : tracePropagationOptions.enabled) === true;
   const respectSampling = (tracePropagationOptions === null || tracePropagationOptions === void 0 ? void 0 : tracePropagationOptions.respectSamplingDecision) !== false;
   const traceTargets = traceEnabled ? getDefaultPropagationTargets(supabaseUrl) : null;
-  return async (input, init) => {
+  return async (input2, init) => {
     var _await$getAccessToken;
     const accessToken = (_await$getAccessToken = await getAccessToken()) !== null && _await$getAccessToken !== void 0 ? _await$getAccessToken : supabaseKey;
     let headers = new HeadersConstructor(init === null || init === void 0 ? void 0 : init.headers);
     if (!headers.has("apikey")) headers.set("apikey", supabaseKey);
     if (!headers.has("Authorization")) headers.set("Authorization", `Bearer ${accessToken}`);
     if (traceTargets) {
-      const traceHeaders = await getTraceHeaders(input, traceTargets, respectSampling);
+      const traceHeaders = await getTraceHeaders(input2, traceTargets, respectSampling);
       if (traceHeaders) {
         if (traceHeaders.traceparent && !headers.has("traceparent")) headers.set("traceparent", traceHeaders.traceparent);
         if (traceHeaders.tracestate && !headers.has("tracestate")) headers.set("tracestate", traceHeaders.tracestate);
         if (traceHeaders.baggage && !headers.has("baggage")) headers.set("baggage", traceHeaders.baggage);
       }
     }
-    return fetch$1(input, _objectSpread2(_objectSpread2({}, init), {}, { headers }));
+    return fetch$1(input2, _objectSpread2(_objectSpread2({}, init), {}, { headers }));
   };
 };
-async function getTraceHeaders(input, targets, respectSampling) {
-  if (!shouldPropagateToTarget(typeof input === "string" ? input : input instanceof URL ? input : input.url, targets)) return null;
+async function getTraceHeaders(input2, targets, respectSampling) {
+  if (!shouldPropagateToTarget(typeof input2 === "string" ? input2 : input2 instanceof URL ? input2 : input2.url, targets)) return null;
   const traceContext = await extractTraceContext();
   if (!traceContext || !traceContext.traceparent) return null;
   if (respectSampling) {
@@ -21310,14 +21312,14 @@ class ThemeStore {
     for (const fn of this.listeners) fn(this.cachedSnapshot);
   }
 }
-const EMPTY = {
+const EMPTY$1 = {
   sites: null,
   currentSite: null,
   loading: true,
   error: null
 };
 function useSiteAccess(supabase, session, siteId) {
-  const [state, setState] = useState(EMPTY);
+  const [state, setState] = useState(EMPTY$1);
   const cachedUserIdRef = useRef(null);
   useEffect(() => {
     if (!session) {
@@ -21358,6 +21360,71 @@ function useSiteAccess(supabase, session, siteId) {
   }, [supabase, session, siteId]);
   return state;
 }
+const CHROME_CONTRACT = 1;
+function chromeUrl(apiUrl) {
+  return `${apiUrl.replace(/\/$/, "")}/chrome/v${CHROME_CONTRACT}.js`;
+}
+function SettoChrome() {
+  const setto = useSetto();
+  const listeners = useRef(/* @__PURE__ */ new Set());
+  const stateRef = useRef(() => ({
+    hasSession: false,
+    accessToken: null,
+    currentSite: null,
+    sitesLoaded: false,
+    editMode: false,
+    authLoading: true
+  }));
+  stateRef.current = () => ({
+    hasSession: !!setto.session,
+    accessToken: setto.session?.access_token ?? null,
+    currentSite: setto.currentSite ? {
+      id: setto.currentSite.id,
+      display_name: setto.currentSite.display_name,
+      status: setto.currentSite.status
+    } : null,
+    sitesLoaded: setto.sites !== null,
+    editMode: setto.editMode,
+    authLoading: setto.authLoading
+  });
+  useEffect(() => {
+    for (const listener of listeners.current) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  });
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (window.__settoChromeLoaded__) return;
+    try {
+      window.__setto__ = {
+        contract: CHROME_CONTRACT,
+        react: React,
+        reactDom: ReactDOM,
+        config: {
+          siteId: setto.config.siteId,
+          apiUrl: setto.config.apiUrl,
+          displayName: setto.config.displayName
+        },
+        getState: () => stateRef.current(),
+        subscribe: (listener) => {
+          listeners.current.add(listener);
+          return () => listeners.current.delete(listener);
+        }
+      };
+      const script = document.createElement("script");
+      script.src = chromeUrl(setto.config.apiUrl);
+      script.async = true;
+      script.onerror = () => void 0;
+      document.head.appendChild(script);
+      window.__settoChromeLoaded__ = true;
+    } catch {
+    }
+  }, []);
+  return null;
+}
 const SETTO_BASE = "/setto";
 function siteHomeUrl(pathname = "/") {
   const u = new URL(window.location.href);
@@ -21392,202 +21459,6 @@ function withoutCheckoutIntent() {
   u.searchParams.delete(CHECKOUT_INTENT);
   return u.pathname + (u.search || "") + u.hash;
 }
-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$1, 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$1 = {
-  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"
-};
 const FAB_SIZE = 52;
 const FAB_INSET = 16;
 const STYLE_ID$3 = "setto-edit-layout";
@@ -22268,13 +22139,13 @@ function isDeploymentInProgress(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;
+function isDeploymentStale(row2) {
+  if (row2.status !== "pending" && row2.status !== "building") return false;
   const now = Date.now();
-  if (row.status === "pending") {
-    return now - new Date(row.started_at).getTime() > STALE_PENDING_MS;
+  if (row2.status === "pending") {
+    return now - new Date(row2.started_at).getTime() > STALE_PENDING_MS;
   }
-  return now - new Date(row.updated_at).getTime() > STALE_BUILDING_MS;
+  return now - new Date(row2.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);
@@ -22292,7 +22163,7 @@ async function waitForDeploymentByCommit(supabase, siteId, commitSha, timeoutMs
   return null;
 }
 function useDeploymentStatus(supabase, deploymentId) {
-  const [row, setRow] = useState(null);
+  const [row2, setRow] = useState(null);
   useEffect(() => {
     if (!deploymentId) {
       setRow(null);
@@ -22322,7 +22193,7 @@ function useDeploymentStatus(supabase, deploymentId) {
       if (channel) supabase.removeChannel(channel);
     };
   }, [supabase, deploymentId]);
-  return { row, status: row?.status ?? null };
+  return { row: row2, status: row2?.status ?? null };
 }
 function deploymentStepIndex(status) {
   switch (status) {
@@ -22461,14 +22332,14 @@ function PublishProgressBar({ status, compact, href }) {
   return /* @__PURE__ */ jsx("div", { style: wrapStyle, children: inner });
 }
 function PublishDialog({
-  row,
+  row: row2,
   status,
   onClose,
   onComplete
 }) {
   const buildingStartedAt = useRef(null);
   const [elapsed, setElapsed] = useState(0);
-  const progressStatus = row?.status ?? status ?? "pending";
+  const progressStatus = row2?.status ?? status ?? "pending";
   const errored = progressStatus === "error" || progressStatus === "canceled";
   const isReady = progressStatus === "ready";
   const isBuilding = progressStatus === "building";
@@ -22495,7 +22366,7 @@ function PublishDialog({
     /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 600, color: "#dc2626" }, children: "Publisering feilet" }),
     /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 20px", fontSize: 14, lineHeight: 1.5, color: "#444" }, children: [
       progressStatus === "error" ? "Bygg feilet." : "Avbrutt.",
-      row?.error_message ? ` ${row.error_message}` : ""
+      row2?.error_message ? ` ${row2.error_message}` : ""
     ] }),
     /* @__PURE__ */ jsx("button", { type: "button", onClick: onComplete, style: secondaryBtnStyle$1, children: "OK" })
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -22576,6 +22447,226 @@ function useEditBaseline() {
     };
   }, [session, store, config.siteId]);
 }
+const EMPTY = {
+  host: null,
+  verified: false,
+  status: null,
+  instructions: [],
+  statusLine: null
+};
+function Copyable({ value }) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        void navigator.clipboard?.writeText(value).then(
+          () => {
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1400);
+          },
+          () => void 0
+        );
+      },
+      title: "Kopier",
+      style: {
+        font: "inherit",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        background: "none",
+        border: 0,
+        padding: 0,
+        cursor: "pointer",
+        color: "inherit",
+        textAlign: "left",
+        wordBreak: "break-all"
+      },
+      children: copied ? "Kopiert" : value
+    }
+  );
+}
+function DomainView({ siteId }) {
+  const { api } = useSetto();
+  const [state, setState] = useState(EMPTY);
+  const [host, setHost] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const load = async () => {
+    try {
+      setState(await api.request(`/onboarding/sites/${siteId}/domain`, {}, "domain"));
+    } catch {
+      setState(EMPTY);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    void load();
+  }, [siteId]);
+  async function attach() {
+    setBusy(true);
+    setError(null);
+    try {
+      setState(
+        await api.request(
+          `/onboarding/sites/${siteId}/domain`,
+          { method: "POST", body: { host } },
+          "attachDomain"
+        )
+      );
+      setHost("");
+    } catch (err) {
+      const detail = err instanceof Error ? err.message : "";
+      setError(
+        detail.includes("invalid_domain") ? "Det ser ikke ut som et domenenavn. Skriv det som dittfirma.no." : detail.includes("domain_taken") ? "Domenet er allerede i bruk på en annen Setto-side." : detail.includes("site_not_deployed") ? "Nettsiden er ikke publisert ennå." : "Klarte ikke legge til domenet. Prøv igjen."
+      );
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function recheck() {
+    setBusy(true);
+    setError(null);
+    try {
+      setState(
+        await api.request(
+          `/onboarding/sites/${siteId}/domain/verify`,
+          { method: "POST" },
+          "verifyDomain"
+        )
+      );
+    } catch {
+      setError("Klarte ikke sjekke akkurat nå. Prøv igjen om litt.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function detach() {
+    setBusy(true);
+    setError(null);
+    try {
+      setState(
+        await api.request(
+          `/onboarding/sites/${siteId}/domain`,
+          { method: "DELETE" },
+          "detachDomain"
+        )
+      );
+    } catch {
+      setError("Klarte ikke fjerne domenet.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (loading) return /* @__PURE__ */ jsx("p", { style: muted, children: "Henter …" });
+  if (!state.host) {
+    return /* @__PURE__ */ jsxs("div", { style: wrap, children: [
+      /* @__PURE__ */ jsx("p", { style: lead, children: "Har du et domene fra før — dittfirma.no — kan du peke det hit. Nettsiden beholder adressen den har nå i tillegg, så ingenting slutter å virke underveis." }),
+      /* @__PURE__ */ jsxs("div", { style: row, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: host,
+            onChange: (e) => setHost(e.target.value),
+            placeholder: "dittfirma.no",
+            "aria-label": "Domenet ditt",
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            style: input
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void attach(), disabled: busy || !host.trim(), style: primary, children: busy ? "Legger til …" : "Legg til domene" })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { style: errorStyle$2, children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: wrap, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.6rem", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("strong", { style: { fontSize: "1.05rem" }, children: state.host }),
+      /* @__PURE__ */ jsx("span", { style: state.verified ? liveBadge : pendingBadge, children: state.verified ? "Live" : "Venter på DNS" })
+    ] }),
+    state.statusLine && /* @__PURE__ */ jsx("p", { style: lead, children: state.statusLine }),
+    state.instructions.length > 0 && !state.verified && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { style: muted, children: "Logg inn der du kjøpte domenet, finn DNS-innstillingene, og legg inn dette:" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: "0.6rem" }, children: state.instructions.map((rec) => /* @__PURE__ */ jsxs("div", { style: card, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1.2rem", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsx(Field, { label: "Type", value: rec.type }),
+          /* @__PURE__ */ jsx(Field, { label: "Navn", value: rec.name }),
+          /* @__PURE__ */ jsx(Field, { label: "Peker til", value: rec.value, wide: true })
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: { ...muted, margin: "0.35rem 0 0" }, children: rec.why })
+      ] }, `${rec.type}-${rec.name}`)) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { style: errorStyle$2, children: error }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.6rem", flexWrap: "wrap" }, children: [
+      !state.verified && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void recheck(), disabled: busy, style: primary, children: busy ? "Sjekker …" : "Jeg har lagt inn radene" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void detach(), disabled: busy, style: quiet, children: "Fjern domenet" })
+    ] })
+  ] });
+}
+function Field({ label, value, wide }) {
+  return /* @__PURE__ */ jsxs("div", { style: { minWidth: wide ? "14rem" : "5rem", flex: wide ? "1 1 14rem" : "0 0 auto" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { ...muted, fontSize: "0.72rem", textTransform: "uppercase", letterSpacing: "0.04em" }, children: label }),
+    /* @__PURE__ */ jsx(Copyable, { value })
+  ] });
+}
+const wrap = { display: "grid", gap: "0.9rem", maxWidth: "42rem" };
+const lead = { margin: 0, lineHeight: 1.5 };
+const muted = { margin: 0, opacity: 0.65, lineHeight: 1.5 };
+const row = { display: "flex", gap: "0.6rem", flexWrap: "wrap" };
+const input = {
+  flex: "1 1 14rem",
+  padding: "0.6rem 0.75rem",
+  border: "1px solid rgba(0,0,0,0.18)",
+  borderRadius: "0.5rem",
+  font: "inherit"
+};
+const card = {
+  padding: "0.7rem 0.85rem",
+  border: "1px solid rgba(0,0,0,0.12)",
+  borderRadius: "0.6rem",
+  background: "rgba(0,0,0,0.02)"
+};
+const primary = {
+  padding: "0.6rem 1.1rem",
+  borderRadius: "999px",
+  border: 0,
+  background: "#c4502a",
+  color: "#fff",
+  font: "inherit",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+const quiet = {
+  padding: "0.6rem 0.9rem",
+  borderRadius: "999px",
+  border: "1px solid rgba(0,0,0,0.18)",
+  background: "transparent",
+  font: "inherit",
+  cursor: "pointer"
+};
+const errorStyle$2 = { margin: 0, color: "#b42318" };
+const liveBadge = {
+  fontSize: "0.75rem",
+  padding: "0.15rem 0.5rem",
+  borderRadius: "999px",
+  background: "rgba(15,123,79,0.12)",
+  color: "#0f7b4f"
+};
+const pendingBadge = {
+  fontSize: "0.75rem",
+  padding: "0.15rem 0.5rem",
+  borderRadius: "999px",
+  background: "rgba(196,80,42,0.12)",
+  color: "#c4502a"
+};
+const domainModule = {
+  id: "domain",
+  label: "Domene",
+  AdminView: DomainView
+};
 const shellStyle$1 = {
   minHeight: "100dvh",
   background: "#0a0a0d",
@@ -22846,28 +22937,28 @@ function SubmissionList({ siteId }) {
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
     /* @__PURE__ */ jsx("h3", { style: subheadingStyle, children: "Henvendelser" }),
     error ? /* @__PURE__ */ jsx("p", { style: errStyle, children: error }) : null,
-    rows.length === 0 ? /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Ingen henvendelser ennå. Når noen sender inn et skjema på siden, dukker det opp her og i e-posten." }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }, children: rows.map((row) => /* @__PURE__ */ jsx(
+    rows.length === 0 ? /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Ingen henvendelser ennå. Når noen sender inn et skjema på siden, dukker det opp her og i e-posten." }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }, children: rows.map((row2) => /* @__PURE__ */ jsx(
       SubmissionItem,
       {
-        row,
-        open: openId === row.id,
-        onToggle: () => setOpenId(openId === row.id ? null : row.id),
-        onDelete: () => void remove2(row.id)
+        row: row2,
+        open: openId === row2.id,
+        onToggle: () => setOpenId(openId === row2.id ? null : row2.id),
+        onDelete: () => void remove2(row2.id)
       },
-      row.id
+      row2.id
     )) }),
     hasMore ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void loadMore(), disabled: loadingMore, style: secondaryBtnStyle, children: loadingMore ? "Laster …" : "Vis eldre" }) : null
   ] });
 }
 function SubmissionItem({
-  row,
+  row: row2,
   open,
   onToggle,
   onDelete
 }) {
-  const fields = submissionFields(row);
+  const fields = submissionFields(row2);
   const sender = senderOf(fields);
-  const title = row.meta.title ?? row.form_id;
+  const title = row2.meta.title ?? row2.form_id;
   return /* @__PURE__ */ jsxs("li", { children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -22877,7 +22968,7 @@ function SubmissionItem({
         "aria-expanded": open,
         style: { ...rowStyle, width: "100%", textAlign: "left", color: "inherit", border: "none", cursor: "pointer", font: "inherit" },
         children: [
-          /* @__PURE__ */ jsx("span", { style: statusDotStyle(row.email_status), title: emailStatusLabel(row) }),
+          /* @__PURE__ */ jsx("span", { style: statusDotStyle(row2.email_status), title: emailStatusLabel(row2) }),
           /* @__PURE__ */ jsxs("span", { style: { flex: 1, fontSize: 13, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
             sender ?? /* @__PURE__ */ jsx("span", { style: { color: "#aaa" }, children: "Uten navn" }),
             /* @__PURE__ */ jsxs("span", { style: { color: "#888" }, children: [
@@ -22885,7 +22976,7 @@ function SubmissionItem({
               title
             ] })
           ] }),
-          /* @__PURE__ */ jsx("time", { style: { fontSize: 11, color: "#888", flexShrink: 0 }, children: formatWhen(row.created_at) })
+          /* @__PURE__ */ jsx("time", { style: { fontSize: 11, color: "#888", flexShrink: 0 }, children: formatWhen(row2.created_at) })
         ]
       }
     ),
@@ -22895,26 +22986,26 @@ function SubmissionItem({
         /* @__PURE__ */ jsx("dd", { style: { margin: 0, fontSize: 14, whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: f.value === "" ? /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "—" }) : f.value })
       ] }, f.name)) }),
       /* @__PURE__ */ jsxs("p", { style: mutedStyle, children: [
-        emailStatusLabel(row),
-        row.recipients.length > 0 ? ` til ${row.recipients.join(", ")}` : "",
-        row.email_error ? ` — ${row.email_error}` : "",
-        row.meta.page ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        emailStatusLabel(row2),
+        row2.recipients.length > 0 ? ` til ${row2.recipients.join(", ")}` : "",
+        row2.email_error ? ` — ${row2.email_error}` : "",
+        row2.meta.page ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " · ",
-          /* @__PURE__ */ jsx("a", { href: row.meta.page, style: { color: "#bda6ff" }, target: "_blank", rel: "noreferrer", children: "Sendt fra siden" })
+          /* @__PURE__ */ jsx("a", { href: row2.meta.page, style: { color: "#bda6ff" }, target: "_blank", rel: "noreferrer", children: "Sendt fra siden" })
         ] }) : null
       ] }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: onDelete, style: dangerBtnStyle, children: "Slett henvendelse" })
     ] }) : null
   ] });
 }
-function submissionFields(row) {
+function submissionFields(row2) {
   const flat = [];
-  flatten(row.data, "", flat);
-  const rank = new Map((row.field_order ?? []).map((n, i) => [n, i]));
+  flatten(row2.data, "", flat);
+  const rank = new Map((row2.field_order ?? []).map((n, i) => [n, i]));
   const rankOf = (name) => rank.get(name) ?? rank.get(name.split(".")[0]) ?? Number.MAX_SAFE_INTEGER;
   return flat.map((f, i) => ({ f, i })).sort((a, b) => rankOf(a.f.name) - rankOf(b.f.name) || a.i - b.i).map(({ f }) => ({
     name: f.name,
-    label: row.labels?.[f.name] ?? row.labels?.[f.name.split(".")[0]] ?? prettify(f.name),
+    label: row2.labels?.[f.name] ?? row2.labels?.[f.name.split(".")[0]] ?? prettify(f.name),
     value: f.value
   }));
 }
@@ -22953,8 +23044,8 @@ function senderOf(fields) {
   const first = fields.find((f) => f.value !== "");
   return first ? first.value.slice(0, 80) : null;
 }
-function emailStatusLabel(row) {
-  switch (row.email_status) {
+function emailStatusLabel(row2) {
+  switch (row2.email_status) {
     case "sent":
       return "E-post sendt";
     case "failed":
@@ -24404,7 +24495,7 @@ const formsModule = {
   label: "Skjemaer",
   AdminView: FormsView
 };
-const SETTO_MODULES = [formsModule];
+const SETTO_MODULES = [formsModule, domainModule];
 function findModule(id) {
   return id ? SETTO_MODULES.find((m) => m.id === id) : void 0;
 }
@@ -24710,7 +24801,7 @@ function EditToolbar() {
             }
           ),
           expanded ? /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
-            error ? /* @__PURE__ */ jsx("span", { style: errorStyle, children: error }) : null,
+            error ? /* @__PURE__ */ jsx("span", { style: errorStyle$1, children: error }) : null,
             hasDrafts && !publishing && activeDeployment === null ? /* @__PURE__ */ jsx("button", { type: "button", onClick: publish, style: publishBtnStyle, children: "Publiser" }) : null,
             showPublishedNotice ? /* @__PURE__ */ jsxs(
               "button",
@@ -24831,7 +24922,7 @@ const contentStyle = {
   paddingLeft: 4,
   whiteSpace: "nowrap"
 };
-const errorStyle = {
+const errorStyle$1 = {
   color: "#ffb4a8",
   fontSize: 12,
   maxWidth: 240,
@@ -25085,7 +25176,7 @@ function SettoProvider({ config, children }) {
   const editShellActive = editMode && !!value.store;
   return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(SectionEditProvider, { children: [
     /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }),
-    !onAdminRoute && /* @__PURE__ */ jsx(SettoPreviewBar, {})
+    !onAdminRoute && /* @__PURE__ */ jsx(SettoChrome, {})
   ] }) });
 }
 function useSetto() {
@@ -25095,6 +25186,202 @@ function useSetto() {
   }
   return ctx;
 }
+const PREVIEW_HOST = /(^|\.)site\.setto\.no$/i;
+function isPreviewHost(hostname) {
+  return PREVIEW_HOST.test(hostname);
+}
+function previewBarState(input2) {
+  if (!input2.onPreview || input2.authLoading) return "hidden";
+  if (input2.hasSession && !input2.sitesLoaded) return "hidden";
+  if (!input2.hasSession && input2.soldPublic === null) return "hidden";
+  const bought = input2.paidMarker || input2.currentSiteIsLive || input2.soldPublic === true;
+  if (bought) return "hidden";
+  return input2.hasSession && input2.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 isTextEditClick(target) {
   if (target.closest("[data-setto-key]")) return true;
   if (target.closest("[data-setto-ui]")) return true;
@@ -26230,8 +26517,8 @@ function DeploymentsView({
     ] })
   ] });
 }
-function statusLabel(row) {
-  switch (row.status) {
+function statusLabel(row2) {
+  switch (row2.status) {
     case "pending":
       return "Venter";
     case "building":
@@ -26239,7 +26526,7 @@ function statusLabel(row) {
     case "ready":
       return "Publisert";
     case "error":
-      return row.error_message?.includes("webhook") ? "Utløpt" : "Feilet";
+      return row2.error_message?.includes("webhook") ? "Utløpt" : "Feilet";
     case "canceled":
       return "Avbrutt";
   }
@@ -26400,20 +26687,20 @@ function nodeChildren(node) {
   }
 }
 const ANIMATION_PRESETS = ["fadeIn", "slideUp", "stagger", "scrollReveal"];
-function validateBlockTree(input) {
+function validateBlockTree(input2) {
   const issues = [];
-  if (!isRecord(input)) {
+  if (!isRecord(input2)) {
     return fail("$", "Block tree must be an object");
   }
-  if (input.version !== "1") {
+  if (input2.version !== "1") {
     issues.push({ path: "$.version", message: 'Expected version "1"' });
   }
-  if (!Array.isArray(input.root)) {
+  if (!Array.isArray(input2.root)) {
     return fail("$.root", "root must be an array of block nodes");
   }
   const seenIds = /* @__PURE__ */ new Set();
-  for (let i = 0; i < input.root.length; i++) {
-    validateNode(input.root[i], `root[${i}]`, seenIds, issues);
+  for (let i = 0; i < input2.root.length; i++) {
+    validateNode(input2.root[i], `root[${i}]`, seenIds, issues);
   }
   return issues.length ? { ok: false, issues } : { ok: true };
 }
@@ -26563,14 +26850,14 @@ function isRecord(value) {
 function fail(path, message) {
   return { ok: false, issues: [{ path, message }] };
 }
-function parseBlockTree(input) {
-  const result = validateBlockTree(input);
+function parseBlockTree(input2) {
+  const result = validateBlockTree(input2);
   if (!result.ok) {
     const first = result.issues[0];
     const detail = first ? `${first.path}: ${first.message}` : "unknown";
     throw new Error(`Invalid block tree at ${detail}`);
   }
-  return input;
+  return input2;
 }
 const IconRegistryContext = createContext(null);
 const RepeaterScopeContext = createContext(null);
@@ -26856,6 +27143,7 @@ export {
   SettoAnimation,
   SettoBlock,
   SettoBlockTree,
+  SettoChrome,
   SettoForm,
   SettoIcon,
   SettoImage,
@@ -26872,6 +27160,7 @@ export {
   isPreviewHost,
   nodeChildren,
   parseBlockTree,
+  previewBarState,
   readLocaleFields,
   settoSubmissionUrl,
   useGuestEdit,