@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/composables/useThemeTokens.js

@@ -0,0 +1,171 @@
+import {
+  FONT_FAMILIES,
+  TEXT_TRANSFORMS,
+  color,
+  compact,
+  letterSpacing,
+  px,
+  shadow,
+  weight,
+} from "#osi/theme/controls";
+
+/**
+ * Theme settings -> CSS custom properties.
+ *
+ * Every component styles itself from these variables. Nothing reads
+ * theme.HEADING_FONT directly — that's what lets a merchant change a font and
+ * have the whole storefront follow without a single component knowing.
+ *
+ * Spread onto the root element in app.vue, together with `rootClasses`.
+ *
+ * FIXED FONTS
+ *
+ * A hand-built store (stores/<name>) can pin its fonts in app.config.ts:
+ *   fonts: { heading: 'Avenir', body: 'Avenir' }
+ * A pinned font wins over the merchant's HEADING_FONT / BODY_FONT, and isn't
+ * loaded from Google — the store ships it itself (@font-face in its CSS).
+ *
+ * BUTTONS / INPUTS
+ *
+ * The --osi-button-* and --osi-input-* sets are what every cart, login,
+ * checkout, account and section control reads (assets/css/osi-controls.css).
+ * Colours are only emitted when the merchant set one: an unset button colour
+ * has to keep following the section's colour scheme (--osi-btn-bg), and it
+ * can't if the theme pins it here.
+ *
+ * The three enum settings (button style, hover effect, field style, label
+ * position) can't be variables — CSS can't branch on one — so they become
+ * classes on the root instead.
+ */
+export function useThemeTokens() {
+  const { theme, store } = useStorefront();
+  const fixedFonts = useAppConfig().fonts ?? {};
+
+  // Pages outside the section renderer (login, checkout, account, the cart
+  // drawer) never get a section's scheme variables, so the default scheme is
+  // published on the root too. Sections still override it on their own root.
+  const defaultScheme = useColorScheme(computed(() => null));
+
+  const tokens = computed(() => {
+    const t = theme.value ?? {};
+    const s = store.value ?? {};
+
+    const headingFont = fixedFonts.heading ?? t.HEADING_FONT ?? "Poppins";
+    const bodyFont = fixedFonts.body ?? t.BODY_FONT ?? "DM Sans";
+
+    return compact({
+      ...defaultScheme.value.style,
+
+      "--primary-color": s.primary_color ?? "#000000",
+      "--secondary-color": s.secondary_color ?? "#f3f4f6",
+      "--osi-primary-color": s.primary_color ?? "#000000",
+      "--osi-secondary-color": s.secondary_color ?? "#f3f4f6",
+
+      "--osi-font-heading": `"${headingFont}", system-ui, sans-serif`,
+      "--osi-font-body": `"${bodyFont}", system-ui, sans-serif`,
+      "--osi-heading-scale": (t.HEADING_SCALE ?? 100) / 100,
+      "--osi-body-size": `${((t.BODY_SCALE ?? 100) / 100) * 16}px`,
+
+      "--osi-page-width": `${t.PAGE_WIDTH ?? 1400}px`,
+      "--osi-section-gap": `${t.SECTION_SPACING ?? 48}px`,
+      "--osi-grid-gap": `${t.GRID_GAP ?? 24}px`,
+
+      "--osi-logo-width": `${t.LOGO_WIDTH ?? 120}px`,
+
+      // ------------------------------------------------------------ buttons
+      // Legacy names, still read by a few component stylesheets.
+      "--osi-btn-radius": px(t.BUTTON_RADIUS) ?? "4px",
+      "--osi-btn-border": px(t.BUTTON_BORDER_WIDTH) ?? "1px",
+      "--osi-btn-shadow": shadow(t.BUTTON_SHADOW, t.BUTTON_SHADOW_COLOR) ?? "none",
+
+      "--osi-button-radius": px(t.BUTTON_RADIUS) ?? "4px",
+      "--osi-button-border-w": px(t.BUTTON_BORDER_WIDTH) ?? "1px",
+      "--osi-button-shadow": shadow(t.BUTTON_SHADOW, t.BUTTON_SHADOW_COLOR) ?? "none",
+      "--osi-button-hover-shadow": shadow(t.BUTTON_HOVER_SHADOW, t.BUTTON_SHADOW_COLOR),
+      "--osi-button-pad-y": px(t.BUTTON_PADDING_Y) ?? "12px",
+      "--osi-button-pad-x": px(t.BUTTON_PADDING_X) ?? "28px",
+      "--osi-button-pad-y-mobile": px(t.BUTTON_PADDING_Y_MOBILE),
+      "--osi-button-pad-x-mobile": px(t.BUTTON_PADDING_X_MOBILE),
+      "--osi-button-fs": px(t.BUTTON_FONT_SIZE) ?? "14px",
+      "--osi-button-fw": weight(t.BUTTON_FONT_WEIGHT) ?? 500,
+      "--osi-button-ff": FONT_FAMILIES[t.BUTTON_FONT] ?? "inherit",
+      "--osi-button-tt": TEXT_TRANSFORMS[t.BUTTON_TRANSFORM] ?? "none",
+      "--osi-button-ls": letterSpacing(t.BUTTON_LETTER_SPACING) ?? "normal",
+      "--osi-button-bg": color(t.BUTTON_BG_COLOR),
+      "--osi-button-fg": color(t.BUTTON_TEXT_COLOR),
+      "--osi-button-border-color": color(t.BUTTON_BORDER_COLOR),
+      "--osi-button-hover-bg": color(t.BUTTON_HOVER_BG_COLOR),
+      "--osi-button-hover-fg": color(t.BUTTON_HOVER_TEXT_COLOR),
+      "--osi-button-hover-border-color": color(t.BUTTON_HOVER_BORDER_COLOR),
+
+      "--osi-button2-bg": color(t.SECONDARY_BUTTON_BG_COLOR),
+      "--osi-button2-fg": color(t.SECONDARY_BUTTON_TEXT_COLOR),
+      "--osi-button2-border-color": color(t.SECONDARY_BUTTON_BORDER_COLOR),
+
+      // ------------------------------------------------------------- inputs
+      "--osi-input-radius": px(t.INPUT_RADIUS) ?? "4px",
+      "--osi-input-border-w": px(t.INPUT_BORDER_WIDTH) ?? "1px",
+      "--osi-input-shadow": shadow(t.INPUT_SHADOW, t.INPUT_SHADOW_COLOR) ?? "none",
+      "--osi-input-pad-y": px(t.INPUT_PADDING_Y) ?? "10px",
+      "--osi-input-pad-x": px(t.INPUT_PADDING_X) ?? "12px",
+      "--osi-input-pad-y-mobile": px(t.INPUT_PADDING_Y_MOBILE),
+      "--osi-input-pad-x-mobile": px(t.INPUT_PADDING_X_MOBILE),
+      "--osi-input-fs": px(t.INPUT_FONT_SIZE) ?? "15px",
+      "--osi-input-fs-mobile": px(t.INPUT_FONT_SIZE_MOBILE),
+      "--osi-input-bg": color(t.INPUT_BG_COLOR),
+      "--osi-input-fg": color(t.INPUT_TEXT_COLOR),
+      "--osi-input-border-color": color(t.INPUT_BORDER_COLOR),
+      "--osi-input-focus": color(t.INPUT_FOCUS_COLOR),
+      "--osi-input-placeholder": color(t.INPUT_PLACEHOLDER_COLOR),
+      "--osi-input-error": color(t.INPUT_ERROR_COLOR),
+      "--osi-input-gap": px(t.INPUT_GAP),
+
+      "--osi-label-fs": px(t.INPUT_LABEL_SIZE),
+      "--osi-label-fw": weight(t.INPUT_LABEL_WEIGHT),
+      "--osi-label-tt": TEXT_TRANSFORMS[t.INPUT_LABEL_TRANSFORM],
+      "--osi-label-ls": letterSpacing(t.INPUT_LABEL_LETTER_SPACING),
+      "--osi-label-color": color(t.INPUT_LABEL_COLOR),
+    });
+  });
+
+  const { controls, rootClasses } = useThemeControls();
+
+  /**
+   * Fonts are arbitrary merchant-chosen strings, so they're loaded at runtime
+   * rather than bundled. If the store has an Arabic locale, load an Arabic
+   * subset too — Poppins has no Arabic glyphs and the fallback looks broken.
+   * Pinned fonts (see FIXED FONTS) are skipped: the store ships them itself.
+   */
+  const fontLinks = computed(() => {
+    const t = theme.value ?? {};
+    const families = [
+      ...new Set(
+        [
+          fixedFonts.heading ? null : t.HEADING_FONT,
+          fixedFonts.body ? null : t.BODY_FONT,
+        ].filter(Boolean),
+      ),
+    ];
+    if (!families.length) return [];
+    const css2 = (spec) => `https://fonts.googleapis.com/css2?family=${spec}&display=swap`;
+    // Two stylesheets per family, never one shared request: Google answers
+    // 400 for the WHOLE request when a family lacks any listed weight (Bebas
+    // Neue has 400 only), which silently dropped every font. The plain one
+    // always loads (regular); the weighted one adds the rest where they
+    // exist and fails alone where they don't.
+    const sheets = families.flatMap((family) => {
+      const name = encodeURIComponent(family).replace(/%20/g, "+");
+      return [
+        { rel: "stylesheet", href: css2(name), key: `osi-font-${family}` },
+        { rel: "stylesheet", href: css2(`${name}:wght@300;400;500;600;700`), key: `osi-font-${family}-w` },
+      ];
+    });
+    return [
+      { rel: "preconnect", href: "https://fonts.googleapis.com", key: "osi-font-pc1" },
+      { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "", key: "osi-font-pc2" },
+      ...sheets,
+    ];
+  });
+
+  return { tokens, rootClasses, controls, fontLinks };
+}

package/app/composables/useWishlist.js

@@ -0,0 +1,66 @@
+import WishlistServices from "#osi/services/WishlistServices";
+import { authBus } from "#osi/services/AuthBus";
+import { analytics } from "#osi/utils/analytics";
+import { useToast } from "vue-toastification";
+
+export function useWishlist() {
+  const wishlistStatus = useState("wishlist-status", () => ({}));
+  const wishlistedItems = useState("wishlist-items", () => []);
+
+  const isLoggedIn = computed(() => authBus.isLoggedIn);
+
+  async function fetchWishlist() {
+    if (!isLoggedIn.value) return;
+    try {
+      const response = await WishlistServices.getWishlists();
+      wishlistedItems.value = response?.results || response || [];
+    } catch (error) {
+      console.error("[useWishlist] Error fetching wishlist:", error);
+    }
+  }
+
+  async function addToWishlist(product) {
+    const toast = useToast();
+    const productId = product.id;
+
+    if (!isLoggedIn.value) {
+      toast.error("Please log in to add items to your wishlist.");
+      return;
+    }
+
+    // Optimistic UI Update
+    const previousStatus = wishlistStatus.value[productId] ?? product.wishlisted;
+    wishlistStatus.value[productId] = !previousStatus;
+    product.wishlisted = !previousStatus;
+
+    try {
+      let response;
+      if (previousStatus) {
+        response = await WishlistServices.removeFromWishlist(productId);
+        toast.success("Product removed from wishlist");
+      } else {
+        response = await WishlistServices.addToWishlist(productId);
+        toast.success("Product added to wishlist");
+        analytics.addToWishlist(product);
+      }
+
+      if (response && response.wishlisted !== undefined) {
+        wishlistStatus.value[productId] = response.wishlisted;
+        product.wishlisted = response.wishlisted;
+      }
+    } catch (error) {
+      console.error("[useWishlist] Error updating wishlist:", error);
+      toast.error("An error occurred while updating your wishlist.");
+      wishlistStatus.value[productId] = previousStatus;
+      product.wishlisted = previousStatus;
+    }
+  }
+
+  return {
+    wishlistStatus,
+    wishlistedItems,
+    isLoggedIn,
+    fetchWishlist,
+    addToWishlist,
+  };
+}

package/app/logic/components/AnnouncementBar.js

@@ -0,0 +1,118 @@
+import { withAsyncContext } from "vue";
+import { Autoplay, Navigation, EffectFade } from "swiper/modules";
+
+export default async function useLogic({ props }) {
+  let __temp, __restore;
+
+  const settings = useThemeGroup("ANNOUNCEMENT");
+  const scheme = useColorScheme(computed(() => settings.value.ANNOUNCEMENT_COLOR_SCHEME));
+  const { isMobile } = useLayoutShell();
+  const t = useT();
+
+  const px = (v) => (v === "" || v == null || !Number.isFinite(Number(v)) ? undefined : `${Number(v)}px`);
+  const WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const weightOf = (v) => {
+    const n = Number(v);
+    return Number.isFinite(n) && n > 0 ? n : WEIGHTS[String(v || "").toUpperCase()];
+  };
+  const CASES = { NONE: "none", UPPERCASE: "uppercase", LOWERCASE: "lowercase", CAPITALIZE: "capitalize" };
+
+  const blockMessages = computed(() =>
+    (props.blocks ?? [])
+      .filter((b) => b.type === "ANNOUNCEMENT" && !b.disabled)
+      .map((b) => {
+        const v = b.settings ?? {};
+        const style = Object.fromEntries(Object.entries({
+          "--ann-fs": px(v.SIZE),
+          "--ann-fs-m": px(v.SIZE_MOBILE) ?? px(v.SIZE),
+          fontFamily: String(v.FONT || "").toUpperCase() === "HEADING" ? "var(--osi-font-heading)" : undefined,
+          fontWeight: weightOf(v.WEIGHT),
+          letterSpacing: v.LETTER_SPACING ? `${Number(v.LETTER_SPACING) / 100}em` : undefined,
+          textTransform: CASES[String(v.CASE || "").toUpperCase()],
+          color: v.COLOR || undefined,
+          textDecoration: v.URL && v.UNDERLINE ? "underline" : undefined,
+        }).filter(([, x]) => x !== undefined));
+        return {
+          id: b.key,
+          key: b.key,
+          text: t(v.TEXT),
+          url: v.URL || null,
+          newTab: !!v.OPEN_IN_NEW_TAB,
+          background: v.BACKGROUND || null,
+          style,
+        };
+      })
+      .filter((m) => m.text)
+  );
+
+  // Only without blocks: the store's announcements.
+  const useBlocks = computed(() => blockMessages.value.length > 0);
+  const { announcements, loadAnnouncements } = useAnnouncements();
+  if (!useBlocks.value) (([__temp, __restore] = withAsyncContext(() => loadAnnouncements())), (__temp = await __temp), __restore(), __temp);
+
+  const apiMessages = computed(() => {
+    const raw = announcements.value;
+    const list = Array.isArray(raw) ? raw : raw?.results ?? [];
+    return list
+      .map((entry) => ({
+        id: entry.id,
+        key: null,
+        text: t(entry.text ?? entry.message ?? entry.title),
+        url: entry.url || entry.link || null,
+        newTab: false,
+        background: null,
+        style: {},
+      }))
+      .filter((entry) => entry.text);
+  });
+
+  const messages = computed(() => (useBlocks.value ? blockMessages.value : apiMessages.value));
+
+  const visible = computed(
+    () => settings.value.ANNOUNCEMENT_ENABLED !== false && messages.value.length > 0
+  );
+
+  const { slides, onSwiper, onSlideChange, activeIndex, setNavigationEnabled, goPrev, goNext } = useCarousel({
+    items: () => messages.value,
+    loop: () => messages.value.length > 1,
+    minLoopSlides: 3,
+  });
+
+  const fade = computed(() => String(settings.value.ANNOUNCEMENT_TRANSITION || "SLIDE").toUpperCase() === "FADE");
+  const modules = [Autoplay, Navigation, EffectFade];
+
+  const autoplay = computed(() =>
+    settings.value.ANNOUNCEMENT_AUTOPLAY !== false && messages.value.length > 1
+      ? { delay: (settings.value.ANNOUNCEMENT_SPEED || 5) * 1000, disableOnInteraction: false }
+      : false
+  );
+
+  // Arrows on phones (ANNOUNCEMENT_SHOW_ARROWS_MOBILE) and desktop
+  // (ANNOUNCEMENT_SHOW_ARROWS), each switchable. Swiper needs
+  // navigation.init()/destroy(), not just the param flipped, which is what
+  // setNavigationEnabled does.
+  const showArrows = computed(
+    () =>
+      messages.value.length > 1 &&
+      (isMobile.value
+        ? settings.value.ANNOUNCEMENT_SHOW_ARROWS_MOBILE !== false
+        : settings.value.ANNOUNCEMENT_SHOW_ARROWS !== false)
+  );
+  watch(showArrows, (enabled) => setNavigationEnabled(enabled), { immediate: true });
+
+  /** The bar: its scheme, the showing message's own background, padding, width, line. */
+  const barStyle = computed(() => {
+    const current = slides.value[activeIndex.value] ?? messages.value[0];
+    const s = settings.value;
+    return {
+      ...scheme.value.style,
+      background: current?.background || "var(--osi-bg)",
+      color: "var(--osi-text)",
+      "--ann-py": px(s.ANNOUNCEMENT_PADDING_Y) ?? "15px",
+      "--ann-max": String(s.ANNOUNCEMENT_WIDTH || "PAGE").toUpperCase() === "FULL" ? "none" : "var(--osi-page-width)",
+      borderBottom: s.ANNOUNCEMENT_DIVIDER ? "1px solid var(--osi-border)" : undefined,
+    };
+  });
+
+  return { settings, scheme, isMobile, t, px, WEIGHTS, weightOf, CASES, blockMessages, useBlocks, announcements, loadAnnouncements, apiMessages, messages, visible, slides, onSwiper, onSlideChange, activeIndex, setNavigationEnabled, goPrev, goNext, fade, modules, autoplay, showArrows, barStyle };
+}

package/app/logic/components/CardGrid.js

@@ -0,0 +1,125 @@
+import { NuxtLink } from "#components";
+import { buttonClasses as toButtonClasses, buttonVars } from "#osi/composables/useButtonStyle";
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } = useSectionShell(() => props.section);
+  const { mediaUrl } = useMediaUrl();
+  const { isMobile } = useLayoutShell();
+  const placeholders = usePlaceholders();
+  const NuxtLinkComponent = NuxtLink;
+
+  const isPromo = computed(() => props.variant === "promo");
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const num = (v, d) => (has(v) && Number.isFinite(Number(v)) ? Number(v) : d);
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+
+  const VIDEO_EXT = /\.(mp4|webm|mov|m4v)(\?.*)?$/i;
+  const isVideoUrl = (url) => !!url && VIDEO_EXT.test(url);
+
+  const RATIOS = { SQUARE: "1 / 1", PORTRAIT: "3 / 4", PORTRAIT_4_5: "4 / 5", LANDSCAPE: "4 / 3", WIDE: "16 / 9", NATURAL: "auto" };
+  const SPOTS = {
+    TOP_LEFT: ["flex-start", "flex-start"], TOP_CENTER: ["flex-start", "center"], TOP_RIGHT: ["flex-start", "flex-end"],
+    CENTER_LEFT: ["center", "flex-start"], CENTER: ["center", "center"], CENTER_RIGHT: ["center", "flex-end"],
+    BOTTOM_LEFT: ["flex-end", "flex-start"], BOTTOM_CENTER: ["flex-end", "center"], BOTTOM_RIGHT: ["flex-end", "flex-end"],
+  };
+  const TEXT_ALIGN = { LEFT: "start", CENTER: "center", RIGHT: "end" };
+  const ITEMS = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+
+  const defaultPosition = computed(() => (isPromo.value ? "OVERLAY" : "BELOW"));
+
+  const cards = computed(() => {
+    const rows = (props.section.blocks ?? [])
+      .filter((b) => !b.disabled)
+      .map((b) => {
+        const bs = b.settings ?? {};
+        const media = isMobile.value ? bs.MOBILE_MEDIA || bs.MEDIA : bs.MEDIA;
+        const src = mediaUrl(media ?? b.media ?? null);
+        const position = String(bs.CARD_TEXT_POSITION || s.value.TEXT_POSITION || defaultPosition.value).toUpperCase();
+        const buttonLabel = t(bs.BUTTON_LABEL);
+        return {
+          key: b.id ?? b.key,
+          src,
+          isVideo: isVideoUrl(src),
+          poster: mediaUrl(bs.POSTER ?? null) || null,
+          alt: t(bs.ALT) || t(bs.HEADING) || "",
+          eyebrow: t(bs.EYEBROW),
+          heading: t(bs.HEADING),
+          text: t(bs.TEXT),
+          url: bs.URL || null,
+          button: buttonLabel && bs.URL
+            ? { label: buttonLabel, style: buttonVars(bs, "BUTTON"), classes: toButtonClasses(bs, "BUTTON", ["osi-ig-btn"]) }
+            : null,
+          overlay: position === "OVERLAY",
+          style: {
+            "--ig-span-c": num(bs.SPAN_COLUMNS, 1),
+            "--ig-span-r": num(bs.SPAN_ROWS, 1),
+            ...(has(bs.OVERLAY_OPACITY) ? { "--ig-ov-opacity": String(Number(bs.OVERLAY_OPACITY) / 100) } : {}),
+          },
+        };
+      });
+
+    if (!rows.length && placeholders.allowed?.value) {
+      return Array.from({ length: isPromo.value ? 2 : 3 }, (_, i) => ({
+        key: `ph-${i}`,
+        src: null,
+        isVideo: false,
+        poster: null,
+        alt: "",
+        eyebrow: "",
+        heading: isPromo.value ? "Promotion title" : "Card title",
+        text: "",
+        url: null,
+        button: null,
+        overlay: defaultPosition.value === "OVERLAY",
+        style: {},
+        placeholder: true,
+      }));
+    }
+    return rows;
+  });
+
+  const subheading = computed(() => t(s.value.SUBHEADING));
+
+  const vars = computed(() => {
+    const v = s.value;
+    const spot = SPOTS[String(v.OVERLAY_POSITION || (isPromo.value ? "BOTTOM_LEFT" : "BOTTOM_LEFT")).toUpperCase()] ?? SPOTS.BOTTOM_LEFT;
+    const alignKey = String(v.TEXT_ALIGNMENT || "LEFT").toUpperCase();
+    const out = {
+      "--ig-cols": num(v.COLUMNS, isPromo.value ? 2 : 3),
+      "--ig-cols-tablet": num(v.COLUMNS_TABLET, 2),
+      "--ig-cols-mobile": num(v.COLUMNS_MOBILE, 1),
+      "--ig-gap": px(v.GAP) ?? "16px",
+      "--ig-gap-mobile": px(v.GAP_MOBILE) ?? px(v.GAP) ?? "12px",
+      "--ig-ratio": RATIOS[v.RATIO] ?? (isPromo.value ? RATIOS.LANDSCAPE : RATIOS.PORTRAIT_4_5),
+      "--ig-ratio-mobile": RATIOS[v.RATIO_MOBILE] ?? RATIOS[v.RATIO] ?? (isPromo.value ? RATIOS.LANDSCAPE : RATIOS.PORTRAIT_4_5),
+      "--ig-fit": String(v.IMAGE_FIT || "COVER").toLowerCase(),
+      "--ig-radius": px(v.CARD_RADIUS) ?? "0px",
+      "--ig-ov-y": spot[0],
+      "--ig-ov-x": spot[1],
+      "--ig-text-align": TEXT_ALIGN[alignKey] ?? "start",
+      "--ig-text-items": ITEMS[alignKey] ?? "flex-start",
+    };
+    if (v.OVERLAY_COLOR) out["--ig-ov-color"] = v.OVERLAY_COLOR;
+    if (has(v.OVERLAY_OPACITY)) out["--ig-ov-opacity-base"] = String(Number(v.OVERLAY_OPACITY) / 100);
+    if (v.OVERLAY_TEXT_COLOR) out["--ig-ov-text"] = v.OVERLAY_TEXT_COLOR;
+    if (v.CARD_BG_COLOR) out["--ig-card-bg"] = v.CARD_BG_COLOR;
+    if (px(v.CARD_PADDING)) out["--ig-card-pad"] = px(v.CARD_PADDING);
+    if (px(v.HEADING_SIZE)) out["--ig-h-fs"] = px(v.HEADING_SIZE);
+    if (px(v.HEADING_SIZE_MOBILE)) out["--ig-h-fs-mobile"] = px(v.HEADING_SIZE_MOBILE);
+    if (v.HEADING_COLOR) out["--ig-h-color"] = v.HEADING_COLOR;
+    if (px(v.TEXT_SIZE)) out["--ig-t-fs"] = px(v.TEXT_SIZE);
+    return out;
+  });
+
+  const rootClasses = computed(() => [
+    `osi-ig--${props.variant}`,
+    `osi-ig--hover-${String(s.value.HOVER_EFFECT || "ZOOM").toLowerCase()}`,
+    { "osi-ig--natural": s.value.RATIO === "NATURAL" },
+  ]);
+
+  function cardTag(card) {
+    return card.url && !card.button && !card.placeholder ? NuxtLinkComponent : "div";
+  }
+
+  return { s, t, shellStyle, innerStyle, align, customClass, heading, mediaUrl, isMobile, placeholders, NuxtLinkComponent, isPromo, has, num, px, VIDEO_EXT, isVideoUrl, RATIOS, SPOTS, TEXT_ALIGN, ITEMS, defaultPosition, cards, subheading, vars, rootClasses, cardTag };
+}

package/app/logic/components/CardList.js

@@ -0,0 +1,98 @@
+
+export default function useLogic({ props }) {
+  const s = computed(() => props.settings ?? {});
+  const layout = computed(() => String(s.value.LAYOUT ?? "GRID").toUpperCase());
+  const isCarousel = computed(() => layout.value === "CAROUSEL");
+  const config = computed(() => ({ template: props.template }));
+
+  /* ---------------------------------------------------------------- variables */
+
+  const styleVars = computed(() => {
+    const v = s.value;
+    const num = (value, fallbackValue) => {
+      const n = Number(value);
+      return value === "" || value == null || !Number.isFinite(n) ? fallbackValue : n;
+    };
+    const one = props.featured;
+    const vars = {
+      // grid (FEATURED: one full-width card)
+      "--osi-cl-cols": String(one ? 1 : num(v.COLUMNS, 3)),
+      "--osi-cl-cols-tablet": String(one ? 1 : num(v.COLUMNS_TABLET, 2)),
+      "--osi-cl-cols-mobile": String(one ? 1 : num(v.COLUMNS_MOBILE, 2)),
+      "--osi-cl-gap-x": `${num(v.GAP_X, 24)}px`,
+      "--osi-cl-gap-y": `${num(v.GAP_Y, 32)}px`,
+      // bento / editorial
+      "--osi-cl-bento-row": `${num(v.BENTO_ROW_HEIGHT, 240)}px`,
+      "--osi-cl-bento-row-mobile": `${num(v.BENTO_ROW_HEIGHT_MOBILE, 180)}px`,
+      "--osi-cl-ed-cols": String(num(v.EDITORIAL_COLUMNS, 3)),
+      "--osi-cl-ed-cols-mobile": String(num(v.EDITORIAL_COLUMNS_MOBILE, 2)),
+      "--osi-cl-ed-offset": `${num(v.EDITORIAL_OFFSET, 64)}px`,
+    };
+    const setPx = (key, value) => {
+      if (value !== undefined && value !== null && value !== "") vars[key] = `${Number(value)}px`;
+    };
+    // carousel arrows
+    const ARROW_RADIUS = { CIRCLE: "999px", SQUARE: "0px", ROUNDED: "8px" };
+    setPx("--osi-cl-arrow-size", v.ARROW_SIZE);
+    setPx("--osi-cl-arrow-icon", v.ARROW_ICON_SIZE);
+    setPx("--osi-cl-arrow-offset", v.ARROW_OFFSET);
+    setPx("--osi-cl-arrow-border-w", v.ARROW_BORDER_WIDTH);
+    if (ARROW_RADIUS[v.ARROW_SHAPE]) vars["--osi-cl-arrow-radius"] = ARROW_RADIUS[v.ARROW_SHAPE];
+    if (v.ARROW_BG) vars["--osi-cl-arrow-bg"] = v.ARROW_BG;
+    if (v.ARROW_COLOR) vars["--osi-cl-arrow-color"] = v.ARROW_COLOR;
+    if (v.ARROW_BORDER_COLOR) vars["--osi-cl-arrow-border"] = v.ARROW_BORDER_COLOR;
+    if (v.ARROW_HOVER_BG) vars["--osi-cl-arrow-hover-bg"] = v.ARROW_HOVER_BG;
+    if (v.ARROW_HOVER_COLOR) vars["--osi-cl-arrow-hover-color"] = v.ARROW_HOVER_COLOR;
+    if (v.ARROW_SHADOW) vars["--osi-cl-arrow-shadow"] = "0 4px 14px -4px rgba(0,0,0,0.25)";
+    vars["--osi-cl-arrows-justify"] =
+      { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" }[v.ARROWS_BELOW_ALIGN] ?? "center";
+    // carousel dots
+    setPx("--osi-cl-dot-size", v.DOT_SIZE);
+    setPx("--osi-cl-dot-active-width", v.DOT_ACTIVE_WIDTH);
+    setPx("--osi-cl-dot-gap", v.DOT_GAP);
+    setPx("--osi-cl-dots-space", v.DOTS_SPACING);
+    if (v.DOT_COLOR) vars["--osi-cl-dot-color"] = v.DOT_COLOR;
+    if (v.DOT_ACTIVE_COLOR) vars["--osi-cl-dot-active-color"] = v.DOT_ACTIVE_COLOR;
+    vars["--osi-cl-dots-justify"] =
+      { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" }[v.DOTS_ALIGN] ?? "center";
+    vars["--osi-cl-dots-text-align"] =
+      { LEFT: "start", CENTER: "center", RIGHT: "end" }[v.DOTS_ALIGN] ?? "center";
+    return vars;
+  });
+
+  const perView = computed(() => Number(s.value.SLIDES_PER_VIEW) || 4);
+
+  const carouselOptions = computed(() => ({
+    perView: perView.value,
+    perViewTablet: Number(s.value.SLIDES_PER_VIEW_TABLET) || 3,
+    perViewMobile: Number(s.value.SLIDES_PER_VIEW_MOBILE) || 1.3,
+    gap: Number(s.value.GAP_X ?? 24),
+    loop: !!s.value.CAROUSEL_LOOP,
+    autoplay: !!(s.value.CAROUSEL_AUTOPLAY ?? s.value.AUTOPLAY),
+    speed: Number(s.value.CAROUSEL_SPEED) || 5,
+    gapMobile: s.value.GAP_X_MOBILE ?? undefined,
+    showArrows: s.value.SHOW_ARROWS !== false,
+    // The old "in the header" spot is now just above the list, on the right.
+    arrowPosition: String(s.value.ARROW_POSITION || "SIDES").toUpperCase(),
+    arrowsOnHover: String(s.value.ARROW_VISIBILITY || "ALWAYS").toUpperCase() === "HOVER",
+    arrowsOnMobile: !!s.value.ARROW_SHOW_MOBILE,
+    arrowSvg: s.value.ARROW_SVG || "",
+    showDots: !!s.value.SHOW_DOTS,
+    dotsStyle: String(s.value.DOTS_STYLE || "DOTS").toUpperCase(),
+    dotsDynamic: !!s.value.DOTS_DYNAMIC,
+    railClass: s.value.RAIL_CUSTOM_CLASS || "",
+    arrowClass: s.value.ARROW_CUSTOM_CLASS || "",
+  }));
+
+  /* Arrows "in the header": above the list, driven through the carousel. */
+  const carousel = ref(null);
+  const headerArrows = computed(
+    () =>
+      isCarousel.value &&
+      s.value.SHOW_ARROWS !== false &&
+      String(s.value.ARROW_POSITION || "SIDES").toUpperCase() === "HEADER" &&
+      props.items.length > perView.value
+  );
+
+  return { s, layout, isCarousel, config, styleVars, perView, carouselOptions, carousel, headerArrows };
+}