@osimart/create-storefront 1.0.12 → 1.0.13

package/app/logic/components/PopupDiscount.js

@@ -0,0 +1,51 @@
+/**
+ * DISCOUNT_CODE — a code to copy, in a popup.
+ *
+ *   REVEAL  ALWAYS, or AFTER_SIGNUP: hidden until the popup's Email signup
+ *           succeeds (inject 'osiPopup'), then it appears as the reward. The
+ *           editor always shows it, tagged "After signing up".
+ *   STYLE   DASHED (a coupon), SOLID, MINIMAL.
+ *
+ * Copy uses the Clipboard API, with a select-the-text fallback.
+ */
+export default function useLogic({ props }) {
+  const t = useT();
+  const popup = inject("osiPopup", null);
+
+  const s = computed(() => props.node.s ?? {});
+  const code = computed(() => String(s.value.CODE || "").trim());
+  const afterSignup = computed(() => String(s.value.REVEAL || "ALWAYS").toUpperCase() === "AFTER_SIGNUP");
+  const preview = computed(() => !!popup?.preview?.value);
+  const visible = computed(() => !!code.value && (!afterSignup.value || preview.value || !!popup?.subscribed?.value));
+  const style = computed(() => String(s.value.STYLE || "DASHED").toLowerCase());
+
+  const label = computed(() => t(s.value.LABEL) || "");
+  const copyLabel = computed(() => t(s.value.COPY_LABEL) || "Copy");
+  const copiedLabel = computed(() => t(s.value.COPIED_LABEL) || "Copied!");
+
+  const codeEl = ref(null);
+  const copied = ref(false);
+  let timer = null;
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(code.value);
+    } catch {
+      // No clipboard access (http, old browser): select it for Ctrl/Cmd+C.
+      const el = unref(codeEl);
+      if (el) {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    }
+    copied.value = true;
+    clearTimeout(timer);
+    timer = setTimeout(() => (copied.value = false), 2200);
+  }
+  onBeforeUnmount(() => clearTimeout(timer));
+
+  return { s, code, afterSignup, preview, visible, style, label, copyLabel, copiedLabel, codeEl, copied, copy };
+}

package/app/logic/components/PopupNewsletter.js

@@ -0,0 +1,66 @@
+import NewsletterServices from "#osi/services/NewsletterServices";
+
+/**
+ * NEWSLETTER_FORM — the popup's email signup (PopupSection's content tree).
+ *
+ * Subscribes through the same endpoint as the Newsletter section
+ * (NewsletterServices), with source "POPUP:<popup name>" so sign-ups can be
+ * told apart. On success it tells the popup (inject 'osiPopup'), which
+ * remembers it — the popup stops showing, an AFTER_SIGNUP discount code
+ * appears — and swaps the form for SUCCESS_HEADING / SUCCESS_MESSAGE.
+ *
+ * The editor never signs anyone up: submitting there shows the success view,
+ * so it can be checked.
+ */
+export default function useLogic({ props }) {
+  const t = useT();
+  const analytics = useAnalytics();
+  const { showApiError } = useApiErrorToast();
+  const popup = inject("osiPopup", null);
+
+  const s = computed(() => props.node.s ?? {});
+  const stacked = computed(() => String(s.value.LAYOUT || "INLINE").toUpperCase() === "STACKED");
+  const fullWidth = computed(() => s.value.FULL_WIDTH !== false);
+
+  const email = ref("");
+  const submitting = ref(false);
+  const error = ref("");
+  const done = ref(false);
+  // Signed up before (this browser): straight to the thank-you.
+  const success = computed(() => done.value || !!popup?.subscribed?.value);
+
+  const placeholder = computed(() => t(s.value.PLACEHOLDER) || "Enter your email");
+  const buttonLabel = computed(() => t(s.value.BUTTON_LABEL) || "Subscribe");
+  const successHeading = computed(() => t(s.value.SUCCESS_HEADING) || "");
+  const successMessage = computed(() => t(s.value.SUCCESS_MESSAGE) || "");
+  const consent = computed(() => t(s.value.CONSENT_TEXT) || "");
+
+  const inputId = `pp-email-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+
+  async function submit() {
+    error.value = "";
+    const value = email.value.trim();
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+      error.value = value ? "Enter a valid email address." : "Enter your email address.";
+      return;
+    }
+    if (popup?.preview?.value) {
+      done.value = true;
+      return;
+    }
+    submitting.value = true;
+    try {
+      await NewsletterServices.subscribe(value, popup?.source?.value ?? "POPUP");
+      analytics?.lead?.("popup");
+      done.value = true;
+      email.value = "";
+      popup?.markSubscribed?.();
+    } catch (err) {
+      error.value = showApiError(err, "Couldn't subscribe right now.");
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  return { s, stacked, fullWidth, email, submitting, error, success, placeholder, buttonLabel, successHeading, successMessage, consent, inputId, submit };
+}

package/app/logic/layouts/default.js

@@ -48,6 +48,12 @@ const list = (sectionGroups.value?.header ?? []).filter((s) => !s.disabled);
       ? (sectionGroups.value?.footer ?? []).filter((s) => !s.disabled)
       : []
   );
+  // The overlay group (popups): over every full page — never checkout.
+  const overlaySections = computed(() =>
+    chrome.value === "full"
+      ? (sectionGroups.value?.overlay ?? []).filter((s) => !s.disabled)
+      : []
+  );
 
   // Drawers are useState-backed so they survive the page component swapping out.
   // That's deliberate, and it means navigation has to close them explicitly.
@@ -62,5 +68,5 @@ const list = (sectionGroups.value?.header ?? []).filter((s) => !s.disabled);
     eventBus.off("cartUpdated", fetchCart);
   });
 
-  return { route, closeAll, fetchCart, chrome, showHeader, showFooter, showNav, sectionGroups, isPreview, headerSections, footerSections, resolveSection };
-}
+  return { route, closeAll, fetchCart, chrome, showHeader, showFooter, showNav, sectionGroups, isPreview, headerSections, footerSections, overlaySections, resolveSection };
+}

package/app/logic/sections/PopupSection.js

@@ -0,0 +1,578 @@
+import { PopupNewsletter, PopupDiscount, FooterBlock } from "#components";
+
+/**
+ * POPUP — Shopify's overlay-group popup (OVERLAY_GROUP, over every page).
+ *
+ *   when      TRIGGER: DELAY (DELAY s) | SCROLL (SCROLL_PERCENT %) |
+ *             EXIT (leaving: the pointer heads for the tab bar; on phones, a
+ *             quick scroll back up) | MANUAL (a link / the teaser only).
+ *             Any link to #popup-<POPUP_ID> opens it, whatever the trigger.
+ *   how often FREQUENCY: ALWAYS (every page — nothing stored: closing it
+ *             lasts until the next page) | SESSION (every visit) | DAYS
+ *             (FREQUENCY_DAYS) | ONCE, counted from when it was closed;
+ *             HIDE_AFTER_SIGNUP stops it for good once the visitor signs up.
+ *             Kept in the visitor's browser (localStorage / sessionStorage),
+ *             per popup — except ALWAYS.
+ *   who       AUDIENCE (EVERYONE | GUESTS), DEVICES (ALL | DESKTOP | MOBILE),
+ *             PAGES (ALL | HOME | NOT_HOME). The layout never draws it on
+ *             checkout.
+ *   teaser    its own block (POPUP_TEASER): the button that reopens it —
+ *             once closed (SHOW AFTER_CLOSE) or until it opens (ALWAYS); for
+ *             MANUAL always. Text + icon / image or custom HTML; pill, edge
+ *             tab, round badge or card; colours; an animation (pulse, bounce,
+ *             wiggle, shine, float) non-stop, every few seconds or once; its
+ *             own scoped Custom CSS. Gone once the visitor signs up or hides
+ *             it. Selected in the editor, it shows on its own (popup closed).
+ *
+ * One popup at a time: an automatic trigger waits while another is open.
+ *
+ * The editor: nothing opens by itself. The popup is open while it — or any
+ * of its blocks — is selected, so it can be designed in place; its close
+ * button closes it until the selection changes.
+ *
+ * Blocks are a content tree (Text, Button, Image, Icon, Spacer, Groups) plus
+ * NEWSLETTER_FORM, DISCOUNT_CODE (PopupNewsletter / PopupDiscount) and the
+ * footer's social links. Those two share state through provide('osiPopup'):
+ * signing up flips `subscribed`, which reveals an AFTER_SIGNUP code.
+ */
+const STORAGE = "osi-popup:";
+
+function readJSON(storage, key) {
+  try {
+    return JSON.parse(storage.getItem(key) || "null");
+  } catch {
+    return null;
+  }
+}
+function writeJSON(storage, key, value) {
+  try {
+    storage.setItem(key, JSON.stringify(value));
+  } catch {
+    /* private mode / blocked: the popup just isn't remembered */
+  }
+}
+
+export default function useLogic({ props, panelEl }) {
+  const t = useT();
+  const route = useRoute();
+  const { mediaUrl } = useMediaUrl();
+  const { isLoggedIn } = useAuth();
+  const { isPreview, selectedKey } = useBuilderPreview();
+
+  const s = computed(() => props.section.settings ?? {});
+  const upper = (v, d) => String(v || d).toUpperCase();
+  const num = (v, d) => (v !== "" && v != null && Number.isFinite(Number(v)) ? Number(v) : d);
+
+  const id = computed(() => String(s.value.POPUP_ID || props.section.key || "popup").trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-"));
+  const storeKey = computed(() => `${STORAGE}${props.section.key || id.value}`);
+
+  /* ---------------------------------------------------------------- look */
+
+  const placement = computed(() => {
+    const v = upper(s.value.PLACEMENT, "CENTER");
+    return ["CENTER", "BOTTOM_RIGHT", "BOTTOM_LEFT", "BOTTOM"].includes(v) ? v : "CENTER";
+  });
+  const sheetOnMobile = computed(() => upper(s.value.MOBILE_STYLE, "SHEET") === "SHEET");
+  const modal = computed(() => placement.value === "CENTER");
+  const scheme = useColorScheme(computed(() => s.value.COLOR_SCHEME));
+
+  const image = computed(() => mediaUrl(s.value.IMAGE));
+  const imagePosition = computed(() => {
+    const v = upper(s.value.IMAGE_POSITION, "LEFT");
+    // A bar has no room beside or above: the image goes behind it.
+    if (placement.value === "BOTTOM" && v !== "BACKGROUND") return "LEFT";
+    return ["LEFT", "RIGHT", "TOP", "BACKGROUND"].includes(v) ? v : "LEFT";
+  });
+
+  const { tree } = useContentTree(() => props.section, {
+    // Getters: read inside the tree's computed, so they stay live.
+    rootDefaults: {
+      get DIRECTION() {
+        return placement.value === "BOTTOM" ? "HORIZONTAL" : "VERTICAL";
+      },
+      ALIGNMENT: "CENTER",
+      GAP: 14,
+    },
+    custom: {
+      NEWSLETTER_FORM: PopupNewsletter,
+      DISCOUNT_CODE: PopupDiscount,
+      FOOTER_SOCIAL: FooterBlock,
+    },
+    index: () => 99,
+  });
+
+  /** The first text block, as the dialog's accessible name. */
+  const label = computed(() => {
+    const text = (props.section.blocks ?? []).find((b) => b.type === "TEXT" && !b.disabled);
+    const html = t(text?.settings?.TEXT) || "";
+    return html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim() || "Popup";
+  });
+
+  const vars = computed(() => {
+    const v = s.value;
+    return {
+      ...scheme.value.style,
+      "--pp-w": `${num(v.WIDTH, 760)}px`,
+      "--pp-pad": `${num(v.PADDING, 40)}px`,
+      "--pp-pad-m": `${num(v.PADDING_MOBILE, 24)}px`,
+      "--pp-radius": `${num(v.RADIUS, 16)}px`,
+      "--pp-img-w": `${num(v.IMAGE_WIDTH, 45)}%`,
+      "--pp-img-h": `${num(v.IMAGE_HEIGHT, 200)}px`,
+      "--pp-img-dim": String(num(v.IMAGE_OVERLAY, 40) / 100),
+      "--pp-backdrop": String(num(v.BACKDROP_OPACITY, 55) / 100),
+    };
+  });
+
+  const panelClasses = computed(() => [
+    `at-${placement.value.toLowerCase().replace("_", "-")}`,
+    `anim-${upper(s.value.ANIMATION, "RISE").toLowerCase()}`,
+    {
+      "sheet-mobile": sheetOnMobile.value,
+      "has-image": !!image.value,
+      [`img-${imagePosition.value.toLowerCase()}`]: !!image.value,
+      "img-hide-mobile": !!image.value && s.value.IMAGE_ON_MOBILE === false,
+      "close-plain": upper(s.value.CLOSE_STYLE, "ROUND") === "PLAIN",
+    },
+  ]);
+  const blurBackdrop = computed(() => s.value.BACKDROP_BLUR !== false);
+  const dismissLabel = computed(() => t(s.value.DISMISS_LABEL) || "");
+  const transitionName = computed(() => `osi-pp-${upper(s.value.ANIMATION, "RISE").toLowerCase()}`);
+
+  /* ------------------------------------------------------------ memory */
+
+  const mounted = ref(false);
+  const isPhone = ref(false); // a phone-sized screen (client only)
+  const memory = ref({ closedAt: 0, subscribed: false, teaserHidden: false });
+  const closedThisSession = ref(false);
+  // Closed / teaser hidden on this page only (ALWAYS, REMEMBER_HIDDEN off):
+  // forgotten on the next page.
+  const closedThisPage = ref(false);
+  const teaserHiddenThisPage = ref(false);
+
+  function loadMemory() {
+    memory.value = { closedAt: 0, subscribed: false, teaserHidden: false, ...(readJSON(localStorage, storeKey.value) ?? {}) };
+    closedThisSession.value = !!readJSON(sessionStorage, storeKey.value);
+  }
+  function remember(patch) {
+    memory.value = { ...memory.value, ...patch };
+    writeJSON(localStorage, storeKey.value, memory.value);
+  }
+
+  const subscribed = computed(() => !!memory.value.subscribed);
+  const doneForGood = computed(() => subscribed.value && s.value.HIDE_AFTER_SIGNUP !== false);
+
+  /** May an automatic trigger open it now? (A link always may.) */
+  const dueAgain = computed(() => {
+    if (doneForGood.value) return false;
+    const freq = upper(s.value.FREQUENCY, "DAYS");
+    if (freq === "ALWAYS") return !closedThisPage.value;
+    const closedAt = memory.value.closedAt || 0;
+    if (freq === "SESSION") return !closedThisSession.value;
+    if (freq === "ONCE") return !closedAt;
+    if (!closedAt) return true;
+    return Date.now() - closedAt > num(s.value.FREQUENCY_DAYS, 7) * 86400000;
+  });
+
+  /* ---------------------------------------------------------- targeting */
+
+  const onThisPage = computed(() => {
+    const home = route.path === "/" || route.path === "";
+    const pages = upper(s.value.PAGES, "ALL");
+    if (pages === "HOME") return home;
+    if (pages === "NOT_HOME") return !home;
+    return true;
+  });
+  function deviceMatches() {
+    const devices = upper(s.value.DEVICES, "ALL");
+    if (devices === "ALL" || !import.meta.client) return true;
+    const phone = window.matchMedia("(max-width: 767px)").matches;
+    return devices === "MOBILE" ? phone : !phone;
+  }
+  const audienceMatches = computed(() => upper(s.value.AUDIENCE, "EVERYONE") !== "GUESTS" || !isLoggedIn.value);
+
+  /* -------------------------------------------------------------- state */
+
+  // Which popup is open, across the overlay group: one at a time.
+  const openPopup = useState("osi-popup-open", () => null);
+  const open = computed(() => openPopup.value === props.section.key);
+
+  // The editor: open while selected; × closes it until the selection moves.
+  const editorClosed = ref(false);
+  // The teaser isn't part of the popup's content: selecting it shows the
+  // teaser on its own, so the popup doesn't cover it.
+  const ownKeys = computed(
+    () =>
+      new Set([
+        props.section.key,
+        ...(props.section.blocks ?? []).filter((b) => b.type !== "POPUP_TEASER").map((b) => b.key),
+      ])
+  );
+  const selectedHere = computed(() => isPreview.value && ownKeys.value.has(selectedKey.value));
+  watch(selectedKey, () => {
+    editorClosed.value = false;
+  });
+  watch(
+    [selectedHere, editorClosed],
+    ([here, closed]) => {
+      if (!isPreview.value) return;
+      if (here && !closed) openPopup.value = props.section.key;
+      else if (open.value) openPopup.value = null;
+    },
+    { immediate: true }
+  );
+
+  let lastFocus = null;
+  function show() {
+    if (open.value) return;
+    if (openPopup.value && openPopup.value !== props.section.key) return; // another one is up
+    lastFocus = import.meta.client ? document.activeElement : null;
+    openPopup.value = props.section.key;
+    disarm();
+  }
+  function close({ forGood = false } = {}) {
+    if (!open.value) return;
+    openPopup.value = null;
+    if (isPreview.value) {
+      editorClosed.value = true;
+      return;
+    }
+    closedThisPage.value = true;
+    if (upper(s.value.FREQUENCY, "DAYS") === "ALWAYS") {
+      // Nothing stored: "No thanks" just hides the teaser on this page too.
+      if (forGood) teaserHiddenThisPage.value = true;
+    } else {
+      remember({ closedAt: Date.now(), ...(forGood ? { teaserHidden: true } : {}) });
+      closedThisSession.value = true;
+      writeJSON(sessionStorage, storeKey.value, true);
+    }
+    nextTick(() => lastFocus?.focus?.());
+  }
+  function markSubscribed() {
+    if (isPreview.value) return;
+    remember({ subscribed: true });
+  }
+
+  provide("osiPopup", {
+    subscribed: computed(() => subscribed.value),
+    preview: isPreview,
+    source: computed(() => `POPUP:${id.value}`),
+    markSubscribed,
+    close: () => close(),
+  });
+
+  /* ------------------------------------------------------------- teaser */
+
+  const teaserBlock = computed(
+    () => (props.section.blocks ?? []).find((b) => b.type === "POPUP_TEASER" && !b.disabled) ?? null
+  );
+  const ts = computed(() => teaserBlock.value?.settings ?? {});
+  const teaserKey = computed(() => teaserBlock.value?.key);
+  const teaserSelected = computed(() => isPreview.value && !!teaserKey.value && selectedKey.value === teaserKey.value);
+
+  const TEASER_ICONS = {
+    GIFT: "M20 12v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8M2 7h20v5H2zM12 21V7M12 7H7.5a2.5 2.5 0 1 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 1 0 0-5C13 2 12 7 12 7z",
+    PERCENT: "M19 5 5 19M6.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM17.5 20a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z",
+    TAG: "M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8zM7.5 7.5h.01",
+    MAIL: "M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM3 7l9 6 9-6",
+    STAR: "M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z",
+    SPARKLE: "M12 3v4M12 17v4M3 12h4M17 12h4M12 8l1.5 2.5L16 12l-2.5 1.5L12 16l-1.5-2.5L8 12l2.5-1.5z",
+  };
+
+  const teaserMode = computed(() => (upper(ts.value.MODE, "TEXT") === "HTML" ? "HTML" : "TEXT"));
+  const teaserLabel = computed(() => t(ts.value.LABEL) || "");
+  const teaserHtml = computed(() => (teaserMode.value === "HTML" ? String(ts.value.HTML || "") : ""));
+  const teaserImage = computed(() => (teaserMode.value === "TEXT" ? mediaUrl(ts.value.IMAGE) : ""));
+  const teaserIcon = computed(() =>
+    teaserMode.value === "TEXT" && !teaserImage.value ? TEASER_ICONS[upper(ts.value.ICON, "GIFT")] ?? "" : ""
+  );
+  const teaserShape = computed(() => {
+    const v = upper(ts.value.SHAPE, "PILL");
+    return ["PILL", "TAB", "BADGE", "CARD", "IMAGE"].includes(v) ? v : "PILL";
+  });
+  const teaserPosition = computed(() => {
+    const v = upper(ts.value.POSITION, "BOTTOM_LEFT");
+    return ["BOTTOM_LEFT", "BOTTOM_RIGHT", "SIDE_LEFT", "SIDE_RIGHT"].includes(v) ? v : "BOTTOM_LEFT";
+  });
+  /** Something to show: text, an icon / image, or custom HTML. */
+  const teaserHasContent = computed(() =>
+    teaserMode.value === "HTML" ? !!teaserHtml.value.trim() : !!(teaserLabel.value || teaserImage.value || teaserIcon.value)
+  );
+
+  const teaserAnimation = computed(() => {
+    const v = upper(ts.value.ANIMATION, "NONE");
+    return ["PULSE", "BOUNCE", "WIGGLE", "SHINE", "FLOAT"].includes(v) ? v : "NONE";
+  });
+  const teaserRepeat = computed(() => upper(ts.value.ANIMATION_REPEAT, "INTERVAL"));
+
+  const teaserClasses = computed(() => [
+    `at-${teaserPosition.value.toLowerCase().replace("_", "-")}`,
+    `shape-${teaserShape.value.toLowerCase()}`,
+    `shadow-${upper(ts.value.SHADOW, "SOFT").toLowerCase()}`,
+    `anim-${teaserAnimation.value.toLowerCase()}`,
+    `repeat-${teaserRepeat.value.toLowerCase()}`,
+    {
+      "is-playing": teaserPlaying.value,
+      "hide-mobile": ts.value.SHOW_ON_MOBILE === false,
+      "is-html": teaserMode.value === "HTML",
+      "has-label": !!teaserLabel.value && teaserMode.value === "TEXT",
+    },
+    String(ts.value.CUSTOM_CLASS || "").trim() || null,
+  ]);
+  const teaserVars = computed(() => {
+    const v = ts.value;
+    return Object.fromEntries(
+      Object.entries({
+        "--ppt-x": `${num(v.OFFSET_X, 20)}px`,
+        "--ppt-y": `${num(v.OFFSET_Y, 20)}px`,
+        "--ppt-fs": `${num(v.SIZE, 13)}px`,
+        "--ppt-img": `${num(v.IMAGE_SIZE, 18)}px`,
+        "--ppt-bg": v.BACKGROUND || undefined,
+        "--ppt-color": v.COLOR || undefined,
+        "--ppt-border": v.BORDER_COLOR || undefined,
+        "--ppt-bw": `${num(v.BORDER_WIDTH, 0)}px`,
+        "--ppt-radius": `${num(v.RADIUS, 999)}px`,
+        // Image only: the default "fully round" would crop the picture to a
+        // pill — it gets soft corners unless a real radius is set.
+        "--ppt-radius-img": num(v.RADIUS, 999) >= 999 ? "14px" : `${num(v.RADIUS, 999)}px`,
+        // Empty: the shape's own padding.
+        "--ppt-px": v.PADDING_X !== "" && v.PADDING_X != null ? `${num(v.PADDING_X, 0)}px` : undefined,
+        "--ppt-py": v.PADDING_Y !== "" && v.PADDING_Y != null ? `${num(v.PADDING_Y, 0)}px` : undefined,
+      }).filter(([, val]) => val !== undefined)
+    );
+  });
+
+  // The teaser's own Custom CSS, scoped to it ("&" is the teaser itself).
+  useScopedCss(
+    () => ts.value.CUSTOM_CSS,
+    () => (teaserKey.value ? `[data-osi-block="${teaserKey.value}"]` : ""),
+    `osi-popup-teaser-css-${props.section.key}`
+  );
+
+  const showTeaser = computed(() => {
+    if (!mounted.value || open.value || !teaserBlock.value || !teaserHasContent.value) return false;
+    if (isPreview.value) return true; // so it can be seen and styled
+    if (ts.value.SHOW_ON_MOBILE === false && isPhone.value) return false;
+    if (!onThisPage.value || !audienceMatches.value || doneForGood.value) return false;
+    if (memory.value.teaserHidden || teaserHiddenThisPage.value) return false;
+    if (upper(s.value.TRIGGER, "DELAY") === "MANUAL") return true;
+    if (upper(ts.value.SHOW, "AFTER_CLOSE") === "ALWAYS") return true;
+    // ALWAYS forgets: only a close on this page counts.
+    if (upper(s.value.FREQUENCY, "DAYS") === "ALWAYS") return closedThisPage.value;
+    return !!memory.value.closedAt || closedThisSession.value || closedThisPage.value;
+  });
+  const teaserDismissible = computed(() => ts.value.DISMISSIBLE !== false);
+  function hideTeaser() {
+    if (isPreview.value) return;
+    // Remembered for good, or (REMEMBER_HIDDEN off) just on this page.
+    if (ts.value.REMEMBER_HIDDEN === false) teaserHiddenThisPage.value = true;
+    else remember({ teaserHidden: true });
+  }
+
+  // Bounce / pulse / wiggle / shine: played by toggling .is-playing —
+  // non-stop, once when it appears, or every ANIMATION_INTERVAL seconds.
+  const teaserPlaying = ref(false);
+  let teaserTimer = null;
+  function playTeaser() {
+    teaserPlaying.value = false;
+    requestAnimationFrame(() => requestAnimationFrame(() => (teaserPlaying.value = true)));
+  }
+  watch(
+    [showTeaser, teaserAnimation, teaserRepeat, () => ts.value.ANIMATION_INTERVAL],
+    ([visible, anim, repeat]) => {
+      clearInterval(teaserTimer);
+      teaserTimer = null;
+      teaserPlaying.value = false;
+      if (!import.meta.client || !visible || anim === "NONE" || anim === "FLOAT") return;
+      if (repeat === "LOOP") return void (teaserPlaying.value = true);
+      // A beat after it appears, so the entrance and the animation don't overlap.
+      setTimeout(playTeaser, 700);
+      if (repeat === "INTERVAL") teaserTimer = setInterval(playTeaser, num(ts.value.ANIMATION_INTERVAL, 4) * 1000);
+    },
+    { immediate: true }
+  );
+
+  /* ----------------------------------------------------------- triggers */
+
+  let timer = null;
+  let cleanups = [];
+  function disarm() {
+    clearTimeout(timer);
+    timer = null;
+    cleanups.forEach((fn) => fn());
+    cleanups = [];
+  }
+  function listen(target, event, fn, opts) {
+    target.addEventListener(event, fn, opts);
+    cleanups.push(() => target.removeEventListener(event, fn, opts));
+  }
+
+  // Automatic triggers never fire in the editor — it may connect after mount.
+  const autoShow = () => {
+    if (!isPreview.value) show();
+  };
+  watch(isPreview, (on) => on && disarm());
+
+  function arm() {
+    disarm();
+    if (isPreview.value || !onThisPage.value || !audienceMatches.value || !deviceMatches() || !dueAgain.value) return;
+    const trigger = upper(s.value.TRIGGER, "DELAY");
+
+    if (trigger === "DELAY") {
+      timer = setTimeout(autoShow, num(s.value.DELAY, 5) * 1000);
+    } else if (trigger === "SCROLL") {
+      const target = num(s.value.SCROLL_PERCENT, 40) / 100;
+      const onScroll = () => {
+        const max = document.documentElement.scrollHeight - window.innerHeight;
+        if (max <= 0 || window.scrollY / max >= target) autoShow();
+      };
+      listen(window, "scroll", onScroll, { passive: true });
+      onScroll();
+    } else if (trigger === "EXIT") {
+      // Desktop: the pointer leaves through the top of the window.
+      listen(document, "mouseout", (e) => {
+        if (!e.relatedTarget && e.clientY <= 0) autoShow();
+      });
+      // Touch: scrolled a fair way, then back up quickly.
+      let deepest = 0;
+      let lastY = window.scrollY;
+      let lastT = performance.now();
+      listen(
+        window,
+        "scroll",
+        () => {
+          const y = window.scrollY;
+          const now = performance.now();
+          deepest = Math.max(deepest, y);
+          const speed = (lastY - y) / Math.max(1, now - lastT); // px / ms, up is positive
+          if (deepest > window.innerHeight && deepest - y > window.innerHeight * 0.35 && speed > 1.2) autoShow();
+          lastY = y;
+          lastT = now;
+        },
+        { passive: true }
+      );
+    }
+  }
+
+  /** Links to #popup-<id>: open it (and keep the URL clean). */
+  function onLinkClick(e) {
+    const a = e.target?.closest?.("a[href]");
+    if (!a) return;
+    const href = a.getAttribute("href") || "";
+    if (!href.endsWith(`#popup-${id.value}`)) return;
+    e.preventDefault();
+    if (isPreview.value) return;
+    show();
+  }
+
+  /* --------------------------------------------------- keyboard / focus */
+
+  function focusables() {
+    const el = unref(panelEl);
+    if (!el) return [];
+    return [...el.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])')].filter(
+      (n) => n.offsetParent !== null
+    );
+  }
+  function onKeydown(e) {
+    if (!open.value) return;
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      close();
+      return;
+    }
+    if (e.key !== "Tab" || !modal.value) return;
+    const list = focusables();
+    if (!list.length) return;
+    const first = list[0];
+    const last = list[list.length - 1];
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  watch(open, (now) => {
+    if (!now || !import.meta.client || isPreview.value) return;
+    nextTick(() => {
+      // The email field if there is one, else the dialog itself.
+      const el = unref(panelEl);
+      (el?.querySelector('input[type="email"]') ?? el)?.focus?.({ preventScroll: true });
+    });
+  });
+  function onBackdrop() {
+    if (s.value.CLOSE_ON_BACKDROP !== false) close();
+  }
+
+  // The page behind a centred popup (or a phone sheet) doesn't scroll.
+  const locks = computed(() => open.value && !isPreview.value && (modal.value || (isPhone.value && sheetOnMobile.value)));
+  useBodyScrollLock(locks);
+
+  /* ---------------------------------------------- sheet: swipe to close */
+
+  let dragStartY = null;
+  const dragOffset = ref(0);
+  function onDragStart(e) {
+    dragStartY = e.clientY;
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+  }
+  function onDragMove(e) {
+    if (dragStartY === null) return;
+    dragOffset.value = Math.max(0, e.clientY - dragStartY);
+  }
+  function onDragEnd() {
+    if (dragStartY === null) return;
+    const far = dragOffset.value > 90;
+    dragStartY = null;
+    dragOffset.value = 0;
+    if (far) close();
+  }
+  const dragStyle = computed(() => (dragOffset.value ? { transform: `translateY(${dragOffset.value}px)`, transition: "none" } : null));
+
+  /* --------------------------------------------------------- lifecycle */
+
+  let phoneQuery = null;
+  const onPhoneChange = () => (isPhone.value = !!phoneQuery?.matches);
+
+  onMounted(() => {
+    loadMemory();
+    mounted.value = true;
+    phoneQuery = window.matchMedia("(max-width: 767px)");
+    onPhoneChange();
+    phoneQuery.addEventListener?.("change", onPhoneChange);
+    document.addEventListener("click", onLinkClick, true);
+    window.addEventListener("keydown", onKeydown);
+    if (!isPreview.value && window.location.hash === `#popup-${id.value}`) show();
+    else arm();
+  });
+  // A new page: the page / home targeting may now match (or not), and what
+  // was only closed / hidden for that page comes back.
+  watch(() => route.fullPath, () => {
+    if (!mounted.value || open.value) return;
+    closedThisPage.value = false;
+    teaserHiddenThisPage.value = false;
+    arm();
+  });
+  // Edited in the editor: nothing to re-arm, but keep memory in step.
+  watch(storeKey, () => mounted.value && loadMemory());
+
+  onBeforeUnmount(() => {
+    disarm();
+    clearInterval(teaserTimer);
+    phoneQuery?.removeEventListener?.("change", onPhoneChange);
+    if (import.meta.client) {
+      document.removeEventListener("click", onLinkClick, true);
+      window.removeEventListener("keydown", onKeydown);
+    }
+    if (open.value) openPopup.value = null;
+  });
+
+  return {
+    s, t, tree, label, vars, panelClasses, modal, placement, image, imagePosition, blurBackdrop,
+    dismissLabel, transitionName, open, show, close, onBackdrop, showTeaser, teaserLabel,
+    teaserPosition, hideTeaser, teaserKey, teaserSelected, teaserMode, teaserHtml, teaserImage,
+    teaserIcon, teaserShape, teaserClasses, teaserVars, teaserDismissible, sheetOnMobile, isPhone, onDragStart, onDragMove, onDragEnd,
+    dragStyle, isPreview, subscribed,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",