@sevenfold/setto-client 0.26.0 → 0.28.0

package/dist/setto-client.js

@@ -5899,21 +5899,21 @@ var PostgresTypes;
   PostgresTypes2["tsrange"] = "tsrange";
   PostgresTypes2["tstzrange"] = "tstzrange";
 })(PostgresTypes || (PostgresTypes = {}));
-const convertChangeData = (columns, record, options = {}) => {
+const convertChangeData = (columns, record2, options = {}) => {
   var _a;
   const skipTypes = (_a = options.skipTypes) !== null && _a !== void 0 ? _a : [];
-  if (!record) {
+  if (!record2) {
     return {};
   }
-  return Object.keys(record).reduce((acc, rec_key) => {
-    acc[rec_key] = convertColumn(rec_key, columns, record, skipTypes);
+  return Object.keys(record2).reduce((acc, rec_key) => {
+    acc[rec_key] = convertColumn(rec_key, columns, record2, skipTypes);
     return acc;
   }, {});
 };
-const convertColumn = (columnName, columns, record, skipTypes) => {
+const convertColumn = (columnName, columns, record2, skipTypes) => {
   const column = columns.find((x) => x.name === columnName);
   const colType = column === null || column === void 0 ? void 0 : column.type;
-  const value = record[columnName];
+  const value = record2[columnName];
   if (colType && !skipTypes.includes(colType)) {
     return convertCell(colType, value);
   }
@@ -34654,6 +34654,139 @@ function remarkGfm(options) {
   fromMarkdownExtensions.push(gfmFromMarkdown());
   toMarkdownExtensions.push(gfmToMarkdown(settings));
 }
+const POLL_FALLBACK_MS = 5e3;
+const POLL_SUBSCRIBED_MS = 3e4;
+const CHANGED_DEBOUNCE_MS = 250;
+const TYPING_THROTTLE_MS = 2500;
+const TYPING_EXPIRY_MS = 6e3;
+function pollIntervalMs(subscribed) {
+  return subscribed ? POLL_SUBSCRIBED_MS : POLL_FALLBACK_MS;
+}
+function conversationTopic(value) {
+  return typeof value === "string" && value.length <= 200 && /^chat-conversation:\S+$/.test(value) ? value : null;
+}
+function isSide(value) {
+  return value === "team" || value === "visitor";
+}
+function record(payload) {
+  return payload && typeof payload === "object" ? payload : null;
+}
+function parseTypingSignal(payload) {
+  const value = record(payload);
+  if (!value || !isSide(value.side) || typeof value.typing !== "boolean") return null;
+  return { side: value.side, typing: value.typing };
+}
+function parseReadSignal(payload) {
+  const value = record(payload);
+  if (!value || !isSide(value.side) || typeof value.at !== "string") return null;
+  return timestampValue(value.at) === null ? null : { side: value.side, at: value.at };
+}
+const TIMESTAMP = /^(\d{4}-\d{2}-\d{2})[T ](\d{2}:\d{2})(:\d{2})?(?:\.(\d+))?\s*(Z|[+-]\d{2}(?::?\d{2})?)?$/i;
+function timestampValue(value) {
+  if (!value) return null;
+  const match = TIMESTAMP.exec(value.trim());
+  if (!match) {
+    const parsed = Date.parse(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  const [, date, minutes, seconds = ":00", fraction, zone] = match;
+  let offset = "Z";
+  if (zone && zone.toUpperCase() !== "Z") {
+    const digits = zone.slice(1).replace(":", "");
+    offset = `${zone[0]}${digits.slice(0, 2)}:${digits.slice(2, 4) || "00"}`;
+  }
+  const whole = Date.parse(`${date}T${minutes}${seconds}${offset}`);
+  if (!Number.isFinite(whole)) return null;
+  return fraction ? whole + Number(`0.${fraction}`) * 1e3 : whole;
+}
+function laterTimestamp(current, next) {
+  const nextValue = timestampValue(next);
+  if (nextValue === null) return current;
+  const currentValue = timestampValue(current);
+  return currentValue === null || nextValue > currentValue ? next : current;
+}
+function createTypingSender(send, now = Date.now) {
+  let typing = false;
+  let lastSentAt = Number.NEGATIVE_INFINITY;
+  function reset() {
+    typing = false;
+    lastSentAt = Number.NEGATIVE_INFINITY;
+  }
+  function stop() {
+    if (!typing) return;
+    reset();
+    send(false);
+  }
+  function update(draft) {
+    if (!draft.trim()) {
+      stop();
+      return;
+    }
+    const at = now();
+    if (typing && at - lastSentAt < TYPING_THROTTLE_MS) return;
+    if (send(true)) {
+      typing = true;
+      lastSentAt = at;
+    }
+  }
+  return { update, stop, reset };
+}
+function nextTeamTypingDeadline(current, signal, now) {
+  if (signal.side !== "team") return current;
+  return signal.typing ? now + TYPING_EXPIRY_MS : null;
+}
+function latestHumanMessageKey(messages) {
+  for (let index2 = messages.length - 1; index2 >= 0; index2 -= 1) {
+    const message = messages[index2];
+    if (message?.role === "human") return message.id ?? message.created_at ?? null;
+  }
+  return null;
+}
+function teamTypingIdentity(messages) {
+  for (let index2 = messages.length - 1; index2 >= 0; index2 -= 1) {
+    const message = messages[index2];
+    if (message && (message.role === "human" || message.kind === "agent_joined")) {
+      return { name: message.authorName?.trim() || null, avatarUrl: message.avatarUrl || null };
+    }
+  }
+  return { name: null, avatarUrl: null };
+}
+function teamTypingLabel(norwegian2, name2) {
+  if (norwegian2) return name2 ? `${name2} skriver …` : "Teamet skriver …";
+  return name2 ? `${name2} is typing …` : "The team is typing …";
+}
+function seenVisitorMessageIndex(messages, humanJoined, teamReadAt) {
+  const readValue = humanJoined ? timestampValue(teamReadAt) : null;
+  if (readValue === null) return -1;
+  for (let index2 = messages.length - 1; index2 >= 0; index2 -= 1) {
+    if (messages[index2]?.role !== "visitor") continue;
+    const created = timestampValue(messages[index2]?.created_at);
+    return created !== null && created <= readValue ? index2 : -1;
+  }
+  return -1;
+}
+function readMarkerThrough(messages, context) {
+  if (!context.humanJoined || !context.chatOpen || !context.pageVisible) return null;
+  let newest = null;
+  let newestValue = Number.NEGATIVE_INFINITY;
+  for (const message of messages) {
+    if (message.role === "visitor") continue;
+    const value = timestampValue(message.created_at);
+    if (value !== null && value > newestValue) {
+      newest = message.created_at;
+      newestValue = value;
+    }
+  }
+  if (newest === null) return null;
+  const sentValue = timestampValue(context.lastSent);
+  return sentValue !== null && newestValue <= sentValue ? null : newest;
+}
+function refreshOutcome(started, current) {
+  if (started.conversationId !== current.conversationId) return "drop";
+  if (started.request !== current.request) return "drop";
+  if (current.busy || started.turn !== current.turn) return "defer";
+  return "apply";
+}
 const VISITOR_KEY = "setto-chat-visitor";
 const ACTIVE_CONVERSATION_KEY = "setto-chat-active";
 const NAVIGATION_KEY = "setto-chat-navigation";
@@ -34843,6 +34976,25 @@ function AgentJoinedEvent({ message }) {
     /* @__PURE__ */ jsx("div", { className: "setto-chat__message-stack", children: /* @__PURE__ */ jsx("div", { className: "setto-chat__message-bubble", children: /* @__PURE__ */ jsx("span", { className: "setto-chat__message-copy", children: message.content }) }) })
   ] });
 }
+function TeamTypingRow({ label, avatarUrl }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "setto-chat__message setto-chat__message--human setto-chat__message--typing",
+      "aria-live": "off",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "setto-chat__avatar setto-chat__avatar--human", "aria-hidden": "true", children: avatarUrl ? /* @__PURE__ */ jsx("img", { src: avatarUrl, alt: "" }) : /* @__PURE__ */ jsx(PersonIcon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-stack", children: [
+          /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: label }),
+          /* @__PURE__ */ jsx("div", { className: "setto-chat__message-bubble", children: /* @__PURE__ */ jsx("div", { className: "setto-chat__message-copy", children: /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", "aria-hidden": "true", children: "···" }) }) })
+        ] })
+      ]
+    }
+  );
+}
+function SeenMarker({ label }) {
+  return /* @__PURE__ */ jsx("span", { className: "setto-chat__receipt", "aria-live": "off", children: label });
+}
 function StaggeredText({ children }) {
   return Children.map(children, (child) => {
     if (typeof child !== "string") return child;
@@ -34884,6 +35036,7 @@ function SiteChatComposer({
   value,
   onChange,
   onSubmit,
+  onBlur,
   busy,
   queued,
   placeholder,
@@ -34964,7 +35117,10 @@ function SiteChatComposer({
             onChange: (event) => onChange(event.target.value),
             onKeyDown: handleKeyDown,
             onFocus: () => setFocused(true),
-            onBlur: () => setFocused(false),
+            onBlur: () => {
+              setFocused(false);
+              onBlur?.();
+            },
             placeholder,
             rows: 1,
             maxLength: 1500
@@ -35235,8 +35391,70 @@ function useChatAutoScroll(active, logRef, pinToBottomRef, programmaticScrollRef
     };
   }, [active, logRef, pinToBottomRef, programmaticScrollRef]);
 }
+function usePageVisible() {
+  const [pageVisible, setPageVisible] = useState(
+    () => typeof document === "undefined" || document.visibilityState !== "hidden"
+  );
+  useEffect(() => {
+    const update = () => setPageVisible(document.visibilityState !== "hidden");
+    update();
+    document.addEventListener("visibilitychange", update);
+    return () => document.removeEventListener("visibilitychange", update);
+  }, []);
+  return pageVisible;
+}
+const channelRemovals = /* @__PURE__ */ new Map();
+function useConversationChannel(supabase, topic, handlers2) {
+  const handlersRef = useRef(handlers2);
+  const channelRef = useRef(null);
+  useEffect(() => {
+    handlersRef.current = handlers2;
+  });
+  useEffect(() => {
+    if (!topic) return;
+    let active = true;
+    let channel = null;
+    let changedTimer = 0;
+    const join2 = () => {
+      if (!active) return;
+      channel = supabase.channel(topic).on("broadcast", { event: "changed" }, () => {
+        window.clearTimeout(changedTimer);
+        changedTimer = window.setTimeout(
+          () => handlersRef.current.onChanged(),
+          CHANGED_DEBOUNCE_MS
+        );
+      }).on("broadcast", { event: "read" }, (message) => {
+        const signal = parseReadSignal(message.payload);
+        if (signal) handlersRef.current.onRead(signal);
+      }).on("broadcast", { event: "typing" }, (message) => {
+        const signal = parseTypingSignal(message.payload);
+        if (signal) handlersRef.current.onTyping(signal);
+      });
+      channelRef.current = channel;
+      channel.subscribe((status) => {
+        if (active) handlersRef.current.onStatus(status === "SUBSCRIBED");
+      });
+    };
+    const previousRemoval = channelRemovals.get(topic);
+    if (previousRemoval) void previousRemoval.then(join2);
+    else join2();
+    return () => {
+      active = false;
+      window.clearTimeout(changedTimer);
+      if (!channel) return;
+      handlersRef.current.onLeave();
+      channelRef.current = null;
+      handlersRef.current.onStatus(false);
+      const removal = supabase.removeChannel(channel).catch(() => void 0).finally(() => {
+        if (channelRemovals.get(topic) === removal) channelRemovals.delete(topic);
+      });
+      channelRemovals.set(topic, removal);
+    };
+  }, [supabase, topic]);
+  return channelRef;
+}
 function SettoChat() {
-  const { config } = useSetto();
+  const { config, supabase } = useSetto();
   const { i18n } = useTranslation();
   const apiUrl = config.apiUrl.replace(/\/+$/, "");
   const [settings, setSettings] = useState(null);
@@ -35262,9 +35480,53 @@ function SettoChat() {
   const pinToBottomRef = useRef(true);
   const programmaticScrollRef = useRef(false);
   const filesRef = useRef([]);
+  const [realtime, setRealtime] = useState(null);
+  const [subscribed, setSubscribed] = useState(false);
+  const [teamTypingUntil, setTeamTypingUntil] = useState(null);
+  const subscribedRef = useRef(false);
+  const turnRef = useRef({ busy: false, generation: 0 });
+  const refreshRequestRef = useRef(0);
+  const pendingRefreshRef = useRef(false);
+  const loadedConversationRef = useRef(null);
+  const latestHumanRef = useRef(null);
+  const readMarkersRef = useRef(/* @__PURE__ */ new Map());
+  const refreshRef = useRef(async () => void 0);
+  const typingSenderRef = useRef(null);
   const formId = useId();
   const palette = useMemo(() => chatPalette(config.brandColors), [config.brandColors]);
   const desktopPopup = useDesktopPopup();
+  const pageVisible = usePageVisible();
+  const channelRef = useConversationChannel(supabase, mounted ? realtime?.topic ?? null : null, {
+    onStatus(next) {
+      subscribedRef.current = next;
+      setSubscribed(next);
+      if (next) void refreshRef.current();
+      else setTeamTypingUntil(null);
+    },
+    onChanged() {
+      void refreshRef.current();
+    },
+    onRead(signal) {
+      if (signal.side !== "team") return;
+      setRealtime(
+        (current) => current ? { ...current, teamReadAt: laterTimestamp(current.teamReadAt, signal.at) } : current
+      );
+    },
+    onTyping(signal) {
+      setTeamTypingUntil((current) => nextTeamTypingDeadline(current, signal, Date.now()));
+    },
+    onLeave() {
+      typingSender().stop();
+    }
+  });
+  function typingSender() {
+    return typingSenderRef.current ??= createTypingSender((typing) => {
+      const channel = channelRef.current;
+      if (!channel || !subscribedRef.current || channel.state !== "joined") return false;
+      void channel.send({ type: "broadcast", event: "typing", payload: { side: "visitor", typing } }).catch(() => void 0);
+      return true;
+    });
+  }
   useChatStyles();
   useChatViewport(mounted && !desktopPopup, logRef, pinToBottomRef, programmaticScrollRef);
   useChatPinTracking(mounted, logRef, pinToBottomRef, programmaticScrollRef);
@@ -35288,6 +35550,7 @@ function SettoChat() {
     failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte.",
     image: "Bilde",
     team: "Teamet",
+    seen: "Sett",
     emptyChats: "Nye samtaler du starter her vises i denne listen."
   } : {
     open: siteName ? `Open chat with ${siteName}` : "Open chat",
@@ -35304,6 +35567,7 @@ function SettoChat() {
     failed: "I cannot reply right now. Please contact the team directly.",
     image: "Image",
     team: "The team",
+    seen: "Seen",
     emptyChats: "New conversations you start here will appear in this list."
   };
   function ensureVisitor() {
@@ -35318,9 +35582,24 @@ function SettoChat() {
     }
   }
   function applyConversation(next) {
+    const sameConversation = loadedConversationRef.current === next.conversationId;
     rememberConversation(next.conversationId);
+    loadedConversationRef.current = next.conversationId;
     setHumanJoined(next.humanJoined);
     setMessages(next.messages);
+    const supported = "realtimeTopic" in next || "teamReadAt" in next || "visitorReadAt" in next;
+    const serverTeamReadAt = typeof next.teamReadAt === "string" ? next.teamReadAt : null;
+    setRealtime((current) => ({
+      conversationId: next.conversationId,
+      supported,
+      topic: conversationTopic(next.realtimeTopic),
+      teamReadAt: current?.conversationId === next.conversationId ? laterTimestamp(current.teamReadAt, serverTeamReadAt) : serverTeamReadAt
+    }));
+    const latestHuman = latestHumanMessageKey(next.messages);
+    if (!sameConversation || latestHuman && latestHuman !== latestHumanRef.current) {
+      setTeamTypingUntil(null);
+    }
+    latestHumanRef.current = latestHuman;
     const navigation = [...next.messages].reverse().find((message) => message.kind === "navigation" && message.action?.type === "navigate");
     if (!navigation?.id || !navigation.action?.url) return;
     try {
@@ -35348,9 +35627,51 @@ function SettoChat() {
     } catch {
     }
   }
+  async function refreshConversation() {
+    const id = conversationId.current;
+    const visitorIdValue = visitor.current;
+    if (!id || !visitorIdValue) return;
+    if (turnRef.current.busy) {
+      pendingRefreshRef.current = true;
+      return;
+    }
+    pendingRefreshRef.current = false;
+    refreshRequestRef.current += 1;
+    const ticket = {
+      conversationId: id,
+      turn: turnRef.current.generation,
+      request: refreshRequestRef.current
+    };
+    try {
+      const query = new URLSearchParams({ visitorId: visitorIdValue });
+      const response = await fetch(
+        `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(id)}/public?${query}`,
+        { headers: { Accept: "application/json" } }
+      );
+      if (!response.ok) return;
+      const next = await response.json();
+      const outcome = refreshOutcome(ticket, {
+        conversationId: conversationId.current,
+        turn: turnRef.current.generation,
+        request: refreshRequestRef.current,
+        busy: turnRef.current.busy
+      });
+      if (outcome === "apply") {
+        applyConversation(next);
+      } else if (outcome === "defer") {
+        pendingRefreshRef.current = true;
+        if (!turnRef.current.busy) void refreshConversation();
+      }
+    } catch {
+    }
+  }
+  useEffect(() => {
+    refreshRef.current = refreshConversation;
+  });
   async function loadConversation(id) {
     const visitorIdValue = ensureVisitor();
     setLoadingConversation(true);
+    refreshRequestRef.current += 1;
     try {
       const query = new URLSearchParams({ visitorId: visitorIdValue });
       const response = await fetch(
@@ -35413,34 +35734,71 @@ function SettoChat() {
     },
     []
   );
+  const polledConversation = realtime?.conversationId ?? null;
   useEffect(() => {
     if (!mounted || !conversationId.current || !visitor.current || sending) return;
-    let cancelled = false;
-    const refresh = async () => {
-      try {
-        const query = new URLSearchParams({ visitorId: visitor.current });
-        const response = await fetch(
-          `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(conversationId.current)}/public?${query}`,
-          { headers: { Accept: "application/json" } }
-        );
-        if (!response.ok || cancelled) return;
-        const next = await response.json();
-        if (!cancelled) applyConversation(next);
-      } catch {
+    const timer = window.setInterval(() => {
+      if (document.visibilityState === "hidden") return;
+      void refreshRef.current();
+    }, pollIntervalMs(subscribed));
+    return () => window.clearInterval(timer);
+  }, [mounted, sending, subscribed, polledConversation]);
+  const pageWasVisibleRef = useRef(pageVisible);
+  useEffect(() => {
+    const returned = pageVisible && !pageWasVisibleRef.current;
+    pageWasVisibleRef.current = pageVisible;
+    if (returned && mounted) void refreshRef.current();
+  }, [pageVisible, mounted]);
+  useEffect(() => {
+    if (teamTypingUntil === null) return;
+    const timer = window.setTimeout(
+      () => setTeamTypingUntil(null),
+      Math.max(0, teamTypingUntil - Date.now())
+    );
+    return () => window.clearTimeout(timer);
+  }, [teamTypingUntil]);
+  useEffect(() => {
+    const id = conversationId.current;
+    const visitorIdValue = visitor.current;
+    if (!id || !visitorIdValue || realtime?.conversationId !== id || !realtime.supported) return;
+    let marker = readMarkersRef.current.get(id);
+    if (!marker) {
+      marker = { sent: null, pending: null, unsupported: false };
+      readMarkersRef.current.set(id, marker);
+    }
+    if (marker.unsupported) return;
+    const through = readMarkerThrough(messages, {
+      humanJoined,
+      chatOpen: mounted && visible,
+      pageVisible,
+      lastSent: laterTimestamp(marker.sent, marker.pending)
+    });
+    if (!through) return;
+    const state = marker;
+    state.pending = through;
+    fetch(
+      `${apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/conversations/${encodeURIComponent(id)}/public/read`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
+        body: JSON.stringify({ visitorId: visitorIdValue, through })
       }
-    };
-    const timer = window.setInterval(() => void refresh(), 5e3);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, [apiUrl, config.siteId, mounted, sending]);
+    ).then((response) => {
+      if (response.ok) state.sent = laterTimestamp(state.sent, through);
+      else if (response.status === 404) state.unsupported = true;
+    }).catch(() => void 0).finally(() => {
+      if (state.pending === through) state.pending = null;
+    });
+  }, [apiUrl, config.siteId, messages, humanJoined, mounted, visible, pageVisible, realtime]);
   useEffect(() => {
     if (!sending && queued) {
       setQueued(false);
       void sendTurn();
     }
   }, [sending, queued]);
+  useEffect(() => {
+    if (!sending && pendingRefreshRef.current) void refreshRef.current();
+  }, [sending]);
   useEffect(() => {
     if (!mounted) return;
     const closeOnEscape = (event) => {
@@ -35473,7 +35831,12 @@ function SettoChat() {
     });
   }
   function startNew() {
+    typingSender().stop();
     rememberConversation(null);
+    loadedConversationRef.current = null;
+    latestHumanRef.current = null;
+    setRealtime(null);
+    setTeamTypingUntil(null);
     setHumanJoined(false);
     setMessages([{ role: "assistant", content: intro(locale, settings?.displayName ?? void 0) }]);
     setDraft("");
@@ -35497,6 +35860,7 @@ function SettoChat() {
   }
   function queueOrSend() {
     if (!draft.trim() && files.length === 0) return;
+    typingSender().stop();
     if (sending) {
       setQueued(true);
       return;
@@ -35507,6 +35871,9 @@ function SettoChat() {
     const content2 = draft.trim();
     const turnFiles = files;
     if (!content2 && turnFiles.length === 0) return;
+    turnRef.current.busy = true;
+    turnRef.current.generation += 1;
+    typingSender().stop();
     pinToBottomRef.current = true;
     setDraft("");
     setFiles([]);
@@ -35591,9 +35958,15 @@ function SettoChat() {
       setMessages((previous2) => replaceLastAssistant(previous2, labels.failed));
     } finally {
       for (const image2 of turnFiles) URL.revokeObjectURL(image2.preview);
+      turnRef.current.busy = false;
+      if (conversationId.current && loadedConversationRef.current !== conversationId.current) {
+        pendingRefreshRef.current = true;
+      }
       setSending(false);
     }
   }
+  const seenIndex = seenVisitorMessageIndex(messages, humanJoined, realtime?.teamReadAt ?? null);
+  const typingIdentity = teamTypingUntil !== null ? teamTypingIdentity(messages) : null;
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -35690,42 +36063,52 @@ function SettoChat() {
                       ref: logRef,
                       "aria-live": "polite",
                       "aria-busy": loadingConversation,
-                      children: /* @__PURE__ */ jsx("div", { className: "setto-chat__message-list", children: messages.map(
-                        (item, index2) => item.role === "system" && item.kind === "agent_joined" ? /* @__PURE__ */ jsx(AgentJoinedEvent, { message: item }, item.id ?? `agent-joined-${index2}`) : /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            className: `setto-chat__message setto-chat__message--${item.role}`,
-                            children: [
-                              item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: `setto-chat__avatar setto-chat__avatar--${item.role}`,
-                                  "aria-hidden": "true",
-                                  children: item.role === "human" && item.avatarUrl ? /* @__PURE__ */ jsx("img", { src: item.avatarUrl, alt: "" }) : item.role === "human" ? /* @__PURE__ */ jsx(PersonIcon, {}) : /* @__PURE__ */ jsx(BaristaIcon, {})
-                                }
-                              ) : null,
-                              /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-stack", children: [
-                                item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: item.role === "human" ? item.authorName || labels.team : "Barista" }) : null,
-                                /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-bubble", children: [
-                                  /* @__PURE__ */ jsx("div", { className: "setto-chat__message-copy", children: item.content ? item.role === "assistant" ? /* @__PURE__ */ jsx(SiteChatMarkdown, { content: item.content, reveal: item.reveal }) : item.content : /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
-                                  item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
-                                    "a",
-                                    {
-                                      className: "setto-chat__image",
-                                      href: attachment.url,
-                                      target: "_blank",
-                                      rel: "noreferrer",
-                                      children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
-                                    },
-                                    attachment.id
-                                  ))
+                      children: /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-list", children: [
+                        messages.map(
+                          (item, index2) => item.role === "system" && item.kind === "agent_joined" ? /* @__PURE__ */ jsx(AgentJoinedEvent, { message: item }, item.id ?? `agent-joined-${index2}`) : /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: `setto-chat__message setto-chat__message--${item.role}`,
+                              children: [
+                                item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: `setto-chat__avatar setto-chat__avatar--${item.role}`,
+                                    "aria-hidden": "true",
+                                    children: item.role === "human" && item.avatarUrl ? /* @__PURE__ */ jsx("img", { src: item.avatarUrl, alt: "" }) : item.role === "human" ? /* @__PURE__ */ jsx(PersonIcon, {}) : /* @__PURE__ */ jsx(BaristaIcon, {})
+                                  }
+                                ) : null,
+                                /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-stack", children: [
+                                  item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: item.role === "human" ? item.authorName || labels.team : "Barista" }) : null,
+                                  /* @__PURE__ */ jsxs("div", { className: "setto-chat__message-bubble", children: [
+                                    /* @__PURE__ */ jsx("div", { className: "setto-chat__message-copy", children: item.content ? item.role === "assistant" ? /* @__PURE__ */ jsx(SiteChatMarkdown, { content: item.content, reveal: item.reveal }) : item.content : /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }),
+                                    item.attachments?.map((attachment) => /* @__PURE__ */ jsx(
+                                      "a",
+                                      {
+                                        className: "setto-chat__image",
+                                        href: attachment.url,
+                                        target: "_blank",
+                                        rel: "noreferrer",
+                                        children: /* @__PURE__ */ jsx("img", { src: attachment.url, alt: labels.image })
+                                      },
+                                      attachment.id
+                                    ))
+                                  ] }),
+                                  index2 === seenIndex ? /* @__PURE__ */ jsx(SeenMarker, { label: labels.seen }) : null
                                 ] })
-                              ] })
-                            ]
-                          },
-                          item.id ?? `${item.role}-${index2}`
-                        )
-                      ) })
+                              ]
+                            },
+                            item.id ?? `${item.role}-${index2}`
+                          )
+                        ),
+                        typingIdentity ? /* @__PURE__ */ jsx(
+                          TeamTypingRow,
+                          {
+                            label: teamTypingLabel(isNo, typingIdentity.name),
+                            avatarUrl: typingIdentity.avatarUrl
+                          }
+                        ) : null
+                      ] })
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { className: "setto-chat__composer-shell", children: [
@@ -35733,8 +36116,12 @@ function SettoChat() {
                       SiteChatComposer,
                       {
                         value: draft,
-                        onChange: setDraft,
+                        onChange: (value) => {
+                          setDraft(value);
+                          typingSender().update(value);
+                        },
                         onSubmit: queueOrSend,
+                        onBlur: () => typingSender().stop(),
                         busy: sending,
                         queued,
                         placeholder: humanJoined ? labels.humanPlaceholder : labels.placeholder,
@@ -35801,6 +36188,7 @@ function useChatStyles() {
 .setto-chat__main{position:relative;z-index:1;display:flex;flex:1;min-width:0;max-width:820px;height:100%;margin:0 auto;flex-direction:column;background:var(--setto-chat-canvas)}.setto-chat__header{position:absolute;inset:0 0 auto;z-index:30;min-height:58px;padding:.35rem .75rem;display:flex;align-items:center;gap:.5rem;background:linear-gradient(to bottom,color-mix(in srgb,var(--setto-chat-crema) 88%,transparent),color-mix(in srgb,var(--setto-chat-crema) 72%,transparent));border-bottom:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);isolation:isolate}.setto-chat__round-button{flex:none;width:46px;height:46px;padding:0;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);border-radius:50%;background:var(--setto-chat-raised);color:var(--setto-chat-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}.setto-chat__round-button:hover{background:var(--setto-chat-crema);border-color:var(--setto-chat-accent);color:var(--setto-chat-accent)}.setto-chat__round-button:active{transform:scale(.96)}.setto-chat__brand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}.setto-chat__brand h2{margin:0;color:var(--setto-chat-ink);font-size:1.02rem;font-weight:600;line-height:1.15}.setto-chat__brand p{max-width:100%;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--setto-chat-ink) 56%,transparent);font-size:.78rem;line-height:1.15}
 .setto-chat__body{position:relative;display:flex;flex:1 1 auto;min-height:0;height:100%;flex-direction:column}.setto-chat__log{display:flex;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;padding:calc(58px + 1.3rem) .75rem 8rem;scroll-behavior:auto;-webkit-overflow-scrolling:touch}.setto-chat__message-list{display:flex;flex-direction:column}.setto-chat__message{--setto-chat-bubble:color-mix(in srgb,var(--setto-chat-ink) 7%,var(--setto-chat-canvas));display:flex;align-items:flex-end;gap:.55rem;width:100%;margin-bottom:1rem;color:color-mix(in srgb,var(--setto-chat-ink) 92%,transparent);font-size:16px;line-height:1.5;overflow-wrap:anywhere}.setto-chat__message-stack{display:flex;min-width:0;max-width:min(78%,36rem);flex-direction:column;align-items:flex-start}.setto-chat__message-bubble{position:relative;min-width:2.5rem;padding:.58rem .82rem;border-radius:19px 19px 19px 5px;background:var(--setto-chat-bubble);white-space:pre-wrap}.setto-chat__message--assistant .setto-chat__message-bubble::before,.setto-chat__message--human .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;left:-7px;bottom:0;width:16px;height:17px;border-bottom-right-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--assistant .setto-chat__message-bubble::after,.setto-chat__message--human .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;left:-10px;bottom:0;width:10px;height:18px;border-bottom-right-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message-copy,.setto-chat__image{position:relative;z-index:2}.setto-chat__message--visitor{--setto-chat-bubble:#0a84ff;justify-content:flex-end;color:#fff}.setto-chat__message--visitor .setto-chat__message-stack{align-items:flex-end}.setto-chat__message--visitor .setto-chat__message-bubble{border-radius:19px 19px 5px 19px}.setto-chat__message--visitor .setto-chat__message-bubble::before{content:"";position:absolute;z-index:0;right:-7px;bottom:0;width:16px;height:17px;border-bottom-left-radius:14px;background:var(--setto-chat-bubble)}.setto-chat__message--visitor .setto-chat__message-bubble::after{content:"";position:absolute;z-index:1;right:-10px;bottom:0;width:10px;height:18px;border-bottom-left-radius:10px;background:var(--setto-chat-canvas)}.setto-chat__message--system{justify-content:center;color:color-mix(in srgb,var(--setto-chat-ink) 55%,transparent);font-size:.78rem;line-height:1.45;text-align:center}.setto-chat__message--system .setto-chat__message-stack{max-width:85%;align-items:center}.setto-chat__message--system .setto-chat__message-bubble{padding:.25rem .6rem;background:transparent}.setto-chat__avatar{position:relative;z-index:3;display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin-bottom:1px;overflow:hidden;border:2px solid var(--setto-chat-canvas);border-radius:50%;background:var(--setto-chat-crema);color:var(--setto-chat-ink);box-shadow:0 2px 8px color-mix(in srgb,var(--setto-chat-ink) 14%,transparent)}.setto-chat__avatar--assistant{background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__avatar img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__speaker{display:block;margin:0 0 .2rem .4rem;color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent);font-size:.69rem;font-weight:500;line-height:1.2}.setto-chat__typing{display:inline-block;animation:setto-chat-pulse 1s ease-in-out infinite}.setto-chat__image{display:block;width:max-content;max-width:100%;margin-top:.65rem;overflow:hidden;border-radius:13px}.setto-chat__image img{display:block;width:min(280px,100%);max-height:260px;object-fit:cover}
 .setto-chat__message--agent-joined{justify-content:flex-start;align-items:center;gap:.55rem;padding:.1rem .4rem;color:color-mix(in srgb,var(--setto-chat-ink) 62%,transparent);font-size:.8rem;line-height:1.4;text-align:left}.setto-chat__message--agent-joined .setto-chat__message-stack{max-width:calc(100% - 38px);align-items:flex-start}.setto-chat__message--agent-joined .setto-chat__message-bubble{min-width:0;padding:.2rem 0;background:transparent;white-space:normal}.setto-chat__avatar--joined{flex-basis:30px;width:30px;height:30px;margin:0;border-width:1px;box-shadow:0 2px 7px color-mix(in srgb,var(--setto-chat-ink) 12%,transparent)}
+.setto-chat__receipt{display:block;margin:.26rem .45rem 0 0;color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent);font-size:.69rem;font-weight:500;line-height:1.2}.setto-chat__message--typing{animation:setto-chat-typing-in 180ms cubic-bezier(.2,.8,.2,1) both}.setto-chat__message--typing .setto-chat__message-bubble{min-width:3.25rem;text-align:center}.setto-chat__message--typing .setto-chat__typing{font-weight:700;letter-spacing:.06em}@keyframes setto-chat-typing-in{from{opacity:0;transform:translateY(4px)}}@media(prefers-reduced-motion:reduce){.setto-chat__message--typing{animation:none}}
 .setto-chat__composer-shell{position:absolute;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr);padding:1.5rem .75rem 0;background:transparent;isolation:isolate}.setto-chat__composer-shell::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--setto-chat-canvas) 82%,transparent) 46%,var(--setto-chat-canvas) 66%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,1) 66%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 34%,rgba(0,0,0,1) 66%)}.setto-chat__composer{position:relative;z-index:1;display:flex;flex-direction:column;gap:.15rem;width:100%;min-width:0;margin:0;padding:.35rem .4rem;border:2px solid color-mix(in srgb,var(--setto-chat-ink) 10%,transparent);border-radius:24px;background:var(--setto-chat-canvas);box-shadow:0 8px 24px -16px color-mix(in srgb,var(--setto-chat-ink) 28%,transparent);transition:padding 220ms cubic-bezier(.16,1,.3,1),border-color 200ms ease,box-shadow 360ms cubic-bezier(.16,1,.3,1)}.setto-chat__composer.is-open{padding:.55rem .5rem}.setto-chat__composer:focus-within{border-color:var(--setto-chat-accent)}.setto-chat__composer textarea,.setto-chat__composer textarea:hover,.setto-chat__composer textarea:focus,.setto-chat__composer textarea:focus-visible{width:100%;min-height:36px;max-height:200px;padding:.45rem .25rem;resize:none;-webkit-appearance:none!important;appearance:none!important;border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--setto-chat-ink);font-family:"Archivo Variable",Archivo,system-ui,sans-serif;font-size:16px;line-height:1.35;transition:min-height 220ms cubic-bezier(.16,1,.3,1)}.setto-chat__composer.is-open textarea{min-height:40px}.setto-chat__composer textarea::placeholder{color:color-mix(in srgb,var(--setto-chat-ink) 52%,transparent)}.setto-chat__composer-tools{display:flex;align-items:center;gap:.4rem;width:100%;min-width:0}.setto-chat__attach{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:color-mix(in srgb,var(--setto-chat-ink) 58%,transparent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 160ms ease,color 160ms ease}.setto-chat__attach:hover:not(:disabled){background:color-mix(in srgb,var(--setto-chat-ink) 6%,transparent);color:var(--setto-chat-ink)}.setto-chat__attach:disabled{opacity:.4;cursor:default}.setto-chat__send{flex:none;width:36px;height:36px;margin-left:auto;padding:0;border:0;border-radius:50%;background:var(--setto-chat-accent);color:var(--setto-chat-raised);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 360ms cubic-bezier(.16,1,.3,1),box-shadow 360ms cubic-bezier(.16,1,.3,1),background 200ms ease,opacity 200ms ease}.setto-chat__send:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 24px -12px color-mix(in srgb,var(--setto-chat-ink) 45%,transparent)}.setto-chat__send:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 10px -8px color-mix(in srgb,var(--setto-chat-ink) 40%,transparent);transition-duration:90ms}.setto-chat__send:disabled{opacity:.35;cursor:default}.setto-chat__send.is-queued{animation:setto-chat-queued 1.1s ease-in-out infinite}.setto-chat__attachments{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:.15rem .15rem 0}.setto-chat__attachments li{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 12%,transparent);background:var(--setto-chat-crema)}.setto-chat__attachments img{display:block;width:100%;height:100%;object-fit:cover}.setto-chat__attachments button{position:absolute;top:2px;right:2px;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--setto-chat-ink) 72%,transparent);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.setto-chat__composer-floor{position:relative;z-index:1;width:calc(100% + 1.5rem);height:max(.35rem,env(safe-area-inset-bottom));margin-left:-.75rem;background:var(--setto-chat-canvas)}
 .setto-chat__launcher{width:58px;height:58px;padding:3px;border:1px solid rgba(255,255,255,.54);border-radius:50%;background:color-mix(in srgb,var(--setto-chat-raised) 35%,transparent);box-shadow:0 10px 30px color-mix(in srgb,var(--setto-chat-ink) 24%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--setto-chat-ink) 9%,transparent);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);color:var(--setto-chat-ink);display:grid;place-items:center;cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease}.setto-chat__launcher:hover{transform:translateY(-2px);box-shadow:0 15px 35px color-mix(in srgb,var(--setto-chat-ink) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--setto-chat-ink) 9%,transparent)}.setto-chat__launcher span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--setto-chat-accent);color:var(--setto-chat-raised)}.setto-chat__launcher img{display:block;width:50px;height:50px;border-radius:50%;object-fit:cover}.setto-chat__launcher:focus-visible,.setto-chat button:focus-visible,.setto-chat input:focus-visible{outline:2px solid var(--setto-chat-accent);outline-offset:2px}@keyframes setto-chat-pulse{50%{opacity:.35}}@keyframes setto-chat-queued{50%{opacity:.55}}
 @media(max-width:700px){.setto-chat__chats{position:absolute;inset:0 auto 0 0;transform:translateX(-100%);transition:transform 260ms cubic-bezier(.16,1,.3,1);box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__main{width:100%;max-width:none;margin:0}.setto-chat__log{padding-left:.75rem;padding-right:.75rem}}@media(min-width:701px){.setto-chat--mounted{top:auto;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));left:auto;width:min(440px,calc(100vw - 36px));height:min(720px,calc(100dvh - 36px));overflow:visible;background:transparent}.setto-chat__shell{position:relative;top:auto;left:auto;width:100%;height:100%;border:1px solid color-mix(in srgb,var(--setto-chat-ink) 14%,transparent);border-radius:26px;background:var(--setto-chat-canvas);box-shadow:0 28px 80px -24px color-mix(in srgb,var(--setto-chat-ink) 42%,transparent),0 8px 24px -12px color-mix(in srgb,var(--setto-chat-ink) 24%,transparent);transform:translateY(16px) scale(.975);transform-origin:right bottom}.setto-chat--visible .setto-chat__shell{transform:none}.setto-chat__chats{position:absolute;inset:0 auto 0 0;width:min(82%,280px);height:100%;transform:translateX(-100%);transition:transform 260ms cubic-bezier(.16,1,.3,1);box-shadow:14px 0 35px color-mix(in srgb,var(--setto-chat-ink) 16%,transparent)}.setto-chat__chats--open{transform:none}.setto-chat__main{width:100%;max-width:none;margin:0}.setto-chat__header,.setto-chat__log{padding-left:.9rem;padding-right:.9rem}.setto-chat__composer-shell{padding-left:.9rem;padding-right:.9rem}.setto-chat__composer-floor{width:calc(100% + 1.8rem);height:.45rem;margin-left:-.9rem}.setto-chat__message{font-size:15.5px}.setto-chat__message-stack{max-width:82%}}@media(prefers-reduced-motion:reduce){.setto-chat,.setto-chat__shell,.setto-chat__chats,.setto-chat__launcher,.setto-chat__composer,.setto-chat__composer textarea,.setto-chat__send{transition:none!important}.setto-chat__typing,.setto-chat__send.is-queued{animation:none}}
@@ -36954,19 +37342,19 @@ function readLocaleFields(i18n, lng, formId, ns = "translation") {
   for (const itemKey of collectKeysUnder(bundle, prefix)) {
     const item = list2[itemKey];
     if (!item || typeof item !== "object") continue;
-    const record = item;
-    const name2 = readString(record, "name").trim();
+    const record2 = item;
+    const name2 = readString(record2, "name").trim();
     if (!name2) continue;
-    const type = isFormFieldType(record.type) ? record.type : "text";
+    const type = isFormFieldType(record2.type) ? record2.type : "text";
     fields.push({
       itemKey,
       name: name2,
       type,
       labelKey: `${prefix}.${itemKey}.label`,
-      label: readString(record, "label"),
-      placeholder: readString(record, "placeholder"),
-      required: readString(record, "required") === "true",
-      options: parseOptions(readString(record, "options"))
+      label: readString(record2, "label"),
+      placeholder: readString(record2, "placeholder"),
+      required: readString(record2, "required") === "true",
+      options: parseOptions(readString(record2, "options"))
     });
   }
   return fields;
@@ -37755,6 +38143,142 @@ function toEmbedUrl(url) {
     return null;
   }
 }
+const MAP_MIN_ZOOM = 1;
+const MAP_MAX_ZOOM = 19;
+const MAP_DEFAULT_ZOOM = 15;
+const MAP_DEFAULT_TITLE = "Kart";
+const MERCATOR_MAX_LAT = 85.0511287798066;
+const MAP_ASSUMED_WIDTH = 320;
+const MAP_ASSUMED_HEIGHT = 240;
+const TILE_SIZE = 256;
+function parseCoordinate(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value !== "string") return null;
+  const text2 = value.trim().replace(",", ".");
+  if (!/^[+-]?(\d+(\.\d*)?|\.\d+)$/.test(text2)) return null;
+  const n = Number(text2);
+  return Number.isFinite(n) ? n : null;
+}
+function parseZoom(value) {
+  const n = parseCoordinate(value);
+  if (n === null) return MAP_DEFAULT_ZOOM;
+  return Math.min(MAP_MAX_ZOOM, Math.max(MAP_MIN_ZOOM, Math.round(n)));
+}
+function parseMapLocation(raw) {
+  if (!raw) return null;
+  const lat = parseCoordinate(raw.lat);
+  const lng = parseCoordinate(raw.lng);
+  if (lat === null || lng === null) return null;
+  if (Math.abs(lat) > MERCATOR_MAX_LAT || Math.abs(lng) > 180) return null;
+  return { lat, lng, zoom: parseZoom(raw.zoom) };
+}
+function formatCoordinate(n) {
+  const fixed = n.toFixed(6);
+  const trimmed = fixed.includes(".") ? fixed.replace(/0+$/, "").replace(/\.$/, "") : fixed;
+  return trimmed === "-0" ? "0" : trimmed;
+}
+function serialiseMapLocation(location2) {
+  return {
+    lat: formatCoordinate(location2.lat),
+    lng: formatCoordinate(location2.lng),
+    zoom: String(parseZoom(location2.zoom))
+  };
+}
+function worldSize(zoom) {
+  return TILE_SIZE * 2 ** zoom;
+}
+function latToWorldY(lat, zoom) {
+  const clamped = Math.max(-MERCATOR_MAX_LAT, Math.min(MERCATOR_MAX_LAT, lat));
+  const sin = Math.sin(clamped * Math.PI / 180);
+  return (0.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)) * worldSize(zoom);
+}
+function worldYToLat(y, zoom) {
+  const n = Math.PI - 2 * Math.PI * y / worldSize(zoom);
+  return 180 / Math.PI * Math.atan(Math.sinh(n));
+}
+function mapBbox(location2, width = MAP_ASSUMED_WIDTH, height = MAP_ASSUMED_HEIGHT) {
+  const degreesPerPixel = 360 / worldSize(location2.zoom);
+  const halfLng = width / 2 * degreesPerPixel;
+  const y = latToWorldY(location2.lat, location2.zoom);
+  const max = worldSize(location2.zoom);
+  return {
+    minLng: Math.max(-180, location2.lng - halfLng),
+    maxLng: Math.min(180, location2.lng + halfLng),
+    minLat: worldYToLat(Math.min(max, y + height / 2), location2.zoom),
+    maxLat: worldYToLat(Math.max(0, y - height / 2), location2.zoom)
+  };
+}
+function mapEmbedUrl(location2) {
+  const box = mapBbox(location2);
+  const bbox = [box.minLng, box.minLat, box.maxLng, box.maxLat].map(formatCoordinate).join(",");
+  const marker = `${formatCoordinate(location2.lat)},${formatCoordinate(location2.lng)}`;
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${marker}`;
+}
+function writeMapLocation(store, languages, key, location2) {
+  const values = serialiseMapLocation(location2);
+  store.batch(() => {
+    for (const lng of languages) {
+      store.set(`${key}.lat`, lng, values.lat);
+      store.set(`${key}.lng`, lng, values.lng);
+      store.set(`${key}.zoom`, lng, values.zoom);
+    }
+  });
+}
+function SettoMap({ k, className, style, loading = "lazy" }) {
+  const { t, i18n } = useTranslation();
+  const { editMode, store } = useSetto();
+  const guestEdit = useGuestEdit();
+  const editable = editMode || guestEdit.active;
+  const MapTools = useSettoChromeSlot("map-tools");
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (!store) return;
+    return store.subscribe(() => force((x) => x + 1));
+  }, [store]);
+  const lng = i18n.language;
+  const read = (field) => {
+    const key = `${k}.${field}`;
+    return store?.get(key, lng) || t(key, { defaultValue: "" });
+  };
+  const location2 = parseMapLocation({ lat: read("lat"), lng: read("lng"), zoom: read("zoom") });
+  const title = read("title") || MAP_DEFAULT_TITLE;
+  const tools = editable && store && MapTools ? /* @__PURE__ */ jsx(
+    MapTools,
+    {
+      location: location2,
+      onChange: (next) => writeMapLocation(store, store.languages(lng), k, next)
+    }
+  ) : null;
+  if (!location2) {
+    return /* @__PURE__ */ jsx("div", { className, style, "data-setto-map": k, "data-setto-map-empty": "1", children: tools ? /* @__PURE__ */ jsx("div", { style: fillStyle, children: tools }) : null });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style, "data-setto-map": k, children: /* @__PURE__ */ jsxs("div", { style: fillStyle, children: [
+    /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: mapEmbedUrl(location2),
+        title,
+        loading,
+        referrerPolicy: "strict-origin-when-cross-origin",
+        style: iframeStyle
+      }
+    ),
+    tools
+  ] }) });
+}
+const fillStyle = {
+  position: "relative",
+  width: "100%",
+  height: "100%",
+  borderRadius: "inherit",
+  overflow: "hidden"
+};
+const iframeStyle = {
+  display: "block",
+  width: "100%",
+  height: "100%",
+  border: 0
+};
 const DEFAULT_DURATION = {
   fadeIn: 600,
   slideUp: 700,
@@ -38739,6 +39263,7 @@ export {
   SettoIcon,
   SettoImage,
   SettoLanguages,
+  SettoMap,
   SettoMark,
   SettoProvider,
   SettoRepeater,