@sevenfold/setto-client 0.4.0 → 0.6.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,14 +21155,63 @@ class ThemeStore {
     for (const fn of this.listeners) fn(this.cachedSnapshot);
   }
 }
-const TOOLBAR_HEIGHT = 44;
+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`);
+    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");
@@ -21164,23 +21222,10 @@ function useSettoDocumentLayout(active) {
           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,23 +22189,43 @@ function useEditBaseline() {
     };
   }, [session, store, config.siteId]);
 }
-const SETTO_BASE = "/setto";
-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(SETTO_BASE);
-}
-function isAdminDeploymentView() {
-  return isAdminRoute() && new URLSearchParams(window.location.search).has("deployment");
-}
-function adminRedirectUrl() {
-  return `${window.location.origin}${SETTO_BASE}`;
+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();
@@ -22195,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(
@@ -22225,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);
@@ -22375,6 +22447,14 @@ 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();
@@ -22384,67 +22464,92 @@ function EditToolbar() {
     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: `${SETTO_BASE}?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,
@@ -22459,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
 };
@@ -22554,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";
@@ -22613,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);
@@ -22652,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 }) => {
@@ -22669,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);
@@ -22693,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,
@@ -22701,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
@@ -23140,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();
@@ -23645,6 +23786,236 @@ const removeBtnStyle = {
   boxShadow: "0 1px 4px rgba(0,0,0,0.18)",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
 };
+function SettoForm({
+  formId,
+  fields,
+  endpoint,
+  endpointKey,
+  className
+}) {
+  const { t } = useTranslation();
+  const [status, setStatus] = useState("idle");
+  const [values, setValues] = useState(
+    () => Object.fromEntries(fields.map((f) => [f.name, ""]))
+  );
+  const setField = useCallback(
+    (name, value) => setValues((prev) => ({ ...prev, [name]: value })),
+    []
+  );
+  const resolveEndpoint = () => {
+    if (endpoint) return endpoint;
+    if (endpointKey) {
+      const resolved = t(endpointKey, { defaultValue: "" });
+      return resolved && resolved !== endpointKey ? resolved : null;
+    }
+    return null;
+  };
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    const url = resolveEndpoint();
+    if (!url) {
+      setStatus("error");
+      return;
+    }
+    setStatus("submitting");
+    try {
+      const res = await fetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(values)
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      setStatus("success");
+      setValues(
+        (prev) => Object.fromEntries(Object.keys(prev).map((k) => [k, ""]))
+      );
+    } catch {
+      setStatus("error");
+    }
+  };
+  if (status === "success") {
+    return /* @__PURE__ */ jsx("div", { className, "data-setto-form-status": "success", children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(T, { k: `form.${formId}.success` }) }) });
+  }
+  return /* @__PURE__ */ jsxs("form", { className, onSubmit, "data-setto-form": formId, noValidate: true, children: [
+    fields.map((field) => /* @__PURE__ */ jsxs("label", { "data-setto-form-field": field.name, children: [
+      /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(T, { k: field.labelKey }) }),
+      field.type === "textarea" ? /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          name: field.name,
+          required: field.required,
+          value: values[field.name] ?? "",
+          placeholder: field.placeholderKey ? t(field.placeholderKey, { defaultValue: "" }) : void 0,
+          onChange: (e) => setField(field.name, e.target.value)
+        }
+      ) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: field.type,
+          name: field.name,
+          required: field.required,
+          value: values[field.name] ?? "",
+          placeholder: field.placeholderKey ? t(field.placeholderKey, { defaultValue: "" }) : void 0,
+          onChange: (e) => setField(field.name, e.target.value)
+        }
+      )
+    ] }, field.name)),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: status === "submitting", children: /* @__PURE__ */ jsx(T, { k: `form.${formId}.submit` }) }),
+    status === "error" ? /* @__PURE__ */ jsx("p", { "data-setto-form-status": "error", role: "alert", children: /* @__PURE__ */ jsx(T, { k: `form.${formId}.error` }) }) : null
+  ] });
+}
+function SettoVideo({ srcKey, posterKey, title, className }) {
+  const { t, i18n } = useTranslation();
+  const { store } = useSetto();
+  const src = store ? store.get(srcKey, i18n.language) : t(srcKey, { defaultValue: "" });
+  const poster = posterKey ? store ? store.get(posterKey, i18n.language) : t(posterKey, { defaultValue: "" }) : void 0;
+  if (!src) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        "data-setto-video": srcKey,
+        "data-setto-video-empty": "1"
+      }
+    );
+  }
+  const embed = toEmbedUrl(src);
+  if (embed) {
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        className,
+        src: embed,
+        title: title ?? "Video",
+        loading: "lazy",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true,
+        "data-setto-video": srcKey
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      className,
+      src,
+      poster,
+      controls: true,
+      preload: "metadata",
+      "data-setto-video": srcKey
+    }
+  );
+}
+function toEmbedUrl(url) {
+  try {
+    const u = new URL(url);
+    if (u.hostname === "youtu.be") {
+      return `https://www.youtube.com/embed/${u.pathname.slice(1)}`;
+    }
+    if (u.hostname.endsWith("youtube.com")) {
+      const v = u.searchParams.get("v");
+      if (v) return `https://www.youtube.com/embed/${v}`;
+      if (u.pathname.startsWith("/embed/")) return url;
+    }
+    if (u.hostname.endsWith("vimeo.com")) {
+      const id = u.pathname.split("/").filter(Boolean).pop();
+      if (id && /^\d+$/.test(id)) return `https://player.vimeo.com/video/${id}`;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+const DEFAULT_DURATION = {
+  fadeIn: 600,
+  slideUp: 700,
+  stagger: 700,
+  scrollReveal: 700
+};
+function SettoAnimation({
+  preset,
+  delay = 0,
+  duration,
+  className,
+  children
+}) {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState(preset === "fadeIn" || preset === "slideUp");
+  useEffect(() => {
+    if (preset === "fadeIn" || preset === "slideUp") {
+      const t = window.setTimeout(() => setVisible(true), delay);
+      return () => window.clearTimeout(t);
+    }
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            io.disconnect();
+          }
+        }
+      },
+      { threshold: 0.15 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [preset, delay]);
+  const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  const ms = duration ?? DEFAULT_DURATION[preset];
+  const transition = reduced ? void 0 : `opacity ${ms}ms ease-out ${delay}ms, transform ${ms}ms ease-out ${delay}ms`;
+  const hiddenTransform = preset === "slideUp" || preset === "scrollReveal" ? "translateY(24px)" : "none";
+  const style = reduced ? void 0 : {
+    opacity: visible ? 1 : 0,
+    transform: visible ? "none" : hiddenTransform,
+    transition,
+    willChange: "opacity, transform"
+  };
+  if (preset === "stagger") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        "data-setto-animation": preset,
+        "data-setto-animation-visible": visible ? "1" : "0",
+        children: wrapChildrenForStagger(children, visible, ms, delay, reduced)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      style,
+      "data-setto-animation": preset,
+      "data-setto-animation-visible": visible ? "1" : "0",
+      children
+    }
+  );
+}
+function wrapChildrenForStagger(children, visible, ms, baseDelay, reduced) {
+  if (reduced) return children;
+  const arr = Array.isArray(children) ? children : [children];
+  const step = 80;
+  return arr.map((child, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        opacity: visible ? 1 : 0,
+        transform: visible ? "none" : "translateY(16px)",
+        transition: `opacity ${ms}ms ease-out ${baseDelay + i * step}ms, transform ${ms}ms ease-out ${baseDelay + i * step}ms`
+      },
+      children: child
+    },
+    i
+  ));
+}
 function authCallbackType() {
   const hash = window.location.hash.replace(/^#/, "");
   if (!hash) return null;
@@ -23747,7 +24118,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");
@@ -23937,8 +24308,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(() => {
@@ -23949,33 +24319,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;
@@ -24000,8 +24350,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" }),
@@ -24019,7 +24369,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);
@@ -24051,8 +24404,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",
@@ -24071,7 +24426,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: [
@@ -24156,9 +24511,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",
@@ -24264,20 +24616,504 @@ function depDotStyle(status) {
     flexShrink: 0
   };
 }
+const BLOCK_REGISTRY = {
+  section: { allowedChildren: "any", themed: true, selectable: true },
+  block: { allowedChildren: "any", themed: true, selectable: true },
+  container: { allowedChildren: "any", themed: false, selectable: false },
+  animation: { allowedChildren: "any", themed: false, selectable: false },
+  repeater: { allowedChildren: "any", themed: false, selectable: false },
+  text: { allowedChildren: null, themed: false, selectable: false },
+  image: { allowedChildren: null, themed: false, selectable: false },
+  icon: { allowedChildren: null, themed: false, selectable: false },
+  form: { allowedChildren: null, themed: false, selectable: false },
+  video: { allowedChildren: null, themed: false, selectable: false }
+};
+const BLOCK_TYPES = Object.keys(
+  BLOCK_REGISTRY
+);
+function nodeChildren(node) {
+  switch (node.type) {
+    case "section":
+    case "block":
+    case "container":
+    case "animation":
+      return node.children;
+    case "repeater":
+      return node.itemTemplate;
+    default:
+      return [];
+  }
+}
+const FIELD_TYPES = ["text", "email", "tel", "textarea"];
+const ANIMATION_PRESETS = ["fadeIn", "slideUp", "stagger", "scrollReveal"];
+function validateBlockTree(input) {
+  const issues = [];
+  if (!isRecord(input)) {
+    return fail("$", "Block tree must be an object");
+  }
+  if (input.version !== "1") {
+    issues.push({ path: "$.version", message: 'Expected version "1"' });
+  }
+  if (!Array.isArray(input.root)) {
+    return fail("$.root", "root must be an array of block nodes");
+  }
+  const seenIds = /* @__PURE__ */ new Set();
+  for (let i = 0; i < input.root.length; i++) {
+    validateNode(input.root[i], `root[${i}]`, seenIds, issues);
+  }
+  return issues.length ? { ok: false, issues } : { ok: true };
+}
+function validateNode(raw, path, seenIds, issues) {
+  if (!isRecord(raw)) {
+    issues.push({ path, message: "Node must be an object" });
+    return;
+  }
+  const type = raw.type;
+  if (typeof type !== "string" || !(type in BLOCK_REGISTRY)) {
+    issues.push({ path, message: `Unknown block type "${String(type)}"` });
+    return;
+  }
+  if (typeof raw.id !== "string" || raw.id.length === 0) {
+    issues.push({ path, message: "Node is missing a non-empty string id" });
+  } else if (seenIds.has(raw.id)) {
+    issues.push({ path, message: `Duplicate node id "${raw.id}"` });
+  } else {
+    seenIds.add(raw.id);
+  }
+  if (raw.className !== void 0 && typeof raw.className !== "string") {
+    issues.push({ path: `${path}.className`, message: "className must be a string" });
+  }
+  validateTypeSpecific(raw, type, path, issues);
+  const meta = BLOCK_REGISTRY[type];
+  if (meta.allowedChildren === null && Array.isArray(raw.children) && raw.children.length > 0) {
+    issues.push({ path, message: `Type "${type}" cannot have children` });
+    return;
+  }
+  const children = nodeChildren(raw);
+  if (meta.allowedChildren === null && children.length > 0) {
+    issues.push({ path, message: `Type "${type}" cannot have children` });
+    return;
+  }
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const childPath = type === "repeater" ? `${path}.itemTemplate[${i}]` : `${path}.children[${i}]`;
+    validateNode(child, childPath, seenIds, issues);
+    if (meta.allowedChildren !== "any" && meta.allowedChildren !== null && isRecord(child) && typeof child.type === "string" && !meta.allowedChildren.includes(child.type)) {
+      issues.push({
+        path: childPath,
+        message: `Type "${child.type}" not allowed inside "${type}"`
+      });
+    }
+  }
+}
+function validateTypeSpecific(raw, type, path, issues) {
+  switch (type) {
+    case "section":
+      requireString(raw, "sectionId", path, issues);
+      requireArray(raw, "children", path, issues);
+      break;
+    case "block":
+      requireString(raw, "blockId", path, issues);
+      requireArray(raw, "children", path, issues);
+      break;
+    case "container":
+      requireArray(raw, "children", path, issues);
+      break;
+    case "text":
+      requireString(raw, "k", path, issues);
+      break;
+    case "image":
+      requireString(raw, "srcKey", path, issues);
+      break;
+    case "icon":
+      requireString(raw, "k", path, issues);
+      break;
+    case "repeater":
+      requireString(raw, "itemsKey", path, issues);
+      requireArray(raw, "itemTemplate", path, issues);
+      if (!isRecord(raw.defaultItem)) {
+        issues.push({
+          path: `${path}.defaultItem`,
+          message: "defaultItem must be an object mapping field names to default strings"
+        });
+      } else {
+        for (const [field, value] of Object.entries(raw.defaultItem)) {
+          if (typeof value !== "string") {
+            issues.push({
+              path: `${path}.defaultItem.${field}`,
+              message: "defaultItem values must be strings"
+            });
+          }
+        }
+      }
+      break;
+    case "form":
+      requireString(raw, "formId", path, issues);
+      if (!Array.isArray(raw.fields) || raw.fields.length === 0) {
+        issues.push({ path: `${path}.fields`, message: "form must declare at least one field" });
+        break;
+      }
+      for (let i = 0; i < raw.fields.length; i++) {
+        validateFormField(raw.fields[i], `${path}.fields[${i}]`, issues);
+      }
+      if (raw.endpoint === void 0 && raw.endpointKey === void 0) {
+        issues.push({
+          path,
+          message: "form must declare either endpoint or endpointKey"
+        });
+      }
+      break;
+    case "video":
+      requireString(raw, "srcKey", path, issues);
+      break;
+    case "animation":
+      requireArray(raw, "children", path, issues);
+      if (typeof raw.preset !== "string" || !ANIMATION_PRESETS.includes(raw.preset)) {
+        issues.push({
+          path: `${path}.preset`,
+          message: `preset must be one of ${ANIMATION_PRESETS.join(", ")}`
+        });
+      }
+      break;
+  }
+}
+function validateFormField(raw, path, issues) {
+  if (!isRecord(raw)) {
+    issues.push({ path, message: "field must be an object" });
+    return;
+  }
+  if (typeof raw.name !== "string" || raw.name.length === 0) {
+    issues.push({ path: `${path}.name`, message: "field.name must be a non-empty string" });
+  }
+  if (typeof raw.type !== "string" || !FIELD_TYPES.includes(raw.type)) {
+    issues.push({
+      path: `${path}.type`,
+      message: `field.type must be one of ${FIELD_TYPES.join(", ")}`
+    });
+  }
+  requireString(raw, "labelKey", path, issues);
+}
+function requireString(raw, field, path, issues) {
+  const value = raw[field];
+  if (typeof value !== "string" || value.length === 0) {
+    issues.push({ path: `${path}.${field}`, message: `${field} must be a non-empty string` });
+  }
+}
+function requireArray(raw, field, path, issues) {
+  if (!Array.isArray(raw[field])) {
+    issues.push({ path: `${path}.${field}`, message: `${field} must be an array` });
+  }
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function fail(path, message) {
+  return { ok: false, issues: [{ path, message }] };
+}
+function parseBlockTree(input) {
+  const result = validateBlockTree(input);
+  if (!result.ok) {
+    const first = result.issues[0];
+    const detail = first ? `${first.path}: ${first.message}` : "unknown";
+    throw new Error(`Invalid block tree at ${detail}`);
+  }
+  return input;
+}
+const IconRegistryContext = createContext(null);
+const RepeaterScopeContext = createContext(null);
+function SettoBlockTree({ tree, icons, validate = true }) {
+  if (validate) {
+    const result = validateBlockTree(tree);
+    if (!result.ok) {
+      const first = result.issues[0];
+      const detail = first ? `${first.path}: ${first.message}` : "unknown";
+      throw new Error(`Invalid block tree at ${detail}`);
+    }
+  }
+  return /* @__PURE__ */ jsx(IconRegistryContext.Provider, { value: { icons }, children: tree.root.map((node) => /* @__PURE__ */ jsx(RenderNode, { node }, node.id)) });
+}
+function RenderNode({ node }) {
+  switch (node.type) {
+    case "section":
+      return /* @__PURE__ */ jsx(SettoSection, { sectionId: node.sectionId, className: node.className, children: renderChildren(node.children) });
+    case "block":
+      return /* @__PURE__ */ jsx(SettoBlock, { blockId: node.blockId, className: node.className, children: renderChildren(node.children) });
+    case "container":
+      return renderContainer(node.tag ?? "div", node.className, renderChildren(node.children));
+    case "animation":
+      return /* @__PURE__ */ jsx(
+        SettoAnimation,
+        {
+          preset: node.preset,
+          delay: node.delay,
+          duration: node.duration,
+          className: node.className,
+          children: renderChildren(node.children)
+        }
+      );
+    case "repeater":
+      return /* @__PURE__ */ jsx(
+        SettoRepeater,
+        {
+          itemsKey: node.itemsKey,
+          defaultItem: node.defaultItem,
+          itemLabel: node.itemLabel,
+          className: node.className,
+          children: (itemKey) => /* @__PURE__ */ jsx(
+            RepeaterScopeContext.Provider,
+            {
+              value: { itemsKey: node.itemsKey, itemKey },
+              children: renderChildren(node.itemTemplate)
+            }
+          )
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ jsx(TextLeaf, { node });
+    case "image":
+      return /* @__PURE__ */ jsx(ImageLeaf, { node });
+    case "icon":
+      return /* @__PURE__ */ jsx(IconLeaf, { node });
+    case "form":
+      return /* @__PURE__ */ jsx(
+        SettoForm,
+        {
+          formId: node.formId,
+          fields: node.fields,
+          endpoint: node.endpoint,
+          endpointKey: node.endpointKey,
+          className: node.className
+        }
+      );
+    case "video":
+      return /* @__PURE__ */ jsx(VideoLeaf, { node });
+  }
+}
+function renderChildren(children) {
+  return children.map((child) => /* @__PURE__ */ jsx(RenderNode, { node: child }, child.id));
+}
+function TextLeaf({ node }) {
+  const k = useScopedKey(node.k);
+  const inner = /* @__PURE__ */ jsx(T, { k });
+  if (!node.as) {
+    return node.className ? /* @__PURE__ */ jsx("span", { className: node.className, children: inner }) : inner;
+  }
+  return renderTag(node.as, node.className, inner);
+}
+function ImageLeaf({ node }) {
+  const srcKey = useScopedKey(node.srcKey);
+  return /* @__PURE__ */ jsx(SettoImage, { srcKey, alt: node.alt, className: node.className });
+}
+function VideoLeaf({ node }) {
+  const srcKey = useScopedKey(node.srcKey);
+  const posterKey = useScopedKey(node.posterKey ?? "");
+  return /* @__PURE__ */ jsx(
+    SettoVideo,
+    {
+      srcKey,
+      posterKey: node.posterKey ? posterKey : void 0,
+      title: node.title,
+      className: node.className
+    }
+  );
+}
+function IconLeaf({ node }) {
+  const registry = useContext(IconRegistryContext);
+  const k = useScopedKey(node.k);
+  if (!registry) {
+    throw new Error("SettoBlockTree must be mounted with an `icons` prop for icon nodes");
+  }
+  return /* @__PURE__ */ jsx(
+    SettoIcon,
+    {
+      k,
+      icons: registry.icons,
+      size: node.size,
+      className: node.className
+    }
+  );
+}
+function useScopedKey(key) {
+  const scope = useContext(RepeaterScopeContext);
+  if (!scope) return key;
+  return `${scope.itemsKey}.${scope.itemKey}.${key}`;
+}
+function renderTag(tag, className, children) {
+  switch (tag) {
+    case "h1":
+      return /* @__PURE__ */ jsx("h1", { className, children });
+    case "h2":
+      return /* @__PURE__ */ jsx("h2", { className, children });
+    case "h3":
+      return /* @__PURE__ */ jsx("h3", { className, children });
+    case "h4":
+      return /* @__PURE__ */ jsx("h4", { className, children });
+    case "h5":
+      return /* @__PURE__ */ jsx("h5", { className, children });
+    case "h6":
+      return /* @__PURE__ */ jsx("h6", { className, children });
+    case "p":
+      return /* @__PURE__ */ jsx("p", { className, children });
+    case "span":
+      return /* @__PURE__ */ jsx("span", { className, children });
+    case "div":
+      return /* @__PURE__ */ jsx("div", { className, children });
+    case "label":
+      return /* @__PURE__ */ jsx("label", { className, children });
+    case "em":
+      return /* @__PURE__ */ jsx("em", { className, children });
+    case "strong":
+      return /* @__PURE__ */ jsx("strong", { className, children });
+  }
+}
+function renderContainer(tag, className, children) {
+  switch (tag) {
+    case "div":
+      return /* @__PURE__ */ jsx("div", { className, children });
+    case "section":
+      return /* @__PURE__ */ jsx("section", { className, children });
+    case "header":
+      return /* @__PURE__ */ jsx("header", { className, children });
+    case "footer":
+      return /* @__PURE__ */ jsx("footer", { className, children });
+    case "main":
+      return /* @__PURE__ */ jsx("main", { className, children });
+    case "aside":
+      return /* @__PURE__ */ jsx("aside", { className, children });
+    case "nav":
+      return /* @__PURE__ */ jsx("nav", { className, children });
+    case "article":
+      return /* @__PURE__ */ jsx("article", { className, children });
+    case "ul":
+      return /* @__PURE__ */ jsx("ul", { className, children });
+    case "ol":
+      return /* @__PURE__ */ jsx("ol", { className, children });
+    case "li":
+      return /* @__PURE__ */ jsx("li", { className, children });
+    case "p":
+      return /* @__PURE__ */ jsx("p", { className, children });
+    case "span":
+      return /* @__PURE__ */ jsx("span", { className, children });
+  }
+}
+function extractContentKeys(tree) {
+  const out = {
+    keys: /* @__PURE__ */ new Set(),
+    themeIds: /* @__PURE__ */ new Set(),
+    repeaters: []
+  };
+  for (const node of tree.root) {
+    walk(node, out, null);
+  }
+  return out;
+}
+function walk(node, out, repeaterCtx) {
+  switch (node.type) {
+    case "section":
+      out.themeIds.add(node.sectionId);
+      for (const child of node.children) walk(child, out, repeaterCtx);
+      return;
+    case "block":
+      out.themeIds.add(node.blockId);
+      for (const child of node.children) walk(child, out, repeaterCtx);
+      return;
+    case "container":
+    case "animation":
+      for (const child of node.children) walk(child, out, repeaterCtx);
+      return;
+    case "text":
+      out.keys.add(scopedKey(node.k, repeaterCtx));
+      return;
+    case "image":
+      out.keys.add(scopedKey(node.srcKey, repeaterCtx));
+      return;
+    case "icon":
+      out.keys.add(scopedKey(node.k, repeaterCtx));
+      return;
+    case "video":
+      out.keys.add(scopedKey(node.srcKey, repeaterCtx));
+      if (node.posterKey) out.keys.add(scopedKey(node.posterKey, repeaterCtx));
+      return;
+    case "form":
+      out.keys.add(`form.${node.formId}.submit`);
+      out.keys.add(`form.${node.formId}.success`);
+      if (node.endpointKey) out.keys.add(node.endpointKey);
+      for (const field of node.fields) {
+        out.keys.add(field.labelKey);
+        if (field.placeholderKey) out.keys.add(field.placeholderKey);
+      }
+      return;
+    case "repeater":
+      recordRepeater(node, out);
+      for (const child of node.itemTemplate) {
+        walk(child, out, { itemsKey: node.itemsKey });
+      }
+      return;
+  }
+}
+function scopedKey(key, repeaterCtx) {
+  if (!repeaterCtx) return key;
+  return `${repeaterCtx.itemsKey}.*.${key}`;
+}
+function recordRepeater(node, out) {
+  const fields = Object.keys(node.defaultItem);
+  const itemKeys = [];
+  collectRelativeKeys(node.itemTemplate, "", itemKeys);
+  out.repeaters.push({
+    itemsKey: node.itemsKey,
+    fields,
+    itemKeys
+  });
+}
+function collectRelativeKeys(nodes, prefix, out) {
+  for (const node of nodes) {
+    switch (node.type) {
+      case "text":
+      case "icon":
+        out.push(node.k);
+        break;
+      case "image":
+        out.push(node.srcKey);
+        break;
+      case "video":
+        out.push(node.srcKey);
+        if (node.posterKey) {
+          out.push(node.posterKey);
+        }
+        break;
+      case "section":
+      case "block":
+      case "container":
+      case "animation":
+        collectRelativeKeys(node.children, prefix, out);
+        break;
+    }
+  }
+}
 export {
   AuthGate,
+  BLOCK_REGISTRY,
+  BLOCK_TYPES,
   GuestEditProvider,
   SETTO_BASE,
   SettoAdminApp,
+  SettoAnimation,
   SettoBlock,
+  SettoBlockTree,
+  SettoForm,
   SettoIcon,
   SettoImage,
   SettoProvider,
   SettoRepeater,
   SettoSection,
+  SettoVideo,
   T,
+  extractContentKeys,
+  nodeChildren,
+  parseBlockTree,
   useGuestEdit,
   useSectionTheme,
-  useSetto
+  useSetto,
+  validateBlockTree
 };
 //# sourceMappingURL=setto-client.js.map