@sevenfold/setto-client 0.2.9 → 0.3.3

package/dist/setto-client.js

@@ -20748,15 +20748,37 @@ function createApi(args) {
       if (!res.ok) throw await asError(res, "getContent failed");
       return parseJson(res);
     },
-    async publish(siteId, files, message) {
+    async publish(siteId, files, options) {
       const token = await bearer(supabase);
+      const assets = options?.assets ?? [];
+      if (assets.length === 0) {
+        const res2 = await fetch(`${apiUrl}/sites/${encodeURIComponent(siteId)}/publish`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`
+          },
+          body: JSON.stringify({ files, message: options?.message })
+        });
+        if (!res2.ok) throw await asError(res2, "publish failed");
+        return parseJson(res2);
+      }
+      const form = new FormData();
+      form.append(
+        "manifest",
+        JSON.stringify({
+          files,
+          assets: assets.map((a) => ({ path: a.repoPath })),
+          message: options?.message
+        })
+      );
+      assets.forEach((asset, index) => {
+        form.append(`asset_${index}`, asset.file, asset.file.name);
+      });
       const res = await fetch(`${apiUrl}/sites/${encodeURIComponent(siteId)}/publish`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`
-        },
-        body: JSON.stringify({ files, message })
+        headers: { Authorization: `Bearer ${token}` },
+        body: form
       });
       if (!res.ok) throw await asError(res, "publish failed");
       return parseJson(res);
@@ -20786,6 +20808,38 @@ function createApi(args) {
     }
   };
 }
+function getNested(obj, key) {
+  if (!obj || typeof obj !== "object") return void 0;
+  const parts = key.split(".");
+  let cur = obj;
+  for (const part of parts) {
+    if (!cur || typeof cur !== "object") return void 0;
+    cur = cur[part];
+  }
+  return cur;
+}
+function deleteNested(obj, key) {
+  const parts = key.split(".");
+  let cur = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i];
+    const next = cur[part];
+    if (!next || typeof next !== "object") return;
+    cur = next;
+  }
+  delete cur[parts[parts.length - 1]];
+}
+function collectKeysUnder(obj, prefix) {
+  const base = getNested(obj, prefix);
+  if (!base || typeof base !== "object" || Array.isArray(base)) return [];
+  return Object.keys(base).sort(compareListKeys);
+}
+function compareListKeys(a, b) {
+  const na = Number(a);
+  const nb = Number(b);
+  if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
+  return a.localeCompare(b);
+}
 const EMPTY_I18N_STORE_SNAPSHOT = {
   drafts: /* @__PURE__ */ new Map(),
   version: 0
@@ -20875,6 +20929,49 @@ class I18nStore {
   size() {
     return this.drafts.size;
   }
+  /** Returns sorted item keys under a list prefix, e.g. `faq.items` → ['1','2',…]. */
+  getListKeys(prefix, lng) {
+    const bundle = this.i18n.getResourceBundle(lng, this.ns);
+    return collectKeysUnder(bundle, prefix);
+  }
+  /**
+   * Adds a new list item under `prefix` with the given field defaults.
+   * Adds the same key across all loaded languages.
+   */
+  addListItem(prefix, _lng, template) {
+    const langs = this.i18n.languages?.length ? this.i18n.languages : [_lng];
+    const allKeys = langs.flatMap((l) => this.getListKeys(prefix, l));
+    const numeric = allKeys.map(Number).filter((n) => !Number.isNaN(n));
+    const nextKey = numeric.length > 0 ? String(Math.max(...numeric) + 1) : "1";
+    for (const lang of langs) {
+      for (const [field, value] of Object.entries(template)) {
+        this.set(`${prefix}.${nextKey}.${field}`, lang, value);
+      }
+    }
+    return nextKey;
+  }
+  /** Removes a list item and all nested keys under `prefix.itemKey` in every language. */
+  removeListItem(prefix, itemKey, _lng) {
+    const langs = this.i18n.languages?.length ? this.i18n.languages : [_lng];
+    for (const lang of langs) {
+      const bundle = this.i18n.getResourceBundle(lang, this.ns) ?? {};
+      const item = getNested(bundle, `${prefix}.${itemKey}`);
+      if (!item || typeof item !== "object") continue;
+      for (const field of Object.keys(item)) {
+        const fullKey = `${prefix}.${itemKey}.${field}`;
+        const id = `${lang}::${fullKey}`;
+        this.drafts.delete(id);
+      }
+      deleteNested(bundle, `${prefix}.${itemKey}`);
+      this.i18n.addResourceBundle(lang, this.ns, bundle, true, true);
+    }
+    this.i18n.emit("languageChanged", this.i18n.language);
+    this.bump();
+  }
+  /** Re-sorts list keys after removal (optional compaction — not used by default). */
+  sortListKeys(prefix, lng) {
+    return this.getListKeys(prefix, lng).sort(compareListKeys);
+  }
   /**
    * Serialises the full resource bundle per language as it currently looks in
    * i18next (with drafts applied). Used as the payload for /publish.
@@ -20896,6 +20993,93 @@ class I18nStore {
     for (const fn of this.listeners) fn(this.cachedSnapshot);
   }
 }
+const SETTO_IMAGE_REPO_DIR = "public/images/setto";
+const SETTO_IMAGE_URL_PREFIX = "/images/setto";
+const MIME_EXT = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp",
+  "image/svg+xml": "svg"
+};
+function extensionFromMime(mime) {
+  return MIME_EXT[mime] ?? "bin";
+}
+function generateSettoImagePaths(srcKey, file) {
+  const ext = extensionFromMime(file.type);
+  const slug = srcKey.replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-|-$/g, "") || "image";
+  const name = `${slug}-${Date.now()}.${ext}`;
+  return {
+    repoPath: `${SETTO_IMAGE_REPO_DIR}/${name}`,
+    publicPath: `${SETTO_IMAGE_URL_PREFIX}/${name}`
+  };
+}
+class AssetStore {
+  drafts = /* @__PURE__ */ new Map();
+  version = 0;
+  listeners = /* @__PURE__ */ new Set();
+  cachedSnapshot = {
+    drafts: this.drafts,
+    version: 0
+  };
+  snapshot() {
+    return this.cachedSnapshot;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /** Returns a preview URL if a draft exists for this src key. */
+  getPreviewUrl(srcKey) {
+    return this.drafts.get(srcKey)?.previewUrl ?? null;
+  }
+  async set(args) {
+    const existing = this.drafts.get(args.srcKey);
+    if (existing) URL.revokeObjectURL(existing.previewUrl);
+    const previewUrl = URL.createObjectURL(args.file);
+    this.drafts.set(args.srcKey, {
+      srcKey: args.srcKey,
+      repoPath: args.repoPath,
+      publicPath: args.publicPath,
+      originalPublicPath: args.originalPublicPath,
+      file: args.file,
+      previewUrl
+    });
+    this.bump();
+  }
+  revert(srcKey) {
+    const draft = this.drafts.get(srcKey);
+    if (!draft) return null;
+    URL.revokeObjectURL(draft.previewUrl);
+    const original = draft.originalPublicPath;
+    this.drafts.delete(srcKey);
+    this.bump();
+    return original;
+  }
+  revertAll() {
+    for (const draft of this.drafts.values()) {
+      URL.revokeObjectURL(draft.previewUrl);
+    }
+    this.drafts.clear();
+    this.bump();
+  }
+  commit() {
+    this.revertAll();
+  }
+  size() {
+    return this.drafts.size;
+  }
+  pendingAssets() {
+    return Array.from(this.drafts.values());
+  }
+  static isValidRepoPath(path) {
+    return path.startsWith(`${SETTO_IMAGE_REPO_DIR}/`);
+  }
+  bump() {
+    this.version += 1;
+    this.cachedSnapshot = { drafts: this.drafts, version: this.version };
+    for (const fn of this.listeners) fn(this.cachedSnapshot);
+  }
+}
 const EMPTY_THEME_STORE_SNAPSHOT = {
   version: 0
 };
@@ -21967,7 +22151,7 @@ function useEditBaseline() {
   }, [session, store, config.siteId]);
 }
 function EditToolbar() {
-  const { store, themeStore, api, config, supabase } = useSetto();
+  const { store, themeStore, assetStore, api, config, supabase } = useSetto();
   const { i18n } = useTranslation();
   useEditBaseline();
   const snap = useSyncExternalStore(
@@ -21982,6 +22166,12 @@ function EditToolbar() {
     () => themeStore?.snapshot().version ?? 0,
     () => 0
   );
+  useSyncExternalStore(
+    (cb) => assetStore?.subscribe(() => cb()) ?? (() => {
+    }),
+    () => assetStore?.snapshot().version ?? 0,
+    () => 0
+  );
   const [publishing, setPublishing] = useState(false);
   const [activeDeployment, setActiveDeployment] = useState(null);
   const [publishDialogOpen, setPublishDialogOpen] = useState(false);
@@ -22013,7 +22203,8 @@ function EditToolbar() {
   }, [api, supabase, config.siteId]);
   const textDraftCount = snap.drafts.size;
   const themeDraftCount = themeStore?.size() ?? 0;
-  const draftCount = textDraftCount + themeDraftCount;
+  const assetDraftCount = assetStore?.size() ?? 0;
+  const draftCount = textDraftCount + themeDraftCount + assetDraftCount;
   const hasDrafts = draftCount > 0;
   const showToolbarProgress = activeDeployment !== null && !publishDialogOpen && deploymentRow !== null && isDeploymentInProgress(deploymentRow.status) && !isDeploymentStale(deploymentRow);
   const showPublishedNotice = publishedNotice && !publishDialogOpen;
@@ -22109,9 +22300,33 @@ function EditToolbar() {
           content: JSON.stringify(themeStore.serialise(), null, 2) + "\n"
         });
       }
+      if (assetStore && assetDraftCount > 0) {
+        const result2 = await api.publish(config.siteId, files, {
+          assets: assetStore.pendingAssets()
+        });
+        store.commit();
+        themeStore?.commit();
+        assetStore.commit();
+        let deploymentId2 = result2.deploymentId;
+        if (!deploymentId2 && result2.trackingDeferred) {
+          deploymentId2 = await waitForDeploymentByCommit(
+            supabase,
+            config.siteId,
+            result2.commitSha
+          );
+        }
+        if (deploymentId2) {
+          setActiveDeployment(deploymentId2);
+        } else {
+          setPublishDialogOpen(false);
+          setPublishedNotice(true);
+        }
+        return;
+      }
       const result = await api.publish(config.siteId, files);
       store.commit();
       themeStore?.commit();
+      assetStore?.commit();
       let deploymentId = result.deploymentId;
       if (!deploymentId && result.trackingDeferred) {
         deploymentId = await waitForDeploymentByCommit(
@@ -22452,11 +22667,13 @@ function SettoProvider({ config, children }) {
   const { i18n } = useTranslation();
   const storeRef = useRef(null);
   const themeStoreRef = useRef(null);
+  const assetStoreRef = useRef(null);
   const [storeReady, setStoreReady] = useState(false);
   useEffect(() => {
     if (!i18n) return;
     storeRef.current = new I18nStore(i18n);
     themeStoreRef.current = new ThemeStore(config.theme ?? {});
+    assetStoreRef.current = new AssetStore();
     setStoreReady(true);
   }, [i18n, config.theme]);
   const editMode = !!session && editParam;
@@ -22468,7 +22685,8 @@ function SettoProvider({ config, children }) {
     authLoading,
     editMode,
     store: storeReady ? storeRef.current : null,
-    themeStore: storeReady ? themeStoreRef.current : null
+    themeStore: storeReady ? themeStoreRef.current : null,
+    assetStore: storeReady ? assetStoreRef.current : null
   };
   return /* @__PURE__ */ jsx(SettoContext.Provider, { value, children: /* @__PURE__ */ jsx(SectionEditProvider, { children: editMode && value.store ? /* @__PURE__ */ jsx(EditModeShell, { themeStore: value.themeStore, children }) : children }) });
 }
@@ -22659,6 +22877,15 @@ function T({ k }) {
   const handleInput = (e) => {
     store?.set(k, i18n.language, e.currentTarget.textContent ?? "");
   };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text/plain");
+    if (!text) return;
+    const el = e.currentTarget;
+    el.focus();
+    document.execCommand("insertText", false, text);
+    store?.set(k, i18n.language, el.textContent ?? "");
+  };
   const lang = toBcp47(i18n.language);
   const showLinkChip = coarsePointer && focused && linkContext;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -22679,6 +22906,7 @@ function T({ k }) {
         },
         onBlur: handleBlur,
         onInput: handleInput,
+        onPaste: handlePaste,
         onMouseDown: handleMouseDown,
         onMouseUp: handleMouseUp,
         onClick: handleClick,
@@ -22706,6 +22934,9 @@ function toBcp47(code) {
 function isTextEditClick(target) {
   if (target.closest("[data-setto-key]")) return true;
   if (target.closest("[data-setto-ui]")) return true;
+  if (target.closest("[data-setto-icon]")) return true;
+  if (target.closest("[data-setto-image]")) return true;
+  if (target.closest("[data-setto-repeater]")) return true;
   let node = target;
   while (node) {
     if (node.matches("h1,h2,h3,h4,h5,h6,p,li,figcaption") && node.querySelector("[data-setto-key]")) {
@@ -22821,6 +23052,502 @@ const SettoBlock = forwardRef(
     );
   }
 );
+function FloatingPopover({
+  open,
+  anchorRef,
+  onClose,
+  ariaLabel,
+  children,
+  style,
+  minWidth = 280
+}) {
+  const popoverRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!open || !anchorRef.current) {
+      setPos(null);
+      return;
+    }
+    const update = () => {
+      const anchor = anchorRef.current;
+      const pop = popoverRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const popoverH = pop?.offsetHeight ?? 200;
+      const popoverW = pop?.offsetWidth ?? minWidth;
+      let top = rect.bottom + 6;
+      let left = rect.left;
+      if (left + popoverW > window.innerWidth - 8) {
+        left = window.innerWidth - popoverW - 8;
+      }
+      if (left < 8) left = 8;
+      if (top + popoverH > window.innerHeight - 8) {
+        top = rect.top - popoverH - 6;
+      }
+      if (top < TOOLBAR_HEIGHT + 4) top = rect.bottom + 6;
+      setPos({ top, left });
+    };
+    update();
+    requestAnimationFrame(update);
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorRef, minWidth]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      const target = e.target;
+      if (anchorRef.current?.contains(target)) return;
+      if (popoverRef.current?.contains(target)) return;
+      onClose();
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [open, onClose, anchorRef]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: popoverRef,
+        role: "dialog",
+        "aria-label": ariaLabel,
+        "data-setto-ui": true,
+        style: {
+          position: "fixed",
+          top: pos?.top ?? -9999,
+          left: pos?.left ?? 0,
+          visibility: pos ? "visible" : "hidden",
+          zIndex: 2147483647,
+          background: "#fff",
+          border: "1px solid #e0e0e0",
+          borderRadius: 8,
+          boxShadow: "0 8px 24px rgba(0,0,0,0.15)",
+          fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+          ...style
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        onClick: (e) => e.stopPropagation(),
+        children
+      }
+    ),
+    document.body
+  );
+}
+function SettoIcon({ k, icons, size = 24, className, style }) {
+  const { t, i18n } = useTranslation();
+  const { editMode, store } = useSetto();
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (!store) return;
+    return store.subscribe(() => force((x) => x + 1));
+  }, [store]);
+  const iconName = store ? store.get(k, i18n.language) : t(k);
+  const Icon = icons[iconName] ?? icons[Object.keys(icons)[0] ?? ""] ?? null;
+  if (!Icon) return null;
+  if (!editMode) {
+    return /* @__PURE__ */ jsx(Icon, { size, className, style });
+  }
+  const handleClick = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setOpen((v) => !v);
+  };
+  const filtered = Object.entries(icons).filter(
+    ([name]) => name.toLowerCase().includes(search.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: anchorRef,
+        "data-setto-icon": true,
+        "data-setto-key": k,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Velg ikon",
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setOpen((v) => !v);
+          }
+        },
+        style: {
+          display: "inline-flex",
+          cursor: "pointer",
+          outline: open ? "2px solid #640AFF" : void 0,
+          outlineOffset: 2,
+          borderRadius: 4
+        },
+        children: /* @__PURE__ */ jsx(Icon, { size, className, style })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      FloatingPopover,
+      {
+        open,
+        anchorRef,
+        onClose: () => {
+          setOpen(false);
+          setSearch("");
+        },
+        ariaLabel: "Ikonvelger",
+        minWidth: 320,
+        style: { padding: 12, maxWidth: 360 },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "search",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              placeholder: "Søk ikon…",
+              "data-setto-ui": true,
+              style: {
+                width: "100%",
+                boxSizing: "border-box",
+                padding: "8px 10px",
+                marginBottom: 10,
+                border: "1px solid #e0e0e0",
+                borderRadius: 6,
+                fontSize: 13
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(6, 1fr)",
+                gap: 4,
+                maxHeight: 240,
+                overflowY: "auto"
+              },
+              children: filtered.map(([name, Item]) => {
+                const selected = name === iconName;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    title: name,
+                    "data-setto-ui": true,
+                    onClick: () => {
+                      store?.set(k, i18n.language, name);
+                      setOpen(false);
+                      setSearch("");
+                    },
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: 8,
+                      background: selected ? "#f5f3ff" : "transparent",
+                      border: selected ? "1px solid #640AFF" : "1px solid transparent",
+                      borderRadius: 6,
+                      cursor: "pointer",
+                      color: style?.color ?? "currentColor"
+                    },
+                    children: /* @__PURE__ */ jsx(Item, { size: 20 })
+                  },
+                  name
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+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];
+  for (const lng of langs) {
+    store.set(srcKey, lng, value);
+  }
+}
+function SettoImage({ srcKey, alt, className, style, ...rest }) {
+  const { t, i18n } = useTranslation();
+  const { editMode, store, assetStore } = useSetto();
+  const fileRef = useRef(null);
+  const [hovered, setHovered] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (!store) return;
+    return store.subscribe(() => force((x) => x + 1));
+  }, [store]);
+  const [, forceAssets] = useState(0);
+  useEffect(() => {
+    if (!assetStore) return;
+    return assetStore.subscribe(() => forceAssets((x) => x + 1));
+  }, [assetStore]);
+  const srcPath = store ? store.get(srcKey, i18n.language) : t(srcKey);
+  const previewUrl = assetStore?.getPreviewUrl(srcKey);
+  const src = previewUrl ?? srcPath;
+  if (!editMode) {
+    return /* @__PURE__ */ jsx("img", { src: srcPath, alt, className, style, ...rest });
+  }
+  const isFullWidth = className?.includes("w-full");
+  const isFullHeight = className?.includes("h-full");
+  const openFilePicker = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!uploading) fileRef.current?.click();
+  };
+  const handleFile = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file || !assetStore || !store) return;
+    setUploading(true);
+    try {
+      const originalPublicPath = store.original(srcKey, i18n.language);
+      const { repoPath, publicPath } = generateSettoImagePaths(srcKey, file);
+      await assetStore.set({
+        srcKey,
+        originalPublicPath,
+        repoPath,
+        publicPath,
+        file
+      });
+      setSrcAllLanguages(store, i18n, srcKey, publicPath);
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleRevert = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!assetStore || !store) return;
+    const original = assetStore.revert(srcKey);
+    if (original !== null) {
+      setSrcAllLanguages(store, i18n, srcKey, original);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-setto-image": true,
+        "data-setto-ui": true,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          display: isFullWidth || isFullHeight ? "block" : "inline-block",
+          width: isFullWidth ? "100%" : void 0,
+          height: isFullHeight ? "100%" : void 0,
+          position: "relative",
+          outline: hovered ? "2px solid #640AFF" : void 0,
+          outlineOffset: 2,
+          borderRadius: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx("img", { src, alt, className, style, ...rest }),
+          previewUrl && !hovered ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              "data-setto-ui": true,
+              style: {
+                position: "absolute",
+                top: 4,
+                right: 4,
+                background: "#640AFF",
+                color: "#fff",
+                fontSize: 10,
+                padding: "2px 6px",
+                borderRadius: 4,
+                fontFamily: "system-ui, sans-serif",
+                pointerEvents: "none"
+              },
+              children: "Nytt bilde"
+            }
+          ) : null,
+          hovered ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-setto-ui": true,
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 8,
+                background: "rgba(0, 0, 0, 0.45)",
+                borderRadius: 4
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-setto-ui": true,
+                    disabled: uploading,
+                    onClick: openFilePicker,
+                    onMouseDown: (e) => e.stopPropagation(),
+                    style: {
+                      padding: "10px 18px",
+                      background: "#fff",
+                      color: "#222",
+                      border: "none",
+                      borderRadius: 6,
+                      fontSize: 13,
+                      fontWeight: 500,
+                      fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+                      cursor: uploading ? "wait" : "pointer",
+                      boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
+                    },
+                    children: uploading ? "Laster opp…" : "Velg fil…"
+                  }
+                ),
+                previewUrl ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "data-setto-ui": true,
+                    disabled: uploading,
+                    onClick: handleRevert,
+                    onMouseDown: (e) => e.stopPropagation(),
+                    style: {
+                      padding: "6px 12px",
+                      background: "transparent",
+                      color: "#fff",
+                      border: "1px solid rgba(255,255,255,0.6)",
+                      borderRadius: 6,
+                      fontSize: 12,
+                      fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+                      cursor: uploading ? "wait" : "pointer"
+                    },
+                    children: "Angre"
+                  }
+                ) : null
+              ]
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileRef,
+        type: "file",
+        accept: ACCEPT,
+        hidden: true,
+        onChange: handleFile
+      }
+    )
+  ] });
+}
+function SettoRepeater({
+  itemsKey,
+  defaultItem,
+  itemLabel = "element",
+  children,
+  className
+}) {
+  const { i18n } = useTranslation();
+  const { editMode, store } = useSetto();
+  const lng = i18n.language;
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (!store) return;
+    return store.subscribe(() => force((x) => x + 1));
+  }, [store]);
+  const keys = store ? store.getListKeys(itemsKey, lng) : [];
+  const handleAdd = () => {
+    store?.addListItem(itemsKey, lng, defaultItem);
+  };
+  const handleRemove = (itemKey) => {
+    if (keys.length <= 1) return;
+    store?.removeListItem(itemsKey, itemKey, lng);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, "data-setto-repeater": true, children: [
+    editMode ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-setto-ui": true,
+        style: {
+          display: "flex",
+          justifyContent: "flex-end",
+          marginBottom: 8,
+          gap: 8
+        },
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-setto-ui": true,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleAdd();
+            },
+            style: controlBtnStyle,
+            children: [
+              "+ Legg til ",
+              itemLabel
+            ]
+          }
+        )
+      }
+    ) : null,
+    keys.map((itemKey, index) => /* @__PURE__ */ jsxs("div", { className: "setto-repeater-item", style: { position: "relative" }, children: [
+      editMode ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-setto-ui": true,
+          "aria-label": `Fjern ${itemLabel}`,
+          disabled: keys.length <= 1,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleRemove(itemKey);
+          },
+          style: {
+            ...controlBtnStyle,
+            position: "absolute",
+            top: 0,
+            right: 0,
+            zIndex: 2,
+            padding: "4px 8px",
+            fontSize: 11,
+            opacity: keys.length <= 1 ? 0.4 : 1
+          },
+          children: "× Fjern"
+        }
+      ) : null,
+      children(itemKey, index)
+    ] }, itemKey))
+  ] });
+}
+const controlBtnStyle = {
+  padding: "6px 10px",
+  background: "#f7f7f7",
+  border: "1px solid #e0e0e0",
+  borderRadius: 6,
+  fontSize: 12,
+  color: "#444",
+  cursor: "pointer",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif'
+};
 function editModeUrl(pathname = "/") {
   const u = new URL(window.location.href);
   u.pathname = pathname;
@@ -23460,7 +24187,10 @@ export {
   AuthGate,
   SettoAdminApp,
   SettoBlock,
+  SettoIcon,
+  SettoImage,
   SettoProvider,
+  SettoRepeater,
   SettoSection,
   T,
   useSectionTheme,