@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/logic/sections/MainProductSection.js

@@ -0,0 +1,211 @@
+import { useProductResource, createProductDetail, provideProductDetail } from "#osi/composables/useProductDetail";
+
+export default function useLogic({ props }) {
+  const { s, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+  const compact = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => has(v)));
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+
+  // FEATURED_PRODUCT passes the picked product; the product page uses the route.
+  const { product, loading } = useProductResource(
+    props.productId !== undefined ? { productId: () => props.productId } : {}
+  );
+
+  const detail = provideProductDetail(
+    createProductDetail({
+      product,
+      settings: () => s.value,
+      loading,
+    })
+  );
+
+  /**
+   * The default column, for a theme whose MAIN_PRODUCT template ships no blocks.
+   * Deliberately close to what the reference store had, minus the store-specific
+   * accordion copy — policies come from the store, so those two rows are safe to
+   * default in.
+   */
+  const DEFAULT_BLOCKS = [
+    { id: "default-title", type: "TITLE", settings: {} },
+    { id: "default-price", type: "PRICE", settings: {} },
+    { id: "default-picker", type: "VARIANT_PICKER", settings: { PICKER_STYLE: "SWATCHES" } },
+    {
+      id: "default-buy",
+      type: "BUY_BUTTONS",
+      settings: { BUY_SHOW_QUANTITY: true, BUY_SHOW_STOCK_NOTICE: true },
+    },
+    { id: "default-description", type: "DESCRIPTION", settings: {} },
+    {
+      id: "default-shipping",
+      type: "COLLAPSIBLE",
+      settings: {
+        COLLAPSIBLE_HEADING: "Processing & delivery",
+        COLLAPSIBLE_SOURCE: "SHIPPING_POLICY",
+        ICON_PRESET: "truck",
+      },
+    },
+    {
+      id: "default-returns",
+      type: "COLLAPSIBLE",
+      settings: {
+        COLLAPSIBLE_HEADING: "Exchanges & returns",
+        COLLAPSIBLE_SOURCE: "RETURN_POLICY",
+        ICON_PRESET: "return",
+      },
+    },
+    { id: "default-share", type: "SHARE", settings: {} },
+  ];
+
+  const blocks = computed(() => {
+    const authored = (props.section.blocks ?? []).filter((block) => !block.disabled);
+    return authored.length ? authored : DEFAULT_BLOCKS;
+  });
+
+  /* ------------------------------------------------------------------ layout */
+
+  const mediaWidth = computed(() => {
+    const value = Number(s.value.MEDIA_WIDTH);
+    return Number.isFinite(value) ? Math.min(Math.max(value, 30), 70) : 60;
+  });
+
+  const ALIGN = { START: "flex-start", CENTER: "center", END: "flex-end" };
+  const TEXT_ALIGN = { START: "start", CENTER: "center", END: "end" };
+
+  const layoutStyle = computed(() => {
+    const v = s.value;
+    const align = String(v.INFO_ALIGN || "START").toUpperCase();
+    return compact({
+      // flex-grow weights rather than percentages: with a gap in the row,
+      // 60% + 40% + gap overflows.
+      "--osi-pdp-media-grow": String(mediaWidth.value),
+      "--osi-pdp-info-grow": String(100 - mediaWidth.value),
+      "--osi-pdp-column-gap": px(v.COLUMN_GAP) ?? "48px",
+      "--osi-pdp-column-gap-mobile": px(v.COLUMN_GAP_MOBILE),
+      "--osi-pdp-info-max": v.INFO_MAX_WIDTH ? `${Number(v.INFO_MAX_WIDTH)}px` : "none",
+      // Stacked under the gallery (empty / 0: full width).
+      "--osi-pdp-info-max-m": v.INFO_MAX_WIDTH_MOBILE ? `${Number(v.INFO_MAX_WIDTH_MOBILE)}px` : "none",
+      // Where the capped box sits inside its column (margins, not alignment:
+      // the column is a plain block, so `auto` margins are what move it).
+      "--osi-pdp-info-ml": { CENTER: "auto", END: "auto" }[String(v.INFO_BOX_POSITION || "START").toUpperCase()] ?? "0",
+      "--osi-pdp-info-mr": { CENTER: "auto", START: "auto" }[String(v.INFO_BOX_POSITION || "START").toUpperCase()] ?? "0",
+      "--osi-pdp-info-vertical":
+        { CENTER: "center", BOTTOM: "flex-end" }[String(v.INFO_VERTICAL_ALIGN || "TOP").toUpperCase()] ?? "flex-start",
+      "--osi-pdp-sticky-top": px(v.INFO_STICKY_OFFSET) ?? "96px",
+      // Read by every block (and by the rows inside them) so "centre the
+      // details" moves the price too, not just the headings.
+      "--osi-pdp-justify": ALIGN[align] ?? "flex-start",
+      "--osi-pdp-text-align": TEXT_ALIGN[align] ?? "start",
+
+      // the gallery's own padding and cap
+      "--osi-pdp-media-pt": px(v.MEDIA_PADDING_TOP),
+      "--osi-pdp-media-pb": px(v.MEDIA_PADDING_BOTTOM),
+      "--osi-pdp-media-pl": px(v.MEDIA_PADDING_LEFT),
+      "--osi-pdp-media-pr": px(v.MEDIA_PADDING_RIGHT),
+      "--osi-pdp-media-max": px(v.MEDIA_MAX_WIDTH),
+
+      // details column as a card
+      "--osi-pdp-info-bg": v.INFO_BG_COLOR,
+      "--osi-pdp-info-pt": px(v.INFO_PADDING_TOP),
+      "--osi-pdp-info-pb": px(v.INFO_PADDING_BOTTOM),
+      "--osi-pdp-info-pl": px(v.INFO_PADDING_LEFT),
+      "--osi-pdp-info-pr": px(v.INFO_PADDING_RIGHT),
+      "--osi-pdp-info-radius": px(v.INFO_RADIUS),
+      "--osi-pdp-info-border":
+        has(v.INFO_BORDER_WIDTH) && Number(v.INFO_BORDER_WIDTH) > 0
+          ? `${Number(v.INFO_BORDER_WIDTH)}px solid ${v.INFO_BORDER_COLOR || "var(--osi-border, #e5e5e5)"}`
+          : undefined,
+
+      // accordions
+      "--acc-line":
+        String(v.ACCORDION_DIVIDERS || "LINES").toUpperCase() === "NONE"
+          ? "0 solid transparent"
+          : `${Number(v.ACCORDION_LINE_WIDTH ?? 1)}px solid ${v.ACCORDION_LINE_COLOR || "var(--osi-border, #e5e5e5)"}`,
+      "--acc-radius": px(v.ACCORDION_RADIUS),
+      "--acc-gap": px(v.ACCORDION_GAP),
+      "--acc-head-py": px(v.ACCORDION_HEAD_PADDING_Y),
+      "--acc-head-px": px(v.ACCORDION_HEAD_PADDING_X),
+      "--acc-body-pt": px(v.ACCORDION_BODY_PADDING_TOP),
+      "--acc-body-pb": px(v.ACCORDION_BODY_PADDING_BOTTOM),
+      "--acc-head-bg": v.ACCORDION_HEAD_BG,
+      "--acc-body-bg": v.ACCORDION_BODY_BG,
+      "--acc-bg": v.ACCORDION_HEAD_BG,
+      "--acc-title-fs": px(v.ACCORDION_TITLE_SIZE),
+      "--acc-title-fw": WEIGHTS[v.ACCORDION_TITLE_WEIGHT],
+      "--acc-title-ls": has(v.ACCORDION_TITLE_LETTER_SPACING)
+        ? `${Number(v.ACCORDION_TITLE_LETTER_SPACING) / 100}em`
+        : undefined,
+      "--acc-title-tt": CASES[v.ACCORDION_TITLE_TRANSFORM],
+      "--acc-title-color": v.ACCORDION_TITLE_COLOR,
+      "--acc-title-ff": v.ACCORDION_TITLE_FONT === "HEADING" ? "var(--osi-font-heading)" : undefined,
+      "--acc-icon-size": px(v.ACCORDION_ICON_SIZE),
+      "--acc-body-fs": px(v.ACCORDION_BODY_SIZE),
+      "--acc-body-color": v.ACCORDION_BODY_COLOR,
+      "--acc-body-lh": has(v.ACCORDION_BODY_LINE_HEIGHT)
+        ? String(Number(v.ACCORDION_BODY_LINE_HEIGHT) / 100)
+        : undefined,
+    });
+  });
+
+  const layoutClasses = computed(() => [
+    s.value.MEDIA_POSITION === "END" ? "osi-pdp--media-end" : "osi-pdp--media-start",
+    {
+      "osi-pdp--sticky": s.value.INFO_STICKY !== false,
+      "osi-pdp--featured": props.featured,
+      "osi-pdp--info-first": !!s.value.MOBILE_INFO_FIRST,
+      "osi-pdp--info-card": !!(s.value.INFO_BG_COLOR || Number(s.value.INFO_BORDER_WIDTH) > 0),
+    },
+  ]);
+
+  /** Accordion look: classes, because CSS can't branch on a variable. */
+  const accordionClasses = computed(() => {
+    const v = s.value;
+    const dividers = String(v.ACCORDION_DIVIDERS || "LINES").toUpperCase();
+    return [
+      `osi-acc-icon--${String(v.ACCORDION_ICON || "PLUS").toLowerCase()}`,
+      `osi-acc-icon-pos--${String(v.ACCORDION_ICON_POSITION || "END").toLowerCase()}`,
+      dividers === "BOXED" ? "osi-acc--boxed" : dividers === "NONE" ? "osi-acc--none" : "osi-acc--lines",
+    ];
+  });
+
+  // ACCORDION_ONE_OPEN: the blocks share one open row through this.
+  provide("osi-pdp-accordion", {
+    single: computed(() => !!s.value.ACCORDION_ONE_OPEN),
+    openId: ref(null),
+  });
+
+  /**
+   * PAGE_BACKGROUND paints the page behind the sections, not just this one.
+   * A stylesheet rather than an inline style: .osi-root is the page root and
+   * this section can't reach it, and the optional "all sections" mode needs a
+   * descendant selector.
+   */
+  const pageBackgroundCss = computed(() => {
+    const color = s.value.PAGE_BACKGROUND;
+    if (!color) return "";
+    const all = s.value.PAGE_BACKGROUND_ALL
+      ? `.osi-root .osi-section{background:${color} !important}`
+      : "";
+    return `.osi-root{background:${color}}${all}`;
+  });
+
+  useHead(() => ({
+    style: pageBackgroundCss.value
+      ? [{ key: `osi-pdp-page-bg-${props.section.id}`, innerHTML: pageBackgroundCss.value }]
+      : [],
+  }));
+
+  // Per instance, so two product sections on one page can't overwrite each
+  // other's stylesheet.
+  useScopedCss(
+    () => s.value.CUSTOM_CSS,
+    computed(() => `[data-osi-section="${props.section.id}"]`),
+    `osi-section-css-${props.section.id}`
+  );
+
+  const showSkeleton = computed(() => loading.value && !detail.product.value);
+
+  return { s, shellStyle, innerStyle, customClass, has, px, compact, WEIGHTS, CASES, product, loading, detail, DEFAULT_BLOCKS, blocks, mediaWidth, ALIGN, TEXT_ALIGN, layoutStyle, layoutClasses, accordionClasses, pageBackgroundCss, showSkeleton };
+}

package/app/logic/sections/MainSearchSection.js

@@ -0,0 +1,6 @@
+
+export default function useLogic() {
+
+
+  return {  };
+}

package/app/logic/sections/MapSection.js

@@ -0,0 +1,92 @@
+/**
+ * MAP — an embedded map.
+ *
+ * MAP_SOURCE
+ *   COORDINATES  LATITUDE / LONGITUDE / ZOOM
+ *   EMBED        EMBED_URL: whatever Google Maps gives — the "Embed a map"
+ *                HTML (the <iframe> code), the link inside it, or a place
+ *                link with coordinates (/maps/place/…/@lat,lng,15z). Other
+ *                providers' embed links (…/embed…) pass through as they are.
+ * An older section with EMBED_URL and no MAP_SOURCE counts as EMBED.
+ *
+ * MAP_HEIGHT / MAP_HEIGHT_MOBILE (HEIGHT / HEIGHT_MOBILE: older names),
+ * MAP_LINK_LABEL (empty hides the link).
+ */
+
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } =
+    useSectionShell(() => props.section);
+  const { isPreview } = useBuilderPreview();
+
+  const num = (v, d) => (Number.isFinite(Number(v)) && v !== "" && v != null ? Number(v) : d);
+  const height = computed(() => num(s.value.MAP_HEIGHT ?? s.value.HEIGHT, 420));
+  const heightMobile = computed(() => num(s.value.MAP_HEIGHT_MOBILE ?? s.value.HEIGHT_MOBILE, 280));
+  const label = computed(() => t(s.value.ADDRESS_LABEL) || t(s.value.HEADING) || "Map");
+  const linkLabel = computed(() => {
+    const v = s.value.MAP_LINK_LABEL;
+    return v === undefined ? "Open in Google Maps" : t(v);
+  });
+
+  const source = computed(() => {
+    const v = String(s.value.MAP_SOURCE || "").toUpperCase();
+    if (v) return v;
+    return s.value.EMBED_URL ? "EMBED" : "COORDINATES";
+  });
+
+  /** Google Maps URLs for a query (coordinates or text). */
+  const googleEmbed = (q, zoom) =>
+    `https://www.google.com/maps?q=${encodeURIComponent(q)}${zoom ? `&z=${zoom}` : ""}&output=embed`;
+  const googleLink = (q) => `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(q)}`;
+
+  /**
+   * What was pasted -> { src, href } (href: the "open in Maps" link, when one
+   * can be made), or null when it can't be embedded.
+   */
+  function fromEmbed(raw) {
+    let value = String(raw || "").trim();
+    if (!value) return null;
+    // The whole <iframe …> code: take its src.
+    const tag = value.match(/src\s*=\s*["']([^"']+)["']/i);
+    if (tag) value = tag[1];
+    value = value.replace(/&amp;/g, "&");
+
+    let url;
+    try {
+      url = new URL(value);
+    } catch {
+      return null;
+    }
+    if (url.protocol !== "https:") return null;
+
+    // Already an embed (Google's /maps/embed?pb=…, ?output=embed, others' /embed).
+    if (url.pathname.includes("/embed") || url.searchParams.get("output") === "embed") {
+      return { src: url.toString(), href: null };
+    }
+
+    const google = /(^|\.)google\.[a-z.]+$/i.test(url.hostname);
+    if (!google) return null;
+
+    // A place / map link with coordinates: …/@33.83,35.54,15z
+    const at = url.pathname.match(/@(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?)z)?/);
+    if (at) {
+      const q = `${at[1]},${at[2]}`;
+      return { src: googleEmbed(q, at[3] ? Math.round(Number(at[3])) : 15), href: googleLink(q) };
+    }
+    // ?q=… or /maps/search/<query> or /maps/place/<name>
+    const q =
+      url.searchParams.get("q") ||
+      url.searchParams.get("query") ||
+      decodeURIComponent((url.pathname.match(/\/maps\/(?:search|place)\/([^/]+)/) || [])[1] || "").replace(/\+/g, " ");
+    if (q) return { src: googleEmbed(q), href: googleLink(q) };
+    return null;
+  }
+
+  const map = computed(() => {
+    if (source.value === "EMBED") return fromEmbed(s.value.EMBED_URL);
+    const q = `${num(s.value.LATITUDE, 33.8339)},${num(s.value.LONGITUDE, 35.5442)}`;
+    return { src: googleEmbed(q, num(s.value.ZOOM, 15)), href: googleLink(q) };
+  });
+
+  return { s, t, shellStyle, innerStyle, align, customClass, heading, isPreview, num, height, heightMobile, label, linkLabel, source, googleEmbed, googleLink, fromEmbed, map };
+}

package/app/logic/sections/MediaContentSection.js

@@ -0,0 +1,38 @@
+
+export default function useLogic({ props }) {
+  const { s, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+
+  /** The section has a height of its own (anything but Auto). */
+  const sized = computed(() => String(s.value.HEIGHT || "AUTO").toUpperCase() !== "AUTO");
+
+  const { tree, backgroundOf, editing, u } = useContentTree(() => props.section, {
+    rootDefaults: props.rootDefaults,
+    fillRootImages: sized,
+    index: () => props.index,
+    custom: props.custom,
+    customText: props.customText,
+  });
+  const { num, px, compact, upper } = u;
+
+  /* --------------------------------------------------------- section shell */
+
+  const HEIGHTS = { SMALL: "40vh", MEDIUM: "60vh", LARGE: "80vh", FULL: "100svh" };
+  const background = computed(() => backgroundOf(s.value));
+
+  const sectionStyle = computed(() => {
+    const v = s.value;
+    const height = upper(v.HEIGHT, "AUTO");
+    return {
+      ...shellStyle.value,
+      ...compact({
+        minHeight: height === "CUSTOM" ? px(v.HEIGHT_CUSTOM) : HEIGHTS[height],
+        border: upper(v.BORDER_STYLE, "NONE") === "SOLID"
+          ? `${num(v.BORDER_WIDTH, 1)}px solid ${v.BORDER_COLOR || "currentColor"}`
+          : undefined,
+        borderRadius: num(v.BORDER_RADIUS, 0) ? `${num(v.BORDER_RADIUS, 0)}px` : undefined,
+      }),
+    };
+  });
+
+  return { s, shellStyle, innerStyle, customClass, sized, tree, backgroundOf, editing, u, num, px, compact, upper, HEIGHTS, background, sectionStyle };
+}

package/app/logic/sections/MediaWithTextSection.js

@@ -0,0 +1,238 @@
+import { NuxtLink } from "#components";
+import { buttonClasses as toButtonClasses, buttonVars } from "#osi/composables/useButtonStyle";
+
+export default function useLogic({ props }) {
+  const isMwt = computed(() => String(props.section.type || "").toUpperCase() === "MEDIA_WITH_TEXT");
+
+  const { s, t, shellStyle, innerStyle, customClass, heading } = useSectionShell(() => props.section);
+  const { mediaUrl, posterUrl } = useMediaUrl();
+  const { isVideo } = useMediaTypes();
+  const { isMobile } = useLayoutShell();
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+  const compact = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => has(v)));
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+
+  /* --------------------------------------------------------------- media */
+
+  const media = computed(() =>
+    isMobile.value ? s.value.MOBILE_MEDIA || s.value.MEDIA_MOBILE || s.value.MEDIA : s.value.MEDIA
+  );
+  const mediaSrc = computed(() => mediaUrl(media.value ?? null));
+  const mediaPath = computed(() => media.value?.path ?? media.value ?? "");
+  const isVideoMedia = computed(() => !!mediaPath.value && isVideo(mediaPath.value));
+
+  /**
+   * Video: an uploaded file (MEDIA) or a YouTube / Vimeo link (VIDEO_URL).
+   * Playback defaults to a silent loop, which is the only way browsers allow
+   * autoplay; turning sound on means turning autoplay off.
+   */
+  const videoAutoplay = computed(() => s.value.VIDEO_AUTOPLAY !== false);
+  const videoLoop = computed(() => s.value.VIDEO_LOOP !== false);
+  const videoMuted = computed(() => videoAutoplay.value || s.value.VIDEO_MUTED !== false);
+  const videoControls = computed(() => !!s.value.VIDEO_CONTROLS);
+  const videoPoster = computed(() => mediaUrl(s.value.VIDEO_POSTER ?? null) || posterUrl(media.value));
+
+  const embedUrl = computed(() => {
+    const raw = String(s.value.VIDEO_URL || "").trim();
+    if (!raw) return null;
+    const flags = (extra) =>
+      new URLSearchParams({
+        autoplay: videoAutoplay.value ? "1" : "0",
+        mute: videoMuted.value ? "1" : "0",
+        muted: videoMuted.value ? "1" : "0",
+        loop: videoLoop.value ? "1" : "0",
+        controls: videoControls.value ? "1" : "0",
+        playsinline: "1",
+        ...extra,
+      }).toString();
+    const yt = raw.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{6,})/);
+    if (yt) return `https://www.youtube-nocookie.com/embed/${yt[1]}?${flags({ playlist: yt[1], rel: "0" })}`;
+    const vm = raw.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+    if (vm) return `https://player.vimeo.com/video/${vm[1]}?${flags({ background: videoControls.value ? "0" : "1" })}`;
+    return null;
+  });
+
+  // No picture, video or embed yet: the section's own background (colour scheme /
+  // BACKGROUND_COLOR) has to show instead of the media's grey placeholder.
+  const hasMedia = computed(() => !!embedUrl.value || !!mediaSrc.value);
+
+  const RATIOS = {
+    NATURAL: "auto",
+    PORTRAIT: "3 / 4",
+    SQUARE: "1 / 1",
+    LANDSCAPE: "4 / 3",
+    WIDE: "16 / 9",
+    ULTRAWIDE: "21 / 9",
+  };
+
+  /* ---------------------------------------------------------------- text */
+
+  const eyebrow = computed(() => t(s.value.EYEBROW));
+  const body = computed(() => t(s.value.BODY));
+  // HERO's plain-text line under the heading.
+  const subheading = computed(() => t(s.value.SUBHEADING));
+  // HERO's TEXT blocks: extra lines, each with its own size.
+  const textBlocks = computed(() =>
+    (props.section.blocks ?? [])
+      .filter((b) => !b.disabled && b.type === "TEXT" && t(b.settings?.TEXT))
+      .map((b) => ({
+        key: b.id ?? b.key,
+        text: t(b.settings.TEXT),
+        style: has(b.settings?.SIZE) ? { fontSize: `${Number(b.settings.SIZE)}px` } : undefined,
+      }))
+  );
+  const headingTag = computed(() => (s.value.HEADING_TAG === "H1" ? "h1" : "h2"));
+  // The first section on the page holds the LCP image: never lazy-load it.
+  const eager = computed(() => props.index === 0);
+
+  /** BUTTON blocks, else the single BUTTON_LABEL / BUTTON_URL of older sections. */
+  const buttons = computed(() => {
+    const blocks = (props.section.blocks ?? []).filter((b) => !b.disabled && b.type === "BUTTON");
+    const list = blocks
+      .map((b) => {
+        const bs = b.settings ?? {};
+        return {
+          key: b.id ?? b.key,
+          label: t(bs.LABEL),
+          url: bs.URL,
+          newTab: !!bs.OPEN_IN_NEW_TAB,
+          style: buttonVars(bs, "BUTTON"),
+          // HERO's older VARIANT (PRIMARY / SECONDARY / LINK) still works.
+          classes: toButtonClasses(bs, "BUTTON", [
+            "osi-mwt-button",
+            { SECONDARY: "osi-btn--secondary", LINK: "osi-btn--underline" }[bs.VARIANT] ?? "",
+          ]),
+        };
+      })
+      .filter((b) => b.label && b.url);
+    if (list.length) return list;
+    const label = t(s.value.BUTTON_LABEL);
+    const url = s.value.BUTTON_URL;
+    return label && url
+      ? [{
+          key: "legacy",
+          label,
+          url,
+          newTab: false,
+          style: buttonVars(s.value, "BUTTON"),
+          classes: toButtonClasses(s.value, "BUTTON", ["osi-mwt-button"]),
+        }]
+      : [];
+  });
+
+  const hasText = computed(
+    () =>
+      !!(eyebrow.value || heading.value || subheading.value || body.value ||
+        textBlocks.value.length || buttons.value.length)
+  );
+
+  /* -------------------------------------------------------------- layout */
+
+  /**
+   * The merchant's choice, as is. SPLIT stays split even while the text is still
+   * empty — a freshly added section looks like the classic image-with-text, and
+   * the media only fills the row when "Media only" is picked.
+   */
+  const layout = computed(() => {
+    const chosen = String(s.value.LAYOUT || "SPLIT").toUpperCase();
+    return ["SPLIT", "OVERLAY", "MEDIA_ONLY"].includes(chosen) ? chosen : "SPLIT";
+  });
+
+  const fullBleed = computed(() => !!s.value.FULL_BLEED && layout.value !== "SPLIT");
+
+  // Whole-media link only when there are no buttons: a link inside a link is
+  // invalid HTML and the inner one stops being reachable by keyboard.
+  const mediaLink = computed(() => (s.value.LINK_URL && !buttons.value.length ? s.value.LINK_URL : null));
+  const NuxtLinkComponent = NuxtLink;
+
+  const ALIGN = { TOP: "start", CENTER: "center", BOTTOM: "end" };
+  const OVERLAY_SPOTS = {
+    TOP_LEFT: ["start", "start"], TOP_CENTER: ["start", "center"], TOP_RIGHT: ["start", "end"],
+    CENTER_LEFT: ["center", "start"], CENTER: ["center", "center"], CENTER_RIGHT: ["center", "end"],
+    BOTTOM_LEFT: ["end", "start"], BOTTOM_CENTER: ["end", "center"], BOTTOM_RIGHT: ["end", "end"],
+  };
+  const TEXT_ALIGN = { LEFT: "start", CENTER: "center", RIGHT: "end" };
+  const ITEMS_ALIGN = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+
+  const vars = computed(() => {
+    const v = s.value;
+    const spot = OVERLAY_SPOTS[String(v.OVERLAY_POSITION || "CENTER").toUpperCase()] ?? OVERLAY_SPOTS.CENTER;
+    const textAlign = String(v.TEXT_ALIGNMENT || (layout.value === "OVERLAY" ? "CENTER" : "LEFT")).toUpperCase();
+    return compact({
+      // media
+      "--mwt-ratio": RATIOS[v.MEDIA_RATIO] ?? RATIOS.LANDSCAPE,
+      "--mwt-ratio-mobile": RATIOS[v.MEDIA_RATIO_MOBILE],
+      // A fixed px height, else HERO's SMALL / MEDIUM / LARGE / FULL screen share.
+      "--mwt-h": px(v.MEDIA_HEIGHT) ?? { SMALL: "40vh", MEDIUM: "60vh", LARGE: "78vh", FULL: "100vh" }[v.HEIGHT],
+      "--mwt-h-mobile": px(v.MEDIA_HEIGHT_MOBILE),
+      "--mwt-fit": String(v.MEDIA_FIT || "COVER").toLowerCase(),
+      "--mwt-radius": px(v.MEDIA_RADIUS),
+
+      // split
+      "--mwt-media-w": `${Number(v.MEDIA_WIDTH) || 50}%`,
+      "--mwt-gap": px(v.COLUMN_GAP),
+      "--mwt-gap-mobile": px(v.COLUMN_GAP_MOBILE),
+      "--mwt-valign": ALIGN[String(v.VERTICAL_ALIGN || "CENTER").toUpperCase()] ?? "center",
+
+      // overlay
+      "--mwt-ov-color": v.OVERLAY_COLOR,
+      "--mwt-ov-opacity": has(v.OVERLAY_OPACITY) ? String(Number(v.OVERLAY_OPACITY) / 100) : undefined,
+      "--mwt-ov-text": v.OVERLAY_TEXT_COLOR,
+      "--mwt-ov-y": spot[0],
+      "--mwt-ov-x": spot[1],
+      "--mwt-ov-max": px(v.OVERLAY_TEXT_MAX_WIDTH),
+
+      // text
+      "--mwt-text-align": TEXT_ALIGN[textAlign] ?? "start",
+      "--mwt-text-items": ITEMS_ALIGN[textAlign] ?? "flex-start",
+      "--mwt-text-max": px(v.TEXT_MAX_WIDTH),
+      "--mwt-text-bg": v.TEXT_BG_COLOR,
+      "--mwt-text-pt": px(v.TEXT_PADDING_TOP),
+      "--mwt-text-pr": px(v.TEXT_PADDING_RIGHT),
+      "--mwt-text-pb": px(v.TEXT_PADDING_BOTTOM),
+      "--mwt-text-pl": px(v.TEXT_PADDING_LEFT),
+      "--mwt-text-gap": px(v.TEXT_GAP),
+      "--mwt-h-fs": px(v.HEADING_TEXT_SIZE),
+      "--mwt-h-fs-mobile": px(v.HEADING_TEXT_SIZE_MOBILE),
+      "--mwt-h-fw": WEIGHTS[v.HEADING_TEXT_WEIGHT],
+      "--mwt-h-color": v.HEADING_TEXT_COLOR,
+      "--mwt-h-lh": has(v.HEADING_TEXT_LINE_HEIGHT) ? String(Number(v.HEADING_TEXT_LINE_HEIGHT) / 100) : undefined,
+      "--mwt-h-ls": has(v.HEADING_TEXT_LETTER_SPACING) ? `${Number(v.HEADING_TEXT_LETTER_SPACING) / 100}em` : undefined,
+      "--mwt-h-tt": CASES[v.HEADING_TEXT_TRANSFORM],
+      "--mwt-h-ff": v.HEADING_TEXT_FONT === "BODY" ? "var(--osi-font-body)" : undefined,
+      "--mwt-b-fs": px(v.BODY_SIZE),
+      "--mwt-b-color": v.BODY_COLOR,
+      "--mwt-eyebrow-color": v.EYEBROW_COLOR,
+    });
+  });
+
+  const rootClasses = computed(() => [
+    `osi-mwt--${layout.value.toLowerCase().replace("_", "-")}`,
+    {
+      "osi-mwt--media-end": s.value.MEDIA_POSITION === "RIGHT",
+      "osi-mwt--text-first-mobile": !!s.value.MOBILE_TEXT_FIRST,
+      "osi-mwt--has-height":
+        has(s.value.MEDIA_HEIGHT) || has(s.value.MEDIA_HEIGHT_MOBILE) ||
+        ["SMALL", "MEDIUM", "LARGE", "FULL"].includes(s.value.HEIGHT),
+      "osi-mwt--natural": String(s.value.MEDIA_RATIO || "") === "NATURAL",
+      "osi-mwt--no-media": !hasMedia.value,
+      // A colour scheme picked on the section: its text colour drives the overlay
+      // text too, instead of the default white.
+      "osi-mwt--scheme": !!s.value.COLOR_SCHEME,
+    },
+  ]);
+
+  const containerStyle = computed(() =>
+    fullBleed.value ? { maxWidth: "100%", marginInline: 0 } : innerStyle.value
+  );
+  /* Full bleed also ignores the section's side padding, so the picture meets
+     both edges of the screen. */
+  const sectionStyle = computed(() =>
+    fullBleed.value ? { ...shellStyle.value, paddingLeft: 0, paddingRight: 0 } : shellStyle.value
+  );
+
+  return { isMwt, s, t, shellStyle, innerStyle, customClass, heading, mediaUrl, posterUrl, isVideo, isMobile, has, px, compact, WEIGHTS, CASES, media, mediaSrc, mediaPath, isVideoMedia, videoAutoplay, videoLoop, videoMuted, videoControls, videoPoster, embedUrl, hasMedia, RATIOS, eyebrow, body, subheading, textBlocks, headingTag, eager, buttons, hasText, layout, fullBleed, mediaLink, NuxtLinkComponent, ALIGN, OVERLAY_SPOTS, TEXT_ALIGN, ITEMS_ALIGN, vars, rootClasses, containerStyle, sectionStyle };
+}