@sevenfold/setto-client 0.14.0 → 0.16.0

package/dist/setto-client.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useState, useRef, useEffect, useMemo, useSyncExternalStore, useLayoutEffect, createContext, useContext, useCallback, forwardRef, Fragment as Fragment$1, useId, useInsertionEffect } from "react";
+import { useState, useRef, useEffect, useMemo, createContext, useContext, useCallback, useLayoutEffect, useSyncExternalStore, forwardRef, Fragment as Fragment$1, useId, useInsertionEffect } from "react";
 import { useTranslation } from "react-i18next";
 import * as ReactDOM from "react-dom";
 import { createPortal } from "react-dom";
@@ -21431,11 +21431,11 @@ function useSettoChromeSlot(name) {
       slotListeners.delete(listener);
     };
   }, []);
-  const Offered = slots.get(name) ?? null;
+  const Offered = slots.get(name);
   return useMemo(() => {
     if (!Offered) return null;
-    return function SettoChromeSlot() {
-      return /* @__PURE__ */ jsx(ChromeBoundary, { onError: () => retireSlot(name), children: /* @__PURE__ */ jsx(Offered, {}) });
+    return function SettoChromeSlot(props) {
+      return /* @__PURE__ */ jsx(ChromeBoundary, { onError: () => retireSlot(name), children: React.createElement(Offered, props) });
     };
   }, [Offered, name]);
 }
@@ -21452,6 +21452,7 @@ function SettoChrome() {
     currentSite: null,
     sitesLoaded: false,
     editMode: false,
+    guestEdit: false,
     authLoading: true
   }));
   stateRef.current = () => ({
@@ -21464,6 +21465,7 @@ function SettoChrome() {
     } : null,
     sitesLoaded: setto.sites !== null,
     editMode: setto.editMode,
+    guestEdit: setto.guestEdit,
     authLoading: setto.authLoading
   });
   useEffect(() => {
@@ -21550,7 +21552,7 @@ function withoutCheckoutIntent() {
 }
 const FAB_SIZE = 52;
 const FAB_INSET = 16;
-const STYLE_ID$3 = "setto-edit-layout";
+const STYLE_ID$2 = "setto-edit-layout";
 const HTML_CLASS = "setto-edit-mode";
 function useSettoDocumentLayout(active) {
   useEffect(() => {
@@ -21559,19 +21561,24 @@ function useSettoDocumentLayout(active) {
     html.classList.add(HTML_CLASS);
     html.style.setProperty("--setto-fab-size", `${FAB_SIZE}px`);
     html.style.setProperty("--setto-fab-inset", `${FAB_INSET}px`);
-    let styleEl = document.getElementById(STYLE_ID$3);
+    let styleEl = document.getElementById(STYLE_ID$2);
     if (!styleEl) {
       styleEl = document.createElement("style");
-      styleEl.id = STYLE_ID$3;
+      styleEl.id = STYLE_ID$2;
       styleEl.textContent = `
         html.setto-edit-mode {
           width: 100%;
           overflow-x: clip;
         }
 
+        /*
+         * Anchored by its right edge, which is also what makes the menu open
+         * leftwards: the pill grows and this corner does not move, so the
+         * button somebody just tapped stays under their thumb.
+         */
         html.setto-edit-mode #setto-toolbar-root {
           position: fixed;
-          left: var(--setto-fab-inset);
+          right: var(--setto-fab-inset);
           bottom: var(--setto-fab-inset);
           z-index: 2147483647;
         }
@@ -21625,492 +21632,6 @@ function notifyLayoutChange() {
     window.dispatchEvent(new Event("resize"));
   });
 }
-function isLinkContext(el) {
-  const key = el.getAttribute("data-setto-key");
-  if (key?.startsWith("lang.")) return false;
-  if (el.closest("[data-setto-no-hint]")) return false;
-  return !!(el.closest("a[href]") || el.closest("button"));
-}
-function activateLinkContext(el) {
-  const anchor = el.closest("a[href]");
-  if (anchor instanceof HTMLAnchorElement) {
-    anchor.click();
-    return;
-  }
-  const button = el.closest("button");
-  if (button instanceof HTMLButtonElement) {
-    button.click();
-  }
-}
-const QUERY = "(hover: none) and (pointer: coarse)";
-function subscribe(onChange) {
-  const mq = window.matchMedia(QUERY);
-  mq.addEventListener("change", onChange);
-  return () => mq.removeEventListener("change", onChange);
-}
-function getSnapshot() {
-  return window.matchMedia(QUERY).matches;
-}
-function useCoarsePointer() {
-  return useSyncExternalStore(subscribe, getSnapshot, () => false);
-}
-const MARGIN$2 = 10;
-const OFFSET$1 = 14;
-function hintLabel() {
-  const isMac = navigator.platform.toUpperCase().includes("MAC");
-  return isMac ? "⌘+klikk for å åpne" : "Ctrl+klikk for å åpne";
-}
-function placeTooltip(anchor, width, height) {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  let left = anchor.x + OFFSET$1;
-  let top = anchor.y + OFFSET$1;
-  if (left + width > vw - MARGIN$2) {
-    left = anchor.x - width - OFFSET$1;
-  }
-  if (left < MARGIN$2) {
-    left = MARGIN$2;
-  }
-  if (top + height > vh - MARGIN$2) {
-    top = anchor.y - height - OFFSET$1;
-  }
-  if (top < MARGIN$2) {
-    top = MARGIN$2;
-  }
-  return { left, top };
-}
-function EditLinkHint() {
-  const coarsePointer = useCoarsePointer();
-  const [anchor, setAnchor] = useState(null);
-  const [position, setPosition] = useState(null);
-  const tipRef = useRef(null);
-  const text = hintLabel();
-  useEffect(() => {
-    if (coarsePointer) return;
-    const onMove = (e) => {
-      const target = e.target;
-      if (!(target instanceof Element)) {
-        setAnchor(null);
-        return;
-      }
-      const editable = target.closest("[data-setto-key]");
-      if (!(editable instanceof HTMLElement) || !isLinkContext(editable)) {
-        setAnchor(null);
-        return;
-      }
-      setAnchor({ x: e.clientX, y: e.clientY });
-    };
-    document.addEventListener("mousemove", onMove, true);
-    return () => document.removeEventListener("mousemove", onMove, true);
-  }, [coarsePointer]);
-  useLayoutEffect(() => {
-    if (!anchor || !tipRef.current) {
-      setPosition(null);
-      return;
-    }
-    const { width, height } = tipRef.current.getBoundingClientRect();
-    setPosition(placeTooltip(anchor, width, height));
-  }, [anchor, text]);
-  if (coarsePointer || !anchor) return null;
-  const style = {
-    position: "fixed",
-    left: position?.left ?? anchor.x + OFFSET$1,
-    top: position?.top ?? anchor.y + OFFSET$1,
-    visibility: position ? "visible" : "hidden",
-    background: "#1a1a1a",
-    color: "#fff",
-    fontSize: 11,
-    padding: "4px 8px",
-    borderRadius: 4,
-    pointerEvents: "none",
-    whiteSpace: "nowrap",
-    fontFamily: "system-ui, sans-serif",
-    boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
-  };
-  return /* @__PURE__ */ jsx("div", { ref: tipRef, style, children: text });
-}
-function colorsMatch(a, b) {
-  const na = normalizeColor(a);
-  const nb = normalizeColor(b);
-  if (!na || !nb) return false;
-  return na === nb;
-}
-function normalizeColor(color) {
-  const trimmed = color.trim().toLowerCase();
-  if (/^#[0-9a-f]{3}$/.test(trimmed)) {
-    const [, r, g, b] = trimmed.match(/^#(.)(.)(.)$/) ?? [];
-    return `#${r}${r}${g}${g}${b}${b}`;
-  }
-  if (/^#[0-9a-f]{6}$/.test(trimmed)) return trimmed;
-  const rgb = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-  if (rgb) {
-    const [, r, g, b] = rgb;
-    if (r === void 0 || g === void 0 || b === void 0) return null;
-    const hex = (n) => Number(n).toString(16).padStart(2, "0");
-    return `#${hex(r)}${hex(g)}${hex(b)}`;
-  }
-  return null;
-}
-function swatchBorder(color) {
-  const n = normalizeColor(color);
-  if (n === "#ffffff" || n === "#e6dccf") return "#ccc";
-  return "transparent";
-}
-const SectionEditContext = createContext(null);
-function SectionEditProvider({ children }) {
-  const [selectedId, setSelectedId] = useState(null);
-  const selectSection = useCallback((id) => {
-    setSelectedId(id);
-  }, []);
-  const value = useMemo(
-    () => ({ selectedId, selectSection }),
-    [selectedId, selectSection]
-  );
-  return /* @__PURE__ */ jsx(SectionEditContext.Provider, { value, children });
-}
-function useSectionEdit() {
-  const ctx = useContext(SectionEditContext);
-  if (!ctx) {
-    throw new Error("useSectionEdit() must be used inside SectionEditProvider");
-  }
-  return ctx;
-}
-const SECTION_TOOLBAR_HEIGHT = 44;
-const GAP = 8;
-const MARGIN$1 = 8;
-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 top = Math.max(MARGIN$1, rect.top - toolbarH - GAP);
-  return { top, left };
-}
-function BrandColorPicker({
-  label,
-  value,
-  brandColors,
-  open,
-  onToggle,
-  onSelect,
-  popoverPlacement
-}) {
-  const buttonRef = useRef(null);
-  const popoverRef = useRef(null);
-  const [popoverPos, setPopoverPos] = useState(null);
-  const matched = brandColors.find((b) => colorsMatch(value, b.value));
-  const displayColor = matched?.value ?? (value || "#cccccc");
-  const displayLabel = matched?.label ?? label;
-  useLayoutEffect(() => {
-    if (!open || !buttonRef.current) {
-      setPopoverPos(null);
-      return;
-    }
-    const update = () => {
-      const btn = buttonRef.current;
-      const pop = popoverRef.current;
-      if (!btn) return;
-      const rect = btn.getBoundingClientRect();
-      const popoverH = pop?.offsetHeight ?? 120;
-      const popoverW = pop?.offsetWidth ?? 180;
-      let top = popoverPlacement === "above" ? rect.top - popoverH - 6 : rect.bottom + 6;
-      let left = rect.left;
-      if (left + popoverW > window.innerWidth - 8) {
-        left = window.innerWidth - popoverW - 8;
-      }
-      if (left < 8) left = 8;
-      if (top < 8) top = rect.bottom + 6;
-      if (top + popoverH > window.innerHeight - 8) {
-        top = rect.top - popoverH - 6;
-      }
-      setPopoverPos({ top, left });
-    };
-    update();
-    requestAnimationFrame(update);
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [open, popoverPlacement, brandColors.length]);
-  const popover = open ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: popoverRef,
-      role: "listbox",
-      "aria-label": label,
-      "data-setto-ui": true,
-      style: {
-        position: "fixed",
-        top: popoverPos?.top ?? -9999,
-        left: popoverPos?.left ?? 0,
-        visibility: popoverPos ? "visible" : "hidden",
-        zIndex: 2147483647,
-        display: "grid",
-        gridTemplateColumns: "repeat(4, 1fr)",
-        gap: 4,
-        padding: 8,
-        background: "#fff",
-        border: "1px solid #e0e0e0",
-        borderRadius: 8,
-        boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
-        minWidth: 160
-      },
-      onMouseDown: (e) => e.stopPropagation(),
-      onClick: (e) => e.stopPropagation(),
-      children: brandColors.map((brand) => {
-        const selected = colorsMatch(value, brand.value);
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "option",
-            "aria-selected": selected,
-            title: brand.label,
-            onClick: () => onSelect(brand.value),
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 4,
-              padding: 6,
-              background: selected ? "#f5f3ff" : "transparent",
-              border: selected ? "1px solid #640AFF" : "1px solid transparent",
-              borderRadius: 6,
-              cursor: "pointer"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-hidden": true,
-                  style: {
-                    width: 24,
-                    height: 24,
-                    borderRadius: "50%",
-                    background: brand.value,
-                    border: `1px solid ${swatchBorder(brand.value)}`
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "#666", lineHeight: 1.2 }, children: brand.label })
-            ]
-          },
-          brand.value
-        );
-      })
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: buttonRef,
-        type: "button",
-        "data-setto-ui": true,
-        onMouseDown: (e) => e.stopPropagation(),
-        onClick: (e) => {
-          e.stopPropagation();
-          onToggle();
-        },
-        "aria-expanded": open,
-        "aria-haspopup": "listbox",
-        "aria-label": `${label}: ${displayLabel}`,
-        title: `${label}: ${displayLabel}`,
-        style: {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: 6,
-          padding: "4px 8px 4px 6px",
-          background: open ? "#f5f3ff" : "#f7f7f7",
-          border: open ? "1px solid #640AFF" : "1px solid #e0e0e0",
-          borderRadius: 6,
-          cursor: "pointer",
-          fontSize: 11,
-          color: "#444",
-          whiteSpace: "nowrap",
-          flexShrink: 0
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": true,
-              style: {
-                width: 18,
-                height: 18,
-                borderRadius: "50%",
-                background: displayColor,
-                border: `1px solid ${swatchBorder(displayColor)}`,
-                flexShrink: 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { color: "#999", fontSize: 10, lineHeight: 1 }, children: "▾" })
-        ]
-      }
-    ),
-    popover ? createPortal(popover, document.body) : null
-  ] });
-}
-function SectionToolbar() {
-  const { themeStore, config } = useSetto();
-  const { selectedId, selectSection } = useSectionEdit();
-  const [pos, setPos] = useState(null);
-  const [openField, setOpenField] = useState(null);
-  const barRef = useRef(null);
-  const schema = selectedId ? config.sectionSchemas?.[selectedId] : null;
-  const brandColors = config.brandColors ?? [];
-  useLayoutEffect(() => {
-    if (!selectedId) {
-      setPos(null);
-      return;
-    }
-    const el = document.querySelector(
-      `[data-setto-section="${selectedId}"]`
-    );
-    if (!el) {
-      setPos(null);
-      return;
-    }
-    const update = () => {
-      const bar = barRef.current;
-      if (!bar) return;
-      const w = bar.offsetWidth;
-      const h = bar.offsetHeight || SECTION_TOOLBAR_HEIGHT;
-      setPos(computePosition(el, w, h));
-    };
-    update();
-    requestAnimationFrame(update);
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [selectedId, openField, schema?.fields.length]);
-  useEffect(() => {
-    setOpenField(null);
-  }, [selectedId]);
-  useEffect(() => {
-    if (!openField) return;
-    const close = (e) => {
-      const target = e.target;
-      if (barRef.current?.contains(target)) return;
-      if (target instanceof Element && target.closest("[data-setto-ui]")) return;
-      setOpenField(null);
-    };
-    document.addEventListener("mousedown", close);
-    return () => document.removeEventListener("mousedown", close);
-  }, [openField]);
-  useEffect(() => {
-    if (!selectedId) return;
-    const onKey = (e) => {
-      if (e.key !== "Escape") return;
-      if (openField) {
-        setOpenField(null);
-        return;
-      }
-      selectSection(null);
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [selectedId, selectSection, openField]);
-  if (!selectedId || !schema || !themeStore || brandColors.length === 0) {
-    return null;
-  }
-  const colors = themeStore.getSection(selectedId);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: barRef,
-      role: "toolbar",
-      "data-setto-ui": true,
-      "data-setto-theme-id": selectedId,
-      "aria-label": `Farger — ${schema.label}`,
-      style: {
-        position: "fixed",
-        top: pos?.top ?? -9999,
-        left: pos?.left ?? 0,
-        width: "max-content",
-        maxWidth: `calc(100vw - ${MARGIN$1 * 2}px)`,
-        minHeight: SECTION_TOOLBAR_HEIGHT,
-        zIndex: 2147483646,
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "0 12px",
-        background: "#ffffff",
-        border: "1px solid #e0e0e0",
-        borderRadius: 8,
-        boxShadow: "0 4px 20px rgba(0,0,0,0.12)",
-        fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
-        fontSize: 12,
-        pointerEvents: "auto",
-        userSelect: "none",
-        visibility: pos ? "visible" : "hidden"
-      },
-      onMouseDown: (e) => e.stopPropagation(),
-      onClick: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, whiteSpace: "nowrap", flexShrink: 0 }, children: schema.label }),
-        /* @__PURE__ */ jsx("span", { style: { color: "#ccc", flexShrink: 0 }, children: "·" }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              flexWrap: "nowrap"
-            },
-            children: schema.fields.map((field) => /* @__PURE__ */ jsx(
-              BrandColorPicker,
-              {
-                label: field.label,
-                value: colors[field.key] ?? "",
-                brandColors,
-                open: openField === field.key,
-                popoverPlacement: "below",
-                onToggle: () => setOpenField((prev) => prev === field.key ? null : field.key),
-                onSelect: (v) => {
-                  themeStore.set(selectedId, field.key, v);
-                  setOpenField(null);
-                }
-              },
-              field.key
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-setto-ui": true,
-            onMouseDown: (e) => e.stopPropagation(),
-            onClick: (e) => {
-              e.stopPropagation();
-              selectSection(null);
-            },
-            "aria-label": "Lukk",
-            style: {
-              flexShrink: 0,
-              background: "transparent",
-              border: "none",
-              color: "#999",
-              cursor: "pointer",
-              fontSize: 16,
-              lineHeight: 1,
-              padding: "2px 6px"
-            },
-            children: "×"
-          }
-        )
-      ]
-    }
-  );
-}
 function SettoMark({
   size = 24,
   letterColor = "#F2EBDF",
@@ -22175,6 +21696,8 @@ const pillStyle = {
 function EditModeShell({ children, themeStore, active }) {
   useSettoDocumentLayout(active);
   const Toolbar = useSettoChromeSlot("toolbar");
+  const SectionTools = useSettoChromeSlot("section-toolbar");
+  const LinkHint = useSettoChromeSlot("link-hint");
   const [toolbarRoot, setToolbarRoot] = useState(null);
   const [hintRoot, setHintRoot] = useState(null);
   const [sectionToolbarRoot, setSectionToolbarRoot] = useState(null);
@@ -22208,8 +21731,8 @@ function EditModeShell({ children, themeStore, active }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
     active && toolbarRoot ? createPortal(Toolbar ? /* @__PURE__ */ jsx(Toolbar, {}) : /* @__PURE__ */ jsx(ToolbarUnavailable, {}), toolbarRoot) : null,
-    active && hintRoot ? createPortal(/* @__PURE__ */ jsx(EditLinkHint, {}), hintRoot) : null,
-    active && sectionToolbarRoot && themeStore ? createPortal(/* @__PURE__ */ jsx(SectionToolbar, {}), sectionToolbarRoot) : null
+    active && hintRoot && LinkHint ? createPortal(/* @__PURE__ */ jsx(LinkHint, {}), hintRoot) : null,
+    active && sectionToolbarRoot && themeStore && SectionTools ? createPortal(/* @__PURE__ */ jsx(SectionTools, {}), sectionToolbarRoot) : null
   ] });
 }
 const SettoContext = createContext(null);
@@ -22256,6 +21779,16 @@ function SettoProvider({ config, children }) {
     setStoreReady(true);
   }, [i18n, config.theme]);
   const editMode = !!session && !!access.currentSite && !onAdminRoute && !authLoading && !access.loading;
+  const [selectedSectionId, setSelectedSectionId] = useState(null);
+  const selectSection = useCallback((id) => setSelectedSectionId(id), []);
+  const [guestEdit, setGuestEdit] = useState(false);
+  useEffect(() => {
+    if (editMode && guestEdit) setGuestEdit(false);
+  }, [editMode, guestEdit]);
+  useEffect(() => {
+    document.documentElement.classList.toggle("setto-guest-editing", guestEdit);
+    return () => document.documentElement.classList.remove("setto-guest-editing");
+  }, [guestEdit]);
   const value = {
     config,
     supabase,
@@ -22267,10 +21800,14 @@ function SettoProvider({ config, children }) {
     sites: access.sites,
     store: storeReady ? storeRef.current : null,
     themeStore: storeReady ? themeStoreRef.current : null,
-    assetStore: storeReady ? assetStoreRef.current : null
+    assetStore: storeReady ? assetStoreRef.current : null,
+    selectedSectionId,
+    selectSection,
+    guestEdit,
+    setGuestEdit
   };
   const editShellActive = editMode && !!value.store;
-  return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(SectionEditProvider, { children: [
+  return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(EditModeShell, { active: editShellActive, themeStore: value.themeStore, children }),
     /* @__PURE__ */ jsx(SettoChrome, {})
   ] }) });
@@ -22282,233 +21819,42 @@ function useSetto() {
   }
   return ctx;
 }
-const GuestEditContext = createContext(null);
 function GuestEditProvider({ children }) {
-  const { editMode, themeStore } = useSetto();
-  const { selectSection } = useSectionEdit();
-  const [active, setActive] = useState(false);
-  useEffect(() => {
-    if (editMode && active) setActive(false);
-  }, [editMode, active]);
-  useEffect(() => {
-    document.documentElement.classList.toggle("setto-guest-editing", active);
-    return () => document.documentElement.classList.remove("setto-guest-editing");
-  }, [active]);
-  const start = useCallback(() => setActive(true), []);
-  const stop = useCallback(() => {
-    setActive(false);
-    selectSection(null);
-  }, [selectSection]);
-  return /* @__PURE__ */ jsxs(GuestEditContext.Provider, { value: { active, start, stop }, children: [
+  const { guestEdit, themeStore } = useSetto();
+  const SectionTools = useSettoChromeSlot("section-toolbar");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
-    active && themeStore ? createPortal(/* @__PURE__ */ jsx(SectionToolbar, {}), document.body) : null
+    guestEdit && themeStore && SectionTools ? createPortal(/* @__PURE__ */ jsx(SectionTools, {}), document.body) : null
   ] });
 }
 function useGuestEdit() {
-  const ctx = useContext(GuestEditContext);
-  if (!ctx) {
-    return { active: false, start: () => {
-    }, stop: () => {
-    } };
-  }
-  return ctx;
-}
-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 { guestEdit, setGuestEdit, selectSection } = useSetto();
+  return {
+    active: guestEdit,
+    start: () => setGuestEdit(true),
+    stop: () => {
+      setGuestEdit(false);
+      selectSection(null);
     }
   };
-  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 isLinkContext(el) {
+  const key = el.getAttribute("data-setto-key");
+  if (key?.startsWith("lang.")) return false;
+  if (el.closest("[data-setto-no-hint]")) return false;
+  return !!(el.closest("a[href]") || el.closest("button"));
+}
+function activateLinkContext(el) {
+  const anchor = el.closest("a[href]");
+  if (anchor instanceof HTMLAnchorElement) {
+    anchor.click();
+    return;
+  }
+  const button = el.closest("button");
+  if (button instanceof HTMLButtonElement) {
+    button.click();
+  }
+}
 const MARGIN = 10;
 const OFFSET = 8;
 const MIN_TOUCH = 44;
@@ -22623,6 +21969,18 @@ function rangeFromPoint(doc, x, y) {
   range.collapse(true);
   return range;
 }
+const QUERY = "(hover: none) and (pointer: coarse)";
+function subscribe(onChange) {
+  const mq = window.matchMedia(QUERY);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+function getSnapshot() {
+  return window.matchMedia(QUERY).matches;
+}
+function useCoarsePointer() {
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
 function T({ k }) {
   const { t, i18n } = useTranslation();
   const { editMode, store } = useSetto();
@@ -22745,6 +22103,10 @@ function toBcp47(code) {
   if (base === "en") return "en";
   return code;
 }
+function useSectionEdit() {
+  const { selectedSectionId, selectSection } = useSetto();
+  return { selectedId: selectedSectionId, selectSection };
+}
 function isTextEditClick(target) {
   if (target.closest("[data-setto-key]")) return true;
   if (target.closest("[data-setto-ui]")) return true;
@@ -23281,12 +22643,12 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
     )
   ] });
 }
-const STYLE_ID$2 = "setto-repeater-styles";
+const STYLE_ID$1 = "setto-repeater-styles";
 function useRepeaterStyles() {
   useEffect(() => {
-    if (document.getElementById(STYLE_ID$2)) return;
+    if (document.getElementById(STYLE_ID$1)) return;
     const el = document.createElement("style");
-    el.id = STYLE_ID$2;
+    el.id = STYLE_ID$1;
     el.textContent = `
       .setto-repeater-remove {
         opacity: 0;
@@ -23571,276 +22933,6 @@ function buildEnvelope(fields, values, extra) {
 function settoSubmissionUrl(apiUrl, siteId, formId) {
   return `${apiUrl.replace(/\/+$/, "")}/sites/${encodeURIComponent(siteId)}/forms/${encodeURIComponent(formId)}/submissions`;
 }
-const STYLE_ID$1 = "setto-form-edit-styles";
-function useFormEditStyles() {
-  useEffect(() => {
-    if (document.getElementById(STYLE_ID$1)) return;
-    const el = document.createElement("style");
-    el.id = STYLE_ID$1;
-    el.textContent = `
-      .setto-form-field-tools {
-        opacity: 0;
-        transition: opacity 120ms ease;
-      }
-      .setto-form__field:hover .setto-form-field-tools,
-      .setto-form__field:focus-within .setto-form-field-tools,
-      .setto-form-field-tools[data-open] {
-        opacity: 1;
-      }
-      @media (hover: none) {
-        .setto-form-field-tools { opacity: 1; }
-      }
-    `;
-    document.head.appendChild(el);
-  }, []);
-}
-function FormFieldTools({
-  field,
-  index,
-  count,
-  autoOpen,
-  onMove,
-  onRemove,
-  onChange
-}) {
-  useFormEditStyles();
-  const [open, setOpen] = useState(autoOpen === true);
-  const gearRef = useRef(null);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-setto-ui": true,
-        className: "setto-form-field-tools",
-        style: toolsStyle,
-        ...open ? { "data-open": "" } : {},
-        onMouseDown: (e) => e.stopPropagation(),
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsx(ToolButton, { label: "Flytt opp", disabled: index === 0, onClick: () => onMove(-1), children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "up" }) }),
-          /* @__PURE__ */ jsx(
-            ToolButton,
-            {
-              label: "Flytt ned",
-              disabled: index === count - 1,
-              onClick: () => onMove(1),
-              children: /* @__PURE__ */ jsx(ArrowIcon, { direction: "down" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToolButton,
-            {
-              ref: gearRef,
-              label: "Feltinnstillinger",
-              active: open,
-              onClick: () => setOpen((o) => !o),
-              children: /* @__PURE__ */ jsx(GearIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(ToolButton, { label: "Fjern felt", disabled: count <= 1, onClick: onRemove, danger: true, children: "×" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      FloatingPopover,
-      {
-        open,
-        anchorRef: gearRef,
-        onClose: () => setOpen(false),
-        ariaLabel: "Feltinnstillinger",
-        minWidth: 300,
-        style: { width: 300, padding: 14 },
-        children: /* @__PURE__ */ jsx(FieldSettings, { field, onChange })
-      }
-    )
-  ] });
-}
-function FieldSettings({ field, onChange }) {
-  const [label, setLabel] = useState(field.label);
-  const [placeholder, setPlaceholder] = useState(field.placeholder);
-  const [options, setOptions] = useState(field.options.join("\n"));
-  const [name, setName] = useState(field.name);
-  useEffect(() => setLabel(field.label), [field.label]);
-  useEffect(() => setPlaceholder(field.placeholder), [field.placeholder]);
-  useEffect(() => setName(field.name), [field.name]);
-  return /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 10, fontSize: 13, color: "#222" }, children: [
-    /* @__PURE__ */ jsx(Row, { label: "Type", children: /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: field.type,
-        onChange: (e) => onChange({ type: e.target.value }),
-        style: inputStyle$1,
-        children: FORM_FIELD_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: FORM_FIELD_TYPE_LABELS[type] }, type))
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Row, { label: "Etikett", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: label,
-        onChange: (e) => setLabel(e.target.value),
-        onBlur: () => label !== field.label && onChange({ label }),
-        style: inputStyle$1
-      }
-    ) }),
-    fieldTypeHasPlaceholder(field.type) ? /* @__PURE__ */ jsx(Row, { label: "Plassholder", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: placeholder,
-        onChange: (e) => setPlaceholder(e.target.value),
-        onBlur: () => placeholder !== field.placeholder && onChange({ placeholder }),
-        style: inputStyle$1
-      }
-    ) }) : null,
-    fieldTypeHasOptions(field.type) ? /* @__PURE__ */ jsx(Row, { label: "Alternativer", hint: "Ett per linje", children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        value: options,
-        rows: 4,
-        onChange: (e) => setOptions(e.target.value),
-        onBlur: () => options !== field.options.join("\n") && onChange({ options }),
-        style: { ...inputStyle$1, resize: "vertical", fontFamily: "inherit" }
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "checkbox",
-          checked: field.required,
-          onChange: (e) => onChange({ required: e.target.checked })
-        }
-      ),
-      "Må fylles ut"
-    ] }),
-    /* @__PURE__ */ jsx(Row, { label: "Teknisk navn", hint: "Brukes i e-posten og i historikken", children: /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        value: name,
-        onChange: (e) => setName(e.target.value),
-        onBlur: () => {
-          const next = name.trim();
-          if (next && next !== field.name) onChange({ name: next });
-          else setName(field.name);
-        },
-        style: { ...inputStyle$1, fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }
-      }
-    ) })
-  ] });
-}
-function Row({ label, hint, children }) {
-  return /* @__PURE__ */ jsxs("label", { style: { display: "grid", gap: 4 }, children: [
-    /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "#666" }, children: [
-      label,
-      hint ? /* @__PURE__ */ jsxs("span", { style: { color: "#999" }, children: [
-        " · ",
-        hint
-      ] }) : null
-    ] }),
-    children
-  ] });
-}
-function ToolButton({ label, onClick, disabled, active, danger, children, ref }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      "data-setto-ui": true,
-      "aria-label": label,
-      title: label,
-      disabled,
-      onClick,
-      style: {
-        ...toolBtnStyle,
-        ...active ? { background: "#640AFF", color: "#fff", borderColor: "#640AFF" } : {},
-        ...danger ? { fontSize: 16 } : {},
-        ...disabled ? { opacity: 0.35, cursor: "default" } : {}
-      },
-      children
-    }
-  );
-}
-function ArrowIcon({ direction }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "12",
-      height: "12",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      style: direction === "down" ? { transform: "rotate(180deg)" } : void 0,
-      children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })
-    }
-  );
-}
-function GearIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: "13",
-      height: "13",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-        /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
-      ]
-    }
-  );
-}
-const toolsStyle = {
-  position: "absolute",
-  top: -12,
-  right: 0,
-  zIndex: 2,
-  display: "flex",
-  gap: 4,
-  padding: 3,
-  background: "#ffffff",
-  border: "1px solid #e0e0e0",
-  borderRadius: 999,
-  boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
-};
-const toolBtnStyle = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 24,
-  height: 24,
-  padding: 0,
-  background: "transparent",
-  border: "1px solid transparent",
-  borderRadius: "50%",
-  fontSize: 13,
-  lineHeight: 1,
-  color: "#444",
-  cursor: "pointer"
-};
-const inputStyle$1 = {
-  width: "100%",
-  boxSizing: "border-box",
-  padding: "6px 8px",
-  border: "1px solid #d8d8d8",
-  borderRadius: 6,
-  fontSize: 13,
-  color: "#222",
-  background: "#fff",
-  fontFamily: "inherit"
-};
 const HONEYPOT_NAME = "website";
 const warnedEndpointKeys = /* @__PURE__ */ new Set();
 function cx(...parts) {
@@ -23856,6 +22948,7 @@ function SettoForm({
 }) {
   const { t, i18n } = useTranslation();
   const { config, editMode, store } = useSetto();
+  const FieldTools = useSettoChromeSlot("form-field-tools");
   const guestEdit = useGuestEdit();
   const editable = editMode || guestEdit.active;
   const lng = i18n.language;
@@ -24103,8 +23196,8 @@ function SettoForm({
                   }
                 ),
                 error ? /* @__PURE__ */ jsx("p", { id: errorId, className: cx("setto-form__field-error", classNames.fieldError), children: t(`form.validation.${error}`, { defaultValue: FIELD_ERROR_DEFAULTS[error] }) }) : null,
-                editable && store ? /* @__PURE__ */ jsx(
-                  FormFieldTools,
+                editable && store && FieldTools ? /* @__PURE__ */ jsx(
+                  FieldTools,
                   {
                     field,
                     index,
@@ -25505,204 +24598,6 @@ function collectRelativeKeys(nodes, prefix, out) {
     }
   }
 }
-const IN_PROGRESS_STATUSES = ["pending", "building"];
-function isDeploymentInProgress(status) {
-  return IN_PROGRESS_STATUSES.includes(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;
-  const now = Date.now();
-  if (row.status === "pending") {
-    return now - new Date(row.started_at).getTime() > STALE_PENDING_MS;
-  }
-  return now - new Date(row.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);
-  const rows = data ?? [];
-  const fresh = rows.find((r) => !isDeploymentStale(r));
-  return fresh?.id ?? null;
-}
-async function waitForDeploymentByCommit(supabase, siteId, commitSha, timeoutMs = 6e4) {
-  const deadline = Date.now() + timeoutMs;
-  while (Date.now() < deadline) {
-    const { data } = await supabase.from("deployments").select("id").eq("site_id", siteId).eq("commit_sha", commitSha).order("started_at", { ascending: false }).limit(1).maybeSingle();
-    if (data?.id) return data.id;
-    await new Promise((r) => setTimeout(r, 2e3));
-  }
-  return null;
-}
-function useDeploymentStatus(supabase, deploymentId) {
-  const [row, setRow] = useState(null);
-  useEffect(() => {
-    if (!deploymentId) {
-      setRow(null);
-      return;
-    }
-    let channel = null;
-    let cancelled = false;
-    const load = async () => {
-      const { data } = await supabase.from("deployments").select("*").eq("id", deploymentId).maybeSingle();
-      if (!cancelled && data) setRow(data);
-    };
-    void load();
-    channel = supabase.channel(`setto-dep-${deploymentId}`).on(
-      "postgres_changes",
-      {
-        event: "UPDATE",
-        schema: "public",
-        table: "deployments",
-        filter: `id=eq.${deploymentId}`
-      },
-      (payload) => {
-        setRow(payload.new);
-      }
-    ).subscribe();
-    return () => {
-      cancelled = true;
-      if (channel) supabase.removeChannel(channel);
-    };
-  }, [supabase, deploymentId]);
-  return { row, status: row?.status ?? null };
-}
-function deploymentStepIndex(status) {
-  switch (status) {
-    case "pending":
-      return 0;
-    case "building":
-      return 1;
-    case "ready":
-      return 2;
-    default:
-      return -1;
-  }
-}
-function isDeploymentStepReached(status, i) {
-  return deploymentStepIndex(status) >= i;
-}
-const STEPS = ["Committed", "Building", "Deployed"];
-const PROGRESS_STYLE_ID = "setto-publish-progress-styles";
-function usePublishProgressStyles() {
-  useEffect(() => {
-    if (document.getElementById(PROGRESS_STYLE_ID)) return;
-    const el = document.createElement("style");
-    el.id = PROGRESS_STYLE_ID;
-    el.textContent = `
-      @keyframes setto-step-pulse {
-        0%, 100% { opacity: 1; transform: scaleY(1); }
-        50% { opacity: 0.72; transform: scaleY(0.82); }
-      }
-      @keyframes setto-step-shimmer {
-        0% { background-position: 120% 0; }
-        100% { background-position: -120% 0; }
-      }
-      .setto-step-bar-active {
-        animation: setto-step-pulse 1.5s ease-in-out infinite;
-        transform-origin: center bottom;
-      }
-      .setto-step-bar-shimmer {
-        background: linear-gradient(
-          90deg,
-          #640aff 0%,
-          #8b5cf6 45%,
-          #640aff 90%
-        ) !important;
-        background-size: 220% 100% !important;
-        animation: setto-step-shimmer 2.2s ease-in-out infinite;
-      }
-      .setto-step-label-active {
-        animation: setto-step-pulse 1.5s ease-in-out infinite;
-      }
-    `;
-    document.head.appendChild(el);
-  }, []);
-}
-function PublishProgressSteps({
-  status,
-  compact,
-  buildingElapsed
-}) {
-  usePublishProgressStyles();
-  const scopeId = useId().replace(/:/g, "");
-  const errored = status === "error" || status === "canceled";
-  const activeIndex = deploymentStepIndex(status);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `setto-progress-${scopeId}`,
-      style: {
-        display: "flex",
-        gap: compact ? 3 : 8,
-        fontSize: compact ? 11 : 12,
-        minWidth: compact ? 100 : 200
-      },
-      children: STEPS.map((label, i) => {
-        const reached = isDeploymentStepReached(status, i);
-        const active = activeIndex === i && !errored;
-        const barClass = active ? "setto-step-bar-active setto-step-bar-shimmer" : void 0;
-        return /* @__PURE__ */ jsxs("div", { style: { flex: 1, textAlign: "center", minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: barClass,
-              style: {
-                height: compact ? 3 : 4,
-                borderRadius: 2,
-                background: errored ? "#fca5a5" : reached ? "#640AFF" : "#e5e5e5",
-                marginBottom: compact ? 0 : 6,
-                transition: "background 0.35s ease"
-              }
-            }
-          ),
-          !compact ? /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: active ? "setto-step-label-active" : void 0,
-              style: {
-                color: active ? "#1a1a1a" : "#888",
-                fontWeight: active ? 500 : 400,
-                display: "inline-block"
-              },
-              children: [
-                label,
-                active && status === "building" && buildingElapsed != null ? ` (${buildingElapsed}s)` : active ? " …" : ""
-              ]
-            }
-          ) : null
-        ] }, label);
-      })
-    }
-  );
-}
-function PublishProgressBar({ status, compact, href }) {
-  const inner = /* @__PURE__ */ jsx(PublishProgressSteps, { status, compact });
-  const wrapStyle = {
-    fontSize: compact ? 11 : 12,
-    minWidth: compact ? 100 : 200
-  };
-  if (href) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        title: "Se publiseringsstatus",
-        style: {
-          ...wrapStyle,
-          display: "block",
-          textDecoration: "none",
-          color: "inherit",
-          cursor: "pointer",
-          borderRadius: 4,
-          padding: compact ? "4px 2px" : void 0
-        },
-        children: inner
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { style: wrapStyle, children: inner });
-}
 export {
   AuthGate,
   BLOCK_REGISTRY,
@@ -25713,14 +24608,10 @@ export {
   FAB_SIZE,
   FORM_FIELD_TYPES,
   FORM_FIELD_TYPE_LABELS,
+  FloatingPopover,
   GuestEditProvider,
-  IN_PROGRESS_STATUSES,
-  PublishProgressBar,
-  PublishProgressSteps,
   SETTO_BASE,
   SETTO_MODULES,
-  STALE_BUILDING_MS,
-  STALE_PENDING_MS,
   SettoAdminApp,
   SettoAnimation,
   SettoBlock,
@@ -25731,7 +24622,6 @@ export {
   SettoIcon,
   SettoImage,
   SettoMark,
-  SettoPreviewBar,
   SettoProvider,
   SettoRepeater,
   SettoSection,
@@ -25742,28 +24632,25 @@ export {
   checkoutIntentUrl,
   currentAdminView,
   extractContentKeys,
-  fetchInProgressDeploymentId,
+  fieldTypeHasOptions,
+  fieldTypeHasPlaceholder,
   formFieldsPrefix,
   isAdminDeploymentView,
   isAdminPanelView,
   isAdminRoute,
-  isDeploymentInProgress,
-  isDeploymentStale,
   isFormFieldType,
-  isPreviewHost,
+  isLinkContext,
   nodeChildren,
   parseBlockTree,
-  previewBarState,
   readLocaleFields,
   settoSubmissionUrl,
   siteHomeUrl,
-  useDeploymentStatus,
+  useCoarsePointer,
   useGuestEdit,
   useSectionTheme,
   useSetto,
   useSettoChromeSlot,
   validateBlockTree,
-  waitForDeploymentByCommit,
   wantsCheckout,
   withoutCheckoutIntent
 };