@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/logic/components/ProductInfoBlock.js

@@ -0,0 +1,411 @@
+import { NuxtLink } from "#components";
+import { ICON_PRESETS } from "#osi/utils/icon-presets";
+import { useProductDetail } from "#osi/composables/useProductDetail";
+import { buttonClasses, buttonVars } from "#osi/composables/useButtonStyle";
+
+export default function useLogic({ props }) {
+  const detail = useProductDetail();
+  const t = useT();
+  const { mediaUrl } = useMediaUrl();
+  const { addToWishlist, wishlistStatus } = useWishlist();
+  const accordion = inject("osi-pdp-accordion", null);
+
+  const type = computed(() => props.block.type);
+  const s = computed(() => props.block.settings ?? {});
+
+  /* ------------------------------------------------------------ helpers */
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+  const bool = (v, d) => (has(v) ? v === true || v === "true" : d);
+  const compact = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => has(v)));
+
+  /* ----------------------------------------------------------- the box */
+
+  /** Space under each block type when the merchant hasn't set one. */
+  const TYPE_SPACING = {
+    BREADCRUMBS: 12,
+    TITLE: 6,
+    PRICE: 20,
+    VARIANT_PICKER: 24,
+    QUANTITY: 16,
+    BUY_BUTTONS: 24,
+    DESCRIPTION: 24,
+    TEXT: 16,
+    COLLAPSIBLE: 0,
+    ICON_TEXT: 10,
+    INVENTORY: 12,
+    PRODUCT_META: 16,
+    SHARE: 16,
+    DIVIDER: 0,
+    BUTTON: 16,
+    MEDIA: 16,
+    CUSTOM_HTML: 16,
+  };
+
+  const ALIGN = {
+    START: { text: "start", items: "flex-start" },
+    CENTER: { text: "center", items: "center" },
+    END: { text: "end", items: "flex-end" },
+  };
+
+  const blockStyle = computed(() => {
+    const v = s.value;
+    const bottomDefault = `${TYPE_SPACING[type.value] ?? 16}px`;
+    const align = ALIGN[v.BLOCK_ALIGN];
+    return compact({
+      "--b-pt": px(v.BLOCK_PADDING_TOP) ?? "0px",
+      "--b-pb": px(v.BLOCK_PADDING_BOTTOM) ?? bottomDefault,
+      "--b-pl": px(v.BLOCK_PADDING_LEFT) ?? "0px",
+      "--b-pr": px(v.BLOCK_PADDING_RIGHT) ?? "0px",
+      "--b-pt-m": px(v.BLOCK_PADDING_TOP_MOBILE),
+      "--b-pb-m": px(v.BLOCK_PADDING_BOTTOM_MOBILE),
+      "--b-pl-m": px(v.BLOCK_PADDING_LEFT_MOBILE),
+      "--b-pr-m": px(v.BLOCK_PADDING_RIGHT_MOBILE),
+      "--b-bg": v.BLOCK_BG_COLOR,
+      // Inside padding of the box (only when it has a background or border).
+      "--b-box-p": px(v.BLOCK_BOX_PADDING),
+      "--b-radius": px(v.BLOCK_RADIUS),
+      "--b-border": has(v.BLOCK_BORDER_WIDTH) && Number(v.BLOCK_BORDER_WIDTH) > 0
+        ? `${Number(v.BLOCK_BORDER_WIDTH)}px solid ${v.BLOCK_BORDER_COLOR || "var(--osi-border, #e5e5e5)"}`
+        : undefined,
+      color: v.BLOCK_TEXT_COLOR,
+      // Alignment is inherited from the column unless this block sets its own.
+      "--osi-pdp-justify": align?.items,
+      "--osi-pdp-text-align": align?.text,
+    });
+  });
+
+  const boxed = computed(() => !!(s.value.BLOCK_BG_COLOR || Number(s.value.BLOCK_BORDER_WIDTH) > 0));
+
+  const blockClasses = computed(() => [
+    `osi-pdp-block--${String(type.value).toLowerCase().replace(/_/g, "-")}`,
+    `osi-pdp-block--show-${String(s.value.BLOCK_VISIBILITY || "ALL").toLowerCase()}`,
+    { "osi-pdp-block--boxed": boxed.value },
+    s.value.BLOCK_CUSTOM_CLASS,
+  ]);
+
+  /* -------------------------------------------------------- text styles */
+
+  const titleStyle = useTextStyle(() => s.value, {
+    prefix: "TITLE_TEXT",
+    defaults: { size: 28, weight: "REGULAR", font: "HEADING", lineHeight: 120 },
+  });
+  const priceStyle = useTextStyle(() => s.value, {
+    prefix: "PRICE_TEXT",
+    defaults: { size: 18, weight: "REGULAR", font: "BODY" },
+  });
+  const bodyStyle = useTextStyle(() => s.value, {
+    prefix: type.value === "DESCRIPTION" ? "DESCRIPTION_TEXT" : type.value === "TEXT" ? "TEXT_STYLE" : "BLOCK_TEXT",
+    defaults: { size: 14, lineHeight: 170 },
+  });
+  const smallText = useTextStyle(() => s.value, {
+    prefix: "BLOCK_TEXT",
+    defaults: { size: 12, lineHeight: 150 },
+  });
+  // Small labels (crumbs, meta, share) are uppercase by design; only an explicit
+  // BLOCK_TEXT_TRANSFORM changes that.
+  const smallStyle = computed(() => {
+    const { textTransform, ...rest } = smallText.value;
+    return s.value.BLOCK_TEXT_TRANSFORM ? smallText.value : rest;
+  });
+
+  /* -------------------------------------------------------------- icons */
+
+  const ICON_MAP = Object.fromEntries(ICON_PRESETS.map((icon) => [icon.name, icon.svg]));
+  const ICON_MAP_LOWER = Object.fromEntries(
+    ICON_PRESETS.map((icon) => [icon.name.toLowerCase().replace(/\s+/g, "_"), icon.svg])
+  );
+
+  const icon = computed(() => {
+    if (s.value.ICON_SVG) return s.value.ICON_SVG;
+    const key = s.value.ICON_PRESET;
+    if (!key) return "";
+    return ICON_MAP[key] || ICON_MAP_LOWER[String(key).toLowerCase().replace(/\s+/g, "_")] || "";
+  });
+  const iconStyle = computed(() =>
+    compact({ "--icon-size": px(s.value.ICON_SIZE), "--icon-color": s.value.ICON_COLOR })
+  );
+
+  /* -------------------------------------------------------------- title */
+
+  const titleActions = computed(() => String(s.value.TITLE_ACTIONS || "NONE").toUpperCase());
+  const showTitleShare = computed(() => ["SHARE", "BOTH"].includes(titleActions.value));
+  const showTitleWishlist = computed(() => ["WISHLIST", "BOTH"].includes(titleActions.value));
+  const actionStyle = computed(() => String(s.value.TITLE_ACTION_STYLE || "ICON").toLowerCase());
+
+  const wishlisted = computed(
+    () => wishlistStatus.value[detail?.product.value?.id] ?? detail?.product.value?.wishlisted ?? false
+  );
+
+  /* -------------------------------------------------------------- price */
+
+  const priceVars = computed(() =>
+    compact({
+      "--price-sale": s.value.PRICE_SALE_COLOR,
+      "--price-compare": s.value.PRICE_COMPARE_COLOR,
+      "--price-badge-bg": s.value.PRICE_BADGE_BG,
+      "--price-badge-fg": s.value.PRICE_BADGE_COLOR,
+    })
+  );
+  const comparePosition = computed(() => (s.value.PRICE_COMPARE_POSITION === "AFTER" ? "AFTER" : "BEFORE"));
+  const badgeStyle = computed(() => String(s.value.PRICE_BADGE_STYLE || "OUTLINE").toLowerCase());
+
+  /* -------------------------------------------------------- description */
+
+  const expanded = ref(false);
+  const clampable = computed(() => type.value === "DESCRIPTION" && !!s.value.DESCRIPTION_COLLAPSE);
+  const clampStyle = computed(() =>
+    clampable.value && !expanded.value
+      ? { "--osi-pdp-clamp": String(Number(s.value.DESCRIPTION_CLAMP ?? 4)) }
+      : {}
+  );
+
+  /**
+   * "Read more" only when there is more.
+   *
+   * Clamping is a CSS effect, so nothing in the settings can tell whether this
+   * particular description actually overflows — a two-line one was still getting
+   * a button that expanded nothing. The element is measured instead: taller than
+   * its clamped box means there's hidden text.
+   */
+  const rte = ref(null);
+  const overflows = ref(false);
+  let observer = null;
+
+  function measure() {
+    const el = rte.value;
+    if (!el || !clampable.value) {
+      overflows.value = false;
+      return;
+    }
+    if (expanded.value) return; // already open; keep the button so it can close
+    overflows.value = el.scrollHeight - el.clientHeight > 1;
+  }
+
+  if (import.meta.client) {
+    onMounted(async () => {
+      await nextTick();
+      measure();
+      if (typeof ResizeObserver !== "undefined" && rte.value) {
+        // Fonts loading and the column changing width both change the line count.
+        observer = new ResizeObserver(measure);
+        observer.observe(rte.value);
+      }
+      window.addEventListener("resize", measure);
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      window.removeEventListener("resize", measure);
+    });
+    watch(
+      () => [detail?.product.value?.id, s.value.DESCRIPTION_CLAMP, clampable.value].join("|"),
+      async () => {
+        expanded.value = false;
+        await nextTick();
+        measure();
+      }
+    );
+  }
+
+  const showMoreButton = computed(() => clampable.value && (overflows.value || expanded.value));
+
+  /* -------------------------------------------------------- collapsible */
+
+  const localOpen = ref(!!s.value.COLLAPSIBLE_OPEN);
+  const blockId = computed(() => props.block.id ?? props.block.key);
+
+  // Section setting ACCORDION_ONE_OPEN: opening one closes the others.
+  if (accordion && s.value.COLLAPSIBLE_OPEN && !accordion.openId.value) {
+    accordion.openId.value = blockId.value;
+  }
+  const open = computed({
+    get: () => (accordion?.single.value ? accordion.openId.value === blockId.value : localOpen.value),
+    set: (value) => {
+      if (accordion?.single.value) accordion.openId.value = value ? blockId.value : null;
+      else localOpen.value = value;
+    },
+  });
+
+  const collapsibleBody = computed(() => {
+    const policies = detail?.policies.value ?? {};
+    switch (s.value.COLLAPSIBLE_SOURCE) {
+      case "SHIPPING_POLICY":
+        return policies.shipping ?? "";
+      case "RETURN_POLICY":
+        return policies.return_exchange ?? "";
+      case "PRIVACY_POLICY":
+        return policies.privacy ?? "";
+      case "DESCRIPTION":
+        return detail?.product.value?.description ?? "";
+      default:
+        return t(s.value.COLLAPSIBLE_CONTENT) ?? "";
+    }
+  });
+  const hideEmpty = computed(
+    () => type.value === "COLLAPSIBLE" && s.value.COLLAPSIBLE_HIDE_EMPTY !== false && !String(collapsibleBody.value).trim()
+  );
+
+  /**
+   * Does this block have anything to draw?
+   *
+   * Every type used to keep its wrapper even when its own content was empty —
+   * a product with no description, a reassurance line with no text, a picker on
+   * a product without options — and the wrapper's padding left a band of empty
+   * space in the column. An empty block now renders nothing at all.
+   */
+  const text = (v) => String(v ?? "").replace(/<[^>]*>/g, "").trim();
+
+  const hasContent = computed(() => {
+    const product = detail?.product.value;
+    switch (type.value) {
+      // No price: no price block (never "$0").
+      case "PRICE":
+        return !!detail?.priceText.value;
+      case "BREADCRUMBS":
+        return (detail?.breadcrumbs.value ?? []).length > 0;
+      case "TITLE":
+        return !!product?.name;
+      case "DESCRIPTION":
+        return !!text(product?.description);
+      case "TEXT":
+        return !!text(t(s.value.TEXT_CONTENT));
+      case "ICON_TEXT":
+        return !!(text(t(s.value.ICON_TEXT_LABEL)) || icon.value);
+      case "VARIANT_PICKER":
+        return !!detail?.hasOptions.value;
+      case "PRODUCT_META":
+        return !!(
+          (s.value.META_SHOW_SKU !== false && detail?.sku.value) ||
+          (s.value.META_SHOW_BRAND && brand.value) ||
+          (s.value.META_SHOW_CATEGORY && category.value)
+        );
+      case "MEDIA":
+        return !!imageSrc.value;
+      case "CUSTOM_HTML":
+        return !!text(s.value.HTML);
+      case "BUTTON":
+        return !!(linkButtonUrl.value && text(t(s.value.LABEL)));
+      case "COLLAPSIBLE":
+        return !hideEmpty.value;
+      default:
+        return true;
+    }
+  });
+
+  /* ----------------------------------------------------------- inventory */
+
+  const inventoryState = computed(() => {
+    if (!detail) return "IN";
+    if (detail.isComingSoon.value) return "SOON";
+    if (detail.isOutOfStock.value) return "OUT";
+    if (detail.isLowStock.value) return "LOW";
+    return "IN";
+  });
+  const inventoryColor = computed(
+    () =>
+      ({
+        IN: s.value.INVENTORY_IN_COLOR || "#16a34a",
+        LOW: s.value.INVENTORY_LOW_COLOR || "#d97706",
+        OUT: s.value.INVENTORY_OUT_COLOR || "#dc2626",
+        SOON: s.value.INVENTORY_LOW_COLOR || "#d97706",
+      })[inventoryState.value]
+  );
+
+  /* ---------------------------------------------------------------- meta */
+
+  const brand = computed(() => detail?.product.value?.brand?.name ?? "");
+  const category = computed(() => detail?.product.value?.categories?.[0]?.category?.name ?? "");
+
+  /* --------------------------------------------------------------- share */
+
+  const shareStyle = computed(() => String(s.value.SHARE_STYLE || "TEXT").toUpperCase());
+
+  /**
+   * Share opens the device's own share sheet (navigator.share). Desktop browsers
+   * often don't have one — there the block opens a small menu with the networks
+   * and "copy link" instead of silently copying, which looked like nothing had
+   * happened.
+   */
+  const shareMenuOpen = ref(false);
+
+  async function share() {
+    const native = import.meta.client && typeof navigator !== "undefined" && !!navigator.share;
+    if (native) {
+      await detail.shareProduct();
+      return;
+    }
+    shareMenuOpen.value = !shareMenuOpen.value;
+  }
+
+  function closeShareMenu() {
+    shareMenuOpen.value = false;
+  }
+
+  onMounted(() => document.addEventListener("click", onDocumentClick, true));
+  onBeforeUnmount(() => document.removeEventListener("click", onDocumentClick, true));
+
+  const shareRoot = ref(null);
+  function onDocumentClick(event) {
+    if (shareMenuOpen.value && shareRoot.value && !shareRoot.value.contains(event.target)) {
+      closeShareMenu();
+    }
+  }
+  const shareUrl = computed(() => (import.meta.client ? window.location.href : ""));
+  const networks = computed(() => {
+    const url = encodeURIComponent(shareUrl.value);
+    const name = encodeURIComponent(detail?.product.value?.name ?? "");
+    const image = encodeURIComponent(mediaUrl(detail?.product.value?.main_image) ?? "");
+    const all = [
+      { key: "FACEBOOK", label: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+        path: "M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v6h4v-6h3l1-4h-4V8.5a.5.5 0 0 1 .5-.5Z" },
+      { key: "X", label: "X", href: `https://twitter.com/intent/tweet?url=${url}&text=${name}`,
+        path: "M4 4l16 16M20 4 4 20" },
+      { key: "WHATSAPP", label: "WhatsApp", href: `https://wa.me/?text=${name}%20${url}`,
+        path: "M4 20l1.3-4A8 8 0 1 1 8 18.7L4 20Zm5-11c0 3 3 6 6 6l1.5-1.5-2-1-1 .8c-1-.4-2.4-1.8-2.8-2.8l.8-1-1-2L9 9Z" },
+      { key: "PINTEREST", label: "Pinterest", href: `https://pinterest.com/pin/create/button/?url=${url}&media=${image}&description=${name}`,
+        path: "M12 3a9 9 0 0 0-3.3 17.4c-.1-.8 0-1.9.2-2.7l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.5 1.8-2.5.9 0 1.3.7 1.3 1.5 0 .9-.6 2.2-.9 3.4-.2 1 .5 1.9 1.6 1.9 1.9 0 3.3-2 3.3-4.9 0-2.6-1.8-4.4-4.5-4.4-3 0-4.8 2.3-4.8 4.6 0 .9.4 1.9.8 2.4" },
+      { key: "EMAIL", label: "Email", href: `mailto:?subject=${name}&body=${url}`,
+        path: "M3 6h18v12H3zM3 7l9 6 9-6" },
+    ];
+    return all.filter((n) => bool(s.value[`SHARE_${n.key}`], true));
+  });
+
+  /* --------------------------------------------------------------- other */
+
+  const dividerStyle = computed(() =>
+    compact({
+      "--div-style": { DASHED: "dashed", DOTTED: "dotted", SPACE: "none" }[s.value.DIVIDER_STYLE] ?? "solid",
+      "--div-color": s.value.DIVIDER_COLOR,
+      "--div-w": px(s.value.DIVIDER_THICKNESS),
+      "--div-width": has(s.value.DIVIDER_WIDTH) ? `${Number(s.value.DIVIDER_WIDTH)}%` : undefined,
+      "--div-space": px(s.value.DIVIDER_SPACE),
+    })
+  );
+
+  const linkButtonStyle = computed(() => buttonVars(s.value, "BUTTON"));
+
+  /** LINK_TO_PRODUCT: the product's own page (FEATURED_PRODUCT's "View full details"). */
+  const productUrl = computed(() => {
+    const p = detail?.product.value;
+    if (!p || p.is_placeholder) return null;
+    if (p.url) return p.url;
+    const category = p.categories?.[0]?.category?.slugified_name;
+    return p.slugified_name ? `/${category || "products"}/${p.slugified_name}` : null;
+  });
+  const linkButtonUrl = computed(() => (s.value.LINK_TO_PRODUCT ? productUrl.value : s.value.URL) || null);
+  const linkButtonClasses = computed(() =>
+    buttonClasses(s.value, "BUTTON", s.value.BUTTON_FULL_WIDTH ? ["osi-btn--block"] : [])
+  );
+
+  const NuxtLinkComponent = NuxtLink;
+  const imageSrc = computed(() => mediaUrl(props.block.media ?? s.value.MEDIA ?? null));
+  const imageStyle = computed(() =>
+    compact({
+      "--img-width": has(s.value.IMAGE_WIDTH) ? `${Number(s.value.IMAGE_WIDTH)}%` : undefined,
+      "--img-radius": px(s.value.IMAGE_RADIUS),
+    })
+  );
+
+  return { detail, t, mediaUrl, addToWishlist, wishlistStatus, accordion, type, s, has, px, bool, compact, TYPE_SPACING, ALIGN, blockStyle, boxed, blockClasses, titleStyle, priceStyle, bodyStyle, smallText, smallStyle, ICON_MAP, ICON_MAP_LOWER, icon, iconStyle, titleActions, showTitleShare, showTitleWishlist, actionStyle, wishlisted, priceVars, comparePosition, badgeStyle, expanded, clampable, clampStyle, rte, overflows, observer, measure, showMoreButton, localOpen, blockId, open, collapsibleBody, hideEmpty, text, hasContent, inventoryState, inventoryColor, brand, category, shareStyle, shareMenuOpen, share, closeShareMenu, shareRoot, onDocumentClick, shareUrl, networks, dividerStyle, linkButtonStyle, productUrl, linkButtonUrl, linkButtonClasses, NuxtLinkComponent, imageSrc, imageStyle };
+}

package/app/logic/components/ProductLightbox.js

@@ -0,0 +1,12 @@
+
+export default function useLogic({ props }) {
+  const root = ref(null);
+
+  onMounted(async () => {
+    await nextTick();
+    const target = root.value?.querySelectorAll("[data-lightbox-item]")?.[props.startIndex];
+    target?.scrollIntoView({ block: "start", behavior: "auto" });
+  });
+
+  return { root };
+}

package/app/logic/components/ProductQuantity.js

@@ -0,0 +1,31 @@
+import { useProductDetail } from "#osi/composables/useProductDetail";
+
+export default function useLogic({ props }) {
+  const detail = useProductDetail();
+  const t = useT();
+  const s = computed(() => props.block.settings ?? {});
+
+  const label = computed(() => t(s.value.QUANTITY_LABEL) || "Quantity");
+  const showLabel = computed(() => s.value.QUANTITY_SHOW_LABEL !== false);
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+  const stepperStyle = computed(() =>
+    Object.fromEntries(
+      Object.entries({
+        "--qty-h": px(s.value.QUANTITY_HEIGHT),
+        "--qty-w": px(s.value.QUANTITY_WIDTH),
+        "--qty-radius": px(s.value.QUANTITY_RADIUS),
+        "--qty-bg": s.value.QUANTITY_BG,
+        "--qty-fg": s.value.QUANTITY_TEXT_COLOR,
+        "--qty-border": s.value.QUANTITY_BORDER_COLOR,
+      }).filter(([, v]) => has(v))
+    )
+  );
+
+  const atMax = computed(
+    () => !!detail.maxQuantity.value && detail.quantity.value >= detail.maxQuantity.value
+  );
+
+  return { detail, t, s, label, showLabel, has, px, stepperStyle, atMax };
+}

package/app/logic/components/ProductVariantPicker.js

@@ -0,0 +1,125 @@
+import { useProductDetail } from "#osi/composables/useProductDetail";
+
+export default function useLogic({ props }) {
+  const detail = useProductDetail();
+  const t = useT();
+  const { mediaUrl } = useMediaUrl();
+  const s = computed(() => props.block.settings ?? {});
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+  const compact = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => has(v)));
+
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+
+  const style = computed(() => String(s.value.PICKER_STYLE || "SWATCHES").toUpperCase());
+  const colorDisplay = computed(() => String(s.value.PICKER_COLOR_DISPLAY || "SWATCH").toUpperCase());
+  const soldOut = computed(() => s.value.PICKER_SOLD_OUT_STYLE || "DIM");
+  const showLabel = computed(() => s.value.PICKER_SHOW_LABEL !== false);
+  const showValue = computed(() => s.value.PICKER_SHOW_VALUE !== false);
+  const labelInline = computed(() => s.value.PICKER_LABEL_LAYOUT === "INLINE");
+  const allowDeselect = computed(() => s.value.PICKER_ALLOW_DESELECT !== false);
+  const selectedLook = computed(() => String(s.value.PICKER_SELECTED_STYLE || "OUTLINE").toLowerCase());
+
+  const labelStyle = useTextStyle(() => s.value, {
+    prefix: "PICKER_LABEL",
+    defaults: { size: 12, weight: "REGULAR", transform: "UPPERCASE", lineHeight: 140 },
+  });
+
+  const pickerStyle = computed(() =>
+    compact({
+      "--sw-size": px(s.value.PICKER_SWATCH_SIZE) ?? "32px",
+      "--sw-radius": { SQUARE: "2px", ROUNDED: "8px" }[s.value.PICKER_SWATCH_SHAPE] ?? "999px",
+      "--sw-ring": s.value.PICKER_SWATCH_RING_COLOR,
+      "--pk-gap": px(s.value.PICKER_GAP) ?? "8px",
+      "--pk-option-gap": px(s.value.PICKER_OPTION_GAP) ?? "16px",
+      "--pk-cols": has(s.value.PICKER_BLOCK_COLUMNS) ? Number(s.value.PICKER_BLOCK_COLUMNS) : 4,
+
+      "--pill-h": px(s.value.PICKER_PILL_HEIGHT) ?? "40px",
+      "--pill-px": px(s.value.PICKER_PILL_PADDING_X) ?? "14px",
+      "--pill-min": px(s.value.PICKER_PILL_MIN_WIDTH) ?? "44px",
+      "--pill-radius": px(s.value.PICKER_PILL_RADIUS),
+      "--pill-fs": px(s.value.PICKER_PILL_FONT_SIZE) ?? "12px",
+      "--pill-fw": WEIGHTS[s.value.PICKER_PILL_WEIGHT],
+      "--pill-tt": CASES[s.value.PICKER_PILL_TRANSFORM] ?? "uppercase",
+      "--pill-bg": s.value.PICKER_PILL_BG,
+      "--pill-fg": s.value.PICKER_PILL_TEXT,
+      "--pill-border": s.value.PICKER_PILL_BORDER,
+      "--pill-sel-bg": s.value.PICKER_SELECTED_BG,
+      "--pill-sel-fg": s.value.PICKER_SELECTED_TEXT,
+      "--pill-sel-border": s.value.PICKER_SELECTED_BORDER,
+      "--pk-error": s.value.PICKER_ERROR_COLOR,
+    })
+  );
+
+  const isColor = (type) => ["color", "colour"].includes(String(type?.name ?? "").toLowerCase());
+
+  /** How one option type is drawn. */
+  function modeFor(type) {
+    if (style.value === "DROPDOWN") return "DROPDOWN";
+    if (style.value === "RADIO") return "RADIO";
+    if (style.value === "BLOCKS") return "BLOCKS";
+    if (style.value === "SWATCHES" && isColor(type)) {
+      return { SWATCH_NAME: "SWATCH_NAME", IMAGE: "IMAGE", PILL: "PILLS" }[colorDisplay.value] ?? "SWATCH";
+    }
+    return "PILLS";
+  }
+
+  function valuesFor(type) {
+    const values = detail.applyCombinationLogic(type.id) ?? [];
+    return soldOut.value === "HIDE" ? values.filter((value) => value.isAvailable) : values;
+  }
+
+  function selectedName(type) {
+    const id = detail.selectedOptions.value[type.id];
+    if (!id) return "";
+    return (type.values ?? []).find((value) => value.id === id)?.name ?? "";
+  }
+
+  function choose(value) {
+    if (!allowDeselect.value && detail.isSelected(value)) return;
+    detail.selectVariant(value);
+  }
+
+  function optionsFor(type) {
+    return valuesFor(type).map((value) => ({
+      label: value.isAvailable ? value.name : `${value.name} — sold out`,
+      value: value.id,
+      disabled: !value.isAvailable,
+    }));
+  }
+
+  function pickFromDropdown(type, id) {
+    const value = (detail.applyCombinationLogic(type.id) ?? []).find((entry) => entry.id === id);
+    if (value && !detail.isSelected(value)) detail.selectVariant(value);
+  }
+
+  /** A picture for the IMAGE colour mode: the value's own, else a variant's. */
+  function imageFor(value) {
+    const own = value?.image?.path ? value.image : value?.image;
+    if (own) return mediaUrl(own);
+    const variants = detail.product.value?.variants ?? [];
+    const match = variants.find((v) => (v.values ?? []).some((x) => x.id === value.id) && (v.images?.length || v.image));
+    return match ? mediaUrl(match.images?.[0] ?? match.image) : null;
+  }
+
+  function valueClasses(value) {
+    return {
+      "is-selected": detail.isSelected(value),
+      "is-unavailable": !value.isAvailable,
+      "is-struck": !value.isAvailable && soldOut.value === "STRIKE",
+    };
+  }
+
+  const sizeGuide = computed(() => ({
+    label: t(s.value.PICKER_SIZE_GUIDE_LABEL),
+    url: s.value.PICKER_SIZE_GUIDE_URL,
+    option: String(s.value.PICKER_SIZE_GUIDE_OPTION || "size").toLowerCase(),
+  }));
+
+  const errorText = (type) =>
+    (t(s.value.PICKER_ERROR_TEXT) || "Choose a {option}").replace("{option}", type.name.toLowerCase());
+
+  return { detail, t, mediaUrl, s, has, px, compact, WEIGHTS, CASES, style, colorDisplay, soldOut, showLabel, showValue, labelInline, allowDeselect, selectedLook, labelStyle, pickerStyle, isColor, modeFor, valuesFor, selectedName, choose, optionsFor, pickFromDropdown, imageFor, valueClasses, sizeGuide, errorText };
+}