@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/components/SiteHeader.js

@@ -0,0 +1,266 @@
+import { SECTION_WIDTHS } from "#osi/composables/useSectionShell";
+
+export default function useLogic() {
+  const settings = useThemeGroup("HEADER");
+
+  // Header section blocks (HeaderSection provides them): each part carries its
+  // block's key for the editor, and a deleted block hides its part. Without a
+  // Header section (older backends) both parts always show.
+  const headerBlocks = inject("osiHeaderBlocks", computed(() => ({})));
+  const { theme: themeSettings } = useStorefront();
+  const showLogo = computed(() => themeSettings.value.HEADER_SHOW_LOGO !== false);
+  const showMenu = computed(() => themeSettings.value.HEADER_SHOW_MENU !== false);
+  const scheme = useColorScheme(computed(() => settings.value.HEADER_COLOR_SCHEME));
+
+  const { store, cartType } = useStorefront();
+  const { useMenuByHandle } = useMenu();
+  const { scrolled, headerPinned } = useLayoutShell();
+  const { toggleCartSidebar, toggleMobileSidebar, isMobileSidebarVisible } = useSidebar();
+  const { count } = useCart();
+  const { isLoggedIn } = useAuth();
+  const route = useRoute();
+  const router = useRouter();
+
+  const menu = useMenuByHandle(computed(() => settings.value.HEADER_MENU));
+  const pinned = headerPinned(computed(() => settings.value.HEADER_STICKY));
+  // Nav spacing, typography and state styling all arrive as CSS variables, so
+  // the markup below never names a setting. See useNavStyle.js.
+  const { style: navStyle, navClass, buttonStyle } = useHeaderNavStyle();
+  const { isActive } = useNavActive();
+  const { enabled: sidebarEnabled } = useSidebarStyle();
+
+  /**
+   * The burger opens the sidebar, so it hides when the sidebar is switched off —
+   * a button that opens nothing is worse than no button. HEADER_MENU_BUTTON_
+   * VISIBILITY then decides whether it shows on desktop too; the CSS handles
+   * that breakpoint, since it's a media query, not a JS one.
+   */
+  const showMenuButton = computed(
+    () => settings.value.HEADER_SHOW_MENU_BUTTON !== false && sidebarEnabled.value
+  );
+
+  /**
+   * Defended the same way HEADER_LAYOUT is: .toLowerCase() straight off the
+   * setting throws on any theme saved before HEADER_MENU_BUTTON_VISIBILITY
+   * existed, and it takes the whole header down with it.
+   */
+  const menuButtonVisibility = computed(() =>
+    String(settings.value.HEADER_MENU_BUTTON_VISIBILITY ?? "MOBILE_ONLY").toLowerCase()
+  );
+
+  /**
+   * HEADER_LAYOUT, read once and defended.
+   *
+   * `.toLowerCase()` straight off the setting threw on a theme where the key was
+   * missing, which is every theme created before the HEADER group existed.
+   */
+  const layout = computed(() =>
+    String(settings.value.HEADER_LAYOUT ?? "LOGO_CENTER").toUpperCase()
+  );
+
+  /**
+   * Where the logo and the nav render. Two independent questions, because
+   * LOGO_LEFT_MENU_CENTER is the layout where the answers differ.
+   *
+   *   LOGO_CENTER             start: nav      centre: logo        end: actions
+   *   LOGO_RIGHT              start: nav      centre: logo (last) end: actions
+   *   LOGO_LEFT               start: —        centre: logo + nav  end: actions
+   *   LOGO_LEFT_MENU_CENTER   start: logo     centre: nav         end: actions
+   *
+   * The last row is the reason the logo moved into its own component. Sharing the
+   * centre cell with the nav — the previous approach — can only ever centre the
+   * nav optically, because the cell isn't symmetric about the page. With the logo
+   * in the start cell the grid stays 1fr auto 1fr and the nav is centred exactly.
+   *
+   * It also gives the mobile arrangement for nothing: the burger renders first in
+   * the start cell and the logo second, so on mobile they sit side by side at the
+   * start, which is what this layout is for.
+   */
+  const logoInStart = computed(() => layout.value === "LOGO_LEFT_MENU_CENTER");
+  const navInCentre = computed(
+    () => layout.value === "LOGO_LEFT" || layout.value === "LOGO_LEFT_MENU_CENTER"
+  );
+
+  const iconSet = computed(() => settings.value.HEADER_ICON_SET);
+  const iconSize = computed(() => settings.value.HEADER_ICON_SIZE);
+
+  function handleCartClick() {
+    if (cartType.value === "PAGE") {
+      router.push("/cart");
+    } else {
+      toggleCartSidebar(true);
+    }
+  }
+
+  /**
+   * Transparent over the homepage hero (HEADER_TRANSPARENT_ON_INDEX).
+   *
+   *   overlay      the header overlaps the page top on the homepage — always,
+   *                not just while transparent: a negative margin as tall as the
+   *                header, so turning solid on scroll never moves the page (the
+   *                old absolute ↔ sticky switch made it jump by the header's
+   *                height).
+   *   transparent  at the top of the page, not hovered: no background, its own
+   *                text / icon colour (HEADER_TRANSPARENT_TEXT_COLOR).
+   *   hoverFill    at the top, hovered (or a menu open inside it): a background
+   *                (HEADER_TRANSPARENT_HOVER_BG, else the header's) and text
+   *                colour (…_HOVER_TEXT, else the header's).
+   *
+   * The homepage is "/" — or, in the editor preview (/__builder-preview), the
+   * INDEX template, so the setting shows before it's saved.
+   */
+  const isIndex = computed(
+    () =>
+      route.path === "/" ||
+      (route.path.startsWith("/__builder-preview") &&
+        String(route.query.template || "INDEX").toUpperCase() === "INDEX")
+  );
+  const overlay = computed(() => !!settings.value.HEADER_TRANSPARENT_ON_INDEX && isIndex.value);
+  const hovered = ref(false);
+  const hoverFills = computed(() => settings.value.HEADER_TRANSPARENT_HOVER !== false);
+  const atTop = computed(() => overlay.value && !scrolled.value);
+  const transparent = computed(() => atTop.value && !(hovered.value && hoverFills.value));
+  const hoverFill = computed(() => atTop.value && hovered.value && hoverFills.value);
+
+  // The transparent header's own logo (e.g. white); the main one on hover /
+  // once scrolled — HeaderLogo cross-fades between them.
+  const { mediaUrl: logoUrl } = useMediaUrl();
+  const transparentLogo = computed(() =>
+    overlay.value ? logoUrl(settings.value.HEADER_TRANSPARENT_LOGO) || "" : ""
+  );
+
+  /**
+   * Scheme first, overrides on top. Only non-empty overrides are written, so an
+   * unset one leaves the scheme's variable untouched rather than blanking it.
+   */
+  const headerStyle = computed(() => {
+    const style = { ...scheme.value.style };
+    const s = settings.value;
+
+    if (s.HEADER_BACKGROUND) style["--osi-bg"] = s.HEADER_BACKGROUND;
+    if (s.HEADER_TEXT_COLOR) style["--osi-text"] = s.HEADER_TEXT_COLOR;
+    // Icons default to the text colour; the override only splits them apart when
+    // the merchant actually wants that.
+    style["--osi-header-icon"] = s.HEADER_ICON_COLOR || "var(--osi-text)";
+    if (s.HEADER_ICON_BG) style["--osi-header-icon-bg"] = s.HEADER_ICON_BG;
+    if (s.HEADER_ICON_BORDER) style["--osi-header-icon-border"] = s.HEADER_ICON_BORDER;
+    style["--osi-header-pad-y"] = `${s.HEADER_PADDING_Y}px`;
+    // Side padding lives on the header itself, not on the inner box — see the
+    // note on .osi-header-inner below. 16 is COMMON_STYLE_SETTINGS' PADDING_X
+    // default, so an unset header lines up with an unset section.
+    style["--osi-header-pad-x"] = `${s.HEADER_PADDING_X ?? 16}px`;
+    style["--osi-header-max-w"] =
+      SECTION_WIDTHS[s.HEADER_CONTAINER] ?? SECTION_WIDTHS.NORMAL;
+
+    if (overlay.value) style["--osi-header-overlap"] = `${headerHeight.value}px`;
+    if (transparent.value) {
+      const fg = s.HEADER_TRANSPARENT_TEXT_COLOR;
+      if (fg) {
+        style["--osi-text"] = fg;
+        style["--osi-header-icon"] = fg;
+      }
+    } else if (hoverFill.value) {
+      if (s.HEADER_TRANSPARENT_HOVER_BG) style["--osi-bg"] = s.HEADER_TRANSPARENT_HOVER_BG;
+      const fg = s.HEADER_TRANSPARENT_HOVER_TEXT;
+      if (fg) {
+        style["--osi-text"] = fg;
+        style["--osi-header-icon"] = fg;
+      }
+    }
+    return style;
+  });
+
+  /** Menu links follow the transparent / hover text colour too. */
+  const headerNavStyle = computed(() => {
+    const s = settings.value;
+    const fg = transparent.value
+      ? s.HEADER_TRANSPARENT_TEXT_COLOR
+      : hoverFill.value
+        ? s.HEADER_TRANSPARENT_HOVER_TEXT
+        : null;
+    return fg ? { ...navStyle.value, "--osi-nav-color": fg } : navStyle.value;
+  });
+
+  const searchStyle = computed(() =>
+    showSearchAllowed.value ? settings.value.HEADER_SEARCH_STYLE : "NONE"
+  );
+  const showSearchAllowed = computed(() => settings.value.HEADER_SHOW_SEARCH);
+
+  const cartCountStyle = computed(() => settings.value.HEADER_CART_COUNT);
+
+  // --- search ---------------------------------------------------------------
+  const searchOpen = ref(false);
+  const inlineQuery = ref("");
+
+  function submitInline() {
+    const value = inlineQuery.value.trim();
+    if (!value) return;
+    inlineQuery.value = "";
+    router.push(`/search?q=${encodeURIComponent(value)}`);
+  }
+
+  /**
+   * How much of the screen the header covers right now, published on <html> as
+   * --osi-header-offset (and its full height as --osi-header-height).
+   *
+   * Anything else that sticks to the top — the listing page's toolbar, a
+   * sidebar — sits at `top: var(--osi-header-offset)`. While the header is
+   * pinned that's its height, so they stick just under it; when it slides away
+   * on scroll-down it drops to 0 and they move up into the freed space. Both
+   * transition over the same 0.3s as the header's own slide, so the toolbar
+   * glides with it instead of jumping or getting covered.
+   *
+   * 0 when the header doesn't stick at all (NONE) or is floating transparent
+   * over the hero (absolute, so it covers nothing once scrolled past).
+   */
+  const headerEl = ref(null);
+  const headerHeight = ref(0);
+  let resizeObserver = null;
+
+  // Overlaying the hero no longer changes how the header sticks (see overlay).
+  const sticks = computed(
+    () => String(settings.value.HEADER_STICKY ?? "ON_SCROLL_UP").toUpperCase() !== "NONE"
+  );
+
+  function publishOffset() {
+    if (!import.meta.client) return;
+    const root = document.documentElement.style;
+    const offset = sticks.value && pinned.value ? headerHeight.value : 0;
+    root.setProperty("--osi-header-height", `${headerHeight.value}px`);
+    root.setProperty("--osi-header-offset", `${offset}px`);
+  }
+
+  onMounted(() => {
+    const el = headerEl.value;
+    if (!el) return;
+    headerHeight.value = el.offsetHeight;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        headerHeight.value = el.offsetHeight;
+      });
+      resizeObserver.observe(el);
+    }
+    publishOffset();
+  });
+
+  watch([sticks, pinned, headerHeight], publishOffset);
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    if (import.meta.client) {
+      document.documentElement.style.setProperty("--osi-header-offset", "0px");
+    }
+  });
+
+  // Navigation is the only reliable "done here" signal — a panel opened by click
+  // outlives the click that opened it. HeaderNav closes its own dropdown, since
+  // that state now lives with the component that owns it.
+  watch(
+    () => route.fullPath,
+    () => {
+      searchOpen.value = false;
+    }
+  );
+
+  return { settings, headerBlocks, themeSettings, showLogo, showMenu, scheme, store, cartType, useMenuByHandle, scrolled, headerPinned, toggleCartSidebar, toggleMobileSidebar, isMobileSidebarVisible, count, isLoggedIn, route, router, menu, pinned, navStyle, navClass, buttonStyle, isActive, sidebarEnabled, showMenuButton, menuButtonVisibility, layout, logoInStart, navInCentre, iconSet, iconSize, handleCartClick, isIndex, overlay, hovered, hoverFills, atTop, transparent, hoverFill, logoUrl, transparentLogo, headerStyle, headerNavStyle, searchStyle, showSearchAllowed, cartCountStyle, searchOpen, inlineQuery, submitInline, headerEl, headerHeight, resizeObserver, sticks, publishOffset };
+}

package/app/logic/components/WhatsAppButton.js

@@ -0,0 +1,75 @@
+/**
+ * The floating WhatsApp button — theme settings → WhatsApp button (WHATSAPP_*).
+ *
+ * A bottom corner of every page (the layout renders it). Opens a chat with
+ * the store's number (wa.me), with an optional pre-filled message; without a
+ * number it falls back to the WhatsApp link in Social media. No link at all:
+ * nothing is drawn.
+ *
+ * The icon is the WhatsApp logo, the merchant's own image, or their SVG; on a
+ * coloured background (circle / rounded / square) or bare. An optional label
+ * sits beside it — on hover, or always on larger screens.
+ */
+
+
+export default function useLogic({ props }) {
+  const s = useThemeGroup("WHATSAPP");
+  const social = useThemeGroup("SOCIAL_MEDIA");
+  const t = useT();
+  const { mediaUrl } = useMediaUrl();
+
+  const LOGO =
+    "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z";
+
+  const up = (v, d) => String(v || d).toUpperCase();
+
+  /** wa.me with the number (digits only), else the Social media link. */
+  const href = computed(() => {
+    const message = t(s.value.WHATSAPP_MESSAGE) || "";
+    const digits = String(s.value.WHATSAPP_NUMBER || "").replace(/\D/g, "");
+    if (digits) {
+      return `https://wa.me/${digits}${message ? `?text=${encodeURIComponent(message)}` : ""}`;
+    }
+    const url = String(social.value.SOCIAL_WHATSAPP_URL || "").trim();
+    if (!url) return "";
+    if (!message || /[?&]text=/.test(url)) return url;
+    return `${url}${url.includes("?") ? "&" : "?"}text=${encodeURIComponent(message)}`;
+  });
+
+  const visible = computed(
+    () => !!s.value.WHATSAPP_ENABLED && !!href.value && !(props.checkout && s.value.WHATSAPP_HIDE_ON_CHECKOUT !== false)
+  );
+
+  const icon = computed(() => up(s.value.WHATSAPP_ICON, "DEFAULT"));
+  const image = computed(() => (icon.value === "IMAGE" ? mediaUrl(s.value.WHATSAPP_IMAGE ?? null) : ""));
+  const svg = computed(() => (icon.value === "SVG" ? String(s.value.WHATSAPP_SVG || "").trim() : ""));
+  // Nothing picked for the image / SVG: the logo.
+  const showLogo = computed(() => !image.value && !svg.value);
+  const label = computed(() => t(s.value.WHATSAPP_LABEL) || "");
+
+  const px = (v, d) => `${Number.isFinite(Number(v)) && v !== "" && v != null ? Number(v) : d}px`;
+
+  const classes = computed(() => [
+    `at-${up(s.value.WHATSAPP_POSITION, "BOTTOM_RIGHT") === "BOTTOM_LEFT" ? "left" : "right"}`,
+    `shape-${up(s.value.WHATSAPP_SHAPE, "CIRCLE").toLowerCase()}`,
+    `show-${up(s.value.WHATSAPP_SHOW_ON, "ALL").toLowerCase()}`,
+    `label-${up(s.value.WHATSAPP_LABEL_SHOW, "HOVER").toLowerCase()}`,
+    {
+      "is-bare": up(s.value.WHATSAPP_STYLE, "FILLED") === "BARE",
+      "has-shadow": s.value.WHATSAPP_SHADOW !== false,
+      "is-pulsing": !!s.value.WHATSAPP_PULSE,
+    },
+  ]);
+
+  const style = computed(() => ({
+    "--wa-size": px(s.value.WHATSAPP_SIZE, 56),
+    "--wa-icon": px(s.value.WHATSAPP_ICON_SIZE, 30),
+    "--wa-bg": s.value.WHATSAPP_BG || "#25D366",
+    "--wa-color": s.value.WHATSAPP_ICON_COLOR || "#ffffff",
+    "--wa-x": px(s.value.WHATSAPP_OFFSET_X, 20),
+    "--wa-y": px(s.value.WHATSAPP_OFFSET_Y, 20),
+    "--wa-y-m": px(s.value.WHATSAPP_OFFSET_Y_MOBILE, 16),
+  }));
+
+  return { s, social, t, mediaUrl, LOGO, up, href, visible, icon, image, svg, showLogo, label, px, classes, style };
+}

package/app/logic/layouts/default.js

@@ -0,0 +1,66 @@
+import { eventBus } from "#osi/utils/eventBus";
+import { resolveSection } from "#osi/theme/registry";
+
+export default function useLogic() {
+  /**
+   * One layout for the whole storefront.
+   *
+   * Terazar's `default` and `product` layouts had byte-identical scripts and only
+   * differed in which chrome they rendered, so this collapses to one file and a
+   * page-meta flag:
+   *
+   *   definePageMeta({ chrome: 'minimal' })   // checkout — logo only, no nav
+   *   definePageMeta({ chrome: 'bare' })      // no header or footer at all
+   *
+   * The `add-to-cart` emit chain is gone. Pages and sections call useAddToCart()
+   * directly, which fetches the cart and opens the drawer itself — a section
+   * rendered through a dynamic <component> can't emit up to a layout anyway.
+   */
+  const route = useRoute();
+  const { closeAll } = useSidebar();
+  const { fetchCart } = useCart();
+
+  const chrome = computed(() => route.meta.chrome ?? "full");
+  const showHeader = computed(() => chrome.value !== "bare");
+  const showFooter = computed(() => chrome.value === "full");
+  const showNav = computed(() => chrome.value === "full");
+
+  /**
+   * Header / footer, Shopify-style: the theme's HEADER_GROUP and FOOTER_GROUP
+   * sections, rendered around the page. Straight in the layout, no wrapper —
+   * the header's position: sticky needs the page as its container.
+   *
+   *   full     every group section
+   *   minimal  the header section only (checkout: logo, no menu)
+   *   bare     nothing
+   *
+   * A backend without groups (sectionGroups null) keeps the old fixed chrome.
+   */
+  const { sectionGroups } = useStorefront();
+  const { isPreview } = useBuilderPreview();
+  const headerSections = computed(() => {
+    const list = (sectionGroups.value?.header ?? []).filter((s) => isPreview.value || !s.disabled);
+    if (chrome.value === "bare") return [];
+    return chrome.value === "minimal" ? list.filter((s) => s.type === "HEADER") : list;
+  });
+  const footerSections = computed(() =>
+    chrome.value === "full"
+      ? (sectionGroups.value?.footer ?? []).filter((s) => isPreview.value || !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.
+  watch(() => route.fullPath, () => closeAll());
+
+  onMounted(() => {
+    fetchCart();
+    eventBus.on("cartUpdated", fetchCart);
+  });
+
+  onBeforeUnmount(() => {
+    eventBus.off("cartUpdated", fetchCart);
+  });
+
+  return { route, closeAll, fetchCart, chrome, showHeader, showFooter, showNav, sectionGroups, isPreview, headerSections, footerSections, resolveSection };
+}

package/app/logic/sections/AnnouncementBarSection.js

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

package/app/logic/sections/BlockCarousel.js

@@ -0,0 +1,103 @@
+/**
+ * The swipe behaviour of a horizontal Group (or section) with CAROUSEL on:
+ * native scroll-snap — touch, trackpad and keyboard scrolling for free, no
+ * library — plus optional arrows, dots, autoplay and loop.
+ *
+ * It renders the flex track itself (trackClass / trackStyle come from the
+ * group's own layout), so the blocks stay direct children of a flex container
+ * and every width / alignment rule in ContentNode keeps applying. The slide
+ * sizing (per view, per view on phones) and the scroll-snap styles live in
+ * ContentNode too, keyed on the track's car-mobile / car-always class.
+ *
+ * Controls appear only while the track actually scrolls, so "On phones only"
+ * shows no arrows or dots on a desktop where the row fits. Autoplay pauses on
+ * hover / focus and never runs for reduced-motion visitors. RTL-safe.
+ *
+ * Controls (CAROUSEL_* on the group / section):
+ *   arrowsAt    BELOW  under the slides, around the dots
+ *               SIDES  over the slides, vertically centred at each edge
+ *   dotsAt      BELOW  under the slides
+ *               INSIDE over the slides, at the bottom
+ *   dotStyle    DOT / BAR (the current one a bar) / LINE
+ *   arrowBorder whether the arrows have a border
+ *   controlVars sizes and colours (--bc-*), empty = the text colour
+ */
+
+
+export default function useLogic({ props }) {
+  const track = ref(null);
+  const pages = ref(1);
+  const page = ref(0);
+  const paused = ref(false);
+  let timer = null;
+  let resize = null;
+
+  const direction = () => (track.value && getComputedStyle(track.value).direction === "rtl" ? -1 : 1);
+
+  function measure() {
+    const el = track.value;
+    if (!el) return;
+    const width = el.clientWidth || 1;
+    pages.value = el.scrollWidth > width + 1 ? Math.max(2, Math.round(el.scrollWidth / width)) : 1;
+    page.value = Math.min(pages.value - 1, Math.round(Math.abs(el.scrollLeft) / width));
+  }
+
+  function go(index) {
+    const el = track.value;
+    if (!el) return;
+    const target = Math.max(0, Math.min(index, pages.value - 1));
+    el.scrollTo({ left: direction() * target * el.clientWidth, behavior: "smooth" });
+  }
+  function next() {
+    if (page.value >= pages.value - 1) return props.loop && go(0);
+    go(page.value + 1);
+  }
+  function prev() {
+    if (page.value <= 0) return props.loop && go(pages.value - 1);
+    go(page.value - 1);
+  }
+
+  function start() {
+    stop();
+    if (!props.autoplay || typeof window === "undefined") return;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    timer = setInterval(() => {
+      if (!paused.value && pages.value > 1) next();
+    }, Math.max(1500, props.interval));
+  }
+  function stop() {
+    if (timer) clearInterval(timer);
+    timer = null;
+  }
+
+  onMounted(() => {
+    measure();
+    if ("ResizeObserver" in window) {
+      resize = new ResizeObserver(measure);
+      resize.observe(track.value);
+    }
+    start();
+  });
+  onBeforeUnmount(() => {
+    stop();
+    resize?.disconnect();
+  });
+  watch(() => [props.autoplay, props.interval], start);
+
+  const canPrev = computed(() => props.loop || page.value > 0);
+  const canNext = computed(() => props.loop || page.value < pages.value - 1);
+
+  const scrolls = computed(() => pages.value > 1);
+  const sideArrows = computed(() => props.arrows && props.arrowsAt === "SIDES" && scrolls.value);
+  const insideDots = computed(() => props.dots && props.dotsAt === "INSIDE" && scrolls.value);
+  const belowArrows = computed(() => props.arrows && props.arrowsAt !== "SIDES");
+  const belowDots = computed(() => props.dots && props.dotsAt !== "INSIDE");
+  const showBelow = computed(() => scrolls.value && (belowArrows.value || belowDots.value));
+
+  const rootClass = computed(() => [
+    `osi-bc--dots-${props.dotStyle.toLowerCase()}`,
+    { "osi-bc--no-arrow-border": !props.arrowBorder },
+  ]);
+
+  return { track, pages, page, paused, timer, resize, direction, measure, go, next, prev, start, stop, canPrev, canNext, scrolls, sideArrows, insideDots, belowArrows, belowDots, showBelow, rootClass };
+}

package/app/logic/sections/ClassificationListSection.js

@@ -0,0 +1,40 @@
+
+export default function useLogic({ props }) {
+  const { s, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+  const { classifications, loading } = useSectionData(() => props.section);
+  const { items, isFeatured, sourceKind } = useClassificationItems(() => props.section, classifications);
+  const { tree } = useContentTree(() => props.section, {
+    rootDefaults: { DIRECTION: "VERTICAL", GAP: 24 },
+    index: () => props.index,
+  });
+
+  // No Card block: fall back to a plain card, so the list never disappears.
+  const fallback = useContentTree(() => ({
+    settings: {},
+    blocks: [
+      { key: "__card", type: "CARD", settings: { GAP: 10 } },
+      { key: "__image", type: "CARD_IMAGE", parent_key: "__card", settings: { RATIO: "SQUARE", RADIUS: 8 } },
+      { key: "__title", type: "CARD_TITLE", parent_key: "__card", settings: { PRESET: "H4" } },
+    ],
+  }));
+
+  const cardNode = computed(() => tree.value.children.find((n) => n.type === "CARD") ?? null);
+  const template = computed(() => cardNode.value ?? fallback.tree.value.children[0]);
+
+  /** The page, in block order; the list goes where the Card is (else last). */
+  const parts = computed(() => {
+    const out = tree.value.children.map((node) =>
+      node.type === "CARD" ? { kind: "list", key: "list" } : { kind: "block", key: node.key, node }
+    );
+    if (!cardNode.value) out.push({ kind: "list", key: "list" });
+    return out;
+  });
+
+  const visibleItems = computed(() => (isFeatured.value ? items.value.slice(0, 1) : items.value));
+
+  const emptyMessage = computed(() =>
+    sourceKind.value === "COLLECTION" ? "No collections to show here yet." : "No categories to show here yet."
+  );
+
+  return { s, shellStyle, innerStyle, customClass, classifications, loading, items, isFeatured, sourceKind, tree, fallback, cardNode, template, parts, visibleItems, emptyMessage };
+}