@sevenfold/setto-client 0.1.0 → 0.2.1

package/dist/setto-client.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useSyncExternalStore, forwardRef } from "react";
+import { useEffect, useState, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, useSyncExternalStore, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { createPortal } from "react-dom";
 function __rest(s, e) {
@@ -20760,6 +20760,29 @@ function createApi(args) {
       });
       if (!res.ok) throw await asError(res, "publish failed");
       return parseJson(res);
+    },
+    async expireStaleDeployments(siteId) {
+      const token = await bearer(supabase);
+      const res = await fetch(
+        `${apiUrl}/sites/${encodeURIComponent(siteId)}/deployments/expire-stale`,
+        {
+          method: "POST",
+          headers: { Authorization: `Bearer ${token}` }
+        }
+      );
+      if (!res.ok) throw await asError(res, "expireStaleDeployments failed");
+      return parseJson(res);
+    },
+    async cancelDeployment(siteId, deploymentId) {
+      const token = await bearer(supabase);
+      const res = await fetch(
+        `${apiUrl}/sites/${encodeURIComponent(siteId)}/deployments/${encodeURIComponent(deploymentId)}/cancel`,
+        {
+          method: "POST",
+          headers: { Authorization: `Bearer ${token}` }
+        }
+      );
+      if (!res.ok) throw await asError(res, "cancelDeployment failed");
     }
   };
 }
@@ -21003,6 +21026,12 @@ function useSettoDocumentLayout(active) {
         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;
+          }
+        }
       `;
       document.head.appendChild(styleEl);
     }
@@ -21482,14 +21511,144 @@ function SectionToolbar() {
     }
   );
 }
-const STEPS = [
-  { key: "pending", label: "Committed" },
-  { key: "building", label: "Building" },
-  { key: "ready", label: "Deployed" }
-];
-function BuildStatus({ supabase, deploymentId, onDone }) {
+function getCookie(name) {
+  const match = document.cookie.match(new RegExp(`(?:^|; )${escapeRegExp(name)}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : null;
+}
+function setCookie(name, value, maxAgeSeconds = 365 * 24 * 60 * 60) {
+  document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAgeSeconds}; SameSite=Lax`;
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function EditOverlay({ children, onClose }) {
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "presentation",
+        onClick: onClose,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483647,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16,
+          background: "rgba(0, 0, 0, 0.35)",
+          backdropFilter: "blur(6px)",
+          WebkitBackdropFilter: "blur(6px)"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              background: "#fff",
+              borderRadius: 12,
+              padding: "24px 28px",
+              maxWidth: 420,
+              width: "100%",
+              boxShadow: "0 16px 48px rgba(0, 0, 0, 0.18)",
+              fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+              color: "#1a1a1a"
+            },
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+const COOKIE_NAME = "setto_edit_hint_dismissed";
+function EditOnboardingDialog() {
+  const [open, setOpen] = useState(() => getCookie(COOKIE_NAME) !== "1");
+  const [dontShowAgain, setDontShowAgain] = useState(false);
+  if (!open) return null;
+  const close = () => {
+    if (dontShowAgain) setCookie(COOKIE_NAME, "1");
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(EditOverlay, { onClose: close, children: [
+    /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 600 }, children: "Velkommen til Setto" }),
+    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 20px", fontSize: 14, lineHeight: 1.5, color: "#444" }, children: "Klikk på tekstene for å redigere. Bruk CTRL+Klikk for å åpne lenker. Klikk på seksjoner for å endre farger mm." }),
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          marginBottom: 20,
+          fontSize: 13,
+          color: "#666",
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: dontShowAgain,
+              onChange: (e) => setDontShowAgain(e.target.checked)
+            }
+          ),
+          "Ikke vis denne igjen"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: close, style: primaryBtnStyle$1, children: "Forstått" })
+  ] });
+}
+const primaryBtnStyle$1 = {
+  background: "#640AFF",
+  color: "#fff",
+  border: "none",
+  borderRadius: 6,
+  padding: "8px 20px",
+  fontSize: 14,
+  fontWeight: 500,
+  cursor: "pointer",
+  width: "100%"
+};
+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;
+}
+function useDeploymentStatus(supabase, deploymentId) {
   const [row, setRow] = useState(null);
   useEffect(() => {
+    if (!deploymentId) {
+      setRow(null);
+      return;
+    }
     let channel = null;
     let cancelled = false;
     const load = async () => {
@@ -21506,59 +21665,17 @@ function BuildStatus({ supabase, deploymentId, onDone }) {
         filter: `id=eq.${deploymentId}`
       },
       (payload) => {
-        const next = payload.new;
-        setRow(next);
-        if (next.status === "ready" || next.status === "error" || next.status === "canceled") {
-          onDone?.(next.status);
-        }
+        setRow(payload.new);
       }
     ).subscribe();
     return () => {
       cancelled = true;
       if (channel) supabase.removeChannel(channel);
     };
-  }, [supabase, deploymentId, onDone]);
-  const status = row?.status ?? "pending";
-  const errored = status === "error" || status === "canceled";
-  return /* @__PURE__ */ jsxs("div", { style: { fontSize: 12 }, children: [
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "space-between", gap: 4, marginBottom: 8 }, children: STEPS.map((step, i) => {
-      const reached = isStepReached(status, i);
-      const active = currentStepIndex(status) === i && !errored;
-      return /* @__PURE__ */ jsxs("div", { style: { flex: 1, textAlign: "center" }, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              height: 4,
-              borderRadius: 2,
-              background: errored ? "#fca5a5" : reached ? "#640AFF" : "#e5e5e5",
-              marginBottom: 4
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { style: { color: active ? "#1a1a1a" : "#888" }, children: [
-          step.label,
-          active ? " …" : ""
-        ] })
-      ] }, step.key);
-    }) }),
-    errored ? /* @__PURE__ */ jsxs("div", { style: { color: "#dc2626" }, children: [
-      status === "error" ? "Bygg feilet." : "Avbrutt.",
-      row?.error_message ? ` ${row.error_message}` : ""
-    ] }) : null,
-    status === "ready" && row?.url ? /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: row.url,
-        target: "_blank",
-        rel: "noreferrer",
-        style: { color: "#640AFF", fontSize: 12 },
-        children: "Åpne deploy →"
-      }
-    ) : null
-  ] });
+  }, [supabase, deploymentId]);
+  return { row, status: row?.status ?? null };
 }
-function currentStepIndex(status) {
+function deploymentStepIndex(status) {
   switch (status) {
     case "pending":
       return 0;
@@ -21570,9 +21687,212 @@ function currentStepIndex(status) {
       return -1;
   }
 }
-function isStepReached(status, i) {
-  return currentStepIndex(status) >= i;
+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 });
+}
+function PublishDialog({
+  row,
+  status,
+  onClose,
+  onComplete
+}) {
+  const buildingStartedAt = useRef(null);
+  const [elapsed, setElapsed] = useState(0);
+  const progressStatus = row?.status ?? status ?? "pending";
+  const errored = progressStatus === "error" || progressStatus === "canceled";
+  const isReady = progressStatus === "ready";
+  const isBuilding = progressStatus === "building";
+  useEffect(() => {
+    if (isBuilding && buildingStartedAt.current === null) {
+      buildingStartedAt.current = Date.now();
+    }
+    if (!isBuilding) buildingStartedAt.current = null;
+  }, [isBuilding]);
+  useEffect(() => {
+    if (!isBuilding) return;
+    const id = window.setInterval(() => {
+      if (buildingStartedAt.current !== null) {
+        setElapsed(Math.floor((Date.now() - buildingStartedAt.current) / 1e3));
+      }
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [isBuilding]);
+  return /* @__PURE__ */ jsx(EditOverlay, { onClose: void 0, children: isReady ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 600 }, children: "Publisert" }),
+    /* @__PURE__ */ jsx("p", { style: { margin: "0 0 20px", fontSize: 14, lineHeight: 1.5, color: "#444" }, children: "Endringene dine er live." }),
+    row?.url ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: row.url,
+        target: "_blank",
+        rel: "noreferrer",
+        style: { ...linkStyle$1, display: "block", marginBottom: 16 },
+        children: "Åpne publisert side →"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onComplete, style: primaryBtnStyle, children: "OK" })
+  ] }) : errored ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 12px", fontSize: 18, fontWeight: 600, color: "#dc2626" }, children: "Publisering feilet" }),
+    /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 20px", fontSize: 14, lineHeight: 1.5, color: "#444" }, children: [
+      progressStatus === "error" ? "Bygg feilet." : "Avbrutt.",
+      row?.error_message ? ` ${row.error_message}` : ""
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onComplete, style: secondaryBtnStyle, children: "OK" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 16px", fontSize: 16, fontWeight: 600 }, children: "Publiserer endringer" }),
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: 20 }, children: /* @__PURE__ */ jsx(
+      PublishProgressSteps,
+      {
+        status: progressStatus,
+        buildingElapsed: isBuilding ? elapsed : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, style: secondaryBtnStyle, children: "Lukk" })
+  ] }) });
+}
+const primaryBtnStyle = {
+  background: "#640AFF",
+  color: "#fff",
+  border: "none",
+  borderRadius: 6,
+  padding: "8px 20px",
+  fontSize: 14,
+  fontWeight: 500,
+  cursor: "pointer",
+  width: "100%"
+};
+const secondaryBtnStyle = {
+  ...primaryBtnStyle,
+  background: "transparent",
+  color: "#666",
+  border: "1px solid #ddd"
+};
+const linkStyle$1 = {
+  color: "#640AFF",
+  fontSize: 14,
+  textDecoration: "none"
+};
 function guessLangFromPath(path, languages) {
   for (const lng of languages) {
     if (path.includes(`/${lng}.`) || path.includes(`/${lng}/`)) return lng;
@@ -21640,15 +21960,119 @@ function EditToolbar() {
   );
   const [publishing, setPublishing] = useState(false);
   const [activeDeployment, setActiveDeployment] = useState(null);
+  const [publishDialogOpen, setPublishDialogOpen] = useState(false);
   const [error, setError] = useState(null);
+  const [publishedNotice, setPublishedNotice] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+  const publishedNoticeTimer = useRef(null);
+  const { row: deploymentRow, status: deploymentStatus } = useDeploymentStatus(
+    supabase,
+    activeDeployment
+  );
+  useEffect(() => {
+    let cancelled = false;
+    const resume = async () => {
+      try {
+        await api.expireStaleDeployments(config.siteId);
+      } catch {
+      }
+      const id = await fetchInProgressDeploymentId(supabase, config.siteId);
+      if (!cancelled && id) {
+        setActiveDeployment((current) => current ?? id);
+      }
+    };
+    void resume();
+    return () => {
+      cancelled = true;
+    };
+  }, [api, supabase, config.siteId]);
   const textDraftCount = snap.drafts.size;
   const themeDraftCount = themeStore?.size() ?? 0;
   const draftCount = textDraftCount + themeDraftCount;
+  const hasDrafts = draftCount > 0;
+  const showToolbarProgress = activeDeployment !== null && !publishDialogOpen && deploymentRow !== null && isDeploymentInProgress(deploymentRow.status) && !isDeploymentStale(deploymentRow);
+  const showPublishedNotice = publishedNotice && !publishDialogOpen;
+  useEffect(() => {
+    return () => {
+      if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (!activeDeployment || !deploymentRow) return;
+    const { status } = deploymentRow;
+    if (status === "ready") {
+      if (publishDialogOpen) return;
+      setPublishedNotice(true);
+      setActiveDeployment(null);
+      if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
+      publishedNoticeTimer.current = setTimeout(() => setPublishedNotice(false), 6e3);
+      return;
+    }
+    if (publishDialogOpen) return;
+    if (status === "error" || status === "canceled") {
+      setError(
+        status === "canceled" ? "Publisering avbrutt." : deploymentRow.error_message?.includes("webhook") ? "Publisering utløpt (ingen webhook)." : "Publisering feilet."
+      );
+      setActiveDeployment(null);
+      return;
+    }
+    if (isDeploymentStale(deploymentRow)) {
+      setError("Publisering utløpt (ingen webhook).");
+      setActiveDeployment(null);
+    }
+  }, [activeDeployment, deploymentRow, publishDialogOpen]);
+  useEffect(() => {
+    if (!activeDeployment) return;
+    const syncActiveDeployment = async () => {
+      const { data } = await supabase.from("deployments").select("status").eq("id", activeDeployment).maybeSingle();
+      if (!data) {
+        setActiveDeployment(null);
+        return;
+      }
+      const status = data.status;
+      if (status === "ready") {
+        if (!publishDialogOpen) {
+          setPublishedNotice(true);
+          if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
+          publishedNoticeTimer.current = setTimeout(() => setPublishedNotice(false), 6e3);
+        }
+        setActiveDeployment(null);
+        return;
+      }
+      if (!isDeploymentInProgress(status)) {
+        if (status === "canceled") setError("Publisering avbrutt.");
+        else if (status === "error") setError("Publisering feilet.");
+        setActiveDeployment(null);
+      }
+    };
+    const onVisible = () => {
+      if (document.visibilityState === "visible") void syncActiveDeployment();
+    };
+    window.addEventListener("focus", syncActiveDeployment);
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      window.removeEventListener("focus", syncActiveDeployment);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [activeDeployment, publishDialogOpen, supabase]);
   const languages = i18n.languages?.length ? Array.from(new Set(i18n.languages)) : ["no", "en"];
+  useEffect(() => {
+    if (!menuOpen) return;
+    const close = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [menuOpen]);
   const publish = async () => {
     if (!store) return;
     setPublishing(true);
+    setPublishDialogOpen(true);
     setError(null);
+    setPublishedNotice(false);
     try {
       const bundles = store.serialiseBundles();
       const files = Object.entries(bundles).map(([lng, data]) => ({
@@ -21667,63 +22091,112 @@ function EditToolbar() {
       setActiveDeployment(result.deploymentId);
     } catch (err) {
       setError(err instanceof Error ? err.message : "unknown error");
+      setPublishDialogOpen(false);
     } finally {
       setPublishing(false);
     }
   };
-  return /* @__PURE__ */ jsxs("header", { style: barStyle, role: "toolbar", "aria-label": "Setto editor", children: [
-    /* @__PURE__ */ jsxs("div", { style: leftStyle, children: [
-      /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Setto" }),
-      /* @__PURE__ */ jsx("span", { style: sepStyle, children: "·" }),
-      /* @__PURE__ */ jsx("span", { style: mutedStyle$1, children: config.siteId }),
-      /* @__PURE__ */ jsx("span", { style: hintStyle, children: "Klikk tekst for å redigere · klikk seksjon for farger" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: rightStyle, children: [
-      error ? /* @__PURE__ */ jsx("span", { style: errorStyle, children: error }) : null,
-      activeDeployment ? /* @__PURE__ */ jsx("div", { style: { minWidth: 200 }, children: /* @__PURE__ */ jsx(
-        BuildStatus,
-        {
-          supabase,
-          deploymentId: activeDeployment,
-          onDone: () => setActiveDeployment(null)
-        }
-      ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        draftCount > 0 ? /* @__PURE__ */ jsxs("span", { style: draftStyle, children: [
-          draftCount,
-          " ",
-          draftCount === 1 ? "endring" : "endringer"
+  const completePublish = () => {
+    setPublishDialogOpen(false);
+    setActiveDeployment(null);
+    setPublishedNotice(false);
+    if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
+  };
+  const dismissPublishedNotice = () => {
+    setPublishedNotice(false);
+    if (publishedNoticeTimer.current) clearTimeout(publishedNoticeTimer.current);
+  };
+  const signOut = () => {
+    setMenuOpen(false);
+    void supabase.auth.signOut();
+  };
+  const goToHistory = () => {
+    setMenuOpen(false);
+    window.location.href = "/admin";
+  };
+  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,
-        /* @__PURE__ */ jsx(
+        showPublishedNotice ? /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            onClick: publish,
-            disabled: draftCount === 0 || publishing,
-            style: {
-              ...publishBtnStyle,
-              opacity: draftCount === 0 || publishing ? 0.5 : 1
-            },
-            children: publishing ? "Publiserer …" : "Publiser"
+            onClick: dismissPublishedNotice,
+            style: publishedNoticeStyle,
+            title: "Lukk",
+            children: [
+              /* @__PURE__ */ jsx(PublishedCheckIcon, {}),
+              "Publisert"
+            ]
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: exitEditMode, style: exitBtnStyle, children: "Avslutt" })
-    ] })
+        ) : null,
+        showToolbarProgress && deploymentRow ? /* @__PURE__ */ jsx(
+          PublishProgressBar,
+          {
+            status: deploymentRow.status,
+            compact: true,
+            href: `/admin?deployment=${encodeURIComponent(activeDeployment)}`
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { ref: menuRef, style: { position: "relative" }, children: [
+          /* @__PURE__ */ 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: "⋮"
+            }
+          ),
+          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" })
+          ] }) : null
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(EditOnboardingDialog, {}),
+    publishDialogOpen && (publishing || activeDeployment !== null) ? /* @__PURE__ */ jsx(
+      PublishDialog,
+      {
+        deploymentId: activeDeployment ?? "",
+        row: deploymentRow,
+        status: deploymentStatus ?? "pending",
+        publishing,
+        onClose: () => setPublishDialogOpen(false),
+        onComplete: completePublish
+      }
+    ) : null
   ] });
 }
-function exitEditMode() {
-  const u = new URL(window.location.href);
-  u.searchParams.delete("setto");
-  window.history.replaceState({}, "", u.toString());
-  window.dispatchEvent(new PopStateEvent("popstate"));
-}
 const barStyle = {
   height: "100%",
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  gap: 16,
-  padding: "0 16px",
+  gap: 12,
+  padding: "0 12px",
   background: "#ffffff",
   color: "#1a1a1a",
   fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
@@ -21734,24 +22207,34 @@ const barStyle = {
 const leftStyle = {
   display: "flex",
   alignItems: "center",
-  gap: 6,
   minWidth: 0
 };
 const rightStyle = {
   display: "flex",
   alignItems: "center",
-  gap: 10,
+  gap: 8,
   flexShrink: 0
 };
-const sepStyle = { color: "#ccc" };
-const mutedStyle$1 = { color: "#666", fontSize: 12 };
-const hintStyle = {
-  color: "#999",
+const draftStyle = {
+  color: "#666",
   fontSize: 12,
-  marginLeft: 8
+  whiteSpace: "nowrap"
 };
-const draftStyle = { color: "#666", fontSize: 12 };
 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",
+  fontSize: 12,
+  fontWeight: 500,
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+};
 const publishBtnStyle = {
   background: "#640AFF",
   color: "#fff",
@@ -21760,17 +22243,107 @@ const publishBtnStyle = {
   padding: "6px 14px",
   fontSize: 13,
   fontWeight: 500,
-  cursor: "pointer"
+  cursor: "pointer",
+  whiteSpace: "nowrap"
 };
-const exitBtnStyle = {
+const menuBtnStyle = {
   background: "transparent",
   color: "#666",
-  border: "1px solid #ddd",
+  border: "none",
   borderRadius: 6,
-  padding: "6px 10px",
-  fontSize: 12,
+  padding: "4px 8px",
+  fontSize: 20,
+  lineHeight: 1,
   cursor: "pointer"
 };
+const dropdownStyle = {
+  position: "absolute",
+  top: "100%",
+  right: 0,
+  marginTop: 4,
+  background: "#fff",
+  border: "1px solid #e8e8e8",
+  borderRadius: 8,
+  boxShadow: "0 4px 16px rgba(0, 0, 0, 0.12)",
+  minWidth: 140,
+  overflow: "hidden",
+  zIndex: 1
+};
+const menuItemStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  background: "transparent",
+  border: "none",
+  padding: "10px 14px",
+  fontSize: 13,
+  textAlign: "left",
+  cursor: "pointer",
+  color: "#1a1a1a"
+};
+function MenuItem({
+  onClick,
+  icon,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      style: menuItemStyle,
+      role: "menuitem",
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "#f5f5f5";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: menuIconWrapStyle, "aria-hidden": true, children: icon }),
+        children
+      ]
+    }
+  );
+}
+const menuIconWrapStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  color: "#666"
+};
+function PublishedCheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function HistoryIcon() {
+  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("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
+function LogOutIcon() {
+  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: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "16 17 21 12 16 7" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+  ] });
+}
 function EditModeShell({ children, themeStore }) {
   useSettoDocumentLayout(true);
   const [toolbarRoot, setToolbarRoot] = useState(null);
@@ -21919,6 +22492,7 @@ function T({ k }) {
   const handleInput = (e) => {
     store?.set(k, i18n.language, e.currentTarget.textContent ?? "");
   };
+  const lang = toBcp47(i18n.language);
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -21926,6 +22500,8 @@ function T({ k }) {
       "data-setto-key": k,
       contentEditable: true,
       suppressContentEditableWarning: true,
+      lang,
+      spellCheck: true,
       role: "textbox",
       tabIndex: 0,
       onFocus: () => setFocused(true),
@@ -21943,6 +22519,12 @@ function T({ k }) {
     }
   );
 }
+function toBcp47(code) {
+  const base = (code.split("-")[0] ?? code).toLowerCase();
+  if (base === "no" || base === "nb" || base === "nn") return "nb-NO";
+  if (base === "en") return "en";
+  return code;
+}
 function isTextEditClick(target) {
   if (target.closest("[data-setto-key]")) return true;
   if (target.closest("[data-setto-ui]")) return true;
@@ -22061,23 +22643,60 @@ const SettoBlock = forwardRef(
     );
   }
 );
+function editModeUrl(pathname = "/") {
+  const u = new URL(window.location.href);
+  u.pathname = pathname;
+  u.search = "";
+  u.searchParams.set("setto", "edit");
+  return u.toString();
+}
+function isAdminRoute() {
+  return window.location.pathname.startsWith("/admin");
+}
+function isAdminDeploymentView() {
+  return isAdminRoute() && new URLSearchParams(window.location.search).has("deployment");
+}
+function adminRedirectUrl() {
+  return `${window.location.origin}/admin`;
+}
+function authCallbackType() {
+  const hash = window.location.hash.replace(/^#/, "");
+  if (!hash) return null;
+  const type = new URLSearchParams(hash).get("type");
+  if (type === "invite" || type === "recovery") return type;
+  return null;
+}
+function clearAuthHashFromUrl() {
+  const { pathname, search } = window.location;
+  window.history.replaceState(null, "", pathname + search);
+}
 function AuthGate({ children }) {
   const { supabase, session, authLoading } = useSetto();
   const [mode, setMode] = useState("signin");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState(null);
+  const [info, setInfo] = useState(null);
   const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    const callback = authCallbackType();
+    if (callback) setMode("set_password");
+  }, []);
   if (authLoading) {
     return /* @__PURE__ */ jsx("div", { style: loadingStyle, children: "Laster …" });
   }
-  if (session) return /* @__PURE__ */ jsx(Fragment, { children });
-  const submit = async (e) => {
+  if (session && mode !== "set_password") return /* @__PURE__ */ jsx(Fragment, { children });
+  if (mode === "set_password" && !session) {
+    return /* @__PURE__ */ jsx("div", { style: loadingStyle, children: authCallbackType() ? "Aktiverer invitasjon …" : "Åpne lenken fra e-posten for å sette passord." });
+  }
+  const submitSignIn = async (e) => {
     e.preventDefault();
     setBusy(true);
     setError(null);
+    setInfo(null);
     try {
-      const result = mode === "signin" ? await supabase.auth.signInWithPassword({ email, password }) : await supabase.auth.signUp({ email, password });
+      const result = await supabase.auth.signInWithPassword({ email, password });
       if (result.error) throw result.error;
       if (result.data.session) {
         await supabase.auth.setSession({
@@ -22091,9 +22710,127 @@ function AuthGate({ children }) {
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { style: shellStyle$1, children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, style: formStyle, children: [
+  const submitForgot = async (e) => {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+    try {
+      const { error: resetError } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: adminRedirectUrl()
+      });
+      if (resetError) throw resetError;
+      setInfo("Vi har sendt en lenke for å nullstille passordet. Sjekk innboksen.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ukjent feil");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const submitSetPassword = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setError("Passordene er ikke like.");
+      return;
+    }
+    if (password.length < 8) {
+      setError("Passordet må være minst 8 tegn.");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+    try {
+      const { error: updateError } = await supabase.auth.updateUser({ password });
+      if (updateError) throw updateError;
+      clearAuthHashFromUrl();
+      const { data: sessionData } = await supabase.auth.getSession();
+      if (sessionData.session) {
+        window.location.replace(editModeUrl());
+        return;
+      }
+      setMode("signin");
+      setPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Ukjent feil");
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (mode === "set_password") {
+    const callback = authCallbackType();
+    return /* @__PURE__ */ jsx("div", { style: shellStyle$1, children: /* @__PURE__ */ jsxs("form", { onSubmit: submitSetPassword, style: formStyle, children: [
+      /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: 22 }, children: "Setto" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#888", fontSize: 13 }, children: callback === "invite" ? "Velg et passord for å fullføre invitasjonen." : "Velg et nytt passord." }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          placeholder: "Nytt passord",
+          autoComplete: "new-password",
+          required: true,
+          minLength: 8,
+          style: inputStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "password",
+          value: confirmPassword,
+          onChange: (e) => setConfirmPassword(e.target.value),
+          placeholder: "Gjenta passord",
+          autoComplete: "new-password",
+          required: true,
+          minLength: 8,
+          style: inputStyle
+        }
+      ),
+      error ? /* @__PURE__ */ jsx("div", { style: { color: "#ff7a7a", fontSize: 12 }, children: error }) : null,
+      info ? /* @__PURE__ */ jsx("div", { style: { color: "#9fd89f", fontSize: 12 }, children: info }) : null,
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: busy, style: btnStyle, children: busy ? "..." : "Lagre passord" })
+    ] }) });
+  }
+  if (mode === "forgot") {
+    return /* @__PURE__ */ jsx("div", { style: shellStyle$1, children: /* @__PURE__ */ jsxs("form", { onSubmit: submitForgot, style: formStyle, children: [
+      /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: 22 }, children: "Setto" }),
+      /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#888", fontSize: 13 }, children: "Skriv inn e-posten din, så sender vi en lenke for å nullstille passordet." }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: "E-post",
+          autoComplete: "email",
+          required: true,
+          style: inputStyle
+        }
+      ),
+      error ? /* @__PURE__ */ jsx("div", { style: { color: "#ff7a7a", fontSize: 12 }, children: error }) : null,
+      info ? /* @__PURE__ */ jsx("div", { style: { color: "#9fd89f", fontSize: 12 }, children: info }) : null,
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: busy, style: btnStyle, children: busy ? "..." : "Send lenke" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setMode("signin");
+            setError(null);
+            setInfo(null);
+          },
+          style: linkStyle,
+          children: "Tilbake til innlogging"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { style: shellStyle$1, children: /* @__PURE__ */ jsxs("form", { onSubmit: submitSignIn, style: formStyle, children: [
     /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: 22 }, children: "Setto" }),
-    /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#888", fontSize: 13 }, children: mode === "signin" ? "Logg inn for å redigere innholdet." : "Opprett konto." }),
+    /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#888", fontSize: 13 }, children: "Logg inn for å redigere innholdet. Har du fått invitasjon, bruk lenken i e-posten første gang." }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -22113,20 +22850,25 @@ function AuthGate({ children }) {
         value: password,
         onChange: (e) => setPassword(e.target.value),
         placeholder: "Passord",
-        autoComplete: mode === "signin" ? "current-password" : "new-password",
+        autoComplete: "current-password",
         required: true,
         style: inputStyle
       }
     ),
     error ? /* @__PURE__ */ jsx("div", { style: { color: "#ff7a7a", fontSize: 12 }, children: error }) : null,
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: busy, style: btnStyle, children: busy ? "..." : mode === "signin" ? "Logg inn" : "Opprett konto" }),
+    info ? /* @__PURE__ */ jsx("div", { style: { color: "#9fd89f", fontSize: 12 }, children: info }) : null,
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: busy, style: btnStyle, children: busy ? "..." : "Logg inn" }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: () => setMode((m) => m === "signin" ? "signup" : "signin"),
+        onClick: () => {
+          setMode("forgot");
+          setError(null);
+          setInfo(null);
+        },
         style: linkStyle,
-        children: mode === "signin" ? "Ny her? Opprett konto" : "Har konto? Logg inn"
+        children: "Glemt passord?"
       }
     )
   ] }) });
@@ -22180,6 +22922,16 @@ const loadingStyle = {
   fontSize: 14,
   color: "#888"
 };
+function deploymentAdminUrl(deploymentId) {
+  const u = new URL(window.location.href);
+  u.pathname = "/admin";
+  u.search = "";
+  u.searchParams.set("deployment", deploymentId);
+  return u.pathname + u.search;
+}
+function focusedDeploymentId() {
+  return new URLSearchParams(window.location.search).get("deployment");
+}
 function SettoAdminApp() {
   return /* @__PURE__ */ jsx(AuthGate, { children: /* @__PURE__ */ jsx(SiteList, {}) });
 }
@@ -22187,6 +22939,15 @@ function SiteList() {
   const { supabase, session, config } = useSetto();
   const [sites, setSites] = useState(null);
   const [error, setError] = useState(null);
+  const redirectAfterSignIn = useRef(false);
+  useEffect(() => {
+    const { data: sub } = supabase.auth.onAuthStateChange((event) => {
+      if (event === "SIGNED_IN" && !isAdminDeploymentView()) {
+        redirectAfterSignIn.current = true;
+      }
+    });
+    return () => sub.subscription.unsubscribe();
+  }, [supabase]);
   useEffect(() => {
     if (!session) return;
     let cancelled = false;
@@ -22207,6 +22968,20 @@ function SiteList() {
     () => 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());
+      return;
+    }
+    redirectAfterSignIn.current = false;
+  }, [session, sites, currentSite]);
+  if (redirectAfterSignIn.current && session && (sites === null || currentSite)) {
+    return /* @__PURE__ */ jsx("div", { style: loadingRedirectStyle, children: "Åpner redigering …" });
+  }
   return /* @__PURE__ */ jsxs("div", { style: shellStyle, children: [
     /* @__PURE__ */ jsxs("header", { style: headerStyle, children: [
       /* @__PURE__ */ jsx("h1", { style: { margin: 0, fontSize: 22 }, children: "Setto" }),
@@ -22244,8 +23019,35 @@ function SiteList() {
   ] });
 }
 function DeploymentList({ siteId }) {
-  const { supabase } = useSetto();
+  const { supabase, api, config } = useSetto();
   const [rows, setRows] = useState(null);
+  const [focusId, setFocusId] = useState(focusedDeploymentId);
+  const [canceling, setCanceling] = useState(false);
+  const [cancelError, setCancelError] = useState(null);
+  const { row: focusRow } = useDeploymentStatus(supabase, focusId);
+  useEffect(() => {
+    const onPopState = () => setFocusId(focusedDeploymentId());
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  const cancelDeployment = async () => {
+    if (!focusId) return;
+    setCanceling(true);
+    setCancelError(null);
+    try {
+      await api.cancelDeployment(config.siteId, focusId);
+      setFocusId(null);
+      window.history.replaceState(null, "", "/admin");
+    } catch (err) {
+      setCancelError(err instanceof Error ? err.message : "Kunne ikke avbryte");
+    } finally {
+      setCanceling(false);
+    }
+  };
+  useEffect(() => {
+    void api.expireStaleDeployments(config.siteId).catch(() => {
+    });
+  }, [api, config.siteId]);
   useEffect(() => {
     let cancelled = false;
     supabase.from("deployments").select("*").eq("site_id", siteId).order("started_at", { ascending: false }).limit(10).then(({ data }) => {
@@ -22269,25 +23071,103 @@ function DeploymentList({ siteId }) {
       supabase.removeChannel(channel);
     };
   }, [supabase, siteId]);
+  const showFocusPanel = focusId !== null && (focusRow === null || isDeploymentInProgress(focusRow.status));
   if (!rows) return /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Laster deploys…" });
-  if (rows.length === 0) return /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Ingen deploys ennå." });
-  return /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }, children: rows.map((r) => /* @__PURE__ */ jsxs("li", { style: depRowStyle, children: [
-    /* @__PURE__ */ jsx("span", { style: depDotStyle(r.status) }),
-    /* @__PURE__ */ jsx("code", { style: { fontSize: 12, color: "#aaa" }, children: r.commit_sha.slice(0, 7) }),
-    /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 12 }, children: r.status }),
-    /* @__PURE__ */ jsx("time", { style: { fontSize: 11, color: "#888" }, children: new Date(r.started_at).toLocaleString() })
-  ] }, r.id)) });
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    showFocusPanel ? /* @__PURE__ */ jsxs("section", { style: activeDepStyle, children: [
+      /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 15 }, children: "Publisering pågår" }),
+      focusRow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PublishProgressBar, { status: focusRow.status }),
+        /* @__PURE__ */ jsxs("p", { style: mutedStyle, children: [
+          "Commit ",
+          /* @__PURE__ */ jsx("code", { style: { color: "#bda6ff" }, children: focusRow.commit_sha.slice(0, 7) }),
+          focusRow.vercel_deployment_id ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            "· Vercel",
+            " ",
+            /* @__PURE__ */ jsxs("code", { style: { color: "#888", fontSize: 11 }, children: [
+              focusRow.vercel_deployment_id.slice(0, 12),
+              "…"
+            ] })
+          ] }) : null
+        ] }),
+        cancelError ? /* @__PURE__ */ jsx("p", { style: errStyle, children: cancelError }) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => void cancelDeployment(),
+            disabled: canceling,
+            style: cancelBtnStyle,
+            children: canceling ? "Avbryter …" : "Avbryt publisering"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Laster status …" })
+    ] }) : null,
+    rows.length === 0 ? /* @__PURE__ */ jsx("p", { style: mutedStyle, children: "Ingen deploys ennå." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 14, color: "#aaa" }, children: "Historikk" }),
+      /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }, children: rows.map((r) => {
+        const focused = r.id === focusId;
+        const inProgress = isDeploymentInProgress(r.status);
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: inProgress ? deploymentAdminUrl(r.id) : void 0,
+            style: {
+              ...depRowStyle,
+              textDecoration: "none",
+              color: "inherit",
+              outline: focused ? "1px solid #640AFF" : void 0,
+              cursor: inProgress ? "pointer" : "default"
+            },
+            onClick: inProgress ? (e) => {
+              e.preventDefault();
+              setFocusId(r.id);
+              window.history.pushState(null, "", deploymentAdminUrl(r.id));
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsx("span", { style: depDotStyle(r.status) }),
+              /* @__PURE__ */ jsx("code", { style: { fontSize: 12, color: "#aaa" }, children: r.commit_sha.slice(0, 7) }),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 12 }, children: statusLabel(r) }),
+              /* @__PURE__ */ jsx("time", { style: { fontSize: 11, color: "#888" }, children: new Date(r.started_at).toLocaleString() })
+            ]
+          }
+        ) }, r.id);
+      }) })
+    ] })
+  ] });
+}
+function statusLabel(row) {
+  switch (row.status) {
+    case "pending":
+      return "Venter";
+    case "building":
+      return "Bygger";
+    case "ready":
+      return "Publisert";
+    case "error":
+      return row.error_message?.includes("webhook") ? "Utløpt" : "Feilet";
+    case "canceled":
+      return "Avbrutt";
+  }
 }
 function SignOutButton() {
   const { supabase } = useSetto();
   return /* @__PURE__ */ jsx("button", { onClick: () => supabase.auth.signOut(), style: signOutBtnStyle, children: "Logg ut" });
 }
 function editUrl() {
-  const u = new URL(window.location.href);
-  u.pathname = "/";
-  u.searchParams.set("setto", "edit");
-  return u.toString();
+  return editModeUrl("/");
 }
+const loadingRedirectStyle = {
+  minHeight: "100dvh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "#0a0a0d",
+  color: "#888",
+  fontSize: 14,
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
+};
 const shellStyle = {
   minHeight: "100dvh",
   background: "#0a0a0d",
@@ -22347,6 +23227,14 @@ const signOutBtnStyle = {
   fontSize: 12,
   cursor: "pointer"
 };
+const activeDepStyle = {
+  background: "#1a1a20",
+  borderRadius: 8,
+  padding: 14,
+  display: "flex",
+  flexDirection: "column",
+  gap: 10
+};
 const depRowStyle = {
   display: "flex",
   alignItems: "center",
@@ -22355,6 +23243,16 @@ const depRowStyle = {
   padding: "6px 10px",
   borderRadius: 6
 };
+const cancelBtnStyle = {
+  alignSelf: "flex-start",
+  background: "transparent",
+  color: "#ff7a7a",
+  border: "1px solid #4a3030",
+  borderRadius: 6,
+  padding: "8px 14px",
+  fontSize: 13,
+  cursor: "pointer"
+};
 function depDotStyle(status) {
   const colour = status === "ready" ? "#34d399" : status === "error" || status === "canceled" ? "#ff7a7a" : status === "building" ? "#fbbf24" : "#888";
   return {