@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/sections/ContactInfoSection.js

@@ -0,0 +1,419 @@
+/**
+ * CONTACT_INFO — address / contact / hours cards, plus social links.
+ *
+ * Every card is conditional, and the grid counts what's actually present
+ * instead of assuming three: a merchant who filled in only an address gets one
+ * card, not one card and two empty columns. COLUMNS is clamped to that count
+ * for the same reason.
+ *
+ * Icons are built in, one per contact type and one per SocialPlatform token.
+ * Nothing is typed by the merchant and no icon package is pulled in — the
+ * markup lives in ICONS below and renders inside a shared <svg>. It's a fixed,
+ * developer-authored constant, which is the only reason v-html is safe here.
+ *
+ * Typography follows SiteFooter.vue: text_style() emits
+ * <PREFIX>_SIZE/_WEIGHT/_COLOR/... on the backend, textStyleVars() turns one
+ * prefix into the generic --osi-fs/--osi-fw/... variables, and the element
+ * carries them inline. Two prefixes here: CARD_TITLE and CARD_TEXT.
+ *
+ *   section  HEADING, SUBHEADING, ADDRESS_*, MAP_URL, CONTACT_*, PHONE*,
+ *            WHATSAPP*, EMAIL*, HOURS*, LAYOUT, COLUMNS, ITEM_GAP,
+ *            CONTENT_ALIGNMENT, EQUAL_HEIGHT, ITEM_VERTICAL_ALIGNMENT,
+ *            MOBILE_LAYOUT, CARD_*, SHOW_ICONS, ICON_*, SHOW_DIRECTIONS,
+ *            DIRECTIONS_*, UNDERLINE_LINKS, OPEN_IN_NEW_TAB, SOCIAL_*,
+ *            CARD_TITLE_*, CARD_TEXT_* + COMMON_STYLE_SETTINGS
+ *   block    PLATFORM (SocialPlatform token), URL, LABEL (localized)
+ */
+
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } =
+    useSectionShell(() => props.section);
+
+  /* ------------------------------------------------------------------ utils */
+
+  function num(value, fallback) {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : fallback;
+  }
+
+  /** Empty string, null and undefined mean "not set" — 0 does not. */
+  function has(value) {
+    return value !== undefined && value !== null && value !== "";
+  }
+
+  /** Strips absent keys so an unset setting emits no CSS variable at all. */
+  function compact(object) {
+    return Object.fromEntries(Object.entries(object).filter(([, v]) => v !== undefined));
+  }
+
+  function pxVar(value) {
+    return has(value) && Number.isFinite(Number(value)) ? `${Number(value)}px` : undefined;
+  }
+
+  /** Picks value when it's one of allowed, else the first entry as the default. */
+  function oneOf(value, allowed) {
+    return allowed.includes(value) ? value : allowed[0];
+  }
+
+  const TEXT_ALIGNMENTS = { LEFT: "start", CENTER: "center", RIGHT: "end" };
+  const FLEX_ALIGNMENTS = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+  const VERTICAL_ALIGNMENTS = { TOP: "start", CENTER: "center", BOTTOM: "end" };
+  const TEXT_TRANSFORMS = {
+    NONE: "none",
+    UPPERCASE: "uppercase",
+    LOWERCASE: "lowercase",
+    CAPITALIZE: "capitalize",
+  };
+  // FontWeight stores CSS numbers as strings; the token form is accepted too so
+  // a field written against either shape resolves without a migration.
+  const FONT_WEIGHTS = { LIGHT: 300, REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const FONT_FAMILIES = { HEADING: "var(--osi-font-heading)", BODY: "var(--osi-font-body)" };
+  const SHADOWS = {
+    NONE: "none",
+    SMALL: "0 1px 2px rgba(0,0,0,.06)",
+    MEDIUM: "0 6px 16px rgba(0,0,0,.08)",
+    LARGE: "0 16px 40px rgba(0,0,0,.12)",
+  };
+
+  /** One text_style() prefix -> the generic vars, as SiteFooter.vue does it. */
+  function textStyleVars(prefix, defaultTransform, fallbackSize) {
+    const v = s.value;
+    const size = num(v[`${prefix}_SIZE`], fallbackSize);
+    const weight = FONT_WEIGHTS[v[`${prefix}_WEIGHT`]] ?? num(v[`${prefix}_WEIGHT`], 400);
+    return {
+      "--osi-fs": `${size}px`,
+      "--osi-fs-mobile": `${num(v[`${prefix}_SIZE_MOBILE`], size)}px`,
+      "--osi-fw": weight,
+      "--osi-lh": `${num(v[`${prefix}_LINE_HEIGHT`], 130) / 100}`,
+      "--osi-ls": `${num(v[`${prefix}_LETTER_SPACING`], 0) / 100}em`,
+      "--osi-ff": FONT_FAMILIES[v[`${prefix}_FONT`]] ?? "inherit",
+      color: v[`${prefix}_COLOR`] || undefined,
+      textTransform:
+        TEXT_TRANSFORMS[v[`${prefix}_TRANSFORM`]] ?? TEXT_TRANSFORMS[defaultTransform],
+    };
+  }
+
+  const titleStyle = computed(() => textStyleVars("CARD_TITLE", "UPPERCASE", 13));
+  const textStyle = computed(() => textStyleVars("CARD_TEXT", "NONE", 14));
+
+  /* ------------------------------------------------------------------ icons */
+
+  // 24x24, currentColor, stroke-based so one size/colour setting drives them all.
+  // Brand marks are simplified geometry, not official logo paths — swap for
+  // licensed assets if that matters. Keep in step with the footer's icon map.
+  const ICONS = {
+    address:
+      '<path d="M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11Z"/><circle cx="12" cy="10" r="2.6"/>',
+    phone:
+      '<path d="M5 4h3l1.8 4.5-2 1.2a12.5 12.5 0 0 0 6.5 6.5l1.2-2L20 16v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 3 6.2 2 2 0 0 1 5 4Z"/>',
+    whatsapp:
+      '<path d="M4.2 19.8 5.6 16A8 8 0 1 1 9 19.2l-4.8.6Z"/><path d="M9.4 9.2c.4 1.7 2.2 3.5 3.9 3.9l.9-1.1 1.7.8-.3 1.5c-2.7.4-6-2.9-5.8-5.6l1.4-.5.2 1Z"/>',
+    email: '<rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.8 7.5 8.2 5.6 8.2-5.6"/>',
+    hours: '<circle cx="12" cy="12" r="8.5"/><path d="M12 7.2V12l3.2 2"/>',
+    directions: '<path d="M12 3.2 20.5 20.8 12 17l-8.5 3.8L12 3.2Z"/>',
+
+    FACEBOOK:
+      '<path d="M14.5 21v-7h2.3l.4-3h-2.7V9.2c0-.9.3-1.4 1.5-1.4H17V5.1c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.8V11H9v3h2.1v7Z" fill="currentColor" stroke="none"/>',
+    INSTAGRAM:
+      '<rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r="1.1" fill="currentColor" stroke="none"/>',
+    X: '<path d="M4.5 4.5 19.5 19.5M19.5 4.5 4.5 19.5"/>',
+    TIKTOK:
+      '<path d="M14 4v9.6a3.6 3.6 0 1 1-3.1-3.6"/><path d="M14 4.2c.5 2.3 2.2 3.7 4.5 3.9"/>',
+    YOUTUBE:
+      '<rect x="2.5" y="6" width="19" height="12" rx="4"/><path d="M10.8 9.4 15.4 12l-4.6 2.6Z" fill="currentColor" stroke="none"/>',
+    LINKEDIN:
+      '<rect x="3.5" y="3.5" width="17" height="17" rx="3.5"/><path d="M7.8 10.4v6.4M7.8 7.3v.1M11.4 16.8v-4a2.4 2.4 0 0 1 4.8 0v4"/>',
+    WHATSAPP:
+      '<path d="M4.2 19.8 5.6 16A8 8 0 1 1 9 19.2l-4.8.6Z"/><path d="M9.4 9.2c.4 1.7 2.2 3.5 3.9 3.9l.9-1.1 1.7.8-.3 1.5c-2.7.4-6-2.9-5.8-5.6l1.4-.5.2 1Z"/>',
+    TELEGRAM:
+      '<path d="M21 4.5 2.8 11.4l5.4 1.8L18.6 7l-8.4 8 .3 4.4 2.8-3.4 4.3 3L21 4.5Z"/>',
+    PINTEREST:
+      '<circle cx="12" cy="12" r="8.5"/><path d="M10.6 20.2c-.6-2 .1-4.5.6-6.5M9.8 12.6c-.9-2.7.8-5.3 3.5-5.3 2.1 0 3.6 1.4 3.6 3.4 0 2.4-1.4 4.2-3.2 4.2-.9 0-1.5-.7-1.3-1.5"/>',
+    SNAPCHAT:
+      '<path d="M12 4.2c2.4 0 3.9 1.8 3.9 4.1 0 1.6-.2 2.3.6 2.6.6.2 1.3-.4 1.6.2.3.6-.6 1.1-1.6 1.5-.5.2-.3.8.3 1.5.6.7 1.6 1 2 1.1.4.1.3.6-.3.9-.9.4-1.8.3-2.2.8-.2.3-.1.8-.7.8-.8 0-1.4-.5-2.5-.5s-1.7.5-2.5.5c-.6 0-.5-.5-.7-.8-.4-.5-1.3-.4-2.2-.8-.6-.3-.7-.8-.3-.9.4-.1 1.4-.4 2-1.1.6-.7.8-1.3.3-1.5-1-.4-1.9-.9-1.6-1.5.3-.6 1 0 1.6-.2.8-.3.6-1 .6-2.6 0-2.3 1.5-4.1 3.7-4.1Z"/>',
+    WEBSITE:
+      '<path d="M10.3 13.7a3.2 3.2 0 0 0 4.6 0l2.6-2.6a3.2 3.2 0 0 0-4.6-4.6l-1.1 1.1"/><path d="M13.7 10.3a3.2 3.2 0 0 0-4.6 0l-2.6 2.6a3.2 3.2 0 0 0 4.6 4.6l1.1-1.1"/>',
+  };
+
+  const PLATFORM_LABELS = {
+    FACEBOOK: "Facebook",
+    INSTAGRAM: "Instagram",
+    X: "X",
+    TIKTOK: "TikTok",
+    YOUTUBE: "YouTube",
+    LINKEDIN: "LinkedIn",
+    WHATSAPP: "WhatsApp",
+    TELEGRAM: "Telegram",
+    PINTEREST: "Pinterest",
+    SNAPCHAT: "Snapchat",
+    WEBSITE: "Website",
+  };
+
+  /* ---------------------------------------------------------------- content */
+
+  const address = computed(() => t(s.value.ADDRESS));
+  const hours = computed(() => t(s.value.HOURS));
+  const subheading = computed(() => t(s.value.SUBHEADING));
+
+  // tel: strips everything but digits and a leading +; wa.me needs bare digits.
+  const telHref = computed(() => `tel:${String(s.value.PHONE ?? "").replace(/[^\d+]/g, "")}`);
+  const waHref = computed(
+    () => `https://wa.me/${String(s.value.WHATSAPP ?? "").replace(/\D/g, "")}`
+  );
+
+  /** target/rel as one object so every external link gets both, or neither. */
+  const external = computed(() =>
+    s.value.OPEN_IN_NEW_TAB !== false ? { target: "_blank", rel: "noopener noreferrer" } : {}
+  );
+
+  const contactLinks = computed(() => {
+    const out = [];
+    if (s.value.PHONE) {
+      out.push({
+        id: "phone",
+        icon: "phone",
+        href: telHref.value,
+        text: t(s.value.PHONE_LABEL) || s.value.PHONE,
+        external: false,
+      });
+    }
+    if (s.value.WHATSAPP) {
+      out.push({
+        id: "whatsapp",
+        icon: "whatsapp",
+        href: waHref.value,
+        text: t(s.value.WHATSAPP_LABEL) || s.value.WHATSAPP,
+        external: true,
+      });
+    }
+    if (s.value.EMAIL) {
+      out.push({
+        id: "email",
+        icon: "email",
+        href: `mailto:${s.value.EMAIL}`,
+        text: t(s.value.EMAIL_LABEL) || s.value.EMAIL,
+        external: false,
+      });
+    }
+    return out;
+  });
+
+  const directions = computed(() => {
+    if (!s.value.MAP_URL || s.value.SHOW_DIRECTIONS === false) return null;
+    return {
+      href: s.value.MAP_URL,
+      label: t(s.value.DIRECTIONS_LABEL) || "Get directions",
+    };
+  });
+
+  // Split on the merchant's own line breaks — no parsing of days or times, so
+  // nothing about their formatting is second-guessed.
+  const hoursRows = computed(() =>
+    hours.value
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter(Boolean)
+  );
+  const hoursAsRows = computed(
+    () => s.value.HOURS_STYLE === "ROWS" && hoursRows.value.length > 1
+  );
+
+  const socials = computed(() =>
+    (props.section.blocks ?? [])
+      .map((block) => {
+        const b = block.settings ?? {};
+        // Tolerates the free-text platform names saved before PLATFORM became a
+        // select ('instagram', 'Instagram') so old blocks keep their icon.
+        const raw = String(b.PLATFORM ?? "").trim().toUpperCase();
+        const platform = ICONS[raw] ? raw : "WEBSITE";
+        return {
+          key: block.key,
+          platform,
+          label: t(b.LABEL) || PLATFORM_LABELS[platform] || "Link",
+          url: b.URL,
+        };
+      })
+      .filter((item) => item.url)
+  );
+
+  const socialPosition = computed(() =>
+    socials.value.length ? oneOf(s.value.SOCIAL_POSITION, ["BELOW", "ABOVE", "CARD"]) : null
+  );
+
+  /* ----------------------------------------------------------------- items */
+
+  /**
+   * The cards, in render order, with everything each one needs resolved.
+   * Building the list here rather than as three v-ifs in the template is what
+   * lets COLUMNS clamp to the real count, and keeps the "never an empty card"
+   * rule in one place.
+   */
+  const items = computed(() => {
+    const out = [];
+
+    if (address.value) {
+      out.push({
+        id: "address",
+        icon: "address",
+        title: t(s.value.ADDRESS_TITLE),
+        text: address.value,
+      });
+    }
+
+    if (contactLinks.value.length) {
+      out.push({
+        id: "contact",
+        icon: "phone",
+        title: t(s.value.CONTACT_TITLE),
+        links: contactLinks.value,
+      });
+    }
+
+    if (hours.value) {
+      out.push({
+        id: "hours",
+        icon: "hours",
+        title: t(s.value.HOURS_TITLE),
+        text: hours.value,
+        rows: hoursAsRows.value ? hoursRows.value : null,
+      });
+    }
+
+    if (socialPosition.value === "CARD") {
+      out.push({
+        id: "social",
+        icon: "WEBSITE",
+        title: t(s.value.SOCIAL_TITLE),
+        social: true,
+      });
+    }
+
+    return out;
+  });
+
+  /* ---------------------------------------------------------------- layout */
+
+  const layout = computed(() => oneOf(s.value.LAYOUT, ["CARDS", "INLINE"]));
+  const cardStyle = computed(() =>
+    oneOf(s.value.CARD_STYLE, ["OUTLINE", "FILLED", "ELEVATED", "MINIMAL"])
+  );
+  const contentAlign = computed(() =>
+    oneOf(s.value.CONTENT_ALIGNMENT, ["LEFT", "CENTER", "RIGHT"])
+  );
+
+  const showIcons = computed(() => s.value.SHOW_ICONS !== false);
+  const iconPosition = computed(() =>
+    showIcons.value ? oneOf(s.value.ICON_POSITION, ["TOP", "START", "INLINE"]) : "NONE"
+  );
+  const iconShape = computed(() => oneOf(s.value.ICON_SHAPE, ["PLAIN", "CIRCLE", "SQUARE"]));
+  // Fill only means something inside a shape; PLAIN has no box to fill.
+  const iconFill = computed(() =>
+    iconShape.value === "PLAIN" ? "OUTLINE" : oneOf(s.value.ICON_FILL, ["FILLED", "OUTLINE"])
+  );
+
+  const socialDisplay = computed(() =>
+    oneOf(s.value.SOCIAL_DISPLAY, ["ICONS", "ICON_TEXT", "TEXT"])
+  );
+  const socialShowsIcon = computed(() => socialDisplay.value !== "TEXT");
+  const socialShowsText = computed(() => socialDisplay.value !== "ICONS");
+  const socialShape = computed(() =>
+    socialShowsIcon.value
+      ? oneOf(s.value.SOCIAL_ICON_SHAPE, ["PLAIN", "CIRCLE", "SQUARE"])
+      : "PLAIN"
+  );
+  const socialFill = computed(() =>
+    socialShape.value === "PLAIN"
+      ? "OUTLINE"
+      : oneOf(s.value.SOCIAL_ICON_FILL, ["FILLED", "OUTLINE"])
+  );
+
+  /**
+   * Grid columns, clamped by how many cards actually exist — three columns with
+   * one filled-in card is one full-width card, never one card and two holes.
+   * repeat() can't take min(), so the clamp happens here.
+   */
+  const gridStyle = computed(() => {
+    if (layout.value !== "CARDS") return {};
+    const wanted = Math.max(1, Math.min(4, num(s.value.COLUMNS, 3)));
+    const columns = Math.max(1, Math.min(wanted, items.value.length));
+    return { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+  });
+
+  const listStyle = computed(() => {
+    if (layout.value === "INLINE") {
+      return { justifyContent: FLEX_ALIGNMENTS[contentAlign.value] };
+    }
+    if (s.value.EQUAL_HEIGHT === false) {
+      return { alignItems: VERTICAL_ALIGNMENTS[s.value.ITEM_VERTICAL_ALIGNMENT] ?? "start" };
+    }
+    return {};
+  });
+
+  const socialListStyle = computed(() => ({
+    justifyContent: FLEX_ALIGNMENTS[oneOf(s.value.SOCIAL_ALIGNMENT, ["CENTER", "LEFT", "RIGHT"])],
+    // Above/below sit in a flex column with the header and the grid; order is
+    // what places them, so there's no third copy of this markup below.
+    order: socialPosition.value === "ABOVE" ? -1 : 1,
+  }));
+
+  /* -------------------------------------------------------------- variables */
+
+  const styleVars = computed(() =>
+    compact({
+      // Unset inherits the theme's grid gap rather than a number invented here.
+      "--osi-ci-gap": pxVar(s.value.ITEM_GAP) ?? "var(--osi-grid-gap)",
+      "--osi-ci-align": TEXT_ALIGNMENTS[contentAlign.value],
+      "--osi-ci-flex-align": FLEX_ALIGNMENTS[contentAlign.value],
+
+      "--osi-ci-card-bg": s.value.CARD_BG_COLOR || undefined,
+      "--osi-ci-card-border": s.value.CARD_BORDER_COLOR || undefined,
+      "--osi-ci-card-radius": pxVar(s.value.CARD_BORDER_RADIUS),
+      "--osi-ci-card-pad": pxVar(s.value.CARD_PADDING),
+      "--osi-ci-card-shadow": SHADOWS[s.value.CARD_SHADOW],
+
+      "--osi-ci-icon-size": pxVar(s.value.ICON_SIZE),
+      "--osi-ci-icon-color": s.value.ICON_COLOR || undefined,
+      "--osi-ci-icon-bg": s.value.ICON_BG_COLOR || undefined,
+
+      "--osi-ci-social-size": pxVar(s.value.SOCIAL_ICON_SIZE),
+      "--osi-ci-social-gap": pxVar(s.value.SOCIAL_GAP),
+      "--osi-ci-social-color": s.value.SOCIAL_COLOR || undefined,
+      "--osi-ci-social-bg": s.value.SOCIAL_BG_COLOR || undefined,
+    })
+  );
+
+  const sectionStyle = computed(() => ({ ...shellStyle.value, ...styleVars.value }));
+
+  const rootClasses = computed(() => [
+    customClass.value,
+    `osi-ci--${layout.value.toLowerCase()}`,
+    `osi-ci--card-${cardStyle.value.toLowerCase()}`,
+    `osi-ci--icon-${iconPosition.value.toLowerCase()}`,
+    `osi-ci--iconshape-${iconShape.value.toLowerCase()}`,
+    `osi-ci--iconfill-${iconFill.value.toLowerCase()}`,
+    `osi-ci--mobile-${oneOf(s.value.MOBILE_LAYOUT, ["STACKED", "SWIPE"]).toLowerCase()}`,
+    { "osi-ci--plain-links": s.value.UNDERLINE_LINKS === false },
+  ]);
+
+  const socialClasses = computed(() => [
+    `osi-ci-socials--shape-${socialShape.value.toLowerCase()}`,
+    `osi-ci-socials--fill-${socialFill.value.toLowerCase()}`,
+    { "osi-ci-socials--text": !socialShowsIcon.value },
+  ]);
+
+  const directionsClasses = computed(() => {
+    const style = oneOf(s.value.DIRECTIONS_STYLE, ["UNDERLINE", "SOLID", "OUTLINE", "TEXT"]);
+    const size = oneOf(s.value.DIRECTIONS_SIZE, ["MEDIUM", "SMALL", "LARGE"]);
+    return [
+      "osi-btn",
+      `osi-btn--${style.toLowerCase()}`,
+      size === "SMALL" && "osi-btn--sm",
+      size === "LARGE" && "osi-btn--lg",
+    ].filter(Boolean);
+  });
+
+  const hasBody = computed(() => items.value.length > 0 || socials.value.length > 0);
+
+  return { s, t, shellStyle, innerStyle, align, customClass, heading, num, has, compact, pxVar, oneOf, TEXT_ALIGNMENTS, FLEX_ALIGNMENTS, VERTICAL_ALIGNMENTS, TEXT_TRANSFORMS, FONT_WEIGHTS, FONT_FAMILIES, SHADOWS, textStyleVars, titleStyle, textStyle, ICONS, PLATFORM_LABELS, address, hours, subheading, telHref, waHref, external, contactLinks, directions, hoursRows, hoursAsRows, socials, socialPosition, items, layout, cardStyle, contentAlign, showIcons, iconPosition, iconShape, iconFill, socialDisplay, socialShowsIcon, socialShowsText, socialShape, socialFill, gridStyle, listStyle, socialListStyle, styleVars, sectionStyle, rootClasses, socialClasses, directionsClasses, hasBody };
+}

package/app/logic/sections/ContentNode.js

@@ -0,0 +1,189 @@
+import { NuxtLink } from "#components";
+import { h } from "vue";
+import { buttonClasses as toButtonClasses, buttonVars } from "#osi/composables/useButtonStyle";
+
+export default function useLogic({ props }) {
+  // Editor-only hints (an empty group's "Add blocks…") never reach the live store.
+  const { isPreview } = useBuilderPreview();
+
+  const NuxtLinkComponent = NuxtLink;
+  const STAR = "M12 2.8l2.84 5.76 6.36.92-4.6 4.49 1.09 6.33L12 17.31l-5.69 2.99 1.09-6.33-4.6-4.49 6.36-.92L12 2.8z";
+  const n = computed(() => props.node);
+
+  // Keep in sync with FEATURE_ICON_PRESET_CHOICES in builder/schemas.py.
+  const ICONS = {
+    truck: "M3 6h11v9H3zM14 9h4l3 3v3h-7M7.5 18.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM17.5 18.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
+    shield: "M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z",
+    return: "M9 14L4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3",
+    headset: "M4 14v-2a8 8 0 0 1 16 0v2M4 14h3v5H5a1 1 0 0 1-1-1v-4zM20 14h-3v5h2a1 1 0 0 0 1-1v-4z",
+    gift: "M4 11h16v9H4zM3 7h18v4H3zM12 7v13M12 7c-1.5-3-5-3-5-1s3 1 5 1c2 0 5 1 5-1s-3.5-2-5 1z",
+    tag: "M3 12V4h8l10 10-8 8L3 12zM7.5 8.5h.01",
+    credit_card: "M3 6h18v12H3zM3 10h18M7 15h3",
+    leaf: "M5 19c0-9 6-14 15-14 0 9-5 15-14 15M5 19l7-7",
+    star: "M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.5 9.7l5.9-.9L12 3.5z",
+    clock: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2",
+    globe: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3c2.5 2.5 3.5 5.5 3.5 9s-1 6.5-3.5 9c-2.5-2.5-3.5-5.5-3.5-9s1-6.5 3.5-9z",
+    heart: "M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z",
+  };
+
+  /* The wishlist button's icons (CARD_IMAGE WISHLIST_ICON). */
+  const WISH_ICONS = {
+    HEART: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z",
+    STAR: "M11.48 3.5a.56.56 0 0 1 1.04 0l2.12 5.11a.56.56 0 0 0 .48.35l5.52.44c.5.04.7.66.32.99l-4.2 3.6a.56.56 0 0 0-.18.56l1.28 5.39a.56.56 0 0 1-.84.61l-4.73-2.89a.56.56 0 0 0-.58 0l-4.73 2.89a.56.56 0 0 1-.84-.61l1.28-5.39a.56.56 0 0 0-.18-.56l-4.2-3.6a.56.56 0 0 1 .32-.99l5.52-.44a.56.56 0 0 0 .48-.35l2.12-5.11Z",
+    BOOKMARK: "M17.6 3.32c1.1.13 1.9 1.07 1.9 2.18V21L12 17.25 4.5 21V5.5c0-1.11.8-2.05 1.9-2.18a48.5 48.5 0 0 1 11.2 0Z",
+  };
+  /* The buy button's icons (CARD_BUTTON ICON). */
+  const BTN_ICONS = {
+    BAG: "M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007Z",
+    CART: "M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z",
+    PLUS: "M12 4.5v15m7.5-7.5h-15",
+  };
+  const WISH_DEFAULT = { icon: "HEART", svg: "", position: "top-right", plain: false, hover: false, vars: {} };
+
+  const button = computed(() => {
+    if (n.value.type !== "BUTTON") return null;
+    const s = n.value.s;
+    return { style: buttonVars(s, "BUTTON"), classes: toButtonClasses(s, "BUTTON", ["osi-cb-btn"]) };
+  });
+
+  // Wrapper element: a link when the block has one (never nested — the tree
+  // builder drops a group's link when its subtree already holds links).
+  const wrapperTag = computed(() => (n.value.link && !props.item ? NuxtLinkComponent : "div"));
+
+  /* ---- card template parts */
+  const partText = computed(() => {
+    const item = props.item;
+    const node = n.value;
+    if (!item) {
+      // Drawn without an item (e.g. an empty list in the builder): sample text.
+      return { title: "Category name", count: "12 products", description: "A short description." }[node.part] ?? "";
+    }
+    if (node.part === "title") return [node.prefix, item.title].filter(Boolean).join(" ");
+    if (node.part === "count") {
+      if (item.count == null) return "";
+      return `${item.count} ${item.count === 1 ? node.singular : node.plural}`;
+    }
+    if (node.part === "description") return item.description || "";
+    return "";
+  });
+  const cardButton = computed(() => {
+    if (n.value.type !== "CARD_BUTTON") return null;
+    const s = n.value.s;
+    return { style: buttonVars(s, "BUTTON"), classes: toButtonClasses(s, "BUTTON", ["osi-cb-btn"]) };
+  });
+
+  /* ---- product card parts (PRODUCT_LIST: items from useProductItems) */
+  const isProduct = computed(() => props.item?.kind === "PRODUCT");
+  const analytics = useAnalytics();
+  function onCardClick(event) {
+    if (!isProduct.value) return;
+    if (event?.target?.closest?.("button, [role='button'], input, select, label")) return;
+    analytics.selectItem(props.item.raw);
+  }
+
+  /**
+   * The Buy button for this product: its label, and what a click does —
+   * add straight to cart, open quick buy (products with options), or nothing
+   * (the card's own link opens the product).
+   */
+  const productButton = computed(() => {
+    const node = n.value;
+    const item = props.item;
+    if (node.type !== "CARD_BUTTON" || !isProduct.value) return null;
+    if (item.soldOut) return { label: node.soldOutLabel, disabled: true };
+    // No price: not for sale yet — its normal label, disabled.
+    if (!item.price) return { label: node.label, disabled: true };
+    if (node.action === "LINK") return { label: node.label };
+    if (!item.hasOptions) return { label: node.label, adds: true };
+    if (node.action === "QUICK_BUY") return { label: node.optionsLabel, quick: true };
+    return { label: node.optionsLabel }; // ADD_TO_CART with options: the product page
+  });
+
+  /**
+   * The card is one link; buttons inside it can't be <button>s (interactive
+   * content inside <a>), so they're role=button spans that stop the link.
+   * Anything that doesn't act lets the click through to the card's link.
+   */
+  function onCardButton(e) {
+    const b = productButton.value;
+    if (!b || !(b.adds || b.quick || b.disabled)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (b.adds) props.item.addToCart?.();
+    else if (b.quick) props.item.openQuickBuy?.(n.value.quickBuyStyle);
+  }
+  function onCardButtonKey(e) {
+    if (e.key === "Enter" || e.key === " ") onCardButton(e);
+  }
+  function onWishlist(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    props.item?.toggleWishlist?.();
+  }
+
+  /**
+   * A Text block's element (<h1>…<h6> or <div>) with its HTML inside.
+   * Not `<component :is v-html>`: Vue's server renderer drops v-html on a
+   * dynamic component, so the server sent an empty <h2> and the title only
+   * appeared once the page hydrated. A plain element vnode with innerHTML is
+   * rendered on the server. class / style / data-* fall through to it.
+   */
+  const RichTag = (props) => h(props.tag || "div", { innerHTML: props.html ?? "" });
+  RichTag.props = ["tag", "html"];
+
+  /**
+   * Badges on a product image: coming soon / sold out / a custom badge / "Sale"
+   * for a 1-item sale — the first that applies — else one per quantity-tier
+   * sale ("Buy 8, save $6").
+   */
+  const productBadges = computed(() => {
+    const item = props.item;
+    const node = n.value;
+    if (!isProduct.value || node.type !== "CARD_IMAGE" || !node.badges) return [];
+    let status;
+    if (item.comingSoon) status = [{ key: "soon", label: "Coming soon", kind: "muted" }];
+    else if (item.soldOut) status = [{ key: "out", label: node.soldOutLabel, kind: "soldout" }];
+    else if (item.badge) status = [{ key: "custom", label: item.badge, kind: "custom" }];
+    else if (item.onSale) status = [{ key: "sale", label: node.saleLabel, kind: "sale" }];
+    else status = (item.offers ?? []).map((offer) => ({ key: offer.id, label: offer.text, kind: "sale" }));
+    // Then the brand and categories, when turned on (BADGE_BRAND / BADGE_CATEGORIES).
+    const info = [];
+    if (node.badgeBrand && item.brand) info.push({ key: "brand", label: item.brand, kind: "info" });
+    if (node.badgeCategories) {
+      for (const name of (item.categories ?? []).slice(0, 3)) info.push({ key: `cat-${name}`, label: name, kind: "info" });
+    }
+    return [...status, ...info];
+  });
+
+  /**
+   * The badges in their corners: one group, or two when the brand / category
+   * badges have their own corner (BADGE_INFO_POSITION) — each group only if it
+   * has badges.
+   */
+  const badgeGroups = computed(() => {
+    const all = productBadges.value;
+    const node = n.value;
+    const apart = node.badgeInfoPosition && node.badgeInfoPosition !== node.badgePosition;
+    if (!apart) return all.length ? [{ key: "all", position: node.badgePosition, badges: all }] : [];
+    const status = all.filter((b) => b.kind !== "info");
+    const info = all.filter((b) => b.kind === "info");
+    return [
+      status.length && { key: "status", position: node.badgePosition, badges: status },
+      info.length && { key: "info", position: node.badgeInfoPosition, badges: info },
+    ].filter(Boolean);
+  });
+
+  /** Swatch groups (one per option), each cut to MAX with a "+N". */
+  const swatchGroups = computed(() => {
+    const max = n.value.max ?? 5;
+    const options = (props.item?.options ?? []).filter((o) => n.value.show !== "COLOR" || o.isColor);
+    return options.map((o) => ({
+      key: o.key,
+      name: o.name,
+      shown: o.values.slice(0, max),
+      more: Math.max(0, o.values.length - max),
+    }));
+  });
+
+  return { isPreview, NuxtLinkComponent, STAR, n, ICONS, WISH_ICONS, BTN_ICONS, WISH_DEFAULT, button, wrapperTag, partText, cardButton, isProduct, analytics, onCardClick, productButton, onCardButton, onCardButtonKey, onWishlist, RichTag, productBadges, badgeGroups, swatchGroups, h };
+}