@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/sections/MainClassificationSection.js

@@ -0,0 +1,473 @@
+import { useClassificationPage } from "#osi/composables/useClassificationPage";
+import { ClassificationPart } from "#components";
+
+export default function useLogic({ props }) {
+  /**
+   * The settings the listing runs on. With blocks, the Toolbar, Categories and
+   * Product grid blocks hold their parts' settings (same IDs as the section
+   * had) — laid over the section's, so everything below reads them as before.
+   * Without blocks (older sections) the section's own.
+   */
+  const LISTING_BLOCKS = ["CLASSIFICATION_TOOLBAR", "CLASSIFICATION_NAV", "PRODUCT_GRID"];
+  const effectiveSection = computed(() => {
+    const blocks = (props.section.blocks ?? []).filter((b) => !b.disabled && LISTING_BLOCKS.includes(b.type));
+    if (!blocks.length) return props.section;
+    const settings = { ...(props.section.settings ?? {}) };
+    for (const b of blocks) Object.assign(settings, b.settings ?? {});
+    return { ...props.section, settings };
+  });
+
+  const { s, t, shellStyle, innerStyle, align, customClass, scheme } = useSectionShell(() => effectiveSection.value);
+  const page = useClassificationPage(() => effectiveSection.value);
+  const {
+    kind, terms, title, description, image, breadcrumbs, navItems, sortOptions, ordering,
+    selectedValues, filters, filtersPending, activeFilters, products, total,
+    pageCount, pagination, pending, hasMore, loadingMore,
+  } = page;
+
+  /* --------------------------------------------------------------- blocks
+   * Like Shopify's main collection section: with blocks, they decide what's on
+   * the page and where — Breadcrumbs, Title, Description, Image, Categories
+   * (anywhere, in Groups), the Toolbar and the Product grid (holding the Card
+   * template). The section's settings still run the listing (filters, sort,
+   * toolbar look, columns, pagination). No blocks — a store that hasn't updated
+   * — the old fixed layout below. */
+  const blockMode = computed(() => (props.section.blocks ?? []).length > 0);
+  /** The search page's results (toolbar defaults differ). */
+  const isResults = computed(() => props.section.type === "MAIN_SEARCH");
+  const flowMode = blockMode;
+  const PART = ClassificationPart;
+  const { tree } = useContentTree(() => props.section, {
+    custom: {
+      BREADCRUMBS: PART, CLASSIFICATION_TITLE: PART, CLASSIFICATION_DESCRIPTION: PART,
+      CLASSIFICATION_IMAGE: PART, CLASSIFICATION_NAV: PART,
+    },
+    customText: {
+      BREADCRUMBS: "CUSTOM", CLASSIFICATION_TITLE: "H2", CLASSIFICATION_DESCRIPTION: "PARAGRAPH",
+    },
+    raw: ["CLASSIFICATION_TOOLBAR", "PRODUCT_GRID"],
+    index: () => props.index,
+  });
+
+  /**
+   * The page top to bottom: runs of header blocks (in the page container), the
+   * toolbar band (full width) and the grid — each with its place (CSS order).
+   */
+  const flow = computed(() => {
+    const out = [];
+    for (const node of tree.value.children) {
+      if (node.type === "CLASSIFICATION_TOOLBAR" || node.type === "PRODUCT_GRID") {
+        out.push({ kind: node.type, key: node.key, node });
+        continue;
+      }
+      const last = out[out.length - 1];
+      if (last?.kind === "BLOCKS") last.nodes.push(node);
+      else out.push({ kind: "BLOCKS", key: node.key, nodes: [node] });
+    }
+    return out.map((part, order) => ({ ...part, order }));
+  });
+  const orderOf = (kind) => flow.value.find((p) => p.kind === kind)?.order ?? -1;
+  /**
+   * Search page before anything is searched: nothing — no toolbar, no "no
+   * results" (the section is hidden, paddings included). The editor still
+   * shows the grid.
+   */
+  const { isPreview } = useBuilderPreview();
+  const awaitingTerms = computed(() => kind.value === "SEARCH" && !terms.value && !isPreview.value);
+  const toolbarOrder = computed(() =>
+    awaitingTerms.value ? -1 : flowMode.value ? orderOf("CLASSIFICATION_TOOLBAR") : 1
+  );
+  const gridOrder = computed(() => (awaitingTerms.value ? -1 : flowMode.value ? orderOf("PRODUCT_GRID") : 2));
+  const blockChunks = computed(() => flow.value.filter((p) => p.kind === "BLOCKS"));
+
+  /** The Product grid's Card template; none: the standard product card. */
+  const cardTemplate = computed(() =>
+    flow.value.find((p) => p.kind === "PRODUCT_GRID")?.node.children?.find((n) => n.type === "CARD") ?? null
+  );
+  const { items: cardItems } = useProductItems(() => props.section, products, { all: true });
+  const itemsById = computed(() => Object.fromEntries(cardItems.value.map((i) => [i.id, i])));
+
+  /* ------------------------------------------------------------- settings */
+
+  const num = (v, d) => {
+    const n = Number(v);
+    return v === "" || v === null || v === undefined || !Number.isFinite(n) ? d : n;
+  };
+  const bool = (v, d) => (v === undefined || v === null || v === "" ? d : v === true || v === "true");
+  const pick = (v, allowed, d) => (allowed.includes(String(v ?? "").toUpperCase()) ? String(v).toUpperCase() : d);
+
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+  const weight = (v, d) => WEIGHTS[v] ?? (Number.isFinite(Number(v)) && v !== "" && v != null ? Number(v) : d);
+  const JUSTIFY = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+
+  // header
+  const showBreadcrumbs = computed(() => bool(s.value.SHOW_BREADCRUMBS, false));
+  const showTitle = computed(() => bool(s.value.SHOW_TITLE, true));
+  const showDescription = computed(() => bool(s.value.SHOW_DESCRIPTION, true) && !!description.value);
+  const bannerStyle = computed(() => {
+    const style = pick(s.value.BANNER_STYLE, ["NONE", "ABOVE", "BEHIND"], "NONE");
+    return style !== "NONE" && image.value ? style : "NONE";
+  });
+
+  // layout
+  /**
+   * Asking for the navigation or the filters "in the sidebar" IS asking for a
+   * sidebar. With the page layout still on Full width that choice used to be
+   * dropped silently, which read as the setting not working; a left sidebar is
+   * switched on for it instead. An explicit Left / Right choice still wins.
+   */
+  const wantsSidebar = computed(
+    () =>
+      String(s.value.NAV_POSITION ?? "").toUpperCase() === "SIDEBAR" ||
+      String(s.value.FILTER_POSITION ?? "").toUpperCase() === "SIDEBAR"
+  );
+  const pageLayout = computed(() => {
+    const chosen = pick(s.value.PAGE_LAYOUT, ["FULL", "SIDEBAR_LEFT", "SIDEBAR_RIGHT"], "FULL");
+    return chosen === "FULL" && wantsSidebar.value ? "SIDEBAR_LEFT" : chosen;
+  });
+  const hasSidebarLayout = computed(() => pageLayout.value !== "FULL");
+
+  // navigation
+  const navPosition = computed(() => {
+    const p = pick(s.value.NAV_POSITION, ["ABOVE_TITLE", "BELOW_TITLE", "SIDEBAR"], "BELOW_TITLE");
+    return p === "SIDEBAR" && !hasSidebarLayout.value ? "BELOW_TITLE" : p;
+  });
+  const navAlign = computed(() =>
+    pick(s.value.NAV_ALIGNMENT, ["LEFT", "CENTER", "RIGHT"], align.value === "center" ? "CENTER" : "LEFT")
+  );
+  const navLayout = computed(() => pick(s.value.NAV_LAYOUT, ["SCROLL", "WRAP", "GRID"], "SCROLL"));
+  const navVariant = computed(() => pick(s.value.NAV_STYLE, ["TEXT", "PILL", "IMAGE", "CARD"], "TEXT"));
+  const navProps = computed(() => ({
+    items: navItems.value,
+    variant: navVariant.value,
+    shape: pick(s.value.NAV_IMAGE_SHAPE, ["CIRCLE", "SQUARE", "ROUNDED", "PORTRAIT", "LANDSCAPE"], "CIRCLE"),
+    textPosition: pick(
+      s.value.NAV_TEXT_POSITION,
+      ["BELOW", "BESIDE", "OVERLAY_CENTER", "OVERLAY_BOTTOM", "HIDDEN"],
+      "BELOW"
+    ),
+    activeStyle: pick(s.value.NAV_ACTIVE_STYLE, ["UNDERLINE", "BOLD", "FILL", "BORDER", "NONE"], "UNDERLINE"),
+    hover: pick(s.value.NAV_HOVER, ["NONE", "ZOOM", "LIFT"], "ZOOM"),
+    imageFit: pick(s.value.NAV_IMAGE_FIT, ["COVER", "CONTAIN"], "COVER"),
+    showCount: bool(s.value.NAV_SHOW_COUNT, false),
+    label: kind.value === "COLLECTION" ? "Collections" : "Categories",
+  }));
+
+  // filters / sort
+  const showFilters = computed(() => bool(s.value.SHOW_FILTERS, true));
+  const showSort = computed(() => bool(s.value.SHOW_SORT, true));
+  const filterPosition = computed(() => {
+    const p = pick(s.value.FILTER_POSITION, ["DRAWER", "SIDEBAR"], hasSidebarLayout.value ? "SIDEBAR" : "DRAWER");
+    return p === "SIDEBAR" && !hasSidebarLayout.value ? "DRAWER" : p;
+  });
+  const sortInToolbar = computed(
+    () => showSort.value && pick(s.value.SORT_POSITION, ["TOOLBAR", "FILTERS"], "FILTERS") === "TOOLBAR"
+  );
+  const sortInFilters = computed(() => showSort.value && !sortInToolbar.value);
+  /** In the drawer: its own setting, plus the toolbar's sort on phones. */
+  const sortInDrawer = computed(() => sortInFilters.value || (sortInToolbar.value && isNarrow.value));
+  const swatchShape = computed(() => pick(s.value.SWATCH_SHAPE, ["CIRCLE", "SQUARE"], "CIRCLE"));
+  const showActiveFilters = computed(() => bool(s.value.SHOW_ACTIVE_FILTERS, true));
+  const drawerSide = computed(() => pick(s.value.DRAWER_SIDE, ["START", "END"], "END"));
+
+  // sidebar contents
+  const sidebarHasNav = computed(() => navPosition.value === "SIDEBAR" && navItems.value.length > 0);
+
+  // For the header blocks (ClassificationPart).
+  provide("osiPlp", { kind, terms, title, description, image, breadcrumbs, navItems, navProps, navLayout });
+  const sidebarHasFilters = computed(
+    () => filterPosition.value === "SIDEBAR" && showFilters.value && (filters.value.length > 0 || sortInFilters.value)
+  );
+  const showSidebar = computed(() => hasSidebarLayout.value && (sidebarHasNav.value || sidebarHasFilters.value));
+
+  // toolbar
+  const showToolbar = computed(() => bool(s.value.SHOW_TOOLBAR, true));
+  const toolbarFullWidth = computed(() => bool(s.value.TOOLBAR_FULL_WIDTH, true));
+
+  /**
+   * Phones: the toolbar has room for one control, so the sort dropdown moves into
+   * the filter panel there, next to the filters. Tracked with matchMedia rather
+   * than CSS alone because the panel's contents depend on it.
+   */
+  const isNarrow = ref(false);
+  let narrowQuery = null;
+  const onNarrowChange = (e) => {
+    isNarrow.value = e.matches;
+  };
+  onMounted(() => {
+    narrowQuery = window.matchMedia("(max-width: 989px)");
+    isNarrow.value = narrowQuery.matches;
+    narrowQuery.addEventListener?.("change", onNarrowChange);
+  });
+  onBeforeUnmount(() => narrowQuery?.removeEventListener?.("change", onNarrowChange));
+  const toolbarStyle = computed(() => pick(s.value.TOOLBAR_STYLE, ["BAR", "LINES", "PLAIN"], "BAR"));
+  const showCount = computed(() => bool(s.value.SHOW_PRODUCT_COUNT, true));
+  const showColumnSwitcher = computed(() => bool(s.value.SHOW_COLUMN_SWITCHER, false));
+  /** The drawer button exists on desktop only when filters live in the drawer. */
+  const desktopFilterButton = computed(
+    () => showFilters.value && filterPosition.value === "DRAWER" && (filters.value.length > 0 || sortInFilters.value)
+  );
+  /** On mobile the sidebar — and the toolbar's sort — collapse into the drawer. */
+  const mobileFilterButton = computed(
+    () => desktopFilterButton.value || showSidebar.value || sortInToolbar.value
+  );
+
+  /**
+   * What goes where in the toolbar. Each control can be put at the start, the
+   * middle or the end; the product count can also be hidden.
+   */
+  const pos = (value, allowed, fallback) =>
+    allowed.includes(String(value ?? "").toUpperCase()) ? String(value).toUpperCase() : fallback;
+
+  const toolbarSlots = computed(() => {
+    const slots = { START: [], CENTER: [], END: [] };
+    if (mobileFilterButton.value) {
+      slots[pos(s.value.TOOLBAR_FILTER_POSITION, ["START", "CENTER", "END"], "START")].push("filter");
+    }
+    const countAt = pos(s.value.TOOLBAR_COUNT_POSITION, ["START", "CENTER", "END", "HIDDEN"], "START");
+    if (showCount.value && countAt !== "HIDDEN") slots[countAt].push("count");
+    if (sortInToolbar.value) {
+      slots[pos(s.value.TOOLBAR_SORT_POSITION, ["START", "CENTER", "END"], "END")].push("sort");
+    }
+    if (showColumnSwitcher.value) slots.END.push("columns");
+    return slots;
+  });
+
+  // products
+  const columns = computed(() => Math.min(6, Math.max(1, num(s.value.COLUMNS, 4))));
+  const userColumns = ref(null);
+  const effectiveColumns = computed(() => userColumns.value ?? columns.value);
+  const columnChoices = computed(() => [...new Set([2, 3, 4, columns.value])].filter((c) => c <= 6).sort());
+  const animate = computed(() => bool(s.value.ANIMATE_PRODUCTS, true));
+  const showProgress = computed(() => bool(s.value.SHOW_PROGRESS, false));
+
+  const cardSettings = computed(() => {
+    const out = {};
+    for (const key of ["CARD_IMAGE_RATIO", "CARD_TEXT_ALIGN", "CARD_CTA_STYLE", "CARD_TEXT_POSITION"]) {
+      if (s.value[key]) out[key] = s.value[key];
+    }
+    if (s.value.CARD_SHOW_QUICK_SHOP !== undefined && s.value.CARD_SHOW_QUICK_SHOP !== null && s.value.CARD_SHOW_QUICK_SHOP !== "") {
+      out.CARD_SHOW_QUICK_SHOP = bool(s.value.CARD_SHOW_QUICK_SHOP, true);
+    }
+    return out;
+  });
+
+  /* ------------------------------------------------------------ css vars */
+
+  const px = (v) => (v === undefined || v === null || v === "" ? undefined : `${Number(v)}px`);
+  const compact = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined && v !== null && v !== ""));
+
+  // The toolbar's space above (schema default): 48 under the category header,
+  // 0 at the top of the search results.
+  const tbTop = computed(() => (isResults.value ? 0 : 48));
+  const tbBottom = computed(() => 0);
+
+  const cssVars = computed(() => ({
+    ...compact({
+      // header
+      "--plp-align": align.value,
+      "--plp-title-fs": px(num(s.value.TITLE_SIZE, 40)),
+      "--plp-title-fs-mobile": px(num(s.value.TITLE_SIZE_MOBILE, 30)),
+      "--plp-title-fw": weight(s.value.TITLE_WEIGHT, 400),
+      "--plp-title-tt": CASES[s.value.TITLE_TRANSFORM],
+      "--plp-title-color": s.value.TITLE_COLOR,
+      "--plp-banner-h": px(num(s.value.BANNER_HEIGHT, 320)),
+      "--plp-banner-h-mobile": px(num(s.value.BANNER_HEIGHT_MOBILE, 220)),
+      "--plp-banner-overlay": num(s.value.BANNER_OVERLAY, 35) / 100,
+      "--plp-banner-color": s.value.BANNER_TEXT_COLOR,
+      "--plp-banner-radius": px(s.value.BANNER_RADIUS),
+      "--plp-header-gap": px(num(s.value.HEADER_SPACING, 24)),
+
+      // nav
+      "--plp-nav-space": px(num(s.value.NAV_SPACING, 24)),
+      // Separate top / bottom, each falling back to the single spacing value.
+      "--plp-nav-mt": px(s.value.NAV_MARGIN_TOP),
+      "--plp-nav-mb": px(s.value.NAV_MARGIN_BOTTOM),
+      "--cnav-img": px(num(s.value.NAV_IMAGE_SIZE, 96)),
+      "--cnav-img-mobile": px(s.value.NAV_IMAGE_SIZE_MOBILE),
+      "--cnav-gap": px(num(s.value.NAV_GAP, navVariant.value === "TEXT" ? 28 : 20)),
+      "--cnav-gap-mobile": px(s.value.NAV_GAP_MOBILE),
+      "--cnav-cols": num(s.value.NAV_COLUMNS, 6),
+      "--cnav-cols-mobile": num(s.value.NAV_COLUMNS_MOBILE, 3),
+      "--cnav-radius": px(num(s.value.NAV_CORNER_RADIUS, 12)),
+      "--cnav-overlay": num(s.value.NAV_OVERLAY_OPACITY, 30) / 100,
+      "--cnav-justify": JUSTIFY[navAlign.value],
+      // Scrolling rows centre with auto margins, which collapse when they overflow.
+      "--cnav-scroll-start": navAlign.value === "LEFT" ? "0" : "auto",
+      "--cnav-scroll-end": navAlign.value === "CENTER" ? "auto" : "0",
+      "--cnav-fs": px(num(s.value.NAV_TEXT_SIZE, 14)),
+      "--cnav-fw": weight(s.value.NAV_TEXT_WEIGHT, undefined),
+      "--cnav-tt": CASES[s.value.NAV_TEXT_TRANSFORM],
+      "--cnav-ls": s.value.NAV_LETTER_SPACING ? `${num(s.value.NAV_LETTER_SPACING, 0) / 100}em` : undefined,
+      "--cnav-color": s.value.NAV_TEXT_COLOR,
+      "--cnav-active": s.value.NAV_ACTIVE_COLOR,
+      "--cnav-card-bg": s.value.NAV_CARD_BG,
+      "--cnav-overlay-color": s.value.NAV_OVERLAY_TEXT_COLOR,
+
+      // toolbar
+      "--plp-tb-bg": s.value.TOOLBAR_BG_COLOR,
+      "--plp-tb-border": s.value.TOOLBAR_BORDER_COLOR,
+      "--plp-tb-color": s.value.TOOLBAR_TEXT_COLOR,
+      "--plp-tb-h": px(s.value.TOOLBAR_HEIGHT),
+      "--plp-tb-fs": px(s.value.TOOLBAR_TEXT_SIZE),
+      // Block layout: the toolbar's and the grid's own spacing (mobile: empty =
+      // desktop). The header blocks get theirs from Groups.
+      ...(flowMode.value
+        ? {
+            "--plp-tb-mt": px(num(s.value.TOOLBAR_MARGIN_TOP, tbTop.value)),
+            "--plp-tb-mb": px(num(s.value.TOOLBAR_MARGIN_BOTTOM, tbBottom.value)),
+            "--plp-tb-mt-m": px(num(s.value.TOOLBAR_MARGIN_TOP_MOBILE, num(s.value.TOOLBAR_MARGIN_TOP, tbTop.value))),
+            "--plp-tb-mb-m": px(num(s.value.TOOLBAR_MARGIN_BOTTOM_MOBILE, num(s.value.TOOLBAR_MARGIN_BOTTOM, tbBottom.value))),
+            "--plp-grid-pt": px(num(s.value.GRID_PADDING_TOP, 24)),
+            "--plp-grid-pb": px(num(s.value.GRID_PADDING_BOTTOM, 0)),
+            "--plp-grid-pt-m": px(num(s.value.GRID_PADDING_TOP_MOBILE, num(s.value.GRID_PADDING_TOP, 24))),
+            "--plp-grid-pb-m": px(num(s.value.GRID_PADDING_BOTTOM_MOBILE, num(s.value.GRID_PADDING_BOTTOM, 0))),
+          }
+        : {}),
+
+      // layout
+      "--plp-sidebar-w": px(num(s.value.SIDEBAR_WIDTH, 260)),
+      "--plp-sidebar-gap": px(num(s.value.SIDEBAR_GAP, 40)),
+
+      // filters
+      "--pf-swatch": px(num(s.value.SWATCH_SIZE, 28)),
+
+      // grid
+      "--plp-cols": effectiveColumns.value,
+      "--plp-cols-tablet": Math.min(effectiveColumns.value, num(s.value.COLUMNS_TABLET, 3)),
+      "--plp-cols-mobile": Math.min(2, Math.max(1, num(s.value.COLUMNS_MOBILE, 2))),
+      "--plp-gap-x": px(num(s.value.GRID_GAP_X, 16)),
+      "--plp-gap-y": px(num(s.value.GRID_GAP_Y, 32)),
+      "--plp-gap-mobile": px(num(s.value.GRID_GAP_MOBILE, 8)),
+    }),
+  }));
+
+  const rootStyle = computed(() => ({
+    ...shellStyle.value,
+    ...cssVars.value,
+    "--plp-inner-max": innerStyle.value.maxWidth,
+  }));
+
+  /** The teleported drawer needs the colours and vars, not the section's box. */
+  const drawerStyle = computed(() => ({ ...scheme.value.style, ...cssVars.value }));
+
+  const rootClasses = computed(() => [
+    customClass.value,
+    `osi-plp--layout-${pageLayout.value.toLowerCase().replace("_", "-")}`,
+    `osi-plp--toolbar-${toolbarStyle.value.toLowerCase()}`,
+    `osi-plp--align-${align.value}`,
+    {
+      "osi-plp--toolbar-bleed": toolbarFullWidth.value,
+      "osi-plp--toolbar-sticky": bool(s.value.TOOLBAR_STICKY, false),
+      "osi-plp--sidebar-sticky": bool(s.value.SIDEBAR_STICKY, true),
+      "osi-plp--animate": animate.value,
+    },
+  ]);
+
+  /* ------------------------------------------------------------ labels */
+
+  /** "{terms}" in a label: what was searched (search page). */
+  const withTerms = (text) => String(text ?? "").replaceAll("{terms}", terms.value);
+
+  const L = computed(() => ({
+    filter: t(s.value.FILTER_BUTTON_LABEL) || (showSort.value ? "Filter & sort" : "Filter"),
+    filters: t(s.value.FILTER_TITLE) || "Filters",
+    sortBy: t(s.value.SORT_LABEL) || "Sort by",
+    apply: t(s.value.APPLY_LABEL) || "Apply",
+    clear: t(s.value.CLEAR_LABEL) || "Clear all",
+    loadMore: t(s.value.LOAD_MORE_LABEL) || "Load more",
+    emptyTitle: withTerms(t(s.value.EMPTY_TITLE)) || "No products found",
+    emptyText: withTerms(t(s.value.EMPTY_TEXT)) || "",
+    product: t(s.value.COUNT_SINGULAR) || "product",
+    products: t(s.value.COUNT_PLURAL) || "products",
+  }));
+
+  const countLabel = computed(() => `${total.value} ${total.value === 1 ? L.value.product : L.value.products}`);
+
+  /* --------------------------------------------------------------- drawer */
+
+  const drawerOpen = ref(false);
+  const draftValues = ref([]);
+  const draftOrdering = ref("");
+  useBodyScrollLock(drawerOpen);
+
+  function openDrawer() {
+    draftValues.value = [...selectedValues.value];
+    draftOrdering.value = ordering.value;
+    drawerOpen.value = true;
+  }
+  function closeDrawer() {
+    drawerOpen.value = false;
+  }
+  function toggleDraft(id) {
+    const set = new Set(draftValues.value);
+    set.has(id) ? set.delete(id) : set.add(id);
+    draftValues.value = [...set];
+  }
+  async function applyDrawer() {
+    await page.setValues(draftValues.value);
+    if (draftOrdering.value !== ordering.value) await page.setOrdering(draftOrdering.value);
+    closeDrawer();
+  }
+  async function clearDrawer() {
+    draftValues.value = [];
+    draftOrdering.value = "";
+    await page.clearFilters();
+    closeDrawer();
+  }
+
+  function onKeydown(e) {
+    if (e.key === "Escape" && drawerOpen.value) closeDrawer();
+  }
+
+  /* ------------------------------------------------------------ pagination */
+
+  const root = ref(null);
+  const sentinel = ref(null);
+  let observer = null;
+
+  function setupObserver() {
+    observer?.disconnect();
+    observer = null;
+    if (pagination.value !== "INFINITE" || !sentinel.value || typeof IntersectionObserver === "undefined") return;
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) page.loadMore();
+      },
+      { rootMargin: "800px 0px" }
+    );
+    observer.observe(sentinel.value);
+  }
+
+  watch([sentinel, pagination], setupObserver);
+
+  const pageWindow = computed(() => {
+    const current = page.page.value;
+    const last = pageCount.value;
+    const out = new Set([1, last, current, current - 1, current + 1]);
+    const list = [...out].filter((n) => n >= 1 && n <= last).sort((a, b) => a - b);
+    const withGaps = [];
+    list.forEach((n, i) => {
+      if (i && n - list[i - 1] > 1) withGaps.push(`gap-${n}`);
+      withGaps.push(n);
+    });
+    return withGaps;
+  });
+
+  async function goToPage(n) {
+    await page.goToPage(n);
+    root.value?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+
+  onMounted(() => {
+    window.addEventListener("keydown", onKeydown);
+    setupObserver();
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("keydown", onKeydown);
+    observer?.disconnect();
+  });
+
+  return { LISTING_BLOCKS, effectiveSection, s, t, shellStyle, innerStyle, align, customClass, scheme, page, kind, terms, title, description, image, breadcrumbs, navItems, sortOptions, ordering, selectedValues, filters, filtersPending, activeFilters, products, total, pageCount, pagination, pending, hasMore, loadingMore, blockMode, isResults, flowMode, PART, tree, flow, orderOf, isPreview, awaitingTerms, toolbarOrder, gridOrder, blockChunks, cardTemplate, cardItems, itemsById, num, bool, pick, WEIGHTS, CASES, weight, JUSTIFY, showBreadcrumbs, showTitle, showDescription, bannerStyle, wantsSidebar, pageLayout, hasSidebarLayout, navPosition, navAlign, navLayout, navVariant, navProps, showFilters, showSort, filterPosition, sortInToolbar, sortInFilters, sortInDrawer, swatchShape, showActiveFilters, drawerSide, sidebarHasNav, sidebarHasFilters, showSidebar, showToolbar, toolbarFullWidth, isNarrow, narrowQuery, onNarrowChange, toolbarStyle, showCount, showColumnSwitcher, desktopFilterButton, mobileFilterButton, pos, toolbarSlots, columns, userColumns, effectiveColumns, columnChoices, animate, showProgress, cardSettings, px, compact, tbTop, tbBottom, cssVars, rootStyle, drawerStyle, rootClasses, withTerms, L, countLabel, drawerOpen, draftValues, draftOrdering, openDrawer, closeDrawer, toggleDraft, applyDrawer, clearDrawer, onKeydown, root, sentinel, observer, setupObserver, pageWindow, goToPage };
+}