@sevenfold/setto-client 0.30.1 → 0.32.0

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { SettoIcon } from './SettoIcon';
 export type { SettoIconProps, SettoIconRenderProps } from './SettoIcon';
 export { SettoImage } from './SettoImage';
 export type { SettoImageProps, ImageToolsProps } from './SettoImage';
+export { SETTO_IMAGE_QUALITY, SETTO_IMAGE_WIDTHS, isOptimizable, optimizedSrcSet, optimizedUrl, settoVercelImagesConfig, } from './lib/optimized-image';
 export { SettoRepeater } from './SettoRepeater';
 export type { SettoRepeaterProps } from './SettoRepeater';
 export { SettoForm, FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS, fieldTypeHasOptions, fieldTypeHasPlaceholder, formFieldsPrefix, isFormFieldType, readLocaleFields, settoSubmissionUrl, } from './modules/forms';

package/dist/lib/optimized-image.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Images through Vercel's Image Optimization, for sites that turned it on.
+ *
+ * A site keeps one original per image in its repository; the CDN makes each
+ * width on first request, in AVIF or WebP as the browser accepts, and caches
+ * it by the file's content. A site turns it on with two things that must
+ * agree: `"images": { "optimize": true }` in `setto.config.json`, and an
+ * `images` block in `vercel.json` whose `sizes` and `qualities` are exactly
+ * the constants below — Vercel refuses a `w` or `q` it was not given. The
+ * block, for copying: `settoVercelImagesConfig`.
+ */
+/** Phone, phone at 2–3×, tablet, laptop, wide and retina desktop. */
+export declare const SETTO_IMAGE_WIDTHS: readonly [384, 640, 828, 1080, 1440, 1920, 2560];
+/** One quality for every image, so each width is one cached variant rather than several. */
+export declare const SETTO_IMAGE_QUALITY = 75;
+/** The `images` block of `vercel.json` that matches `SettoImage`. */
+export declare const settoVercelImagesConfig: {
+    readonly sizes: readonly [384, 640, 828, 1080, 1440, 1920, 2560];
+    readonly qualities: readonly [75];
+    readonly formats: readonly ["image/avif", "image/webp"];
+    readonly localPatterns: readonly [{
+        readonly pathname: "^/images/.*$";
+        readonly search: "";
+    }];
+    readonly minimumCacheTTL: 2678400;
+};
+/**
+ * Whether an image can go through the optimizer: a file of this site's own,
+ * under `/images/`, in a format it transforms. A draft's `blob:` preview, an
+ * external address, an SVG logo and a moving GIF cannot.
+ */
+export declare function isOptimizable(src: string | null | undefined): src is string;
+/**
+ * Where there is no optimizer to ask: the Vite dev server and a local
+ * preview. A deployment elsewhere without one (a build sandbox) is caught by
+ * the image's own error instead.
+ */
+export declare function hasNoOptimizer(hostname: string): boolean;
+export declare function optimizedUrl(src: string, width: number): string;
+export declare function optimizedSrcSet(src: string): string;

package/dist/setto-client.js

@@ -35150,8 +35150,8 @@ function createWordRevealer(onReveal) {
 function norwegian(locale) {
   return locale.toLowerCase().startsWith("no");
 }
-function intro(locale, name2) {
-  return norwegian(locale) ? `Hei! Jeg er Barista, ${name2 ? `${name2}s` : "nettstedets"} AI-assistent. Jeg svarer ut fra det teamet har delt her, og hjelper deg videre til dem når det trengs.` : `Hello! I’m Barista, the AI assistant for ${name2 ?? "this website"}. I answer from what the team has shared here and help you reach them when needed.`;
+function intro(locale, name2, agent = "Barista") {
+  return norwegian(locale) ? `Hei! Jeg er ${agent}, ${name2 ? `${name2}s` : "nettstedets"} AI-assistent. Jeg svarer ut fra det teamet har delt her, og hjelper deg videre til dem når det trengs.` : `Hello! I’m ${agent}, the AI assistant for ${name2 ?? "this website"}. I answer from what the team has shared here and help you reach them when needed.`;
 }
 function validColor(value, fallback) {
   return value && (/^#[0-9a-f]{3,8}$/i.test(value) || /^rgba?\(/i.test(value)) ? value : fallback;
@@ -35224,6 +35224,11 @@ function BaristaIcon() {
     }
   ) });
 }
+function AgentAvatar({ url }) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [url]);
+  return url && !failed ? /* @__PURE__ */ jsx("img", { src: url, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx(BaristaIcon, {});
+}
 function PersonIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
     "path",
@@ -35828,14 +35833,17 @@ function SettoChat() {
   const locale = i18n.language || "no";
   const isNo = norwegian(locale);
   const siteName = settings?.displayName?.trim() || config.displayName?.trim() || null;
+  const agentName = settings?.agentName?.trim() || "Barista";
+  const agentAvatarUrl = settings?.agentAvatarUrl ?? null;
   const labels = isNo ? {
     open: siteName ? `Åpne chat med ${siteName}` : "Åpne chat",
     close: "Lukk chatten",
-    title: "Spør Barista",
+    title: `Spør ${agentName}`,
+    ai: "AI-assistent",
     chats: "Chats",
     newChat: "Ny chat",
     placeholder: "Hva vil du spørre om?",
-    humanPlaceholder: "Skriv til teamet · bruk @barista for AI",
+    humanPlaceholder: `Skriv til teamet · bruk @barista for ${agentName}`,
     send: "Send melding",
     sending: "Svarer …",
     attach: "Legg ved bilde",
@@ -35848,11 +35856,12 @@ function SettoChat() {
   } : {
     open: siteName ? `Open chat with ${siteName}` : "Open chat",
     close: "Close chat",
-    title: "Ask Barista",
+    title: `Ask ${agentName}`,
+    ai: "AI assistant",
     chats: "Chats",
     newChat: "New chat",
     placeholder: "What would you like to ask?",
-    humanPlaceholder: "Message the team · use @barista for AI",
+    humanPlaceholder: `Message the team · use @barista for ${agentName}`,
     send: "Send message",
     sending: "Replying …",
     attach: "Attach image",
@@ -36009,7 +36018,7 @@ function SettoChat() {
   }, [apiUrl, config.siteId, settings]);
   useEffect(() => {
     if (!mounted || !settings || conversationId.current) return;
-    const welcome = intro(locale, settings.displayName ?? void 0);
+    const welcome = intro(locale, settings.displayName ?? void 0, settings.agentName?.trim() || void 0);
     setMessages((current) => {
       if (current.length === 0) return [{ role: "assistant", content: welcome }];
       if (current.length === 1 && current[0]?.role === "assistant" && !current[0].id) {
@@ -36154,7 +36163,7 @@ function SettoChat() {
     setRealtime(null);
     setTeamTypingUntil(null);
     setHumanJoined(false);
-    setMessages([{ role: "assistant", content: intro(locale, settings?.displayName ?? void 0) }]);
+    setMessages([{ role: "assistant", content: intro(locale, settings?.displayName ?? void 0, agentName) }]);
     setDraft("");
     setQueued(false);
     setDrawer(false);
@@ -36358,7 +36367,7 @@ function SettoChat() {
                   ),
                   /* @__PURE__ */ jsxs("div", { className: "setto-chat__brand", children: [
                     /* @__PURE__ */ jsx("h2", { id: `${formId}-title`, children: labels.title }),
-                    /* @__PURE__ */ jsx("p", { children: siteName ?? "Barista" })
+                    /* @__PURE__ */ jsx("p", { children: siteName ? `${labels.ai} · ${siteName}` : labels.ai })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "button",
@@ -36391,11 +36400,11 @@ function SettoChat() {
                                   {
                                     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, {})
+                                    children: item.role === "human" && item.avatarUrl ? /* @__PURE__ */ jsx("img", { src: item.avatarUrl, alt: "" }) : item.role === "human" ? /* @__PURE__ */ jsx(PersonIcon, {}) : /* @__PURE__ */ jsx(AgentAvatar, { url: agentAvatarUrl })
                                   }
                                 ) : 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,
+                                  item.role === "assistant" || item.role === "human" ? /* @__PURE__ */ jsx("span", { className: "setto-chat__speaker", children: item.role === "human" ? item.authorName || labels.team : `${agentName} · ${labels.ai}` }) : 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(
@@ -36465,7 +36474,7 @@ function SettoChat() {
             onClick: show,
             "aria-label": labels.open,
             title: labels.open,
-            children: availability.humanAvailable && availability.avatarUrl ? /* @__PURE__ */ jsx("img", { src: availability.avatarUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(BaristaIcon, {}) })
+            children: availability.humanAvailable && availability.avatarUrl ? /* @__PURE__ */ jsx("img", { src: availability.avatarUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(AgentAvatar, { url: agentAvatarUrl }) })
           }
         ) : null
       ]
@@ -36506,7 +36515,7 @@ function useChatStyles() {
 .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:${MAX_COMPOSER_HEIGHT}px;overflow-y:auto;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 textarea::-webkit-scrollbar{width:6px}.setto-chat__composer textarea::-webkit-scrollbar-track{background:transparent}.setto-chat__composer textarea::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--setto-chat-ink) 24%,transparent)}.setto-chat__composer textarea::-webkit-scrollbar-button{display:none;height:0}@supports not selector(::-webkit-scrollbar){.setto-chat__composer textarea{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--setto-chat-ink) 24%,transparent) 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}}
+.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 span{overflow:hidden}.setto-chat__launcher span img{width:100%;height:100%}.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}}
 `;
     style.textContent += "@media(prefers-reduced-motion:reduce){.setto-chat__markdown.is-revealing .setto-chat__word{opacity:1;transform:none;filter:none;animation:none}}";
@@ -37496,6 +37505,29 @@ function SettoIcon({ k, icons, size = 24, className, style }) {
     )
   ] });
 }
+const SETTO_IMAGE_WIDTHS = [384, 640, 828, 1080, 1440, 1920, 2560];
+const SETTO_IMAGE_QUALITY = 75;
+const settoVercelImagesConfig = {
+  sizes: [...SETTO_IMAGE_WIDTHS],
+  qualities: [SETTO_IMAGE_QUALITY],
+  formats: ["image/avif", "image/webp"],
+  localPatterns: [{ pathname: "^/images/.*$", search: "" }],
+  minimumCacheTTL: 2678400
+};
+const OPTIMIZABLE = /\.(jpe?g|png|webp|avif)$/i;
+function isOptimizable(src) {
+  if (!src || !src.startsWith("/images/")) return false;
+  return OPTIMIZABLE.test(src.split(/[?#]/)[0]);
+}
+function hasNoOptimizer(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]" || hostname.endsWith(".localhost");
+}
+function optimizedUrl(src, width) {
+  return `/_vercel/image?url=${encodeURIComponent(src)}&w=${width}&q=${SETTO_IMAGE_QUALITY}`;
+}
+function optimizedSrcSet(src) {
+  return SETTO_IMAGE_WIDTHS.map((w) => `${optimizedUrl(src, w)} ${w}w`).join(", ");
+}
 const ACCEPT = "image/png,image/jpeg,image/webp,image/svg+xml";
 function setSrcAllLanguages(store, i18n, srcKey, value) {
   const langs = i18n.languages?.length ? i18n.languages : [i18n.language];
@@ -37503,9 +37535,34 @@ function setSrcAllLanguages(store, i18n, srcKey, value) {
     store.set(srcKey, lng, value);
   }
 }
+function PublishedImage({
+  src,
+  optimize,
+  sizes,
+  srcSet,
+  onError,
+  ...rest
+}) {
+  const [direct, setDirect] = useState(false);
+  const optimized = optimize && !direct && !srcSet && isOptimizable(src) && !(typeof window !== "undefined" && hasNoOptimizer(window.location.hostname));
+  if (!optimized) return /* @__PURE__ */ jsx("img", { src, srcSet, sizes, onError, ...rest });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: optimizedUrl(src, 1080),
+      srcSet: optimizedSrcSet(src),
+      sizes: sizes ?? "100vw",
+      onError: (e) => {
+        setDirect(true);
+        onError?.(e);
+      },
+      ...rest
+    }
+  );
+}
 function SettoImage({ srcKey, alt, className, style, ...rest }) {
   const { t, i18n } = useTranslation();
-  const { editMode, store, assetStore } = useSetto();
+  const { editMode, store, assetStore, config } = useSetto();
   const fileRef = useRef(null);
   const [hovered, setHovered] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -37525,7 +37582,17 @@ function SettoImage({ srcKey, alt, className, style, ...rest }) {
   const previewUrl = assetStore?.getPreviewUrl(srcKey);
   const src = previewUrl ?? srcPath;
   if (!editMode) {
-    return /* @__PURE__ */ jsx("img", { src: srcPath, alt, className, style, ...rest });
+    return /* @__PURE__ */ jsx(
+      PublishedImage,
+      {
+        src: srcPath,
+        optimize: config.images?.optimize === true,
+        alt,
+        className,
+        style,
+        ...rest
+      }
+    );
   }
   const isFullWidth = className?.includes("w-full");
   const isFullHeight = className?.includes("h-full");
@@ -40002,6 +40069,8 @@ export {
   PAGES_PATH,
   PageStore,
   SETTO_BASE,
+  SETTO_IMAGE_QUALITY,
+  SETTO_IMAGE_WIDTHS,
   SETTO_MODULES,
   SettoAdminApp,
   SettoAnimation,
@@ -40042,11 +40111,14 @@ export {
   isAdminRoute,
   isFormFieldType,
   isLinkContext,
+  isOptimizable,
   isSafeHref,
   languageFromPath,
   languageName,
   nodeChildren,
   normalisePath,
+  optimizedSrcSet,
+  optimizedUrl,
   pageById,
   pageForPath,
   pageTitleKey,
@@ -40058,6 +40130,7 @@ export {
   redirectForVisitor,
   serialiseManifest,
   settoSubmissionUrl,
+  settoVercelImagesConfig,
   siteHomeUrl,
   siteLanguages,
   useCoarsePointer,