@sevenfold/setto-client 0.32.0 → 0.33.0

package/dist/edit-mode/mount.d.ts

@@ -3,8 +3,13 @@ import type { ThemeStore } from '../lib/theme-store';
 interface EditModeShellProps {
     children: ReactNode;
     themeStore: ThemeStore | null;
-    /** When false, children render unchanged — no portals or document layout. */
+    /** Editing: the document layout, the section tools and the link hint. */
     active: boolean;
+    /**
+     * The Setto menu, which an owner has whether or not they are editing: out of
+     * edit mode it is only the pencil. Defaults to `active`.
+     */
+    menu?: boolean;
 }
 /**
  * Edit mode: full-width page with a floating Setto FAB anchored bottom-left.
@@ -13,7 +18,7 @@ interface EditModeShellProps {
  * Always mounted around the host app so toggling edit mode does not remount
  * page content (which would replay GSAP / scroll-driven animations).
  */
-export declare function EditModeShell({ children, themeStore, active }: EditModeShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditModeShell({ children, themeStore, active, menu }: EditModeShellProps): import("react/jsx-runtime").JSX.Element;
 /** @deprecated Use EditModeShell */
 export declare const EditModeMount: typeof EditModeShell;
 export {};

package/dist/lib/page-store.d.ts

@@ -30,6 +30,8 @@ export declare class PageStore {
     constructor(initial: PagesManifest | null);
     snapshot(): PageStoreSnapshot;
     subscribe(listener: Listener): () => void;
+    /** The manifest as published, to tell which sections the owner changed. */
+    get baselineManifest(): PagesManifest | null;
     get manifest(): PagesManifest | null;
     /** True once the site has a manifest to edit. */
     has(): boolean;

package/dist/provider.d.ts

@@ -13,8 +13,20 @@ export interface SettoContextValue {
     session: Session | null;
     /** True while the initial auth state is being read from local storage. */
     authLoading: boolean;
-    /** True when inline edit mode is active (session + site access). */
+    /**
+     * True while the owner is editing: `canEdit`, and they chose to edit. What
+     * makes text editable, shows hidden sections and draws the section tools.
+     */
     editMode: boolean;
+    /**
+     * True when this person may edit this site: signed in, a member, the site is
+     * paid for, and this is not `/setto`. The Setto menu is drawn whenever this
+     * is; outside `editMode` it shows the site as a visitor sees it.
+     * Absent on a client older than 0.33, where `editMode` meant this.
+     */
+    canEdit: boolean;
+    /** Switch editing on or off. Remembered for this site in this browser. */
+    setEditing: (on: boolean) => void;
     /** Site row matching `config.siteId`, or `null` if the user has no access. */
     currentSite: SiteRow | null;
     /** All sites the user can access (loaded after sign-in). */
@@ -65,13 +77,15 @@ export interface SettoProviderProps {
  * Wraps the host app. Initialises Supabase, the API client, and listens for
  * auth changes. Mounts the edit toolbar and enables inline editing when active.
  *
- * Edit mode is on when ALL of:
+ * The owner may edit (`canEdit`) when ALL of:
  *   1. There is an authenticated Supabase session.
  *   2. The user has access to `config.siteId` in the Setto sites table.
- *   3. The current path is not the `/setto` admin SPA.
+ *   3. The site is paid for (`live`).
+ *   4. The current path is not the `/setto` admin SPA.
  *
- * Once an editor signs in via `/setto`, returning visits auto-enter edit mode
- * for as long as the Supabase session persists.
+ * Once an editor signs in via `/setto` they stay signed in until they sign out
+ * there. Whether they are editing is their own switch (`setEditing`): the
+ * Setto menu's pencil turns it on, and publishing turns it off.
  */
 export declare function SettoProvider({ config, children }: SettoProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useSetto(): SettoContextValue;

package/dist/setto-client.js

@@ -21783,6 +21783,10 @@ class PageStore {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
   }
+  /** The manifest as published, to tell which sections the owner changed. */
+  get baselineManifest() {
+    return this.baseline;
+  }
   get manifest() {
     return this.data;
   }
@@ -22261,7 +22265,7 @@ const pillStyle = {
   whiteSpace: "nowrap",
   boxShadow: "0 8px 24px rgba(33, 23, 17, 0.35), 0 2px 6px rgba(33, 23, 17, 0.2)"
 };
-function EditModeShell({ children, themeStore, active }) {
+function EditModeShell({ children, themeStore, active, menu = active }) {
   useSettoDocumentLayout(active);
   const Toolbar = useSettoChromeSlot("toolbar");
   const SectionTools = useSettoChromeSlot("section-toolbar");
@@ -22270,15 +22274,30 @@ function EditModeShell({ children, themeStore, active }) {
   const [hintRoot, setHintRoot] = useState(null);
   const [sectionToolbarRoot, setSectionToolbarRoot] = useState(null);
   useEffect(() => {
-    if (!active) {
+    if (!menu) {
       setToolbarRoot(null);
-      setHintRoot(null);
-      setSectionToolbarRoot(null);
       return;
     }
     const toolbar = document.createElement("div");
     toolbar.id = "setto-toolbar-root";
+    Object.assign(toolbar.style, {
+      position: "fixed",
+      right: "var(--setto-fab-inset, 16px)",
+      bottom: "var(--setto-fab-inset, 16px)",
+      zIndex: "2147483647"
+    });
     document.body.appendChild(toolbar);
+    setToolbarRoot(toolbar);
+    return () => {
+      toolbar.remove();
+    };
+  }, [menu]);
+  useEffect(() => {
+    if (!active) {
+      setHintRoot(null);
+      setSectionToolbarRoot(null);
+      return;
+    }
     const hint = document.createElement("div");
     hint.id = "setto-hint-root";
     hint.style.pointerEvents = "none";
@@ -22287,18 +22306,16 @@ function EditModeShell({ children, themeStore, active }) {
     sectionBar.id = "setto-section-toolbar-root";
     sectionBar.style.pointerEvents = "none";
     document.body.appendChild(sectionBar);
-    setToolbarRoot(toolbar);
     setHintRoot(hint);
     setSectionToolbarRoot(sectionBar);
     return () => {
-      toolbar.remove();
       hint.remove();
       sectionBar.remove();
     };
   }, [active]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
-    active && toolbarRoot ? createPortal(Toolbar ? /* @__PURE__ */ jsx(Toolbar, {}) : /* @__PURE__ */ jsx(ToolbarUnavailable, {}), toolbarRoot) : null,
+    menu && toolbarRoot ? createPortal(Toolbar ? /* @__PURE__ */ jsx(Toolbar, {}) : /* @__PURE__ */ jsx(ToolbarUnavailable, {}), toolbarRoot) : null,
     active && hintRoot && LinkHint ? createPortal(/* @__PURE__ */ jsx(LinkHint, {}), hintRoot) : null,
     active && sectionToolbarRoot && themeStore && SectionTools ? createPortal(/* @__PURE__ */ jsx(SectionTools, {}), sectionToolbarRoot) : null
   ] });
@@ -36606,7 +36623,16 @@ function SettoProvider({ config, children }) {
     pageStoreRef.current = new PageStore(bundledManifest(config.pages));
     setStoreReady(true);
   }, [i18n, config.theme, config.pages]);
-  const editMode = !!session && access.currentSite?.status === "live" && !onAdminRoute && !authLoading && !access.loading;
+  const canEdit = !!session && access.currentSite?.status === "live" && !onAdminRoute && !authLoading && !access.loading;
+  const [editing, setEditingState] = useState(() => readEditing(config.siteId));
+  const setEditing = useCallback(
+    (on) => {
+      writeEditing(config.siteId, on);
+      setEditingState(on);
+    },
+    [config.siteId]
+  );
+  const editMode = canEdit && editing;
   const [selectedSectionId, setSelectedSectionId] = useState(null);
   const selectSection = useCallback((id) => setSelectedSectionId(id), []);
   const [guestEdit, setGuestEdit] = useState(false);
@@ -36624,6 +36650,8 @@ function SettoProvider({ config, children }) {
     session,
     authLoading,
     editMode,
+    canEdit,
+    setEditing,
     currentSite: access.currentSite,
     sites: access.sites,
     store: storeReady ? storeRef.current : null,
@@ -36636,13 +36664,29 @@ function SettoProvider({ config, children }) {
     setGuestEdit
   };
   const editShellActive = editMode && !!value.store;
+  const menuShown = canEdit && !!value.store;
   return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }),
+    /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, menu: menuShown, themeStore: value.themeStore, children }),
     /* @__PURE__ */ jsx(SettoChrome, {}),
     /* @__PURE__ */ jsx(SettoChat, {}),
     /* @__PURE__ */ jsx(AutoLanguageSwitcher, { languages })
   ] }) });
 }
+const editingKey = (siteId) => `setto-editing:${siteId}`;
+function readEditing(siteId) {
+  try {
+    return window.localStorage.getItem(editingKey(siteId)) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeEditing(siteId, on) {
+  try {
+    if (on) window.localStorage.setItem(editingKey(siteId), "1");
+    else window.localStorage.removeItem(editingKey(siteId));
+  } catch {
+  }
+}
 function useSetto() {
   const ctx = useContext(SettoContext);
   if (!ctx) {