@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/components/CartDrawer.js

@@ -0,0 +1,273 @@
+import CartServices from "#osi/services/CartServices";
+import ProductServices from "#osi/services/ProductServices";
+
+export default function useLogic() {
+  /**
+   * Cart drawer — Shopify-style, driven by the theme's Cart settings
+   * (CART_DRAWER_*): title and count, width, colour scheme, empty state,
+   * free-shipping progress, product recommendations, subtotal note, checkout
+   * label and a "Continue shopping" link.
+   *
+   * Teleported into #osi-teleport-root (inside .osi-root), not <body>: the
+   * theme's button / field styles and colours only apply inside it.
+   */
+  const settings = useThemeGroup("CART");
+  const t = useT();
+
+  /**
+   * Texts fall back to their default when left empty — clearing a field brings
+   * the default back instead of leaving a blank heading or button.
+   */
+  const TEXT_DEFAULTS = {
+    CART_DRAWER_TITLE: "Your cart",
+    CART_DRAWER_EMPTY_TITLE: "Your cart is empty",
+    CART_DRAWER_EMPTY_TEXT: "Have a look around — we think you will find something you love.",
+    CART_DRAWER_EMPTY_BUTTON: "Continue shopping",
+    CART_DRAWER_FREE_SHIPPING_MESSAGE: "You're {amount} away from free shipping",
+    CART_DRAWER_FREE_SHIPPING_SUCCESS: "You've got free shipping!",
+    CART_DRAWER_RECOMMENDATIONS_TITLE: "You may also like",
+    CART_DRAWER_SUBTOTAL_NOTE: "Taxes and shipping calculated at checkout.",
+    CART_DRAWER_CHECKOUT_LABEL: "Check out",
+    CART_DRAWER_RECS_ADD_LABEL: "Add",
+  };
+  const txt = (key) => String(t(settings.value[key]) ?? "").trim() || TEXT_DEFAULTS[key] || "";
+  const scheme = useColorScheme(computed(() => settings.value.CART_DRAWER_COLOR_SCHEME || null));
+  const { isCartSidebarVisible, toggleCartSidebar } = useSidebar();
+  const { cartItems, cartTotal, count, fetchCart } = useCart();
+  const { showApiError } = useApiErrorToast();
+  const { mediaUrl } = useMediaUrl();
+  const { productUrl } = useProductUrl();
+  const { handleAddToCart } = useAddToCart();
+  const { store } = useStorefront();
+
+  const currency = computed(
+    () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+  );
+  const money = (n) => `${currency.value}${Number(n || 0).toFixed(2).replace(/\.00$/, "")}`;
+
+  const px = (v, d) => `${Number.isFinite(Number(v)) && v !== "" && v != null ? Number(v) : d}px`;
+  const has = (v) => v !== "" && v != null;
+
+  /**
+   * A button's look from its CART_DRAWER_<name>_* settings. Nothing set: the
+   * theme's button (Theme settings → Buttons). A style picks the theme's
+   * variant; colours / radius override just those bits (--btn-* vars that
+   * .osi-btn reads).
+   */
+  const VARIANTS = {
+    SOLID: "osi-btn--solid",
+    OUTLINE: "osi-btn--outline",
+    SECONDARY: "osi-btn--secondary",
+    UNDERLINE: "osi-btn--underline",
+  };
+  function buttonVars(prefix) {
+    const s = settings.value;
+    const style = {};
+    if (s[`${prefix}_BG`]) style["--btn-bg"] = s[`${prefix}_BG`];
+    if (s[`${prefix}_TEXT`]) style["--btn-fg"] = s[`${prefix}_TEXT`];
+    if (s[`${prefix}_BORDER`]) style["--btn-border-color"] = s[`${prefix}_BORDER`];
+    if (s[`${prefix}_HOVER_BG`]) style["--btn-hover-bg"] = s[`${prefix}_HOVER_BG`];
+    if (s[`${prefix}_HOVER_TEXT`]) style["--btn-hover-fg"] = s[`${prefix}_HOVER_TEXT`];
+    if (has(s[`${prefix}_RADIUS`])) style["--btn-radius"] = px(s[`${prefix}_RADIUS`], 0);
+    return style;
+  }
+  function button(prefix) {
+    return {
+      class: VARIANTS[String(settings.value[`${prefix}_STYLE`] || "").toUpperCase()] ?? "",
+      style: buttonVars(prefix),
+    };
+  }
+  const checkoutBtn = computed(() => button("CART_DRAWER_CHECKOUT"));
+  const emptyBtn = computed(() => button("CART_DRAWER_EMPTY_BTN"));
+  const addBtn = computed(() => button("CART_DRAWER_RECS_ADD"));
+
+  /** Recommendations' "between products": nothing, a border, or a line. */
+  const cardStyle = computed(() => {
+    const s = settings.value;
+    // Older setting: a border on / off.
+    const v = s.CART_DRAWER_RECS_CARD_STYLE || (s.CART_DRAWER_RECS_CARD_BORDER ? "BORDER" : "NONE");
+    return String(v).toLowerCase();
+  });
+  const RATIOS = { SQUARE: "1 / 1", PORTRAIT: "3 / 4", LANDSCAPE: "4 / 3" };
+
+  const rootStyle = computed(() => {
+    const s = settings.value;
+    const style = {
+      ...scheme.value.style,
+      "--cart-w": `${Number(s.CART_DRAWER_WIDTH) || 440}px`,
+      // Recommendations
+      "--recs-cols": String(Math.max(1, Math.min(3, Number(s.CART_DRAWER_RECS_COLUMNS) || 2))),
+      "--recs-gap": px(s.CART_DRAWER_RECS_GAP, 12),
+      "--recs-ratio": RATIOS[s.CART_DRAWER_RECS_IMAGE_RATIO] ?? RATIOS.PORTRAIT,
+      "--recs-img": px(s.CART_DRAWER_RECS_IMAGE_SIZE, 72),
+      "--recs-img-r": px(s.CART_DRAWER_RECS_IMAGE_RADIUS, 6),
+      "--recs-card-r": px(s.CART_DRAWER_RECS_CARD_RADIUS, 8),
+      // Each side on its own; the older single padding is the fallback.
+      "--recs-card-px": px(s.CART_DRAWER_RECS_CARD_PADDING_X ?? s.CART_DRAWER_RECS_CARD_PADDING, 0),
+      "--recs-card-py": px(s.CART_DRAWER_RECS_CARD_PADDING_Y ?? s.CART_DRAWER_RECS_CARD_PADDING, 0),
+      "--recs-lines": String(Math.max(1, Number(s.CART_DRAWER_RECS_NAME_LINES) || 2)),
+      "--recs-name": px(s.CART_DRAWER_RECS_NAME_SIZE, 13),
+      "--recs-price": px(s.CART_DRAWER_RECS_PRICE_SIZE, 13),
+    };
+    // Own background / text colour over the scheme's.
+    if (s.CART_DRAWER_BACKGROUND) style["--osi-bg"] = s.CART_DRAWER_BACKGROUND;
+    if (s.CART_DRAWER_TEXT_COLOR) style["--osi-text"] = s.CART_DRAWER_TEXT_COLOR;
+    if (s.CART_DRAWER_RECS_CARD_BACKGROUND) style["--recs-card-bg"] = s.CART_DRAWER_RECS_CARD_BACKGROUND;
+    if (s.CART_DRAWER_RECS_PRICE_COLOR) style["--recs-price-color"] = s.CART_DRAWER_RECS_PRICE_COLOR;
+    if (s.CART_DRAWER_RECS_LINE_COLOR) style["--recs-line"] = s.CART_DRAWER_RECS_LINE_COLOR;
+    // Quantity buttons (inside each cart line): picked up by .osi-qty-btn below.
+    const q = buttonVars("CART_DRAWER_QTY");
+    for (const [k, v] of Object.entries(q)) style[k.replace("--btn-", "--qty-")] = v;
+    if (has(s.CART_DRAWER_QTY_SIZE)) style["--qty-size"] = px(s.CART_DRAWER_QTY_SIZE, 30);
+    return style;
+  });
+
+  /* ---------------------------------------------------------------- lines */
+
+  // Per-line, not a single global flag: one slow line shouldn't disable the
+  // controls on every other line in the drawer.
+  const updatingIds = ref(new Set());
+  const isUpdating = (item) => updatingIds.value.has(item.id);
+
+  async function edit(item, action) {
+    if (isUpdating(item)) return;
+    updatingIds.value = new Set(updatingIds.value).add(item.id);
+    try {
+      await CartServices.EditCart(item.id, item.quantity_step || 1, action);
+      await fetchCart();
+    } catch (error) {
+      showApiError(error, "Couldn't update the cart.");
+    } finally {
+      const next = new Set(updatingIds.value);
+      next.delete(item.id);
+      updatingIds.value = next;
+    }
+  }
+  const increase = (item) => edit(item, "add");
+  const decrease = (item) => edit(item, "remove");
+
+  function close() {
+    toggleCartSidebar(false);
+  }
+  function go(path) {
+    close();
+    navigateTo(path || "/");
+  }
+
+  /* -------------------------------------------------------- free shipping */
+
+  const threshold = computed(() => Number(settings.value.CART_DRAWER_FREE_SHIPPING_THRESHOLD) || 0);
+  const shipping = computed(() => {
+    if (!settings.value.CART_DRAWER_FREE_SHIPPING || threshold.value <= 0) return null;
+    const total = Number(cartTotal.value) || 0;
+    const left = Math.max(0, threshold.value - total);
+    const done = left <= 0;
+    const s = settings.value;
+    return {
+      percent: Math.min(100, (total / threshold.value) * 100),
+      done,
+      text: done
+        ? txt("CART_DRAWER_FREE_SHIPPING_SUCCESS")
+        : txt("CART_DRAWER_FREE_SHIPPING_MESSAGE").replace("{amount}", money(left)),
+      // Its own colour once reached, if set.
+      color: (done && s.CART_DRAWER_PROGRESS_DONE_COLOR) || s.CART_DRAWER_PROGRESS_COLOR || null,
+    };
+  });
+
+  /* ------------------------------------------------------ recommendations */
+
+  const recs = ref([]);
+  const recsLoading = ref(false);
+  let recsKey = "";
+
+  const pickedIds = computed(() =>
+    (settings.value.CART_DRAWER_RECOMMENDATIONS_PRODUCTS ?? [])
+      .map((v) => (v && typeof v === "object" ? v.id : v))
+      .filter((v) => v != null && v !== "")
+  );
+  const limit = computed(() =>
+    Math.max(1, Math.min(12, Number(settings.value.CART_DRAWER_RECOMMENDATIONS_LIMIT) || 4))
+  );
+
+  /**
+   * Picked products (in their order), or — none picked — products from the
+   * store, fetched by page size. A few extra, so items already in the cart can
+   * be left out.
+   */
+  async function loadRecs() {
+    if (!settings.value.CART_DRAWER_RECOMMENDATIONS) return;
+    const ids = pickedIds.value;
+    const key = `${ids.join(",")}|${limit.value}`;
+    if (key === recsKey && recs.value.length) return;
+    recsKey = key;
+    recsLoading.value = true;
+    try {
+      if (ids.length) {
+        const res = await ProductServices.getProductsByIds(ids);
+        const rows = res?.results ?? res ?? [];
+        const byId = new Map(rows.map((p) => [String(p.id), p]));
+        recs.value = ids.map((id) => byId.get(String(id))).filter(Boolean);
+      } else {
+        const res = await ProductServices.listProducts({ page_size: limit.value + 4 });
+        recs.value = res?.results ?? res ?? [];
+      }
+    } catch {
+      recs.value = [];
+    } finally {
+      recsLoading.value = false;
+    }
+  }
+
+  const inCart = computed(() => new Set(cartItems.value.map((i) => String(i.product?.id ?? i.product_id ?? ""))));
+  const shownRecs = computed(() =>
+    recs.value.filter((p) => !inCart.value.has(String(p.id))).slice(0, limit.value)
+  );
+
+  const recsLayout = computed(() => String(settings.value.CART_DRAWER_RECS_LAYOUT || "GRID").toLowerCase());
+  const pricePos = computed(() => String(settings.value.CART_DRAWER_RECS_PRICE_POSITION || "BELOW").toLowerCase());
+
+  /** Add from the drawer: products with options open their page instead. */
+  const adding = ref(null);
+  async function addRec(product) {
+    if (adding.value) return;
+    adding.value = product.id;
+    try {
+      await handleAddToCart(product);
+      await fetchCart();
+    } catch {
+      // handleAddToCart shows its own error.
+    } finally {
+      adding.value = null;
+    }
+  }
+
+  function priceOf(product) {
+    const parts = String(product?.discounted_price_range ?? product?.price_range ?? product?.price ?? "")
+      .split("-")
+      .map((v) => parseFloat(v))
+      .filter((n) => Number.isFinite(n) && n > 0);
+    if (!parts.length) return "";
+    return parts.length > 1 && parts[0] !== parts[1]
+      ? `${money(parts[0])} – ${money(parts[1])}`
+      : money(parts[0]);
+  }
+
+  // First open (and after the settings change): load suggestions lazily —
+  // most visits never open the cart.
+  watch(isCartSidebarVisible, (open) => open && loadRecs());
+
+  // view_cart: the shopper opened their bag. (Skipped by analytics when the
+  // drawer only opened itself because something was just added.)
+  const analytics = useAnalytics();
+  watch(isCartSidebarVisible, (open) => open && analytics.viewCart(cartItems.value));
+  watch(
+    () => [settings.value.CART_DRAWER_RECOMMENDATIONS, pickedIds.value.join(","), limit.value],
+    () => isCartSidebarVisible.value && loadRecs()
+  );
+
+  // The drawer mounts once in the layout and outlives every page, so it can't
+  // rely on a page's onMounted to load the cart.
+  onMounted(fetchCart);
+
+  return { settings, t, TEXT_DEFAULTS, txt, scheme, isCartSidebarVisible, toggleCartSidebar, cartItems, cartTotal, count, fetchCart, showApiError, mediaUrl, productUrl, handleAddToCart, store, currency, money, px, has, VARIANTS, buttonVars, button, checkoutBtn, emptyBtn, addBtn, cardStyle, RATIOS, rootStyle, updatingIds, isUpdating, edit, increase, decrease, close, go, threshold, shipping, recs, recsLoading, recsKey, pickedIds, limit, loadRecs, inCart, shownRecs, recsLayout, pricePos, adding, addRec, priceOf, analytics };
+}

package/app/logic/components/CartItem.js

@@ -0,0 +1,31 @@
+
+export default function useLogic({ props, emit }) {
+  const { mediaUrl } = useMediaUrl();
+  const { store } = useStorefront();
+
+  const currency = computed(
+    () => store.value?.default_currency?.symbol || store.value?.default_currency?.code || "$"
+  );
+
+  // `item.image` is a bare path on cart lines but a media object elsewhere;
+  // mediaUrl() takes either.
+  const imageSrc = computed(() => mediaUrl(props.item?.image));
+
+  const variantLabel = computed(() => {
+    const values = props.item?.values;
+    if (Array.isArray(values)) return values.length ? values.join(" | ") : "";
+    return values || "";
+  });
+
+  function handleRemove() {
+    if (props.loading) return;
+    emit("remove-item", props.item);
+  }
+
+  function handleAdd() {
+    if (props.loading) return;
+    emit("add-item", props.item);
+  }
+
+  return { mediaUrl, store, currency, imageSrc, variantLabel, handleRemove, handleAdd };
+}

package/app/logic/components/ClassificationBento.js

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

package/app/logic/components/ClassificationCard.js

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

package/app/logic/components/ClassificationCarousel.js

@@ -0,0 +1,115 @@
+import { Autoplay, Pagination } from "swiper/modules";
+
+export default function useLogic({ props }) {
+  const perView = computed(() => Number(props.options.perView) || 4);
+  const gap = computed(() => Number(props.options.gap) || 0);
+
+  // Looping fewer items than fit on screen has nothing to rotate.
+  const loop = computed(() => !!props.options.loop && props.items.length > perView.value);
+
+  const { slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd } = useCarousel({
+    items: () => props.items,
+    loop,
+    minLoopSlides: () => perView.value * 3,
+  });
+
+  const breakpoints = computed(() => ({
+    0: {
+      slidesPerView: Number(props.options.perViewMobile) || 1.3,
+      spaceBetween: Number(props.options.gapMobile ?? Math.min(gap.value, 16)),
+    },
+    640: { slidesPerView: Number(props.options.perViewTablet) || 2.2, spaceBetween: gap.value },
+    1024: { slidesPerView: perView.value, spaceBetween: gap.value },
+  }));
+
+  const autoplay = computed(() =>
+    props.options.autoplay && props.items.length > perView.value
+      ? {
+          delay: (Number(props.options.speed) || 5) * 1000,
+          disableOnInteraction: false,
+          // Autoplay that keeps moving while someone is reading a card is the
+          // single most complained-about carousel behaviour.
+          pauseOnMouseEnter: true,
+        }
+      : false
+  );
+
+  // Arrows and dots for a rail that doesn't scroll are noise.
+  const overflows = computed(() => props.items.length > perView.value);
+  const arrowPosition = computed(() => String(props.options.arrowPosition || "SIDES").toUpperCase());
+  const showArrows = computed(
+    () => props.options.showArrows !== false && overflows.value && arrowPosition.value !== "HEADER"
+  );
+  const showDots = computed(() => !!props.options.showDots && overflows.value);
+  const dotsStyle = computed(() => String(props.options.dotsStyle || "DOTS").toUpperCase());
+
+  // Swiper reads the pagination type (bullets / progressbar / fraction) once, at
+
+  // init. Changing the prop later updates our CSS classes but leaves the old
+
+  // pagination element in place, so the preview looked stale until a reload.
+
+  // Keying the Swiper on these options remounts it whenever they change.
+
+  const paginationKey = computed(
+
+    () => `${showDots.value}-${dotsStyle.value}-${!!props.options.dotsDynamic}`
+
+  );
+
+
+
+  const pagination = computed(() => {
+    if (!showDots.value) return false;
+    if (dotsStyle.value === "PROGRESS") return { type: "progressbar" };
+    if (dotsStyle.value === "FRACTION") return { type: "fraction" };
+    return { clickable: true, dynamicBullets: !!props.options.dotsDynamic };
+  });
+
+  /* -------------------------------------------------- arrows on the images */
+
+  const rail = ref(null);
+  const arrowTop = ref(null);
+  let observer = null;
+
+  function measureArrowTop() {
+    const el = rail.value;
+    if (!el) return;
+    // The card template's image (or, for an old card, its frame).
+    const frame = el.querySelector(".osi-cb-cimg, .osi-cc__frame");
+    if (!frame) {
+      arrowTop.value = null;
+      return;
+    }
+    const railBox = el.getBoundingClientRect();
+    const box = frame.getBoundingClientRect();
+    arrowTop.value = Math.round(box.top - railBox.top + box.height / 2);
+  }
+
+  onMounted(() => {
+    nextTick(measureArrowTop);
+    if (typeof ResizeObserver !== "undefined" && rail.value) {
+      observer = new ResizeObserver(measureArrowTop);
+      observer.observe(rail.value);
+    }
+  });
+  onBeforeUnmount(() => observer?.disconnect());
+  watch(() => props.items.length, () => nextTick(measureArrowTop));
+
+  const railStyle = computed(() =>
+    arrowTop.value != null ? { "--osi-cl-arrow-top": `${arrowTop.value}px` } : {}
+  );
+
+  const railClasses = computed(() => [
+    props.options.railClass,
+    `osi-cl-rail--arrows-${arrowPosition.value.toLowerCase()}`,
+    `osi-cl-rail--dots-${dotsStyle.value.toLowerCase()}`,
+    {
+      "osi-cl-rail--has-dots": showDots.value,
+      "osi-cl-rail--arrows-hover": props.options.arrowsOnHover,
+      "osi-cl-rail--arrows-mobile": props.options.arrowsOnMobile,
+    },
+  ]);
+
+  return { perView, gap, loop, slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd, breakpoints, autoplay, overflows, arrowPosition, showArrows, showDots, dotsStyle, paginationKey, pagination, rail, arrowTop, observer, measureArrowTop, railStyle, railClasses, Autoplay, Pagination };
+}

package/app/logic/components/ClassificationEditorial.js

@@ -0,0 +1,41 @@
+
+export default function useLogic({ props }) {
+  const root = ref(null);
+  const columns = ref(3);
+
+  function readColumns() {
+    const el = root.value;
+    if (!el) return;
+    const styles = getComputedStyle(el);
+    const phone = window.matchMedia("(max-width: 767px)").matches;
+    const n = Number(styles.getPropertyValue(phone ? "--osi-cl-ed-cols-mobile" : "--osi-cl-ed-cols"));
+    if (Number.isFinite(n) && n > 0) columns.value = Math.round(n);
+  }
+  onMounted(() => {
+    readColumns();
+    window.addEventListener("resize", readColumns, { passive: true });
+  });
+  onBeforeUnmount(() => window.removeEventListener("resize", readColumns));
+  // The column settings change in the builder without a resize.
+  onUpdated(readColumns);
+
+  const SHAPES = ["3 / 4", "1 / 1", "4 / 5"];
+
+  const stacks = computed(() => {
+    const out = Array.from({ length: columns.value }, () => []);
+    props.items.forEach((item, i) => {
+      // Shift the shape cycle one step per row: with as many columns as shapes,
+      // `i % shapes` alone would give every item in a column the same shape.
+      const row = Math.floor(i / columns.value);
+      const shape = SHAPES[(i + row) % SHAPES.length];
+      out[i % columns.value].push({
+        item,
+        // Overrides the card image's own shape (the template sets one for all).
+        style: props.vary ? { "--cb-ratio-override": shape, "--cb-h-override": "auto" } : null,
+      });
+    });
+    return out;
+  });
+
+  return { root, columns, readColumns, SHAPES, stacks };
+}

package/app/logic/components/ClassificationFeatured.js

@@ -0,0 +1,57 @@
+/**
+ * FEATURED — one category or collection, promoted.
+ *
+ * Covers both of the brief's designs. "Split" is media LEFT or RIGHT; "image
+ * overlay" is media BACKGROUND. They're one component because the only thing
+ * that changes is where the media sits relative to the text.
+ *
+ * Columns are `fr` units, not percentages: a percentage column plus a gap
+ * overflows its container, which is the same bug the footer had. `fr` resolves
+ * after the gap is subtracted.
+ *
+ * Link structure: the button is the real link. When the merchant turns the
+ * button off, the media becomes the link instead — so the section is never a
+ * dead end, and there's never more than one tab stop for the same destination.
+ */
+
+
+export default function useLogic({ props }) {
+  const HEIGHTS = {
+    AUTO: null,
+    SMALL: "320px",
+    MEDIUM: "460px",
+    LARGE: "620px",
+    FULL: "100svh",
+  };
+
+  const position = computed(() =>
+    String(props.options.mediaPosition ?? "RIGHT").toUpperCase()
+  );
+  const isBackground = computed(() => position.value === "BACKGROUND");
+
+  const columns = computed(() => {
+    const media = Math.min(75, Math.max(25, Number(props.options.mediaWidth) || 50));
+    return `${media}fr ${100 - media}fr`;
+  });
+
+  const style = computed(() => {
+    const out = {};
+    const height = HEIGHTS[String(props.options.height ?? "AUTO").toUpperCase()];
+    if (height) out["--osi-cf-height"] = height;
+    if (!isBackground.value) out.gridTemplateColumns = columns.value;
+    return out;
+  });
+
+  const classes = computed(() => [
+    `osi-cf--${position.value.toLowerCase()}`,
+    `osi-cf--v-${String(props.options.verticalAlignment ?? "CENTER").toLowerCase()}`,
+    { "osi-cf--media-first": props.options.mobileMediaFirst !== false },
+  ]);
+
+  const showDescription = computed(
+    () => props.config.showDescription && !!props.item.description
+  );
+  const showCount = computed(() => props.config.showCount && props.item.count != null);
+
+  return { HEIGHTS, position, isBackground, columns, style, classes, showDescription, showCount };
+}

package/app/logic/components/ClassificationGrid.js

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

package/app/logic/components/ClassificationNav.js

@@ -0,0 +1,61 @@
+/**
+ * The category / collection switcher on the listing page.
+ *
+ * One component, every look: plain text links, pills (theme buttons), image
+ * tiles (circle / square / rounded / portrait / landscape) with the name under,
+ * beside or on top of the picture, or cards — laid out as a scrolling row, a
+ * wrapping row, a grid, or a vertical list for the sidebar.
+ *
+ * Sizes and colours arrive as CSS variables set once by the section
+ * (--cnav-*), so dragging a slider in the editor doesn't re-render every tile.
+ */
+
+
+export default function useLogic({ props }) {
+  const lower = (v) => String(v || "").toLowerCase().replace(/_/g, "-");
+
+  const isList = computed(() => props.layout === "LIST");
+  const hasMedia = computed(() => props.variant === "IMAGE" || props.variant === "CARD");
+  const overlay = computed(
+    () => hasMedia.value && !isList.value && props.textPosition.startsWith("OVERLAY")
+  );
+  const captionOutside = computed(
+    () => !hasMedia.value || isList.value || ["BELOW", "BESIDE"].includes(props.textPosition)
+  );
+
+  const rootClasses = computed(() => [
+    `osi-cnav--${lower(props.layout)}`,
+    `osi-cnav--${lower(props.variant)}`,
+    `osi-cnav--shape-${lower(props.shape)}`,
+    `osi-cnav--text-${lower(isList.value ? "BESIDE" : props.textPosition)}`,
+    `osi-cnav--active-${lower(props.activeStyle)}`,
+    `osi-cnav--hover-${lower(props.hover)}`,
+    `osi-cnav--fit-${lower(props.imageFit)}`,
+  ]);
+
+  function pillClasses(item) {
+    if (props.variant !== "PILL" || isList.value) return [];
+    return ["osi-btn", "osi-btn--sm", item.active ? "" : "osi-btn--secondary"];
+  }
+
+  const initial = (title) => String(title || "?").trim().charAt(0).toUpperCase();
+
+  /**
+   * A scrolling row starts at its first item, so a current item further along
+   * could be off screen on a phone. Bring it into view once, without moving the
+   * page itself.
+   */
+  const list = ref(null);
+  function revealActive() {
+    const el = list.value;
+    if (!el || props.layout !== "SCROLL" || el.scrollWidth <= el.clientWidth) return;
+    const active = el.querySelector(".is-active");
+    if (!active) return;
+    const left = active.offsetLeft - (el.clientWidth - active.offsetWidth) / 2;
+    el.scrollTo({ left: Math.max(0, left), behavior: "auto" });
+  }
+  onMounted(() => nextTick(revealActive));
+  watch(() => props.items.map((i) => `${i.key}:${i.active}`).join(), () => nextTick(revealActive));
+
+  return { lower, isList, hasMedia, overlay, captionOutside, rootClasses, pillClasses, initial, list, revealActive };
+}

package/app/logic/components/ClassificationPart.js

@@ -0,0 +1,72 @@
+
+export default function useLogic({ props }) {
+  const t = useT();
+  const plp = inject("osiPlp", null);
+  const { mediaUrl } = useMediaUrl();
+  const s = computed(() => props.node.s ?? {});
+  const type = computed(() => props.node.type);
+
+  const title = computed(() =>
+    plp?.kind.value === "ALL" ? t(s.value.ALL_TITLE) || "All products" : plp?.title.value || ""
+  );
+  const description = computed(() => plp?.description.value || "");
+  const lines = computed(() => {
+    const n = Number(s.value.LINES);
+    return Number.isFinite(n) && n > 0 ? n : null;
+  });
+  const crumbs = computed(() => {
+    const trail = (plp?.breadcrumbs.value ?? []).map((c) => ({ ...c }));
+    if (!trail.length) return [];
+    trail[0].title = t(s.value.HOME_LABEL) || trail[0].title || "Home";
+    trail[trail.length - 1].title = title.value;
+    return trail;
+  });
+  const imageSrc = computed(() => mediaUrl(s.value.MEDIA?.path ?? s.value.MEDIA ?? "") || plp?.image.value || "");
+  const px = (v, d) => `${Number.isFinite(Number(v)) && v !== "" && v != null ? Number(v) : d}px`;
+  const imageVars = computed(() => ({
+    "--cp-h": px(s.value.HEIGHT, 320),
+    "--cp-h-m": px(s.value.HEIGHT_MOBILE, 200),
+    "--cp-r": px(s.value.RADIUS, 0),
+  }));
+  const { isPreview } = useBuilderPreview();
+
+  /* ------------------------------------------------------------ search */
+
+  const router = useRouter();
+  const terms = computed(() => plp?.terms?.value ?? "");
+  const searchTitle = computed(() => {
+    const text = terms.value
+      ? t(s.value.RESULTS_TITLE) || "Results for \u201c{terms}\u201d"
+      : t(s.value.TITLE) || "Search results";
+    return text.replaceAll("{terms}", terms.value);
+  });
+
+  const query = ref(terms.value);
+  watch(terms, (value) => (query.value = value));
+
+  const submit = computed(() => String(s.value.SUBMIT || "ICON").toUpperCase());
+  const SEARCH_JUSTIFY = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+  const searchVars = computed(() => {
+    const n = (v) => (v === "" || v == null || !Number.isFinite(Number(v)) ? null : Number(v));
+    const out = { "--sb-max": `${n(s.value.MAX_WIDTH) ?? 560}px` };
+    const align = SEARCH_JUSTIFY[String(s.value.ALIGNMENT || "").toUpperCase()];
+    if (align) out["--sb-justify"] = align;
+    if (n(s.value.HEIGHT) != null) out["--sb-h"] = `${n(s.value.HEIGHT)}px`;
+    if (n(s.value.INPUT_RADIUS) != null) out["--in-radius"] = `${n(s.value.INPUT_RADIUS)}px`;
+    if (n(s.value.FONT_SIZE) != null) out["--in-fs"] = `${n(s.value.FONT_SIZE)}px`;
+    return out;
+  });
+
+  function runSearch() {
+    const q = query.value.trim();
+    // The editor previews the page; it doesn't navigate.
+    if (isPreview.value || !q) return;
+    // A new search starts clean: no filters, sort or page from the last one.
+    router.push({ path: "/search", query: { q } });
+  }
+  function clearSearch() {
+    query.value = "";
+  }
+
+  return { t, plp, mediaUrl, s, type, title, description, lines, crumbs, imageSrc, px, imageVars, isPreview, router, terms, searchTitle, query, submit, SEARCH_JUSTIFY, searchVars, runSearch, clearSearch };
+}