@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/components/FooterBlock.js

@@ -0,0 +1,91 @@
+
+export default function useLogic({ props }) {
+  const t = useT();
+  const { store, storeLogo, menu: menuByHandle } = useStorefront();
+  const { normalizeItems } = useMenu();
+  const { mediaUrl } = useMediaUrl();
+  const { isMobile, isPreview } = { ...useLayoutShell(), ...useBuilderPreview() };
+  const brand = useThemeGroup("BRAND");
+
+  const s = computed(() => props.node.s ?? {});
+  const type = computed(() => props.node.type);
+  const px = (v, d) => {
+    const n = Number(v);
+    return v === "" || v == null || !Number.isFinite(n) ? d : `${n}px`;
+  };
+
+  /* ------------------------------------------------------------------ menu */
+
+  const menu = computed(() => {
+    const found = s.value.MENU ? menuByHandle(s.value.MENU) : null;
+    return { title: t(found?.title) || "", items: normalizeItems(found?.items ?? []) };
+  });
+  const heading = computed(() =>
+    s.value.SHOW_HEADING === false ? "" : t(s.value.HEADING) || menu.value.title
+  );
+  const row = computed(() => String(s.value.DIRECTION || "VERTICAL").toUpperCase() === "HORIZONTAL");
+  const collapsible = computed(() => !row.value && !!s.value.COLLAPSE_MOBILE && !!heading.value);
+  const open = ref(false);
+  const collapsed = computed(() => collapsible.value && isMobile.value && !open.value);
+
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const weightOf = (v) => {
+    const n = Number(v);
+    return Number.isFinite(n) && n > 0 ? n : WEIGHTS[String(v || "").toUpperCase()];
+  };
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+  const textVars = (prefix) => {
+    const v = s.value;
+    return {
+      [`--fm-${prefix}-fs`]: px(v[`${prefix.toUpperCase()}_SIZE`], undefined),
+      [`--fm-${prefix}-fs-m`]: px(v[`${prefix.toUpperCase()}_SIZE_MOBILE`], undefined),
+      [`--fm-${prefix}-fw`]: weightOf(v[`${prefix.toUpperCase()}_WEIGHT`]),
+      [`--fm-${prefix}-color`]: v[`${prefix.toUpperCase()}_COLOR`] || undefined,
+      [`--fm-${prefix}-lh`]: v[`${prefix.toUpperCase()}_LINE_HEIGHT`]
+        ? String(Number(v[`${prefix.toUpperCase()}_LINE_HEIGHT`]) / 100)
+        : undefined,
+      [`--fm-${prefix}-ls`]: v[`${prefix.toUpperCase()}_LETTER_SPACING`] != null
+        ? `${Number(v[`${prefix.toUpperCase()}_LETTER_SPACING`]) / 100}em`
+        : undefined,
+      [`--fm-${prefix}-ff`]:
+        String(v[`${prefix.toUpperCase()}_FONT`] || "").toUpperCase() === "HEADING"
+          ? "var(--osi-font-heading)"
+          : undefined,
+      [`--fm-${prefix}-tt`]: CASES[String(v[`${prefix.toUpperCase()}_TRANSFORM`] || "").toUpperCase()],
+    };
+  };
+  const menuVars = computed(() => {
+    const v = s.value;
+    const out = {
+      "--fm-gap": px(v.LINK_GAP, "12px"),
+      "--fm-gap-m": px(v.LINK_GAP_MOBILE, px(v.LINK_GAP, "12px")),
+      "--fm-heading-gap": px(v.HEADING_GAP, "14px"),
+      "--fm-align": { CENTER: "center", RIGHT: "end" }[String(v.TEXT_ALIGN || "").toUpperCase()] ?? "start",
+      "--fm-hover": v.LINK_HOVER_COLOR || undefined,
+      ...textVars("heading"),
+      ...textVars("link"),
+    };
+    return Object.fromEntries(Object.entries(out).filter(([, x]) => x !== undefined));
+  });
+
+  /* ------------------------------------------------------------------ logo */
+
+  const logoSrc = computed(() =>
+    mediaUrl(s.value.LOGO?.path ?? s.value.LOGO ?? "") || mediaUrl(brand.value.LOGO || storeLogo.value)
+  );
+  const logoVars = computed(() => ({
+    "--fl-w": px(s.value.LOGO_WIDTH, "120px"),
+    "--fl-w-m": px(s.value.LOGO_WIDTH_MOBILE, px(s.value.LOGO_WIDTH, "120px")),
+  }));
+
+  /* ------------------------------------------------------------ newsletter */
+
+  const submitted = ref(false);
+  const email = ref("");
+  function subscribe() {
+    if (isPreview.value) return; // the editor never signs anyone up
+    submitted.value = true;
+  }
+
+  return { t, store, storeLogo, menuByHandle, normalizeItems, mediaUrl, isMobile, isPreview, brand, s, type, px, menu, heading, row, collapsible, open, collapsed, WEIGHTS, weightOf, CASES, textVars, menuVars, logoSrc, logoVars, submitted, email, subscribe };
+}

package/app/logic/components/FooterSocials.js

@@ -0,0 +1,60 @@
+/**
+ * The footer's social links, rendered once.
+ *
+ * SiteFooter used to carry three copies of this markup — one per placement —
+ * so every fix had to be made three times and they had already drifted (only
+ * one of them applied the alignment style).
+ *
+ * Placement stays SiteFooter's decision; this component only knows how to draw
+ * the list. `align` is passed rather than read from settings because the
+ * bottom-bar zone is aligned by its grid cell, not by FOOTER_SOCIAL_ALIGNMENT.
+ */
+
+
+export default function useLogic({ props }) {
+  const { socials, showIcon, showText, iconStyle, iconBackground, iconSize, iconColor } =
+    useFooterSocials();
+
+  const SOCIAL_ICON_PATHS = {
+    instagram:
+      "M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm5 5.5A4.5 4.5 0 1 0 16.5 12 4.5 4.5 0 0 0 12 7.5Zm0 2A2.5 2.5 0 1 1 9.5 12 2.5 2.5 0 0 1 12 9.5ZM17.25 6a1 1 0 1 0 1 1 1 1 0 0 0-1-1Z",
+    facebook:
+      "M13.5 22v-8.5H16l.5-3.5h-3V7.8c0-1 .3-1.8 1.8-1.8H16.6V2.8A22 22 0 0 0 14 2.5c-2.6 0-4.5 1.6-4.5 4.6V10H7v3.5h2.5V22Z",
+    tiktok:
+      "M14.5 2h3a5.5 5.5 0 0 0 4.2 4.3v3.1a8.6 8.6 0 0 1-4.2-1.4v6.9a6.6 6.6 0 1 1-6.6-6.6c.3 0 .6 0 .9.1v3.2a3.4 3.4 0 1 0 2.4 3.3V2Z",
+    twitter:
+      "M21 5.9a8 8 0 0 1-2.3.6 4 4 0 0 0 1.8-2.2 8 8 0 0 1-2.5 1 4 4 0 0 0-6.9 3.6A11.4 11.4 0 0 1 3 4.9a4 4 0 0 0 1.2 5.3 4 4 0 0 1-1.8-.5v.1a4 4 0 0 0 3.2 3.9 4 4 0 0 1-1.8.1 4 4 0 0 0 3.7 2.8A8 8 0 0 1 2 18.4a11.3 11.3 0 0 0 6.1 1.8c7.3 0 11.3-6.1 11.3-11.3v-.5A8.2 8.2 0 0 0 21 5.9Z",
+    youtube:
+      "M21.6 7.6a3 3 0 0 0-2.1-2.1C17.7 5 12 5 12 5s-5.7 0-7.5.5A3 3 0 0 0 2.4 7.6 31 31 0 0 0 2 12a31 31 0 0 0 .4 4.4 3 3 0 0 0 2.1 2.1C6.3 19 12 19 12 19s5.7 0 7.5-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 22 12a31 31 0 0 0-.4-4.4ZM10 15V9l5.2 3Z",
+    pinterest:
+      "M12 2a10 10 0 0 0-3.6 19.3c0-.8 0-1.7.2-2.5l1.4-6s-.4-.7-.4-1.8c0-1.7 1-3 2.2-3 1 0 1.5.8 1.5 1.7 0 1-.7 2.6-1 4-.3 1.2.6 2.2 1.8 2.2 2.1 0 3.7-2.3 3.7-5.5 0-2.9-2-4.9-5-4.9a5.2 5.2 0 0 0-5.4 5.2c0 1 .4 2.1 1 2.7l-1 3.9A10 10 0 0 0 12 2Z",
+    linkedin:
+      "M6.9 8.4H3.3V21h3.6Zm-1.8-5.7a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2ZM21 21v-6.9c0-3.7-2-5.4-4.6-5.4A4 4 0 0 0 12.8 10.7V8.4H9.2c0 .3 0 5.4 0 12.6h3.6v-7c0-.4 0-.7.1-1a2.1 2.1 0 0 1 2-1.4c1.4 0 2 1.1 2 2.6V21Z",
+  };
+
+  const SOCIAL_ICON_FALLBACK =
+    "M3.9 12a4.6 4.6 0 0 1 4.6-4.6h3v1.8h-3a2.8 2.8 0 1 0 0 5.6h3V16.6h-3A4.6 4.6 0 0 1 3.9 12Zm7-1h6.2v2H10.9ZM16.5 7.4h3a4.6 4.6 0 1 1 0 9.2h-3v-1.8h3a2.8 2.8 0 1 0 0-5.6h-3Z";
+
+  function iconPathFor(social) {
+    const key = (social.platform || social.name || "").toLowerCase();
+    return SOCIAL_ICON_PATHS[key] || SOCIAL_ICON_FALLBACK;
+  }
+
+  function labelFor(social) {
+    return social.platform || social.name || "";
+  }
+
+  /**
+   * The circle/square box used to be a hardcoded 2.25rem, so raising
+   * FOOTER_SOCIAL_ICON_SIZE past ~36px pushed the glyph outside its own
+   * background. The box now scales with the icon.
+   */
+  const listStyle = computed(() => ({
+    "--osi-social-icon-size": `${iconSize.value}px`,
+    "--osi-social-box": `${Math.round(iconSize.value * 2)}px`,
+    ...(iconColor.value ? { "--osi-social-icon-color": iconColor.value } : {}),
+    ...(props.align ? { justifyContent: props.align } : {}),
+  }));
+
+  return { socials, showIcon, showText, iconStyle, iconBackground, iconSize, iconColor, SOCIAL_ICON_PATHS, SOCIAL_ICON_FALLBACK, iconPathFor, labelFor, listStyle };
+}

package/app/logic/components/HeaderDropdownList.js

@@ -0,0 +1,29 @@
+/**
+ * The dropdown's rows (HEADER_MENU_SUBMENU_STYLE = DROPDOWN).
+ *
+ * A row whose item has its own children gets a chevron that expands them in
+ * place — an accordion inside the same panel, indented under their parent —
+ * rather than a second flyout to the side. Recursive (it renders itself for
+ * the children), so every level the menu has is reachable.
+ *
+ * The row's label stays a real link to the category; only the chevron
+ * toggles, so a parent category is still a page you can go to.
+ */
+
+
+export default function useLogic({ props, emit }) {
+  const { isActive } = useNavActive();
+
+  // A branch holding the current page starts open, so you see where you are.
+  function holdsActive(item) {
+    return (item.children ?? []).some((c) => isActive(c) || holdsActive(c));
+  }
+  const expanded = ref(new Set(props.items.filter(holdsActive).map((i) => i.id)));
+  function toggle(id) {
+    const next = new Set(expanded.value);
+    next.has(id) ? next.delete(id) : next.add(id);
+    expanded.value = next;
+  }
+
+  return { isActive, holdsActive, expanded, toggle };
+}

package/app/logic/components/HeaderIcon.js

@@ -0,0 +1,68 @@
+/**
+ * Header icons, in three sets.
+ *
+ * A merchant asking to "change the icons" almost always means picking a style,
+ * not uploading their own SVG. So this is an enum, not an upload field.
+ *
+ * Arbitrary merchant SVG is deliberately not supported here. Rendering it needs
+ * v-html, and a `<svg>` accepts `<script>`, `onload`, and `<foreignObject>` —
+ * that's stored XSS on a storefront, executing against a logged-in shopper's
+ * session. If custom icons become a real requirement, they go through a
+ * server-side sanitiser (allow-list of tags and attributes) before they ever
+ * reach the bootstrap payload, and this component gains a `custom` branch that
+ * reads only from that sanitised field.
+ *
+ * MINIMAL's two-bar burger and hairline weights are Terazar's set.
+ */
+
+
+export default function useLogic({ props }) {
+  const SETS = {
+    LINE: {
+      stroke: 1.5,
+      fill: "none",
+      paths: {
+        menu: ["M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5"],
+        search: ["m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"],
+        account: [
+          "M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z",
+        ],
+        cart: [
+          "M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007Z",
+        ],
+        close: ["M6 18 18 6M6 6l12 12"],
+      },
+    },
+
+    MINIMAL: {
+      stroke: 1.1,
+      fill: "none",
+      paths: {
+        menu: ["M5 8.7h14M5 14.9h14"],
+        search: ["m20.5 20.5-4.6-4.6m0 0a6.6 6.6 0 1 0-9.3-9.3 6.6 6.6 0 0 0 9.3 9.3Z"],
+        account: ["M15 7.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM5.5 19.5a6.5 6.5 0 0 1 13 0"],
+        cart: ["M6.5 8h11l1 12.5h-13L6.5 8Zm2.75 0V6.25a2.75 2.75 0 0 1 5.5 0V8"],
+        close: ["M6.5 6.5l11 11M17.5 6.5l-11 11"],
+      },
+    },
+
+    SOLID: {
+      stroke: 0,
+      fill: "currentColor",
+      paths: {
+        menu: ["M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"],
+        search: ["M10.5 3a7.5 7.5 0 1 0 4.55 13.46l4.24 4.25a.75.75 0 1 0 1.06-1.06l-4.24-4.25A7.5 7.5 0 0 0 10.5 3Zm-6 7.5a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z"],
+        account: ["M12 2.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5ZM3.75 20.1a8.25 8.25 0 0 1 16.5 0 .9.9 0 0 1-.48.82A18.7 18.7 0 0 1 12 22.5c-2.79 0-5.43-.61-7.8-1.7a.9.9 0 0 1-.45-.7Z"],
+        cart: ["M8.25 6a3.75 3.75 0 0 1 7.5 0v1.5h2.74c.58 0 1.06.43 1.12 1.01l1.26 12A1.13 1.13 0 0 1 19.75 21.75H4.25a1.13 1.13 0 0 1-1.12-1.24l1.26-12A1.13 1.13 0 0 1 5.51 7.5h2.74V6Zm1.5 1.5h4.5V6a2.25 2.25 0 0 0-4.5 0v1.5Z"],
+        close: ["M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"],
+      },
+    },
+  };
+
+  // An unknown set (older theme, renamed enum) falls back rather than rendering
+  // an empty box where the cart button should be.
+  const active = computed(() => SETS[props.set] ?? SETS.LINE);
+  const paths = computed(() => active.value.paths[props.name] ?? []);
+
+  return { SETS, active, paths };
+}

package/app/logic/components/HeaderLogo.js

@@ -0,0 +1,39 @@
+/**
+ * The header logo.
+ *
+ * Extracted for the same reason HeaderNav was: LOGO_LEFT_MENU_CENTER needs the
+ * logo in the start cell while every other layout keeps it in the centre cell,
+ * and a second copy of this markup in SiteHeader would be a second place to fix
+ * every logo bug.
+ *
+ * Reads BRAND itself rather than taking the resolved src as a prop, so the
+ * mobile/desktop swap lives with the thing it describes.
+ */
+/**
+ * altSrc / showAlt: a second logo (the transparent header's, e.g. a white
+ * one) cross-faded over the main one while showAlt is on. Both are stacked
+ * in one spot, so the swap never shifts the header.
+ */
+
+
+export default function useLogic({ props }) {
+  const brand = useThemeGroup("BRAND");
+  const { store, storeLogo } = useStorefront();
+  const { mediaUrl } = useMediaUrl();
+  const { isMobile } = useLayoutShell();
+
+  const src = computed(() => {
+    const desktop = brand.value.LOGO || storeLogo.value;
+    const mobile = brand.value.LOGO_MOBILE || desktop;
+    return mediaUrl(isMobile.value ? mobile : desktop);
+  });
+
+  // LOGO_WIDTH_MOBILE: phones often want a smaller logo than desktop.
+  const width = computed(() => {
+    const mobile = Number(brand.value.LOGO_WIDTH_MOBILE);
+    const n = isMobile.value && Number.isFinite(mobile) && mobile > 0 ? mobile : Number(brand.value.LOGO_WIDTH);
+    return Number.isFinite(n) && n > 0 ? `${n}px` : null;
+  });
+
+  return { brand, store, storeLogo, mediaUrl, isMobile, src, width };
+}

package/app/logic/components/HeaderNav.js

@@ -0,0 +1,268 @@
+import { NuxtLink } from "#components";
+import ProductServices from "#osi/services/ProductServices";
+
+export default function useLogic({ props }) {
+  const { isActive } = useNavActive();
+
+  const openId = ref(null);
+
+  /**
+   * Hover opens after a beat and closes after a longer one.
+   *
+   * Without the close delay, the 10px gap between the link and the panel is
+   * enough to drop the menu while the pointer is travelling to it — the single
+   * most common complaint about hover menus. The open delay stops menus flashing
+   * open as the pointer sweeps across the bar on its way somewhere else.
+   */
+  let openTimer = null;
+  let closeTimer = null;
+
+  function clearTimers() {
+    clearTimeout(openTimer);
+    clearTimeout(closeTimer);
+  }
+
+  function open(id, delay = 60) {
+    clearTimers();
+    openTimer = setTimeout(() => (openId.value = id), delay);
+  }
+
+  function close(delay = 180) {
+    clearTimers();
+    closeTimer = setTimeout(() => (openId.value = null), delay);
+  }
+
+  function toggle(id) {
+    clearTimers();
+    openId.value = openId.value === id ? null : id;
+  }
+
+  /**
+   * Touch has no hover. Without this the parent link navigates on the first tap
+   * and the submenu is unreachable, so the caret is a real button that toggles
+   * the panel — which is also what makes the menu operable by keyboard.
+   */
+  function onCaret(id) {
+    toggle(id);
+  }
+
+  /* ------------------------------------------------------------- mega menu */
+
+  /**
+   * `<component :is="'NuxtLink'">` doesn't work in Nuxt: components aren't
+   * registered globally, so the string resolves to nothing and renders a bare
+   * <nuxtlink> tag — which is why the mega menu's images weren't clickable.
+   * The component itself has to be resolved.
+   */
+  const LinkComponent = NuxtLink;
+
+  const mega = computed(() => String(props.submenuStyle || "").toUpperCase() === "MEGA");
+  const { mediaUrl } = useMediaUrl();
+
+  const t = useT();
+  const { productUrl } = useProductUrl();
+  const { store } = useStorefront();
+  const up = (v, d = "") => String(v ?? d).toUpperCase();
+  const px = (v) => (v === "" || v == null || !Number.isFinite(Number(v)) ? undefined : `${Number(v)}px`);
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const weightOf = (v) => (Number(v) > 0 ? Number(v) : WEIGHTS[up(v)]);
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+
+  /** The Mega menu block for a top-level link (its ITEM text), if any. */
+  function overrideFor(item) {
+    const title = String(item?.title || "").trim().toLowerCase();
+    return props.megaBlocks.find((b) => String(t(b.settings.ITEM) || "").trim().toLowerCase() === title) ?? null;
+  }
+
+  /**
+   * A Mega menu block makes its link a mega menu whatever the Menu block's
+   * submenu style (dropdown included) — adding one is asking for it.
+   */
+  function megaFor(item) {
+    return mega.value || !!overrideFor(item);
+  }
+  /** Any link opens as a mega menu: the nav becomes the panel's anchor. */
+  const anyMega = computed(() => mega.value || props.items.some((i) => overrideFor(i)));
+
+  /**
+   * Whether a link opens anything: its own sub-links, or — for a link with none
+   * (e.g. "About") — a Mega menu block featuring products or its own images.
+   */
+  function hasPanel(item) {
+    if (item.children.length) return true;
+    const o = overrideFor(item);
+    if (!o) return false;
+    const os = o.settings ?? {};
+    const source = up(os.FEATURED, "MENU_IMAGES");
+    if (source === "PRODUCTS") return (os.PRODUCTS ?? []).length > 0;
+    if (source === "CUSTOM") return [1, 2, 3, 4].some((n) => os[`IMAGE_${n}`]);
+    return false;
+  }
+
+  /* Products a block features, fetched when its menu first opens. */
+  const productCache = reactive({});
+  async function loadProducts(block) {
+    const ids = (block.settings.PRODUCTS ?? []).map((v) => (v && typeof v === "object" ? v.id : v)).filter(Boolean);
+    const key = `${block.key}:${ids.join(",")}`;
+    if (!ids.length || productCache[key]) return;
+    productCache[key] = { loading: true, rows: [] };
+    try {
+      const res = await ProductServices.getProductsByIds(ids);
+      const rows = res?.results ?? res ?? [];
+      const byId = new Map(rows.map((p) => [String(p.id), p]));
+      productCache[key] = { loading: false, rows: ids.map((id) => byId.get(String(id))).filter(Boolean) };
+    } catch {
+      productCache[key] = { loading: false, rows: [] };
+    }
+  }
+  const currency = computed(() => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$");
+  function priceOf(p) {
+    const n = String(p?.discounted_price_range ?? p?.price_range ?? "").split("-").map(parseFloat).filter((x) => x > 0);
+    return n.length ? `${currency.value}${n[0]}` : "";
+  }
+
+  /**
+   * The open menu: its config (the Menu block's mega settings, overridden by
+   * its Mega menu block), its link columns — a sub-item with its own links is a
+   * column (heading + links), plain sub-items share one — and its featured
+   * cards: the categories' images, picked products, or custom images.
+   */
+  const megaContent = computed(() => {
+    const item = props.items.find((i) => i.id === openId.value && hasPanel(i));
+    if (!item || !megaFor(item)) return null;
+    const s = props.megaSettings;
+    const o = overrideFor(item);
+    const os = o?.settings ?? {};
+    const layout = up(os.LAYOUT) || up(s.HEADER_MENU_MEGA_LAYOUT, "LINKS_AND_FEATURED");
+    const style = up(os.FEATURED_STYLE) || up(s.HEADER_MENU_MEGA_FEATURED_STYLE, "GRID");
+
+    const columns = [];
+    let plain = null;
+    for (const child of item.children) {
+      if (child.children?.length) {
+        columns.push({ key: child.id, heading: child, links: child.children });
+      } else {
+        if (!plain) columns.push((plain = { key: `plain-${item.id}`, heading: null, links: [] }));
+        plain.links.push(child);
+      }
+    }
+
+    const max = Number(s.HEADER_MENU_MEGA_CARDS_MAX) || 8;
+    let cards = [];
+    const source = up(os.FEATURED, "MENU_IMAGES");
+    if (layout !== "LINKS_ONLY" && s.HEADER_MENU_MEGA_IMAGES !== false) {
+      if (o && source === "PRODUCTS") {
+        loadProducts(o);
+        const ids = (os.PRODUCTS ?? []).map((v) => (v && typeof v === "object" ? v.id : v)).filter(Boolean);
+        const rows = productCache[`${o.key}:${ids.join(",")}`]?.rows ?? [];
+        cards = rows.map((p) => ({
+          key: `p-${p.id}`, title: p.name, url: productUrl(p), image: mediaUrl(p.main_image),
+          price: os.SHOW_PRICE !== false ? priceOf(p) : "",
+        }));
+      } else if (o && source === "CUSTOM") {
+        cards = [1, 2, 3, 4]
+          .map((n) => ({
+            key: `c-${n}`, title: t(os[`TITLE_${n}`]) || "", url: os[`URL_${n}`] || null,
+            image: mediaUrl(os[`IMAGE_${n}`]?.path ?? os[`IMAGE_${n}`] ?? ""),
+          }))
+          .filter((c) => c.image);
+      } else {
+        cards = item.children
+          .filter((c) => c.image)
+          .map((c) => ({ key: `m-${c.id}`, title: c.title, url: c.url, image: mediaUrl(c.image) }));
+      }
+    }
+    cards = cards.slice(0, max);
+
+    // A link with no sub-links has only its featured cards to show.
+    let shown = layout === "LINKS_AND_FEATURED" && !cards.length ? "LINKS_ONLY" : layout;
+    if (!columns.length) shown = "FEATURED_ONLY";
+    return {
+      key: item.id,
+      item,
+      layout: shown,
+      style,
+      columns: layout === "FEATURED_ONLY" ? [] : columns,
+      cards,
+    };
+  });
+
+  /** The mega menu's look as CSS variables (HEADER_MENU_MEGA_*). */
+  const megaVars = computed(() => {
+    const s = props.megaSettings;
+    const RATIOS = { SQUARE: "1 / 1", PORTRAIT: "3 / 4", LANDSCAPE: "4 / 3" };
+    const JUSTIFY = { BETWEEN: "space-between", START: "flex-start", CENTER: "center" };
+    return Object.fromEntries(Object.entries({
+      "--mega-bg": s.HEADER_MENU_MEGA_BACKGROUND || undefined,
+      "--mega-featured-w": `${Number(s.HEADER_MENU_MEGA_FEATURED_WIDTH) || 45}%`,
+      "--mega-per": String(Math.max(1, Number(s.HEADER_MENU_MEGA_CARDS) || 4)),
+      "--mega-ratio": RATIOS[up(s.HEADER_MENU_MEGA_IMAGE_RATIO, "PORTRAIT")],
+      "--mega-card-gap": px(s.HEADER_MENU_MEGA_CARD_GAP),
+      "--mega-card-r": px(s.HEADER_MENU_MEGA_CARD_RADIUS),
+      "--mega-overlay": String((Number(s.HEADER_MENU_MEGA_CARD_OVERLAY ?? 30) || 0) / 100),
+      "--mega-title-justify": JUSTIFY[up(s.HEADER_MENU_MEGA_CARD_ALIGN, "BETWEEN")],
+      "--mega-title-gap": px(s.HEADER_MENU_MEGA_CARD_TITLE_GAP),
+      "--mega-title-fs": px(s.HEADER_MENU_MEGA_CARD_TITLE_SIZE),
+      "--mega-title-fw": weightOf(s.HEADER_MENU_MEGA_CARD_TITLE_WEIGHT),
+      "--mega-title-tt": CASES[up(s.HEADER_MENU_MEGA_CARD_TITLE_CASE)],
+      "--mega-title-color": s.HEADER_MENU_MEGA_CARD_TITLE_COLOR || undefined,
+      "--mega-col-w": px(s.HEADER_MENU_MEGA_COLUMN_WIDTH),
+      "--mega-head-fs": px(s.HEADER_MENU_MEGA_HEADING_SIZE),
+      "--mega-head-fw": weightOf(s.HEADER_MENU_MEGA_HEADING_WEIGHT),
+      "--mega-head-tt": CASES[up(s.HEADER_MENU_MEGA_HEADING_CASE)],
+      "--mega-head-color": s.HEADER_MENU_MEGA_HEADING_COLOR || undefined,
+      "--mega-link-fs": px(s.HEADER_MENU_MEGA_LINK_SIZE),
+      "--mega-link-gap": px(s.HEADER_MENU_MEGA_LINK_GAP),
+      "--mega-link-color": s.HEADER_MENU_MEGA_LINK_COLOR || undefined,
+      "--mega-link-hover": s.HEADER_MENU_MEGA_LINK_HOVER_COLOR || undefined,
+    }).filter(([, v]) => v !== undefined));
+  });
+  const cardTitle = computed(() => up(props.megaSettings.HEADER_MENU_MEGA_CARD_TITLE, "BELOW"));
+  const titleAt = computed(() => up(props.megaSettings.HEADER_MENU_MEGA_CARD_TITLE_POSITION, "BOTTOM").toLowerCase());
+  const showArrow = computed(() => !!props.megaSettings.HEADER_MENU_MEGA_CARD_ARROW);
+  const arrowSvg = computed(() => String(props.megaSettings.HEADER_MENU_MEGA_CARD_ARROW_SVG || "").trim());
+
+  /* Carousel arrows: scroll the track by one card. */
+  const tracks = new Map();
+  function trackRef(key) {
+    return (el) => (el ? tracks.set(key, el) : tracks.delete(key));
+  }
+  function scrollCards(key, dir) {
+    const el = tracks.get(key);
+    if (!el) return;
+    const card = el.querySelector(".osi-mega-card");
+    const step = (card?.offsetWidth || el.clientWidth / 2) + 16;
+    const rtl = getComputedStyle(el).direction === "rtl" ? -1 : 1;
+    el.scrollBy({ left: dir * step * rtl, behavior: "smooth" });
+  }
+
+  /**
+   * The panel's height follows its content: measured (and re-measured as images
+   * load) on whichever content is current, and animated by CSS. From closed it
+   * grows from 0; from one menu to the next it grows or shrinks.
+   */
+  const panelHeight = ref(0);
+  let observer = null;
+  function trackContent(el) {
+    // Vue calls this with null for the content leaving — keep observing the new one.
+    if (!el || !import.meta.client) return;
+    observer?.disconnect();
+    const measure = () => (panelHeight.value = el.offsetHeight);
+    measure();
+    observer = new ResizeObserver(measure);
+    observer.observe(el);
+  }
+  watch(megaContent, (content) => {
+    if (!content) {
+      observer?.disconnect();
+      panelHeight.value = 0;
+    }
+  });
+
+  onScopeDispose(() => {
+    clearTimers();
+    observer?.disconnect();
+  });
+
+  return { isActive, openId, openTimer, closeTimer, clearTimers, open, close, toggle, onCaret, LinkComponent, mega, mediaUrl, t, productUrl, store, up, px, WEIGHTS, weightOf, CASES, overrideFor, megaFor, anyMega, hasPanel, productCache, loadProducts, currency, priceOf, megaContent, megaVars, cardTitle, titleAt, showArrow, arrowSvg, tracks, trackRef, scrollCards, panelHeight, observer, trackContent };
+}