@sevenfold/setto-client 0.9.0 → 0.10.1

package/dist/chrome.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+/** What the chrome is handed. Additive changes only; nothing may be removed. */
+export interface SettoChromeHandshake {
+    contract: number;
+    /** The host's React, so the chrome bundle ships no framework of its own. */
+    react: typeof React;
+    reactDom: typeof ReactDOM;
+    /**
+     * Hand back a component and the host renders it.
+     *
+     * Inverted deliberately. The first cut had the chrome create its own React
+     * root, which cannot work: `createRoot` lives in `react-dom/client`, not
+     * `react-dom`, and React 19 removed `render` altogether — so the bundle
+     * loaded, found neither, and mounted nothing at all.
+     *
+     * Rendering it from here is better than passing `createRoot` across would
+     * have been. The chrome ends up inside the host's own tree, so its hooks are
+     * the host's hooks with no second root to keep in step, and the error
+     * boundary that keeps a mistake off the customer's page lives on this side
+     * where it cannot be forgotten.
+     */
+    mount: (Component: React.ComponentType) => void;
+    config: {
+        siteId: string;
+        apiUrl: string;
+        displayName?: string;
+    };
+    /** Read the current state. Live: call it, never cache what it returned. */
+    getState: () => {
+        hasSession: boolean;
+        accessToken: string | null;
+        currentSite: {
+            id: string;
+            display_name?: string;
+            status?: string;
+        } | null;
+        sitesLoaded: boolean;
+        editMode: boolean;
+        authLoading: boolean;
+    };
+    /** Told whenever that state changes. Returns an unsubscribe. */
+    subscribe: (listener: () => void) => () => void;
+}
+declare global {
+    interface Window {
+        __setto__?: SettoChromeHandshake;
+        __settoChromeLoaded__?: boolean;
+    }
+}
+export declare function SettoChrome(): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export { SettoProvider, useSetto } from './provider';
 export { GuestEditProvider, useGuestEdit } from './guest-edit';
-export { SettoPreviewBar, isPreviewHost } from './preview-bar';
+export { SettoPreviewBar, isPreviewHost, previewBarState } from './preview-bar';
+export { SettoChrome } from './chrome';
+export type { SettoChromeHandshake } from './chrome';
 export { T } from './T';
 export { SettoSection } from './SettoSection';
 export { SettoBlock } from './SettoBlock';

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 = {};
@@ -21358,6 +21360,88 @@ 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`;
+}
+class ChromeBoundary extends React.Component {
+  state = { dead: false };
+  static getDerivedStateFromError() {
+    return { dead: true };
+  }
+  componentDidCatch(error) {
+    console.warn("[setto] chrome failed, continuing without it", error);
+  }
+  render() {
+    return this.state.dead ? null : this.props.children;
+  }
+}
+function SettoChrome() {
+  const setto = useSetto();
+  const [Chrome, setChrome] = useState(null);
+  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);
+        },
+        // `setChrome(() => C)`: a component is a function, and the updater form
+        // is the only way to put one into state without React calling it.
+        mount: (Component) => setChrome(() => Component)
+      };
+      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 {
+    }
+  }, []);
+  if (!Chrome) return null;
+  return /* @__PURE__ */ jsx(ChromeBoundary, { children: /* @__PURE__ */ jsx(Chrome, {}) });
+}
 const SETTO_BASE = "/setto";
 function siteHomeUrl(pathname = "/") {
   const u = new URL(window.location.href);
@@ -21392,202 +21476,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(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$2, 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$2 = {
-  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";
@@ -22708,7 +22596,7 @@ function DomainView({ siteId }) {
         ),
         /* @__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$1, children: error })
+      error && /* @__PURE__ */ jsx("p", { style: errorStyle$2, children: error })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { style: wrap, children: [
@@ -22728,7 +22616,7 @@ function DomainView({ siteId }) {
         /* @__PURE__ */ jsx("p", { style: { ...muted, margin: "0.35rem 0 0" }, children: rec.why })
       ] }, `${rec.type}-${rec.name}`)) })
     ] }),
-    error && /* @__PURE__ */ jsx("p", { style: errorStyle$1, children: error }),
+    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" })
@@ -22776,7 +22664,7 @@ const quiet = {
   font: "inherit",
   cursor: "pointer"
 };
-const errorStyle$1 = { margin: 0, color: "#b42318" };
+const errorStyle$2 = { margin: 0, color: "#b42318" };
 const liveBadge = {
   fontSize: "0.75rem",
   padding: "0.15rem 0.5rem",
@@ -24930,7 +24818,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",
@@ -25051,7 +24939,7 @@ const contentStyle = {
   paddingLeft: 4,
   whiteSpace: "nowrap"
 };
-const errorStyle = {
+const errorStyle$1 = {
   color: "#ffb4a8",
   fontSize: 12,
   maxWidth: 240,
@@ -25305,7 +25193,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() {
@@ -25315,6 +25203,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;
@@ -27076,6 +27160,7 @@ export {
   SettoAnimation,
   SettoBlock,
   SettoBlockTree,
+  SettoChrome,
   SettoForm,
   SettoIcon,
   SettoImage,
@@ -27092,6 +27177,7 @@ export {
   isPreviewHost,
   nodeChildren,
   parseBlockTree,
+  previewBarState,
   readLocaleFields,
   settoSubmissionUrl,
   useGuestEdit,