@sevenfold/setto-client 0.31.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/index.d.ts

@@ -12,6 +12,7 @@ export { SettoIcon } from './SettoIcon';
 export type { SettoIconProps, SettoIconRenderProps } from './SettoIcon';
 export { SettoImage } from './SettoImage';
 export type { SettoImageProps, ImageToolsProps } from './SettoImage';
+export { SETTO_IMAGE_QUALITY, SETTO_IMAGE_WIDTHS, isOptimizable, optimizedSrcSet, optimizedUrl, settoVercelImagesConfig, } from './lib/optimized-image';
 export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
 export { SettoForm, FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, fieldTypeHasOptions, fieldTypeHasPlaceholder, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './modules/forms';

package/dist/lib/optimized-image.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Images through Vercel's Image Optimization, for sites that turned it on.
+ *
+ * A site keeps one original per image in its repository; the CDN makes each
+ * width on first request, in AVIF or WebP as the browser accepts, and caches
+ * it by the file's content. A site turns it on with two things that must
+ * agree: `"images": { "optimize": true }` in `setto.config.json`, and an
+ * `images` block in `vercel.json` whose `sizes` and `qualities` are exactly
+ * the constants below — Vercel refuses a `w` or `q` it was not given. The
+ * block, for copying: `settoVercelImagesConfig`.
+ */
+/** Phone, phone at 2–3×, tablet, laptop, wide and retina desktop. */
+export declare const SETTO_IMAGE_WIDTHS: readonly [384, 640, 828, 1080, 1440, 1920, 2560];
+/** One quality for every image, so each width is one cached variant rather than several. */
+export declare const SETTO_IMAGE_QUALITY = 75;
+/** The `images` block of `vercel.json` that matches `SettoImage`. */
+export declare const settoVercelImagesConfig: {
+    readonly sizes: readonly [384, 640, 828, 1080, 1440, 1920, 2560];
+    readonly qualities: readonly [75];
+    readonly formats: readonly ["image/avif", "image/webp"];
+    readonly localPatterns: readonly [{
+        readonly pathname: "^/images/.*$";
+        readonly search: "";
+    }];
+    readonly minimumCacheTTL: 2678400;
+};
+/**
+ * Whether an image can go through the optimizer: a file of this site's own,
+ * under `/images/`, in a format it transforms. A draft's `blob:` preview, an
+ * external address, an SVG logo and a moving GIF cannot.
+ */
+export declare function isOptimizable(src: string | null | undefined): src is string;
+/**
+ * Where there is no optimizer to ask: the Vite dev server and a local
+ * preview. A deployment elsewhere without one (a build sandbox) is caught by
+ * the image's own error instead.
+ */
+export declare function hasNoOptimizer(hostname: string): boolean;
+export declare function optimizedUrl(src: string, width: number): string;
+export declare function optimizedSrcSet(src: string): string;

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) {
@@ -37505,6 +37549,29 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
     )
   ] });
 }
+const SETTO_IMAGE_WIDTHS = [384, 640, 828, 1080, 1440, 1920, 2560];
+const SETTO_IMAGE_QUALITY = 75;
+const settoVercelImagesConfig = {
+  sizes: [...SETTO_IMAGE_WIDTHS],
+  qualities: [SETTO_IMAGE_QUALITY],
+  formats: ["image/avif", "image/webp"],
+  localPatterns: [{ pathname: "^/images/.*$", search: "" }],
+  minimumCacheTTL: 2678400
+};
+const OPTIMIZABLE = /\.(jpe?g|png|webp|avif)$/i;
+function isOptimizable(src) {
+  if (!src || !src.startsWith("/images/")) return false;
+  return OPTIMIZABLE.test(src.split(/[?#]/)[0]);
+}
+function hasNoOptimizer(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]" || hostname.endsWith(".localhost");
+}
+function optimizedUrl(src, width) {
+  return `/_vercel/image?url=${encodeURIComponent(src)}&w=${width}&q=${SETTO_IMAGE_QUALITY}`;
+}
+function optimizedSrcSet(src) {
+  return SETTO_IMAGE_WIDTHS.map((w) => `${optimizedUrl(src, w)} ${w}w`).join(", ");
+}
 const ACCEPT = "image/png,image/jpeg,image/webp,image/svg+xml";
 function setSrcAllLanguages(store, i18n, srcKey, value) {
   const langs = i18n.languages?.length ? i18n.languages : [i18n.language];
@@ -37512,9 +37579,34 @@ function setSrcAllLanguages(store, i18n, srcKey, value) {
     store.set(srcKey, lng, value);
   }
 }
+function PublishedImage({
+  src,
+  optimize,
+  sizes,
+  srcSet,
+  onError,
+  ...rest
+}) {
+  const [direct, setDirect] = useState(false);
+  const optimized = optimize && !direct && !srcSet && isOptimizable(src) && !(typeof window !== "undefined" && hasNoOptimizer(window.location.hostname));
+  if (!optimized) return /* @__PURE__ */ jsx("img", { src, srcSet, sizes, onError, ...rest });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: optimizedUrl(src, 1080),
+      srcSet: optimizedSrcSet(src),
+      sizes: sizes ?? "100vw",
+      onError: (e) => {
+        setDirect(true);
+        onError?.(e);
+      },
+      ...rest
+    }
+  );
+}
 function SettoImage({ srcKey, alt, className, style, ...rest }) {
   const { t, i18n } = useTranslation();
-  const { editMode, store, assetStore } = useSetto();
+  const { editMode, store, assetStore, config } = useSetto();
   const fileRef = useRef(null);
   const [hovered, setHovered] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -37534,7 +37626,17 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
   const previewUrl = assetStore?.getPreviewUrl(srcKey);
   const src = previewUrl ?? srcPath;
   if (!editMode) {
-    return /* @__PURE__ */ jsx("img", { src: srcPath, alt, className, style, ...rest });
+    return /* @__PURE__ */ jsx(
+      PublishedImage,
+      {
+        src: srcPath,
+        optimize: config.images?.optimize === true,
+        alt,
+        className,
+        style,
+        ...rest
+      }
+    );
   }
   const isFullWidth = className?.includes("w-full");
   const isFullHeight = className?.includes("h-full");
@@ -40011,6 +40113,8 @@ export {
   PAGES_PATH,
   PageStore,
   SETTO_BASE,
+  SETTO_IMAGE_QUALITY,
+  SETTO_IMAGE_WIDTHS,
   SETTO_MODULES,
   SettoAdminApp,
   SettoAnimation,
@@ -40051,11 +40155,14 @@ export {
   isAdminRoute,
   isFormFieldType,
   isLinkContext,
+  isOptimizable,
   isSafeHref,
   languageFromPath,
   languageName,
   nodeChildren,
   normalisePath,
+  optimizedSrcSet,
+  optimizedUrl,
   pageById,
   pageForPath,
   pageTitleKey,
@@ -40067,6 +40174,7 @@ export {
   redirectForVisitor,
   serialiseManifest,
   settoSubmissionUrl,
+  settoVercelImagesConfig,
   siteHomeUrl,
   siteLanguages,
   useCoarsePointer,