@sevenfold/setto-client 0.3.4 → 0.5.0

package/dist/setto-client.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, useSyncExternalStore, useState, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, forwardRef } from "react";
+import { useState, useEffect, useSyncExternalStore, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { createPortal } from "react-dom";
 function __rest(s, e) {
@@ -21129,6 +21129,15 @@ class ThemeStore {
     this.drafts.clear();
     this.bump();
   }
+  /** Resets every draft back to its original value. */
+  revertAll() {
+    for (const draft of this.drafts.values()) {
+      if (!this.data[draft.sectionId]) this.data[draft.sectionId] = {};
+      this.data[draft.sectionId][draft.field] = draft.original;
+    }
+    this.drafts.clear();
+    this.bump();
+  }
   commit() {
     this.baseline = structuredClone(this.data);
     this.drafts.clear();
@@ -21146,41 +21155,77 @@ class ThemeStore {
     for (const fn of this.listeners) fn(this.cachedSnapshot);
   }
 }
-const TOOLBAR_HEIGHT = 44;
-const STYLE_ID = "setto-edit-layout";
+const EMPTY = {
+  sites: null,
+  currentSite: null,
+  loading: true,
+  error: null
+};
+function useSiteAccess(supabase, session, siteId) {
+  const [state, setState] = useState(EMPTY);
+  useEffect(() => {
+    if (!session) {
+      setState({ sites: null, currentSite: null, loading: false, error: null });
+      return;
+    }
+    let cancelled = false;
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+    supabase.from("sites").select("*").then(({ data, error }) => {
+      if (cancelled) return;
+      if (error) {
+        setState({ sites: [], currentSite: null, loading: false, error: error.message });
+        return;
+      }
+      const rows = data ?? [];
+      const current = rows.find((s) => s.id === siteId) ?? null;
+      setState({ sites: rows, currentSite: current, loading: false, error: null });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [supabase, session, siteId]);
+  return state;
+}
+const SETTO_BASE = "/setto";
+function siteHomeUrl(pathname = "/") {
+  const u = new URL(window.location.href);
+  u.pathname = pathname;
+  u.search = "";
+  return u.toString();
+}
+function isAdminRoute() {
+  return window.location.pathname.startsWith(SETTO_BASE);
+}
+function isAdminDeploymentView() {
+  return isAdminRoute() && new URLSearchParams(window.location.search).has("deployment");
+}
+function adminRedirectUrl() {
+  return `${window.location.origin}${SETTO_BASE}`;
+}
+const FAB_SIZE = 52;
+const FAB_INSET = 16;
+const STYLE_ID$1 = "setto-edit-layout";
 const HTML_CLASS = "setto-edit-mode";
 function useSettoDocumentLayout(active) {
   useEffect(() => {
     const html = document.documentElement;
     html.classList.add(HTML_CLASS);
-    html.style.setProperty("--setto-toolbar-height", `${TOOLBAR_HEIGHT}px`);
-    let styleEl = document.getElementById(STYLE_ID);
+    html.style.setProperty("--setto-fab-size", `${FAB_SIZE}px`);
+    html.style.setProperty("--setto-fab-inset", `${FAB_INSET}px`);
+    let styleEl = document.getElementById(STYLE_ID$1);
     if (!styleEl) {
       styleEl = document.createElement("style");
-      styleEl.id = STYLE_ID;
+      styleEl.id = STYLE_ID$1;
       styleEl.textContent = `
         html.setto-edit-mode {
           width: 100%;
           overflow-x: clip;
         }
 
-        html.setto-edit-mode body {
-          padding-top: var(--setto-toolbar-height);
-        }
-
-        html.setto-edit-mode #root {
-          width: 100%;
-          min-height: calc(100dvh - var(--setto-toolbar-height));
-          /* Containing block for position:fixed descendants so they sit below the toolbar. */
-          transform: translateZ(0);
-        }
-
         html.setto-edit-mode #setto-toolbar-root {
           position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: var(--setto-toolbar-height);
+          left: var(--setto-fab-inset);
+          bottom: var(--setto-fab-inset);
           z-index: 2147483647;
         }
 
@@ -21207,19 +21252,13 @@ function useSettoDocumentLayout(active) {
         }
 
         html.setto-edit-mode [data-setto-key]:hover {
-          outline: 1px dashed rgba(100, 10, 255, 0.45);
+          outline: 1px dashed rgba(196, 80, 42, 0.55);
           outline-offset: 2px;
           border-radius: 2px;
         }
 
         html.setto-edit-mode [data-setto-section]:hover {
-          box-shadow: inset 0 0 0 1px rgba(100, 10, 255, 0.25);
-        }
-
-        @media (max-width: 480px) {
-          html.setto-edit-mode [data-setto-draft-count] {
-            display: none;
-          }
+          box-shadow: inset 0 0 0 1px rgba(196, 80, 42, 0.3);
         }
       `;
       document.head.appendChild(styleEl);
@@ -21227,7 +21266,8 @@ function useSettoDocumentLayout(active) {
     notifyLayoutChange();
     return () => {
       html.classList.remove(HTML_CLASS);
-      html.style.removeProperty("--setto-toolbar-height");
+      html.style.removeProperty("--setto-fab-size");
+      html.style.removeProperty("--setto-fab-inset");
       styleEl?.remove();
       notifyLayoutChange();
     };
@@ -21395,8 +21435,7 @@ function computePosition(targetEl, toolbarW, toolbarH) {
   const rect = targetEl.getBoundingClientRect();
   let left = rect.left + (rect.width - toolbarW) / 2;
   left = Math.max(MARGIN$1, Math.min(left, window.innerWidth - toolbarW - MARGIN$1));
-  const minTop = TOOLBAR_HEIGHT + GAP;
-  const top = Math.max(minTop, rect.top - toolbarH - GAP);
+  const top = Math.max(MARGIN$1, rect.top - toolbarH - GAP);
   return { top, left };
 }
 function BrandColorPicker({
@@ -21432,7 +21471,7 @@ function BrandColorPicker({
         left = window.innerWidth - popoverW - 8;
       }
       if (left < 8) left = 8;
-      if (top < TOOLBAR_HEIGHT + 4) top = rect.bottom + 6;
+      if (top < 8) top = rect.bottom + 6;
       if (top + popoverH > window.innerHeight - 8) {
         top = rect.top - popoverH - 6;
       }
@@ -22150,6 +22189,43 @@ function useEditBaseline() {
     };
   }, [session, store, config.siteId]);
 }
+function SettoMark({
+  size = 24,
+  letterColor = "#F2EBDF",
+  dotColor = "#C4502A",
+  style
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 64 64",
+      width: size,
+      height: size,
+      "aria-hidden": true,
+      style: { display: "block", ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: "32",
+            y: "46",
+            textAnchor: "middle",
+            fontFamily: "Georgia, serif",
+            fontStyle: "italic",
+            fontSize: "42",
+            fill: letterColor,
+            children: "S"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "49", cy: "17", r: "5", fill: dotColor })
+      ]
+    }
+  );
+}
+const BLEKK = "#211711";
+const CREMA = "#F2EBDF";
+const TERRACOTTA = "#C4502A";
 function EditToolbar() {
   const { store, themeStore, assetStore, api, config, supabase } = useSetto();
   const { i18n } = useTranslation();
@@ -22178,6 +22254,7 @@ function EditToolbar() {
   const [error, setError] = useState(null);
   const [publishedNotice, setPublishedNotice] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   const menuRef = useRef(null);
   const publishedNoticeTimer = useRef(null);
   const { row: deploymentRow, status: deploymentStatus } = useDeploymentStatus(
@@ -22208,6 +22285,18 @@ function EditToolbar() {
   const hasDrafts = draftCount > 0;
   const showToolbarProgress = activeDeployment !== null && !publishDialogOpen && deploymentRow !== null && isDeploymentInProgress(deploymentRow.status) && !isDeploymentStale(deploymentRow);
   const showPublishedNotice = publishedNotice && !publishDialogOpen;
+  useEffect(() => {
+    if (error || showToolbarProgress || showPublishedNotice) {
+      setExpanded(true);
+    }
+  }, [error, showToolbarProgress, showPublishedNotice]);
+  const toggleExpanded = () => {
+    setExpanded((prev) => {
+      const next = !prev;
+      if (!next) setMenuOpen(false);
+      return next;
+    });
+  };
   useEffect(() => {
     return () => {
       if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
@@ -22358,76 +22447,109 @@ function EditToolbar() {
     setPublishedNotice(false);
     if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
   };
+  const cancelDrafts = () => {
+    setMenuOpen(false);
+    store?.revertAll();
+    themeStore?.revertAll();
+    assetStore?.revertAll();
+    setError(null);
+    setExpanded(false);
+  };
   const signOut = () => {
     setMenuOpen(false);
     void supabase.auth.signOut();
   };
   const goToHistory = () => {
     setMenuOpen(false);
-    window.location.href = "/admin";
+    window.location.href = SETTO_BASE;
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("header", { style: barStyle, role: "toolbar", "aria-label": "Setto editor", children: [
-      /* @__PURE__ */ jsx("div", { style: leftStyle, children: /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Setto" }) }),
-      /* @__PURE__ */ jsxs("div", { style: rightStyle, children: [
-        error ? /* @__PURE__ */ jsx("span", { style: errorStyle, children: error }) : null,
-        hasDrafts && !publishing && activeDeployment === null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { style: draftStyle, "data-setto-draft-count": true, children: [
-            draftCount,
-            " ",
-            draftCount === 1 ? "endring" : "endringer"
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: publish, style: publishBtnStyle, children: "Publiser" })
-        ] }) : null,
-        showPublishedNotice ? /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: dismissPublishedNotice,
-            style: publishedNoticeStyle,
-            title: "Lukk",
-            children: [
-              /* @__PURE__ */ jsx(PublishedCheckIcon, {}),
-              "Publisert"
-            ]
-          }
-        ) : null,
-        showToolbarProgress && deploymentRow ? /* @__PURE__ */ jsx(
-          PublishProgressBar,
-          {
-            status: deploymentRow.status,
-            compact: true,
-            href: `/admin?deployment=${encodeURIComponent(activeDeployment)}`
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs("div", { ref: menuRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": "Setto editor",
+        style: {
+          ...containerStyleFor(hasDrafts),
+          ...expanded ? expandedContainerStyle : {}
+        },
+        children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: () => setMenuOpen((o) => !o),
-              "aria-label": "Meny",
-              "aria-expanded": menuOpen,
-              style: {
-                ...menuBtnStyle,
-                background: menuOpen ? "#f0f0f0" : void 0
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.background = "#f0f0f0";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.background = menuOpen ? "#f0f0f0" : "transparent";
-              },
-              children: "⋮"
+              "aria-label": expanded ? "Lukk Setto-meny" : "Åpne Setto-meny",
+              "aria-expanded": expanded,
+              title: "Setto",
+              style: markButtonStyle,
+              onClick: toggleExpanded,
+              children: /* @__PURE__ */ jsx(SettoMark, { size: 28 })
             }
           ),
-          menuOpen ? /* @__PURE__ */ jsxs("div", { style: dropdownStyle, role: "menu", children: [
-            /* @__PURE__ */ jsx(MenuItem, { onClick: goToHistory, icon: /* @__PURE__ */ jsx(HistoryIcon, {}), children: "Historikk" }),
-            /* @__PURE__ */ jsx(MenuItem, { onClick: signOut, icon: /* @__PURE__ */ jsx(LogOutIcon, {}), children: "Logg ut" })
+          expanded ? /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
+            error ? /* @__PURE__ */ jsx("span", { style: errorStyle, children: error }) : null,
+            hasDrafts && !publishing && activeDeployment === null ? /* @__PURE__ */ jsx("button", { type: "button", onClick: publish, style: publishBtnStyle, children: "Publiser" }) : null,
+            showPublishedNotice ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: dismissPublishedNotice,
+                style: publishedNoticeStyle,
+                title: "Lukk",
+                children: [
+                  /* @__PURE__ */ jsx(PublishedCheckIcon, {}),
+                  "Publisert"
+                ]
+              }
+            ) : null,
+            showToolbarProgress && deploymentRow ? /* @__PURE__ */ jsx(
+              PublishProgressBar,
+              {
+                status: deploymentRow.status,
+                compact: true,
+                href: `${SETTO_BASE}?deployment=${encodeURIComponent(activeDeployment)}`
+              }
+            ) : null,
+            !hasDrafts && !error && !showPublishedNotice && !showToolbarProgress && !publishing ? /* @__PURE__ */ jsx("span", { style: emptyStateStyle, children: "Ingen endringer" }) : null,
+            /* @__PURE__ */ jsxs("div", { ref: menuRef, style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setMenuOpen((o) => !o),
+                  "aria-label": "Meny",
+                  "aria-expanded": menuOpen,
+                  style: {
+                    ...menuBtnStyle,
+                    background: menuOpen ? "rgba(242, 235, 223, 0.16)" : "transparent"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = "rgba(242, 235, 223, 0.16)";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = menuOpen ? "rgba(242, 235, 223, 0.16)" : "transparent";
+                  },
+                  children: "⋮"
+                }
+              ),
+              menuOpen ? /* @__PURE__ */ jsxs("div", { style: dropdownStyle, role: "menu", children: [
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    onClick: cancelDrafts,
+                    icon: /* @__PURE__ */ jsx(UndoIcon, {}),
+                    disabled: !hasDrafts,
+                    children: "Avbryt"
+                  }
+                ),
+                /* @__PURE__ */ jsx(MenuItem, { onClick: goToHistory, icon: /* @__PURE__ */ jsx(HistoryIcon, {}), children: "Historikk" }),
+                /* @__PURE__ */ jsx(MenuItem, { onClick: signOut, icon: /* @__PURE__ */ jsx(LogOutIcon, {}), children: "Logg ut" })
+              ] }) : null
+            ] })
           ] }) : null
-        ] })
-      ] })
-    ] }),
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(EditOnboardingDialog, {}),
     publishDialogOpen && (publishing || activeDeployment !== null) ? /* @__PURE__ */ jsx(
       PublishDialog,
@@ -22442,82 +22564,112 @@ function EditToolbar() {
     ) : null
   ] });
 }
-const barStyle = {
-  height: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: 12,
-  padding: "0 12px",
-  background: "#ffffff",
-  color: "#1a1a1a",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
-  fontSize: 13,
-  borderBottom: "1px solid #e8e8e8",
-  boxShadow: "0 1px 8px rgba(0, 0, 0, 0.06)"
+const EASE_OUT_EXPO = "cubic-bezier(0.16, 1, 0.3, 1)";
+const FAB_SHADOW = "0 8px 24px rgba(33, 23, 17, 0.35), 0 2px 6px rgba(33, 23, 17, 0.2)";
+function containerStyleFor(hasDrafts) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    height: FAB_SIZE,
+    width: FAB_SIZE,
+    padding: 0,
+    background: BLEKK,
+    color: CREMA,
+    borderRadius: FAB_SIZE / 2,
+    boxShadow: hasDrafts ? `0 0 0 2px ${TERRACOTTA}, ${FAB_SHADOW}` : FAB_SHADOW,
+    fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+    fontSize: 13,
+    overflow: "visible",
+    transition: `width 500ms ${EASE_OUT_EXPO}, padding 500ms ${EASE_OUT_EXPO}, box-shadow 300ms ${EASE_OUT_EXPO}`
+  };
+}
+const expandedContainerStyle = {
+  width: "auto",
+  paddingRight: 10
 };
-const leftStyle = {
-  display: "flex",
+const markButtonStyle = {
+  display: "inline-flex",
   alignItems: "center",
-  minWidth: 0
+  justifyContent: "center",
+  flexShrink: 0,
+  width: FAB_SIZE,
+  height: FAB_SIZE,
+  background: "transparent",
+  border: "none",
+  padding: 0,
+  cursor: "pointer",
+  color: "inherit"
 };
-const rightStyle = {
+const contentStyle = {
   display: "flex",
   alignItems: "center",
-  gap: 8,
-  flexShrink: 0
+  gap: 6,
+  paddingLeft: 4,
+  whiteSpace: "nowrap"
 };
-const draftStyle = {
-  color: "#666",
+const errorStyle = {
+  color: "#ffb4a8",
   fontSize: 12,
-  whiteSpace: "nowrap"
+  maxWidth: 240,
+  overflow: "hidden",
+  textOverflow: "ellipsis"
 };
-const errorStyle = { color: "#dc2626", fontSize: 12 };
 const publishedNoticeStyle = {
   display: "inline-flex",
   alignItems: "center",
   gap: 5,
   padding: "4px 10px",
-  borderRadius: 6,
-  border: "1px solid #bbf7d0",
-  background: "#f0fdf4",
-  color: "#15803d",
+  borderRadius: 999,
+  border: "1px solid rgba(242, 235, 223, 0.25)",
+  background: "rgba(242, 235, 223, 0.08)",
+  color: CREMA,
   fontSize: 12,
   fontWeight: 500,
   cursor: "pointer",
   whiteSpace: "nowrap"
 };
 const publishBtnStyle = {
-  background: "#640AFF",
-  color: "#fff",
+  background: TERRACOTTA,
+  color: CREMA,
   border: "none",
-  borderRadius: 6,
+  borderRadius: 999,
   padding: "6px 14px",
   fontSize: 13,
-  fontWeight: 500,
+  fontWeight: 600,
   cursor: "pointer",
   whiteSpace: "nowrap"
 };
 const menuBtnStyle = {
   background: "transparent",
-  color: "#666",
+  color: CREMA,
   border: "none",
-  borderRadius: 6,
-  padding: "4px 8px",
-  fontSize: 20,
+  borderRadius: 999,
+  width: 32,
+  height: 32,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 22,
   lineHeight: 1,
-  cursor: "pointer"
+  cursor: "pointer",
+  fontWeight: 700
+};
+const emptyStateStyle = {
+  color: "rgba(242, 235, 223, 0.55)",
+  fontSize: 13,
+  whiteSpace: "nowrap",
+  padding: "0 4px"
 };
 const dropdownStyle = {
   position: "absolute",
-  top: "100%",
-  right: 0,
-  marginTop: 4,
+  bottom: "100%",
+  left: 0,
+  marginBottom: 8,
   background: "#fff",
   border: "1px solid #e8e8e8",
-  borderRadius: 8,
-  boxShadow: "0 4px 16px rgba(0, 0, 0, 0.12)",
-  minWidth: 140,
+  borderRadius: 10,
+  boxShadow: "0 12px 32px rgba(33, 23, 17, 0.18)",
+  minWidth: 160,
   overflow: "hidden",
   zIndex: 1
 };
@@ -22537,17 +22689,19 @@ const menuItemStyle = {
 function MenuItem({
   onClick,
   icon,
-  children
+  children,
+  disabled = false
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       onClick,
-      style: menuItemStyle,
+      disabled,
+      style: { ...menuItemStyle, opacity: disabled ? 0.4 : 1, cursor: disabled ? "not-allowed" : "pointer" },
       role: "menuitem",
       onMouseEnter: (e) => {
-        e.currentTarget.style.background = "#f5f5f5";
+        if (!disabled) e.currentTarget.style.background = "#f5f5f5";
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.background = "transparent";
@@ -22596,6 +22750,12 @@ function LogOutIcon() {
     /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
   ] });
 }
+function UndoIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 7v6h6" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 17a9 9 0 0 0-15-6.7L3 13" })
+  ] });
+}
 function EditModeShell({ children, themeStore }) {
   useSettoDocumentLayout(true);
   const [toolbarRoot, setToolbarRoot] = useState(null);
@@ -22635,7 +22795,9 @@ function SettoProvider({ config, children }) {
   const api = useMemo(() => createApi({ apiUrl: config.apiUrl, supabase }), [config.apiUrl, supabase]);
   const [session, setSession] = useState(null);
   const [authLoading, setAuthLoading] = useState(true);
-  const [editParam, setEditParam] = useState(false);
+  const [onAdminRoute, setOnAdminRoute] = useState(
+    () => typeof window === "undefined" ? false : isAdminRoute()
+  );
   useEffect(() => {
     let cancelled = false;
     supabase.auth.getSession().then(({ data }) => {
@@ -22652,18 +22814,12 @@ function SettoProvider({ config, children }) {
     };
   }, [supabase]);
   useEffect(() => {
-    const compute = () => {
-      try {
-        const params = new URLSearchParams(window.location.search);
-        setEditParam(params.get("setto") === "edit");
-      } catch {
-        setEditParam(false);
-      }
-    };
+    const compute = () => setOnAdminRoute(isAdminRoute());
     compute();
     window.addEventListener("popstate", compute);
     return () => window.removeEventListener("popstate", compute);
   }, []);
+  const access = useSiteAccess(supabase, session, config.siteId);
   const { i18n } = useTranslation();
   const storeRef = useRef(null);
   const themeStoreRef = useRef(null);
@@ -22676,7 +22832,7 @@ function SettoProvider({ config, children }) {
     assetStoreRef.current = new AssetStore();
     setStoreReady(true);
   }, [i18n, config.theme]);
-  const editMode = !!session && editParam;
+  const editMode = !!session && !!access.currentSite && !onAdminRoute && !authLoading && !access.loading;
   const value = {
     config,
     supabase,
@@ -22684,6 +22840,8 @@ function SettoProvider({ config, children }) {
     session,
     authLoading,
     editMode,
+    currentSite: access.currentSite,
+    sites: access.sites,
     store: storeReady ? storeRef.current : null,
     themeStore: storeReady ? themeStoreRef.current : null,
     assetStore: storeReady ? assetStoreRef.current : null
@@ -22699,7 +22857,8 @@ function useSetto() {
 }
 const GuestEditContext = createContext(null);
 function GuestEditProvider({ children }) {
-  const { editMode } = useSetto();
+  const { editMode, themeStore } = useSetto();
+  const { selectSection } = useSectionEdit();
   const [active, setActive] = useState(false);
   useEffect(() => {
     if (editMode && active) setActive(false);
@@ -22709,8 +22868,14 @@ function GuestEditProvider({ children }) {
     return () => document.documentElement.classList.remove("setto-guest-editing");
   }, [active]);
   const start = useCallback(() => setActive(true), []);
-  const stop = useCallback(() => setActive(false), []);
-  return /* @__PURE__ */ jsx(GuestEditContext.Provider, { value: { active, start, stop }, children });
+  const stop = useCallback(() => {
+    setActive(false);
+    selectSection(null);
+  }, [selectSection]);
+  return /* @__PURE__ */ jsxs(GuestEditContext.Provider, { value: { active, start, stop }, children: [
+    children,
+    active && themeStore ? createPortal(/* @__PURE__ */ jsx(SectionToolbar, {}), document.body) : null
+  ] });
 }
 function useGuestEdit() {
   const ctx = useContext(GuestEditContext);
@@ -22852,9 +23017,9 @@ function T({ k }) {
   const value = store ? store.get(k, i18n.language) : t(k);
   useEffect(() => {
     const el = ref.current;
-    if (!el || focused || !editMode) return;
+    if (!el || focused || !editable) return;
     if (el.textContent !== value) el.textContent = value;
-  }, [value, focused, editMode]);
+  }, [value, focused, editable]);
   if (!editable) return /* @__PURE__ */ jsx(Fragment, { children: value });
   const handleMouseDown = (e) => {
     e.stopPropagation();
@@ -22901,7 +23066,6 @@ function T({ k }) {
     commit(e.currentTarget);
   };
   const handleInput = (e) => {
-    if (!editMode) return;
     store?.set(k, i18n.language, e.currentTarget.textContent ?? "");
   };
   const handlePaste = (e) => {
@@ -22924,7 +23088,7 @@ function T({ k }) {
         contentEditable: true,
         suppressContentEditableWarning: true,
         lang,
-        spellCheck: true,
+        spellCheck: false,
         role: "textbox",
         tabIndex: 0,
         onFocus: (e) => {
@@ -22977,9 +23141,9 @@ function isNestedThemeTarget(target, container) {
   const hit = target.closest("[data-setto-section]");
   return !!(hit && hit !== container);
 }
-function handleThemeTargetClick(e, editMode, themeId, selected, selectSection, onClick) {
+function handleThemeTargetClick(e, editable, themeId, selected, selectSection, onClick) {
   onClick?.(e);
-  if (!editMode || e.defaultPrevented) return;
+  if (!editable || e.defaultPrevented) return;
   const target = e.target;
   if (isTextEditClick(target)) return;
   if (target.closest("a[href], button, input, textarea, select")) return;
@@ -22987,11 +23151,11 @@ function handleThemeTargetClick(e, editMode, themeId, selected, selectSection, o
   e.stopPropagation();
   selectSection(selected ? null : themeId);
 }
-function themeTargetEditStyle(editMode, selected) {
-  if (!editMode) return {};
+function themeTargetEditStyle(editable, selected, accent = "#640AFF") {
+  if (!editable) return {};
   return {
     cursor: "pointer",
-    outline: selected ? "2px solid #640AFF" : void 0,
+    outline: selected ? `2px solid ${accent}` : void 0,
     outlineOffset: selected ? -2 : void 0
   };
 }
@@ -23009,23 +23173,26 @@ function useSectionTheme(sectionId) {
 const SettoSection = forwardRef(
   function SettoSection2({ sectionId, className, style, children, onClick, ...rest }, ref) {
     const { editMode } = useSetto();
+    const guest = useGuestEdit();
+    const editable = editMode || guest.active;
+    const accent = editMode ? "#640AFF" : "#C4502A";
     const { selectedId, selectSection } = useSectionEdit();
     const colors = useSectionTheme(sectionId);
     const selected = selectedId === sectionId;
     const handleClick = useCallback(
       (e) => {
-        if (editMode) {
+        if (editable) {
           const target = e.target;
           if (isNestedThemeTarget(target, e.currentTarget)) return;
         }
-        handleThemeTargetClick(e, editMode, sectionId, selected, selectSection, onClick);
+        handleThemeTargetClick(e, editable, sectionId, selected, selectSection, onClick);
       },
-      [editMode, onClick, selectSection, selected, sectionId]
+      [editable, onClick, selectSection, selected, sectionId]
     );
     const mergedStyle = {
       ...style,
       ...colors.background ? { backgroundColor: colors.background } : {},
-      ...themeTargetEditStyle(editMode, selected)
+      ...themeTargetEditStyle(editable, selected, accent)
     };
     return /* @__PURE__ */ jsx(
       "section",
@@ -23044,6 +23211,9 @@ const SettoSection = forwardRef(
 const SettoBlock = forwardRef(
   function SettoBlock2({ blockId, className, style, children, onClick, ...rest }, ref) {
     const { editMode } = useSetto();
+    const guest = useGuestEdit();
+    const editable = editMode || guest.active;
+    const accent = editMode ? "#640AFF" : "#C4502A";
     const { selectedId, selectSection } = useSectionEdit();
     const colors = useSectionTheme(blockId);
     const selected = selectedId === blockId;
@@ -23051,19 +23221,19 @@ const SettoBlock = forwardRef(
       (e) => {
         handleThemeTargetClick(
           e,
-          editMode,
+          editable,
           blockId,
           selected,
           selectSection,
           onClick
         );
       },
-      [editMode, blockId, selected, selectSection, onClick]
+      [editable, blockId, selected, selectSection, onClick]
     );
     const mergedStyle = {
       ...style,
       ...colors.background ? { backgroundColor: colors.background } : {},
-      ...themeTargetEditStyle(editMode, selected)
+      ...themeTargetEditStyle(editable, selected, accent)
     };
     return /* @__PURE__ */ jsx(
       "div",
@@ -23111,7 +23281,7 @@ function FloatingPopover({
       if (top + popoverH > window.innerHeight - 8) {
         top = rect.top - popoverH - 6;
       }
-      if (top < TOOLBAR_HEIGHT + 4) top = rect.bottom + 6;
+      if (top < 8) top = rect.bottom + 6;
       setPos({ top, left });
     };
     update();
@@ -23175,6 +23345,9 @@ function FloatingPopover({
 function SettoIcon({ k, icons, size = 24, className, style }) {
   const { t, i18n } = useTranslation();
   const { editMode, store } = useSetto();
+  const guest = useGuestEdit();
+  const editable = editMode || guest.active;
+  const accent = editMode ? "#640AFF" : "#C4502A";
   const anchorRef = useRef(null);
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -23186,7 +23359,7 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
   const iconName = store ? store.get(k, i18n.language) : t(k);
   const Icon = icons[iconName] ?? icons[Object.keys(icons)[0] ?? ""] ?? null;
   if (!Icon) return null;
-  if (!editMode) {
+  if (!editable) {
     return /* @__PURE__ */ jsx(Icon, { size, className, style });
   }
   const handleClick = (e) => {
@@ -23217,7 +23390,7 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
         style: {
           display: "inline-flex",
           cursor: "pointer",
-          outline: open ? "2px solid #640AFF" : void 0,
+          outline: open ? `2px solid ${accent}` : void 0,
           outlineOffset: 2,
           borderRadius: 4
         },
@@ -23484,6 +23657,28 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
     )
   ] });
 }
+const STYLE_ID = "setto-repeater-styles";
+function useRepeaterStyles() {
+  useEffect(() => {
+    if (document.getElementById(STYLE_ID)) return;
+    const el = document.createElement("style");
+    el.id = STYLE_ID;
+    el.textContent = `
+      .setto-repeater-remove {
+        opacity: 0;
+        transition: opacity 120ms ease;
+      }
+      .setto-repeater-item:hover .setto-repeater-remove,
+      .setto-repeater-remove:focus-visible {
+        opacity: 1;
+      }
+      @media (hover: none) {
+        .setto-repeater-remove { opacity: 1; }
+      }
+    `;
+    document.head.appendChild(el);
+  }, []);
+}
 function SettoRepeater({
   itemsKey,
   defaultItem,
@@ -23493,7 +23688,10 @@ function SettoRepeater({
 }) {
   const { i18n } = useTranslation();
   const { editMode, store } = useSetto();
+  const guest = useGuestEdit();
+  const editable = editMode || guest.active;
   const lng = i18n.language;
+  useRepeaterStyles();
   const [, force] = useState(0);
   useEffect(() => {
     if (!store) return;
@@ -23507,16 +23705,35 @@ function SettoRepeater({
     if (keys.length <= 1) return;
     store?.removeListItem(itemsKey, itemKey, lng);
   };
+  const canRemove = keys.length > 1;
   return /* @__PURE__ */ jsxs("div", { className, "data-setto-repeater": true, children: [
-    editMode ? /* @__PURE__ */ jsx(
+    keys.map((itemKey, index) => /* @__PURE__ */ jsxs("div", { className: "setto-repeater-item", style: { position: "relative" }, children: [
+      editable && canRemove ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-setto-ui": true,
+          className: "setto-repeater-remove",
+          "aria-label": `Fjern ${itemLabel}`,
+          title: `Fjern ${itemLabel}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleRemove(itemKey);
+          },
+          style: removeBtnStyle,
+          children: "×"
+        }
+      ) : null,
+      children(itemKey, index)
+    ] }, itemKey)),
+    editable ? /* @__PURE__ */ jsx(
       "div",
       {
         "data-setto-ui": true,
         style: {
           display: "flex",
           justifyContent: "flex-end",
-          marginBottom: 8,
-          gap: 8
+          marginTop: 8
         },
         children: /* @__PURE__ */ jsxs(
           "button",
@@ -23527,7 +23744,7 @@ function SettoRepeater({
               e.stopPropagation();
               handleAdd();
             },
-            style: controlBtnStyle,
+            style: addBtnStyle,
             children: [
               "+ Legg til ",
               itemLabel
@@ -23535,37 +23752,10 @@ function SettoRepeater({
           }
         )
       }
-    ) : null,
-    keys.map((itemKey, index) => /* @__PURE__ */ jsxs("div", { className: "setto-repeater-item", style: { position: "relative" }, children: [
-      editMode ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "data-setto-ui": true,
-          "aria-label": `Fjern ${itemLabel}`,
-          disabled: keys.length <= 1,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleRemove(itemKey);
-          },
-          style: {
-            ...controlBtnStyle,
-            position: "absolute",
-            top: 0,
-            right: 0,
-            zIndex: 2,
-            padding: "4px 8px",
-            fontSize: 11,
-            opacity: keys.length <= 1 ? 0.4 : 1
-          },
-          children: "× Fjern"
-        }
-      ) : null,
-      children(itemKey, index)
-    ] }, itemKey))
+    ) : null
   ] });
 }
-const controlBtnStyle = {
+const addBtnStyle = {
   padding: "6px 10px",
   background: "#f7f7f7",
   border: "1px solid #e0e0e0",
@@ -23575,22 +23765,27 @@ const controlBtnStyle = {
   cursor: "pointer",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
 };
-function editModeUrl(pathname = "/") {
-  const u = new URL(window.location.href);
-  u.pathname = pathname;
-  u.search = "";
-  u.searchParams.set("setto", "edit");
-  return u.toString();
-}
-function isAdminRoute() {
-  return window.location.pathname.startsWith("/admin");
-}
-function isAdminDeploymentView() {
-  return isAdminRoute() && new URLSearchParams(window.location.search).has("deployment");
-}
-function adminRedirectUrl() {
-  return `${window.location.origin}/admin`;
-}
+const removeBtnStyle = {
+  position: "absolute",
+  top: 4,
+  right: 4,
+  zIndex: 2,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 24,
+  height: 24,
+  padding: 0,
+  background: "#ffffff",
+  border: "1px solid #e0e0e0",
+  borderRadius: "50%",
+  fontSize: 16,
+  lineHeight: 1,
+  color: "#444",
+  cursor: "pointer",
+  boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
+};
 function authCallbackType() {
   const hash = window.location.hash.replace(/^#/, "");
   if (!hash) return null;
@@ -23693,7 +23888,7 @@ function AuthGate({ children }) {
       clearAuthHashFromUrl();
       const { data: sessionData } = await supabase.auth.getSession();
       if (sessionData.session) {
-        window.location.replace(editModeUrl());
+        window.location.replace(siteHomeUrl());
         return;
       }
       setMode("signin");
@@ -23871,7 +24066,7 @@ const loadingStyle = {
 };
 function deploymentAdminUrl(deploymentId) {
   const u = new URL(window.location.href);
-  u.pathname = "/admin";
+  u.pathname = SETTO_BASE;
   u.search = "";
   u.searchParams.set("deployment", deploymentId);
   return u.pathname + u.search;
@@ -23883,8 +24078,7 @@ function SettoAdminApp() {
   return /* @__PURE__ */ jsx(AuthGate, { children: /* @__PURE__ */ jsx(SiteList, {}) });
 }
 function SiteList() {
-  const { supabase, session, config } = useSetto();
-  const [sites, setSites] = useState(null);
+  const { supabase, session, sites, currentSite, config } = useSetto();
   const [error, setError] = useState(null);
   const redirectAfterSignIn = useRef(false);
   useEffect(() => {
@@ -23895,33 +24089,13 @@ function SiteList() {
     });
     return () => sub.subscription.unsubscribe();
   }, [supabase]);
-  useEffect(() => {
-    if (!session) return;
-    let cancelled = false;
-    supabase.from("sites").select("*").then(({ data, error: err }) => {
-      if (cancelled) return;
-      if (err) {
-        setError(err.message);
-        setSites([]);
-        return;
-      }
-      setSites(data ?? []);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [supabase, session]);
-  const currentSite = useMemo(
-    () => sites?.find((s) => s.id === config.siteId) ?? null,
-    [sites, config.siteId]
-  );
   useEffect(() => {
     if (!redirectAfterSignIn.current || !session || sites === null || isAdminDeploymentView()) {
       return;
     }
     if (currentSite) {
       redirectAfterSignIn.current = false;
-      window.location.replace(editModeUrl());
+      window.location.replace(siteHomeUrl());
       return;
     }
     redirectAfterSignIn.current = false;
@@ -23946,8 +24120,8 @@ function SiteList() {
           " · branch ",
           currentSite.branch
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8 }, children: /* @__PURE__ */ jsx("a", { href: editUrl(), style: primaryBtnLinkStyle, children: "Begynn å redigere" }) }),
-        /* @__PURE__ */ jsx(DeploymentList, { siteId: currentSite.id })
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8 }, children: /* @__PURE__ */ jsx("a", { href: siteHomeUrl(), style: primaryBtnLinkStyle, children: "Begynn å redigere" }) }),
+        /* @__PURE__ */ jsx(DeploymentList, { siteId: currentSite.id, onError: setError })
       ] }) : sites && sites.length === 0 ? /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Du er ikke medlem av noen sider ennå. Be administratoren legge deg til." }) : null,
       sites && !currentSite && sites.length > 0 ? /* @__PURE__ */ jsxs("section", { style: cardStyle, children: [
         /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 16 }, children: "Andre sider du har tilgang til" }),
@@ -23965,7 +24139,10 @@ function SiteList() {
     ] })
   ] });
 }
-function DeploymentList({ siteId }) {
+function DeploymentList({
+  siteId,
+  onError
+}) {
   const { supabase, api, config } = useSetto();
   const [rows, setRows] = useState(null);
   const [focusId, setFocusId] = useState(focusedDeploymentId);
@@ -23984,7 +24161,7 @@ function DeploymentList({ siteId }) {
     try {
       await api.cancelDeployment(config.siteId, focusId);
       setFocusId(null);
-      window.history.replaceState(null, "", "/admin");
+      window.history.replaceState(null, "", SETTO_BASE);
     } catch (err) {
       setCancelError(err instanceof Error ? err.message : "Kunne ikke avbryte");
     } finally {
@@ -23997,8 +24174,10 @@ function DeploymentList({ siteId }) {
   }, [api, config.siteId]);
   useEffect(() => {
     let cancelled = false;
-    supabase.from("deployments").select("*").eq("site_id", siteId).order("started_at", { ascending: false }).limit(10).then(({ data }) => {
-      if (!cancelled) setRows(data ?? []);
+    supabase.from("deployments").select("*").eq("site_id", siteId).order("started_at", { ascending: false }).limit(10).then(({ data, error }) => {
+      if (cancelled) return;
+      if (error) onError?.(error.message);
+      setRows(data ?? []);
     });
     const channel = supabase.channel(`setto-site-deps-${siteId}`).on(
       "postgres_changes",
@@ -24017,7 +24196,7 @@ function DeploymentList({ siteId }) {
       cancelled = true;
       supabase.removeChannel(channel);
     };
-  }, [supabase, siteId]);
+  }, [supabase, siteId, onError]);
   const showFocusPanel = focusId !== null && (focusRow === null || isDeploymentInProgress(focusRow.status));
   if (!rows) return /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Laster deploys…" });
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
@@ -24102,9 +24281,6 @@ function SignOutButton() {
   const { supabase } = useSetto();
   return /* @__PURE__ */ jsx("button", { onClick: () => supabase.auth.signOut(), style: signOutBtnStyle, children: "Logg ut" });
 }
-function editUrl() {
-  return editModeUrl("/");
-}
 const loadingRedirectStyle = {
   minHeight: "100dvh",
   display: "flex",
@@ -24213,6 +24389,7 @@ function depDotStyle(status) {
 export {
   AuthGate,
   GuestEditProvider,
+  SETTO_BASE,
   SettoAdminApp,
   SettoBlock,
   SettoIcon,